sinwan-compiler 0.2.2 → 0.2.4

package/dist/cli.js

@@ -2,7 +2,7 @@
 // @bun
 import {
   runAnalyzeCli
-} from "./chunk-3bqqn28f.js";
+} from "./chunk-w580fdrf.js";
 export {
   runAnalyzeCli
 };

package/dist/exports.d.ts

@@ -0,0 +1,27 @@
+/**
+ * SinwanJS Compiler — Exported component detection.
+ *
+ * Shared utility for detecting top-level exported component bindings in a
+ * module. Used by the Vite and Bun plugins for HMR boundary injection.
+ *
+ * Detection is intentionally conservative: only top-level exports whose name
+ * starts with an uppercase letter (the component naming convention) are
+ * returned. The runtime safely ignores anything that is not used as a
+ * component, so over-matching is harmless.
+ */
+export interface ExportedComponent {
+    /** Local binding name in the module (referenced in the accept callback). */
+    local: string;
+    /** Export key on the module namespace ("default" for the default export). */
+    key: string;
+}
+/**
+ * Collect top-level exported component bindings from a module source string.
+ *
+ * Parses the source with Babel, then walks top-level export declarations to
+ * find functions and variables whose name starts with an uppercase letter.
+ *
+ * Returns an array of `{ local, key }` pairs. Returns an empty array if the
+ * source cannot be parsed.
+ */
+export declare function collectExportedComponents(code: string, filename: string): ExportedComponent[];

package/dist/index.d.ts

@@ -5,6 +5,9 @@
  * used by the Bun and Vite plugins.
  */
 export { transformJSX, type TransformOptions } from "./transform";
+export { COMPILER_TEMPLATE_SLOT_PROTOCOL } from "./transform";
+export { autoWrapComponents } from "./auto-cc";
 export { analyze, analyzeProject, analyzeModule, loadMetadata, AnalyzerCache, type AnalyzeOptions, type ModuleAnalysis, type ProjectAnalysis, type ImportedCallSite, type ImportInfo, type WorkspacesConfig, } from "./analyze";
+export { collectExportedComponents, type ExportedComponent } from "./exports";
 export { runAnalyzeCli } from "./cli";
 export { wrapReactiveExpressions, trackReactiveImports, collectComponentFunctions, computeLocalScopes, collectComponentCallGraph, propagateReactiveProps, buildFullScope, containsReactiveValue, getAllPropNames, isReactiveValue, type ReactiveScope, type Binding, type CallSite, type ImportNames, type ComponentExpressionInfo, } from "./reactive-wrap";

package/dist/index.js

@@ -4,6 +4,7 @@ import {
   analyze,
   analyzeModule,
   analyzeProject,
+  autoWrapComponents,
   buildFullScope,
   collectComponentCallGraph,
   collectComponentFunctions,
@@ -16,7 +17,7 @@ import {
   runAnalyzeCli,
   trackReactiveImports,
   wrapReactiveExpressions
-} from "./chunk-3bqqn28f.js";
+} from "./chunk-w580fdrf.js";
 
 // src/transform.ts
 import { parse } from "@babel/parser";
@@ -25,10 +26,21 @@ import * as t from "@babel/types";
 import _traverse from "@babel/traverse";
 var generate = typeof _generate === "function" ? _generate : _generate.default ?? _generate;
 var traverse = typeof _traverse === "function" ? _traverse : _traverse.default ?? _traverse;
