svelte-origin 1.0.0-next.23 → 1.0.0-next.25

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);
@@ -426,6 +499,7 @@ function parseAttrsContent(content) {
       continue;
     const key = trimmed.slice(0, colonIndex).trim();
     let value = trimmed.slice(colonIndex + 1).trim();
+    value = stripTrailingComments(value);
     const asIndex = findTopLevelAs(value);
     if (asIndex !== -1) {
       value = value.slice(0, asIndex).trim();
@@ -533,19 +607,69 @@ function stripComments(str) {
   }
   return result;
 }
+function stripTrailingComments(str) {
+  let result = str.trim();
+  let i = 0;
+  while (i < result.length) {
+    const char = result[i];
+    if (char === '"' || char === "'" || char === "`") {
+      const quote = char;
+      i++;
+      while (i < result.length && result[i] !== quote) {
+        if (result[i] === "\\")
+          i++;
+        i++;
+      }
+      i++;
+      continue;
+    }
+    if (char === "{" || char === "(" || char === "[") {
+      let depth = 1;
+      i++;
+      while (i < result.length && depth > 0) {
+        const c = result[i];
+        if (c === "{" || c === "(" || c === "[")
+          depth++;
+        else if (c === "}" || c === ")" || c === "]")
+          depth--;
+        else if (c === '"' || c === "'" || c === "`") {
+          const quote = c;
+          i++;
+          while (i < result.length && result[i] !== quote) {
+            if (result[i] === "\\")
+              i++;
+            i++;
+          }
+        }
+        i++;
+      }
+      continue;
+    }
+    if (char === "/" && result[i + 1] === "*") {
+      result = result.slice(0, i).trim();
+      break;
+    }
+    if (char === "/" && result[i + 1] === "/") {
+      result = result.slice(0, i).trim();
+      break;
+    }
+    i++;
+  }
+  return result;
+}
 function generatePropsDestructuring(attrs, factoryName) {
   const parts = [];
   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 +677,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.23",
+	"version": "1.0.0-next.25",
 	"description": "Compiler-assisted state and prop ergonomics for Svelte 5",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",