From 25d0bbf4e4dcd2c95deeca1cd87127b8fe93442f Mon Sep 17 00:00:00 2001 From: Manuel Serret Date: Sat, 28 Jun 2025 11:03:57 +0200 Subject: [PATCH 01/12] chore: update `esrap` --- packages/core/package.json | 2 +- packages/core/tests/js/index.ts | 4 +- packages/core/tests/utils.ts | 64 ++------------------- packages/core/tooling/index.ts | 91 +++++++++--------------------- packages/core/tooling/js/common.ts | 16 +++--- packages/core/tooling/parsers.ts | 10 ++-- pnpm-lock.yaml | 11 +++- 7 files changed, 59 insertions(+), 139 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index 8897e9904..cc4707e72 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -51,7 +51,7 @@ "dom-serializer": "^2.0.0", "domhandler": "^5.0.3", "domutils": "^3.2.2", - "esrap": "^1.4.9", + "esrap": "^2.0.0", "htmlparser2": "^9.1.0", "magic-string": "^0.30.17", "picocolors": "^1.1.1", diff --git a/packages/core/tests/js/index.ts b/packages/core/tests/js/index.ts index c7f2021e6..9aca4de6a 100644 --- a/packages/core/tests/js/index.ts +++ b/packages/core/tests/js/index.ts @@ -16,13 +16,13 @@ for (const categoryDirectory of categoryDirectories) { const inputFilePath = join(testDirectoryPath, 'input.ts'); const input = fs.existsSync(inputFilePath) ? fs.readFileSync(inputFilePath, 'utf8') : ''; - const ast = parseScript(input); + const { ast, comments } = parseScript(input); // dynamic imports always need to provide the path inline for static analysis const module = await import(`./${categoryDirectory}/${testName}/run.ts`); module.run(ast); - let output = serializeScript(ast, input); + let output = serializeScript(ast, comments, input); if (!output.endsWith('\n')) output += '\n'; await expect(output).toMatchFileSnapshot(`${testDirectoryPath}/output.ts`); }); diff --git a/packages/core/tests/utils.ts b/packages/core/tests/utils.ts index 37979d0be..ef3272504 100644 --- a/packages/core/tests/utils.ts +++ b/packages/core/tests/utils.ts @@ -4,7 +4,6 @@ import { parseScript, serializeScript, guessIndentString, - guessQuoteStyle, type AstTypes } from '../tooling/index.ts'; @@ -48,57 +47,6 @@ test('guessIndentString - eight spaces', () => { expect(guessIndentString(code)).toBe(' '); }); -test('guessQuoteStyle - single simple', () => { - const code = dedent` - console.log('asd'); - `; - const ast = parseScript(code); - - expect(guessQuoteStyle(ast)).toBe('single'); -}); - -test('guessQuoteStyle - single complex', () => { - const code = dedent` - import foo from 'bar'; - - console.log("bar"); - const foobar = 'foo'; - `; - const ast = parseScript(code); - - expect(guessQuoteStyle(ast)).toBe('single'); -}); - -test('guessQuoteStyle - double simple', () => { - const code = dedent` - console.log("asd"); - `; - const ast = parseScript(code); - - expect(guessQuoteStyle(ast)).toBe('double'); -}); - -test('guessQuoteStyle - double complex', () => { - const code = dedent` - import foo from 'bar'; - - console.log("bar"); - const foobar = "foo"; - `; - const ast = parseScript(code); - - expect(guessQuoteStyle(ast)).toBe('double'); -}); - -test('guessQuoteStyle - no quotes', () => { - const code = dedent` - const foo = true; - `; - const ast = parseScript(code); - - expect(guessQuoteStyle(ast)).toBe(undefined); -}); - const newVariableDeclaration: AstTypes.VariableDeclaration = { type: 'VariableDeclaration', kind: 'const', @@ -126,13 +74,13 @@ test('integration - simple', () => { const foobar = "foo"; } `; - const ast = parseScript(code); + const { ast, comments } = parseScript(code); const method = ast.body[1] as AstTypes.FunctionDeclaration; method.body.body.push(newVariableDeclaration); // new variable is added with correct indentation and matching quotes - expect(serializeScript(ast, code)).toMatchInlineSnapshot(` + expect(serializeScript(ast, comments, code)).toMatchInlineSnapshot(` "import foo from 'bar'; function bar() { @@ -153,13 +101,13 @@ test('integration - simple 2', () => { const foobar = 'foo'; } `; - const ast = parseScript(code); + const { ast, comments } = parseScript(code); const method = ast.body[1] as AstTypes.FunctionDeclaration; method.body.body.push(newVariableDeclaration); // new variable is added with correct indentation and matching quotes - expect(serializeScript(ast, code)).toMatchInlineSnapshot(` + expect(serializeScript(ast, comments, code)).toMatchInlineSnapshot(` "import foo from 'bar'; function bar() { @@ -176,9 +124,9 @@ test('integration - preserves comments', () => { /** @type {string} */ let foo = 'bar'; `; - const ast = parseScript(code); + const { ast, comments } = parseScript(code); - expect(serializeScript(ast, code)).toMatchInlineSnapshot(` + expect(serializeScript(ast, comments, code)).toMatchInlineSnapshot(` "/** @type {string} */ let foo = 'bar';" `); diff --git a/packages/core/tooling/index.ts b/packages/core/tooling/index.ts index ac42aa48f..450666edb 100644 --- a/packages/core/tooling/index.ts +++ b/packages/core/tooling/index.ts @@ -14,6 +14,7 @@ import { } from 'postcss'; import * as fleece from 'silver-fleece'; import { print as esrapPrint } from 'esrap'; +import ts from 'esrap/languages/ts'; import * as acorn from 'acorn'; import { tsPlugin } from '@sveltejs/acorn-typescript'; @@ -47,19 +48,21 @@ export type { /** * Parses as string to an AST. Code below is taken from `esrap` to ensure compatibilty. - * https://github.com/sveltejs/esrap/blob/9daf5dd43b31f17f596aa7da91678f2650666dd0/test/common.js#L12 + * https://github.com/sveltejs/esrap/blob/920491535d31484ac5fae2327c7826839d851aed/test/common.js#L14 */ -export function parseScript(content: string): TsEstree.Program { +export function parseScript(content: string): { + ast: TsEstree.Program; + comments: TsEstree.Comment[]; +} { const comments: TsEstree.Comment[] = []; const acornTs = acorn.Parser.extend(tsPlugin()); - // Acorn doesn't add comments to the AST by itself. This factory returns the capabilities to add them after the fact. const ast = acornTs.parse(content, { ecmaVersion: 'latest', sourceType: 'module', locations: true, - onComment: (block, value, start, end) => { + onComment: (block, value, start, end, startLoc, endLoc) => { if (block && /\n/.test(value)) { let a = start; while (a > 0 && content[a - 1] !== '\n') a -= 1; @@ -71,38 +74,31 @@ export function parseScript(content: string): TsEstree.Program { value = value.replace(new RegExp(`^${indentation}`, 'gm'), ''); } - comments.push({ type: block ? 'Block' : 'Line', value, start, end }); + comments.push({ + type: block ? 'Block' : 'Line', + value, + start, + end, + loc: { start: startLoc as TsEstree.Position, end: endLoc as TsEstree.Position } + }); } }) as TsEstree.Program; - Walker.walk(ast as TsEstree.Node, null, { - _(commentNode, { next }) { - let comment: TsEstree.Comment; - - while (comments[0] && commentNode.start && comments[0].start! < commentNode.start) { - comment = comments.shift()!; - (commentNode.leadingComments ??= []).push(comment); - } - - next(); - - if (comments[0]) { - const slice = content.slice(commentNode.end, comments[0].start); - - if (/^[,) \t]*$/.test(slice)) { - commentNode.trailingComments = [comments.shift()!]; - } - } - } - }); - - return ast; + return { + ast, + comments + }; } -export function serializeScript(ast: TsEstree.Node, previousContent?: string): string { - const { code } = esrapPrint(ast, { - indent: guessIndentString(previousContent), - quotes: guessQuoteStyle(ast) +export function serializeScript( + ast: TsEstree.Node, + comments: TsEstree.Comment[], + previousContent?: string +): string { + // @ts-expect-error we are still using `estree` while `esrap` is using `@typescript-eslint/types` + // which is causing these errors. But they are simmilar enough to work together. + const { code } = esrapPrint(ast, ts({ comments }), { + indent: guessIndentString(previousContent) }); return code; } @@ -205,36 +201,3 @@ export function guessIndentString(str: string | undefined): string { return '\t'; } } - -export function guessQuoteStyle(ast: TsEstree.Node): 'single' | 'double' | undefined { - let singleCount = 0; - let doubleCount = 0; - - Walker.walk(ast, null, { - Literal(node) { - if (node.raw && node.raw.length >= 2) { - // we have at least two characters in the raw string that could represent both quotes - const quotes = [node.raw[0], node.raw[node.raw.length - 1]]; - for (const quote of quotes) { - switch (quote) { - case "'": - singleCount++; - break; - case '"': - doubleCount++; - break; - default: - break; - } - } - } - } - }); - - if (singleCount === 0 && doubleCount === 0) { - // new file or file without any quotes - return undefined; - } - - return singleCount > doubleCount ? 'single' : 'double'; -} diff --git a/packages/core/tooling/js/common.ts b/packages/core/tooling/js/common.ts index 8812660e2..d249b693b 100644 --- a/packages/core/tooling/js/common.ts +++ b/packages/core/tooling/js/common.ts @@ -93,7 +93,7 @@ export function areNodesEqual(node: AstTypes.Node, otherNode: AstTypes.Node): bo const nodeClone = stripAst(decircular(node), ['loc', 'raw']); const otherNodeClone = stripAst(decircular(otherNode), ['loc', 'raw']); - return serializeScript(nodeClone) === serializeScript(otherNodeClone); + return serializeScript(nodeClone, []) === serializeScript(otherNodeClone, []); } export function createBlockStatement(): AstTypes.BlockStatement { @@ -118,18 +118,18 @@ export function appendFromString( node: AstTypes.BlockStatement | AstTypes.Program, options: { code: string } ): void { - const program = parseScript(dedent(options.code)); + const { ast } = parseScript(dedent(options.code)); - for (const childNode of program.body) { + for (const childNode of ast.body) { // @ts-expect-error node.body.push(childNode); } } export function parseExpression(code: string): AstTypes.Expression { - const program = parseScript(dedent(code)); - stripAst(program, ['raw']); - const statement = program.body[0]!; + const { ast } = parseScript(dedent(code)); + stripAst(ast, ['raw']); + const statement = ast.body[0]!; if (statement.type !== 'ExpressionStatement') { throw new Error('Code provided was not an expression'); } @@ -142,8 +142,8 @@ export function parseStatement(code: string): AstTypes.Statement { } export function parseFromString(code: string): T { - const program = parseScript(dedent(code)); - const statement = program.body[0]!; + const { ast } = parseScript(dedent(code)); + const statement = ast.body[0]!; return statement as T; } diff --git a/packages/core/tooling/parsers.ts b/packages/core/tooling/parsers.ts index f7764d34f..7d39bad23 100644 --- a/packages/core/tooling/parsers.ts +++ b/packages/core/tooling/parsers.ts @@ -6,11 +6,13 @@ type ParseBase = { generateCode(): string; }; -export function parseScript(source: string): { ast: utils.AstTypes.Program } & ParseBase { - const ast = utils.parseScript(source); - const generateCode = () => utils.serializeScript(ast, source); +export function parseScript( + source: string +): { ast: utils.AstTypes.Program; comments: utils.AstTypes.Comment[] } & ParseBase { + const { ast, comments } = utils.parseScript(source); + const generateCode = () => utils.serializeScript(ast, comments, source); - return { ast, source, generateCode }; + return { ast, comments, source, generateCode }; } export function parseCss(source: string): { ast: utils.CssAst } & ParseBase { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 959d7df38..0f3596458 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -170,8 +170,8 @@ importers: specifier: ^3.2.2 version: 3.2.2 esrap: - specifier: ^1.4.9 - version: 1.4.9 + specifier: ^2.0.0 + version: 2.0.1 htmlparser2: specifier: ^9.1.0 version: 9.1.0 @@ -1299,6 +1299,9 @@ packages: esrap@1.4.9: resolution: {integrity: sha512-3OMlcd0a03UGuZpPeUC1HxR3nA23l+HEyCiZw3b3FumJIN9KphoGzDJKMXI1S72jVS1dsenDyQC0kJlO1U9E1g==} + esrap@2.0.1: + resolution: {integrity: sha512-6n1JodkxeMvyTDCog7J//t8Yti//fGicZgtFLko6h/aEpc54BK9O8k9cZgC2J8+2Dh1U5uYIxuJWSsylybvFBA==} + esrecurse@4.3.0: resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==} engines: {node: '>=4.0'} @@ -3298,6 +3301,10 @@ snapshots: dependencies: '@jridgewell/sourcemap-codec': 1.5.0 + esrap@2.0.1: + dependencies: + '@jridgewell/sourcemap-codec': 1.5.0 + esrecurse@4.3.0: dependencies: estraverse: 5.3.0 From 9394c80a3803bc60dadb2ff40636509e620d1766 Mon Sep 17 00:00:00 2001 From: Manuel Serret Date: Sun, 26 Oct 2025 06:55:29 +0100 Subject: [PATCH 02/12] use esrap pkg.pr.new --- packages/core/package.json | 2 +- packages/core/tooling/index.ts | 7 ++++--- pnpm-lock.yaml | 11 ++++++----- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index cc4707e72..350e3fdcf 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -51,7 +51,7 @@ "dom-serializer": "^2.0.0", "domhandler": "^5.0.3", "domutils": "^3.2.2", - "esrap": "^2.0.0", + "esrap": "https://pkg.pr.new/sveltejs/esrap@718afce", "htmlparser2": "^9.1.0", "magic-string": "^0.30.17", "picocolors": "^1.1.1", diff --git a/packages/core/tooling/index.ts b/packages/core/tooling/index.ts index 450666edb..1d56b51e8 100644 --- a/packages/core/tooling/index.ts +++ b/packages/core/tooling/index.ts @@ -14,7 +14,7 @@ import { } from 'postcss'; import * as fleece from 'silver-fleece'; import { print as esrapPrint } from 'esrap'; -import ts from 'esrap/languages/ts'; +import ts, { type AdditionalComment } from 'esrap/languages/ts'; import * as acorn from 'acorn'; import { tsPlugin } from '@sveltejs/acorn-typescript'; @@ -93,11 +93,12 @@ export function parseScript(content: string): { export function serializeScript( ast: TsEstree.Node, comments: TsEstree.Comment[], - previousContent?: string + previousContent?: string, + additionalComments?: WeakMap ): string { // @ts-expect-error we are still using `estree` while `esrap` is using `@typescript-eslint/types` // which is causing these errors. But they are simmilar enough to work together. - const { code } = esrapPrint(ast, ts({ comments }), { + const { code } = esrapPrint(ast, ts({ comments, additionalComments }), { indent: guessIndentString(previousContent) }); return code; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8b9000f76..af8676d00 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -170,8 +170,8 @@ importers: specifier: ^3.2.2 version: 3.2.2 esrap: - specifier: ^2.0.0 - version: 2.0.1 + specifier: https://pkg.pr.new/sveltejs/esrap@718afce + version: https://pkg.pr.new/sveltejs/esrap@718afce htmlparser2: specifier: ^9.1.0 version: 9.1.0 @@ -1301,8 +1301,9 @@ packages: esrap@1.4.9: resolution: {integrity: sha512-3OMlcd0a03UGuZpPeUC1HxR3nA23l+HEyCiZw3b3FumJIN9KphoGzDJKMXI1S72jVS1dsenDyQC0kJlO1U9E1g==} - esrap@2.0.1: - resolution: {integrity: sha512-6n1JodkxeMvyTDCog7J//t8Yti//fGicZgtFLko6h/aEpc54BK9O8k9cZgC2J8+2Dh1U5uYIxuJWSsylybvFBA==} + esrap@https://pkg.pr.new/sveltejs/esrap@718afce: + resolution: {tarball: https://pkg.pr.new/sveltejs/esrap@718afce} + version: 2.1.0 esrecurse@4.3.0: resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==} @@ -3306,7 +3307,7 @@ snapshots: dependencies: '@jridgewell/sourcemap-codec': 1.5.0 - esrap@2.0.1: + esrap@https://pkg.pr.new/sveltejs/esrap@718afce: dependencies: '@jridgewell/sourcemap-codec': 1.5.0 From 79f262eef3b6486b711787f2b7e69585d8e071b5 Mon Sep 17 00:00:00 2001 From: Manuel Serret Date: Sun, 26 Oct 2025 06:55:54 +0100 Subject: [PATCH 03/12] fix `svelte-kit` adapter addon --- packages/addons/sveltekit-adapter/index.ts | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/addons/sveltekit-adapter/index.ts b/packages/addons/sveltekit-adapter/index.ts index 3d8d9fc7c..f3ae2bcf9 100644 --- a/packages/addons/sveltekit-adapter/index.ts +++ b/packages/addons/sveltekit-adapter/index.ts @@ -49,7 +49,7 @@ export default defineAddon({ sv.devDependency(adapter.package, adapter.version); sv.file('svelte.config.js', (content) => { - const { ast, generateCode } = parseScript(content); + const { ast, comments, generateCode } = parseScript(content); // finds any existing adapter's import declaration const importDecls = ast.body.filter((n) => n.type === 'ImportDeclaration'); @@ -79,12 +79,20 @@ export default defineAddon({ ) as AstTypes.Property | undefined; if (kitConfig && kitConfig.value.type === 'ObjectExpression') { - const adapterProp = kitConfig.value.properties.find( - (p) => p.type === 'Property' && p.key.type === 'Identifier' && p.key.name === 'adapter' + // removes any existing adapter auto comments + const adapterAutoComments = comments.filter( + (c) => + c.loc && + kitConfig.loc && + c.loc.start.line >= kitConfig.loc.start.line && + c.loc.end.line <= kitConfig.loc.end.line + ); + // modify the array in place + comments.splice( + 0, + comments.length, + ...comments.filter((c) => !adapterAutoComments.includes(c)) ); - if (adapterProp) { - adapterProp.leadingComments = []; - } // only overrides the `adapter` property so we can reset it's args object.overrideProperties(kitConfig.value, { From 7c0c0d2592a586291de0af0a4c4ec4db6be5eede Mon Sep 17 00:00:00 2001 From: Manuel Serret Date: Sun, 26 Oct 2025 07:00:44 +0100 Subject: [PATCH 04/12] remove useless comment --- packages/core/tests/js/object/create/run.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core/tests/js/object/create/run.ts b/packages/core/tests/js/object/create/run.ts index 8bdd272f5..5b19937e0 100644 --- a/packages/core/tests/js/object/create/run.ts +++ b/packages/core/tests/js/object/create/run.ts @@ -37,6 +37,5 @@ export function run(ast: AstTypes.Program): void { name: 'created2', value: createdObject2 }); - createdVariable2.leadingComments = [{ type: 'Line', value: ' prettier-ignore' }]; ast.body.push(createdVariable2); } From f41da148e0ea805c8643189efeff7406655e8f8b Mon Sep 17 00:00:00 2001 From: Manuel Serret Date: Sun, 26 Oct 2025 07:08:34 +0100 Subject: [PATCH 05/12] fix eslint --- packages/addons/eslint/index.ts | 12 +++++++----- packages/core/tooling/index.ts | 4 +++- packages/core/tooling/parsers.ts | 16 ++++++++++------ 3 files changed, 20 insertions(+), 12 deletions(-) diff --git a/packages/addons/eslint/index.ts b/packages/addons/eslint/index.ts index e0130e5b4..80424282d 100644 --- a/packages/addons/eslint/index.ts +++ b/packages/addons/eslint/index.ts @@ -52,7 +52,7 @@ export default defineAddon({ }); sv.file('eslint.config.js', (content) => { - const { ast, generateCode } = parseScript(content); + const { ast, additionalComments, generateCode } = parseScript(content); const eslintConfigs: Array = []; imports.addDefault(ast, { from: './svelte.config.js', as: 'svelteConfig' }); @@ -84,18 +84,20 @@ export default defineAddon({ if (rules.properties[0].type !== 'Property') { throw new Error('rules.properties[0].type !== "Property"'); } - rules.properties[0].key.leadingComments = [ + additionalComments.set(rules.properties[0].key, [ { type: 'Line', value: - ' typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.' + ' typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.', + position: 'leading' }, { type: 'Line', value: - ' see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors' + ' see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors', + position: 'leading' } - ]; + ]); const globalsConfig = object.create({ languageOptions: { diff --git a/packages/core/tooling/index.ts b/packages/core/tooling/index.ts index 1d56b51e8..181270aa1 100644 --- a/packages/core/tooling/index.ts +++ b/packages/core/tooling/index.ts @@ -53,6 +53,7 @@ export type { export function parseScript(content: string): { ast: TsEstree.Program; comments: TsEstree.Comment[]; + additionalComments: WeakMap; } { const comments: TsEstree.Comment[] = []; @@ -86,7 +87,8 @@ export function parseScript(content: string): { return { ast, - comments + comments, + additionalComments: new WeakMap() }; } diff --git a/packages/core/tooling/parsers.ts b/packages/core/tooling/parsers.ts index 7d39bad23..cd6f3b568 100644 --- a/packages/core/tooling/parsers.ts +++ b/packages/core/tooling/parsers.ts @@ -1,18 +1,22 @@ import * as utils from './index.ts'; import MagicString from 'magic-string'; +import type { TsEstree } from './js/ts-estree.ts'; +import type { AdditionalComment } from 'esrap/languages/ts'; type ParseBase = { source: string; generateCode(): string; }; -export function parseScript( - source: string -): { ast: utils.AstTypes.Program; comments: utils.AstTypes.Comment[] } & ParseBase { - const { ast, comments } = utils.parseScript(source); - const generateCode = () => utils.serializeScript(ast, comments, source); +export function parseScript(source: string): { + ast: utils.AstTypes.Program; + comments: utils.AstTypes.Comment[]; + additionalComments: WeakMap; +} & ParseBase { + const { ast, comments, additionalComments } = utils.parseScript(source); + const generateCode = () => utils.serializeScript(ast, comments, source, additionalComments); - return { ast, comments, source, generateCode }; + return { ast, comments, additionalComments, source, generateCode }; } export function parseCss(source: string): { ast: utils.CssAst } & ParseBase { From 7307cc4d6333e22fbead282ffd6edb300cb49076 Mon Sep 17 00:00:00 2001 From: Manuel Serret Date: Sun, 26 Oct 2025 07:35:06 +0100 Subject: [PATCH 06/12] fix eslint --- packages/addons/eslint/index.ts | 4 +- .../core/tests/js/common/jsdoc-comment/run.ts | 6 +-- .../tests/js/common/jsdoc-type-comment/run.ts | 6 +-- packages/core/tests/js/index.ts | 6 +-- packages/core/tooling/index.ts | 7 +++- packages/core/tooling/js/common.ts | 41 ++++++++++++++----- packages/core/tooling/js/index.ts | 2 +- packages/core/tooling/parsers.ts | 4 +- 8 files changed, 49 insertions(+), 27 deletions(-) diff --git a/packages/addons/eslint/index.ts b/packages/addons/eslint/index.ts index 80424282d..d20dd0df2 100644 --- a/packages/addons/eslint/index.ts +++ b/packages/addons/eslint/index.ts @@ -154,7 +154,9 @@ export default defineAddon({ // type annotate config if (!typescript) - common.addJsDocTypeComment(astNode, { type: "import('eslint').Linter.Config[]" }); + common.addJsDocTypeComment(astNode, additionalComments, { + type: "import('eslint').Linter.Config[]" + }); if (typescript) imports.addDefault(ast, { from: 'typescript-eslint', as: 'ts' }); imports.addNamed(ast, { from: 'node:url', imports: ['fileURLToPath'] }); diff --git a/packages/core/tests/js/common/jsdoc-comment/run.ts b/packages/core/tests/js/common/jsdoc-comment/run.ts index c0b6c06f1..15d0369b9 100644 --- a/packages/core/tests/js/common/jsdoc-comment/run.ts +++ b/packages/core/tests/js/common/jsdoc-comment/run.ts @@ -1,9 +1,9 @@ -import { common, type AstTypes } from '@sveltejs/cli-core/js'; +import { common, type AdditionalCommentMap, type AstTypes } from '@sveltejs/cli-core/js'; -export function run(ast: AstTypes.Program): void { +export function run(ast: AstTypes.Program, additionalComments: AdditionalCommentMap): void { const functionDeclaration = ast.body[0] as AstTypes.FunctionDeclaration; - common.addJsDocComment(functionDeclaration, { + common.addJsDocComment(functionDeclaration, additionalComments, { params: { 'import("$lib/paraglide/runtime").AvailableLanguageTag': 'newLanguage' } }); } diff --git a/packages/core/tests/js/common/jsdoc-type-comment/run.ts b/packages/core/tests/js/common/jsdoc-type-comment/run.ts index 9b5e5a065..5074afd58 100644 --- a/packages/core/tests/js/common/jsdoc-type-comment/run.ts +++ b/packages/core/tests/js/common/jsdoc-type-comment/run.ts @@ -1,13 +1,13 @@ -import { common, variables, type AstTypes } from '@sveltejs/cli-core/js'; +import { common, variables, type AdditionalCommentMap, type AstTypes } from '@sveltejs/cli-core/js'; -export function run(ast: AstTypes.Program): void { +export function run(ast: AstTypes.Program, additionalComments: AdditionalCommentMap): void { const declaration = variables.declaration(ast, { kind: 'const', name: 'foo', value: { type: 'Literal', value: 42 } }); - common.addJsDocTypeComment(declaration, { + common.addJsDocTypeComment(declaration, additionalComments, { type: 'number' }); diff --git a/packages/core/tests/js/index.ts b/packages/core/tests/js/index.ts index 9aca4de6a..bc32a5c83 100644 --- a/packages/core/tests/js/index.ts +++ b/packages/core/tests/js/index.ts @@ -16,13 +16,13 @@ for (const categoryDirectory of categoryDirectories) { const inputFilePath = join(testDirectoryPath, 'input.ts'); const input = fs.existsSync(inputFilePath) ? fs.readFileSync(inputFilePath, 'utf8') : ''; - const { ast, comments } = parseScript(input); + const { ast, comments, additionalComments } = parseScript(input); // dynamic imports always need to provide the path inline for static analysis const module = await import(`./${categoryDirectory}/${testName}/run.ts`); - module.run(ast); + module.run(ast, additionalComments); - let output = serializeScript(ast, comments, input); + let output = serializeScript(ast, comments, input, additionalComments); if (!output.endsWith('\n')) output += '\n'; await expect(output).toMatchFileSnapshot(`${testDirectoryPath}/output.ts`); }); diff --git a/packages/core/tooling/index.ts b/packages/core/tooling/index.ts index 181270aa1..d2f1aa0f3 100644 --- a/packages/core/tooling/index.ts +++ b/packages/core/tooling/index.ts @@ -18,6 +18,8 @@ import ts, { type AdditionalComment } from 'esrap/languages/ts'; import * as acorn from 'acorn'; import { tsPlugin } from '@sveltejs/acorn-typescript'; +type AdditionalCommentMap = WeakMap; + export { // html Document as HtmlDocument, @@ -41,6 +43,7 @@ export type { // js TsEstree as AstTypes, + AdditionalCommentMap, //css CssChildNode @@ -53,7 +56,7 @@ export type { export function parseScript(content: string): { ast: TsEstree.Program; comments: TsEstree.Comment[]; - additionalComments: WeakMap; + additionalComments: AdditionalCommentMap; } { const comments: TsEstree.Comment[] = []; @@ -96,7 +99,7 @@ export function serializeScript( ast: TsEstree.Node, comments: TsEstree.Comment[], previousContent?: string, - additionalComments?: WeakMap + additionalComments?: AdditionalCommentMap ): string { // @ts-expect-error we are still using `estree` while `esrap` is using `@typescript-eslint/types` // which is causing these errors. But they are simmilar enough to work together. diff --git a/packages/core/tooling/js/common.ts b/packages/core/tooling/js/common.ts index d249b693b..1f51dcf6a 100644 --- a/packages/core/tooling/js/common.ts +++ b/packages/core/tooling/js/common.ts @@ -1,18 +1,30 @@ -import { type AstTypes, Walker, parseScript, serializeScript, stripAst } from '../index.ts'; +import { + type AdditionalCommentMap, + type AstTypes, + Walker, + parseScript, + serializeScript, + stripAst +} from '../index.ts'; import decircular from 'decircular'; import dedent from 'dedent'; -export function addJsDocTypeComment(node: AstTypes.Node, options: { type: string }): void { +export function addJsDocTypeComment( + node: AstTypes.Node, + additionalComments: AdditionalCommentMap, + options: { type: string } +): void { const comment: AstTypes.Comment = { type: 'Block', value: `* @type {${options.type}} ` }; - addComment(node, comment); + addComment(node, additionalComments, comment); } export function addJsDocComment( node: AstTypes.Node, + additionalComments: AdditionalCommentMap, options: { params: Record } ): void { const commentLines: string[] = []; @@ -25,16 +37,23 @@ export function addJsDocComment( value: `*\n * ${commentLines.join('\n * ')}\n ` }; - addComment(node, comment); + addComment(node, additionalComments, comment); } -function addComment(node: AstTypes.Node, comment: AstTypes.Comment) { - node.leadingComments ??= []; - - const found = node.leadingComments.find( - (item) => item.type === 'Block' && item.value === comment.value - ); - if (!found) node.leadingComments.push(comment); +function addComment( + node: AstTypes.Node, + additionalComments: AdditionalCommentMap, + comment: AstTypes.Comment +) { + const found = additionalComments + .get(node) + ?.find((item) => item.type === 'Block' && item.value === comment.value); + + if (!found) { + const comments = additionalComments.get(node) ?? []; + comments.push({ ...comment, position: 'leading' }); + additionalComments.set(node, comments); + } } export function typeAnnotate( diff --git a/packages/core/tooling/js/index.ts b/packages/core/tooling/js/index.ts index 0b4c6e632..206d49d5a 100644 --- a/packages/core/tooling/js/index.ts +++ b/packages/core/tooling/js/index.ts @@ -7,4 +7,4 @@ export * as variables from './variables.ts'; export * as exports from './exports.ts'; export * as kit from './kit.ts'; export * as vite from './vite.ts'; -export type { AstTypes } from '../index.ts'; +export type { AstTypes, AdditionalCommentMap } from '../index.ts'; diff --git a/packages/core/tooling/parsers.ts b/packages/core/tooling/parsers.ts index cd6f3b568..12c2131e5 100644 --- a/packages/core/tooling/parsers.ts +++ b/packages/core/tooling/parsers.ts @@ -1,7 +1,5 @@ import * as utils from './index.ts'; import MagicString from 'magic-string'; -import type { TsEstree } from './js/ts-estree.ts'; -import type { AdditionalComment } from 'esrap/languages/ts'; type ParseBase = { source: string; @@ -11,7 +9,7 @@ type ParseBase = { export function parseScript(source: string): { ast: utils.AstTypes.Program; comments: utils.AstTypes.Comment[]; - additionalComments: WeakMap; + additionalComments: utils.AdditionalCommentMap; } & ParseBase { const { ast, comments, additionalComments } = utils.parseScript(source); const generateCode = () => utils.serializeScript(ast, comments, source, additionalComments); From 6df65fc99717d31837b57e63aaa72f9e8810f48f Mon Sep 17 00:00:00 2001 From: Manuel Serret Date: Sun, 26 Oct 2025 07:39:04 +0100 Subject: [PATCH 07/12] add changed tests --- packages/core/tests/js/object/create/output.ts | 8 +------- packages/core/tests/js/vite/add-plugin-mode/output.ts | 2 ++ packages/core/tests/js/vite/with-satisfies/output.ts | 11 ++++++----- packages/core/tests/utils.ts | 2 +- 4 files changed, 10 insertions(+), 13 deletions(-) diff --git a/packages/core/tests/js/object/create/output.ts b/packages/core/tests/js/object/create/output.ts index 28ad96e4f..df190f0f4 100644 --- a/packages/core/tests/js/object/create/output.ts +++ b/packages/core/tests/js/object/create/output.ts @@ -1,15 +1,9 @@ const empty = {}; const created = { foo: 1, bar: 'string' }; -// prettier-ignore const created2 = { foo: 1, bar: 'string', object: { foo: 'hello', nested: { bar: 'world' } }, - array: [ - 123, - 'hello', - { foo: 'bar', bool: true }, - [456, '789'] - ] + array: [123, 'hello', { foo: 'bar', bool: true }, [456, '789']] }; diff --git a/packages/core/tests/js/vite/add-plugin-mode/output.ts b/packages/core/tests/js/vite/add-plugin-mode/output.ts index f112d5fcc..df6d4692a 100644 --- a/packages/core/tests/js/vite/add-plugin-mode/output.ts +++ b/packages/core/tests/js/vite/add-plugin-mode/output.ts @@ -7,8 +7,10 @@ import { defineConfig } from 'vite'; export default defineConfig({ plugins: [ firstPlugin(), + // a default plugin sveltekit(), + middlePlugin(), lastPlugin() ] diff --git a/packages/core/tests/js/vite/with-satisfies/output.ts b/packages/core/tests/js/vite/with-satisfies/output.ts index 4d6ed36e0..9c43348e2 100644 --- a/packages/core/tests/js/vite/with-satisfies/output.ts +++ b/packages/core/tests/js/vite/with-satisfies/output.ts @@ -18,23 +18,24 @@ const config = defineConfig({ plugins: [ // all plugins examples, + tailwindcss(), sveltekit(), kitRoutes(), myPlugin() ], + resolve: { alias: { $lib, $routes, $scripts, $actions } }, - build: { - sourcemap: true, - target: 'esnext', - cssMinify: 'lightningcss' - }, + build: { sourcemap: true, target: 'esnext', cssMinify: 'lightningcss' }, + css: { transformer: 'lightningcss', + lightningcss: { targets: browserslistToTargets(browserslist('defaults, not ie 11')) } }, + experimental: { enableNativePlugin: true } }) satisfies UserConfig; diff --git a/packages/core/tests/utils.ts b/packages/core/tests/utils.ts index ef3272504..f27f91fc8 100644 --- a/packages/core/tests/utils.ts +++ b/packages/core/tests/utils.ts @@ -87,7 +87,7 @@ test('integration - simple', () => { console.log("bar"); const foobar = "foo"; - const foobar2 = "test"; + const foobar2 = 'test'; }" `); }); From ae784550dae249f8b34713c9ebd573f72d52e901 Mon Sep 17 00:00:00 2001 From: Manuel Serret Date: Sun, 26 Oct 2025 07:40:21 +0100 Subject: [PATCH 08/12] thats ok too --- packages/core/tests/js/common/jsdoc-type-comment/output.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/core/tests/js/common/jsdoc-type-comment/output.ts b/packages/core/tests/js/common/jsdoc-type-comment/output.ts index 1aa734391..e8a715681 100644 --- a/packages/core/tests/js/common/jsdoc-type-comment/output.ts +++ b/packages/core/tests/js/common/jsdoc-type-comment/output.ts @@ -1,2 +1 @@ -/** @type {number} */ -const foo = 42; +/** @type {number} */ const foo = 42; From 1982ac405e60306265e6596fd7273c9632332699 Mon Sep 17 00:00:00 2001 From: Manuel Serret Date: Sun, 26 Oct 2025 07:51:22 +0100 Subject: [PATCH 09/12] those are ok as well --- .../tests/js/object/ensure-nested-property/output.ts | 9 ++++++++- .../core/tests/js/object/override-property/output.ts | 8 +++++++- packages/core/tests/js/object/property-node/output.ts | 7 ++++++- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/packages/core/tests/js/object/ensure-nested-property/output.ts b/packages/core/tests/js/object/ensure-nested-property/output.ts index 08bd5fbf9..b3824d36a 100644 --- a/packages/core/tests/js/object/ensure-nested-property/output.ts +++ b/packages/core/tests/js/object/ensure-nested-property/output.ts @@ -1 +1,8 @@ -const test = { a: { /** a comment */ keep: 'you', b: { c: '007' } } }; +const test = { + a: { + /** a comment */ + keep: 'you', + + b: { c: '007' } + } +}; diff --git a/packages/core/tests/js/object/override-property/output.ts b/packages/core/tests/js/object/override-property/output.ts index fbdef76fe..987c50888 100644 --- a/packages/core/tests/js/object/override-property/output.ts +++ b/packages/core/tests/js/object/override-property/output.ts @@ -1 +1,7 @@ -const test = { /** a comment */ foo: 2, bar: 'string2', lorem: false }; +const test = { + /** a comment */ + foo: 2, + + bar: 'string2', + lorem: false +}; diff --git a/packages/core/tests/js/object/property-node/output.ts b/packages/core/tests/js/object/property-node/output.ts index 98da8dea4..3719acb91 100644 --- a/packages/core/tests/js/object/property-node/output.ts +++ b/packages/core/tests/js/object/property-node/output.ts @@ -1 +1,6 @@ -const test = { /*a comment updated*/ foo: 1, /*aka: bond, james bond*/ james: '007' }; +const test = { + /** a comment */ + foo: 1, + + james: '007' +}; From 62444cc432a419521ff58b48c4dc17eb79751c7a Mon Sep 17 00:00:00 2001 From: Manuel Serret Date: Sun, 26 Oct 2025 08:28:09 +0100 Subject: [PATCH 10/12] fix last failing test --- packages/core/package.json | 2 +- pnpm-lock.yaml | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index 224452035..23c9e2303 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -34,7 +34,7 @@ "dom-serializer": "^2.0.0", "domhandler": "^5.0.3", "domutils": "^3.2.2", - "esrap": "https://pkg.pr.new/sveltejs/esrap@718afce", + "esrap": "https://pkg.pr.new/sveltejs/esrap@af12b38", "htmlparser2": "^9.1.0", "magic-string": "^0.30.17", "picocolors": "^1.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2b189db0f..f8ccbd66c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -167,8 +167,8 @@ importers: specifier: ^3.2.2 version: 3.2.2 esrap: - specifier: https://pkg.pr.new/sveltejs/esrap@718afce - version: https://pkg.pr.new/sveltejs/esrap@718afce + specifier: https://pkg.pr.new/sveltejs/esrap@af12b38 + version: https://pkg.pr.new/sveltejs/esrap@af12b38 htmlparser2: specifier: ^9.1.0 version: 9.1.0 @@ -1339,8 +1339,8 @@ packages: esrap@1.4.9: resolution: {integrity: sha512-3OMlcd0a03UGuZpPeUC1HxR3nA23l+HEyCiZw3b3FumJIN9KphoGzDJKMXI1S72jVS1dsenDyQC0kJlO1U9E1g==} - esrap@https://pkg.pr.new/sveltejs/esrap@718afce: - resolution: {tarball: https://pkg.pr.new/sveltejs/esrap@718afce} + esrap@https://pkg.pr.new/sveltejs/esrap@af12b38: + resolution: {tarball: https://pkg.pr.new/sveltejs/esrap@af12b38} version: 2.1.0 esrecurse@4.3.0: @@ -3402,7 +3402,7 @@ snapshots: dependencies: '@jridgewell/sourcemap-codec': 1.5.5 - esrap@https://pkg.pr.new/sveltejs/esrap@718afce: + esrap@https://pkg.pr.new/sveltejs/esrap@af12b38: dependencies: '@jridgewell/sourcemap-codec': 1.5.5 From e4af8c752323b28704cda1534718f1a64a8ec8b9 Mon Sep 17 00:00:00 2001 From: Manuel Serret Date: Sun, 26 Oct 2025 13:42:18 +0100 Subject: [PATCH 11/12] implement proper svelte file processing --- packages/addons/common.ts | 29 ++++-- packages/core/package.json | 1 + packages/core/tooling/html/index.ts | 10 ++- packages/core/tooling/index.ts | 10 +++ packages/core/tooling/parsers.ts | 134 ++-------------------------- pnpm-lock.yaml | 32 +++++++ 6 files changed, 78 insertions(+), 138 deletions(-) diff --git a/packages/addons/common.ts b/packages/addons/common.ts index a1a8f2ce5..2ea48eae4 100644 --- a/packages/addons/common.ts +++ b/packages/addons/common.ts @@ -1,4 +1,5 @@ import { imports, exports, common } from '@sveltejs/cli-core/js'; +import { toSvelteFragment, type SvelteAst } from '@sveltejs/cli-core/html'; import { parseScript, parseSvelte } from '@sveltejs/cli-core/parsers'; import process from 'node:process'; @@ -64,17 +65,29 @@ export function addEslintConfigPrettier(content: string): string { } export function addToDemoPage(content: string, path: string): string { - const { template, generateCode } = parseSvelte(content); - - for (const node of template.ast.childNodes) { - if (node.type === 'tag' && node.attribs['href'] === `/demo/${path}`) { - return content; + const { ast, generateCode } = parseSvelte(content); + + for (const node of ast.fragment.nodes) { + if (node.type === 'RegularElement') { + const hrefAttribute = node.attributes.find( + (x) => x.type === 'Attribute' && x.name === 'href' + ) as SvelteAst.Attribute; + if (!hrefAttribute || !hrefAttribute.value) continue; + + if (!Array.isArray(hrefAttribute.value)) continue; + + const hasDemo = hrefAttribute.value.find( + (x) => x.type === 'Text' && x.data === `/demo/${path}` + ); + if (hasDemo) { + return content; + } } } - const newLine = template.source ? '\n' : ''; - const src = template.source + `${newLine}${path}`; - return generateCode({ template: src }); + ast.fragment.nodes.push(...toSvelteFragment(`${path}`)); + + return generateCode(); } /** diff --git a/packages/core/package.json b/packages/core/package.json index 23c9e2303..ddaeab0fa 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -40,6 +40,7 @@ "picocolors": "^1.1.1", "postcss": "^8.5.6", "silver-fleece": "^1.2.1", + "svelte": "https://pkg.pr.new/sveltejs/svelte@1377c40", "yaml": "^2.8.1", "zimmerframe": "^1.1.2" }, diff --git a/packages/core/tooling/html/index.ts b/packages/core/tooling/html/index.ts index 60b2ae078..e245c3bd9 100644 --- a/packages/core/tooling/html/index.ts +++ b/packages/core/tooling/html/index.ts @@ -7,9 +7,11 @@ import { parseHtml } from '../index.ts'; import { appendFromString } from '../js/common.ts'; +import { parseSvelte } from '../parsers.ts'; +import type { AST as SvelteAst } from 'svelte/compiler'; export { HtmlElement, HtmlElementType }; -export type { HtmlDocument }; +export type { HtmlDocument, SvelteAst }; export function createDiv(attributes: Record = {}): HtmlElement { return createElement('div', attributes); @@ -58,3 +60,9 @@ export function addSlot( }); addFromRawHtml(options.htmlAst.childNodes, '{@render children()}'); } + +export function toSvelteFragment(content: string): SvelteAst.Fragment['nodes'] { + // TODO write test + const { ast } = parseSvelte(content); + return ast.fragment.nodes; +} diff --git a/packages/core/tooling/index.ts b/packages/core/tooling/index.ts index 9c62d5c7b..bcc9e04a1 100644 --- a/packages/core/tooling/index.ts +++ b/packages/core/tooling/index.ts @@ -17,6 +17,7 @@ import { print as esrapPrint } from 'esrap'; import ts, { type AdditionalComment } from 'esrap/languages/ts'; import * as acorn from 'acorn'; import { tsPlugin } from '@sveltejs/acorn-typescript'; +import { parse as svelteParse, type AST as SvelteAst, print as sveltePrint } from 'svelte/compiler'; import * as yaml from 'yaml'; type AdditionalCommentMap = WeakMap; @@ -41,6 +42,7 @@ export { export type { // html ChildNode as HtmlChildNode, + SvelteAst, // js TsEstree as AstTypes, @@ -216,3 +218,11 @@ export function parseYaml(content: string): ReturnType): string { return yaml.stringify(data, { singleQuote: true }); } + +export function parseSvelte(content: string): SvelteAst.Root { + return svelteParse(content, { modern: true }); +} + +export function serializeSvelte(ast: SvelteAst.Root): string { + return sveltePrint(ast).code; +} diff --git a/packages/core/tooling/parsers.ts b/packages/core/tooling/parsers.ts index b578453fd..b030a16b5 100644 --- a/packages/core/tooling/parsers.ts +++ b/packages/core/tooling/parsers.ts @@ -1,5 +1,4 @@ import * as utils from './index.ts'; -import MagicString from 'magic-string'; type ParseBase = { source: string; @@ -49,136 +48,13 @@ export function parseYaml( return { data, source, generateCode }; } -type SvelteGenerator = (code: { - script?: string; - module?: string; - css?: string; - template?: string; -}) => string; -export function parseSvelte( - source: string, - options?: { typescript?: boolean } -): { - script: ReturnType; - module: ReturnType; - css: ReturnType; - template: ReturnType; - generateCode: SvelteGenerator; -} { - // `xTag` captures the whole tag block (ex: ) - // `xSource` is the contents within the tags - const scripts = extractScripts(source); - // instance block - const { tag: scriptTag = '', src: scriptSource = '' } = - scripts.find(({ attrs }) => !attrs.includes('module')) ?? {}; - // module block - const { tag: moduleScriptTag = '', src: moduleSource = '' } = - scripts.find(({ attrs }) => attrs.includes('module')) ?? {}; - // style block - const { styleTag, cssSource } = extractStyle(source); - // rest of the template - // TODO: needs more testing - const templateSource = source - .replace(moduleScriptTag, '') - .replace(scriptTag, '') - .replace(styleTag, '') - .trim(); - - const script = parseScript(scriptSource); - const module = parseScript(moduleSource); - const css = parseCss(cssSource); - const template = parseHtml(templateSource); - - const generateCode: SvelteGenerator = (code) => { - const ms = new MagicString(source); - // TODO: this is imperfect and needs adjustments - if (code.script !== undefined) { - if (scriptSource.length === 0) { - const ts = options?.typescript ? ' lang="ts"' : ''; - const indented = code.script.split('\n').join('\n\t'); - const script = `\n\t${indented}\n\n\n`; - ms.prepend(script); - } else { - const { start, end } = locations(source, scriptSource); - const formatted = indent(code.script, ms.getIndentString()); - ms.update(start, end, formatted); - } - } - if (code.module !== undefined) { - if (moduleSource.length === 0) { - const ts = options?.typescript ? ' lang="ts"' : ''; - const indented = code.module.split('\n').join('\n\t'); - // TODO: make a svelte 5 variant - const module = `\n\t${indented}\n\n\n`; - ms.prepend(module); - } else { - const { start, end } = locations(source, moduleSource); - const formatted = indent(code.module, ms.getIndentString()); - ms.update(start, end, formatted); - } - } - if (code.css !== undefined) { - if (cssSource.length === 0) { - const indented = code.css.split('\n').join('\n\t'); - const style = `\n\n`; - ms.append(style); - } else { - const { start, end } = locations(source, cssSource); - const formatted = indent(code.css, ms.getIndentString()); - ms.update(start, end, formatted); - } - } - if (code.template !== undefined) { - if (templateSource.length === 0) { - ms.appendLeft(0, code.template); - } else { - const { start, end } = locations(source, templateSource); - ms.update(start, end, code.template); - } - } - return ms.toString(); - }; +export function parseSvelte(source: string): { ast: utils.SvelteAst.Root } & ParseBase { + const ast = utils.parseSvelte(source); + const generateCode = () => utils.serializeSvelte(ast); return { - script: { ...script, source: scriptSource }, - module: { ...module, source: moduleSource }, - css: { ...css, source: cssSource }, - template: { ...template, source: templateSource }, + ast, + source, generateCode }; } - -function locations(source: string, search: string): { start: number; end: number } { - const start = source.indexOf(search); - const end = start + search.length; - return { start, end }; -} - -function indent(content: string, indent: string): string { - const indented = indent + content.split('\n').join(`\n${indent}`); - return `\n${indented}\n`; -} - -// sourced from Svelte: https://github.com/sveltejs/svelte/blob/0d3d5a2a85c0f9eccb2c8dbbecc0532ec918b157/packages/svelte/src/compiler/preprocess/index.js#L253-L256 -const regexScriptTags = - /|'"/\s]+=(?:"[^"]*"|'[^']*'|[^>\s]+)|\s+[^=>'"/\s]+)*\s*)(?:\/>|>([\S\s]*?)<\/script>)/; -const regexStyleTags = - /|'"/\s]+=(?:"[^"]*"|'[^']*'|[^>\s]+)|\s+[^=>'"/\s]+)*\s*)(?:\/>|>([\S\s]*?)<\/style>)/; - -type Script = { tag: string; attrs: string; src: string }; -function extractScripts(source: string): Script[] { - const scripts = []; - const [tag = '', attrs = '', src = ''] = regexScriptTags.exec(source) ?? []; - if (tag) { - const stripped = source.replace(tag, ''); - scripts.push({ tag, attrs, src }, ...extractScripts(stripped)); - return scripts; - } - - return []; -} - -function extractStyle(source: string) { - const [styleTag = '', attributes = '', cssSource = ''] = regexStyleTags.exec(source) ?? []; - return { styleTag, attributes, cssSource }; -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f8ccbd66c..9192faee6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -184,6 +184,9 @@ importers: silver-fleece: specifier: ^1.2.1 version: 1.2.1 + svelte: + specifier: https://pkg.pr.new/sveltejs/svelte@1377c40 + version: https://pkg.pr.new/sveltejs/svelte@1377c40 yaml: specifier: ^2.8.1 version: 2.8.1 @@ -1339,6 +1342,9 @@ packages: esrap@1.4.9: resolution: {integrity: sha512-3OMlcd0a03UGuZpPeUC1HxR3nA23l+HEyCiZw3b3FumJIN9KphoGzDJKMXI1S72jVS1dsenDyQC0kJlO1U9E1g==} + esrap@2.1.0: + resolution: {integrity: sha512-yzmPNpl7TBbMRC5Lj2JlJZNPml0tzqoqP5B1JXycNUwtqma9AKCO0M2wHrdgsHcy1WRW7S9rJknAMtByg3usgA==} + esrap@https://pkg.pr.new/sveltejs/esrap@af12b38: resolution: {tarball: https://pkg.pr.new/sveltejs/esrap@af12b38} version: 2.1.0 @@ -2060,6 +2066,11 @@ packages: resolution: {integrity: sha512-5PEg+QQKce4t1qiOtVUhUS3AQRTtxJyGBTpxLcNWnr0Ve8q4r06bMo0Gv8uhtCPWlztZHoi3Ye7elLhu+PCTMg==} engines: {node: '>=18'} + svelte@https://pkg.pr.new/sveltejs/svelte@1377c40: + resolution: {tarball: https://pkg.pr.new/sveltejs/svelte@1377c40} + version: 5.34.9 + engines: {node: '>=18'} + synckit@0.11.8: resolution: {integrity: sha512-+XZ+r1XGIJGeQk3VvXhT6xx/VpbHsRzsTkGgF6E5RX9TTXD0118l87puaEBZ566FhqblC6U0d4XnubznJDm30A==} engines: {node: ^14.18.0 || >=16.0.0} @@ -3402,6 +3413,10 @@ snapshots: dependencies: '@jridgewell/sourcemap-codec': 1.5.5 + esrap@2.1.0: + dependencies: + '@jridgewell/sourcemap-codec': 1.5.5 + esrap@https://pkg.pr.new/sveltejs/esrap@af12b38: dependencies: '@jridgewell/sourcemap-codec': 1.5.5 @@ -4079,6 +4094,23 @@ snapshots: magic-string: 0.30.19 zimmerframe: 1.1.2 + svelte@https://pkg.pr.new/sveltejs/svelte@1377c40: + dependencies: + '@ampproject/remapping': 2.3.0 + '@jridgewell/sourcemap-codec': 1.5.5 + '@sveltejs/acorn-typescript': 1.0.5(acorn@8.15.0) + '@types/estree': 1.0.8 + acorn: 8.15.0 + aria-query: 5.3.2 + axobject-query: 4.1.0 + clsx: 2.1.1 + esm-env: 1.2.2 + esrap: 2.1.0 + is-reference: 3.0.3 + locate-character: 3.0.0 + magic-string: 0.30.19 + zimmerframe: 1.1.2 + synckit@0.11.8: dependencies: '@pkgr/core': 0.2.7 From ccf1ab3c9043e88fe7a3fbabdf122195f02b39c6 Mon Sep 17 00:00:00 2001 From: Manuel Serret Date: Sun, 26 Oct 2025 13:42:27 +0100 Subject: [PATCH 12/12] fix paraglide --- packages/addons/paraglide/index.ts | 52 ++++++++++++++++++------------ 1 file changed, 31 insertions(+), 21 deletions(-) diff --git a/packages/addons/paraglide/index.ts b/packages/addons/paraglide/index.ts index 02663e041..90298f38b 100644 --- a/packages/addons/paraglide/index.ts +++ b/packages/addons/paraglide/index.ts @@ -1,4 +1,3 @@ -import MagicString from 'magic-string'; import { colors, defineAddon, defineAddonOptions, log } from '@sveltejs/cli-core'; import { common, imports, variables, exports, kit as kitJs, vite } from '@sveltejs/cli-core/js'; import * as html from '@sveltejs/cli-core/html'; @@ -183,35 +182,46 @@ export default defineAddon({ // add usage example sv.file(`${kit.routesDirectory}/demo/paraglide/+page.svelte`, (content) => { - const { script, template, generateCode } = parseSvelte(content, { typescript }); - imports.addNamed(script.ast, { from: '$lib/paraglide/messages.js', imports: ['m'] }); - imports.addNamed(script.ast, { from: '$app/navigation', imports: ['goto'] }); - imports.addNamed(script.ast, { from: '$app/state', imports: ['page'] }); - imports.addNamed(script.ast, { from: '$lib/paraglide/runtime', imports: ['setLocale'] }); - - const scriptCode = new MagicString(script.generateCode()); + const { ast, generateCode } = parseSvelte(content); + + let scriptAst = ast.instance?.content; + if (!scriptAst) { + scriptAst = parseScript('').ast; + ast.instance = { + type: 'Script', + start: 0, + end: 0, + context: 'default', + attributes: [], + content: scriptAst + }; + } - const templateCode = new MagicString(template.source); + imports.addNamed(scriptAst, { imports: { m: 'm' }, from: '$lib/paraglide/messages.js' }); + imports.addNamed(scriptAst, { + imports: { + setLocale: 'setLocale' + }, + from: '$lib/paraglide/runtime' + }); // add localized message - templateCode.append("\n\n

{m.hello_world({ name: 'SvelteKit User' })}

\n"); + let templateCode = "

{m.hello_world({ name: 'SvelteKit User' })}

"; // add links to other localized pages, the first one is the default // language, thus it does not require any localized route const { validLanguageTags } = parseLanguageTagInput(options.languageTags); const links = validLanguageTags - .map( - (x) => - `${templateCode.getIndentString()}` - ) - .join('\n'); - templateCode.append(`
\n${links}\n
`); - - templateCode.append( - '

\nIf you use VSCode, install the Sherlock i18n extension for a better i18n experience.\n

' - ); + .map((x) => ``) + .join(''); + templateCode += `
${links}
`; - return generateCode({ script: scriptCode.toString(), template: templateCode.toString() }); + templateCode += + '

If you use VSCode, install the Sherlock i18n extension for a better i18n experience.

'; + + ast.fragment.nodes.push(...html.toSvelteFragment(templateCode)); + + return generateCode(); }); }