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

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.23",
+	"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",