make paraglide work

Author: manuel3108

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}<a href="/demo/${path}">${path}</a>`;
-	return generateCode({ template: src });
+	ast.fragment.nodes.push(...toSvelteFragment(`<a href="/demo/${path}">${path}</a>`));
+
+	return generateCode();
 }
 
 /**

packages/addons/paraglide/index.ts

@@ -1,4 +1,3 @@
-import MagicString from 'magic-string';
 import { colors, defineAddon, defineAddonOptions, log } from '@sveltejs/cli-core';
 import {
 	array,
@@ -187,38 +186,44 @@ export default defineAddon({
 
 			// add usage example
 			sv.file(`${kit.routesDirectory}/demo/paraglide/+page.svelte`, (content) => {
-				const { script, template, generateCode } = parseSvelte(content, { typescript });
+				console.log(content);
+				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
+					};
+				}
 
-				imports.addNamed(script.ast, '$lib/paraglide/messages.js', { m: 'm' });
-				imports.addNamed(script.ast, '$app/navigation', { goto: 'goto' });
-				imports.addNamed(script.ast, '$app/state', { page: 'page' });
-				imports.addNamed(script.ast, '$lib/paraglide/runtime', {
+				imports.addNamed(scriptAst, '$lib/paraglide/messages.js', { m: 'm' });
+				imports.addNamed(scriptAst, '$lib/paraglide/runtime', {
 					setLocale: 'setLocale'
 				});
 
-				const scriptCode = new MagicString(script.generateCode());
-
-				const templateCode = new MagicString(template.source);
-
 				// add localized message
-				templateCode.append("\n\n<h1>{m.hello_world({ name: 'SvelteKit User' })}</h1>\n");
+				let templateCode = "<h1>{m.hello_world({ name: 'SvelteKit User' })}</h1>";
 
 				// 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()}<button onclick={() => setLocale('${x}')}>${x}</button>`
-					)
-					.join('\n');
-				templateCode.append(`<div>\n${links}\n</div>`);
-
-				templateCode.append(
-					'<p>\nIf you use VSCode, install the <a href="https://marketplace.visualstudio.com/items?itemName=inlang.vs-code-extension" target="_blank">Sherlock i18n extension</a> for a better i18n experience.\n</p>'
-				);
+					.map((x) => `<button onclick={() => setLocale('${x}')}>${x}</button>`)
+					.join('');
+				templateCode += `<div>${links}</div>`;
 
-				return generateCode({ script: scriptCode.toString(), template: templateCode.toString() });
+				templateCode +=
+					'<p>If you use VSCode, install the <a href="https://marketplace.visualstudio.com/items?itemName=inlang.vs-code-extension" target="_blank">Sherlock i18n extension</a> for a better i18n experience.</p>';
+
+				ast.fragment.nodes.push(...html.toSvelteFragment(templateCode));
+
+				return generateCode();
 			});
 		}