@constela/start 1.8.21 → 1.8.22

package/README.md

@@ -166,6 +166,63 @@ Define reusable layouts:
 }
 ```
 
+### Components with Local State in Layouts
+
+Layout components can use `localState` and `localActions` for instance-scoped state:
+
+```json
+{
+  "version": "1.0",
+  "type": "layout",
+  "components": {
+    "Sidebar": {
+      "params": { "items": { "type": "list" } },
+      "localState": {
+        "expandedCategory": { "type": "string", "initial": "" }
+      },
+      "localActions": [
+        {
+          "name": "toggleCategory",
+          "steps": [{ "do": "set", "target": "expandedCategory", "value": { "expr": "var", "name": "payload" } }]
+        }
+      ],
+      "view": {
+        "kind": "each",
+        "items": { "expr": "param", "name": "items" },
+        "as": "item",
+        "body": {
+          "kind": "element",
+          "tag": "div",
+          "children": [
+            {
+              "kind": "element",
+              "tag": "button",
+              "props": {
+                "onClick": {
+                  "event": "click",
+                  "action": "toggleCategory",
+                  "payload": { "expr": "var", "name": "item", "path": "name" }
+                }
+              },
+              "children": [
+                { "kind": "text", "value": { "expr": "var", "name": "item", "path": "name" } }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  },
+  "view": { ... }
+}
+```
+
+Key features:
+- Components in layouts support `localState` and `localActions`
+- `param` expressions inside components are substituted with prop values
+- Works with dynamic props from `each` loops
+- Each component instance maintains independent state
+
 Use layout in pages:
 
 ```json

package/dist/{chunk-L3BK4NOH.js → chunk-E4SJFPTB.js}

@@ -3,7 +3,7 @@ import {
   generateMetaTags,
   renderPage,
   wrapHtml
-} from "./chunk-OXGKHULH.js";
+} from "./chunk-IZPFJSX3.js";
 
 // src/router/file-router.ts
 import fg from "fast-glob";
@@ -2728,15 +2728,15 @@ async function createDevServer(options = {}) {
                 query: Object.fromEntries(url.searchParams.entries()),
                 path: pathname
               };
-              const hydrationScript = generateHydrationScript(composedProgram, widgets, routeContext);
+              const hmrUrl = hmrServer ? `ws://${host}:${hmrServer.port}` : void 0;
+              const hydrationScript = generateHydrationScript(composedProgram, widgets, routeContext, hmrUrl);
               const metaTags = generateMetaTags(composedProgram.route, {
                 params: match.params,
                 query: Object.fromEntries(url.searchParams.entries()),
                 path: pathname
               });
               const cssHead = css ? (Array.isArray(css) ? css : [css]).map((p) => `<link rel="stylesheet" href="/${p}">`).join("\n") : "";
-              const hmrScript = hmrServer ? `<script>window.__CONSTELA_HMR_URL__ = "ws://${host}:${hmrServer.port}";</script>` : "";
-              const head = [metaTags, cssHead, hmrScript].filter(Boolean).join("\n");
+              const head = [metaTags, cssHead].filter(Boolean).join("\n");
               const themeState = composedProgram.state?.["theme"];
               let initialTheme;
               if (themeState) {

package/dist/{chunk-OXGKHULH.js → chunk-IZPFJSX3.js}

@@ -47,10 +47,20 @@ function toJsIdentifier(id) {
   }
   return result;
 }
-function generateHydrationScript(program, widgets, route) {
+function generateHydrationScript(program, widgets, route, hmrUrl) {
   const serializedProgram = escapeJsonForScript(serializeProgram(program));
   const hasWidgets = widgets && widgets.length > 0;
-  const imports = hasWidgets ? `import { hydrateApp, createApp } from '@constela/runtime';` : `import { hydrateApp } from '@constela/runtime';`;
+  const enableHmr = hmrUrl && hmrUrl.length > 0;
+  let imports;
+  if (enableHmr) {
+    const baseImports = ["hydrateApp", "createHMRClient", "createHMRHandler", "createErrorOverlay"];
+    if (hasWidgets) {
+      baseImports.push("createApp");
+    }
+    imports = `import { ${baseImports.join(", ")} } from '@constela/runtime';`;
+  } else {
+    imports = hasWidgets ? `import { hydrateApp, createApp } from '@constela/runtime';` : `import { hydrateApp } from '@constela/runtime';`;
+  }
   const widgetDeclarations = hasWidgets ? widgets.map((widget) => {
     const jsId = toJsIdentifier(widget.id);
     const serializedWidget = escapeJsonForScript(
@@ -81,11 +91,34 @@ if (container_${jsId}) {
   program,
   container: document.getElementById('app')
 }`;
+  let hmrSetup = "";
+  if (enableHmr) {
+    const escapedHmrUrl = escapeJsString(hmrUrl);
+    const handlerOptions = route ? `{
+  container: document.getElementById('app'),
+  program,
+  route
+}` : `{
+  container: document.getElementById('app'),
+  program
+}`;
+    hmrSetup = `
+
+const overlay = createErrorOverlay();
+const handler = createHMRHandler(${handlerOptions});
+const client = createHMRClient({
+  url: '${escapedHmrUrl}',
+  onUpdate: (file, newProgram) => { handler.handleUpdate(newProgram); },
+  onError: (file, errors) => { overlay.show(errors); },
+  onConnect: () => { console.log('[HMR] Connected'); }
+});
+client.connect();`;
+  }
   return `${imports}
 
 const program = ${serializedProgram};
 ${routeDeclaration ? "\n" + routeDeclaration : ""}${widgetDeclarations ? "\n" + widgetDeclarations : ""}
-hydrateApp(${hydrateOptions});${widgetMounting}`;
+hydrateApp(${hydrateOptions});${hmrSetup}${widgetMounting}`;
 }
 function wrapHtml(content, hydrationScript, head, options) {
   let langAttr = "";

package/dist/cli/index.js

@@ -4,8 +4,8 @@ import {
   hyperlink,
   loadConfig,
   resolveConfig
-} from "../chunk-L3BK4NOH.js";
-import "../chunk-OXGKHULH.js";
+} from "../chunk-E4SJFPTB.js";
+import "../chunk-IZPFJSX3.js";
 
 // src/cli/index.ts
 import { Command } from "commander";

package/dist/index.js

@@ -28,14 +28,14 @@ import {
   transformCsv,
   transformMdx,
   transformYaml
-} from "./chunk-L3BK4NOH.js";
+} from "./chunk-E4SJFPTB.js";
 import {
   evaluateMetaExpression,
   generateHydrationScript,
   generateMetaTags,
   renderPage,
   wrapHtml
-} from "./chunk-OXGKHULH.js";
+} from "./chunk-IZPFJSX3.js";
 
 // src/build/ssg.ts
 import { mkdir, writeFile } from "fs/promises";

package/dist/runtime/entry-server.d.ts

@@ -54,13 +54,15 @@ interface HydrationRouteContext {
  * - Serializes the program data
  * - Calls hydrateApp with the program and container element
  * - Optionally mounts widgets using createApp
+ * - When hmrUrl is provided, sets up HMR client, handler, and error overlay
  *
  * @param program - The compiled program to hydrate
  * @param widgets - Optional array of widget configurations to mount after hydration
  * @param route - Optional route context for dynamic routes
+ * @param hmrUrl - Optional WebSocket URL for HMR connection (development mode)
  * @returns JavaScript module code as string
  */
-declare function generateHydrationScript(program: CompiledProgram, widgets?: WidgetConfig[], route?: HydrationRouteContext): string;
+declare function generateHydrationScript(program: CompiledProgram, widgets?: WidgetConfig[], route?: HydrationRouteContext, hmrUrl?: string): string;
 /**
  * Wraps rendered content in a complete HTML document.
  *

package/dist/runtime/entry-server.js

@@ -4,7 +4,7 @@ import {
   generateMetaTags,
   renderPage,
   wrapHtml
-} from "../chunk-OXGKHULH.js";
+} from "../chunk-IZPFJSX3.js";
 export {
   evaluateMetaExpression,
   generateHydrationScript,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/start",
-  "version": "1.8.21",
+  "version": "1.8.22",
   "description": "Meta-framework for Constela applications",
   "type": "module",
   "main": "./dist/index.js",
@@ -45,10 +45,10 @@
     "tailwindcss": "^4.0.0",
     "ws": "^8.18.0",
     "@constela/compiler": "0.14.4",
-    "@constela/server": "11.0.1",
+    "@constela/core": "0.15.2",
     "@constela/router": "18.0.0",
     "@constela/runtime": "0.19.2",
-    "@constela/core": "0.15.2"
+    "@constela/server": "11.0.1"
   },
   "devDependencies": {
     "@types/ws": "^8.5.0",