feat(lit+ui-kit): example added and moved shim for lit html locally

Stradivario · Oct 6, 2021 · 0fb5033 · 0fb5033
1 parent bd8f621
commit 0fb5033
Show file tree

Hide file tree

Showing 10 changed files with 7,692 additions and 3 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -19,6 +19,7 @@
     "https://cdn.esm.sh": false,
     "https://deno.land": true,
     "https://cdn.spooky.click": false,
-    "https://raw.githubusercontent.com": false
+    "https://raw.githubusercontent.com": false,
+    "http://localhost:8080": false
   } // also provides unstable type declarations in VS Code
 }
diff --git a/README.md b/README.md
@@ -92,4 +92,54 @@ export default Litre({
     </html>
   `,
 });
+```
+
+
+
+### Partially Hydrated server side rendering
+
+We define components to be loaded after javascript is loaded
+
+```typescript
+import {
+  Component,
+  html,
+  LitElement,
+} from 'http://localhost:8080/@rxdi/lit-html';
+
+@Component({
+  selector: 'app-root',
+  template(this) {
+    return html`
+      <rx-button palette="danger">Test Button</rx-button>
+      <rx-accordion-item>
+        <div slot="title">Why should i upgrade ?</div>
+        <div slot="content">Optimized for best experience...</div>
+      </rx-accordion-item> `;
+  },
+})
+export class AppRoot extends LitElement {}
+
+export default Litre({
+  page: () => Ocean.html`
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <title>My app</title>
+        <script type="module">
+          import 'http://localhost:8080/@rxdi/ui-kit/accordion-item';
+          import 'http://localhost:8080/@rxdi/ui-kit/button';
+          
+          import { Bootstrap} from 'http://localhost:8080/@rxdi/core';
+          import { ReactiveUiModule } from 'http://localhost:8080/@rxdi/ui-kit';
+          Bootstrap(ReactiveUiModule.forRoot()).subscribe()
+        </script>
+      </head>
+      <body>
+        <app-root></app-root>
+      </body>
+    </html>
+  `,
+});
 ```
diff --git a/example/lit+ui-kit/app/app.ts b/example/lit+ui-kit/app/app.ts
@@ -0,0 +1,41 @@
+import {
+  Component,
+  html,
+  LitElement,
+} from 'http://localhost:8080/@rxdi/lit-html';
+
+@Component({
+  selector: 'app-root',
+  template(this) {
+    return html`
+      <rx-button palette="danger">Test Button</rx-button>
+      <rx-accordion-item>
+        <div slot="title">Why should i upgrade ?</div>
+        <div slot="content">Optimized for best experience...</div>
+      </rx-accordion-item> `;
+  },
+})
+export class AppRoot extends LitElement {}
+
+export default Litre({
+  page: () => Ocean.html`
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <title>My app</title>
+        <script type="module">
+          import 'http://localhost:8080/@rxdi/ui-kit/accordion-item';
+          import 'http://localhost:8080/@rxdi/ui-kit/button';
+          
+          import { Bootstrap} from 'http://localhost:8080/@rxdi/core';
+          import { ReactiveUiModule } from 'http://localhost:8080/@rxdi/ui-kit';
+          Bootstrap(ReactiveUiModule.forRoot()).subscribe()
+        </script>
+      </head>
+      <body>
+        <app-root></app-root>
+      </body>
+    </html>
+  `,
+});
diff --git a/example/lit+ui-kit/importmap.json b/example/lit+ui-kit/importmap.json
@@ -0,0 +1,5 @@
+{
+  "imports": {
+    "@rxdi/lit-html": "https://cdn.esm.sh/v53/@rxdi/lit-html@0.7.127"
+  }
+}
diff --git a/example/lit+ui-kit/index.ts b/example/lit+ui-kit/index.ts
@@ -0,0 +1,7 @@
+import { start } from '../../src/mod.ts';
+
+start({
+  importmap: await Deno.readTextFile('importmap.json'),
+  folder: 'app',
+  port: 4200,
+});
diff --git a/example/lit+ui-kit/makefile b/example/lit+ui-kit/makefile
@@ -0,0 +1,8 @@
+dev:
+	mode=dev deno run --no-check --allow-net --allow-read --allow-env --allow-run --allow-write --import-map=importmap.json --unstable -c tsconfig.json index.ts
+
+start: 
+	deno run --no-check --allow-net --allow-read --allow-env --allow-run --allow-write --import-map=importmap.json --unstable -c tsconfig.json index.ts
+
+cache:
+	deno cache --reload --no-check -c tsconfig.json index.ts
diff --git a/example/lit+ui-kit/tsconfig.json b/example/lit+ui-kit/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "alwaysStrict": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "strict": true,
+    "strictBindCallApply": true,
+    "strictFunctionTypes": true,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": true
+  }
+}
diff --git a/src/shims/shim-lit.js → src/shims/lit/shim.js b/src/shims/shim-lit.js → src/shims/lit/shim.js
@@ -1,4 +1,4 @@
-import { LitElementRenderer } from "https://cdn.spooky.click/lit-labs-ssr-bundle/1.0.2/mod.js";
+import { LitElementRenderer } from "./ssr.js";
 
 export function isLit(Ctr) {
   return !!Ctr._$litElement$;