From 2935d89512b5c2438ecf321bf48bc900c630a266 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 14 Aug 2026 03:45:40 +0000 Subject: [PATCH] Sync generated provider output --- .../impeccable/scripts/live/svelte-ast.mjs | 12 ++++++-- .../scripts/live/svelte-component.mjs | 28 +++++++++++++++++-- .../impeccable/scripts/live/svelte-ast.mjs | 12 ++++++-- .../scripts/live/svelte-component.mjs | 28 +++++++++++++++++-- .../impeccable/scripts/live/svelte-ast.mjs | 12 ++++++-- .../scripts/live/svelte-component.mjs | 28 +++++++++++++++++-- .../impeccable/scripts/live/svelte-ast.mjs | 12 ++++++-- .../scripts/live/svelte-component.mjs | 28 +++++++++++++++++-- .../impeccable/scripts/live/svelte-ast.mjs | 12 ++++++-- .../scripts/live/svelte-component.mjs | 28 +++++++++++++++++-- .../impeccable/scripts/live/svelte-ast.mjs | 12 ++++++-- .../scripts/live/svelte-component.mjs | 28 +++++++++++++++++-- .../impeccable/scripts/live/svelte-ast.mjs | 12 ++++++-- .../scripts/live/svelte-component.mjs | 28 +++++++++++++++++-- .../impeccable/scripts/live/svelte-ast.mjs | 12 ++++++-- .../scripts/live/svelte-component.mjs | 28 +++++++++++++++++-- .../impeccable/scripts/live/svelte-ast.mjs | 12 ++++++-- .../scripts/live/svelte-component.mjs | 28 +++++++++++++++++-- .../impeccable/scripts/live/svelte-ast.mjs | 12 ++++++-- .../scripts/live/svelte-component.mjs | 28 +++++++++++++++++-- .../impeccable/scripts/live/svelte-ast.mjs | 12 ++++++-- .../scripts/live/svelte-component.mjs | 28 +++++++++++++++++-- .../impeccable/scripts/live/svelte-ast.mjs | 12 ++++++-- .../scripts/live/svelte-component.mjs | 28 +++++++++++++++++-- .../impeccable/scripts/live/svelte-ast.mjs | 12 ++++++-- .../scripts/live/svelte-component.mjs | 28 +++++++++++++++++-- .../impeccable/scripts/live/svelte-ast.mjs | 12 ++++++-- .../scripts/live/svelte-component.mjs | 28 +++++++++++++++++-- .../impeccable/scripts/live/svelte-ast.mjs | 12 ++++++-- .../scripts/live/svelte-component.mjs | 28 +++++++++++++++++-- .../impeccable/scripts/live/svelte-ast.mjs | 12 ++++++-- .../scripts/live/svelte-component.mjs | 28 +++++++++++++++++-- 32 files changed, 576 insertions(+), 64 deletions(-) diff --git a/.agents/skills/impeccable/scripts/live/svelte-ast.mjs b/.agents/skills/impeccable/scripts/live/svelte-ast.mjs index 06e18b62e..7481b8730 100644 --- a/.agents/skills/impeccable/scripts/live/svelte-ast.mjs +++ b/.agents/skills/impeccable/scripts/live/svelte-ast.mjs @@ -933,9 +933,17 @@ function collectFreeIdentifierRanges(node, scopes, emit) { * Build the preview component's script block from a v2 contract, with * defaults that keep an unhydrated mount rendering instead of crashing. */ +// `/** @type {...} */` directly before a destructuring declaration is also +// JSDoc's cast syntax, and Svelte 5.50+ re-emits the annotation in cast form +// onto the template's own declaration: `var /** @type {...} */ (h1) = root()`. +// That is a syntax error, so the browser's dynamic import of the variant dies +// with "Unexpected token '('" and nothing renders. `@typedef` carries the same +// shape without being a cast. Keep it a typedef; +// tests/live-svelte-props-script.test.mjs compiles what these builders emit +// and parses the result. export function buildPropsScriptV2(contract) { if (!contract || contract.length === 0) { - return '\n'; + return '\n'; } const defaults = { text: "''", @@ -957,5 +965,5 @@ export function buildPropsScriptV2(contract) { const typeFields = contract .map((c) => ` ${c.prop}?: ${types[c.kind] ?? 'string'};`) .join('\n'); - return `\n`; + return `\n`; } diff --git a/.agents/skills/impeccable/scripts/live/svelte-component.mjs b/.agents/skills/impeccable/scripts/live/svelte-component.mjs index 4993453a7..8e2c33deb 100644 --- a/.agents/skills/impeccable/scripts/live/svelte-component.mjs +++ b/.agents/skills/impeccable/scripts/live/svelte-component.mjs @@ -154,13 +154,19 @@ export function parseSvelteComponentFile(content) { return { markup, cssLines, styleBlock }; } +// A JSDoc `@type` directly before a destructuring declaration is JSDoc cast +// syntax, and Svelte 5.50+ re-emits it onto the template's own declaration as +// `var /** @type {...} */ (h1) = root()`, which does not parse. The browser's +// import of the variant then fails with "Unexpected token '('" and the session +// shows nothing. `@typedef` documents the same shape without being a cast. +// tests/live-svelte-props-script.test.mjs compiles and parses what this emits. function buildPropsScript(contract) { if (contract.length === 0) { - return '\n'; + return '\n'; } const names = contract.map((c) => c.prop).join(', '); const typeFields = contract.map((c) => ` ${c.prop}: string;`).join('\n'); - return `\n`; + return `\n`; } function buildVariantStub(variantNum, originalWithProps, contract) { @@ -1111,6 +1117,24 @@ export function removeSvelteComponentSession(id, cwd = process.cwd()) { * seeded one) used to surface as a red Vite overlay in the user's page plus * a mount-failure round trip; bounced at publish time it is a private * agent-side fix with the exact file and line. + * + * What this deliberately does NOT prove is that the emitted module is valid + * JavaScript, and issue #580 was exactly that gap: valid .svelte source whose + * generated JS did not parse, so this check passed and the browser's import + * failed with "Unexpected token '('". Two reasons it cannot close the gap, both + * structural rather than oversights: + * + * - `generate: false` produces no JS to inspect, and generating it here would + * spend a full codegen per variant on the publish path. + * - `loadSvelteCompiler` reaches the compiler through createRequire, which + * Svelte's export map routes to a prebuilt CJS build. The dev server + * imports `src/compiler` instead, and only that path uses the app's + * installed printer (esrap). The two can disagree, so even a generated + * check here would be checking a different compiler than the one whose + * output the browser runs. + * + * tests/live-svelte-props-script.test.mjs covers the emitted JS, importing the + * compiler as ESM so it sees what the dev server sees. */ export function compileCheckVariants(id, cwd = process.cwd()) { const manifest = findSvelteComponentManifest(id, cwd); diff --git a/.claude/skills/impeccable/scripts/live/svelte-ast.mjs b/.claude/skills/impeccable/scripts/live/svelte-ast.mjs index 06e18b62e..7481b8730 100644 --- a/.claude/skills/impeccable/scripts/live/svelte-ast.mjs +++ b/.claude/skills/impeccable/scripts/live/svelte-ast.mjs @@ -933,9 +933,17 @@ function collectFreeIdentifierRanges(node, scopes, emit) { * Build the preview component's script block from a v2 contract, with * defaults that keep an unhydrated mount rendering instead of crashing. */ +// `/** @type {...} */` directly before a destructuring declaration is also +// JSDoc's cast syntax, and Svelte 5.50+ re-emits the annotation in cast form +// onto the template's own declaration: `var /** @type {...} */ (h1) = root()`. +// That is a syntax error, so the browser's dynamic import of the variant dies +// with "Unexpected token '('" and nothing renders. `@typedef` carries the same +// shape without being a cast. Keep it a typedef; +// tests/live-svelte-props-script.test.mjs compiles what these builders emit +// and parses the result. export function buildPropsScriptV2(contract) { if (!contract || contract.length === 0) { - return '\n'; + return '\n'; } const defaults = { text: "''", @@ -957,5 +965,5 @@ export function buildPropsScriptV2(contract) { const typeFields = contract .map((c) => ` ${c.prop}?: ${types[c.kind] ?? 'string'};`) .join('\n'); - return `\n`; + return `\n`; } diff --git a/.claude/skills/impeccable/scripts/live/svelte-component.mjs b/.claude/skills/impeccable/scripts/live/svelte-component.mjs index 4993453a7..8e2c33deb 100644 --- a/.claude/skills/impeccable/scripts/live/svelte-component.mjs +++ b/.claude/skills/impeccable/scripts/live/svelte-component.mjs @@ -154,13 +154,19 @@ export function parseSvelteComponentFile(content) { return { markup, cssLines, styleBlock }; } +// A JSDoc `@type` directly before a destructuring declaration is JSDoc cast +// syntax, and Svelte 5.50+ re-emits it onto the template's own declaration as +// `var /** @type {...} */ (h1) = root()`, which does not parse. The browser's +// import of the variant then fails with "Unexpected token '('" and the session +// shows nothing. `@typedef` documents the same shape without being a cast. +// tests/live-svelte-props-script.test.mjs compiles and parses what this emits. function buildPropsScript(contract) { if (contract.length === 0) { - return '\n'; + return '\n'; } const names = contract.map((c) => c.prop).join(', '); const typeFields = contract.map((c) => ` ${c.prop}: string;`).join('\n'); - return `\n`; + return `\n`; } function buildVariantStub(variantNum, originalWithProps, contract) { @@ -1111,6 +1117,24 @@ export function removeSvelteComponentSession(id, cwd = process.cwd()) { * seeded one) used to surface as a red Vite overlay in the user's page plus * a mount-failure round trip; bounced at publish time it is a private * agent-side fix with the exact file and line. + * + * What this deliberately does NOT prove is that the emitted module is valid + * JavaScript, and issue #580 was exactly that gap: valid .svelte source whose + * generated JS did not parse, so this check passed and the browser's import + * failed with "Unexpected token '('". Two reasons it cannot close the gap, both + * structural rather than oversights: + * + * - `generate: false` produces no JS to inspect, and generating it here would + * spend a full codegen per variant on the publish path. + * - `loadSvelteCompiler` reaches the compiler through createRequire, which + * Svelte's export map routes to a prebuilt CJS build. The dev server + * imports `src/compiler` instead, and only that path uses the app's + * installed printer (esrap). The two can disagree, so even a generated + * check here would be checking a different compiler than the one whose + * output the browser runs. + * + * tests/live-svelte-props-script.test.mjs covers the emitted JS, importing the + * compiler as ESM so it sees what the dev server sees. */ export function compileCheckVariants(id, cwd = process.cwd()) { const manifest = findSvelteComponentManifest(id, cwd); diff --git a/.cursor/skills/impeccable/scripts/live/svelte-ast.mjs b/.cursor/skills/impeccable/scripts/live/svelte-ast.mjs index 06e18b62e..7481b8730 100644 --- a/.cursor/skills/impeccable/scripts/live/svelte-ast.mjs +++ b/.cursor/skills/impeccable/scripts/live/svelte-ast.mjs @@ -933,9 +933,17 @@ function collectFreeIdentifierRanges(node, scopes, emit) { * Build the preview component's script block from a v2 contract, with * defaults that keep an unhydrated mount rendering instead of crashing. */ +// `/** @type {...} */` directly before a destructuring declaration is also +// JSDoc's cast syntax, and Svelte 5.50+ re-emits the annotation in cast form +// onto the template's own declaration: `var /** @type {...} */ (h1) = root()`. +// That is a syntax error, so the browser's dynamic import of the variant dies +// with "Unexpected token '('" and nothing renders. `@typedef` carries the same +// shape without being a cast. Keep it a typedef; +// tests/live-svelte-props-script.test.mjs compiles what these builders emit +// and parses the result. export function buildPropsScriptV2(contract) { if (!contract || contract.length === 0) { - return '\n'; + return '\n'; } const defaults = { text: "''", @@ -957,5 +965,5 @@ export function buildPropsScriptV2(contract) { const typeFields = contract .map((c) => ` ${c.prop}?: ${types[c.kind] ?? 'string'};`) .join('\n'); - return `\n`; + return `\n`; } diff --git a/.cursor/skills/impeccable/scripts/live/svelte-component.mjs b/.cursor/skills/impeccable/scripts/live/svelte-component.mjs index 4993453a7..8e2c33deb 100644 --- a/.cursor/skills/impeccable/scripts/live/svelte-component.mjs +++ b/.cursor/skills/impeccable/scripts/live/svelte-component.mjs @@ -154,13 +154,19 @@ export function parseSvelteComponentFile(content) { return { markup, cssLines, styleBlock }; } +// A JSDoc `@type` directly before a destructuring declaration is JSDoc cast +// syntax, and Svelte 5.50+ re-emits it onto the template's own declaration as +// `var /** @type {...} */ (h1) = root()`, which does not parse. The browser's +// import of the variant then fails with "Unexpected token '('" and the session +// shows nothing. `@typedef` documents the same shape without being a cast. +// tests/live-svelte-props-script.test.mjs compiles and parses what this emits. function buildPropsScript(contract) { if (contract.length === 0) { - return '\n'; + return '\n'; } const names = contract.map((c) => c.prop).join(', '); const typeFields = contract.map((c) => ` ${c.prop}: string;`).join('\n'); - return `\n`; + return `\n`; } function buildVariantStub(variantNum, originalWithProps, contract) { @@ -1111,6 +1117,24 @@ export function removeSvelteComponentSession(id, cwd = process.cwd()) { * seeded one) used to surface as a red Vite overlay in the user's page plus * a mount-failure round trip; bounced at publish time it is a private * agent-side fix with the exact file and line. + * + * What this deliberately does NOT prove is that the emitted module is valid + * JavaScript, and issue #580 was exactly that gap: valid .svelte source whose + * generated JS did not parse, so this check passed and the browser's import + * failed with "Unexpected token '('". Two reasons it cannot close the gap, both + * structural rather than oversights: + * + * - `generate: false` produces no JS to inspect, and generating it here would + * spend a full codegen per variant on the publish path. + * - `loadSvelteCompiler` reaches the compiler through createRequire, which + * Svelte's export map routes to a prebuilt CJS build. The dev server + * imports `src/compiler` instead, and only that path uses the app's + * installed printer (esrap). The two can disagree, so even a generated + * check here would be checking a different compiler than the one whose + * output the browser runs. + * + * tests/live-svelte-props-script.test.mjs covers the emitted JS, importing the + * compiler as ESM so it sees what the dev server sees. */ export function compileCheckVariants(id, cwd = process.cwd()) { const manifest = findSvelteComponentManifest(id, cwd); diff --git a/.gemini/skills/impeccable/scripts/live/svelte-ast.mjs b/.gemini/skills/impeccable/scripts/live/svelte-ast.mjs index 06e18b62e..7481b8730 100644 --- a/.gemini/skills/impeccable/scripts/live/svelte-ast.mjs +++ b/.gemini/skills/impeccable/scripts/live/svelte-ast.mjs @@ -933,9 +933,17 @@ function collectFreeIdentifierRanges(node, scopes, emit) { * Build the preview component's script block from a v2 contract, with * defaults that keep an unhydrated mount rendering instead of crashing. */ +// `/** @type {...} */` directly before a destructuring declaration is also +// JSDoc's cast syntax, and Svelte 5.50+ re-emits the annotation in cast form +// onto the template's own declaration: `var /** @type {...} */ (h1) = root()`. +// That is a syntax error, so the browser's dynamic import of the variant dies +// with "Unexpected token '('" and nothing renders. `@typedef` carries the same +// shape without being a cast. Keep it a typedef; +// tests/live-svelte-props-script.test.mjs compiles what these builders emit +// and parses the result. export function buildPropsScriptV2(contract) { if (!contract || contract.length === 0) { - return '\n'; + return '\n'; } const defaults = { text: "''", @@ -957,5 +965,5 @@ export function buildPropsScriptV2(contract) { const typeFields = contract .map((c) => ` ${c.prop}?: ${types[c.kind] ?? 'string'};`) .join('\n'); - return `\n`; + return `\n`; } diff --git a/.gemini/skills/impeccable/scripts/live/svelte-component.mjs b/.gemini/skills/impeccable/scripts/live/svelte-component.mjs index 4993453a7..8e2c33deb 100644 --- a/.gemini/skills/impeccable/scripts/live/svelte-component.mjs +++ b/.gemini/skills/impeccable/scripts/live/svelte-component.mjs @@ -154,13 +154,19 @@ export function parseSvelteComponentFile(content) { return { markup, cssLines, styleBlock }; } +// A JSDoc `@type` directly before a destructuring declaration is JSDoc cast +// syntax, and Svelte 5.50+ re-emits it onto the template's own declaration as +// `var /** @type {...} */ (h1) = root()`, which does not parse. The browser's +// import of the variant then fails with "Unexpected token '('" and the session +// shows nothing. `@typedef` documents the same shape without being a cast. +// tests/live-svelte-props-script.test.mjs compiles and parses what this emits. function buildPropsScript(contract) { if (contract.length === 0) { - return '\n'; + return '\n'; } const names = contract.map((c) => c.prop).join(', '); const typeFields = contract.map((c) => ` ${c.prop}: string;`).join('\n'); - return `\n`; + return `\n`; } function buildVariantStub(variantNum, originalWithProps, contract) { @@ -1111,6 +1117,24 @@ export function removeSvelteComponentSession(id, cwd = process.cwd()) { * seeded one) used to surface as a red Vite overlay in the user's page plus * a mount-failure round trip; bounced at publish time it is a private * agent-side fix with the exact file and line. + * + * What this deliberately does NOT prove is that the emitted module is valid + * JavaScript, and issue #580 was exactly that gap: valid .svelte source whose + * generated JS did not parse, so this check passed and the browser's import + * failed with "Unexpected token '('". Two reasons it cannot close the gap, both + * structural rather than oversights: + * + * - `generate: false` produces no JS to inspect, and generating it here would + * spend a full codegen per variant on the publish path. + * - `loadSvelteCompiler` reaches the compiler through createRequire, which + * Svelte's export map routes to a prebuilt CJS build. The dev server + * imports `src/compiler` instead, and only that path uses the app's + * installed printer (esrap). The two can disagree, so even a generated + * check here would be checking a different compiler than the one whose + * output the browser runs. + * + * tests/live-svelte-props-script.test.mjs covers the emitted JS, importing the + * compiler as ESM so it sees what the dev server sees. */ export function compileCheckVariants(id, cwd = process.cwd()) { const manifest = findSvelteComponentManifest(id, cwd); diff --git a/.github/skills/impeccable/scripts/live/svelte-ast.mjs b/.github/skills/impeccable/scripts/live/svelte-ast.mjs index 06e18b62e..7481b8730 100644 --- a/.github/skills/impeccable/scripts/live/svelte-ast.mjs +++ b/.github/skills/impeccable/scripts/live/svelte-ast.mjs @@ -933,9 +933,17 @@ function collectFreeIdentifierRanges(node, scopes, emit) { * Build the preview component's script block from a v2 contract, with * defaults that keep an unhydrated mount rendering instead of crashing. */ +// `/** @type {...} */` directly before a destructuring declaration is also +// JSDoc's cast syntax, and Svelte 5.50+ re-emits the annotation in cast form +// onto the template's own declaration: `var /** @type {...} */ (h1) = root()`. +// That is a syntax error, so the browser's dynamic import of the variant dies +// with "Unexpected token '('" and nothing renders. `@typedef` carries the same +// shape without being a cast. Keep it a typedef; +// tests/live-svelte-props-script.test.mjs compiles what these builders emit +// and parses the result. export function buildPropsScriptV2(contract) { if (!contract || contract.length === 0) { - return '\n'; + return '\n'; } const defaults = { text: "''", @@ -957,5 +965,5 @@ export function buildPropsScriptV2(contract) { const typeFields = contract .map((c) => ` ${c.prop}?: ${types[c.kind] ?? 'string'};`) .join('\n'); - return `\n`; + return `\n`; } diff --git a/.github/skills/impeccable/scripts/live/svelte-component.mjs b/.github/skills/impeccable/scripts/live/svelte-component.mjs index 4993453a7..8e2c33deb 100644 --- a/.github/skills/impeccable/scripts/live/svelte-component.mjs +++ b/.github/skills/impeccable/scripts/live/svelte-component.mjs @@ -154,13 +154,19 @@ export function parseSvelteComponentFile(content) { return { markup, cssLines, styleBlock }; } +// A JSDoc `@type` directly before a destructuring declaration is JSDoc cast +// syntax, and Svelte 5.50+ re-emits it onto the template's own declaration as +// `var /** @type {...} */ (h1) = root()`, which does not parse. The browser's +// import of the variant then fails with "Unexpected token '('" and the session +// shows nothing. `@typedef` documents the same shape without being a cast. +// tests/live-svelte-props-script.test.mjs compiles and parses what this emits. function buildPropsScript(contract) { if (contract.length === 0) { - return '\n'; + return '\n'; } const names = contract.map((c) => c.prop).join(', '); const typeFields = contract.map((c) => ` ${c.prop}: string;`).join('\n'); - return `\n`; + return `\n`; } function buildVariantStub(variantNum, originalWithProps, contract) { @@ -1111,6 +1117,24 @@ export function removeSvelteComponentSession(id, cwd = process.cwd()) { * seeded one) used to surface as a red Vite overlay in the user's page plus * a mount-failure round trip; bounced at publish time it is a private * agent-side fix with the exact file and line. + * + * What this deliberately does NOT prove is that the emitted module is valid + * JavaScript, and issue #580 was exactly that gap: valid .svelte source whose + * generated JS did not parse, so this check passed and the browser's import + * failed with "Unexpected token '('". Two reasons it cannot close the gap, both + * structural rather than oversights: + * + * - `generate: false` produces no JS to inspect, and generating it here would + * spend a full codegen per variant on the publish path. + * - `loadSvelteCompiler` reaches the compiler through createRequire, which + * Svelte's export map routes to a prebuilt CJS build. The dev server + * imports `src/compiler` instead, and only that path uses the app's + * installed printer (esrap). The two can disagree, so even a generated + * check here would be checking a different compiler than the one whose + * output the browser runs. + * + * tests/live-svelte-props-script.test.mjs covers the emitted JS, importing the + * compiler as ESM so it sees what the dev server sees. */ export function compileCheckVariants(id, cwd = process.cwd()) { const manifest = findSvelteComponentManifest(id, cwd); diff --git a/.grok/skills/impeccable/scripts/live/svelte-ast.mjs b/.grok/skills/impeccable/scripts/live/svelte-ast.mjs index 06e18b62e..7481b8730 100644 --- a/.grok/skills/impeccable/scripts/live/svelte-ast.mjs +++ b/.grok/skills/impeccable/scripts/live/svelte-ast.mjs @@ -933,9 +933,17 @@ function collectFreeIdentifierRanges(node, scopes, emit) { * Build the preview component's script block from a v2 contract, with * defaults that keep an unhydrated mount rendering instead of crashing. */ +// `/** @type {...} */` directly before a destructuring declaration is also +// JSDoc's cast syntax, and Svelte 5.50+ re-emits the annotation in cast form +// onto the template's own declaration: `var /** @type {...} */ (h1) = root()`. +// That is a syntax error, so the browser's dynamic import of the variant dies +// with "Unexpected token '('" and nothing renders. `@typedef` carries the same +// shape without being a cast. Keep it a typedef; +// tests/live-svelte-props-script.test.mjs compiles what these builders emit +// and parses the result. export function buildPropsScriptV2(contract) { if (!contract || contract.length === 0) { - return '\n'; + return '\n'; } const defaults = { text: "''", @@ -957,5 +965,5 @@ export function buildPropsScriptV2(contract) { const typeFields = contract .map((c) => ` ${c.prop}?: ${types[c.kind] ?? 'string'};`) .join('\n'); - return `\n`; + return `\n`; } diff --git a/.grok/skills/impeccable/scripts/live/svelte-component.mjs b/.grok/skills/impeccable/scripts/live/svelte-component.mjs index 4993453a7..8e2c33deb 100644 --- a/.grok/skills/impeccable/scripts/live/svelte-component.mjs +++ b/.grok/skills/impeccable/scripts/live/svelte-component.mjs @@ -154,13 +154,19 @@ export function parseSvelteComponentFile(content) { return { markup, cssLines, styleBlock }; } +// A JSDoc `@type` directly before a destructuring declaration is JSDoc cast +// syntax, and Svelte 5.50+ re-emits it onto the template's own declaration as +// `var /** @type {...} */ (h1) = root()`, which does not parse. The browser's +// import of the variant then fails with "Unexpected token '('" and the session +// shows nothing. `@typedef` documents the same shape without being a cast. +// tests/live-svelte-props-script.test.mjs compiles and parses what this emits. function buildPropsScript(contract) { if (contract.length === 0) { - return '\n'; + return '\n'; } const names = contract.map((c) => c.prop).join(', '); const typeFields = contract.map((c) => ` ${c.prop}: string;`).join('\n'); - return `\n`; + return `\n`; } function buildVariantStub(variantNum, originalWithProps, contract) { @@ -1111,6 +1117,24 @@ export function removeSvelteComponentSession(id, cwd = process.cwd()) { * seeded one) used to surface as a red Vite overlay in the user's page plus * a mount-failure round trip; bounced at publish time it is a private * agent-side fix with the exact file and line. + * + * What this deliberately does NOT prove is that the emitted module is valid + * JavaScript, and issue #580 was exactly that gap: valid .svelte source whose + * generated JS did not parse, so this check passed and the browser's import + * failed with "Unexpected token '('". Two reasons it cannot close the gap, both + * structural rather than oversights: + * + * - `generate: false` produces no JS to inspect, and generating it here would + * spend a full codegen per variant on the publish path. + * - `loadSvelteCompiler` reaches the compiler through createRequire, which + * Svelte's export map routes to a prebuilt CJS build. The dev server + * imports `src/compiler` instead, and only that path uses the app's + * installed printer (esrap). The two can disagree, so even a generated + * check here would be checking a different compiler than the one whose + * output the browser runs. + * + * tests/live-svelte-props-script.test.mjs covers the emitted JS, importing the + * compiler as ESM so it sees what the dev server sees. */ export function compileCheckVariants(id, cwd = process.cwd()) { const manifest = findSvelteComponentManifest(id, cwd); diff --git a/.hermes/skills/impeccable/scripts/live/svelte-ast.mjs b/.hermes/skills/impeccable/scripts/live/svelte-ast.mjs index 06e18b62e..7481b8730 100644 --- a/.hermes/skills/impeccable/scripts/live/svelte-ast.mjs +++ b/.hermes/skills/impeccable/scripts/live/svelte-ast.mjs @@ -933,9 +933,17 @@ function collectFreeIdentifierRanges(node, scopes, emit) { * Build the preview component's script block from a v2 contract, with * defaults that keep an unhydrated mount rendering instead of crashing. */ +// `/** @type {...} */` directly before a destructuring declaration is also +// JSDoc's cast syntax, and Svelte 5.50+ re-emits the annotation in cast form +// onto the template's own declaration: `var /** @type {...} */ (h1) = root()`. +// That is a syntax error, so the browser's dynamic import of the variant dies +// with "Unexpected token '('" and nothing renders. `@typedef` carries the same +// shape without being a cast. Keep it a typedef; +// tests/live-svelte-props-script.test.mjs compiles what these builders emit +// and parses the result. export function buildPropsScriptV2(contract) { if (!contract || contract.length === 0) { - return '\n'; + return '\n'; } const defaults = { text: "''", @@ -957,5 +965,5 @@ export function buildPropsScriptV2(contract) { const typeFields = contract .map((c) => ` ${c.prop}?: ${types[c.kind] ?? 'string'};`) .join('\n'); - return `\n`; + return `\n`; } diff --git a/.hermes/skills/impeccable/scripts/live/svelte-component.mjs b/.hermes/skills/impeccable/scripts/live/svelte-component.mjs index 4993453a7..8e2c33deb 100644 --- a/.hermes/skills/impeccable/scripts/live/svelte-component.mjs +++ b/.hermes/skills/impeccable/scripts/live/svelte-component.mjs @@ -154,13 +154,19 @@ export function parseSvelteComponentFile(content) { return { markup, cssLines, styleBlock }; } +// A JSDoc `@type` directly before a destructuring declaration is JSDoc cast +// syntax, and Svelte 5.50+ re-emits it onto the template's own declaration as +// `var /** @type {...} */ (h1) = root()`, which does not parse. The browser's +// import of the variant then fails with "Unexpected token '('" and the session +// shows nothing. `@typedef` documents the same shape without being a cast. +// tests/live-svelte-props-script.test.mjs compiles and parses what this emits. function buildPropsScript(contract) { if (contract.length === 0) { - return '\n'; + return '\n'; } const names = contract.map((c) => c.prop).join(', '); const typeFields = contract.map((c) => ` ${c.prop}: string;`).join('\n'); - return `\n`; + return `\n`; } function buildVariantStub(variantNum, originalWithProps, contract) { @@ -1111,6 +1117,24 @@ export function removeSvelteComponentSession(id, cwd = process.cwd()) { * seeded one) used to surface as a red Vite overlay in the user's page plus * a mount-failure round trip; bounced at publish time it is a private * agent-side fix with the exact file and line. + * + * What this deliberately does NOT prove is that the emitted module is valid + * JavaScript, and issue #580 was exactly that gap: valid .svelte source whose + * generated JS did not parse, so this check passed and the browser's import + * failed with "Unexpected token '('". Two reasons it cannot close the gap, both + * structural rather than oversights: + * + * - `generate: false` produces no JS to inspect, and generating it here would + * spend a full codegen per variant on the publish path. + * - `loadSvelteCompiler` reaches the compiler through createRequire, which + * Svelte's export map routes to a prebuilt CJS build. The dev server + * imports `src/compiler` instead, and only that path uses the app's + * installed printer (esrap). The two can disagree, so even a generated + * check here would be checking a different compiler than the one whose + * output the browser runs. + * + * tests/live-svelte-props-script.test.mjs covers the emitted JS, importing the + * compiler as ESM so it sees what the dev server sees. */ export function compileCheckVariants(id, cwd = process.cwd()) { const manifest = findSvelteComponentManifest(id, cwd); diff --git a/.kiro/skills/impeccable/scripts/live/svelte-ast.mjs b/.kiro/skills/impeccable/scripts/live/svelte-ast.mjs index 06e18b62e..7481b8730 100644 --- a/.kiro/skills/impeccable/scripts/live/svelte-ast.mjs +++ b/.kiro/skills/impeccable/scripts/live/svelte-ast.mjs @@ -933,9 +933,17 @@ function collectFreeIdentifierRanges(node, scopes, emit) { * Build the preview component's script block from a v2 contract, with * defaults that keep an unhydrated mount rendering instead of crashing. */ +// `/** @type {...} */` directly before a destructuring declaration is also +// JSDoc's cast syntax, and Svelte 5.50+ re-emits the annotation in cast form +// onto the template's own declaration: `var /** @type {...} */ (h1) = root()`. +// That is a syntax error, so the browser's dynamic import of the variant dies +// with "Unexpected token '('" and nothing renders. `@typedef` carries the same +// shape without being a cast. Keep it a typedef; +// tests/live-svelte-props-script.test.mjs compiles what these builders emit +// and parses the result. export function buildPropsScriptV2(contract) { if (!contract || contract.length === 0) { - return '\n'; + return '\n'; } const defaults = { text: "''", @@ -957,5 +965,5 @@ export function buildPropsScriptV2(contract) { const typeFields = contract .map((c) => ` ${c.prop}?: ${types[c.kind] ?? 'string'};`) .join('\n'); - return `\n`; + return `\n`; } diff --git a/.kiro/skills/impeccable/scripts/live/svelte-component.mjs b/.kiro/skills/impeccable/scripts/live/svelte-component.mjs index 4993453a7..8e2c33deb 100644 --- a/.kiro/skills/impeccable/scripts/live/svelte-component.mjs +++ b/.kiro/skills/impeccable/scripts/live/svelte-component.mjs @@ -154,13 +154,19 @@ export function parseSvelteComponentFile(content) { return { markup, cssLines, styleBlock }; } +// A JSDoc `@type` directly before a destructuring declaration is JSDoc cast +// syntax, and Svelte 5.50+ re-emits it onto the template's own declaration as +// `var /** @type {...} */ (h1) = root()`, which does not parse. The browser's +// import of the variant then fails with "Unexpected token '('" and the session +// shows nothing. `@typedef` documents the same shape without being a cast. +// tests/live-svelte-props-script.test.mjs compiles and parses what this emits. function buildPropsScript(contract) { if (contract.length === 0) { - return '\n'; + return '\n'; } const names = contract.map((c) => c.prop).join(', '); const typeFields = contract.map((c) => ` ${c.prop}: string;`).join('\n'); - return `\n`; + return `\n`; } function buildVariantStub(variantNum, originalWithProps, contract) { @@ -1111,6 +1117,24 @@ export function removeSvelteComponentSession(id, cwd = process.cwd()) { * seeded one) used to surface as a red Vite overlay in the user's page plus * a mount-failure round trip; bounced at publish time it is a private * agent-side fix with the exact file and line. + * + * What this deliberately does NOT prove is that the emitted module is valid + * JavaScript, and issue #580 was exactly that gap: valid .svelte source whose + * generated JS did not parse, so this check passed and the browser's import + * failed with "Unexpected token '('". Two reasons it cannot close the gap, both + * structural rather than oversights: + * + * - `generate: false` produces no JS to inspect, and generating it here would + * spend a full codegen per variant on the publish path. + * - `loadSvelteCompiler` reaches the compiler through createRequire, which + * Svelte's export map routes to a prebuilt CJS build. The dev server + * imports `src/compiler` instead, and only that path uses the app's + * installed printer (esrap). The two can disagree, so even a generated + * check here would be checking a different compiler than the one whose + * output the browser runs. + * + * tests/live-svelte-props-script.test.mjs covers the emitted JS, importing the + * compiler as ESM so it sees what the dev server sees. */ export function compileCheckVariants(id, cwd = process.cwd()) { const manifest = findSvelteComponentManifest(id, cwd); diff --git a/.opencode/skills/impeccable/scripts/live/svelte-ast.mjs b/.opencode/skills/impeccable/scripts/live/svelte-ast.mjs index 06e18b62e..7481b8730 100644 --- a/.opencode/skills/impeccable/scripts/live/svelte-ast.mjs +++ b/.opencode/skills/impeccable/scripts/live/svelte-ast.mjs @@ -933,9 +933,17 @@ function collectFreeIdentifierRanges(node, scopes, emit) { * Build the preview component's script block from a v2 contract, with * defaults that keep an unhydrated mount rendering instead of crashing. */ +// `/** @type {...} */` directly before a destructuring declaration is also +// JSDoc's cast syntax, and Svelte 5.50+ re-emits the annotation in cast form +// onto the template's own declaration: `var /** @type {...} */ (h1) = root()`. +// That is a syntax error, so the browser's dynamic import of the variant dies +// with "Unexpected token '('" and nothing renders. `@typedef` carries the same +// shape without being a cast. Keep it a typedef; +// tests/live-svelte-props-script.test.mjs compiles what these builders emit +// and parses the result. export function buildPropsScriptV2(contract) { if (!contract || contract.length === 0) { - return '\n'; + return '\n'; } const defaults = { text: "''", @@ -957,5 +965,5 @@ export function buildPropsScriptV2(contract) { const typeFields = contract .map((c) => ` ${c.prop}?: ${types[c.kind] ?? 'string'};`) .join('\n'); - return `\n`; + return `\n`; } diff --git a/.opencode/skills/impeccable/scripts/live/svelte-component.mjs b/.opencode/skills/impeccable/scripts/live/svelte-component.mjs index 4993453a7..8e2c33deb 100644 --- a/.opencode/skills/impeccable/scripts/live/svelte-component.mjs +++ b/.opencode/skills/impeccable/scripts/live/svelte-component.mjs @@ -154,13 +154,19 @@ export function parseSvelteComponentFile(content) { return { markup, cssLines, styleBlock }; } +// A JSDoc `@type` directly before a destructuring declaration is JSDoc cast +// syntax, and Svelte 5.50+ re-emits it onto the template's own declaration as +// `var /** @type {...} */ (h1) = root()`, which does not parse. The browser's +// import of the variant then fails with "Unexpected token '('" and the session +// shows nothing. `@typedef` documents the same shape without being a cast. +// tests/live-svelte-props-script.test.mjs compiles and parses what this emits. function buildPropsScript(contract) { if (contract.length === 0) { - return '\n'; + return '\n'; } const names = contract.map((c) => c.prop).join(', '); const typeFields = contract.map((c) => ` ${c.prop}: string;`).join('\n'); - return `\n`; + return `\n`; } function buildVariantStub(variantNum, originalWithProps, contract) { @@ -1111,6 +1117,24 @@ export function removeSvelteComponentSession(id, cwd = process.cwd()) { * seeded one) used to surface as a red Vite overlay in the user's page plus * a mount-failure round trip; bounced at publish time it is a private * agent-side fix with the exact file and line. + * + * What this deliberately does NOT prove is that the emitted module is valid + * JavaScript, and issue #580 was exactly that gap: valid .svelte source whose + * generated JS did not parse, so this check passed and the browser's import + * failed with "Unexpected token '('". Two reasons it cannot close the gap, both + * structural rather than oversights: + * + * - `generate: false` produces no JS to inspect, and generating it here would + * spend a full codegen per variant on the publish path. + * - `loadSvelteCompiler` reaches the compiler through createRequire, which + * Svelte's export map routes to a prebuilt CJS build. The dev server + * imports `src/compiler` instead, and only that path uses the app's + * installed printer (esrap). The two can disagree, so even a generated + * check here would be checking a different compiler than the one whose + * output the browser runs. + * + * tests/live-svelte-props-script.test.mjs covers the emitted JS, importing the + * compiler as ESM so it sees what the dev server sees. */ export function compileCheckVariants(id, cwd = process.cwd()) { const manifest = findSvelteComponentManifest(id, cwd); diff --git a/.pi/skills/impeccable/scripts/live/svelte-ast.mjs b/.pi/skills/impeccable/scripts/live/svelte-ast.mjs index 06e18b62e..7481b8730 100644 --- a/.pi/skills/impeccable/scripts/live/svelte-ast.mjs +++ b/.pi/skills/impeccable/scripts/live/svelte-ast.mjs @@ -933,9 +933,17 @@ function collectFreeIdentifierRanges(node, scopes, emit) { * Build the preview component's script block from a v2 contract, with * defaults that keep an unhydrated mount rendering instead of crashing. */ +// `/** @type {...} */` directly before a destructuring declaration is also +// JSDoc's cast syntax, and Svelte 5.50+ re-emits the annotation in cast form +// onto the template's own declaration: `var /** @type {...} */ (h1) = root()`. +// That is a syntax error, so the browser's dynamic import of the variant dies +// with "Unexpected token '('" and nothing renders. `@typedef` carries the same +// shape without being a cast. Keep it a typedef; +// tests/live-svelte-props-script.test.mjs compiles what these builders emit +// and parses the result. export function buildPropsScriptV2(contract) { if (!contract || contract.length === 0) { - return '\n'; + return '\n'; } const defaults = { text: "''", @@ -957,5 +965,5 @@ export function buildPropsScriptV2(contract) { const typeFields = contract .map((c) => ` ${c.prop}?: ${types[c.kind] ?? 'string'};`) .join('\n'); - return `\n`; + return `\n`; } diff --git a/.pi/skills/impeccable/scripts/live/svelte-component.mjs b/.pi/skills/impeccable/scripts/live/svelte-component.mjs index 4993453a7..8e2c33deb 100644 --- a/.pi/skills/impeccable/scripts/live/svelte-component.mjs +++ b/.pi/skills/impeccable/scripts/live/svelte-component.mjs @@ -154,13 +154,19 @@ export function parseSvelteComponentFile(content) { return { markup, cssLines, styleBlock }; } +// A JSDoc `@type` directly before a destructuring declaration is JSDoc cast +// syntax, and Svelte 5.50+ re-emits it onto the template's own declaration as +// `var /** @type {...} */ (h1) = root()`, which does not parse. The browser's +// import of the variant then fails with "Unexpected token '('" and the session +// shows nothing. `@typedef` documents the same shape without being a cast. +// tests/live-svelte-props-script.test.mjs compiles and parses what this emits. function buildPropsScript(contract) { if (contract.length === 0) { - return '\n'; + return '\n'; } const names = contract.map((c) => c.prop).join(', '); const typeFields = contract.map((c) => ` ${c.prop}: string;`).join('\n'); - return `\n`; + return `\n`; } function buildVariantStub(variantNum, originalWithProps, contract) { @@ -1111,6 +1117,24 @@ export function removeSvelteComponentSession(id, cwd = process.cwd()) { * seeded one) used to surface as a red Vite overlay in the user's page plus * a mount-failure round trip; bounced at publish time it is a private * agent-side fix with the exact file and line. + * + * What this deliberately does NOT prove is that the emitted module is valid + * JavaScript, and issue #580 was exactly that gap: valid .svelte source whose + * generated JS did not parse, so this check passed and the browser's import + * failed with "Unexpected token '('". Two reasons it cannot close the gap, both + * structural rather than oversights: + * + * - `generate: false` produces no JS to inspect, and generating it here would + * spend a full codegen per variant on the publish path. + * - `loadSvelteCompiler` reaches the compiler through createRequire, which + * Svelte's export map routes to a prebuilt CJS build. The dev server + * imports `src/compiler` instead, and only that path uses the app's + * installed printer (esrap). The two can disagree, so even a generated + * check here would be checking a different compiler than the one whose + * output the browser runs. + * + * tests/live-svelte-props-script.test.mjs covers the emitted JS, importing the + * compiler as ESM so it sees what the dev server sees. */ export function compileCheckVariants(id, cwd = process.cwd()) { const manifest = findSvelteComponentManifest(id, cwd); diff --git a/.qoder/skills/impeccable/scripts/live/svelte-ast.mjs b/.qoder/skills/impeccable/scripts/live/svelte-ast.mjs index 06e18b62e..7481b8730 100644 --- a/.qoder/skills/impeccable/scripts/live/svelte-ast.mjs +++ b/.qoder/skills/impeccable/scripts/live/svelte-ast.mjs @@ -933,9 +933,17 @@ function collectFreeIdentifierRanges(node, scopes, emit) { * Build the preview component's script block from a v2 contract, with * defaults that keep an unhydrated mount rendering instead of crashing. */ +// `/** @type {...} */` directly before a destructuring declaration is also +// JSDoc's cast syntax, and Svelte 5.50+ re-emits the annotation in cast form +// onto the template's own declaration: `var /** @type {...} */ (h1) = root()`. +// That is a syntax error, so the browser's dynamic import of the variant dies +// with "Unexpected token '('" and nothing renders. `@typedef` carries the same +// shape without being a cast. Keep it a typedef; +// tests/live-svelte-props-script.test.mjs compiles what these builders emit +// and parses the result. export function buildPropsScriptV2(contract) { if (!contract || contract.length === 0) { - return '\n'; + return '\n'; } const defaults = { text: "''", @@ -957,5 +965,5 @@ export function buildPropsScriptV2(contract) { const typeFields = contract .map((c) => ` ${c.prop}?: ${types[c.kind] ?? 'string'};`) .join('\n'); - return `\n`; + return `\n`; } diff --git a/.qoder/skills/impeccable/scripts/live/svelte-component.mjs b/.qoder/skills/impeccable/scripts/live/svelte-component.mjs index 4993453a7..8e2c33deb 100644 --- a/.qoder/skills/impeccable/scripts/live/svelte-component.mjs +++ b/.qoder/skills/impeccable/scripts/live/svelte-component.mjs @@ -154,13 +154,19 @@ export function parseSvelteComponentFile(content) { return { markup, cssLines, styleBlock }; } +// A JSDoc `@type` directly before a destructuring declaration is JSDoc cast +// syntax, and Svelte 5.50+ re-emits it onto the template's own declaration as +// `var /** @type {...} */ (h1) = root()`, which does not parse. The browser's +// import of the variant then fails with "Unexpected token '('" and the session +// shows nothing. `@typedef` documents the same shape without being a cast. +// tests/live-svelte-props-script.test.mjs compiles and parses what this emits. function buildPropsScript(contract) { if (contract.length === 0) { - return '\n'; + return '\n'; } const names = contract.map((c) => c.prop).join(', '); const typeFields = contract.map((c) => ` ${c.prop}: string;`).join('\n'); - return `\n`; + return `\n`; } function buildVariantStub(variantNum, originalWithProps, contract) { @@ -1111,6 +1117,24 @@ export function removeSvelteComponentSession(id, cwd = process.cwd()) { * seeded one) used to surface as a red Vite overlay in the user's page plus * a mount-failure round trip; bounced at publish time it is a private * agent-side fix with the exact file and line. + * + * What this deliberately does NOT prove is that the emitted module is valid + * JavaScript, and issue #580 was exactly that gap: valid .svelte source whose + * generated JS did not parse, so this check passed and the browser's import + * failed with "Unexpected token '('". Two reasons it cannot close the gap, both + * structural rather than oversights: + * + * - `generate: false` produces no JS to inspect, and generating it here would + * spend a full codegen per variant on the publish path. + * - `loadSvelteCompiler` reaches the compiler through createRequire, which + * Svelte's export map routes to a prebuilt CJS build. The dev server + * imports `src/compiler` instead, and only that path uses the app's + * installed printer (esrap). The two can disagree, so even a generated + * check here would be checking a different compiler than the one whose + * output the browser runs. + * + * tests/live-svelte-props-script.test.mjs covers the emitted JS, importing the + * compiler as ESM so it sees what the dev server sees. */ export function compileCheckVariants(id, cwd = process.cwd()) { const manifest = findSvelteComponentManifest(id, cwd); diff --git a/.rovodev/skills/impeccable/scripts/live/svelte-ast.mjs b/.rovodev/skills/impeccable/scripts/live/svelte-ast.mjs index 06e18b62e..7481b8730 100644 --- a/.rovodev/skills/impeccable/scripts/live/svelte-ast.mjs +++ b/.rovodev/skills/impeccable/scripts/live/svelte-ast.mjs @@ -933,9 +933,17 @@ function collectFreeIdentifierRanges(node, scopes, emit) { * Build the preview component's script block from a v2 contract, with * defaults that keep an unhydrated mount rendering instead of crashing. */ +// `/** @type {...} */` directly before a destructuring declaration is also +// JSDoc's cast syntax, and Svelte 5.50+ re-emits the annotation in cast form +// onto the template's own declaration: `var /** @type {...} */ (h1) = root()`. +// That is a syntax error, so the browser's dynamic import of the variant dies +// with "Unexpected token '('" and nothing renders. `@typedef` carries the same +// shape without being a cast. Keep it a typedef; +// tests/live-svelte-props-script.test.mjs compiles what these builders emit +// and parses the result. export function buildPropsScriptV2(contract) { if (!contract || contract.length === 0) { - return '\n'; + return '\n'; } const defaults = { text: "''", @@ -957,5 +965,5 @@ export function buildPropsScriptV2(contract) { const typeFields = contract .map((c) => ` ${c.prop}?: ${types[c.kind] ?? 'string'};`) .join('\n'); - return `\n`; + return `\n`; } diff --git a/.rovodev/skills/impeccable/scripts/live/svelte-component.mjs b/.rovodev/skills/impeccable/scripts/live/svelte-component.mjs index 4993453a7..8e2c33deb 100644 --- a/.rovodev/skills/impeccable/scripts/live/svelte-component.mjs +++ b/.rovodev/skills/impeccable/scripts/live/svelte-component.mjs @@ -154,13 +154,19 @@ export function parseSvelteComponentFile(content) { return { markup, cssLines, styleBlock }; } +// A JSDoc `@type` directly before a destructuring declaration is JSDoc cast +// syntax, and Svelte 5.50+ re-emits it onto the template's own declaration as +// `var /** @type {...} */ (h1) = root()`, which does not parse. The browser's +// import of the variant then fails with "Unexpected token '('" and the session +// shows nothing. `@typedef` documents the same shape without being a cast. +// tests/live-svelte-props-script.test.mjs compiles and parses what this emits. function buildPropsScript(contract) { if (contract.length === 0) { - return '\n'; + return '\n'; } const names = contract.map((c) => c.prop).join(', '); const typeFields = contract.map((c) => ` ${c.prop}: string;`).join('\n'); - return `\n`; + return `\n`; } function buildVariantStub(variantNum, originalWithProps, contract) { @@ -1111,6 +1117,24 @@ export function removeSvelteComponentSession(id, cwd = process.cwd()) { * seeded one) used to surface as a red Vite overlay in the user's page plus * a mount-failure round trip; bounced at publish time it is a private * agent-side fix with the exact file and line. + * + * What this deliberately does NOT prove is that the emitted module is valid + * JavaScript, and issue #580 was exactly that gap: valid .svelte source whose + * generated JS did not parse, so this check passed and the browser's import + * failed with "Unexpected token '('". Two reasons it cannot close the gap, both + * structural rather than oversights: + * + * - `generate: false` produces no JS to inspect, and generating it here would + * spend a full codegen per variant on the publish path. + * - `loadSvelteCompiler` reaches the compiler through createRequire, which + * Svelte's export map routes to a prebuilt CJS build. The dev server + * imports `src/compiler` instead, and only that path uses the app's + * installed printer (esrap). The two can disagree, so even a generated + * check here would be checking a different compiler than the one whose + * output the browser runs. + * + * tests/live-svelte-props-script.test.mjs covers the emitted JS, importing the + * compiler as ESM so it sees what the dev server sees. */ export function compileCheckVariants(id, cwd = process.cwd()) { const manifest = findSvelteComponentManifest(id, cwd); diff --git a/.trae-cn/skills/impeccable/scripts/live/svelte-ast.mjs b/.trae-cn/skills/impeccable/scripts/live/svelte-ast.mjs index 06e18b62e..7481b8730 100644 --- a/.trae-cn/skills/impeccable/scripts/live/svelte-ast.mjs +++ b/.trae-cn/skills/impeccable/scripts/live/svelte-ast.mjs @@ -933,9 +933,17 @@ function collectFreeIdentifierRanges(node, scopes, emit) { * Build the preview component's script block from a v2 contract, with * defaults that keep an unhydrated mount rendering instead of crashing. */ +// `/** @type {...} */` directly before a destructuring declaration is also +// JSDoc's cast syntax, and Svelte 5.50+ re-emits the annotation in cast form +// onto the template's own declaration: `var /** @type {...} */ (h1) = root()`. +// That is a syntax error, so the browser's dynamic import of the variant dies +// with "Unexpected token '('" and nothing renders. `@typedef` carries the same +// shape without being a cast. Keep it a typedef; +// tests/live-svelte-props-script.test.mjs compiles what these builders emit +// and parses the result. export function buildPropsScriptV2(contract) { if (!contract || contract.length === 0) { - return '\n'; + return '\n'; } const defaults = { text: "''", @@ -957,5 +965,5 @@ export function buildPropsScriptV2(contract) { const typeFields = contract .map((c) => ` ${c.prop}?: ${types[c.kind] ?? 'string'};`) .join('\n'); - return `\n`; + return `\n`; } diff --git a/.trae-cn/skills/impeccable/scripts/live/svelte-component.mjs b/.trae-cn/skills/impeccable/scripts/live/svelte-component.mjs index 4993453a7..8e2c33deb 100644 --- a/.trae-cn/skills/impeccable/scripts/live/svelte-component.mjs +++ b/.trae-cn/skills/impeccable/scripts/live/svelte-component.mjs @@ -154,13 +154,19 @@ export function parseSvelteComponentFile(content) { return { markup, cssLines, styleBlock }; } +// A JSDoc `@type` directly before a destructuring declaration is JSDoc cast +// syntax, and Svelte 5.50+ re-emits it onto the template's own declaration as +// `var /** @type {...} */ (h1) = root()`, which does not parse. The browser's +// import of the variant then fails with "Unexpected token '('" and the session +// shows nothing. `@typedef` documents the same shape without being a cast. +// tests/live-svelte-props-script.test.mjs compiles and parses what this emits. function buildPropsScript(contract) { if (contract.length === 0) { - return '\n'; + return '\n'; } const names = contract.map((c) => c.prop).join(', '); const typeFields = contract.map((c) => ` ${c.prop}: string;`).join('\n'); - return `\n`; + return `\n`; } function buildVariantStub(variantNum, originalWithProps, contract) { @@ -1111,6 +1117,24 @@ export function removeSvelteComponentSession(id, cwd = process.cwd()) { * seeded one) used to surface as a red Vite overlay in the user's page plus * a mount-failure round trip; bounced at publish time it is a private * agent-side fix with the exact file and line. + * + * What this deliberately does NOT prove is that the emitted module is valid + * JavaScript, and issue #580 was exactly that gap: valid .svelte source whose + * generated JS did not parse, so this check passed and the browser's import + * failed with "Unexpected token '('". Two reasons it cannot close the gap, both + * structural rather than oversights: + * + * - `generate: false` produces no JS to inspect, and generating it here would + * spend a full codegen per variant on the publish path. + * - `loadSvelteCompiler` reaches the compiler through createRequire, which + * Svelte's export map routes to a prebuilt CJS build. The dev server + * imports `src/compiler` instead, and only that path uses the app's + * installed printer (esrap). The two can disagree, so even a generated + * check here would be checking a different compiler than the one whose + * output the browser runs. + * + * tests/live-svelte-props-script.test.mjs covers the emitted JS, importing the + * compiler as ESM so it sees what the dev server sees. */ export function compileCheckVariants(id, cwd = process.cwd()) { const manifest = findSvelteComponentManifest(id, cwd); diff --git a/.trae/skills/impeccable/scripts/live/svelte-ast.mjs b/.trae/skills/impeccable/scripts/live/svelte-ast.mjs index 06e18b62e..7481b8730 100644 --- a/.trae/skills/impeccable/scripts/live/svelte-ast.mjs +++ b/.trae/skills/impeccable/scripts/live/svelte-ast.mjs @@ -933,9 +933,17 @@ function collectFreeIdentifierRanges(node, scopes, emit) { * Build the preview component's script block from a v2 contract, with * defaults that keep an unhydrated mount rendering instead of crashing. */ +// `/** @type {...} */` directly before a destructuring declaration is also +// JSDoc's cast syntax, and Svelte 5.50+ re-emits the annotation in cast form +// onto the template's own declaration: `var /** @type {...} */ (h1) = root()`. +// That is a syntax error, so the browser's dynamic import of the variant dies +// with "Unexpected token '('" and nothing renders. `@typedef` carries the same +// shape without being a cast. Keep it a typedef; +// tests/live-svelte-props-script.test.mjs compiles what these builders emit +// and parses the result. export function buildPropsScriptV2(contract) { if (!contract || contract.length === 0) { - return '\n'; + return '\n'; } const defaults = { text: "''", @@ -957,5 +965,5 @@ export function buildPropsScriptV2(contract) { const typeFields = contract .map((c) => ` ${c.prop}?: ${types[c.kind] ?? 'string'};`) .join('\n'); - return `\n`; + return `\n`; } diff --git a/.trae/skills/impeccable/scripts/live/svelte-component.mjs b/.trae/skills/impeccable/scripts/live/svelte-component.mjs index 4993453a7..8e2c33deb 100644 --- a/.trae/skills/impeccable/scripts/live/svelte-component.mjs +++ b/.trae/skills/impeccable/scripts/live/svelte-component.mjs @@ -154,13 +154,19 @@ export function parseSvelteComponentFile(content) { return { markup, cssLines, styleBlock }; } +// A JSDoc `@type` directly before a destructuring declaration is JSDoc cast +// syntax, and Svelte 5.50+ re-emits it onto the template's own declaration as +// `var /** @type {...} */ (h1) = root()`, which does not parse. The browser's +// import of the variant then fails with "Unexpected token '('" and the session +// shows nothing. `@typedef` documents the same shape without being a cast. +// tests/live-svelte-props-script.test.mjs compiles and parses what this emits. function buildPropsScript(contract) { if (contract.length === 0) { - return '\n'; + return '\n'; } const names = contract.map((c) => c.prop).join(', '); const typeFields = contract.map((c) => ` ${c.prop}: string;`).join('\n'); - return `\n`; + return `\n`; } function buildVariantStub(variantNum, originalWithProps, contract) { @@ -1111,6 +1117,24 @@ export function removeSvelteComponentSession(id, cwd = process.cwd()) { * seeded one) used to surface as a red Vite overlay in the user's page plus * a mount-failure round trip; bounced at publish time it is a private * agent-side fix with the exact file and line. + * + * What this deliberately does NOT prove is that the emitted module is valid + * JavaScript, and issue #580 was exactly that gap: valid .svelte source whose + * generated JS did not parse, so this check passed and the browser's import + * failed with "Unexpected token '('". Two reasons it cannot close the gap, both + * structural rather than oversights: + * + * - `generate: false` produces no JS to inspect, and generating it here would + * spend a full codegen per variant on the publish path. + * - `loadSvelteCompiler` reaches the compiler through createRequire, which + * Svelte's export map routes to a prebuilt CJS build. The dev server + * imports `src/compiler` instead, and only that path uses the app's + * installed printer (esrap). The two can disagree, so even a generated + * check here would be checking a different compiler than the one whose + * output the browser runs. + * + * tests/live-svelte-props-script.test.mjs covers the emitted JS, importing the + * compiler as ESM so it sees what the dev server sees. */ export function compileCheckVariants(id, cwd = process.cwd()) { const manifest = findSvelteComponentManifest(id, cwd); diff --git a/.vibe/skills/impeccable/scripts/live/svelte-ast.mjs b/.vibe/skills/impeccable/scripts/live/svelte-ast.mjs index 06e18b62e..7481b8730 100644 --- a/.vibe/skills/impeccable/scripts/live/svelte-ast.mjs +++ b/.vibe/skills/impeccable/scripts/live/svelte-ast.mjs @@ -933,9 +933,17 @@ function collectFreeIdentifierRanges(node, scopes, emit) { * Build the preview component's script block from a v2 contract, with * defaults that keep an unhydrated mount rendering instead of crashing. */ +// `/** @type {...} */` directly before a destructuring declaration is also +// JSDoc's cast syntax, and Svelte 5.50+ re-emits the annotation in cast form +// onto the template's own declaration: `var /** @type {...} */ (h1) = root()`. +// That is a syntax error, so the browser's dynamic import of the variant dies +// with "Unexpected token '('" and nothing renders. `@typedef` carries the same +// shape without being a cast. Keep it a typedef; +// tests/live-svelte-props-script.test.mjs compiles what these builders emit +// and parses the result. export function buildPropsScriptV2(contract) { if (!contract || contract.length === 0) { - return '\n'; + return '\n'; } const defaults = { text: "''", @@ -957,5 +965,5 @@ export function buildPropsScriptV2(contract) { const typeFields = contract .map((c) => ` ${c.prop}?: ${types[c.kind] ?? 'string'};`) .join('\n'); - return `\n`; + return `\n`; } diff --git a/.vibe/skills/impeccable/scripts/live/svelte-component.mjs b/.vibe/skills/impeccable/scripts/live/svelte-component.mjs index 4993453a7..8e2c33deb 100644 --- a/.vibe/skills/impeccable/scripts/live/svelte-component.mjs +++ b/.vibe/skills/impeccable/scripts/live/svelte-component.mjs @@ -154,13 +154,19 @@ export function parseSvelteComponentFile(content) { return { markup, cssLines, styleBlock }; } +// A JSDoc `@type` directly before a destructuring declaration is JSDoc cast +// syntax, and Svelte 5.50+ re-emits it onto the template's own declaration as +// `var /** @type {...} */ (h1) = root()`, which does not parse. The browser's +// import of the variant then fails with "Unexpected token '('" and the session +// shows nothing. `@typedef` documents the same shape without being a cast. +// tests/live-svelte-props-script.test.mjs compiles and parses what this emits. function buildPropsScript(contract) { if (contract.length === 0) { - return '\n'; + return '\n'; } const names = contract.map((c) => c.prop).join(', '); const typeFields = contract.map((c) => ` ${c.prop}: string;`).join('\n'); - return `\n`; + return `\n`; } function buildVariantStub(variantNum, originalWithProps, contract) { @@ -1111,6 +1117,24 @@ export function removeSvelteComponentSession(id, cwd = process.cwd()) { * seeded one) used to surface as a red Vite overlay in the user's page plus * a mount-failure round trip; bounced at publish time it is a private * agent-side fix with the exact file and line. + * + * What this deliberately does NOT prove is that the emitted module is valid + * JavaScript, and issue #580 was exactly that gap: valid .svelte source whose + * generated JS did not parse, so this check passed and the browser's import + * failed with "Unexpected token '('". Two reasons it cannot close the gap, both + * structural rather than oversights: + * + * - `generate: false` produces no JS to inspect, and generating it here would + * spend a full codegen per variant on the publish path. + * - `loadSvelteCompiler` reaches the compiler through createRequire, which + * Svelte's export map routes to a prebuilt CJS build. The dev server + * imports `src/compiler` instead, and only that path uses the app's + * installed printer (esrap). The two can disagree, so even a generated + * check here would be checking a different compiler than the one whose + * output the browser runs. + * + * tests/live-svelte-props-script.test.mjs covers the emitted JS, importing the + * compiler as ESM so it sees what the dev server sees. */ export function compileCheckVariants(id, cwd = process.cwd()) { const manifest = findSvelteComponentManifest(id, cwd); diff --git a/plugin/skills/impeccable/scripts/live/svelte-ast.mjs b/plugin/skills/impeccable/scripts/live/svelte-ast.mjs index 06e18b62e..7481b8730 100644 --- a/plugin/skills/impeccable/scripts/live/svelte-ast.mjs +++ b/plugin/skills/impeccable/scripts/live/svelte-ast.mjs @@ -933,9 +933,17 @@ function collectFreeIdentifierRanges(node, scopes, emit) { * Build the preview component's script block from a v2 contract, with * defaults that keep an unhydrated mount rendering instead of crashing. */ +// `/** @type {...} */` directly before a destructuring declaration is also +// JSDoc's cast syntax, and Svelte 5.50+ re-emits the annotation in cast form +// onto the template's own declaration: `var /** @type {...} */ (h1) = root()`. +// That is a syntax error, so the browser's dynamic import of the variant dies +// with "Unexpected token '('" and nothing renders. `@typedef` carries the same +// shape without being a cast. Keep it a typedef; +// tests/live-svelte-props-script.test.mjs compiles what these builders emit +// and parses the result. export function buildPropsScriptV2(contract) { if (!contract || contract.length === 0) { - return '\n'; + return '\n'; } const defaults = { text: "''", @@ -957,5 +965,5 @@ export function buildPropsScriptV2(contract) { const typeFields = contract .map((c) => ` ${c.prop}?: ${types[c.kind] ?? 'string'};`) .join('\n'); - return `\n`; + return `\n`; } diff --git a/plugin/skills/impeccable/scripts/live/svelte-component.mjs b/plugin/skills/impeccable/scripts/live/svelte-component.mjs index 4993453a7..8e2c33deb 100644 --- a/plugin/skills/impeccable/scripts/live/svelte-component.mjs +++ b/plugin/skills/impeccable/scripts/live/svelte-component.mjs @@ -154,13 +154,19 @@ export function parseSvelteComponentFile(content) { return { markup, cssLines, styleBlock }; } +// A JSDoc `@type` directly before a destructuring declaration is JSDoc cast +// syntax, and Svelte 5.50+ re-emits it onto the template's own declaration as +// `var /** @type {...} */ (h1) = root()`, which does not parse. The browser's +// import of the variant then fails with "Unexpected token '('" and the session +// shows nothing. `@typedef` documents the same shape without being a cast. +// tests/live-svelte-props-script.test.mjs compiles and parses what this emits. function buildPropsScript(contract) { if (contract.length === 0) { - return '\n'; + return '\n'; } const names = contract.map((c) => c.prop).join(', '); const typeFields = contract.map((c) => ` ${c.prop}: string;`).join('\n'); - return `\n`; + return `\n`; } function buildVariantStub(variantNum, originalWithProps, contract) { @@ -1111,6 +1117,24 @@ export function removeSvelteComponentSession(id, cwd = process.cwd()) { * seeded one) used to surface as a red Vite overlay in the user's page plus * a mount-failure round trip; bounced at publish time it is a private * agent-side fix with the exact file and line. + * + * What this deliberately does NOT prove is that the emitted module is valid + * JavaScript, and issue #580 was exactly that gap: valid .svelte source whose + * generated JS did not parse, so this check passed and the browser's import + * failed with "Unexpected token '('". Two reasons it cannot close the gap, both + * structural rather than oversights: + * + * - `generate: false` produces no JS to inspect, and generating it here would + * spend a full codegen per variant on the publish path. + * - `loadSvelteCompiler` reaches the compiler through createRequire, which + * Svelte's export map routes to a prebuilt CJS build. The dev server + * imports `src/compiler` instead, and only that path uses the app's + * installed printer (esrap). The two can disagree, so even a generated + * check here would be checking a different compiler than the one whose + * output the browser runs. + * + * tests/live-svelte-props-script.test.mjs covers the emitted JS, importing the + * compiler as ESM so it sees what the dev server sees. */ export function compileCheckVariants(id, cwd = process.cwd()) { const manifest = findSvelteComponentManifest(id, cwd);