feat(demo-pwa): enhance fracting (#1349)

Alwatr · Jul 16, 2023 · cb2b7de · cb2b7de
2 parents 7f37795 + a1384b5
commit cb2b7de
Show file tree

Hide file tree

Showing 12 changed files with 294 additions and 80 deletions.
diff --git a/ui/demo-pwa/esbuild.mjs b/ui/demo-pwa/esbuild.mjs
@@ -21,7 +21,7 @@ const banner = '/* ..:: Alwatr PWA ::.. */\n';
 const srcDir = 'src';
 const resDir = 'res';
 const outDir = 'dist';
-const srcFilename = 'alwatr-pwa';
+const srcFilename = 'main';
 
 const cleanMode = process.argv.includes('--clean');
 const watchMode = process.argv.includes('--watch');
@@ -132,8 +132,8 @@ async function makeHtml() {
   }
 
   htmlContent = htmlContent
-      .replaceAll('alwatr-pwa.css', cssFilename)
-      .replaceAll('alwatr-pwa.js', jsFilename);
+      .replaceAll(`${srcFilename}.css`, cssFilename)
+      .replaceAll(`${srcFilename}.js`, jsFilename);
 
   await copyPromise; // wait to cp done
   await fs.writeFile(`${outDir}/index.html`, htmlContent, {encoding: 'utf-8', flag: 'w'});

diff --git a/ui/demo-pwa/res/index.html b/ui/demo-pwa/res/index.html
@@ -13,12 +13,12 @@
   <meta charset="utf-8" />
   <title>Alwatr UI Demo</title>
 
-  <link rel="preload" as="style" href="alwatr-pwa.css" fetchpriority="high" />
-  <link rel="preload" as="script" href="alwatr-pwa.js" fetchpriority="high" crossorigin />
+  <link rel="preload" as="style" href="main.css" fetchpriority="high" />
+  <link rel="preload" as="script" href="main.js" fetchpriority="high" crossorigin />
   <link
     media="print"
     rel="stylesheet"
-    href="alwatr-pwa.css"
+    href="main.css"
     onload="this.media='all';this.onload=null;"
   />
 
@@ -98,7 +98,7 @@
   >
     درحال بارگذاری...
   </div>
-  <script type="module" src="alwatr-pwa.js"></script>
+  <script type="module" src="main.js"></script>
   <noscript>
     <div class="text-titleLarge text-center px-8 py-20">
       <p dir="ltr" class="mb-4">Please enable JavaScript to view this website.</p>

diff --git a/ui/demo-pwa/res/play.html b/ui/demo-pwa/res/play.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="fa-IR" dir="rtl" class="h-full w-full [overscroll-behavior:none]">
+<head>
+  <base href="/" />
+
+  <meta charset="utf-8" />
+  <title>Alwatr UI Playground</title>
+
+  <link rel="stylesheet" href="main.css" />
+
+  <meta name="color-scheme" content="light dark" />
+  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#673ab7" />
+  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#673ab7" />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2, user-scalable=yes, viewport-fit=cover"
+  />
+
+  <link rel="shortcut icon" href="image/favicon.ico" />
+  <link rel="manifest" href="manifest.webmanifest" />
+  <!-- Add to home screen for Chrome on Android. Fallback for manifest.json -->
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="application-name" content="Alwatr PWA Starter" />
+  <!-- Add to home screen for Safari on iOS -->
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  <meta name="apple-mobile-web-app-title" content="Alwatr PWA Starter" />
+  <link rel="apple-touch-startup-image" href="image/icon-192.png" />
+  <!-- Home screen icons -->
+  <link rel="apple-touch-icon" href="image/icon-180.png" />
+  <!-- Tile icon for Windows 8 (144x144 + tile color) -->
+  <meta name="msapplication-TileImage" content="image/icon-512.png" />
+  <meta name="msapplication-TileColor" content="#673ab7" />
+  <meta name="msapplication-tap-highlight" content="no" />
+
+  <meta name="description" content="Alwatr Progressive Web Application Demo." />
+  <meta name="twitter:card" content="summary" />
+  <meta name="twitter:site" content="@alidotmd" />
+  <meta property="og:title" content="Alwatr UI Demo" />
+  <meta property="og:type" content="website" />
+  <meta
+    property="og:image"
+    content="https://repository-images.githubusercontent.com/441522257/86c54c14-edda-44cd-a9af-6430ef14a000"
+  />
+  <meta
+    property="og:image:secure_url"
+    content="https://repository-images.githubusercontent.com/441522257/86c54c14-edda-44cd-a9af-6430ef14a000"
+  />
+  <meta property="og:image:type" content="image/png" />
+  <meta property="og:image:width" content="500" />
+  <meta property="og:image:height" content="500" />
+  <meta property="og:image:alt" content="The Alwatr, Made with love for him." />
+  <meta name="og:description" content="Alwatr Progressive Web Application Demo." />
+
+  <link rel="canonical" href="https://demo.alwatr.ir" />
+</head>
+<body
+  class="h-full w-full max-w-full max-h-full m-0 p-0 overflow-clip transform-gpu break-words touch-pan-x touch-pan-y touch-pinch-zoom bg-background font-vazirmatn text-onBackground text-bodyMedium [contain:size_layout_paint_style] [overscroll-behavior:none]"
+>
+  <div
+    id="alwatr_pwa"
+    class="!flex h-full w-full max-w-full max-h-full flex-col flex-nowrap items-stretch overflow-clip [contain:size_layout_paint_style]"
+  >
+    درحال بارگذاری...
+  </div>
+</body>
+</html>
diff --git a/ui/demo-pwa/src/alwatr-pwa.css b/ui/demo-pwa/src/alwatr-pwa.css
diff --git a/ui/demo-pwa/src/alwatr-pwa.ts b/ui/demo-pwa/src/alwatr-pwa.ts
diff --git a/ui/demo-pwa/src/main.css b/ui/demo-pwa/src/main.css
@@ -0,0 +1,2 @@
+@import '@alwatr/style/main.css';
+@import '@alwatr/style/palettes/h260.css';
diff --git a/ui/demo-pwa/src/main.ts b/ui/demo-pwa/src/main.ts
@@ -0,0 +1,11 @@
+import {render} from '@alwatr/fract';
+
+import './main.css';
+import {appLogger} from './share/logger.js';
+import {alwatrPwa, alwatrPwaContainer} from './ui/alwatr-pwa.js';
+
+appLogger.logModule?.('main');
+
+alwatrPwaContainer.replaceChildren(); // clean content
+render(alwatrPwa(), alwatrPwaContainer);
+alwatrPwaContainer.removeAttribute('unresolved');
diff --git a/ui/demo-pwa/src/ui/alwatr-pwa.ts b/ui/demo-pwa/src/ui/alwatr-pwa.ts
@@ -0,0 +1,65 @@
+// TODO: rename me to index
+import {AlwatrDynamicDirective, directive, html, type PartInfo} from '@alwatr/fract';
+
+import {alwatrButton} from './button.js';
+import {appLogger} from '../share/logger.js';
+
+export type PageName = 'home' | 'favorites' | 'contact' | 'other' | '_404';
+
+appLogger.logModule?.('app');
+
+// function* renderApp(): unknown {
+//   yield html`${alwatrTopAppBar({
+//     headline: 'Alwatr PWA Demo',
+//   })}`;
+
+//   const main = alwatrObserve(router, (route: RouteContext) => {
+//     const page = <PageName>route.sectionList[0] ?? 'home';
+//     return cache(renderState(page, {
+//       home: () => html`<h1>home2...</h1>`,
+//       favorites: () => html`${alwatrPageTest(page)}`,
+//       other: () => html`${alwatrPageTest(page)}`,
+//       contact: () => html`<h1>call...</h1>`,
+//       _404: () => html`<h1>404!</h1>`,
+//       _default: '_404',
+//     }));
+//   });
+
+//   yield html`<main class="scroll-area">${main}</main>`;
+
+//   yield html`${alwatrNavigationBar({
+//     itemList: [
+//       {icon: icons.home, href: '/home'},
+//       {icon: icons.star, href: '/favorites'},
+//       {icon: icons.triangle, href: '/other'},
+//       {icon: icons.call, href: '/contact'},
+//     ],
+//   })}`;
+// }
+
+export class AlwatrPwaDirective extends AlwatrDynamicDirective {
+  constructor(partInfo: PartInfo) {
+    super(partInfo, '<alwatr-pwa>');
+  }
+
+  render(): unknown {
+    this._logger.logMethod?.('render');
+    return html`
+      <div class="p-10">
+        <h1 class="text-titleMedium text-center">سلام ...</h1>
+        ${alwatrButton({label: 'کلید ۱', extendClass: 'text-red-50'})}
+        ${alwatrButton({label: 'پریز ۲', disabled: true})}
+      </div>
+    `;
+  }
+}
+
+// TODO: send app rendered signal
+
+export const alwatrPwa = directive(AlwatrPwaDirective);
+
+export const alwatrPwaContainer = document.getElementById('alwatr_pwa')!;
+
+if (alwatrPwaContainer === null) {
+  throw new Error('Cannot find `<div id="alwatr_pwa">` element!');
+}
diff --git a/ui/demo-pwa/src/ui/app.ts b/ui/demo-pwa/src/ui/app.ts
diff --git a/ui/demo-pwa/src/ui/button.ts b/ui/demo-pwa/src/ui/button.ts
@@ -0,0 +1,29 @@
+import {AlwatrDynamicDirective, classMap, directive, html, type PartInfo} from '@alwatr/fract';
+
+export type ButtonOptions = {
+   /**
+   * Label.
+   */
+   label: string,
+
+   disabled?: boolean;
+
+   extendClass?: string
+}
+
+export class AlwatrButtonDirective extends AlwatrDynamicDirective {
+  constructor(partInfo: PartInfo) {
+    super(partInfo, '<alwatr-button>');
+  }
+
+  render(options: ButtonOptions): unknown {
+    this._logger.logMethodArgs?.('render', options);
+    return html`<button
+      class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-onPrimary
+        rounded-lg bg-primary bg-opacity-90 hover:bg-opacity-100 active:bg-opacity-95 select-none
+        ${classMap({'opacity-25 pointer-events-none': options.disabled === true})}"
+    >${options.label}</button>`;
+  }
+}
+
+export const alwatrButton = directive(AlwatrButtonDirective);
diff --git a/ui/demo-pwa/src/ui/root-element.ts b/ui/demo-pwa/src/ui/root-element.ts
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import '@alwatr/style/main.css';
		@import '@alwatr/style/palettes/h260.css';