-var SLOT_PREFIX = "s";
-var slotId = 0;
-function nextSlotId() {
-  return `<!--${SLOT_PREFIX}:${slotId++}-->`;
+var COMPILER_TEMPLATE_SLOT_PROTOCOL = {
+  slotPrefix: "s",
+  encodeSlot(index) {
+    return `s:${index}`;
+  },
+  decodeSlot(data) {
+    if (data.startsWith("s:")) {
+      const idx = parseInt(data.slice(2), 10);
+      return Number.isNaN(idx) ? null : idx;
+    }
+    return null;
+  }
+};
+function nextSlotId(counter) {
+  return `<!--${COMPILER_TEMPLATE_SLOT_PROTOCOL.encodeSlot(counter.value++)}-->`;
 }
 var VOID_ELEMENTS = new Set([
   "area",
@@ -81,9 +93,9 @@ function cleanJSXText(value) {
   return str;
 }
 function extractTemplate(node, filename) {
-  slotId = 0;
+  const counter = { value: 0 };
   const slots = [];
-  const html = elementToHtml(node, slots, [], filename);
+  const html = elementToHtml(node, slots, [], filename, counter);
   return { html, slots };
 }
 function warnSuspectedStyleInterpolation(attrValue, filename, line) {
@@ -153,7 +165,7 @@ function serializeStyleValue(expr) {
   }
   return parts.join(";");
 }
-function elementToHtml(node, slots, path, filename) {
+function elementToHtml(node, slots, path, filename, counter) {
   const tagName = jsxNameToString(node.openingElement.name);
   if (tagName === "")
     return "";
@@ -171,7 +183,18 @@ function elementToHtml(node, slots, path, filename) {
     if (attrName === "children")
       continue;
     if (attrName === "ref") {
-      throw new Error("Cannot hoist element with ref");
+      if (attr.value?.type === "JSXExpressionContainer") {
+        const expr = attr.value.expression;
+        if (expr.type !== "JSXEmptyExpression") {
+          slots.push({
+            path: [...path],
+            type: "ref",
+            name: "ref",
+            expr
+          });
+        }
+      }
+      continue;
     }
     if (attr.value?.type === "JSXExpressionContainer") {
       const expr = attr.value.expression;
@@ -204,8 +227,15 @@ function elementToHtml(node, slots, path, filename) {
   html += isVoid ? " />" : ">";
   if (isVoid)
     return html;
-  let childIndex = 0;
-  for (const child of node.children) {
+  const childResult = childrenToHtml(node.children, slots, path, filename, 0, counter);
+  html += childResult.html;
+  html += `</${tagName}>`;
+  return html;
+}
+function childrenToHtml(children, slots, path, filename, startIndex, counter) {
+  let html = "";
+  let childIndex = startIndex;
+  for (const child of children) {
     if (child.type === "JSXText") {
       const text = cleanJSXText(child.value ?? "");
       if (text) {
@@ -215,7 +245,7 @@ function elementToHtml(node, slots, path, filename) {
     } else if (child.type === "JSXExpressionContainer") {
       if (child.expression.type === "JSXEmptyExpression")
         continue;
-      const slot = nextSlotId();
+      const slot = nextSlotId(counter);
       slots.push({
         path: [...path, childIndex],
         type: "child",
@@ -224,12 +254,29 @@ function elementToHtml(node, slots, path, filename) {
       html += slot;
       childIndex++;
     } else if (child.type === "JSXElement") {
-      html += elementToHtml(child, slots, [...path, childIndex], filename);
-      childIndex++;
+      const childName = child.openingElement.name;
+      const childTag = childName.type === "JSXIdentifier" ? childName.name : "";
+      const isFirstCharUpper = childTag && childTag.charAt(0) === childTag.charAt(0).toUpperCase();
+      if (isFirstCharUpper) {
+        const slot = nextSlotId(counter);
+        slots.push({
+          path: [...path, childIndex],
+          type: "child",
+          expr: child
+        });
+        html += slot;
+        childIndex++;
+      } else {
+        html += elementToHtml(child, slots, [...path, childIndex], filename, counter);
+        childIndex++;
+      }
+    } else if (child.type === "JSXFragment") {
+      const fragResult = childrenToHtml(child.children, slots, path, filename, childIndex, counter);
+      html += fragResult.html;
+      childIndex = fragResult.childIndex;
     }
   }
-  html += `</${tagName}>`;
-  return html;
+  return { html, childIndex };
 }
 function jsxNameToString(name) {
   if (name.type === "JSXIdentifier")
@@ -245,10 +292,12 @@ function transformJSX(code, filename, options = {}) {
     plugins: ["jsx", "typescript"],
     sourceFilename: filename
   });
+  autoWrapComponents(ast, filename);
   wrapReactiveExpressions(ast, {
     explicitBindings: options.explicitBindings,
     analyze: options.analyze,
     analyzeMetadata: options.analyzeMetadata,
+    resolveImport: options.resolveImport,
     filename
   });
   const hoist = options.hoist !== false;
@@ -275,10 +324,23 @@ function transformJSX(code, filename, options = {}) {
         const templateExpr = t.callExpression(t.identifier("_$createTemplate"), [t.identifier(tmplId), t.arrayExpression(dynamicExprs)]);
         const parentIsJSX = path.parentPath?.isJSXElement() || path.parentPath?.isJSXFragment();
         path.replaceWith(parentIsJSX ? t.jsxExpressionContainer(templateExpr) : templateExpr);
-      } catch {}
+      } catch (err) {
+        if (options.dev) {
+          console.warn(`[Sinwan] template hoisting skipped in ${filename}: ${err.message}`);
+        }
+      }
     }
   });
   if (templates.length === 0) {
+    if (options.explicitBindings) {
+      const bindingImport = t.importDeclaration([
+        t.importSpecifier(t.identifier("_$bindText"), t.identifier("_$bindText")),
+        t.importSpecifier(t.identifier("_$bindAttr"), t.identifier("_$bindAttr")),
+        t.importSpecifier(t.identifier("_$bindStyle"), t.identifier("_$bindStyle")),
+        t.importSpecifier(t.identifier("_$bindClass"), t.identifier("_$bindClass"))
+      ], t.stringLiteral("sinwan/renderer"));
+      ast.program.body.unshift(bindingImport);
+    }
     const result2 = generate(ast, {
       sourceMaps: true,
       sourceFileName: filename
@@ -308,22 +370,81 @@ function transformJSX(code, filename, options = {}) {
   const result = generate(ast, { sourceMaps: true, sourceFileName: filename });
   return { code: result.code, map: result.map };
 }
+// src/exports.ts
+import { parse as parse2 } from "@babel/parser";
+function isComponentName(name) {
+  return !!name && name[0] === name[0].toUpperCase() && /^[A-Z]/.test(name);
+}
+function collectExportedComponents(code, filename) {
+  let ast;
+  try {
+    ast = parse2(code, {
+      sourceType: "module",
+      plugins: ["jsx", "typescript"],
+      sourceFilename: filename
+    });
+  } catch {
+    return [];
+  }
+  const found = [];
+  const seen = new Set;
+  const add = (local, key) => {
+    const sig = `${local}::${key}`;
+    if (seen.has(sig))
+      return;
+    seen.add(sig);
+    found.push({ local, key });
+  };
+  for (const node of ast.program.body) {
+    if (node.type === "ExportNamedDeclaration") {
+      if (node.declaration) {
+        const decl = node.declaration;
+        if (decl.type === "FunctionDeclaration" && decl.id && isComponentName(decl.id.name)) {
+          add(decl.id.name, decl.id.name);
+        } else if (decl.type === "VariableDeclaration") {
+          for (const d of decl.declarations) {
+            if (d.id?.type === "Identifier" && isComponentName(d.id.name)) {
+              add(d.id.name, d.id.name);
+            }
+          }
+        }
+      } else if (node.specifiers && !node.source) {
+        for (const spec of node.specifiers) {
+          if (spec.type === "ExportSpecifier" && spec.local?.type === "Identifier" && spec.exported?.type === "Identifier" && isComponentName(spec.exported.name)) {
+            add(spec.local.name, spec.exported.name);
+          }
+        }
+      }
+    } else if (node.type === "ExportDefaultDeclaration") {
+      const decl = node.declaration;
+      if (decl.type === "Identifier") {
+        add(decl.name, "default");
+      } else if (decl.type === "FunctionDeclaration" && decl.id) {
+        add(decl.id.name, "default");
+      }
+    }
+  }
+  return found;
+}
 export {
-  wrapReactiveExpressions,
-  transformJSX,
-  trackReactiveImports,
-  runAnalyzeCli,
-  propagateReactiveProps,
-  loadMetadata,
-  isReactiveValue,
-  getAllPropNames,
-  containsReactiveValue,
-  computeLocalScopes,
-  collectComponentFunctions,
-  collectComponentCallGraph,
-  buildFullScope,
-  analyzeProject,
-  analyzeModule,
+  AnalyzerCache,
+  COMPILER_TEMPLATE_SLOT_PROTOCOL,
   analyze,
-  AnalyzerCache
+  analyzeModule,
+  analyzeProject,
+  autoWrapComponents,
+  buildFullScope,
+  collectComponentCallGraph,
+  collectComponentFunctions,
+  collectExportedComponents,
+  computeLocalScopes,
+  containsReactiveValue,
+  getAllPropNames,
+  isReactiveValue,
+  loadMetadata,
+  propagateReactiveProps,
+  runAnalyzeCli,
+  trackReactiveImports,
+  transformJSX,
+  wrapReactiveExpressions
 };

package/dist/reactive-wrap.d.ts

@@ -8,7 +8,7 @@
  * Supported reactive sources:
  *   - `createMutable` / `createStore` from `sinwan/store`
  *   - `signal` / `computed` from `sinwan/reactivity`
- *   - `useState` from `sinwan/react-client`
+ *   - `useState` from `sinwan/react`
  *
  * Example:
  *   <p>{state.name}</p>        → <p>{() => state.name}</p>
@@ -22,6 +22,7 @@ export interface ImportNames {
     signal: Set<string>;
     computed: Set<string>;
     useState: Set<string>;
+    useFetch: Set<string>;
     cc: Set<string>;
 }
 export declare function trackReactiveImports(ast: t.Node): ImportNames;
@@ -39,15 +40,26 @@ export interface ComputedBinding {
 export interface GetterBinding {
     kind: "getter";
 }
+/**
+ * Binding for a variable holding the object returned by `useFetch()` /
+ * `createFetch()(...)`. Every property on that object is a `Signal` or
+ * `Computed`, so a read like `f.data.value` (path `["data", "value"]`) is
+ * reactive. The shell object itself (`f`) and a bare property (`f.data`, the
+ * signal object) are NOT reactive reads — the runtime `resolve()` unwraps them
+ * inside effects when forwarded to control-flow props such as `<Show when>`.
+ */
+export interface SignalObjectBinding {
+    kind: "signalObject";
+}
 export interface PropBinding {
     kind: "prop";
 }
-export type Binding = MutableBinding | SignalBinding | ComputedBinding | GetterBinding | PropBinding;
+export type Binding = MutableBinding | SignalBinding | ComputedBinding | GetterBinding | SignalObjectBinding | PropBinding;
 export interface ReactiveScope {
     bindings: Map<string, Binding>;
 }
 export declare function getAllPropNames(params: t.Node | undefined): Set<string>;
-export declare function isReactiveValue(node: t.Identifier | t.MemberExpression, scope: ReactiveScope): boolean;
+export declare function isReactiveValue(node: t.Node, scope: ReactiveScope): boolean;
 export declare function containsReactiveValue(expr: t.Expression, scope: ReactiveScope): boolean;
 export interface ComponentExpressionInfo {
     isComponent: boolean;
@@ -76,5 +88,6 @@ export declare function wrapReactiveExpressions(ast: t.Node, options?: {
     explicitBindings?: boolean;
     analyze?: string;
     analyzeMetadata?: Map<string, Map<string, Set<string>>>;
+    resolveImport?: (source: string, fromFile: string) => string | null;
     filename?: string;
 }): void;

package/dist/transform.d.ts

@@ -16,7 +16,29 @@ export interface TransformOptions {
     analyze?: string;
     /** In-memory reactive-props metadata (used by plugin-level caches). */
     analyzeMetadata?: Map<string, Map<string, Set<string>>>;
+    /**
+     * Resolves an import source (e.g. "./Child") to an absolute file path,
+     * relative to the file being transformed. Used to look up reactive-prop
+     * metadata for components imported from other modules so reactive values
+     * passed to them are wrapped at the call site. When omitted, cross-module
+     * component call sites fall back to the conservative (non-wrapping) behavior.
+     */
+    resolveImport?: (source: string, fromFile: string) => string | null;
 }
+/**
+ * Template slot marker encoding.
+ *
+ * This mirrors the runtime's `DEFAULT_TEMPLATE_SLOT_PROTOCOL` in
+ * `sinwan/src/renderer/template-protocol.ts`. The compiler cannot import the
+ * runtime (separate packages), so the format is duplicated here. A drift test
+ * (`sinwan/__tests__/compiler-protocol-drift.test.ts`) asserts the two stay
+ * in sync.
+ */
+export declare const COMPILER_TEMPLATE_SLOT_PROTOCOL: {
+    slotPrefix: string;
+    encodeSlot(index: number): string;
+    decodeSlot(data: string): number | null;
+};
 export declare function transformJSX(code: string, filename: string, options?: TransformOptions): {
     code: string;
     map?: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sinwan-compiler",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Shared compiler core for Sinwan plugins",
   "type": "module",
   "main": "./dist/index.js",