refactor(demo-pwa): chat base demo (#564)

Alwatr · Dec 25, 2022 · 2f2b919 · 2f2b919
2 parents 63b5bf0 + 1ccfb17
commit 2f2b919
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 21 deletions.
diff --git a/ui/demo-pwa/index.html b/ui/demo-pwa/index.html
@@ -69,9 +69,9 @@
   <link rel="canonical" href="https://demo.alwatr.ir" />
 </head>
 <body>
-  <alwatr-pwa></alwatr-pwa>
+  <alwatr-pwa-root></alwatr-pwa-root>
 
-  <script type="module" src="build/alwatr-pwa.js"></script>
+  <script type="module" src="build/pwa-root.js"></script>
 
   <noscript>
     <div class="noscript">

diff --git a/ui/demo-pwa/src/alwatr-page-home.ts → ui/demo-pwa/src/demo-chat.ts b/ui/demo-pwa/src/alwatr-page-home.ts → ui/demo-pwa/src/demo-chat.ts
@@ -1,21 +1,20 @@
-import {AlwatrElement, css, html} from '@alwatr/element';
+import {customElement, AlwatrElement, css, html} from '@alwatr/element';
 import {l10n} from '@alwatr/i18n';
-import {customElement} from 'lit/decorators.js';
 
-import '@alwatr/icon';
+import '@alwatr/ui-kit/chat/chat-avatar.js';
 
 import type {TemplateResult} from '@alwatr/element';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'page-home': AlwatrDemoHome;
+    'alwatr-demo-chat': AlwatrDemoHome;
   }
 }
 
 /**
  * Alwatr Demo Home Page
  */
-@customElement('alwatr-page-home')
+@customElement('alwatr-demo-chat')
 export class AlwatrDemoHome extends AlwatrElement {
   static override styles = [
     css`
@@ -39,10 +38,9 @@ export class AlwatrDemoHome extends AlwatrElement {
   override render(): TemplateResult {
     return html`
       <section>
-        <h1>
-          <alwatr-icon name="home-outline"></alwatr-icon>
-          ${l10n.localize('page_home')}
-        </h1>
+        <alwatr-chat-avatar user="1"></alwatr-chat-avatar>
+        <alwatr-chat-avatar user="2"></alwatr-chat-avatar>
+        <alwatr-chat-avatar user="3"></alwatr-chat-avatar>
       </section>
     `;
   }

diff --git a/ui/demo-pwa/src/alwatr-pwa.ts → ui/demo-pwa/src/pwa-root.ts b/ui/demo-pwa/src/alwatr-pwa.ts → ui/demo-pwa/src/pwa-root.ts
@@ -1,24 +1,24 @@
-import {AlwatrElement, css, html} from '@alwatr/element';
+import {AlwatrElement, css, html, cache} from '@alwatr/element';
 import {l10n} from '@alwatr/i18n';
 import {router} from '@alwatr/router';
 import {customElement} from 'lit/decorators.js';
 
-import './alwatr-page-home.js';
+import './demo-chat.js';
 
 import type {TemplateResult} from '@alwatr/element';
 import type {RoutesConfig} from '@alwatr/router';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'alwatr-pwa': AlwatrPWA;
+    'alwatr-pwa-root': AlwatrPwaRoot;
   }
 }
 
 /**
  * Alwatr PWA Root Element
  */
-@customElement('alwatr-pwa')
-export class AlwatrPWA extends AlwatrElement {
+@customElement('alwatr-pwa-root')
+export class AlwatrPwaRoot extends AlwatrElement {
   static override styles = [
     css`
       :host {
@@ -54,12 +54,12 @@ export class AlwatrPWA extends AlwatrElement {
     map: (route) => route.sectionList[0]?.toString(),
     list: {
       home: {
-        render: () => html`<alwatr-page-home></alwatr-page-home>`,
+        render: () => html`<alwatr-demo-chat></alwatr-demo-chat>`,
       },
     },
   };
 
   override render(): TemplateResult {
-    return html`<main class="page-container">${router.outlet(this._routes)}</main>`;
+    return html`<main class="page-container">${cache(router.outlet(this._routes))}</main>`;
   }
 }
diff --git a/ui/demo-pwa/tsconfig.json b/ui/demo-pwa/tsconfig.json
@@ -16,10 +16,11 @@
   "include": ["src/**/*.ts"],
   "exclude": [],
   "references": [
-    {"path": "../../ui/element"},
-    {"path": "../../ui/icon"},
-    {"path": "../../core/i18n"},
     {"path": "../../core/logger"},
     {"path": "../../core/router"},
+    {"path": "../../core/i18n"},
+    {"path": "../../ui/element"},
+    {"path": "../../ui/icon"},
+    {"path": "../../ui/ui-kit"},
   ]
 }
diff --git a/ui/element/src/element.ts b/ui/element/src/element.ts
@@ -14,6 +14,7 @@ export {when} from 'lit/directives/when.js';
 export {repeat} from 'lit/directives/repeat.js';
 export {ifDefined} from 'lit/directives/if-defined.js';
 export {unsafeSVG} from 'lit/directives/unsafe-svg.js';
+export {cache} from 'lit/directives/cache.js';
 
 alwatrRegisteredList.push({
   name: '@alwatr/element',