svelte-origin 1.0.0-next.15 → 1.0.0-next.16

package/dist/cli.js

@@ -1919,7 +1919,7 @@ function parseObjectMembers(source) {
 }
 
 // src/transform/origin-transform.ts
-function transformOriginCalls(s, source, neededImports) {
+function transformOriginCalls(s, source, neededImports, svelteImports) {
   const regex = /\$origin\s*\(/g;
   let match;
   let changed = false;
@@ -1935,14 +1935,14 @@ function transformOriginCalls(s, source, neededImports) {
       continue;
     }
     const definitionContent = source.slice(openParenIndex + 1, closeParenIndex);
-    const transformed = transformOriginDefinition(definitionContent);
+    const transformed = transformOriginDefinition(definitionContent, svelteImports);
     s.overwrite(startIndex, closeParenIndex + 1, `__createOrigin(${transformed})`);
     neededImports.add("__createOrigin");
     changed = true;
   }
   return changed;
 }
-function transformOriginDefinition(content) {
+function transformOriginDefinition(content, svelteImports) {
   let parents = [];
   let bodyContent = content.trim();
   let initCallback = null;
@@ -2007,7 +2007,7 @@ function transformOriginDefinition(content) {
     }
   }
   const attrDetails = parseAttrsSource(attrsContent);
-  const { body: createFnBody, attachments } = transformOriginBody(contentWithoutAttrs.trim(), parents, attrDetails, attrPropertyName);
+  const { body: createFnBody, attachments } = transformOriginBody(contentWithoutAttrs.trim(), parents, attrDetails, attrPropertyName, svelteImports);
   const parentsCode = parents.length > 0 ? `[${parents.join(", ")}]` : "undefined";
   let configCode = `{
 	__attrSchema: ${attrSchemaCode},
@@ -2027,19 +2027,35 @@ ${createFnBody}
 }`;
   return configCode;
 }
-function transformOriginBody(content, parents = [], attrDetails = [], propName = "props") {
+function transformOriginBody(content, parents = [], attrDetails = [], propName = "props", svelteImports) {
   let body = content.trim();
   const hasParents = parents.length > 0;
+  const attrStateDeclarations = [];
+  const attrSyncEffects = [];
   const attrGettersSetters = [];
-  for (const attr of attrDetails) {
-    if (attr.hasDefault) {
-      attrGettersSetters.push(`get ${attr.key}() { return __inputAttrs.${attr.key} ?? ${attr.defaultValue} }`);
-    } else {
-      attrGettersSetters.push(`get ${attr.key}() { return __inputAttrs.${attr.key} }`);
-    }
-    attrGettersSetters.push(`set ${attr.key}(v) { __inputAttrs.${attr.key} = v }`);
+  if (attrDetails.length > 0 && svelteImports) {
+    svelteImports.add("untrack");
   }
-  const propsObjectCode = attrGettersSetters.length > 0 ? `		const __props = {
+  for (const attr of attrDetails) {
+    const defaultExpr = attr.hasDefault ? ` ?? ${attr.defaultValue}` : "";
+    attrStateDeclarations.push(`let __attr_${attr.key} = $state(__inputAttrs.${attr.key}${defaultExpr})`);
+    attrSyncEffects.push(`$effect(() => {
+			const __parentVal = __inputAttrs.${attr.key}
+			const __currentVal = untrack(() => __attr_${attr.key})
+			if (__parentVal !== __currentVal) {
+				__attr_${attr.key} = __parentVal${defaultExpr}
+			}
+		})`);
+    attrGettersSetters.push(`get ${attr.key}() { return __attr_${attr.key} }`);
+    attrGettersSetters.push(`set ${attr.key}(v) { __attr_${attr.key} = v; __inputAttrs.${attr.key} = v }`);
+  }
+  const attrStateSection = attrStateDeclarations.length > 0 ? attrStateDeclarations.join(`
+		`) + `
+		` : "";
+  const attrEffectSection = attrSyncEffects.length > 0 ? attrSyncEffects.join(`
+		`) + `
+		` : "";
+  const propsObjectCode = attrGettersSetters.length > 0 ? `${attrStateSection}${attrEffectSection}const __props = {
 			${attrGettersSetters.join(`,
 			`)}
 		}` : `		const __props = __inputAttrs`;
@@ -2728,9 +2744,10 @@ function transformScript(source, options = {}) {
   const { isComponent = false } = options;
   let changed = false;
   const neededImports = new Set;
+  const svelteImports = new Set;
   let propsTypeDeclaration = null;
   if (!isComponent) {
-    changed = transformOriginCalls(s, source, neededImports) || changed;
+    changed = transformOriginCalls(s, source, neededImports, svelteImports) || changed;
     changed = transformStandaloneAttrsCalls(s, source, neededImports) || changed;
   }
   if (isComponent) {
@@ -2769,10 +2786,17 @@ function transformScript(source, options = {}) {
 `);
       }
     }
-  } else if (neededImports.size > 0) {
-    const importStatement = generateRuntimeImport([...neededImports]);
-    s.prepend(importStatement + `
+  } else if (neededImports.size > 0 || svelteImports.size > 0) {
+    if (neededImports.size > 0) {
+      const importStatement = generateRuntimeImport([...neededImports]);
+      s.prepend(importStatement + `
+`);
+    }
+    if (svelteImports.size > 0) {
+      const svelteImportStatement = `import { ${[...svelteImports].join(", ")} } from 'svelte'`;
+      s.prepend(svelteImportStatement + `
 `);
+    }
   }
   if (!changed) {
     return { code: source, changed: false };
@@ -2791,9 +2815,10 @@ async function transformScriptAsync(source, options) {
   const { isComponent = false, schemaResolver } = options;
   let changed = false;
   const neededImports = new Set;
+  const svelteImports = new Set;
   let propsTypeDeclaration = null;
   if (!isComponent) {
-    changed = transformOriginCalls(s, source, neededImports) || changed;
+    changed = transformOriginCalls(s, source, neededImports, svelteImports) || changed;
     changed = transformStandaloneAttrsCalls(s, source, neededImports) || changed;
   }
   if (isComponent) {
@@ -2832,10 +2857,17 @@ async function transformScriptAsync(source, options) {
 `);
       }
     }
