@hypen-space/core 0.4.46 → 0.4.81

package/dist/index.d.ts

@@ -16,7 +16,7 @@
  *   })
  *   .ui(hypen`
  *     Column {
- *       Text("Count: ${state.count}")
+ *       Text("Count: @{state.count}")
  *       Button { Text("+") }
  *         .onClick("@actions.increment")
  *     }
@@ -37,7 +37,7 @@
  *   .build();
  *
  * // component.hypen (separate file)
- * // Column { Text("Count: ${state.count}") ... }
+ * // Column { Text("Count: @{state.count}") ... }
  * ```
  */
 export type { Patch, Action, RenderCallback, ActionHandler as EngineActionHandler, ResolvedComponent, ComponentResolver as EngineComponentResolver, } from "./types.js";
@@ -45,6 +45,7 @@ export { app, HypenApp, HypenAppBuilder, HypenModuleInstance } from "./app.js";
 export { hypen, state, item, index } from "./hypen.js";
 export type { StateProxy, ItemProxy } from "./hypen.js";
 export type { IEngine, ActionContext, GlobalContext, LifecycleHandler, ActionHandlerContext, ActionHandler, HypenModuleDefinition, HypenModule, DisconnectContext, ReconnectContext, ExpireContext, DisconnectHandler, ReconnectHandler, ExpireHandler, ErrorContext, ErrorHandler, ErrorHandlerResult, DataSourceAccessor, } from "./app.js";
+export type { StateStore } from "./persistence.js";
 export { DataSourceManager } from "./datasource.js";
 export type { DataSourcePlugin, DataSourceStatus, DataSourceQuery, DataSourceSubscription, DataSourceChange, IDataSourceEngine, } from "./datasource.js";
 export { createObservableState, batchStateUpdates, getStateSnapshot, isStateProxy, unwrapProxy, } from "./state.js";

package/dist/index.js

@@ -1063,6 +1063,7 @@ class HypenAppBuilder {
   template;
   _registry;
   dataSourceEntries = [];
+  _stateStore;
   constructor(initialState, options, registry) {
     this.initialState = initialState;
     this.options = options || {};
@@ -1096,6 +1097,10 @@ class HypenAppBuilder {
     this.errorHandler = fn;
     return this;
   }
+  persist(store) {
+    this._stateStore = store;
+    return this;
+  }
   useDataSource(plugin, config2) {
     this.dataSourceEntries.push({ plugin, config: config2 });
     return this;
@@ -1120,6 +1125,7 @@ class HypenAppBuilder {
       initialState: this.initialState,
       template: this.template,
       dataSources: this.dataSourceEntries.length > 0 ? this.dataSourceEntries : undefined,
+      stateStore: this._stateStore,
       handlers: {
         onCreated: this.createdHandler,
         onAction: this.actionHandlers,
@@ -1184,22 +1190,33 @@ class HypenModuleInstance {
   stateChangeCallbacks = [];
   dataSourceManager;
   dataSourceAccessor = {};
-  constructor(engine, definition, router, globalContext) {
+  stateStore;
+  currentPersistKey = null;
+  persistDebounceTimer;
+  sessionId;
+  moduleKey = "";
+  constructor(engine, definition, router, globalContext, sessionId) {
     this.engine = engine;
     this.definition = definition;
     this.router = router ?? null;
     this.globalContext = globalContext;
-    const statePrefix = (definition.name || "").toLowerCase();
+    this.sessionId = sessionId ?? crypto.randomUUID();
+    this.stateStore = definition.stateStore;
+    const moduleKey = (definition.name || "").toLowerCase();
+    this.moduleKey = moduleKey;
     this.state = createObservableState(definition.initialState, {
       onChange: (change) => {
-        this.engine.notifyStateChange(change.paths, change.newValues);
+        this.engine.updateStateSparse(moduleKey || null, change.paths, change.newValues);
         this.stateChangeCallbacks.forEach((cb) => cb());
-      },
-      pathPrefix: statePrefix || undefined
+        this.persistIfNeeded();
+      }
     });
     const snapshot = getStateSnapshot(this.state);
-    const prefixedState = statePrefix ? { [statePrefix]: snapshot } : snapshot;
-    this.engine.setModule(definition.name || "AnonymousModule", definition.actions, definition.stateKeys, prefixedState);
+    if (moduleKey) {
+      this.engine.registerModule(moduleKey, definition.actions, definition.stateKeys, snapshot);
+    } else {
+      this.engine.setModule("AnonymousModule", definition.actions, definition.stateKeys, snapshot);
+    }
     for (const [actionName, handler] of definition.handlers.onAction) {
       log2.debug(`Registering action handler: ${actionName} for module ${definition.name}`);
       this.engine.onAction(actionName, async (action) => {
@@ -1309,7 +1326,54 @@ class HypenModuleInstance {
     log2.error(`${context.actionName ? `Action "${context.actionName}"` : `Lifecycle "${context.lifecycle}"`} error:`, error);
     return false;
   }
+  persistIfNeeded() {
+    if (!this.stateStore)
+      return;
+    const store = this.stateStore;
+    const newKey = store.resolveKey(this.state, this.definition.name || "AnonymousModule", this.sessionId);
+    if (newKey && !this.currentPersistKey) {
+      this.activatePersistence(newKey);
+      return;
+    }
+    if (!newKey && this.currentPersistKey) {
+      this.currentPersistKey = null;
+      return;
+    }
+    if (newKey && newKey !== this.currentPersistKey) {
+      this.activatePersistence(newKey);
+      return;
+    }
+    if (!this.currentPersistKey)
+      return;
+    clearTimeout(this.persistDebounceTimer);
+    this.persistDebounceTimer = setTimeout(() => {
+      const snapshot = getStateSnapshot(this.state);
+      store.save(this.currentPersistKey, snapshot);
+    }, 50);
+  }
+  async activatePersistence(key) {
+    this.currentPersistKey = key;
+    const stored = await this.stateStore.load(key);
+    if (stored) {
+      const merged = { ...this.definition.initialState, ...stored };
+      Object.assign(this.state, merged);
+    } else {
+      const snapshot = getStateSnapshot(this.state);
+      await this.stateStore.save(key, snapshot);
+    }
+  }
   async callCreatedHandler() {
+    if (this.stateStore) {
+      const key = this.stateStore.resolveKey(this.state, this.definition.name || "AnonymousModule", this.sessionId);
+      if (key) {
+        this.currentPersistKey = key;
+        const stored = await this.stateStore.load(key);
+        if (stored) {
+          const merged = { ...this.definition.initialState, ...stored };
+          Object.assign(this.state, merged);
+        }
+      }
+    }
     if (this.definition.dataSources?.length) {
       const dsEngine = this.engine;
       this.dataSourceManager = new DataSourceManager(dsEngine);
@@ -1348,6 +1412,11 @@ class HypenModuleInstance {
   async destroy() {
     if (this.isDestroyed)
       return;
+    if (this.currentPersistKey && this.stateStore) {
+      clearTimeout(this.persistDebounceTimer);
+      const snapshot = getStateSnapshot(this.state);
+      await this.stateStore.save(this.currentPersistKey, snapshot);
+    }
     if (this.dataSourceManager) {
       try {
         await this.dataSourceManager.disconnectAll();
@@ -1386,13 +1455,13 @@ function createBindingProxy(root) {
   const handler = {
     get(_, prop) {
       if (prop === Symbol.toPrimitive || prop === "toString" || prop === "valueOf") {
-        return () => `\${${root}}`;
+        return () => `@{${root}}`;
       }
       if (typeof prop === "symbol") {
         return;
       }
       if (prop === "toJSON") {
-        return () => `\${${root}}`;
+        return () => `@{${root}}`;
       }
       return createBindingProxy(`${root}.${prop}`);
     },
@@ -1414,10 +1483,10 @@ function createBindingProxy(root) {
 var state = createBindingProxy("state");
 var item = createBindingProxy("item");
 var index = {
-  [Symbol.toPrimitive]: () => "${index}",
-  toString: () => "${index}",
-  valueOf: () => "${index}",
-  toJSON: () => "${index}"
+  [Symbol.toPrimitive]: () => "@{index}",
+  toString: () => "@{index}",
+  valueOf: () => "@{index}",
+  toJSON: () => "@{index}"
 };
 function hypen(strings, ...expressions) {
   let result = strings[0];
@@ -1724,11 +1793,13 @@ class HypenRouter {
         } else {
           window.history.pushState(null, "", url);
         }
-        const hashChangeEvent = new HashChangeEvent("hashchange", {
-          oldURL: window.location.href.replace(window.location.hash, "#" + oldPath),
-          newURL: window.location.href
-        });
-        window.dispatchEvent(hashChangeEvent);
+        try {
+          const hashChangeEvent = new HashChangeEvent("hashchange", {
+            oldURL: window.location.href.replace(window.location.hash, "#" + oldPath),
+            newURL: window.location.href
+          });
+          window.dispatchEvent(hashChangeEvent);
+        } catch {}
       }
     } finally {
       this.isUpdating = false;
@@ -2200,7 +2271,8 @@ class RemoteEngine {
     const hello = {
       type: "hello",
       sessionId: this.currentSessionId ?? this.sessionOptions?.id,
-      props: this.sessionOptions?.props
+      props: this.sessionOptions?.props,
+      persistKey: this.sessionOptions?.persistKey
     };
     this.ws.send(JSON.stringify(hello));
   }
@@ -2838,4 +2910,4 @@ export {
   ActionError
 };
 
-//# debugId=F652589D18AB457B64756E2164756E21
+//# debugId=ABC8BA06546F591964756E2164756E21