diff --git a/src/build.ts b/src/build.ts index 7455e96..40d6b6e 100644 --- a/src/build.ts +++ b/src/build.ts @@ -66,9 +66,9 @@ const routesESBuildConfig: esbuild.BuildOptions = { .flat(), write: false, plugins: [ - island_wrapper("ssr", site_dir), + island_wrapper("ssr", site_dir, base_path), resolve_svelte_internal, - build_routes({ base_path }), + build_routes, ], outdir: build_dir, ...baseESBuildConfig, @@ -80,7 +80,7 @@ const islandsESBuildConfig: esbuild.BuildOptions = { ] .flat(), plugins: [ - island_wrapper("dom", site_dir), + island_wrapper("dom", site_dir, base_path), resolve_svelte_internal, ], outdir: build_dir + "components/", diff --git a/src/esbuild_plugins/build_routes/get_route_html.ts b/src/esbuild_plugins/build_routes/get_route_html.ts index 6f770a1..23d1aee 100644 --- a/src/esbuild_plugins/build_routes/get_route_html.ts +++ b/src/esbuild_plugins/build_routes/get_route_html.ts @@ -1,50 +1,11 @@ -import { normalize } from "https://deno.land/std@0.177.0/path/mod.ts"; import { format } from "npm:prettier"; -// dummy value to put the var name in scope -const component_path = ""; - -// this function is stringified inline in the page -// putting it here gives us type safety etc -export const hydrate_island = async (target: Element) => { - try { - const name = target.getAttribute("name"); - const props = JSON.parse(target.getAttribute("props") ?? "{}"); - const load = performance.now(); - - const Component = - (await import(component_path + name + ".island.js")).default; - console.group(name); - console.info( - `Loaded in %c${Math.round((performance.now() - load) * 1000) / 1000}ms`, - "color: orange", - ); - - const hydrate = performance.now(); - new Component({ target, props, hydrate: true }); - target.setAttribute("foraged", ""); - - console.info( - `Hydrated in %c${ - Math.round((performance.now() - hydrate) * 1000) / 1000 - }ms%c with`, - "color: orange", - "color: reset", - props, - ); - console.groupEnd(); - } catch (_) { - console.error(_); - } -}; - interface TemplateOptions { css: string; head: string; html: string; - hydrator: string; } -const template = ({ css, head, html, hydrator }: TemplateOptions) => ` +const template = ({ css, head, html }: TemplateOptions) => ` @@ -52,7 +13,6 @@ const template = ({ css, head, html, hydrator }: TemplateOptions) => ` ${head} - @@ -61,23 +21,15 @@ const template = ({ css, head, html, hydrator }: TemplateOptions) => ` `; -const island_hydrator = (base = "") => ` - const component_path = "${base}"; - const hydrate_island = ${hydrate_island.toString()}; - document.querySelectorAll("one-claw[name]").forEach(hydrate_island); -`; - -export const get_route_html = ({ html, css, head, base_path }: { +export const get_route_html = ({ html, css, head }: { html: string; css: string; head: string; - base_path?: string; }) => { const page = template({ css, head, html, - hydrator: island_hydrator(normalize(`/${base_path}/components/`)), }); try { diff --git a/src/esbuild_plugins/build_routes/index.ts b/src/esbuild_plugins/build_routes/index.ts index 0e81159..723233c 100644 --- a/src/esbuild_plugins/build_routes/index.ts +++ b/src/esbuild_plugins/build_routes/index.ts @@ -9,9 +9,7 @@ interface SSROutput { css?: { code: string }; } -export const build_routes = ( - { base_path }: { base_path: string }, -): Plugin => ({ +export const build_routes: Plugin = { name: "mononykus/build-routes", setup(build) { build.onEnd(async (result) => { @@ -36,7 +34,7 @@ export const build_routes = ( await Deno.writeTextFile( dist_path, - get_route_html({ html, css, head, base_path }), + get_route_html({ html, css, head }), ); } @@ -47,4 +45,4 @@ export const build_routes = ( ); }); }, -}); +}; diff --git a/src/esbuild_plugins/islands.ts b/src/esbuild_plugins/islands.ts index 8466cd6..dbfac03 100644 --- a/src/esbuild_plugins/islands.ts +++ b/src/esbuild_plugins/islands.ts @@ -1,10 +1,15 @@ +import { normalize } from "https://deno.land/std@0.177.0/path/mod.ts"; import type { Plugin } from "https://deno.land/x/esbuild@v0.17.16/mod.js"; import { compile, preprocess } from "npm:svelte/compiler"; const filter = /\.svelte$/; const name = "mononykus/svelte-islands"; -export const island_wrapper = (mode: "ssr" | "dom", dir: string): Plugin => ({ +export const island_wrapper = ( + mode: "ssr" | "dom", + dir: string, + base_path: string, +): Plugin => ({ name, setup(build) { build.onLoad({ filter }, async ({ path }) => { @@ -12,8 +17,10 @@ export const island_wrapper = (mode: "ssr" | "dom", dir: string): Plugin => ({ const source = await Deno.readTextFile(path); const island = filename.match(/\/(\w+).island.svelte/); - const processed = island && mode === "ssr" - ? (await preprocess(source, { + let processed = source; + + if (island && mode === "ssr") { + const preprocessed = await preprocess(source, { markup: ({ content }) => { let processed = content; const non_html = content.match( @@ -25,19 +32,29 @@ export const island_wrapper = (mode: "ssr" | "dom", dir: string): Plugin => ({ for (const el of non_html) { html = html.replace(el, ""); } - processed = non_html.join("") + - `${html.trim()}`; + + const src = filename.replace( + "components/", + normalize(`/${base_path}/components/`), + ).replace(/svelte$/, "js"); + + processed = non_html.join("") + ` + +