-  } else if (neededImports.size > 0) {
-    const importStatement = generateRuntimeImport([...neededImports]);
-    s.prepend(importStatement + `
+  } else if (neededImports.size > 0 || svelteImports.size > 0) {
+    if (neededImports.size > 0) {
+      const importStatement = generateRuntimeImport([...neededImports]);
+      s.prepend(importStatement + `
 `);
+    }
+    if (svelteImports.size > 0) {
+      const svelteImportStatement = `import { ${[...svelteImports].join(", ")} } from 'svelte'`;
+      s.prepend(svelteImportStatement + `
+`);
+    }
   }
   if (!changed) {
     return { code: source, changed: false };
@@ -2854,9 +2886,10 @@ async function transformScriptContent(source, options) {
   const { isComponent = false, schemaResolver } = options;
   let changed = false;
   const neededImports = new Set;
+  const svelteImports = new Set;
   let propsTypeDeclaration = null;
   if (!isComponent) {
-    changed = transformOriginCalls(s, source, neededImports) || changed;
+    changed = transformOriginCalls(s, source, neededImports, svelteImports) || changed;
   }
   if (isComponent) {
     const result = await transformAttrsOriginCalls(s, source, neededImports, schemaResolver);
@@ -2869,11 +2902,22 @@ async function transformScriptContent(source, options) {
   if (neededImports.size > 0) {
     const importStatement = generateRuntimeImport([...neededImports]);
     s.prepend(importStatement + `
+`);
+  }
+  if (svelteImports.size > 0) {
+    const svelteImportStatement = `import { ${[...svelteImports].join(", ")} } from 'svelte'`;
+    s.prepend(svelteImportStatement + `
 `);
   }
   if (propsTypeDeclaration) {
     const afterImports = findPropsInjectionPosition(source);
-    const offset = neededImports.size > 0 ? generateRuntimeImport([...neededImports]).length + 1 : 0;
+    let offset = 0;
+    if (neededImports.size > 0) {
+      offset += generateRuntimeImport([...neededImports]).length + 1;
+    }
+    if (svelteImports.size > 0) {
+      offset += `import { ${[...svelteImports].join(", ")} } from 'svelte'`.length + 1;
+    }
     s.appendLeft(afterImports + offset, propsTypeDeclaration + `
 `);
   }

package/dist/index.js

@@ -5969,7 +5969,7 @@ function parseObjectMembers(source2) {
 }
 
 // src/transform/origin-transform.ts
-function transformOriginCalls(s, source2, neededImports) {
+function transformOriginCalls(s, source2, neededImports, svelteImports) {
   const regex = /\$origin\s*\(/g;
   let match;
   let changed = false;
@@ -5985,14 +5985,14 @@ function transformOriginCalls(s, source2, neededImports) {
       continue;
     }
     const definitionContent = source2.slice(openParenIndex + 1, closeParenIndex);
-    const transformed = transformOriginDefinition(definitionContent);
+    const transformed = transformOriginDefinition(definitionContent, svelteImports);
     s.overwrite(startIndex, closeParenIndex + 1, `__createOrigin(${transformed})`);
     neededImports.add("__createOrigin");
     changed = true;
   }
   return changed;
 }
-function transformOriginDefinition(content) {
+function transformOriginDefinition(content, svelteImports) {
   let parents = [];
   let bodyContent = content.trim();
   let initCallback = null;
@@ -6057,7 +6057,7 @@ function transformOriginDefinition(content) {
     }
   }
   const attrDetails = parseAttrsSource(attrsContent);
-  const { body: createFnBody, attachments } = transformOriginBody(contentWithoutAttrs.trim(), parents, attrDetails, attrPropertyName);
+  const { body: createFnBody, attachments } = transformOriginBody(contentWithoutAttrs.trim(), parents, attrDetails, attrPropertyName, svelteImports);
   const parentsCode = parents.length > 0 ? `[${parents.join(", ")}]` : "undefined";
   let configCode = `{
 	__attrSchema: ${attrSchemaCode},
@@ -6077,19 +6077,35 @@ ${createFnBody}
 }`;
   return configCode;
 }
-function transformOriginBody(content, parents = [], attrDetails = [], propName = "props") {
+function transformOriginBody(content, parents = [], attrDetails = [], propName = "props", svelteImports) {
   let body = content.trim();
   const hasParents = parents.length > 0;
+  const attrStateDeclarations = [];
+  const attrSyncEffects = [];
   const attrGettersSetters = [];
-  for (const attr2 of attrDetails) {
-    if (attr2.hasDefault) {
-      attrGettersSetters.push(`get ${attr2.key}() { return __inputAttrs.${attr2.key} ?? ${attr2.defaultValue} }`);
-    } else {
-      attrGettersSetters.push(`get ${attr2.key}() { return __inputAttrs.${attr2.key} }`);
-    }
-    attrGettersSetters.push(`set ${attr2.key}(v) { __inputAttrs.${attr2.key} = v }`);
+  if (attrDetails.length > 0 && svelteImports) {
+    svelteImports.add("untrack");
   }
-  const propsObjectCode = attrGettersSetters.length > 0 ? `		const __props = {
+  for (const attr2 of attrDetails) {
+    const defaultExpr = attr2.hasDefault ? ` ?? ${attr2.defaultValue}` : "";
+    attrStateDeclarations.push(`let __attr_${attr2.key} = $state(__inputAttrs.${attr2.key}${defaultExpr})`);
+    attrSyncEffects.push(`$effect(() => {
+			const __parentVal = __inputAttrs.${attr2.key}
+			const __currentVal = untrack(() => __attr_${attr2.key})
+			if (__parentVal !== __currentVal) {
+				__attr_${attr2.key} = __parentVal${defaultExpr}
+			}
+		})`);
+    attrGettersSetters.push(`get ${attr2.key}() { return __attr_${attr2.key} }`);
+    attrGettersSetters.push(`set ${attr2.key}(v) { __attr_${attr2.key} = v; __inputAttrs.${attr2.key} = v }`);
+  }
+  const attrStateSection = attrStateDeclarations.length > 0 ? attrStateDeclarations.join(`
+		`) + `
+		` : "";
+  const attrEffectSection = attrSyncEffects.length > 0 ? attrSyncEffects.join(`
+		`) + `
+		` : "";
+  const propsObjectCode = attrGettersSetters.length > 0 ? `${attrStateSection}${attrEffectSection}const __props = {
 			${attrGettersSetters.join(`,
 			`)}
 		}` : `		const __props = __inputAttrs`;
@@ -6509,9 +6525,10 @@ function transformScript(source2, options = {}) {
   const { isComponent = false } = options;
   let changed = false;
   const neededImports = new Set;
+  const svelteImports = new Set;
   let propsTypeDeclaration = null;
   if (!isComponent) {
-    changed = transformOriginCalls(s, source2, neededImports) || changed;
+    changed = transformOriginCalls(s, source2, neededImports, svelteImports) || changed;
     changed = transformStandaloneAttrsCalls(s, source2, neededImports) || changed;
   }
   if (isComponent) {
@@ -6550,10 +6567,17 @@ function transformScript(source2, options = {}) {
 `);
       }
     }
-  } else if (neededImports.size > 0) {
-    const importStatement = generateRuntimeImport([...neededImports]);
-    s.prepend(importStatement + `
+  } else if (neededImports.size > 0 || svelteImports.size > 0) {
+    if (neededImports.size > 0) {
+      const importStatement = generateRuntimeImport([...neededImports]);
+      s.prepend(importStatement + `
+`);
+    }
+    if (svelteImports.size > 0) {
+      const svelteImportStatement = `import { ${[...svelteImports].join(", ")} } from 'svelte'`;
+      s.prepend(svelteImportStatement + `
 `);
+    }
   }
   if (!changed) {
     return { code: source2, changed: false };
@@ -6572,9 +6596,10 @@ async function transformScriptAsync(source2, options) {
   const { isComponent = false, schemaResolver } = options;
   let changed = false;
   const neededImports = new Set;
+  const svelteImports = new Set;
   let propsTypeDeclaration = null;
   if (!isComponent) {
-    changed = transformOriginCalls(s, source2, neededImports) || changed;
+    changed = transformOriginCalls(s, source2, neededImports, svelteImports) || changed;
     changed = transformStandaloneAttrsCalls(s, source2, neededImports) || changed;
   }
   if (isComponent) {
@@ -6613,10 +6638,17 @@ async function transformScriptAsync(source2, options) {
 `);
       }
     }
-  } else if (neededImports.size > 0) {
-    const importStatement = generateRuntimeImport([...neededImports]);
-    s.prepend(importStatement + `
+  } else if (neededImports.size > 0 || svelteImports.size > 0) {
+    if (neededImports.size > 0) {
+      const importStatement = generateRuntimeImport([...neededImports]);
+      s.prepend(importStatement + `
 `);
+    }
+    if (svelteImports.size > 0) {
+      const svelteImportStatement = `import { ${[...svelteImports].join(", ")} } from 'svelte'`;
+      s.prepend(svelteImportStatement + `
+`);
+    }
   }
   if (!changed) {
     return { code: source2, changed: false };
@@ -6635,9 +6667,10 @@ async function transformScriptContent(source2, options) {
   const { isComponent = false, schemaResolver } = options;
   let changed = false;
   const neededImports = new Set;
+  const svelteImports = new Set;
   let propsTypeDeclaration = null;
   if (!isComponent) {
-    changed = transformOriginCalls(s, source2, neededImports) || changed;
+    changed = transformOriginCalls(s, source2, neededImports, svelteImports) || changed;
   }
   if (isComponent) {
     const result = await transformAttrsOriginCalls(s, source2, neededImports, schemaResolver);
@@ -6650,11 +6683,22 @@ async function transformScriptContent(source2, options) {
   if (neededImports.size > 0) {
     const importStatement = generateRuntimeImport([...neededImports]);
     s.prepend(importStatement + `
+`);
+  }
+  if (svelteImports.size > 0) {
+    const svelteImportStatement = `import { ${[...svelteImports].join(", ")} } from 'svelte'`;
+    s.prepend(svelteImportStatement + `
 `);
   }
   if (propsTypeDeclaration) {
     const afterImports = findPropsInjectionPosition(source2);
-    const offset = neededImports.size > 0 ? generateRuntimeImport([...neededImports]).length + 1 : 0;
+    let offset = 0;
+    if (neededImports.size > 0) {
+      offset += generateRuntimeImport([...neededImports]).length + 1;
+    }
+    if (svelteImports.size > 0) {
+      offset += `import { ${[...svelteImports].join(", ")} } from 'svelte'`.length + 1;
+    }
     s.appendLeft(afterImports + offset, propsTypeDeclaration + `
 `);
   }

package/dist/plugin.js

@@ -1913,7 +1913,7 @@ function parseObjectMembers(source) {
 }
 
 // src/transform/origin-transform.ts
-function transformOriginCalls(s, source, neededImports) {
+function transformOriginCalls(s, source, neededImports, svelteImports) {
   const regex = /\$origin\s*\(/g;
   let match;
   let changed = false;
@@ -1929,14 +1929,14 @@ function transformOriginCalls(s, source, neededImports) {
       continue;
     }
     const definitionContent = source.slice(openParenIndex + 1, closeParenIndex);
-    const transformed = transformOriginDefinition(definitionContent);
+    const transformed = transformOriginDefinition(definitionContent, svelteImports);
     s.overwrite(startIndex, closeParenIndex + 1, `__createOrigin(${transformed})`);
     neededImports.add("__createOrigin");
     changed = true;
   }
   return changed;
 }
-function transformOriginDefinition(content) {
+function transformOriginDefinition(content, svelteImports) {
   let parents = [];
   let bodyContent = content.trim();
   let initCallback = null;
@@ -2001,7 +2001,7 @@ function transformOriginDefinition(content) {
     }
   }
   const attrDetails = parseAttrsSource(attrsContent);
-  const { body: createFnBody, attachments } = transformOriginBody(contentWithoutAttrs.trim(), parents, attrDetails, attrPropertyName);
+  const { body: createFnBody, attachments } = transformOriginBody(contentWithoutAttrs.trim(), parents, attrDetails, attrPropertyName, svelteImports);
   const parentsCode = parents.length > 0 ? `[${parents.join(", ")}]` : "undefined";
   let configCode = `{
 	__attrSchema: ${attrSchemaCode},
@@ -2021,19 +2021,35 @@ ${createFnBody}
 }`;
   return configCode;
 }
-function transformOriginBody(content, parents = [], attrDetails = [], propName = "props") {
+function transformOriginBody(content, parents = [], attrDetails = [], propName = "props", svelteImports) {
   let body = content.trim();
   const hasParents = parents.length > 0;
+  const attrStateDeclarations = [];
+  const attrSyncEffects = [];
   const attrGettersSetters = [];
-  for (const attr of attrDetails) {
-    if (attr.hasDefault) {
-      attrGettersSetters.push(`get ${attr.key}() { return __inputAttrs.${attr.key} ?? ${attr.defaultValue} }`);
-    } else {
-      attrGettersSetters.push(`get ${attr.key}() { return __inputAttrs.${attr.key} }`);
-    }
-    attrGettersSetters.push(`set ${attr.key}(v) { __inputAttrs.${attr.key} = v }`);
+  if (attrDetails.length > 0 && svelteImports) {
+    svelteImports.add("untrack");
   }
-  const propsObjectCode = attrGettersSetters.length > 0 ? `		const __props = {
+  for (const attr of attrDetails) {
+    const defaultExpr = attr.hasDefault ? ` ?? ${attr.defaultValue}` : "";
+    attrStateDeclarations.push(`let __attr_${attr.key} = $state(__inputAttrs.${attr.key}${defaultExpr})`);
+    attrSyncEffects.push(`$effect(() => {
+			const __parentVal = __inputAttrs.${attr.key}
+			const __currentVal = untrack(() => __attr_${attr.key})
+			if (__parentVal !== __currentVal) {
+				__attr_${attr.key} = __parentVal${defaultExpr}
+			}
+		})`);
+    attrGettersSetters.push(`get ${attr.key}() { return __attr_${attr.key} }`);
+    attrGettersSetters.push(`set ${attr.key}(v) { __attr_${attr.key} = v; __inputAttrs.${attr.key} = v }`);
+  }
+  const attrStateSection = attrStateDeclarations.length > 0 ? attrStateDeclarations.join(`
+		`) + `
+		` : "";
+  const attrEffectSection = attrSyncEffects.length > 0 ? attrSyncEffects.join(`
+		`) + `
+		` : "";
+  const propsObjectCode = attrGettersSetters.length > 0 ? `${attrStateSection}${attrEffectSection}const __props = {
 			${attrGettersSetters.join(`,
 			`)}
 		}` : `		const __props = __inputAttrs`;
@@ -2722,9 +2738,10 @@ function transformScript(source, options = {}) {
   const { isComponent = false } = options;
   let changed = false;
   const neededImports = new Set;
+  const svelteImports = new Set;
   let propsTypeDeclaration = null;
   if (!isComponent) {
-    changed = transformOriginCalls(s, source, neededImports) || changed;
+    changed = transformOriginCalls(s, source, neededImports, svelteImports) || changed;
     changed = transformStandaloneAttrsCalls(s, source, neededImports) || changed;
   }
   if (isComponent) {
@@ -2763,10 +2780,17 @@ function transformScript(source, options = {}) {
 `);
       }
     }
-  } else if (neededImports.size > 0) {
-    const importStatement = generateRuntimeImport([...neededImports]);
-    s.prepend(importStatement + `
+  } else if (neededImports.size > 0 || svelteImports.size > 0) {
+    if (neededImports.size > 0) {
+      const importStatement = generateRuntimeImport([...neededImports]);
+      s.prepend(importStatement + `
+`);
+    }
+    if (svelteImports.size > 0) {
+      const svelteImportStatement = `import { ${[...svelteImports].join(", ")} } from 'svelte'`;
+      s.prepend(svelteImportStatement + `
 `);
+    }
   }
   if (!changed) {
     return { code: source, changed: false };
@@ -2785,9 +2809,10 @@ async function transformScriptAsync(source, options) {
   const { isComponent = false, schemaResolver } = options;
   let changed = false;
   const neededImports = new Set;
+  const svelteImports = new Set;
   let propsTypeDeclaration = null;
   if (!isComponent) {
-    changed = transformOriginCalls(s, source, neededImports) || changed;
+    changed = transformOriginCalls(s, source, neededImports, svelteImports) || changed;
     changed = transformStandaloneAttrsCalls(s, source, neededImports) || changed;
   }
   if (isComponent) {
@@ -2826,10 +2851,17 @@ async function transformScriptAsync(source, options) {
 `);
       }
     }
-  } else if (neededImports.size > 0) {
-    const importStatement = generateRuntimeImport([...neededImports]);
-    s.prepend(importStatement + `
+  } else if (neededImports.size > 0 || svelteImports.size > 0) {
+    if (neededImports.size > 0) {
+      const importStatement = generateRuntimeImport([...neededImports]);
+      s.prepend(importStatement + `
 `);
+    }
+    if (svelteImports.size > 0) {
+      const svelteImportStatement = `import { ${[...svelteImports].join(", ")} } from 'svelte'`;
+      s.prepend(svelteImportStatement + `
+`);
+    }
   }
   if (!changed) {
     return { code: source, changed: false };
@@ -2848,9 +2880,10 @@ async function transformScriptContent(source, options) {
   const { isComponent = false, schemaResolver } = options;
   let changed = false;
   const neededImports = new Set;
+  const svelteImports = new Set;
   let propsTypeDeclaration = null;
   if (!isComponent) {
-    changed = transformOriginCalls(s, source, neededImports) || changed;
+    changed = transformOriginCalls(s, source, neededImports, svelteImports) || changed;
   }
   if (isComponent) {
     const result = await transformAttrsOriginCalls(s, source, neededImports, schemaResolver);
@@ -2863,11 +2896,22 @@ async function transformScriptContent(source, options) {
   if (neededImports.size > 0) {
     const importStatement = generateRuntimeImport([...neededImports]);
     s.prepend(importStatement + `
+`);
+  }
+  if (svelteImports.size > 0) {
+    const svelteImportStatement = `import { ${[...svelteImports].join(", ")} } from 'svelte'`;
+    s.prepend(svelteImportStatement + `
 `);
   }
   if (propsTypeDeclaration) {
     const afterImports = findPropsInjectionPosition(source);
-    const offset = neededImports.size > 0 ? generateRuntimeImport([...neededImports]).length + 1 : 0;
+    let offset = 0;
+    if (neededImports.size > 0) {
+      offset += generateRuntimeImport([...neededImports]).length + 1;
+    }
+    if (svelteImports.size > 0) {
+      offset += `import { ${[...svelteImports].join(", ")} } from 'svelte'`.length + 1;
+    }
     s.appendLeft(afterImports + offset, propsTypeDeclaration + `
 `);
   }

package/dist/post-process.js

@@ -1917,7 +1917,7 @@ function parseObjectMembers(source) {
 }
 
 // src/transform/origin-transform.ts
-function transformOriginCalls(s, source, neededImports) {
+function transformOriginCalls(s, source, neededImports, svelteImports) {
   const regex = /\$origin\s*\(/g;
   let match;
   let changed = false;
@@ -1933,14 +1933,14 @@ function transformOriginCalls(s, source, neededImports) {
       continue;
     }
     const definitionContent = source.slice(openParenIndex + 1, closeParenIndex);
-    const transformed = transformOriginDefinition(definitionContent);
+    const transformed = transformOriginDefinition(definitionContent, svelteImports);
     s.overwrite(startIndex, closeParenIndex + 1, `__createOrigin(${transformed})`);
     neededImports.add("__createOrigin");
     changed = true;
   }
   return changed;
 }
-function transformOriginDefinition(content) {
+function transformOriginDefinition(content, svelteImports) {
   let parents = [];
   let bodyContent = content.trim();
   let initCallback = null;
@@ -2005,7 +2005,7 @@ function transformOriginDefinition(content) {
     }
   }
   const attrDetails = parseAttrsSource(attrsContent);
-  const { body: createFnBody, attachments } = transformOriginBody(contentWithoutAttrs.trim(), parents, attrDetails, attrPropertyName);
+  const { body: createFnBody, attachments } = transformOriginBody(contentWithoutAttrs.trim(), parents, attrDetails, attrPropertyName, svelteImports);
   const parentsCode = parents.length > 0 ? `[${parents.join(", ")}]` : "undefined";
   let configCode = `{
 	__attrSchema: ${attrSchemaCode},
@@ -2025,19 +2025,35 @@ ${createFnBody}
 }`;
   return configCode;
 }
-function transformOriginBody(content, parents = [], attrDetails = [], propName = "props") {
+function transformOriginBody(content, parents = [], attrDetails = [], propName = "props", svelteImports) {
   let body = content.trim();
   const hasParents = parents.length > 0;
+  const attrStateDeclarations = [];
+  const attrSyncEffects = [];
   const attrGettersSetters = [];
-  for (const attr of attrDetails) {
-    if (attr.hasDefault) {
-      attrGettersSetters.push(`get ${attr.key}() { return __inputAttrs.${attr.key} ?? ${attr.defaultValue} }`);
-    } else {
-      attrGettersSetters.push(`get ${attr.key}() { return __inputAttrs.${attr.key} }`);
-    }
-    attrGettersSetters.push(`set ${attr.key}(v) { __inputAttrs.${attr.key} = v }`);
+  if (attrDetails.length > 0 && svelteImports) {
+    svelteImports.add("untrack");
   }
-  const propsObjectCode = attrGettersSetters.length > 0 ? `		const __props = {
+  for (const attr of attrDetails) {
+    const defaultExpr = attr.hasDefault ? ` ?? ${attr.defaultValue}` : "";
+    attrStateDeclarations.push(`let __attr_${attr.key} = $state(__inputAttrs.${attr.key}${defaultExpr})`);
+    attrSyncEffects.push(`$effect(() => {
+			const __parentVal = __inputAttrs.${attr.key}
+			const __currentVal = untrack(() => __attr_${attr.key})
+			if (__parentVal !== __currentVal) {
+				__attr_${attr.key} = __parentVal${defaultExpr}
+			}
+		})`);
+    attrGettersSetters.push(`get ${attr.key}() { return __attr_${attr.key} }`);
+    attrGettersSetters.push(`set ${attr.key}(v) { __attr_${attr.key} = v; __inputAttrs.${attr.key} = v }`);
+  }
+  const attrStateSection = attrStateDeclarations.length > 0 ? attrStateDeclarations.join(`
+		`) + `
+		` : "";
+  const attrEffectSection = attrSyncEffects.length > 0 ? attrSyncEffects.join(`
+		`) + `
+		` : "";
+  const propsObjectCode = attrGettersSetters.length > 0 ? `${attrStateSection}${attrEffectSection}const __props = {
 			${attrGettersSetters.join(`,
 			`)}
 		}` : `		const __props = __inputAttrs`;
@@ -2726,9 +2742,10 @@ function transformScript(source, options = {}) {
   const { isComponent = false } = options;
   let changed = false;
   const neededImports = new Set;
+  const svelteImports = new Set;
   let propsTypeDeclaration = null;
   if (!isComponent) {
-    changed = transformOriginCalls(s, source, neededImports) || changed;
+    changed = transformOriginCalls(s, source, neededImports, svelteImports) || changed;
     changed = transformStandaloneAttrsCalls(s, source, neededImports) || changed;
   }
   if (isComponent) {
@@ -2767,10 +2784,17 @@ function transformScript(source, options = {}) {
 `);
       }
     }
-  } else if (neededImports.size > 0) {
-    const importStatement = generateRuntimeImport([...neededImports]);
-    s.prepend(importStatement + `
+  } else if (neededImports.size > 0 || svelteImports.size > 0) {
+    if (neededImports.size > 0) {
+      const importStatement = generateRuntimeImport([...neededImports]);
+      s.prepend(importStatement + `
+`);
+    }
+    if (svelteImports.size > 0) {
+      const svelteImportStatement = `import { ${[...svelteImports].join(", ")} } from 'svelte'`;
+      s.prepend(svelteImportStatement + `
 `);
+    }
   }
   if (!changed) {
     return { code: source, changed: false };
@@ -2789,9 +2813,10 @@ async function transformScriptAsync(source, options) {
   const { isComponent = false, schemaResolver } = options;
   let changed = false;
   const neededImports = new Set;
+  const svelteImports = new Set;
   let propsTypeDeclaration = null;
   if (!isComponent) {
-    changed = transformOriginCalls(s, source, neededImports) || changed;
+    changed = transformOriginCalls(s, source, neededImports, svelteImports) || changed;
     changed = transformStandaloneAttrsCalls(s, source, neededImports) || changed;
   }
   if (isComponent) {
@@ -2830,10 +2855,17 @@ async function transformScriptAsync(source, options) {
 `);
       }
     }
-  } else if (neededImports.size > 0) {
-    const importStatement = generateRuntimeImport([...neededImports]);
-    s.prepend(importStatement + `
+  } else if (neededImports.size > 0 || svelteImports.size > 0) {
+    if (neededImports.size > 0) {
+      const importStatement = generateRuntimeImport([...neededImports]);
+      s.prepend(importStatement + `
 `);
+    }
+    if (svelteImports.size > 0) {
+      const svelteImportStatement = `import { ${[...svelteImports].join(", ")} } from 'svelte'`;
+      s.prepend(svelteImportStatement + `
+`);
+    }
   }
   if (!changed) {
     return { code: source, changed: false };
@@ -2852,9 +2884,10 @@ async function transformScriptContent(source, options) {
   const { isComponent = false, schemaResolver } = options;
   let changed = false;
   const neededImports = new Set;
+  const svelteImports = new Set;
   let propsTypeDeclaration = null;
   if (!isComponent) {
-    changed = transformOriginCalls(s, source, neededImports) || changed;
+    changed = transformOriginCalls(s, source, neededImports, svelteImports) || changed;
   }
   if (isComponent) {
     const result = await transformAttrsOriginCalls(s, source, neededImports, schemaResolver);
@@ -2867,11 +2900,22 @@ async function transformScriptContent(source, options) {
   if (neededImports.size > 0) {
     const importStatement = generateRuntimeImport([...neededImports]);
     s.prepend(importStatement + `
+`);
+  }
+  if (svelteImports.size > 0) {
+    const svelteImportStatement = `import { ${[...svelteImports].join(", ")} } from 'svelte'`;
+    s.prepend(svelteImportStatement + `
 `);
   }
   if (propsTypeDeclaration) {
     const afterImports = findPropsInjectionPosition(source);
-    const offset = neededImports.size > 0 ? generateRuntimeImport([...neededImports]).length + 1 : 0;
+    let offset = 0;
+    if (neededImports.size > 0) {
+      offset += generateRuntimeImport([...neededImports]).length + 1;
+    }
+    if (svelteImports.size > 0) {
+      offset += `import { ${[...svelteImports].join(", ")} } from 'svelte'`.length + 1;
+    }
     s.appendLeft(afterImports + offset, propsTypeDeclaration + `
 `);
   }

package/dist/preprocess.js

@@ -1913,7 +1913,7 @@ function parseObjectMembers(source) {
 }
 
 // src/transform/origin-transform.ts
-function transformOriginCalls(s, source, neededImports) {
+function transformOriginCalls(s, source, neededImports, svelteImports) {
   const regex = /\$origin\s*\(/g;
   let match;
   let changed = false;
@@ -1929,14 +1929,14 @@ function transformOriginCalls(s, source, neededImports) {
       continue;
     }
     const definitionContent = source.slice(openParenIndex + 1, closeParenIndex);
-    const transformed = transformOriginDefinition(definitionContent);
+    const transformed = transformOriginDefinition(definitionContent, svelteImports);
     s.overwrite(startIndex, closeParenIndex + 1, `__createOrigin(${transformed})`);
     neededImports.add("__createOrigin");
     changed = true;
   }
   return changed;
 }
-function transformOriginDefinition(content) {
+function transformOriginDefinition(content, svelteImports) {
   let parents = [];
   let bodyContent = content.trim();
   let initCallback = null;
@@ -2001,7 +2001,7 @@ function transformOriginDefinition(content) {
     }
   }
   const attrDetails = parseAttrsSource(attrsContent);
-  const { body: createFnBody, attachments } = transformOriginBody(contentWithoutAttrs.trim(), parents, attrDetails, attrPropertyName);
+  const { body: createFnBody, attachments } = transformOriginBody(contentWithoutAttrs.trim(), parents, attrDetails, attrPropertyName, svelteImports);
   const parentsCode = parents.length > 0 ? `[${parents.join(", ")}]` : "undefined";
   let configCode = `{
 	__attrSchema: ${attrSchemaCode},
@@ -2021,19 +2021,35 @@ ${createFnBody}
 }`;
   return configCode;
 }
-function transformOriginBody(content, parents = [], attrDetails = [], propName = "props") {
+function transformOriginBody(content, parents = [], attrDetails = [], propName = "props", svelteImports) {
   let body = content.trim();
   const hasParents = parents.length > 0;
+  const attrStateDeclarations = [];
+  const attrSyncEffects = [];
   const attrGettersSetters = [];
-  for (const attr of attrDetails) {
-    if (attr.hasDefault) {
-      attrGettersSetters.push(`get ${attr.key}() { return __inputAttrs.${attr.key} ?? ${attr.defaultValue} }`);
-    } else {
-      attrGettersSetters.push(`get ${attr.key}() { return __inputAttrs.${attr.key} }`);
-    }
-    attrGettersSetters.push(`set ${attr.key}(v) { __inputAttrs.${attr.key} = v }`);
+  if (attrDetails.length > 0 && svelteImports) {
+    svelteImports.add("untrack");
   }
-  const propsObjectCode = attrGettersSetters.length > 0 ? `		const __props = {
+  for (const attr of attrDetails) {
+    const defaultExpr = attr.hasDefault ? ` ?? ${attr.defaultValue}` : "";
+    attrStateDeclarations.push(`let __attr_${attr.key} = $state(__inputAttrs.${attr.key}${defaultExpr})`);
+    attrSyncEffects.push(`$effect(() => {
+			const __parentVal = __inputAttrs.${attr.key}
+			const __currentVal = untrack(() => __attr_${attr.key})
+			if (__parentVal !== __currentVal) {
+				__attr_${attr.key} = __parentVal${defaultExpr}
+			}
+		})`);
+    attrGettersSetters.push(`get ${attr.key}() { return __attr_${attr.key} }`);
+    attrGettersSetters.push(`set ${attr.key}(v) { __attr_${attr.key} = v; __inputAttrs.${attr.key} = v }`);
+  }
+  const attrStateSection = attrStateDeclarations.length > 0 ? attrStateDeclarations.join(`
+		`) + `
+		` : "";
+  const attrEffectSection = attrSyncEffects.length > 0 ? attrSyncEffects.join(`
+		`) + `
+		` : "";
+  const propsObjectCode = attrGettersSetters.length > 0 ? `${attrStateSection}${attrEffectSection}const __props = {
 			${attrGettersSetters.join(`,
 			`)}
 		}` : `		const __props = __inputAttrs`;
@@ -2722,9 +2738,10 @@ function transformScript(source, options = {}) {
   const { isComponent = false } = options;
   let changed = false;
   const neededImports = new Set;
+  const svelteImports = new Set;
   let propsTypeDeclaration = null;
   if (!isComponent) {
-    changed = transformOriginCalls(s, source, neededImports) || changed;
+    changed = transformOriginCalls(s, source, neededImports, svelteImports) || changed;
     changed = transformStandaloneAttrsCalls(s, source, neededImports) || changed;
   }
   if (isComponent) {
@@ -2763,10 +2780,17 @@ function transformScript(source, options = {}) {
 `);
       }
     }
-  } else if (neededImports.size > 0) {
-    const importStatement = generateRuntimeImport([...neededImports]);
-    s.prepend(importStatement + `
+  } else if (neededImports.size > 0 || svelteImports.size > 0) {
+    if (neededImports.size > 0) {
+      const importStatement = generateRuntimeImport([...neededImports]);
+      s.prepend(importStatement + `
+`);
+    }
+    if (svelteImports.size > 0) {
+      const svelteImportStatement = `import { ${[...svelteImports].join(", ")} } from 'svelte'`;
+      s.prepend(svelteImportStatement + `
 `);
+    }
   }
   if (!changed) {
     return { code: source, changed: false };
@@ -2785,9 +2809,10 @@ async function transformScriptAsync(source, options) {
   const { isComponent = false, schemaResolver } = options;
   let changed = false;
   const neededImports = new Set;
+  const svelteImports = new Set;
   let propsTypeDeclaration = null;
   if (!isComponent) {
-    changed = transformOriginCalls(s, source, neededImports) || changed;
+    changed = transformOriginCalls(s, source, neededImports, svelteImports) || changed;
     changed = transformStandaloneAttrsCalls(s, source, neededImports) || changed;
   }
   if (isComponent) {
@@ -2826,10 +2851,17 @@ async function transformScriptAsync(source, options) {
 `);
       }
     }
-  } else if (neededImports.size > 0) {
-    const importStatement = generateRuntimeImport([...neededImports]);
-    s.prepend(importStatement + `
+  } else if (neededImports.size > 0 || svelteImports.size > 0) {
+    if (neededImports.size > 0) {
+      const importStatement = generateRuntimeImport([...neededImports]);
+      s.prepend(importStatement + `
 `);
+    }
+    if (svelteImports.size > 0) {
+      const svelteImportStatement = `import { ${[...svelteImports].join(", ")} } from 'svelte'`;
+      s.prepend(svelteImportStatement + `
+`);
+    }
   }
   if (!changed) {
     return { code: source, changed: false };
@@ -2848,9 +2880,10 @@ async function transformScriptContent(source, options) {
   const { isComponent = false, schemaResolver } = options;
   let changed = false;
   const neededImports = new Set;
+  const svelteImports = new Set;
   let propsTypeDeclaration = null;
   if (!isComponent) {
-    changed = transformOriginCalls(s, source, neededImports) || changed;
+    changed = transformOriginCalls(s, source, neededImports, svelteImports) || changed;
   }
   if (isComponent) {
     const result = await transformAttrsOriginCalls(s, source, neededImports, schemaResolver);
@@ -2863,11 +2896,22 @@ async function transformScriptContent(source, options) {
   if (neededImports.size > 0) {
     const importStatement = generateRuntimeImport([...neededImports]);
     s.prepend(importStatement + `
+`);
+  }
+  if (svelteImports.size > 0) {
+    const svelteImportStatement = `import { ${[...svelteImports].join(", ")} } from 'svelte'`;
+    s.prepend(svelteImportStatement + `
 `);
   }
   if (propsTypeDeclaration) {
     const afterImports = findPropsInjectionPosition(source);
-    const offset = neededImports.size > 0 ? generateRuntimeImport([...neededImports]).length + 1 : 0;
+    let offset = 0;
+    if (neededImports.size > 0) {
+      offset += generateRuntimeImport([...neededImports]).length + 1;
+    }
+    if (svelteImports.size > 0) {
+      offset += `import { ${[...svelteImports].join(", ")} } from 'svelte'`.length + 1;
+    }
     s.appendLeft(afterImports + offset, propsTypeDeclaration + `
 `);
   }

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

@@ -48,4 +48,4 @@ export interface TransformOriginBodyResult {
  * })
  * ```
  */
-export declare function transformOriginCalls(s: MagicString, source: string, neededImports: Set<string>): boolean;
+export declare function transformOriginCalls(s: MagicString, source: string, neededImports: Set<string>, svelteImports?: Set<string>): boolean;

package/package.json

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