upgrade to svelte5

.changeset/eleven-spiders-knock.md

@@ -0,0 +1,5 @@
+---
+"@ryanatkn/gro": minor
+---
+
+upgrade to svelte@5 and esbuild@0.20

package.json

@@ -26,7 +26,7 @@
     "node": ">=20.10"
   },
   "scripts": {
-    "build": "rm -rf .gro dist && svelte-package && chmod +x ./dist/gro.js && npm link -f",
+    "build": "rm -rf .gro dist && svelte-kit sync && svelte-package && chmod +x ./dist/gro.js && npm link -f",
     "start": "gro dev",
     "test": "gro test"
   },
@@ -48,39 +48,40 @@
     "@ryanatkn/belt": "^0.20.10",
     "chokidar": "^3.6.0",
     "dotenv": "^16.4.5",
-    "es-module-lexer": "^1.5.0",
+    "es-module-lexer": "^1.5.3",
     "kleur": "^4.1.5",
     "mri": "^1.2.0",
     "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.2",
+    "prettier-plugin-svelte": "^3.2.3",
     "tiny-glob": "^0.2.9",
     "ts-morph": "^22.0.0",
     "tslib": "^2.6.2",
-    "zod": "^3.22.4"
+    "zod": "^3.23.8"
   },
   "peerDependencies": {
-    "esbuild": "^0.19",
-    "svelte": "*"
+    "esbuild": "^0.20",
+    "svelte": "^5.0.0-next.0"
   },
   "devDependencies": {
     "@changesets/changelog-git": "^0.2.0",
     "@changesets/types": "^6.0.0",
-    "@ryanatkn/eslint-config": "^0.1.0",
-    "@ryanatkn/fuz": "^0.92.0",
+    "@ryanatkn/eslint-config": "^0.1.2",
+    "@ryanatkn/fuz": "^0.101.2",
+    "@ryanatkn/moss": "^0.3.0",
     "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.5.4",
-    "@sveltejs/package": "^2.3.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@sveltejs/kit": "^2.5.10",
+    "@sveltejs/package": "^2.3.1",
+    "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^20.11.30",
-    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "@typescript-eslint/parser": "^7.4.0",
-    "esbuild": "^0.19.0",
+    "@types/node": "^20.12.12",
+    "@typescript-eslint/eslint-plugin": "^7.10.0",
+    "@typescript-eslint/parser": "^7.10.0",
+    "esbuild": "^0.20.2",
     "eslint": "^8.57.0",
-    "eslint-plugin-svelte": "^2.35.1",
-    "svelte": "^4.2.12",
-    "svelte-check": "^3.6.8",
-    "typescript": "^5.4.3",
+    "eslint-plugin-svelte": "^2.39.0",
+    "svelte": "^5.0.0-next.141",
+    "svelte-check": "^3.7.1",
+    "typescript": "^5.4.5",
     "uvu": "^0.5.6"
   },
   "eslintConfig": {
@@ -357,6 +358,10 @@
       "default": "./dist/src_json.js",
       "types": "./dist/src_json.d.ts"
     },
