wip: more explorations

src/_site/components/Candies.svelte

@@ -0,0 +1,5 @@
+<script>
+  import Orange from "./Orange.island.svelte";
+</script>
+
+<Orange />

src/_site/components/Candy.island.svelte

@@ -0,0 +1,8 @@
+<script>
+  import Candies from "./Candies.svelte";
+</script>
+
+<blockquote>
+  🍭 Yum
+  <Candies />
+</blockquote>

src/_site/components/Orange.island.svelte

@@ -0,0 +1,19 @@
+<script>
+  let opacity = 0.5;
+
+  setInterval(() => {
+    opacity = Math.random();
+  }, 1200);
+
+  console.log("hello from Orange.island.svelte");
+</script>
+
+<p style={`--opacity:${opacity}`}>🍊 naranja</p>
+
+<style>
+  p {
+    opacity: var(--opacity);
+    color: orange;
+    transition: opacity 600ms;
+  }
+</style>

src/_site/routes/nested-islands.svelte

@@ -1,9 +1,15 @@
 <script>
-	import RedThenBlue from '../components/RedThenBlue.island.svelte'
-	import GreenThenPink from '../components/GreenThenPink.island.svelte'
+  import RedThenBlue from "../components/RedThenBlue.island.svelte";
+  import GreenThenPink from "../components/GreenThenPink.island.svelte";
+  import Orange from "../components/Orange.island.svelte";
+  import Candy from "../components/Candy.island.svelte";
+  import Candies from "../components/Candies.svelte";
 </script>
 
 Example of nested islands.
 
 <RedThenBlue />
 <GreenThenPink />
+<Orange />
+<Candy />
+<Candies />

src/esbuild_plugins/svelte.ts

@@ -1,8 +1,12 @@
-import { basename } from "https://deno.land/[email protected]/path/mod.ts";
+import {
+	basename,
+	dirname,
+	resolve,
+} from "https://deno.land/[email protected]/path/mod.ts";
 import type { Plugin } from "https://deno.land/x/[email protected]/mod.js";
 import { compile, preprocess } from "npm:svelte/compiler";
 
-const filter = /\.svelte$/;
+const filter = /\.svelte(\?\w+)?$/;
 
 interface SvelteOptions {
 	site_dir: string;
@@ -21,7 +25,15 @@ export const svelte = (
 	setup(build) {
 		const generate = build.initialOptions.write ? "dom" : "ssr";
 
-		build.onResolve({ filter }, ({ path, kind }) => {
+		build.onResolve({ filter }, ({ path, kind, importer }) => {
+			if (generate === "ssr") {
+				console.log("this item", {
+					path,
+					importer,
+					absolute: resolve(dirname(importer)),
+				});
+			}
+
 			const is_island_entry_point = generate === "dom" &&
 				kind === "import-statement" &&
 				// matches our `components/**/*.island.svelte`,
@@ -41,7 +53,7 @@ export const svelte = (
 			const source = await Deno.readTextFile(path);
 			const is_island = filename.endsWith(".island.svelte");
 
-			const processed = is_island && generate === "ssr"
+			const processed = is_island && generate === "ssr" && suffix !== "?clawed"
 				? (await preprocess(source, {
 					markup: ({ content }) => {
 						let processed = content;
@@ -57,8 +69,7 @@ export const svelte = (
 							processed = non_html.join("") +
 								`<one-claw file="/${
 									base_path +
-									path.split(site_dir).at(-1)?.replace("components/", "")
-										.replace(/\.svelte$/, ".js")
+									basename(path).replace(/\.svelte$/, ".js")
 								}" name="${
 									name(filename)
 								}" props={JSON.stringify($$props)} style="display:contents;">${html.trim()}</one-claw>`;
@@ -74,7 +85,7 @@ export const svelte = (
 				generate,
 				css: "injected",
 				cssHash: ({ hash, css }) => `◖${hash(css)}◗`,
-				hydratable: generate === "dom",
+				hydratable: generate === "dom" || is_island,
 				enableSourcemap: false,
 				filename,
 			});