sinwan-compiler 0.3.1 → 1.0.0

package/dist/live-cc-destructure.d.ts

@@ -8,7 +8,7 @@
  * Nested patterns are left as snapshots. JSX spreads of the props (or rest)
  * identifier use `getSpreadProps` so native attributes keep getter functions.
  */
-import * as t from "@babel/types";
+import * as t from "./ast/types";
 /**
  * Rewrite flat `cc` destructure and raw JSX spreads. Returns whether any
  * helper imports are required.

package/dist/reactive-wrap.d.ts

@@ -6,7 +6,7 @@
  * when the value changes.
  *
  * Supported reactive sources:
- *   - `createMutable` / `createStore` from `sinwan/store`
+ *   - `createMutable` / `createStore` from `sinway`
  *   - `signal` / `computed` from `sinwan/reactivity`
  *   - `useState` from `sinwan/react`
  *   - `.value` reads of signals returned from other modules (`useTheme`,
@@ -20,7 +20,7 @@
  *   <p>{count.value}</p>        → <p>{() => count.value}</p>
  *   <p>{getCount()}</p>         → <p>{() => getCount()}</p>
  */
-import * as t from "@babel/types";
+import * as t from "./ast/types";
 export interface ImportNames {
     createMutable: Set<string>;
     createStore: Set<string>;
@@ -98,6 +98,8 @@ export declare function collectComponentCallGraph(ast: t.Node, componentNames: M
 export declare function buildFullScope(localScopes: Map<t.Function, ReactiveScope>, fn: t.Function, reactiveProps: Set<string>): ReactiveScope | null;
 export declare function propagateReactiveProps(localScopes: Map<t.Function, ReactiveScope>, callGraph: Map<t.Function, CallSite[]>, componentFunctions: Set<t.Function>): Map<t.Function, Set<string>>;
 export declare function wrapReactiveExpressions(ast: t.Node, options?: {
+    derivedLocals?: boolean;
+    dev?: boolean;
     explicitBindings?: boolean;
     analyze?: string;
     analyzeMetadata?: Map<string, Map<string, Set<string>>>;

package/dist/transform.d.ts

@@ -5,7 +5,9 @@
  * Static JSX elements are extracted to module-level template strings
  * and replaced with optimized template creation calls.
  */
+import { t } from "./ast";
 export interface TransformOptions {
+    derivedLocals?: boolean;
     /** Enable template hoisting (default: true) */
     hoist?: boolean;
     /** Enable dev mode (source maps, etc.) */
@@ -39,6 +41,7 @@ export declare const COMPILER_TEMPLATE_SLOT_PROTOCOL: {
     encodeSlot(index: number): string;
     decodeSlot(data: string): number | null;
 };
+export declare function jsxAttrName(attr: t.Node): string | undefined;
 export declare function transformJSX(code: string, filename: string, options?: TransformOptions): {
     code: string;
     map?: any;

package/docs/api.md

@@ -29,11 +29,11 @@ See [Transform](transform.md) for wrapping rules and options.
 
 ### `autoWrapComponents(ast, filename?)`
 
-Mutates a Babel AST: wrap exported component-like functions with `cc(...)`. Returns `true` if anything changed. `transformJSX` already runs this.
+Mutates an ESTree AST (oxc-parser): wrap exported component-like functions with `cc(...)`. Returns `true` if anything changed. `transformJSX` already runs this.
 
 ### `rewriteLiveCcDestructure(ast)`
 
-Mutates a Babel AST: rewrite flat `cc(({ value }) => …)` params to a `props` identifier and `{...props}` spreads to `getSpreadProps(props)`. Nested destructure is left as a snapshot. `transformJSX` already runs this before reactive wrap.
+Mutates an ESTree AST (oxc-parser): rewrite flat `cc(({ value }) => …)` params to a `props` identifier and `{...props}` spreads to `getSpreadProps(props)`. Nested destructure is left as a snapshot. `transformJSX` already runs this before reactive wrap.
 
 ## Analysis
 
@@ -122,7 +122,7 @@ Parse `analyze [root] [outFile] [--tsconfig] [--bunfig] [--workspaces]` and call
 
 | Name | Role |
 | ---- | ---- |
-| `collectExportedComponents(code)` | File-local exported component names (no `cc` required) |
+| `collectExportedComponents(code)` | File-local exported component names (no `cc` required). Skips type-only exports. |
 | `wrapReactiveExpressions(ast, options?)` | Reactive wrap without hoisting |
 | `trackReactiveImports(ast)` | Import-name sets for signals, `cc`, `useFetch`, … |
 | `collectComponentFunctions(ast, ccNames)` | `cc(...)` functions, names, and exports |

package/docs/architecture.md

@@ -6,6 +6,7 @@ This page is for people changing the compiler. App authors can stay on [Transfor
 
 ```
 src/
+  ast/               oxc parse, Path/Scope, esrap print
   index.ts           Public exports
   auto-cc.ts         Exported function → cc(...)
   live-cc-destructure.ts  Flat cc(({ value }) => …) → props.value
@@ -16,6 +17,21 @@ src/
   exports.ts         collectExportedComponents
 ```
 
+## AST pipeline
+
+`transformJSX` and analyze parse with **oxc-parser** (`parseSync`, ESTree / TS-ESTree). The compiler parses as TSX so JSX and TypeScript are accepted in `.js`, `.jsx`, `.ts`, and `.tsx`, matching the previous Babel plugin set. Comments are copied onto `leadingComments` / `trailingComments`. A JSX `{/* comment */}` stays on its empty expression. A comment that sits inside a function or object after the last child stays on that container. Rewrite passes walk a Babel-shaped **Path/Scope** facade built on oxc `visitorKeys` (parent pointers, `getBinding`, `replaceWith`). Print is **esrap** with `esrap/languages/tsx` and double quotes.
+
+Babel is not used. oxc-parser JS/JSX matches Acorn ESTree; TS/TSX matches TS-ESTree. Passes must treat:
+
+- `Literal` (not `StringLiteral` / `NumericLiteral`)
+- `Property` (not `ObjectProperty`)
+- `ChainExpression` around optional calls/members
+- `ParenthesizedExpression` (`preserveParens` defaults true) — unwrap in reactive walks, do not require Babel’s implicit paren stripping
+
+Print is esrap, not oxc-codegen or MagicString, so mutations stay on the tree. Acorn / acorn-walk cannot own this pipeline: Acorn does not parse TSX, and acorn-walk has no bindings or JSX/TS visitor keys. Bun.Transpiler and SWC are out of scope (no AST mutation API / not the primary engine).
+
+`derivedLocals` uses the Path/Scope facade; a Rust rewrite of passes is not required while those tests pass.
+
 ## Data flow
 
 ```text
@@ -23,6 +39,8 @@ transformJSX
   autoWrapComponents
   rewriteLiveCcDestructure  ← flat destructure stays live; raw JSX spreads
   wrapReactiveExpressions   ← analyze / analyzeMetadata / resolveImport
+    promoteReactiveConstInitializers ← opt-in derivedLocals, snapshot diagnostics
+    rebuild scopes / call graph / JSX wrapping
   hoist JSXElement roots    ← _$createTemplate + slots
 
 analyze / AnalyzerCache.update

package/docs/plugins.md

@@ -48,14 +48,15 @@ The Vite plugin sets `resolve.dedupe: ["sinwan"]` for the same duplicate-runtime
 
 ## Shared plugin options
 
-| Option | Default | Role |
-| ------ | ------- | ---- |
-| `hoist` | `true` | Template hoisting |
-| `dev` | Bun: `NODE_ENV !== "production"` at `sinwan()`; Vite: `config.mode !== "production"` | Warn when hoisting is skipped. Pass `false` for library/`Bun.build` production bundles. |
-| `explicitBindings` | `false` | `_$bind*` helpers instead of bare `() =>` |
-| `analyze` | unset | Path to CLI JSON (production) |
-| `cache` | `true` | Incremental analyzer in dev. `false` turns it off. An object sets `root`, `tsConfigPath`, `bunfigPath`, `workspaces`, `cachePath` |
-| `fastRefresh` | Bun: same as `dev`; Vite: `true` in `serve` | Per-component `import.meta.hot.accept` so routed/looked-up pages hot-update |
+| Option             | Default                                                                              | Role                                                                                                                                                                                                                                                                                                       |
+| ------------------ | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `hoist`            | `true`                                                                               | Template hoisting                                                                                                                                                                                                                                                                                          |
+| `derivedLocals`    | `false`                                                                              | Promote eligible component-local reactive constants to live getters; see [Transform](transform.md#derived-locals-opt-in). Supports `/** @sinwan-pure */` JSDoc-annotated imports; see [`@sinwan-pure` JSDoc contract](transform.md#sinwan-pure-jsdoc-contract). Requires compiler, plugin and runtime builds with this feature. |
+| `dev`              | Bun: `NODE_ENV !== "production"` at `sinwan()`; Vite: `config.mode !== "production"` | Warn when hoisting is skipped. Pass `false` for library/`Bun.build` production bundles.                                                                                                                                                                                                                    |
+| `explicitBindings` | `false`                                                                              | `_$bind*` helpers instead of bare `() =>`                                                                                                                                                                                                                                                                  |
+| `analyze`          | unset                                                                                | Path to CLI JSON (production)                                                                                                                                                                                                                                                                              |
+| `cache`            | `true`                                                                               | Incremental analyzer in dev. `false` turns it off. An object sets `root`, `tsConfigPath`, `bunfigPath`, `workspaces`, `cachePath`                                                                                                                                                                          |
+| `fastRefresh`      | Bun: same as `dev`; Vite: `true` in `serve`                                          | Per-component `import.meta.hot.accept` so routed/looked-up pages hot-update                                                                                                                                                                                                                                |
 
 ## Dev vs production
 

package/docs/transform.md

@@ -76,12 +76,12 @@ export const Child = cc((props) => <span>{() => props.value}</span>);
 
 Tracked imports:
 
-| Module | Names |
-| ------ | ----- |
-| `sinwan/store` | `createMutable`, `createStore` |
-| `sinwan/reactivity` | `signal`, `computed` |
-| `sinwan/react` | `useState` |
-| `sinwan/hook` | `useFetch` |
+| Module              | Names                          |
+| ------------------- | ------------------------------ |
+| `sinway`      | `createMutable`, `createStore` |
+| `sinwan/reactivity` | `signal`, `computed`           |
+| `sinwan/react`      | `useState`                     |
+| `sinwan/hook`       | `useFetch`                     |
 
 Reads the compiler wraps:
 
@@ -98,11 +98,311 @@ Not wrapped:
 
 - Literals and plain identifiers
 - Event-handler functions (`onClick={fn}` or `onClick={() => …}`)
-- Nested function *values* passed as props (`title={() => s.value}` stays a render prop)
+- Nested function _values_ passed as props (`title={() => s.value}` stays a render prop)
 - Functions stored as object/array values (`{ onClick: () => s.value }`) or returned from a factory (`const make = () => () => s.value`)
 - `useFetch` methods such as `abort` / `execute`
 - Static values the [analyzer](analyzer.md) proved never change
 
+## Derived locals (opt-in)
+
+JSX expressions containing reactive reads already stay live without an author-written arrow. By default, moving that read into `const open = count.value > 0` still takes a **setup snapshot**. Inline one-off expressions in JSX; use a getter or `computed()` for shared derivations when promotion is disabled.
+
+Enable `derivedLocals: true` in `transformJSX` or either plugin to promote eligible component-local constants:
+
+```tsx
+export function App() {
+  const count = signal(0);
+  const positive = count.value > 0;
+  const label = positive ? "positive" : "zero";
+  return (
+    <Show when={positive}>
+      <span title={label}>{label}</span>
+    </Show>
+  );
+}
+```
+
+The derived declarations become zero-argument getters, and references become value reads:
+
+```tsx
+const positive = () => count.value > 0;
+const label = () => (positive() ? "positive" : "zero");
+return (
+  <Show when={() => positive()}>
+    <span title={() => label()}>{() => label()}</span>
+  </Show>
+);
+```
+
+### Eligibility and semantics
+
+- Only referenced, identifier-named `const` declarations directly in a `cc` setup body (including auto-`cc` components) are candidates. Dependencies are processed in declaration order, including multiple declarators in one statement.
+- Pure read expressions are supported: member/index/optional access, arithmetic, comparisons, boolean/conditional expressions, template strings, object/array literals, and TypeScript expression annotations. Direct imported `useState` getter calls and unshadowed single-argument `Boolean`, `Number`, and `String` coercions are also supported. Property reads and coercions must be free of user-defined side effects.
+- Calls to arbitrary helpers, hooks, factories or methods, assignments, updates, allocations, destructuring, `let`/`var`, mutable captures, and forward/TDZ references remain eager — **unless** the callee is an imported function annotated with `/** @sinwan-pure */` (see [`@sinwan-pure` JSDoc contract](#sinwan-pure-jsdoc-contract) below). Explicit getter and `computed` initializers are unchanged. Module, event-handler, render-callback, loop and nested-block declarations are not promoted.
+- Bare signal/store containers still pass through unchanged. Bare component prop-bag aliases retain their ordinary JavaScript value semantics. References are resolved by lexical binding, so shadowed locals and object keys are not rewritten.
+- Every ordinary value use is called, including chained initializers, closures, event bodies, shorthand object values and setup `if` tests. A boolean does **not** become an accidentally truthy function. Setup control flow still runs once; use `Show`/`Switch` for reactive branches.
+- Variables used as JSX tag names, in type queries, or as mutation/method-call receivers are left eager. Components containing direct `eval` are excluded.
+- Getters are lazy, not cached. Use explicit `computed()` when caching matters. This is not whole-program dataflow, and does not turn arbitrary setup side effects into effects.
+
+### Intentional snapshots and diagnostics
+
+Put `/* sinwan-snapshot */` immediately before a declaration or its initializer to retain a one-shot read:
+
+```tsx
+/* sinwan-snapshot */ const initial = count.value;
+const alsoInitial = /* sinwan-snapshot */ count.value;
+```
+
+A declaration-level pragma applies to all its declarators. A snapshot can read another promoted local: the compiler calls that dependency once at the snapshot declaration.
+
+With `dev: true`, the compiler warns when an eligible unpromoted derivation is used in JSX while promotion is disabled. It also warns about a promoted local used directly as a setup `if` test, explaining that the value is read once even though the compiler preserves boolean semantics. Intentional snapshot pragmas suppress the snapshot diagnostic; production (`dev: false`) is quiet.
+
+### `@sinwan-pure` JSDoc contract
+
+The compiler can promote derived `const` initializers that call imported utility functions when those functions are annotated with `/** @sinwan-pure */` in their source file. This eliminates the need for manual `() =>` wrappers around common utilities like className mergers.
+
+**Annotation:**
+
+```ts
+/** @sinwan-pure */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
+```
+
+Both `export function` and `export const` declarations are recognized. The annotation must be a block comment (`/** */`) immediately before the `export` keyword.
+
+**What the compiler guarantees:**
+
+- When `derivedLocals: true` is enabled, calls to `@sinwan-pure`-annotated imported functions are treated as safe expressions. The containing `const` initializer is promoted to a zero-argument getter, and references inside the function arguments are rewritten (e.g. `seamInactive` → `seamInactive()`).
+- The compiler resolves the import path, reads the source file, parses it, and checks for `/** @sinwan-pure */` on exported declarations. Results are cached per resolved file path, so each file is read at most once per compilation process.
+- All import types are scanned: relative imports (`./`, `../`), bare specifiers (`clsx`, `sinwan/reactivity`), scoped packages (`@scope/utils`), and subpath imports (`@scope/utils/merge`). The compiler walks up the directory tree to find `node_modules/<pkg>`, reads `package.json`, and resolves the entry point via `exports`, `module`, `main`, `source`, or `index` files.
+- If the `resolveImport` callback is provided by the plugin, it is used for path resolution (handles tsconfig paths, bunfig aliases, workspace packages, and Bun/Vite module resolution). Otherwise, the compiler falls back to direct filesystem resolution with common extensions (`.ts`, `.tsx`, `.js`, `.jsx`, `.mjs`, `.cjs`, `.mts`, `.cts`) and `index` files.
+
+**Supported export forms (annotate with `/** @sinwan-pure \*/`):\*\*
+
+| Export form            | Example                                                     | Call shape           |
+| ---------------------- | ----------------------------------------------------------- | -------------------- |
+| Named function         | `/** @sinwan-pure */ export function cn()`                  | `cn(...)`            |
+| Named const (function) | `/** @sinwan-pure */ export const merge = () =>`            | `merge(...)`         |
+| Named const (object)   | `/** @sinwan-pure */ export const helpers = { ... }`        | `helpers.merge(...)` |
+| Named class            | `/** @sinwan-pure */ export class Utils { static merge() }` | `Utils.merge(...)`   |
+| Default function       | `/** @sinwan-pure */ export default function helper()`      | `helper(...)`        |
+| Default arrow          | `/** @sinwan-pure */ export default () =>`                  | `helper(...)`        |
+| Default class          | `/** @sinwan-pure */ export default class {}`               | `helper.merge(...)`  |
+
+**Supported import forms:**
+
+| Import form            | Example                                 | Call shape    |
+| ---------------------- | --------------------------------------- | ------------- |
+| Named import           | `import { cn } from "./utils"`          | `cn(...)`     |
+| Named import (aliased) | `import { cn as merge } from "./utils"` | `merge(...)`  |
+| Default import         | `import helper from "./utils"`          | `helper(...)` |
+| Namespace import       | `import * as ns from "./utils"`         | `ns.cn(...)`  |
+
+**Supported re-export forms:**
+
+| Re-export form            | Example                                      |
+| ------------------------- | -------------------------------------------- |
+| Named re-export           | `export { cn } from "./utils"`               |
+| Aliased re-export         | `export { cn as merge } from "./utils"`      |
+| Default re-export         | `export { default } from "./utils"`          |
+| Aliased default re-export | `export { default as merge } from "./utils"` |
+| Namespace re-export       | `export * from "./utils"`                    |
+
+For class and object exports, any static method or property call on the imported binding is treated as pure (e.g. `Utils.merge(...)`, `Utils.format(...)`, `helpers.merge(...)`, `helpers.format(...)`).
+
+**What the annotation author is responsible for:**
+
+- **Purity:** The function must not produce side effects — no signal writes, no DOM mutations, no I/O, no global state changes. Calling the function with the same arguments must always return the same value. The compiler does not verify this; it trusts the annotation.
+- **No hidden reactivity:** The function must not read signals, stores, or other reactive sources internally. If it does, those reads will not be tracked because the function is called inside a getter that the runtime evaluates in an effect — but only the arguments passed to the function are tracked, not reads inside the function body.
+- **Export visibility:** The annotation must be on an exported declaration (`export function`, `export const`, `export class`, `export default`). Re-exports are followed recursively — the compiler resolves the re-export source and scans it for the annotation. Named, aliased, default, and `export *` re-exports are all supported. Circular re-exports are handled with a depth limit to prevent infinite loops.
+- **Import resolvability:** The annotated file must be reachable via any import (relative, bare specifier, scoped package, or subpath). The compiler resolves `node_modules` packages via `package.json` `exports`/`module`/`main`/`source` fields and walks up the directory tree.
+
+**What happens when the annotation is wrong:**
+
+- **Annotated a non-pure function:** The compiler will promote the containing `const` to a getter. If the function has side effects, those side effects will run on every re-evaluation of the getter (whenever its tracked dependencies change), not just once at setup. This will not crash, but may cause unexpected repeated side effects.
+- **Annotated a function that reads signals internally:** Those internal signal reads will not be tracked as dependencies of the promoted getter. The getter will not re-evaluate when those internal signals change, producing stale values. No crash, but incorrect reactivity.
+- **Forgot to annotate a pure function:** The compiler will reject the containing `const` initializer as unsafe. The value will be a one-shot setup snapshot. No crash, but the value will not update when its dependencies change. The `dev: true` diagnostic will warn about eligible unpromoted derivations used in JSX.
+- **Annotation on a non-exported function:** The annotation is ignored. Only exported declarations are scanned.
+- **Import path unresolvable:** The annotation is not found. The function is treated as a non-pure call. No crash, but the containing `const` will not be promoted. This can happen if the package's `package.json` entry points don't lead to a source file, or if the `node_modules` directory is not in the expected location.
+
+**Plugin forwarding:**
+
+Both `bun-plugin-sinwan` and `vite-plugin-sinwan` forward the `resolveImport` callback to the compiler when the analyzer cache is enabled (`cache: true`, the default). This uses the plugin's module resolver, which handles workspace packages, tsconfig paths, and Bun/Vite resolution. When the cache is disabled or the minimal preload is used, the compiler falls back to direct filesystem resolution, which works for relative imports in a standard project layout.
+
+**What is not scanned (by design):**
+
+- **Dynamic imports** (`const { cn } = await import("./utils")`) — the binding is established at runtime, not compile time. The compiler cannot statically resolve which module a dynamic import loads, so it cannot scan the source for `@sinwan-pure` annotations. Use a static import instead.
+- **`require()`** (`const { cn } = require("./utils")`) — CommonJS, not used in Sinwan's ESM target. Bun and Vite both use ESM for application code. Annotate the function and import it via a static ESM import.
+- **Computed member access with non-literal keys** (`ns[key]()` where `key` is a variable, or `ns[\`cn`]()` with template literals) — the compiler cannot statically determine which property is being accessed. Use direct member access (`ns.cn()`) or string literal access (`ns["cn"]()`) instead.
+
+### Workarounds for unsupported patterns
+
+When the compiler cannot auto-promote a derived local (dynamic import, `require()`, or computed member access), use one of these workarounds to preserve reactivity.
+
+#### 1. Replace dynamic import with static import (recommended)
+
+If the module is available at startup, use a static ESM import instead of `await import()`. The compiler can then scan the source file for `@sinwan-pure` annotations and auto-promote the derived local.
+
+```ts
+// ❌ Does NOT work — dynamic import, binding is runtime
+const { cn } = await import("./utils");
+const cls = cn("base", size.value > 50 && "big");
+
+// ✅ Works — static import, compiler auto-promotes
+import { cn } from "./utils"; // /** @sinwan-pure */ export function cn(...)
+const cls = cn("base", size.value > 50 && "big");
+
+// Compiled output:
+// const cls = () => cn("base", size.value > 50 && "big");
+```
+
+#### 2. Replace `require()` with static ESM import (recommended)
+
+Sinwan targets ESM. Use a static ESM import instead of `require()`.
+
+```ts
+// ❌ Does NOT work — CommonJS require(), not ESM
+const { cn } = require("./utils");
+const cls = cn("base", size.value > 50 && "big");
+
+// ✅ Works — static ESM import, compiler auto-promotes
+import { cn } from "./utils";
+const cls = cn("base", size.value > 50 && "big");
+```
+
+#### 3. Replace computed member access with direct or string literal access (recommended)
+
+If you control the call site, use direct member access (`ns.cn()`) or string literal access (`ns["cn"]()`) instead of a variable key.
+
+```ts
+import * as ns from "./utils";
+
+// ❌ Does NOT work — variable key, compiler can't resolve
+const key = "cn";
+const cls = ns[key]("base", size.value > 50 && "big");
+
+// ❌ Does NOT work — template literal key, compiler can't resolve
+const cls = ns[`cn`]("base", size.value > 50 && "big");
+
+// ✅ Works — direct member access, compiler auto-promotes
+const cls = ns.cn("base", size.value > 50 && "big");
+
+// ✅ Works — string literal key, compiler auto-promotes
+const cls = ns["cn"]("base", size.value > 50 && "big");
+```
+
+#### 4. Use a manual `() =>` getter (fallback for truly dynamic patterns)
+
+If you genuinely need dynamic import (e.g. for code-splitting) or computed member access with a variable key, wrap the expression in a manual `() =>` getter. The runtime will re-evaluate it in an effect whenever its tracked dependencies change.
+
+```ts
+import * as ns from "./utils";
+import { computed } from "sinwan/reactivity";
+
+// Manual getter — the compiler does not promote it, but the runtime
+// wraps it in an effect so it stays reactive.
+const cls = () => {
+  const key = "cn";
+  return ns[key]("base", size.value > 50 && "big");
+};
+
+// Or use computed() for a memoized version (re-evaluates only when
+// size.value changes, not on every access):
+const clsMemo = computed(() => {
+  const key = "cn";
+  return ns[key]("base", size.value > 50 && "big");
+});
+```
+
+#### 5. Use `computed()` for expensive dynamic patterns
+
+If the dynamic expression is expensive (e.g. involves an `await import()`), use `computed()` to memoize the result. The computation runs once and caches until a dependency changes.
+
+```ts
+import { computed } from "sinwan/reactivity";
+
+// computed() runs the async import lazily and caches the result.
+// The compiler does not promote this (it's already a getter),
+// but the runtime tracks size.value as a dependency.
+const cls = computed(() => {
+  // For dynamic import, you would need to resolve the module
+  // outside the computed() and only use the dynamic key inside:
+  const key = "cn";
+  return ns[key]("base", size.value > 50 && "big");
+});
+```
+
+#### Complete demo
+
+```ts
+// lib/utils.ts
+/** @sinwan-pure */
+export function cn(...inputs: unknown[]): string {
+  return String(inputs);
+}
+
+/** @sinwan-pure */
+export const helpers = {
+  merge: (...inputs: unknown[]): string => String(inputs),
+};
+
+// comp.tsx
+import { cc } from "sinwan/component";
+import { signal, computed } from "sinwan/reactivity";
+import { cn, helpers } from "../lib/utils";
+import * as ns from "../lib/utils";
+
+export const App = cc(() => {
+  const size = signal(30);
+
+  // ✅ Auto-promoted — static import + @sinwan-pure
+  const a = cn("base", size.value > 50 && "big");
+
+  // ✅ Auto-promoted — namespace import + direct member access
+  const b = ns.cn("base", size.value > 50 && "big");
+
+  // ✅ Auto-promoted — string literal key
+  const c = ns["cn"]("base", size.value > 50 && "big");
+
+  // ✅ Auto-promoted — object member call
+  const d = helpers.merge("base", size.value > 50 && "big");
+
+  // ✅ Manual getter — for computed member access with variable key
+  const e = () => {
+    const key = "cn";
+    return ns[key]("base", size.value > 50 && "big");
+  };
+
+  // ✅ computed() — memoized, re-evaluates only when size.value changes
+  const f = computed(() => ns.cn("base", size.value > 50 && "big"));
+
+  return <div class={a} data-b={b} data-c={c} data-d={d} data-e={e} data-f={f} />;
+});
+```
+
+Compiled output:
+
+```ts
+const a = () => cn("base", size.value > 50 && "big");
+const b = () => ns.cn("base", size.value > 50 && "big");
+const c = () => ns["cn"]("base", size.value > 50 && "big");
+const d = () => helpers.merge("base", size.value > 50 && "big");
+const e = () => {
+  // manual getter — preserved as-is
+  const key = "cn";
+  return ns[key]("base", size.value > 50 && "big");
+};
+const f = computed(() => ns.cn("base", size.value > 50 && "big")); // already a getter
+```
+
+### Client, SSR and hydration
+
+Generated getter calls use the existing JSX wrapping and explicit-binding rules; manual getter identifiers do not need a new blanket wrapping policy. Native attributes must use a runtime build with plain zero-argument getter hydration support. Text, attributes and `Show` remain reactive after hydration; event handlers and nonzero-arity callbacks are not invoked as getters.
+
+The runtime's existing complex-template hydration fallback can replace a hoisted server subtree during initial hydration. Promotion does not change that policy; subsequent signal updates do not remount the native shell. Non-hoisted attribute hydration binds to the existing DOM in place.
+
 ## DOM vs component JSX
 
 **Native elements** (`div`, `p`, `button`, …): wrap reactive children and attributes.
@@ -110,18 +410,18 @@ Not wrapped:
 **User components** (`<Label>`, `<Child title={…} />`):
 
 - **Children:** wrap reactive reads the same way as DOM text (`{count.value}`, `{checked.value ? "On" : "Off"}`) so `cc()` parents do not snapshot the value. Use a getter (`() => …`), never `_$bindText`, because the child may render nodes as well as strings. Render-prop functions (`{(v) => …}`) stay untouched.
-- **Props:** wrap a prop if it is known-reactive for that component (built-in registry, local call graph, analyzer metadata). For *unknown* imported components, still wrap **derived reads** (`htmlFor={id.value}`, `disabled={off.value}`) and leave **container pass-through** alone (`checked={checked}`, `user={user}`) so the child receives the signal or store proxy. With `explicitBindings`, component props stay **getters** (`each={() => …}`), never `_$bindAttr` — `For` / `Show` / `Label` call `resolve(prop)`, which does not unwrap bind descriptors.
+- **Props:** wrap a prop if it is known-reactive for that component (built-in registry, local call graph, analyzer metadata). For _unknown_ imported components, still wrap **derived reads** (`htmlFor={id.value}`, `disabled={off.value}`) and leave **container pass-through** alone (`checked={checked}`, `user={user}`) so the child receives the signal or store proxy. With `explicitBindings`, component props stay **getters** (`each={() => …}`), never `_$bindAttr` — `For` / `Show` / `Label` call `resolve(prop)`, which does not unwrap bind descriptors.
 
 **Built-in control-flow** components wrap specific props, and they wrap reactive expression children (those children render directly):
 
-| Component | Reactive props |
-| --------- | -------------- |
-| `For`, `Index`, `Virtual` | `each` |
-| `Show`, `Switch`, `Match`, `Key` | `when` |
-| `Dynamic` | `component` |
-| `Visible` | `when`, `style` |
-| `Portal` | `mount` |
-| `Activity` | `mode` |
+| Component                        | Reactive props  |
+| -------------------------------- | --------------- |
+| `For`, `Index`, `Virtual`        | `each`          |
+| `Show`, `Switch`, `Match`, `Key` | `when`          |
+| `Dynamic`                        | `component`     |
+| `Visible`                        | `when`, `style` |
+| `Portal`                         | `mount`         |
+| `Activity`                       | `mode`          |
 
 `Suspense` is not in this list; its props are left alone.
 
@@ -131,12 +431,12 @@ Static native trees become a module-level template plus `_$createTemplate(tmpl,
 
 Slots:
 
-| Type | When |
-| ---- | ---- |
+| Type    | When                                       |
+| ------- | ------------------------------------------ |
 | `child` | `{expr}`, or a capitalized child component |
-| `attr` | Dynamic attribute (not `on*`) |
-| `event` | `onClick={…}` and other `on*` handlers |
-| `ref` | `ref={fn}` or `ref={object}` |
+| `attr`  | Dynamic attribute (not `on*`)              |
+| `event` | `onClick={…}` and other `on*` handlers     |
+| `ref`   | `ref={fn}` or `ref={object}`               |
 
 Static `style` objects and strings are written into the HTML (`backgroundColor` → `background-color`). Quoted style strings that contain `${…}` log a warning in the compiler: use a template literal, `style={\`…${x}\`}`.
 
@@ -150,6 +450,7 @@ The slot marker format is `COMPILER_TEMPLATE_SLOT_PROTOCOL` (`s:0`, `s:1`, …).
 
 ```ts
 transformJSX(code, "src/App.tsx", {
+  derivedLocals: false,
   hoist: true, // default true
   dev: false, // warn when hoisting is skipped
   explicitBindings: false, // emit _$bindText / _$bindAttr / …

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sinwan-compiler",
-  "version": "0.3.1",
+  "version": "1.0.0",
   "description": "Shared compiler core for Sinwan plugins",
   "type": "module",
   "main": "./dist/index.js",
@@ -37,18 +37,14 @@
     "prepublishOnly": "bun run clean && bun run typecheck && bun run test && bun run build"
   },
   "devDependencies": {
-    "@types/babel__generator": "^7.27.0",
-    "@types/babel__traverse": "^7.28.0",
+    "@oxc-project/types": "^0.150.0",
     "@types/bun": "latest"
   },
   "dependencies": {
-    "@babel/core": "^7.24.0",
-    "@babel/generator": "^7.24.0",
-    "@babel/parser": "^7.24.0",
-    "@babel/traverse": "^7.24.0",
-    "@babel/types": "^7.24.0"
+    "esrap": "^2.3.7",
+    "oxc-parser": "^0.150.0"
   },
   "peerDependencies": {
-    "typescript": "^5"
+    "typescript": ">=5.0.0 <8.0.0"
   }
 }