chore: drop html deps (#840)

manuel3108 · jycouet · web-flow · commit f5572e571c40 · 2025-12-11T22:04:56.000+01:00
Co-authored-by: jycouet &lt;jycouet@gmail.com&gt;
diff --git a/packages/sv/lib/addons/_tests/all-addons/test.ts b/packages/sv/lib/addons/_tests/all-addons/test.ts
@@ -2,7 +2,7 @@ import process from 'node:process';
 import { expect } from '@playwright/test';
 import { setupTest } from '../_setup/suite.ts';
 import { officialAddons } from '../../index.ts';
-import type { AddonMap, OptionMap } from 'sv';
+import type { AddonMap, OptionMap } from '../../../addons/install.ts';
 
 const windowsCI = process.env.CI && process.platform === 'win32';
 const addons = Object.values(officialAddons).reduce<AddonMap>((addonMap, addon) => {
diff --git a/packages/sv/lib/addons/_tests/mdsvex/test.ts b/packages/sv/lib/addons/_tests/mdsvex/test.ts
@@ -4,6 +4,7 @@ import { expect } from '@playwright/test';
 import { parseSvelte } from '../../../core/tooling/parsers.ts';
 import { imports } from '../../../core/tooling/js/index.ts';
 import * as svelte from '../../../core/tooling/svelte/index.ts';
+import * as html from '../../../core/tooling/html/index.ts';
 import { setupTest } from '../_setup/suite.ts';
 import { svxFile } from './fixtures.ts';
 import mdsvex from '../../mdsvex/index.ts';
@@ -44,25 +45,8 @@ function addFixture(cwd: string, variant: string) {
 	const scriptAst = svelte.ensureScript(ast);
 	imports.addDefault(scriptAst, { from: './Demo.svx', as: 'Demo' });
 
-	ast.fragment.nodes.push({
-		type: 'RegularElement',
-		name: 'div',
-		attributes: [
-			{
-				type: 'Attribute',
-				name: 'class',
-				value: [{ type: 'Text', data: 'mdsvex', raw: 'mdsvex', start: 0, end: 0 }],
-				start: 0,
-				end: 0
-			}
-		],
-		fragment: {
-			type: 'Fragment',
-			nodes: svelte.toFragment('<Demo />')
-		},
-		start: 0,
-		end: 0
-	});
+	const div = html.createElement('div', { class: 'mdsvex' });
+	div.fragment.nodes = svelte.toFragment('<Demo />');
 
 	const content = generateCode();
 
diff --git a/packages/sv/lib/addons/paraglide/index.ts b/packages/sv/lib/addons/paraglide/index.ts
@@ -152,24 +152,21 @@ export default defineAddon({
 			return generateCode();
 		});
 
-		// add the text-direction and lang attribute placeholders to app.html
+		// add the lang attribute placeholder to app.html
 		sv.file('src/app.html', (content) => {
 			const { ast, generateCode } = parseHtml(content);
 
-			const htmlNode = ast.children.find(
-				(child): child is html.HtmlElement =>
-					child.type === html.HtmlElementType.Tag && child.name === 'html'
+			const htmlNode = ast.nodes.find(
+				(child): child is html.SvelteAst.RegularElement =>
+					child.type === 'RegularElement' && child.name === 'html'
 			);
 			if (!htmlNode) {
 				log.warn(
 					"Could not find <html> node in app.html. You'll need to add the language placeholder manually"
 				);
 				return generateCode();
 			}
-			htmlNode.attribs = {
-				...htmlNode.attribs,
-				lang: '%paraglide.lang%'
-			};
+			html.addAttribute(htmlNode, 'lang', '%paraglide.lang%');
 
 			return generateCode();
 		});
diff --git a/packages/sv/lib/cli/tests/snapshots/create-with-all-addons/src/app.html b/packages/sv/lib/cli/tests/snapshots/create-with-all-addons/src/app.html
@@ -2,7 +2,10 @@
 <html lang="%paraglide.lang%">
 	<head>
 		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1"
+		/>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
diff --git a/packages/sv/lib/core/tests/html/common/add-attribute/input.html b/packages/sv/lib/core/tests/html/common/add-attribute/input.html
@@ -0,0 +1 @@
+<div></div>
diff --git a/packages/sv/lib/core/tests/html/common/add-attribute/output.html b/packages/sv/lib/core/tests/html/common/add-attribute/output.html
diff --git a/packages/sv/lib/core/tests/html/common/add-attribute/run.ts b/packages/sv/lib/core/tests/html/common/add-attribute/run.ts
@@ -0,0 +1,6 @@
+import { addAttribute, type SvelteAst } from '../../../../tooling/html/index.ts';
+
+export function run(ast: SvelteAst.Fragment): void {
+	const element = ast.nodes[0] as SvelteAst.RegularElement;
+	addAttribute(element, 'class', 'foo');
+}
diff --git a/packages/sv/lib/core/tests/html/common/create-div/output.html b/packages/sv/lib/core/tests/html/common/create-div/output.html
diff --git a/packages/sv/lib/core/tests/html/common/create-div/run.ts b/packages/sv/lib/core/tests/html/common/create-div/run.ts
diff --git a/packages/sv/lib/core/tests/html/common/create-element/run.ts b/packages/sv/lib/core/tests/html/common/create-element/run.ts
@@ -2,11 +2,11 @@ import {
 	createElement,
 	appendElement,
 	insertElement,
-	type HtmlDocument
+	type SvelteAst
 } from '../../../../tooling/html/index.ts';
 
-export function run(ast: HtmlDocument): void {
+export function run(ast: SvelteAst.Fragment): void {
 	const emptySpan = createElement('span');
-	insertElement(ast.childNodes, emptySpan);
-	appendElement(ast.childNodes, emptySpan);
+	insertElement(ast, emptySpan);
+	appendElement(ast, emptySpan);
 }
diff --git a/packages/sv/lib/core/tests/html/common/from-raw/run.ts b/packages/sv/lib/core/tests/html/common/from-raw/run.ts
@@ -1,5 +1,5 @@
-import { addFromRawHtml, type HtmlDocument } from '../../../../tooling/html/index.ts';
+import { addFromRawHtml, type SvelteAst } from '../../../../tooling/html/index.ts';
 
-export function run(ast: HtmlDocument): void {
-	addFromRawHtml(ast.childNodes, '<div style="display: flex" data-foo="bar">foo</div>');
+export function run(ast: SvelteAst.Fragment): void {
+	addFromRawHtml(ast, '<div style="display: flex" data-foo="bar">foo</div>');
 }
diff --git a/packages/sv/lib/core/tooling/html/index.ts b/packages/sv/lib/core/tooling/html/index.ts
@@ -1,38 +1,68 @@
-import {
-	type HtmlChildNode,
-	type HtmlDocument,
-	HtmlElement,
-	HtmlElementType,
-	parseHtml
-} from '../index.ts';
-
-export { HtmlElement, HtmlElementType };
-export type { HtmlDocument };
-
-export function createDiv(attributes: Record<string, string> = {}): HtmlElement {
-	return createElement('div', attributes);
-}
+import { parseHtml, type SvelteAst } from '../index.ts';
+
+export type { SvelteAst };
 
 export function createElement(
 	tagName: string,
 	attributes: Record<string, string> = {}
-): HtmlElement {
-	const element = new HtmlElement(tagName, {}, undefined, HtmlElementType.Tag);
-	element.attribs = attributes;
+): SvelteAst.RegularElement {
+	const element: SvelteAst.RegularElement = {
+		type: 'RegularElement',
+		name: tagName,
+		attributes: [],
+		fragment: {
+			type: 'Fragment',
+			nodes: []
+		},
+		name_loc: { start: { column: 0, line: 0 }, end: { column: 0, line: 0 } },
+		start: 0,
+		end: 0
+	};
+
+	for (const [name, value] of Object.entries(attributes)) {
+		addAttribute(element, name, value);
+	}
+
 	return element;
 }
 
-export function insertElement(childNodes: HtmlChildNode[], elementToInsert: HtmlChildNode): void {
-	childNodes.splice(0, 0, elementToInsert);
+export function addAttribute(element: SvelteAst.RegularElement, name: string, value: string): void {
+	let existing = element.attributes.find(
+		(attr): attr is SvelteAst.Attribute => attr.type === 'Attribute' && attr.name === name
+	);
+
+	if (!existing) {
+		existing = {
+			type: 'Attribute',
+			name,
+			value: [],
+			start: 0,
+			end: 0,
+			name_loc: { start: { column: 0, line: 0 }, end: { column: 0, line: 0 } }
+		};
+		element.attributes.push(existing);
+	}
+
+	existing.value = [{ type: 'Text', data: value, raw: value, start: 0, end: 0 }];
+}
+
+export function insertElement(
+	fragment: SvelteAst.Fragment,
+	elementToInsert: SvelteAst.Fragment['nodes'][0]
+): void {
+	fragment.nodes.splice(0, 0, elementToInsert);
 }
 
-export function appendElement(childNodes: HtmlChildNode[], elementToAppend: HtmlChildNode): void {
-	childNodes.push(elementToAppend);
+export function appendElement(
+	fragment: SvelteAst.Fragment,
+	elementToAppend: SvelteAst.Fragment['nodes'][0]
+): void {
+	fragment.nodes.push(elementToAppend);
 }
 
-export function addFromRawHtml(childNodes: HtmlChildNode[], html: string): void {
+export function addFromRawHtml(fragment: SvelteAst.Fragment, html: string): void {
 	const document = parseHtml(html);
-	for (const childNode of document.childNodes) {
-		childNodes.push(childNode);
+	for (const childNode of document.nodes) {
+		fragment.nodes.push(childNode);
 	}
 }
diff --git a/packages/sv/lib/core/tooling/index.ts b/packages/sv/lib/core/tooling/index.ts
@@ -1,8 +1,5 @@
 import * as Walker from 'zimmerframe';
 import type { TsEstree } from './js/ts-estree.ts';
-import { Document, Element, type ChildNode } from 'domhandler';
-import { ElementType, parseDocument } from 'htmlparser2';
-import serializeDom from 'dom-serializer';
 import * as fleece from 'silver-fleece';
 import { print as esrapPrint } from 'esrap';
 import ts from 'esrap/languages/ts';
@@ -13,18 +10,12 @@ import * as yaml from 'yaml';
 import type { BaseNode } from 'estree';
 
 export {
-	// html
-	Document as HtmlDocument,
-	Element as HtmlElement,
-	ElementType as HtmlElementType,
-
 	// ast walker
 	Walker
 };
 
 export type {
 	// html
-	ChildNode as HtmlChildNode,
 	SvelteAst,
 
 	// js
@@ -122,15 +113,12 @@ export function serializeCss(ast: SvelteAst.CSS.StyleSheet): string {
 	return result;
 }
 
-export function parseHtml(content: string): Document {
-	return parseDocument(content, {
-		recognizeSelfClosing: true,
-		lowerCaseTags: false
-	});
+export function parseHtml(content: string): SvelteAst.Fragment {
+	return parseSvelte(content).fragment;
 }
 
-export function serializeHtml(ast: Document): string {
-	return serializeDom(ast, { encodeEntities: 'utf8', selfClosingTags: true });
+export function serializeHtml(ast: SvelteAst.Fragment): string {
+	return serializeSvelte(ast);
 }
 
 export function stripAst<T>(node: T, propsToRemove: string[]): T {
@@ -297,6 +285,6 @@ export function parseSvelte(content: string): SvelteAst.Root {
 	return svelteParse(content, { modern: true });
 }
 
-export function serializeSvelte(ast: SvelteAst.Root): string {
+export function serializeSvelte(ast: SvelteAst.SvelteNode): string {
 	return sveltePrint(ast).code;
 }
diff --git a/packages/sv/lib/core/tooling/parsers.ts b/packages/sv/lib/core/tooling/parsers.ts
@@ -22,7 +22,7 @@ export function parseCss(source: string): { ast: utils.SvelteAst.CSS.StyleSheet
 	return { ast, source, generateCode };
 }
 
-export function parseHtml(source: string): { ast: utils.HtmlDocument } & ParseBase {
+export function parseHtml(source: string): { ast: utils.SvelteAst.Fragment } & ParseBase {
 	const ast = utils.parseHtml(source);
 	const generateCode = () => utils.serializeHtml(ast);
 
diff --git a/packages/sv/package.json b/packages/sv/package.json
@@ -21,11 +21,11 @@
 	"bin": "./dist/bin.mjs",
 	"exports": {
 		".": {
-			"types": "./dist/lib/index.d.ts",
+			"types": "./dist/index.d.mts",
 			"default": "./dist/lib/index.mjs"
 		},
 		"./testing": {
-			"types": "./dist/lib/testing.d.ts",
+			"types": "./dist/testing.d.mts",
 			"default": "./dist/lib/testing.mjs"
 		},
 		"./core": {
@@ -45,20 +45,16 @@
 		"decircular": "^1.0.0",
 		"dedent": "^1.7.0",
 		"degit": "^2.8.4",
-		"dom-serializer": "^2.0.0",
-		"domhandler": "^5.0.3",
-		"domutils": "^3.2.2",
 		"empathic": "^1.1.0",
 		"esrap": "^2.2.1",
 		"gitignore-parser": "^0.0.2",
-		"htmlparser2": "^9.1.0",
 		"magic-string": "^0.30.21",
 		"package-manager-detector": "^0.2.11",
 		"picocolors": "^1.1.1",
 		"ps-tree": "^1.2.0",
 		"silver-fleece": "^1.2.1",
 		"sucrase": "^3.35.0",
-		"svelte": "^5.45.7",
+		"svelte": "^5.45.9",
 		"tiny-glob": "^0.2.9",
 		"tinyexec": "^0.3.2",
 		"valibot": "^0.41.0",
diff --git a/packages/sv/tsconfig.json b/packages/sv/tsconfig.json
@@ -1,4 +1,15 @@
 {
 	"extends": "../../tsconfig.json",
-	"include": ["bin.ts"]
+	"include": ["bin.ts", "lib/**/*.ts"],
+	"exclude": [
+		"dist/**",
+		"lib/core/tests/**/input.ts",
+		"lib/core/tests/**/output.ts",
+		"lib/create/templates/demo/**",
+		"lib/create/shared/vite.config.ts",
+		"lib/cli/tests/snapshots/**"
+	],
+	"compilerOptions": {
+		"checkJs": false
+	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
