feat(soffit-pwa): new version with i18n, content loader, form submit signal

core/signal/src/command-trigger.ts

@@ -1,6 +1,6 @@
 import {requestCommand, requestCommandWithResponse} from './core.js';
 
-import type {OmitFirstParam, Stringifyable} from '@alwatr/type';
+import type {OmitFirstParam, Stringifyable, StringifyableRecord} from '@alwatr/type';
 
 /**
  * Command trigger/request interface.
@@ -39,7 +39,7 @@ export const commandTrigger = {
    * const showDialog = commandTrigger.bind<ArgumentType, ReturnType>('show-dialog');
    * ```
    */
-  bind: <TArgument extends Record<string, Stringifyable>, TReturn extends Stringifyable>(commandId: string) =>({
+  bind: <TArgument extends StringifyableRecord, TReturn extends Stringifyable>(commandId: string) =>({
     /**
      * Command signal Id.
      */

core/signal/src/core.ts

@@ -11,7 +11,7 @@ import type {
   SignalStorage,
   ListenerSpec,
 } from './type.js';
-import type {Stringifyable} from '@alwatr/type';
+import type {Stringifyable, StringifyableRecord} from '@alwatr/type';
 
 globalAlwatr.registeredList.push({
   name: '@alwatr/signal',
@@ -338,7 +338,7 @@ export const setContextProvider = <TContext extends Stringifyable, TRquest exten
  * );
  * ```
  */
-export const defineCommand = <TArgument extends Record<string, Stringifyable>, TReturn extends Stringifyable>(
+export const defineCommand = <TArgument extends StringifyableRecord, TReturn extends Stringifyable>(
   signalId: string,
   signalProvider: ProviderFunction<TArgument & {_callbackSignalId?: string}, TReturn>,
   options: Partial<Pick<ProviderOptions, 'debounce'>> = {},
@@ -395,7 +395,7 @@ export const requestContext = <TRequest extends Stringifyable>(
  * requestCommand<ArgumentType>('show-dialog', {foo: 'bar'});
  * ```
  */
-export const requestCommand = <TArgument extends Record<string, Stringifyable>>(
+export const requestCommand = <TArgument extends StringifyableRecord>(
   commandId: string,
   commandArgument: TArgument,
 ): void => {
@@ -415,7 +415,7 @@ export const requestCommand = <TArgument extends Record<string, Stringifyable>>(
  * ```
  */
 export const requestCommandWithResponse = async <
-  TArgument extends Record<string, Stringifyable>,
+  TArgument extends StringifyableRecord,
   TReturn extends Stringifyable
 >(
   commandId: string,

core/type/src/type-helper.ts

@@ -17,3 +17,6 @@ export type Stringifyable =
     | undefined
     | { [x: string]: Stringifyable }
     | Array<Stringifyable>;
+
+
+export type StringifyableRecord = Record<string, Stringifyable>;

ui/demo-pwa/src/page-card.ts

@@ -55,7 +55,7 @@ export class AlwatrPageCard extends AlwatrSmartElement {
   `;
 
   override render(): unknown {
-    super.render();
+    this._logger.logMethod('render');
     return html`
       <alwatr-icon-box
         .content=${{icon: 'gift-outline', headline: 'قرعه کشی', description: loremText}}

ui/demo-pwa/src/page-chat.ts

@@ -26,7 +26,7 @@ export class AlwatrPageHome extends AlwatrSmartElement {
   `;
 
   override render(): unknown {
-    super.render();
+    this._logger.logMethod('render');
     return html`<alwatr-chat></alwatr-chat>`;
   }
 }

ui/icon/src/icon.ts

@@ -76,7 +76,7 @@ export class AlwatrIcon extends DirectionMixin(SignalMixin(AlwatrDummyElement))
   protected _icon?: HTMLTemplateResult;
 
   override render(): unknown {
-    super.render();
+    this._logger.logMethod('render');
     return this._icon;
   }
 

ui/pwa-helper/esbuild.mjs

@@ -124,7 +124,7 @@ async function buildServiceWorker() {
 
   const build = await generateSW({
     swDest: `${outDir}/service-worker.js`,
-    globDirectory: `${outDir}`,
+    globDirectory: `${outDir}/`,
     clientsClaim: true,
     skipWaiting: true,
     globPatterns: [
@@ -152,6 +152,8 @@ else {
 
 /*
   TODO:
+  - Input Config
+  - version
   - Workbox and sw
   - Res (all assets) hash
   - PostCSS css file

ui/pwa-helper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alwatr/pwa-helper",
-  "version": "0.29.0-beta5",
+  "version": "0.29.0-beta7",
   "description": "Alwatr PWA Helper",
   "keywords": [
     "element",

ui/pwa-helper/src/pwa-element.ts

@@ -54,7 +54,7 @@ export class AlwatrPwaElement extends AlwatrSmartElement {
   }
 
   override render(): unknown {
-    super.render();
+    this._logger.logMethod('render');
     return html`<div class="page-container">${cache(routerOutlet(this._routesConfig))}</div>`;
   }
 

ui/ui-kit/src/button/icon-button.ts

@@ -70,6 +70,7 @@ export class AlwatrStandardIconButton extends AlwatrSurface {
   }
 
   override render(): unknown {
+    this._logger.logMethod('render');
     return html`<alwatr-icon
       part="icon"
       ?flip-rtl=${this.flipRtl}

ui/ui-kit/src/card/icon-box.ts

@@ -4,13 +4,16 @@ import '@alwatr/icon';
 
 import {AlwatrSurface} from './surface.js';
 
+import type {StringifyableRecord} from '@alwatr/type';
+
+
 declare global {
   interface HTMLElementTagNameMap {
     'alwatr-icon-box': AlwatrIconBox;
   }
 }
 
-export type IconBoxContent = {
+export interface IconBoxContent extends StringifyableRecord {
   icon?: string;
   headline: string;
   description?: string;
@@ -21,7 +24,7 @@ export type IconBoxContent = {
   stated?: boolean;
   preLine?: boolean;
   elevated?: number;
-};
+}
 
 /**
  * Alwatr standard icon button element.

ui/ui-kit/src/chat/chat-avatar.ts

@@ -36,7 +36,7 @@ export class AlwatrChatAvatar extends AlwatrDummyElement {
     user?: string;
 
   override render(): unknown {
-    super.render();
+    this._logger.logMethod('render');
     return html`<img src="https://i.pravatar.cc/40?u=${this.user}" alt="User ${this.user} profile image" />`;
   }
 }

ui/ui-kit/src/chat/chat-bubble.ts

@@ -46,7 +46,7 @@ export class AlwatrChatBubble extends DirectionMixin(SignalMixin(AlwatrDummyElem
     text?: string;
 
   override render(): unknown {
-    super.render();
+    this._logger.logMethod('render');
     return html`${this.text ?? '...'}`;
   }
 }

ui/ui-kit/src/chat/chat-footer.ts

@@ -34,6 +34,7 @@ export class AlwatrChatFooter extends AlwatrDummyElement {
   `;
 
   override render(): unknown {
+    this._logger.logMethod('render');
     return html`
       <alwatr-icon-button .icon=${'happy-outline'} @click=${this._changeLocale}></alwatr-icon-button>
       <alwatr-chat-text-input></alwatr-chat-text-input>

ui/ui-kit/src/chat/chat-list.ts

@@ -72,7 +72,7 @@ export class AlwatrChatList extends AlwatrDummyElement {
     currentUser?: string;
 
   override render(): unknown {
-    super.render();
+    this._logger.logMethod('render');
     if (this.storage == null) return nothing;
     return html`${map(
         this.storage.data,

ui/ui-kit/src/chat/chat-message.ts

@@ -73,7 +73,7 @@ export class AlwatrChatMessage extends DirectionMixin(SignalMixin(AlwatrDummyEle
     self = false;
 
   override render(): unknown {
-    super.render();
+    this._logger.logMethod('render');
     if (this.message == null || this.message.type !== 'text') return nothing;
 
     const bubble = html`<alwatr-chat-bubble

ui/ui-kit/src/chat/chat-text-input.ts

@@ -65,6 +65,7 @@ export class AlwatrChatTextInput extends LocalizeMixin(SignalMixin(AlwatrDummyEl
   sendButtonElement: AlwatrStandardIconButton | null = null;
 
   override render(): unknown {
+    this._logger.logMethod('render');
     return html`
       <textarea
         rows="1"

ui/ui-kit/src/chat/chat.ts

@@ -137,7 +137,7 @@ export class AlwatrChat extends AlwatrSmartElement {
   `;
 
   override render(): unknown {
-    super.render();
+    this._logger.logMethod('render');
     return html`
       <alwatr-chat-list .storage=${chatStorage} .currentUser=${currentUser}></alwatr-chat-list>
       <alwatr-chat-footer></alwatr-chat-footer>

ui/ui-kit/src/snackbar/element.ts

@@ -32,9 +32,9 @@ export class AlwatrSnackbar extends AlwatrSurface {
         padding: calc(0.5 * var(--sys-spacing-track));
         gap: var(--sys-spacing-track);
         position: fixed;
-        bottom: calc(4 * var(--sys-spacing-track));
-        left: calc(4 * var(--sys-spacing-track));
-        right: calc(4 * var(--sys-spacing-track));
+        bottom: calc(2 * var(--sys-spacing-track));
+        left: var(--sys-spacing-track);
+        right: var(--sys-spacing-track);
         z-index: var(--sys-zindex-snackbar);
         border-radius: var(--sys-radius-xsmall);
 
@@ -119,6 +119,7 @@ export class AlwatrSnackbar extends AlwatrSurface {
   }
 
   override render(): unknown {
+    this._logger.logMethod('render');
     return html`<span class="message">${this.message}</span>${when(
         this.actionLabel,
         () => html`<alwatr-button @click=${this._actionButtonClick}>${this.actionLabel}</alwatr-button>`,

uniquely/flight-finder-pwa/src/component/job-add-form.ts

@@ -74,6 +74,7 @@ export class JobAddForm extends AlwatrSmartElement {
   };
 
   override render(): unknown {
+    this._logger.logMethod('render');
     return html`
       <ion-header>
         <ion-toolbar color="secondary">

uniquely/flight-finder-pwa/src/component/job-item.ts

@@ -99,6 +99,7 @@ export class JobItem extends AlwatrSmartElement {
   static jobDeleteEventTrigger = eventTrigger.bind('job-delete');
 
   override render(): unknown {
+    this._logger.logMethod('render');
     if (this.job == null || this.job.detail == null) return nothing;
 
     return html`

uniquely/flight-finder-pwa/src/component/page-flight-finder.ts

@@ -84,6 +84,7 @@ export class PageFlightFinder extends AlwatrSmartElement {
     setInterval(this.__updateTimer, 3_000);
   }
   override render(): unknown {
+    this._logger.logMethod('render');
     return html`
       <ion-header>
         <ion-toolbar color="primary">

uniquely/soffit-pwa/package.json

@@ -17,17 +17,21 @@
     "directory": "ui/soffit-pwa"
   },
   "scripts": {
-    "b": "yarn build --debug",
-    "cb": "yarn build --debug --clean",
+    "b": "yarn build-dev",
+    "cb": "run-s clean build-dev",
     "s": "yarn start",
     "w": "yarn watch",
     "start": "NODE_OPTIONS=--enable-source-maps run-s clean build serve",
     "clean": "rm -rf dist build .tsbuildinfo",
-    "build": "./esbuild.mjs",
+    "build": "yarn build:es",
+    "build-dev": "run-s build:root build:tsc \"build:es --debug\"",
+    "build:es": "./esbuild.mjs",
     "build:tsc": "tsc --build",
+    "build:root": "cd ../../ && yarn build:ts",
     "serve": "wds",
-    "watch": "run-p watch:es serve",
-    "watch:es": "yarn build --clean --watch --debug"
+    "watch": "run-p watch:root watch:es serve",
+    "watch:es": "yarn build:es --clean --watch --debug",
+    "watch:root": "cd ../../ && yarn watch:ts"
   },
   "devDependencies": {
     "@alwatr/element": "^0.28.0",

uniquely/soffit-pwa/src/alwatr-pwa.ts

@@ -6,7 +6,7 @@ import '@alwatr/ui-kit/style/theme/palette-270.css';
 import '@alwatr/ui-kit/style/theme/color.css';
 import '@alwatr/font/vazirmatn.css';
 
-import './director.js';
+import './director/index.js';
 import './page-home.js';
 
 import type {RoutesConfig} from '@alwatr/router';