svelte-origin 1.0.0-next.22 → 1.0.0-next.24

package/dist/runtime/index.js

@@ -3473,34 +3473,22 @@ function __attrsFor(factory, rawAttrs) {
   const factoryWithSchema = factory;
   const schema = getMergedAttrSchema(factoryWithSchema);
   const wrapper = {};
-  const localValues = {};
-  const hasLocalValue = {};
   const defineExposedProp = (key2, info) => {
     if (Object.prototype.hasOwnProperty.call(wrapper, key2))
       return;
-    const base = {
+    const descriptor = {
       get() {
-        if (hasLocalValue[key2])
-          return localValues[key2];
         return rawAttrs[key2];
       },
       enumerable: true,
       configurable: true
     };
     if (info.bindable) {
-      Object.defineProperty(wrapper, key2, {
-        ...base,
-        set(value) {
-          localValues[key2] = value;
-          hasLocalValue[key2] = true;
-          try {
-            rawAttrs[key2] = value;
-          } catch {}
-        }
-      });
-    } else {
-      Object.defineProperty(wrapper, key2, base);
+      descriptor.set = function(value) {
+        rawAttrs[key2] = value;
+      };
     }
+    Object.defineProperty(wrapper, key2, descriptor);
   };
   for (const [key2, info] of Object.entries(schema)) {
     const parentValue = rawAttrs[key2];
@@ -3521,8 +3509,6 @@ function __attrsFor(factory, rawAttrs) {
   return new Proxy(wrapper, {
     get(target, prop2) {
       if (typeof prop2 === "string" && prop2 in schema) {
-        if (hasLocalValue[prop2])
-          return localValues[prop2];
         return rawAttrs[prop2];
       }
       if (prop2 in target)
@@ -3531,15 +3517,11 @@ function __attrsFor(factory, rawAttrs) {
     },
     set(target, prop2, value) {
       if (typeof prop2 === "string" && prop2 in schema) {
-        localValues[prop2] = value;
-        hasLocalValue[prop2] = true;
         if (!Object.prototype.hasOwnProperty.call(wrapper, prop2)) {
           defineExposedProp(prop2, schema[prop2]);
         }
         if (schema[prop2].bindable) {
-          try {
-            rawAttrs[prop2] = value;
-          } catch {}
+          rawAttrs[prop2] = value;
         }
         return true;
       }
@@ -3551,18 +3533,10 @@ function __attrsFor(factory, rawAttrs) {
       }
       try {
         rawAttrs[prop2] = value;
-      } catch {
-        if (typeof prop2 === "string") {
-          localValues[prop2] = value;
-          hasLocalValue[prop2] = true;
-        }
-      }
+      } catch {}
       return true;
     },
     has(target, prop2) {
-      if (typeof prop2 === "string" && prop2 in schema) {
-        return prop2 in target || hasLocalValue[prop2];
-      }
       return prop2 in target || prop2 in rawAttrs;
     },
     ownKeys() {

package/dist/transform/attrs-for-transform.d.ts

@@ -6,12 +6,13 @@
  * - $attrs.for('input') - get typed element attrs
  */
 import type MagicString from 'magic-string';
+import { type SchemaResolver } from './schema';
 /**
- * Transform $attrs.for(X) calls.
- * Handles both origin factories ($attrs.for(OriginFactory)) and element names ($attrs.for('input'))
+ * Transform $attrs.for(X) calls (sync fallback version).
  *
- * If $props() already exists, we extend the existing destructuring with rest syntax.
- * Otherwise, we generate a new $props() call.
+ * This version always uses the fallback approach since no schema resolver is provided.
+ * Fallback generates a raw $props() proxy which does NOT support two-way binding
+ * through parent components (the props proxy is read-only for non-destructured props).
  *
  * Supports all TypeScript declaration patterns:
  * - let x = $attrs.for(Factory)
@@ -21,4 +22,34 @@ import type MagicString from 'magic-string';
  * - export let x = $attrs.for(Factory)
  * - export const x: Type = $attrs.for('input')
  */
-export declare function transformAttrsForCalls(s: MagicString, source: string, neededImports: Set<string>): boolean;
+export declare function transformAttrsForCallsSync(s: MagicString, source: string, neededImports: Set<string>): boolean;
+/**
+ * Transform $attrs.for(X) calls (async version with schema resolution).
+ *
+ * When schema is available via static resolution:
+ * ```svelte
+ * let childAttrs = $attrs.for(Counter)
+ * ```
+ * Becomes:
+ * ```svelte
+ * let { label = 'Counter', count = $bindable(0), step = 1 }: $attrs.Of<typeof Counter> = $props()
+ * let childAttrs = __attrsFor(Counter, { get label() { return label }, get count() { return count }, set count(v) { count = v }, get step() { return step } })
+ * ```
+ *
+ * This approach works because:
+ * 1. Props are destructured with $bindable(), making them writable
+ * 2. The getter/setter wrapper passes reactive accessors to __attrsFor
+ * 3. When child components update bindable props, the setters propagate changes back
+ *
+ * Fallback (when schema isn't statically known):
+ * ```svelte
+ * let ___attrs: $attrs.Of<typeof Counter> = $props()
+ * let childAttrs = __attrsFor(Counter, ___attrs)
+ * ```
+ *
+ * @param s MagicString instance for source manipulation
+ * @param source Original source code
+ * @param neededImports Set to track required runtime imports
+ * @param schemaResolver Optional resolver for static schema extraction
+ */
+export declare function transformAttrsForCalls(s: MagicString, source: string, neededImports: Set<string>, schemaResolver?: SchemaResolver): Promise<boolean>;

package/dist/transform/attrs-origin-transform.d.ts

@@ -6,12 +6,27 @@
  */
 import type MagicString from 'magic-string';
 import { type SchemaResolver } from './schema';
+/**
+ * Information about a tracked origin instance (for destructuring transform)
+ */
+export interface TrackedOriginInstance {
+    /** Variable name holding the origin instance */
+    varName: string;
+    /** The factory name/expression used to create it */
+    factoryExpr: string;
+    /** Start position in source */
+    startPos: number;
+    /** End position in source */
+    endPos: number;
+}
 /**
  * Result from transformAttrsOriginCalls including $$Props info for later injection
  */
 export interface AttrsOriginTransformResult {
     changed: boolean;
     propsTypeDeclaration: string | null;
+    /** Tracked origin instances for destructuring transform */
+    originInstances: Map<string, TrackedOriginInstance>;
 }
 /**
  * Transform $attrs.origin(X) calls in component scripts (sync fallback version).

package/dist/transform/origin-destructure-transform.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Origin destructuring transformation logic.
+ *
+ * Handles patterns like:
+ * - `let { increment } = counter` - destructure methods with this-binding
+ * - `let { value } = counter.props` - destructure props directly
+ * - `let { props: { value } } = counter` - nested props destructuring
+ * - `let { value = $bindable(0) } = counter.props` - override with bindable
+ *
+ * Methods are bound to preserve `this` context.
+ * Props are converted to reactive $derived values.
+ */
+import type MagicString from 'magic-string';
+import type { TrackedOriginInstance } from './attrs-origin-transform';
+/**
+ * Parsed destructuring pattern from origin
+ */
+export interface OriginDestructure {
+    /** Full match start position */
+    startPos: number;
+    /** Full match end position */
+    endPos: number;
+    /** The source variable being destructured from */
+    sourceVar: string;
+    /** Whether destructuring from .props (e.g., counter.props) */
+    isPropsAccess: boolean;
+    /** Destructured method names (need this binding) */
+    methods: DestructuredItem[];
+    /** Destructured props (need reactive access) */
+    props: DestructuredProp[];
+    /** Props pattern within nested `props: { ... }` */
+    nestedPropsPattern: NestedPropsPattern | null;
+}
+export interface DestructuredItem {
+    /** Original key in the origin */
+    key: string;
+    /** Alias if renamed (e.g., `increment: inc`) */
+    alias: string | null;
+    /** Default value if provided */
+    defaultValue: string | null;
+}
+export interface DestructuredProp extends DestructuredItem {
+    /** Whether $bindable() was used in the default */
+    isBindable: boolean;
+    /** The value inside $bindable() if bindable */
+    bindableDefault: string | null;
+}
+export interface NestedPropsPattern {
+    /** Start of the `props: { ... }` pattern */
+    startPos: number;
+    /** End of the `props: { ... }` pattern */
+    endPos: number;
+    /** Props within the nested pattern */
+    props: DestructuredProp[];
+}
+/**
+ * Transform origin destructuring patterns in the source.
+ *
+ * Tracks origin instances created via $attrs.origin() or direct factory calls,
+ * then transforms destructuring patterns that reference them.
+ */
+export declare function transformOriginDestructuring(s: MagicString, source: string, originInstances: Map<string, TrackedOriginInstance>): boolean;

package/dist/transform/reserved-keywords.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Reserved keyword handling for generated code.
+ *
+ * JavaScript/TypeScript reserved keywords cannot be used as bare identifiers
+ * in destructuring patterns. When a prop name is a reserved keyword (like 'class'),
+ * we need to use a renamed internal variable.
+ *
+ * Example:
+ * ```ts
+ * // This is INVALID:
+ * let { class = '' } = $props()
+ *
+ * // This is VALID:
+ * let { class: ___class = '' } = $props()
+ * ```
+ */
+/**
+ * Check if a string is a reserved keyword that needs renaming
+ */
+export declare function isReservedKeyword(name: string): boolean;
+/**
+ * Get the internal variable name for a prop.
+ *
+ * For reserved keywords and collision prevention, we prefix with `___`.
+ * This ensures the generated code is valid JavaScript.
+ *
+ * @param propName The original prop name
+ * @param forcePrefix If true, always add prefix (for collision prevention)
+ * @returns The internal variable name to use
+ *
+ * @example
+ * getInternalVarName('class') // '___class'
+ * getInternalVarName('value') // '___value'
+ * getInternalVarName('count', true) // '___count'
+ */
+export declare function getInternalVarName(propName: string, forcePrefix?: boolean): string;
+/**
+ * Generate the prop destructuring part for a single prop.
+ * Handles reserved keywords by using property renaming.
+ *
+ * @param propName The original prop name
+ * @param defaultValue The default value expression (already formatted)
+ * @returns The destructuring part for this prop
+ *
+ * @example
+ * // Reserved keyword
+ * generatePropDestructure('class', "''")
+ * // Returns: "class: ___class = ''"
+ *
+ * // Normal prop
+ * generatePropDestructure('value', '$bindable()')
+ * // Returns: "value: ___value = $bindable()"
+ */
+export declare function generatePropDestructure(propName: string, defaultValue: string): string;
+/**
+ * Generate the prop destructuring part for a prop without a default value.
+ *
+ * @param propName The original prop name
+ * @returns The destructuring part for this prop
+ *
+ * @example
+ * generatePropDestructureNoDefault('class')
+ * // Returns: "class: ___class"
+ */
+export declare function generatePropDestructureNoDefault(propName: string): string;
+/**
+ * Generate a getter for the reactive attrs wrapper.
+ *
+ * @param propName The original prop name
+ * @returns The getter definition
+ *
+ * @example
+ * generateGetter('class')
+ * // Returns: "get class() { return ___class }"
+ */
+export declare function generateGetter(propName: string): string;
+/**
+ * Generate a setter for the reactive attrs wrapper.
+ *
+ * @param propName The original prop name
+ * @returns The setter definition
+ *
+ * @example
+ * generateSetter('class')
+ * // Returns: "set class(v) { ___class = v }"
+ */
+export declare function generateSetter(propName: string): string;

package/dist/transform/schema.d.ts

@@ -64,12 +64,16 @@ export declare function parseAttrsSchemaFromSource(source: string, exportName: s
  * to the factory type. This approach is required for svelte-check to properly
  * infer component props from the origin factory definition.
  *
+ * All props use internal variable names (prefixed with ___) to:
+ * 1. Avoid reserved keyword conflicts (e.g., 'class' -> 'class: ___class')
+ * 2. Prevent accidental naming collisions with user code
+ *
  * @example
  * generatePropsDestructuring([
- *   { key: 'label', defaultValue: "'Counter'", bindable: false, hasDefault: true },
+ *   { key: 'class', defaultValue: "''", bindable: false, hasDefault: true },
  *   { key: 'count', defaultValue: '0', bindable: true, hasDefault: true }
  * ], 'Counter')
- * // Returns: "let { label = 'Counter', count = $bindable(0) }: $attrs.Of<typeof Counter> = $props()"
+ * // Returns: "let { class: ___class = '', count: ___count = $bindable(0) }: $attrs.Of<typeof Counter> = $props()"
  */
 export declare function generatePropsDestructuring(attrs: ParsedAttrInfo[], factoryName: string): string;
 /**
@@ -77,12 +81,15 @@ export declare function generatePropsDestructuring(attrs: ParsedAttrInfo[], fact
  * For bindable attrs, we create getters AND setters to maintain two-way binding.
  * For non-bindable attrs, we only create getters.
  *
+ * Getters/setters reference internal variable names (___key) that were
+ * destructured from $props().
+ *
  * @example
  * generateFactoryCallFromAttrs('Counter', [
- *   { key: 'label', defaultValue: "'Counter'", bindable: false, hasDefault: true },
+ *   { key: 'class', defaultValue: "''", bindable: false, hasDefault: true },
  *   { key: 'count', defaultValue: '0', bindable: true, hasDefault: true }
  * ])
- * // Returns: "Counter({ get label() { return label }, get count() { return count }, set count(v) { count = v } })"
+ * // Returns: "Counter({ get class() { return ___class }, get count() { return ___count }, set count(v) { ___count = v } })"
  */
 export declare function generateFactoryCallFromAttrs(factoryName: string, attrs: ParsedAttrInfo[]): string;
 /**

package/dist/vite-dts.js

@@ -200,6 +200,79 @@ function findMatchingBracket(source, openIndex, openChar = "(", closeChar = ")")
   return -1;
 }
 
+// src/transform/reserved-keywords.ts
+var RESERVED_KEYWORDS = new Set([
+  "break",
+  "case",
+  "catch",
+  "continue",
+  "debugger",
+  "default",
+  "delete",
+  "do",
+  "else",
+  "finally",
+  "for",
+  "function",
+  "if",
+  "in",
+  "instanceof",
+  "new",
+  "return",
+  "switch",
+  "this",
+  "throw",
+  "try",
+  "typeof",
+  "var",
+  "void",
+  "while",
+  "with",
+  "class",
+  "const",
+  "enum",
+  "export",
+  "extends",
+  "import",
+  "super",
+  "implements",
+  "interface",
+  "let",
+  "package",
+  "private",
+  "protected",
+  "public",
+  "static",
+  "yield",
+  "await",
+  "async",
+  "true",
+  "false",
+  "null",
+  "undefined",
+  "arguments",
+  "eval"
+]);
+function getInternalVarName(propName, forcePrefix = true) {
+  return `___${propName}`;
+}
+function generatePropDestructure(propName, defaultValue) {
+  const internalName = getInternalVarName(propName);
+  return `${propName}: ${internalName} = ${defaultValue}`;
+}
+function generatePropDestructureNoDefault(propName) {
+  const internalName = getInternalVarName(propName);
+  return `${propName}: ${internalName}`;
+}
+function generateGetter(propName) {
+  const internalName = getInternalVarName(propName);
+  return `get ${propName}() { return ${internalName} }`;
+}
+function generateSetter(propName) {
+  const internalName = getInternalVarName(propName);
+  return `set ${propName}(v) { ${internalName} = v }`;
+}
+
 // src/transform/schema.ts
 function parseOriginSchemaFromSource(source, exportName) {
   const sourceResult = parseSourceOrigin(source, exportName);
@@ -538,14 +611,14 @@ function generatePropsDestructuring(attrs, factoryName) {
   for (const attr of attrs) {
     if (attr.bindable) {
       if (attr.hasDefault) {
-        parts.push(`${attr.key} = $bindable(${attr.defaultValue})`);
+        parts.push(generatePropDestructure(attr.key, `$bindable(${attr.defaultValue})`));
       } else {
-        parts.push(`${attr.key} = $bindable()`);
+        parts.push(generatePropDestructure(attr.key, "$bindable()"));
       }
     } else if (attr.hasDefault) {
-      parts.push(`${attr.key} = ${attr.defaultValue}`);
+      parts.push(generatePropDestructure(attr.key, attr.defaultValue));
     } else {
-      parts.push(attr.key);
+      parts.push(generatePropDestructureNoDefault(attr.key));
     }
   }
   return `let { ${parts.join(", ")} }: $attrs.Of<typeof ${factoryName}> = $props()`;
@@ -553,9 +626,9 @@ function generatePropsDestructuring(attrs, factoryName) {
 function generateFactoryCallFromAttrs(factoryName, attrs) {
   const parts = [];
   for (const attr of attrs) {
-    parts.push(`get ${attr.key}() { return ${attr.key} }`);
+    parts.push(generateGetter(attr.key));
     if (attr.bindable) {
-      parts.push(`set ${attr.key}(v) { ${attr.key} = v }`);
+      parts.push(generateSetter(attr.key));
     }
   }
   return `${factoryName}({ ${parts.join(", ")} })`;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-origin",
-	"version": "1.0.0-next.22",
+	"version": "1.0.0-next.24",
 	"description": "Compiler-assisted state and prop ergonomics for Svelte 5",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",