+    "./svelte_helpers.js": {
+      "default": "./dist/svelte_helpers.js",
+      "types": "./dist/svelte_helpers.d.ts"
+    },
     "./sveltekit_config.js": {
       "default": "./dist/sveltekit_config.js",
       "types": "./dist/sveltekit_config.d.ts"

src/fixtures/modules/Some_Test_Svelte.svelte

@@ -1 +1,9 @@
+<script lang="ts" context="module">
+	export const a = 'ok';
+</script>
+
+<script lang="ts">
+	// ...
+</script>
+
 Some_Test_Svelte.svelte contents

src/fixtures/modules/some_test_css.css

@@ -1,4 +1,5 @@
 /* some_test_css */
 .some_test_css {
+	--a: ok;
 	--some_test_property: red;
 }

src/fixtures/modules/some_test_js.js

@@ -0,0 +1,9 @@
+export const a = 'ok';
+
+export const some_test_js = '.js';
+
+export const some_test_fn = () => true;
+
+export class Some_Test_Class {
+	a = 1;
+}

src/fixtures/modules/some_test_json.json

@@ -1,3 +1,4 @@
 {
+	"a": "ok",
 	"some_test_json": ".json"
 }

src/fixtures/modules/some_test_server.ts

@@ -0,0 +1,5 @@
+import {Some_Test_Svelte_Ts} from './some_test_svelte_ts.svelte.js';
+
+export const some_test_server = 'some_test_server';
+
+export const Rexported_Some_Test_Svelte_Ts = Some_Test_Svelte_Ts;

src/fixtures/modules/some_test_svelte_js.svelte.js

@@ -0,0 +1,3 @@
+export class Some_Test_Svelte_Js {
+	a = $state('ok');
+}

src/fixtures/modules/some_test_svelte_ts.svelte.ts

@@ -0,0 +1,3 @@
+export class Some_Test_Svelte_Ts {
+	a = $state('ok');
+}

src/fixtures/modules/some_test_ts.ts

@@ -1,3 +1,5 @@
+export const a = 'ok';
+
 export const some_test_ts = '.ts';
 
 export const some_test_fn = (): boolean => true;

src/lib/esbuild_plugin_svelte.test.ts

@@ -0,0 +1,88 @@
+import {test} from 'uvu';
+import * as assert from 'uvu/assert';
+import * as esbuild from 'esbuild';
+import {readFile, rm} from 'node:fs/promises';
+
+import {esbuild_plugin_svelte} from './esbuild_plugin_svelte.js';
+
+test('build for the client', async () => {
+	const outfile = './src/fixtures/modules/some_test_server_bundle_DELETEME.js';
+	const built = await esbuild.build({
+		entryPoints: ['./src/fixtures/modules/some_test_server.ts'],
+		plugins: [esbuild_plugin_svelte()],
+		outfile,
+		format: 'esm',
+		platform: 'node',
+		packages: 'external',
+		bundle: true,
+		target: 'esnext',
+	});
+	assert.is(built.errors.length, 0);
+	assert.is(built.warnings.length, 0);
+
+	const built_output = await readFile(outfile, 'utf8');
+	assert.is(
+		built_output,
+		`// src/fixtures/modules/some_test_svelte_ts.svelte.ts
+import * as $ from "svelte/internal/client";
+var Some_Test_Svelte_Ts = class {
+  #a = $.source("ok");
+  get a() {
+    return $.get(this.#a);
+  }
+  set a(value) {
+    $.set(this.#a, $.proxy(value));
+  }
+};
+
+// src/fixtures/modules/some_test_server.ts
+var some_test_server = "some_test_server";
+var Rexported_Some_Test_Svelte_Ts = Some_Test_Svelte_Ts;
+export {
+  Rexported_Some_Test_Svelte_Ts,
+  some_test_server
+};
+`,
+	);
+
+	await rm(outfile); // TODO could be cleaner
+});
+
+test('build for the server', async () => {
+	const outfile = './src/fixtures/modules/some_test_client_bundle_DELETEME.js';
+	const built = await esbuild.build({
+		entryPoints: ['./src/fixtures/modules/some_test_server.ts'],
+		plugins: [esbuild_plugin_svelte({svelte_compile_module_options: {generate: 'server'}})],
+		outfile,
+		format: 'esm',
+		platform: 'node',
+		packages: 'external',
+		bundle: true,
+		target: 'esnext',
+	});
+	assert.is(built.errors.length, 0);
+	assert.is(built.warnings.length, 0);
+
+	const built_output = await readFile(outfile, 'utf8');
+	assert.is(
+		built_output,
+		`// src/fixtures/modules/some_test_svelte_ts.svelte.ts
+import * as $ from "svelte/internal/server";
+var Some_Test_Svelte_Ts = class {
+  a = "ok";
+};
+
+// src/fixtures/modules/some_test_server.ts
+var some_test_server = "some_test_server";
+var Rexported_Some_Test_Svelte_Ts = Some_Test_Svelte_Ts;
+export {
+  Rexported_Some_Test_Svelte_Ts,
+  some_test_server
+};
+`,
+	);
+
+	await rm(outfile); // TODO could be cleaner
+});
+
+test.run();

src/lib/esbuild_plugin_svelte.ts

@@ -1,52 +1,83 @@
 import type * as esbuild from 'esbuild';
-import {compile, preprocess, type CompileOptions, type PreprocessorGroup} from 'svelte/compiler';
+import {
+	compile,
+	compileModule,
+	preprocess,
+	type CompileOptions,
+	type ModuleCompileOptions,
+	type PreprocessorGroup,
+} from 'svelte/compiler';
 import {readFile} from 'node:fs/promises';
 import {relative} from 'node:path';
 import {cwd} from 'node:process';
 
+import {SVELTE_MATCHER, SVELTE_RUNES_MATCHER} from './svelte_helpers.js';
+
 export interface Options {
 	dir?: string;
-	// These `svelte_` prefixes are unnecessary and verbose
-	// but they align with the upstream APIs,
-	// so it's simpler overall like for project-wide searching.
 	svelte_compile_options?: CompileOptions;
+	svelte_compile_module_options?: ModuleCompileOptions;
 	svelte_preprocessors?: PreprocessorGroup | PreprocessorGroup[];
 }
 
-export const esbuild_plugin_svelte = ({
-	dir = cwd(),
-	svelte_compile_options,
-	svelte_preprocessors,
-}: Options): esbuild.Plugin => ({
-	name: 'svelte',
-	setup: (build) => {
-		build.onLoad({filter: /\.svelte$/u}, async ({path}) => {
-			let source = await readFile(path, 'utf8');
-			try {
-				const filename = relative(dir, path);
-				const preprocessed = svelte_preprocessors
-					? await preprocess(source, svelte_preprocessors, {filename})
-					: null;
-				// TODO handle preprocessor sourcemaps, same as in loader - merge?
-				if (preprocessed?.code) source = preprocessed?.code;
-				const {js, warnings} = compile(source, svelte_compile_options);
-				const contents = js.map ? js.code + '//# sourceMappingURL=' + js.map.toUrl() : js.code;
-				return {
-					contents,
-					warnings: warnings.map((w) => to_sveltekit_message(filename, source, w)),
-				};
-			} catch (err) {
-				return {errors: [to_sveltekit_message(path, source, err)]};
-			}
-		});
-	},
-});
+export const esbuild_plugin_svelte = (options: Options = {}): esbuild.Plugin => {
+	const {
+		dir = cwd(),
+		svelte_compile_options = {},
+		svelte_compile_module_options = {},
+		svelte_preprocessors,
+	} = options;
+	return {
+		name: 'svelte',
+		setup: (build) => {
+			build.onLoad({filter: SVELTE_RUNES_MATCHER}, async ({path}) => {
+				const source = await readFile(path, 'utf8');
+				try {
+					const filename = relative(dir, path);
+					const {js, warnings} = compileModule(source, {
+						filename,
+						...svelte_compile_module_options,
+					});
+					const contents = js.map ? js.code + '//# sourceMappingURL=' + js.map.toUrl() : js.code;
+					return {
+						contents,
+						warnings: warnings.map((w) => convert_svelte_message_to_esbuild(filename, source, w)),
+					};
+				} catch (err) {
+					return {errors: [convert_svelte_message_to_esbuild(path, source, err)]};
+				}
+			});
+			build.onLoad({filter: SVELTE_MATCHER}, async ({path}) => {
+				let source = await readFile(path, 'utf8');
+				try {
+					const filename = relative(dir, path);
+					const preprocessed = svelte_preprocessors
+						? await preprocess(source, svelte_preprocessors, {filename})
+						: null;
+					// TODO handle preprocessor sourcemaps, same as in loader - merge?
+					if (preprocessed?.code) source = preprocessed?.code;
+					const {js, warnings} = compile(source, {
+						filename,
+						...svelte_compile_options,
+					});
+					const contents = js.map ? js.code + '//# sourceMappingURL=' + js.map.toUrl() : js.code;
+					return {
+						contents,
+						warnings: warnings.map((w) => convert_svelte_message_to_esbuild(filename, source, w)),
+					};
+				} catch (err) {
+					return {errors: [convert_svelte_message_to_esbuild(path, source, err)]};
+				}
+			});
+		},
+	};
+};
 
 /**
  * Following the example in the esbuild docs:
  * https://esbuild.github.io/plugins/#svelte-plugin
  */
-const to_sveltekit_message = (
+const convert_svelte_message_to_esbuild = (
 	path: string,
 	source: string,
 	{message, start, end}: SvelteError,

src/lib/esbuild_plugin_sveltekit_local_imports.ts

@@ -25,7 +25,6 @@ export const esbuild_plugin_sveltekit_local_imports = (): esbuild.Plugin => ({
 		}));
 		build.onLoad({filter: /.*/u, namespace: 'sveltekit_local_imports_js'}, async ({path}) => ({
 			contents: await readFile(path),
-			loader: 'js',
 			resolveDir: dirname(path),
 		}));
 	},

src/lib/esbuild_plugin_sveltekit_shim_app.ts

@@ -28,15 +28,13 @@ export const esbuild_plugin_sveltekit_shim_app = ({
 			namespace: 'sveltekit_shim_app_paths',
 		}));
 		build.onLoad({filter: /.*/u, namespace: 'sveltekit_shim_app_paths'}, () => ({
-			loader: 'js',
 			contents: render_sveltekit_shim_app_paths(base_url, assets_url),
 		}));
 		build.onResolve({filter: /^\$app\/environment$/u}, ({path}) => ({
 			path: sveltekit_shim_app_specifiers.get(path)!,
 			namespace: 'sveltekit_shim_app_environment',
 		}));
 		build.onLoad({filter: /.*/u, namespace: 'sveltekit_shim_app_environment'}, () => ({
-			loader: 'js',
 			contents: render_sveltekit_shim_app_environment(dev),
 		}));
 	},

src/lib/gro_plugin_server.ts

@@ -143,6 +143,11 @@ export const gro_plugin_server = ({
 				svelte_preprocessors,
 			} = await init_sveltekit_config(sveltekit_config ?? dir);
 
+			// TODO feels hacky
+			if (svelte_compile_options.generate === undefined) {
+				svelte_compile_options.generate = 'server';
+			}
+
 			const {outbase, outdir, outname} = outpaths(dev);
 
 			const server_outpath = join(outdir, outname);