feat(element): StateMachineMixin

ui/element/package.json

@@ -36,6 +36,7 @@
     "@alwatr/i18n": "^0.29.0",
     "@alwatr/logger": "^0.29.0",
     "@alwatr/router": "^0.29.0",
+    "@alwatr/fsm": "^0.29.0",
     "lit": "^2.6.1",
     "tslib": "^2.5.0"
   },

ui/element/src/index.ts

@@ -9,6 +9,7 @@ export * from './mixins/logging.js';
 export * from './mixins/signal.js';
 export * from './mixins/toggle.js';
 export * from './mixins/unresolved.js';
+export * from './mixins/state-machine.js';
 
 export * from './directives/map.js';
 

ui/element/src/mixins/state-machine.ts

@@ -0,0 +1,37 @@
+import type {SignalMixinInterface} from './signal.js';
+import type {PropertyValues} from '../lit.js';
+import type {FiniteStateMachine} from '@alwatr/fsm';
+import type {Constructor} from '@alwatr/type';
+
+export declare class StateMachineMixinInterface<TMachine extends FiniteStateMachine> extends SignalMixinInterface {
+  stateMachine: TMachine;
+}
+
+export function StateMachineMixin<T extends Constructor<SignalMixinInterface>, TMachine extends FiniteStateMachine>(
+    stateMachine: TMachine,
+    superClass: T,
+): Constructor<StateMachineMixinInterface<TMachine>> & T {
+  class StateMachineMixinClass extends superClass {
+    stateMachine = stateMachine;
+
+    override connectedCallback(): void {
+      super.connectedCallback();
+      this.stateMachine.transition('CONNECTED');
+      this._signalListenerList.push(
+          this.stateMachine.signal.subscribe(
+              () => {
+                this.requestUpdate();
+              },
+              {receivePrevious: 'No'},
+          ),
+      );
+    }
+
+    protected override firstUpdated(_changedProperties: PropertyValues<this>): void {
+      super.firstUpdated(_changedProperties);
+      this.stateMachine.transition('FIRST_UPDATED');
+    }
+  }
+
+  return StateMachineMixinClass as unknown as Constructor<StateMachineMixinInterface<TMachine>> & T;
+}

ui/element/tsconfig.json

@@ -19,6 +19,7 @@
     {"path": "../../core/logger"},
     {"path": "../../core/type"},
     {"path": "../../core/i18n"},
-    {"path": "../../core/router"}
+    {"path": "../../core/router"},
+    {"path": "../../core/fsm"}
   ]
 }