Svelte 4 & auto deno imports (#46)

* chore(IDE): VSCode default formatter * feat(svelte): move to svelte@4 use the deno esbuild plugins to handle npm specifiers and remove the need for a custom svelte/internal plugin * fix: use patched version for GHA renaming non-empty folder throws os error 39 * feat: ignore cache folder * chore(prettier): move to v3 doctype is lowercase, now * feat(svelte): support extra modules it’s now easy to animate!
mxdvl · Aug 28, 2023 · 504dba2 · 504dba2
1 parent 3e4d5c5
commit 504dba2
Show file tree

Hide file tree

Showing 12 changed files with 291 additions and 50 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,5 @@ build
 
 components/Island.svelte
 .DS_Store
+
+.cache
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -11,6 +11,12 @@
 	"[jsonc]": {
 		"editor.defaultFormatter": "denoland.vscode-deno"
 	},
+	"[javascript]": {
+		"editor.defaultFormatter": "denoland.vscode-deno"
+	},
+	"[typescript]": {
+		"editor.defaultFormatter": "denoland.vscode-deno"
+	},
 	"cSpell.words": [
 		"hydrator",
 		"mononykus"

diff --git a/README.md b/README.md
@@ -31,7 +31,7 @@ This is a Work-in-progress. If you want a production framework, look at
 - [x] Figure out how to build `Island.svelte` cleanly
 - [x] Figure out how to serve `islands.js` cleanly
 - [x] Handle nested islands
-- [ ] Allow imports of `svelte/store`, `svelte/motion`, `svelte/transition`,
+- [x] Allow imports of `svelte/store`, `svelte/motion`, `svelte/transition`,
       `svelte/animate` and `svelte/easing`, but not `svelte/register`.
 
 ## About the name Mononykus

diff --git a/deno.lock b/deno.lock
diff --git a/src/_site/components/Bee.island.svelte b/src/_site/components/Bee.island.svelte
@@ -0,0 +1,29 @@
+<script>
+  import { onMount } from "svelte/internal";
+  import { spring } from "svelte/motion";
+
+  const coords = spring({ x: 50, y: 50 });
+
+  onMount(() => {
+    coords.set({ x: 100, y: 200 }, { hard: true });
+
+    setInterval(() => {
+      coords.set(
+        { x: Math.random() * 600, y: Math.random() * 600 },
+        { soft: 400 }
+      );
+    }, 600);
+  });
+</script>
+
+<aside style={`transform: translate3D(${$coords.x}px,${$coords.y}px,0);`}>
+  🐝
+</aside>
+
+<style>
+  aside {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+</style>
diff --git a/src/_site/routes/index.svelte b/src/_site/routes/index.svelte
@@ -3,6 +3,7 @@
   import HelloFriend from "../components/HelloFriend.island.svelte";
   import Counter from "../components/Counter.island.svelte";
   import Body from "../components/Body.svelte";
+  import Bee from "../components/Bee.island.svelte";
 </script>
 
 <svelte:head>
@@ -48,6 +49,8 @@
     <div class="island">
       <Counter />
     </div>
+
+    <Bee />
   </main>
 </Body>
 

diff --git a/src/build.test.ts b/src/build.test.ts
@@ -50,7 +50,7 @@ Deno.test({
 		await process.output();
 
 		assert(html.startsWith(
-			"<!DOCTYPE html>",
+			"<!doctype html>",
 		));
 		assert(html.includes(
 			"<title>Mononykus – Deno + Svelte</title>",

diff --git a/src/build.ts b/src/build.ts
@@ -1,6 +1,8 @@
-import * as esbuild from "https://deno.land/x/[email protected]/mod.js";
-import { svelte_components } from "./esbuild_plugins/svelte_components.ts";
-import { svelte_internal } from "./esbuild_plugins/svelte_internal.ts";
+import * as esbuild from "https://deno.land/x/[email protected]/mod.js";
+import {
+	svelte_components,
+	VERSION,
+} from "./esbuild_plugins/svelte_components.ts";
 import { build_routes } from "./esbuild_plugins/build_routes.ts";
 import { ensureDir } from "https://deno.land/[email protected]/fs/ensure_dir.ts";
 import { parse } from "https://deno.land/[email protected]/flags/mod.ts";
@@ -10,6 +12,7 @@ import { create_handler } from "./server.ts";
 import { globToRegExp } from "https://deno.land/[email protected]/path/glob.ts";
 import { copy } from "https://deno.land/[email protected]/fs/copy.ts";
 import { normalize } from "https://deno.land/[email protected]/path/mod.ts";
+import { denoPlugins } from "https://raw.githubusercontent.com/mxdvl/esbuild_deno_loader/patch-1/mod.ts";
 
 const slashify = (path: string) => normalize(path + "/");
 
@@ -39,6 +42,21 @@ const options: Options = {
 	minify: !flags.watch || flags.minify,
 };
 
+const importMap = {
+	imports: {
+		"svelte": `npm:svelte@${VERSION}`,
+		"svelte/internal": `npm:svelte@${VERSION}/internal`,
+		"svelte/internal/disclose-version":
+			`npm:svelte@${VERSION}/internal/disclose-version`,
+		"svelte/easing": `npm:svelte@${VERSION}/easing`,
+		"svelte/motion": `npm:svelte@${VERSION}/motion`,
+		"svelte/register": `npm:svelte@${VERSION}/register`,
+		"svelte/store": `npm:svelte@${VERSION}/store`,
+		"svelte/transition": `npm:svelte@${VERSION}/transition`,
+	},
+};
+const importMapURL = `data:application/json,${JSON.stringify(importMap)}`;
+
 // clean out old builds, if they exist
 const clean = async (out_dir: Options["out_dir"]) => {
 	try {
@@ -86,7 +104,7 @@ const rebuild = async ({
 	const baseESBuildConfig = {
 		logLevel: "info",
 		format: "esm",
-		minify: minify,
+		minify,
 		bundle: true,
 	} as const satisfies Partial<esbuild.BuildOptions>;
 
@@ -95,7 +113,7 @@ const rebuild = async ({
 		write: false,
 		plugins: [
 			svelte_components(site_dir, base),
-			svelte_internal,
+			...denoPlugins({ importMapURL }),
 			build_routes,
 		],
 		outdir: out_dir,
@@ -107,7 +125,7 @@ const rebuild = async ({
 		write: true,
 		plugins: [
 			svelte_components(site_dir, base),
-			svelte_internal,
+			...denoPlugins({ importMapURL }),
 		],
 		outdir: out_dir + "components/",
 		splitting: true,

diff --git a/src/esbuild_plugins/build_routes.ts b/src/esbuild_plugins/build_routes.ts
@@ -1,4 +1,4 @@
-import type { Plugin } from "https://deno.land/x/[email protected].16/mod.js";
+import type { Plugin } from "https://deno.land/x/[email protected].19/mod.js";
 import { dirname } from "https://deno.land/[email protected]/path/mod.ts";
 import { ensureDir } from "https://deno.land/[email protected]/fs/ensure_dir.ts";
 import { get_route_html } from "./get_route_html.ts";
@@ -48,7 +48,7 @@ export const build_routes: Plugin = {
 
 				await Deno.writeTextFile(
 					dist_path,
-					get_route_html({ html, css, head: deduped_head }),
+					await get_route_html({ html, css, head: deduped_head }),
 				);
 			}));
 

diff --git a/src/esbuild_plugins/get_route_html.ts b/src/esbuild_plugins/get_route_html.ts
@@ -1,5 +1,4 @@
-// @ts-expect-error -- the package is untyped
-import { format } from "npm:prettier";
+import { format } from "npm:[email protected]";
 
 interface TemplateOptions {
 	css: string;
@@ -27,7 +26,7 @@ export const get_route_html = ({ html, css, head }: {
 	html: string;
 	css: string;
 	head: string;
-}) => {
+}): Promise<string> => {
 	const page = template({
 		css,
 		head,
@@ -46,6 +45,6 @@ export const get_route_html = ({ html, css, head }: {
 		);
 	} catch (_) {
 		console.warn("Could not format the html");
-		return page;
+		return Promise.resolve(page);
 	}
 };
diff --git a/src/esbuild_plugins/svelte_components.ts b/src/esbuild_plugins/svelte_components.ts
@@ -3,10 +3,10 @@ import {
 	dirname,
 	resolve,
 } from "https://deno.land/[email protected]/path/mod.ts";
-import type { Plugin } from "https://deno.land/x/[email protected].16/mod.js";
+import type { Plugin } from "https://deno.land/x/[email protected].19/mod.js";
 import { normalize } from "https://deno.land/[email protected]/path/mod.ts";
-import { compile } from "npm:svelte@3.58/compiler";
-import type { ComponentType } from "npm:svelte@3.58";
+import { compile, VERSION } from "npm:svelte@4.2.0/compiler";
+import type { ComponentType } from "npm:svelte@4.2.0";
 
 const filter = /\.svelte$/;
 const name = "mononykus/svelte";
@@ -44,7 +44,7 @@ export const svelte_components = (
 	setup(build) {
 		const generate = build.initialOptions.write ? "dom" : "ssr";
 
-		build.onResolve({ filter }, ({ path, kind, importer }) => {
+		build.onResolve({ filter }, ({ path, kind, importer, resolveDir }) => {
 			if (generate === "dom") {
 				if (
 					kind === "import-statement" &&
@@ -56,6 +56,10 @@ export const svelte_components = (
 						path: path.replace(/\.svelte$/, ".js"),
 						external: true,
 					};
+				} else {
+					return {
+						path: resolve(resolveDir, path),
+					};
 				}
 			} else {
 				if (
@@ -67,6 +71,10 @@ export const svelte_components = (
 						path: resolve(dirname(importer), path),
 						suffix: ssr_island,
 					};
+				} else {
+					return {
+						path: resolve(resolveDir, path),
+					};
 				}
 			}
 		});
@@ -88,7 +96,7 @@ export const svelte_components = (
 
 			const { js: { code } } = compile(source, {
 				generate,
-				css: "injected",
+				css: "external",
 				cssHash: ({ hash, css }) => `◖${hash(css)}◗`,
 				hydratable: generate === "dom",
 				enableSourcemap: false,
@@ -133,3 +141,5 @@ export const svelte_components = (
 		});
 	},
 });
+
+export { VERSION };
diff --git a/src/esbuild_plugins/svelte_internal.ts b/src/esbuild_plugins/svelte_internal.ts
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,5 @@ build

		components/Island.svelte
		.DS_Store

		.cache