@fluixi/compiler 1.0.0-alpha.92 → 1.0.0-alpha.94

package/dist/codegen/backends/imperative.cjs

@@ -237,6 +237,7 @@ var INTRINSICS = {
   $effect: { export: "effect", module: REACTIVE_MODULE, returns: "effect" },
   $store: { export: "store", module: "@fluixi/reactive/store", returns: "store-handle" },
   $resource: { export: "resource", module: REACTIVE_MODULE, returns: "resource-handle" },
+  $cachedResource: { export: "cachedResource", module: "@fluixi/reactive/cached-resource", returns: "resource-handle" },
   // No short runtime form for these yet, so the intrinsic stands for the `create*`
   // name. Still worth having: no import to write, and when a shorter form is
   // designed, the change is this line rather than a compiler pass.
@@ -247,6 +248,19 @@ var INTRINSICS = {
   // dependency analysis must not guess at.
   $untrack: { export: "untrack", module: REACTIVE_MODULE, returns: "plain" },
   $untrackStore: { export: "untrackStore", module: "@fluixi/reactive/store", returns: "plain" },
+  // Scopes, scheduling and lifecycle: no value to classify, but the same authoring promise,
+  // no import to write. `$cleanup` registers a callback on the current owner (`onCleanup`).
+  $batch: { export: "batch", module: REACTIVE_MODULE, returns: "plain" },
+  $cleanup: { export: "onCleanup", module: REACTIVE_MODULE, returns: "plain" },
+  $root: { export: "root", module: REACTIVE_MODULE, returns: "plain" },
+  $context: { export: "context", module: REACTIVE_MODULE, returns: "plain" },
+  $renderEffect: { export: "renderEffect", module: REACTIVE_MODULE, returns: "effect" },
+  $computed: { export: "computed", module: REACTIVE_MODULE, returns: "effect" },
+  // Storage for where the code runs, and a signal kept in it. `$persisted` is a signal
+  // handle as far as reads go: the same accessor with `set` on it.
+  $storage: { export: "useStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $asyncStorage: { export: "useAsyncStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $persisted: { export: "persisted", module: "@fluixi/core/storage", returns: "signal-handle" },
   // An environment variable, public or server-only; the browser build refuses a secret.
   $env: { export: "env", module: "@fluixi/start/env", returns: "plain" }
 };
@@ -424,13 +438,16 @@ function emitComponent(name, props, children, used, templates, at) {
   used.add("createComponent");
   const spreads = props.filter((p) => p.kind === "spread");
   const normal = props.filter((p) => p.kind !== "spread");
-  const entries = normal.map(
-    (p) => `get ${propKey(p.name)}() { return ${componentPropValue(p)}; }`
-  );
+  const bodies = normal.map((p) => [p.name, componentPropValue(p)]);
   if (children.length > 0) {
-    entries.push(`get children() { return ${emitChildren(children, used, templates)}; }`);
+    bodies.push(["children", emitChildren(children, used, templates)]);
+  }
+  let obj = `{ ${bodies.map(([name2, body]) => `get ${propKey(name2)}() { return ${body}; }`).join(", ")} }`;
+  if (bodies.some(([, body]) => /\bthis\b/.test(body))) {
+    const thunks = bodies.map(([name2, body]) => `${JSON.stringify(name2)}: () => (${body})`);
+    const getters = bodies.map(([name2]) => `get ${propKey(name2)}() { return _$t[${JSON.stringify(name2)}](); }`);
+    obj = `((_$t) => ({ ${getters.join(", ")} }))({ ${thunks.join(", ")} })`;
   }
-  let obj = `{ ${entries.join(", ")} }`;
   if (spreads.length > 0) {
     used.add("mergeProps");
     obj = `mergeProps(${spreads.map((s) => s.expr).join(", ")}, ${obj})`;
@@ -512,7 +529,8 @@ function emitNode(node, used, templates) {
         } else {
           used.add("spread");
           const svgFlag = node.svg ? ", isSVG: true" : "";
-          const customFlag = node.tag.includes("-") ? ", isCustomElement: true" : "";
+          const accessors = node.props.filter((p) => p.kind !== "spread" && p.expr !== void 0 && p.reactive && p.name !== "ref").map((p) => p.name);
+          const customFlag = node.tag.includes("-") ? `, isCustomElement: true, accessors: ${JSON.stringify(accessors)}` : "";
           parts.push(
             `spread({ element: ${el}, props: ${emitProps(node.props, null, used)}${svgFlag}${customFlag} });`
           );

package/dist/codegen/backends/imperative.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"imperative.d.ts","sourceRoot":"","sources":["../../../src/codegen/backends/imperative.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAiB,cAAc,EAAE,MAAM,eAAe,CAAC;AAqUnF;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,SAAS,GAAG,MAAM,CAK7F;AAED,eAAO,MAAM,iBAAiB,EAAE,cAgB/B,CAAC"}
+{"version":3,"file":"imperative.d.ts","sourceRoot":"","sources":["../../../src/codegen/backends/imperative.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAiB,cAAc,EAAE,MAAM,eAAe,CAAC;AAmVnF;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,SAAS,GAAG,MAAM,CAK7F;AAED,eAAO,MAAM,iBAAiB,EAAE,cAgB/B,CAAC"}

package/dist/codegen/backends/imperative.js

@@ -101,15 +101,26 @@ function emitComponent(name, props, children, used, templates, at) {
     // on every change (a <Portal> then piles up). As getters the component is built ONCE and
     // reactivity flows through the getter into its own effects. Static props as getters are
     // harmless (they return the same value). Matches lazyProps() in the inline codegen.
-    const entries = normal.map((p) => `get ${propKey(p.name)}() { return ${componentPropValue(p)}; }`);
+    // Each body emitted once: emitting children registers their templates.
+    const bodies = normal.map((p) => [p.name, componentPropValue(p)]);
     if (children.length > 0) {
         // Children are a LAZY getter: evaluated inside the component's execution, so
         // child components are created in the component's owner scope (preserves owner
         // nesting for context/Suspense), after the component runs (correct provider
         // ordering), and lazily (ErrorBoundary can still catch a throwing child).
-        entries.push(`get children() { return ${emitChildren(children, used, templates)}; }`);
+        bodies.push(['children', emitChildren(children, used, templates)]);
+    }
+    let obj = `{ ${bodies.map(([name, body]) => `get ${propKey(name)}() { return ${body}; }`).join(', ')} }`;
+    // A getter is a method: `this` inside it is the props object. Written in a class method
+    // (a custom element's render), `title={() => this.name}` then read the props, not the
+    // element. Arrows keep the enclosing `this`, so those props go out as arrow thunks and the
+    // getters call them. Only when some prop mentions `this`; everything else is unchanged.
+    if (bodies.some(([, body]) => /\bthis\b/.test(body))) {
+        // Parenthesised: an object literal body would otherwise parse as a block.
+        const thunks = bodies.map(([name, body]) => `${JSON.stringify(name)}: () => (${body})`);
+        const getters = bodies.map(([name]) => `get ${propKey(name)}() { return _$t[${JSON.stringify(name)}](); }`);
+        obj = `((_$t) => ({ ${getters.join(', ')} }))({ ${thunks.join(', ')} })`;
     }
-    let obj = `{ ${entries.join(', ')} }`;
     if (spreads.length > 0) {
         used.add('mergeProps');
         obj = `mergeProps(${spreads.map((s) => s.expr).join(', ')}, ${obj})`;
@@ -268,7 +279,12 @@ function emitNode(node, used, templates) {
                     // here, so the runtime does not have to read it back off the node. It falls
                     // back to that check when the flag is absent, which is how a hand-written
                     // `spread` call still behaves.
-                    const customFlag = node.tag.includes('-') ? ', isCustomElement: true' : '';
+                    // For a custom element it also names the props wrapped as accessors: any other
+                    // function is a property value (an action, a callback) and must not be called.
+                    const accessors = node.props
+                        .filter((p) => p.kind !== 'spread' && p.expr !== undefined && p.reactive && p.name !== 'ref')
+                        .map((p) => p.name);
+                    const customFlag = node.tag.includes('-') ? `, isCustomElement: true, accessors: ${JSON.stringify(accessors)}` : '';
                     parts.push(`spread({ element: ${el}, props: ${emitProps(node.props, null, used)}${svgFlag}${customFlag} });`);
                 }
             }

package/dist/codegen/backends/imperative.mjs

@@ -210,6 +210,7 @@ var INTRINSICS = {
   $effect: { export: "effect", module: REACTIVE_MODULE, returns: "effect" },
   $store: { export: "store", module: "@fluixi/reactive/store", returns: "store-handle" },
   $resource: { export: "resource", module: REACTIVE_MODULE, returns: "resource-handle" },
+  $cachedResource: { export: "cachedResource", module: "@fluixi/reactive/cached-resource", returns: "resource-handle" },
   // No short runtime form for these yet, so the intrinsic stands for the `create*`
   // name. Still worth having: no import to write, and when a shorter form is
   // designed, the change is this line rather than a compiler pass.
@@ -220,6 +221,19 @@ var INTRINSICS = {
   // dependency analysis must not guess at.
   $untrack: { export: "untrack", module: REACTIVE_MODULE, returns: "plain" },
   $untrackStore: { export: "untrackStore", module: "@fluixi/reactive/store", returns: "plain" },
+  // Scopes, scheduling and lifecycle: no value to classify, but the same authoring promise,
+  // no import to write. `$cleanup` registers a callback on the current owner (`onCleanup`).
+  $batch: { export: "batch", module: REACTIVE_MODULE, returns: "plain" },
+  $cleanup: { export: "onCleanup", module: REACTIVE_MODULE, returns: "plain" },
+  $root: { export: "root", module: REACTIVE_MODULE, returns: "plain" },
+  $context: { export: "context", module: REACTIVE_MODULE, returns: "plain" },
+  $renderEffect: { export: "renderEffect", module: REACTIVE_MODULE, returns: "effect" },
+  $computed: { export: "computed", module: REACTIVE_MODULE, returns: "effect" },
+  // Storage for where the code runs, and a signal kept in it. `$persisted` is a signal
+  // handle as far as reads go: the same accessor with `set` on it.
+  $storage: { export: "useStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $asyncStorage: { export: "useAsyncStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $persisted: { export: "persisted", module: "@fluixi/core/storage", returns: "signal-handle" },
   // An environment variable, public or server-only; the browser build refuses a secret.
   $env: { export: "env", module: "@fluixi/start/env", returns: "plain" }
 };
@@ -397,13 +411,16 @@ function emitComponent(name, props, children, used, templates, at) {
   used.add("createComponent");
   const spreads = props.filter((p) => p.kind === "spread");
   const normal = props.filter((p) => p.kind !== "spread");
-  const entries = normal.map(
-    (p) => `get ${propKey(p.name)}() { return ${componentPropValue(p)}; }`
-  );
+  const bodies = normal.map((p) => [p.name, componentPropValue(p)]);
   if (children.length > 0) {
-    entries.push(`get children() { return ${emitChildren(children, used, templates)}; }`);
+    bodies.push(["children", emitChildren(children, used, templates)]);
+  }
+  let obj = `{ ${bodies.map(([name2, body]) => `get ${propKey(name2)}() { return ${body}; }`).join(", ")} }`;
+  if (bodies.some(([, body]) => /\bthis\b/.test(body))) {
+    const thunks = bodies.map(([name2, body]) => `${JSON.stringify(name2)}: () => (${body})`);
+    const getters = bodies.map(([name2]) => `get ${propKey(name2)}() { return _$t[${JSON.stringify(name2)}](); }`);
+    obj = `((_$t) => ({ ${getters.join(", ")} }))({ ${thunks.join(", ")} })`;
   }
-  let obj = `{ ${entries.join(", ")} }`;
   if (spreads.length > 0) {
     used.add("mergeProps");
     obj = `mergeProps(${spreads.map((s) => s.expr).join(", ")}, ${obj})`;
@@ -485,7 +502,8 @@ function emitNode(node, used, templates) {
         } else {
           used.add("spread");
           const svgFlag = node.svg ? ", isSVG: true" : "";
-          const customFlag = node.tag.includes("-") ? ", isCustomElement: true" : "";
+          const accessors = node.props.filter((p) => p.kind !== "spread" && p.expr !== void 0 && p.reactive && p.name !== "ref").map((p) => p.name);
+          const customFlag = node.tag.includes("-") ? `, isCustomElement: true, accessors: ${JSON.stringify(accessors)}` : "";
           parts.push(
             `spread({ element: ${el}, props: ${emitProps(node.props, null, used)}${svgFlag}${customFlag} });`
           );