@chr33s/solarflare 0.0.2 → 0.0.3

package/package.json

@@ -1,8 +1,14 @@
 {
   "name": "@chr33s/solarflare",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
-  "bin": "./src/build.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chr33s/solarflare"
+  },
+  "bin": {
+    "solarflare": "src/build.ts"
+  },
   "files": [
     "src",
     "tsconfig.json",
@@ -20,33 +26,36 @@
   },
   "scripts": {
     "check": "oxfmt --check && oxlint --type-aware --type-check",
+    "examples:clean": "rm -rvf ./examples/*/.wrangler ./examples/*/.shopify ./examples/*/dist  ./examples/*/node_modules",
+    "examples:install": "for dir in basic dsd minimal node shopify-app; do npm install --prefix ./examples/${dir} --silent; done && bun install --cwd=./examples/bun && cd examples/deno && deno install",
     "fix": "oxlint --type-aware --type-check --fix && oxfmt --write",
     "test": "WRANGLER_LOG=error; node --test src/*.test.ts"
   },
   "dependencies": {
-    "@preact/signals": "2.8.0",
+    "@preact/signals": "2.8.1",
     "lightningcss": "1.31.1",
     "picomatch": "4.0.3",
     "preact": "11.0.0-beta.1",
     "preact-custom-element": "4.6.0",
-    "preact-render-to-string": "6.6.5",
-    "rolldown": "1.0.0-rc.4",
+    "preact-render-to-string": "6.6.6",
+    "rolldown": "1.0.0-rc.5",
     "turbo-stream": "3.1.0"
   },
   "devDependencies": {
-    "@preact/signals-debug": "1.4.1",
-    "@types/node": "25.2.3",
-    "oxfmt": "0.32.0",
-    "oxlint": "1.47.0",
-    "oxlint-tsgolint": "0.13.0",
+    "@preact/signals-debug": "1.4.2",
+    "@types/node": "25.3.0",
+    "oxfmt": "0.35.0",
+    "oxlint": "1.50.0",
+    "oxlint-tsgolint": "0.14.2",
     "playwright": "1.58.2",
     "typescript": "5.9.3",
-    "wrangler": "4.65.0"
+    "wrangler": "4.68.0"
   },
   "optionalDependencies": {
     "ts-morph": "27.0.2"
   },
   "engines": {
+    "bun": ">=1.3.0",
     "node": ">=24.12.0"
   }
 }

package/readme.md

@@ -132,7 +132,6 @@ import { Deferred } from "@chr33s/solarflare/client";
 <!-- performance -->
 <meta name="sf:preconnect" content="https://cdn.example.com" />
 <meta name="sf:early-flush" content="true" />
-<meta name="sf:critical-css" content="true" />
 <meta name="sf:cache-max-age" content="300" />
 <meta name="sf:cache-swr" content="3600" />
 <meta name="sf:prefetch" content="/about, /faq, /blog/*" />
@@ -160,6 +159,7 @@ export default define(MyComponent, { shadow: true });
 - [Basic](examples/basic/readme.md) — Layouts, dynamic routes, API, components
 - [Bun](examples/bun/readme.md) — Bun runtime example
 - [Deno](examples/deno/readme.md) — Deno runtime example
+- [DSD](examples/dsd/readme.md) — Declarative Shadow DOM example
 - [Minimal](examples/minimal/readme.md) — Single route
 - [Node](examples/node/readme.md) — Using `srvx` instead of Workers
 - [Shopify App](examples/shopify-app/readme.md) — Shopify app starter

package/src/build.bundle-client.ts

@@ -78,7 +78,7 @@ async function getComponentMeta(program: ts.Program, appDir: string, file: strin
   const contentHash = hash(content);
   const chunk = getChunkName(file, contentHash);
 
-  return { file, tag: parsed.tag, props, parsed, chunk, hash: contentHash };
+  return { file, tag: parsed.tag, props, parsed, chunk, hash: contentHash, shadow: false };
 }
 
 export async function buildClient(options: BuildClientOptions) {
@@ -215,6 +215,10 @@ export async function buildClient(options: BuildClientOptions) {
     const componentPath = join(appDir, meta.file);
     const componentCssImports = await scanner.extractAllCssImports(componentPath);
 
+    if (await scanner.detectShadowOption(componentPath)) {
+      meta.shadow = true;
+    }
+
     const componentDir = meta.file.split("/").slice(0, -1).join("/");
     const componentCssOutputPaths = await resolveCssOutputs(componentCssImports, componentDir);
 
@@ -365,12 +369,18 @@ export async function buildClient(options: BuildClientOptions) {
     chunks: {},
     tags: {},
     styles: {},
+    shadow: {},
     devScripts: args.production ? undefined : ["/assets/console-forward.js"],
   };
 
   for (const meta of metas) {
     manifest.chunks[meta.parsed.pattern] = `/assets/${meta.chunk}`;
     manifest.tags[meta.tag] = `/assets/${meta.chunk}`;
+
+    const filePath = join(appDir, meta.file);
+    if (await scanner.detectShadowOption(filePath)) {
+      manifest.shadow![meta.tag] = true;
+    }
   }
 
   for (const meta of metas) {

package/src/build.hmr-entry.ts

@@ -10,6 +10,7 @@ export interface ComponentMeta {
   tag: string;
   props: string[];
   chunk: string;
+  shadow?: boolean;
 }
 
 function buildDebugImports(args: HmrEntryArgs) {
@@ -47,7 +48,7 @@ function buildEntryInit(meta: ComponentMeta, cssFiles: string[]) {
   return /* tsx */ `
     initHmrEntry({
       tag: '${meta.tag}',
-      props: ${JSON.stringify(meta.props)},
+      props: ${JSON.stringify(meta.props)},${meta.shadow ? `\n      shadow: true,` : ""}
       routesManifest,
       BaseComponent,
       hmr,

package/src/build.scan.ts

@@ -167,6 +167,12 @@ export function createScanner(ctx: BuildScanContext) {
     return allCss;
   }
 
+  /** Detects `define(_, { shadow: true })` in a client component file. */
+  async function detectShadowOption(filePath: string) {
+    const content = await readFile(filePath, "utf-8");
+    return /define\s*\([^)]*\{[^}]*shadow\s*:\s*true/.test(content);
+  }
+
   return {
     scanFiles,
     getPackageImports,
@@ -178,5 +184,6 @@ export function createScanner(ctx: BuildScanContext) {
     extractComponentImports,
     resolveImportPath,
     extractAllCssImports,
+    detectShadowOption,
   };
 }

package/src/client.ts

@@ -1,5 +1,4 @@
 import { type FunctionComponent } from "preact";
-import register from "preact-custom-element";
 import { parsePath } from "./paths.ts";
 import { hydrateStore, initHydrationCoordinator } from "./hydration.ts";
 import { installHeadHoisting, createHeadContext, setHeadContext } from "./head.ts";
@@ -34,6 +33,14 @@ export function registerInlineStyles(tag: string, styles: InlineStyleEntry[]) {
   if (!styles.length) return;
   if (!supportsConstructableStylesheets() || typeof document === "undefined") return;
 
+  // If DSD already provided inline <style> in the shadow root, migrate it to
+  // adoptedStyleSheets so StylesheetManager.update() can reach it during HMR.
+  const el = document.querySelector(tag);
+  const shadowStyle = el?.shadowRoot?.querySelector("style");
+  if (shadowStyle) {
+    shadowStyle.remove();
+  }
+
   for (const style of styles) {
     const preloaded = getPreloadedStylesheet(style.id);
     if (!preloaded) {
@@ -42,10 +49,18 @@ export function registerInlineStyles(tag: string, styles: InlineStyleEntry[]) {
   }
 
   const sheets = stylesheets.getForConsumer(tag);
-  document.adoptedStyleSheets = [
-    ...document.adoptedStyleSheets.filter((s) => !sheets.includes(s)),
-    ...sheets,
-  ];
+  const shadowRoot = el?.shadowRoot;
+  if (shadowRoot) {
+    shadowRoot.adoptedStyleSheets = [
+      ...shadowRoot.adoptedStyleSheets.filter((s) => !sheets.includes(s)),
+      ...sheets,
+    ];
+  } else {
+    document.adoptedStyleSheets = [
+      ...document.adoptedStyleSheets.filter((s) => !sheets.includes(s)),
+      ...sheets,
+    ];
+  }
 }
 
 /** Tag metadata from file path. */
@@ -145,46 +160,14 @@ export interface DefineOptions {
   validate?: boolean;
 }
 
-/** Registers a Preact component as a web component (build-time macro). */
+/**
+ * Registers a Preact component as a web component.
+ * When used inside the solarflare build pipeline, `initHmrEntry` handles
+ * actual registration — `define()` just returns the component.
+ */
 export function define<P extends Record<string, any>>(
   Component: FunctionComponent<P>,
-  options?: DefineOptions,
+  _options?: DefineOptions,
 ) {
-  // Only register custom elements in the browser
-  if (typeof window !== "undefined" && typeof HTMLElement !== "undefined") {
-    const propNames = options?.observedAttributes ?? [];
-    const filePath = import.meta.path ?? import.meta.url ?? "";
-    const meta = parseTagMeta(filePath);
-    const tag = options?.tag ?? meta.tag;
-    const shadow = options?.shadow ?? false;
-    const shouldValidate = options?.validate ?? import.meta.env?.DEV ?? false;
-
-    if (customElements.get(tag)) {
-      console.warn(`[solarflare] Custom element "${tag}" is already registered, skipping`);
-      return Component;
-    }
-
-    if (shouldValidate) {
-      const validation = validateTag({ ...meta, tag });
-
-      for (const warning of validation.warnings) {
-        console.warn(`[solarflare] ${warning}`);
-      }
-
-      for (const error of validation.errors) {
-        console.error(`[solarflare] ${error}`);
-      }
-
-      if (!validation.valid) {
-        console.error(
-          `[solarflare] Tag validation failed for "${filePath}", component may not work correctly`,
-        );
-      }
-    }
-
-    // Register the component as a custom element
-    register(Component, tag, propNames, { shadow });
-  }
-
   return Component;
 }

package/src/diff-dom-streaming.ts

@@ -64,6 +64,17 @@ async function updateNode(oldNode: Node, newNode: Node, walker: Walker) {
   }
 
   if (oldNode.nodeType === ELEMENT_TYPE) {
+    // Treat DSD custom elements as atomic: the old DOM has a real shadow root
+    // while the new HTML has a <template shadowrootmode> child — these can't
+    // be diffed structurally, so replace the entire element.
+    if (hasShadowRoot(oldNode as Element) && hasDsdTemplate(newNode as Element)) {
+      return walker[APPLY_TRANSITION](() => {
+        if (oldNode.parentNode) {
+          oldNode.parentNode.replaceChild(newNode.cloneNode(true), oldNode);
+        }
+      });
+    }
+
     await setChildNodes(oldNode, newNode, walker);
 
     walker[APPLY_TRANSITION](() => {
@@ -86,6 +97,19 @@ async function updateNode(oldNode: Node, newNode: Node, walker: Walker) {
   }
 }
 
+/** Checks if an element has a live shadow root (from DSD or imperative). */
+function hasShadowRoot(el: Element) {
+  return !!(el as HTMLElement).shadowRoot;
+}
+
+/** Checks if an element contains a `<template shadowrootmode>` child. */
+function hasDsdTemplate(el: Element) {
+  for (let c = el.firstElementChild; c; c = c.nextElementSibling) {
+    if (c.nodeName === "TEMPLATE" && c.hasAttribute("shadowrootmode")) return true;
+  }
+  return false;
+}
+
 /**
  * Utility that will update one list of attributes to match another.
  */

package/src/early-flush.ts

@@ -39,7 +39,6 @@ export function generateStaticShell(options: {
 export function createEarlyFlushStream(
   shell: StreamingShell,
   options: {
-    criticalCss?: string;
     preloadHints?: string;
     contentStream: ReadableStream<Uint8Array>;
     headTags: string;
@@ -52,11 +51,7 @@ export function createEarlyFlushStream(
 
   return new ReadableStream<Uint8Array>({
     async start(controller) {
-      const shellStart = [
-        shell.preHead,
-        options.preloadHints || "",
-        options.criticalCss ? /* html */ `<style>${options.criticalCss}</style>` : "",
-      ].join("");
+      const shellStart = [shell.preHead, options.preloadHints || ""].join("");
 
       controller.enqueue(encoder.encode(shellStart));
 

package/src/hmr.ts

@@ -437,6 +437,7 @@ export function onHMREvent(
 interface HmrEntryOptions {
   tag: string;
   props: string[];
+  shadow?: boolean;
   routesManifest: RoutesManifest;
   BaseComponent: FunctionComponent<any>;
   hmr: HmrApi;
@@ -642,6 +643,18 @@ function createHmrEntryComponent(options: HmrEntryOptions) {
 export function initHmrEntry(options: HmrEntryOptions) {
   const Component = createHmrEntryComponent(options);
   if (!customElements.get(options.tag)) {
-    register(Component, options.tag, options.props, { shadow: false });
+    const shadow = options.shadow ?? false;
+    if (shadow) {
+      // When DSD has already created a shadow root, patch attachShadow to
+      // return the existing root so preact-custom-element won't throw.
+      const orig = HTMLElement.prototype.attachShadow.bind(HTMLElement.prototype);
+      HTMLElement.prototype.attachShadow = function (init: ShadowRootInit) {
+        return this.shadowRoot ?? orig.call(this, init);
+      };
+      register(Component, options.tag, options.props, { shadow });
+      HTMLElement.prototype.attachShadow = orig;
+    } else {
+      register(Component, options.tag, options.props, { shadow });
+    }
   }
 }

package/src/manifest.runtime.ts

@@ -19,6 +19,11 @@ export function getStylesheets(pattern: string) {
   return manifest.styles[pattern] ?? [];
 }
 
+/** Gets whether a tag uses Shadow DOM (DSD). */
+export function isShadowTag(tag: string) {
+  return manifest.shadow?.[tag] ?? false;
+}
+
 /** Gets dev mode scripts from the chunk manifest. */
 export function getDevScripts() {
   return manifest.devScripts;

package/src/manifest.ts

@@ -19,5 +19,7 @@ export interface ChunkManifest {
   chunks: Record<string, string>;
   tags: Record<string, string>;
   styles: Record<string, string[]>;
+  /** Tags that use Shadow DOM (DSD). */
+  shadow?: Record<string, boolean>;
   devScripts?: string[];
 }

package/src/server.ts

@@ -222,6 +222,7 @@ export function renderComponent(
   Component: FunctionComponent<any>,
   tag: string,
   props: Record<string, unknown>,
+  options?: { shadow?: boolean },
 ) {
   const attrs: Record<string, string> = {};
   for (const [key, value] of Object.entries(props)) {
@@ -230,7 +231,11 @@ export function renderComponent(
       attrs[key] = String(value);
     }
   }
-  return h(tag, attrs, h(Component, props));
+  const children = h(Component, props);
+  if (options?.shadow) {
+    return h(tag, attrs, h("template", { shadowrootmode: "open" }, children));
+  }
+  return h(tag, attrs, children);
 }
 
 /** Error page props interface. */

package/src/worker.config.ts

@@ -18,8 +18,7 @@ export interface WorkerMetaConfig {
   cacheConfig?: RouteCacheConfig;
   /** Enable early flush */
   earlyFlush: boolean;
-  /** Enable critical CSS inlining */
-  criticalCss: boolean;
+
   /** URLs/patterns to prefetch */
   prefetch: string[];
   /** URLs/patterns to prerender */
@@ -35,7 +34,6 @@ const DEFAULTS: WorkerMetaConfig = {
   lang: "en",
   preconnectOrigins: ["https://fonts.googleapis.com", "https://fonts.gstatic.com"],
   earlyFlush: false,
-  criticalCss: false,
   prefetch: [],
   prerender: [],
   speculationEagerness: "moderate",
@@ -80,11 +78,6 @@ export function parseMetaConfig(html: string) {
     config.earlyFlush = earlyFlush === "true";
   }
 
-  const criticalCss = matchMeta("sf:critical-css");
-  if (criticalCss) {
-    config.criticalCss = criticalCss === "true";
-  }
-
   const prefetch = matchMeta("sf:prefetch");
   if (prefetch) {
     config.prefetch = prefetch
@@ -138,7 +131,6 @@ export function workerConfigMeta(config: {
   cacheMaxAge?: number;
   cacheSwr?: number;
   earlyFlush?: boolean;
-  criticalCss?: boolean;
   prefetch?: string[];
   prerender?: string[];
   prefetchSelector?: string;
@@ -164,10 +156,6 @@ export function workerConfigMeta(config: {
     meta.push({ name: "sf:early-flush", content: String(config.earlyFlush) });
   }
 
-  if (config.criticalCss !== undefined) {
-    meta.push({ name: "sf:critical-css", content: String(config.criticalCss) });
-  }
-
   if (config.prefetch?.length) {
     meta.push({ name: "sf:prefetch", content: config.prefetch.join(",") });
   }

package/src/worker.ts

@@ -10,12 +10,17 @@ import {
   generateResourceHints,
   type StreamingShell,
 } from "./early-flush.ts";
-import { extractCriticalCss, generateAsyncCssLoader } from "./critical-css.ts";
 import { collectEarlyHints, generateEarlyHintsHeader } from "./early-hints.ts";
 import { ResponseCache, withCache } from "./route-cache.ts";
 import { parseMetaConfig } from "./worker.config.ts";
 import { getHeadContext, type HeadTag } from "./head.ts";
-import { typedModules, getScriptPath, getStylesheets, getDevScripts } from "./manifest.runtime.ts";
+import {
+  typedModules,
+  getScriptPath,
+  getStylesheets,
+  getDevScripts,
+  isShadowTag,
+} from "./manifest.runtime.ts";
 import { findPairedModulePath } from "./paths.ts";
 import { encode } from "turbo-stream";
 
@@ -38,8 +43,6 @@ function getStaticShell(lang: string) {
 /** Worker optimization options. */
 export interface WorkerOptimizations {
   earlyFlush?: boolean;
-  criticalCss?: boolean;
-  readCss?: (path: string) => Promise<string>;
 }
 
 /** Server data loader function type. */
@@ -79,11 +82,8 @@ interface RenderPlan {
   status: number;
   statusText?: string;
   metaConfig: ReturnType<typeof parseMetaConfig>;
-  stylesheets: string[];
   resourceHints: string;
   useEarlyFlush: boolean;
-  useCriticalCss: boolean;
-  pathname: string;
 }
 
 type MatchAndLoadResult =
@@ -296,6 +296,13 @@ async function matchAndLoad(request: Request, url: URL): Promise<MatchAndLoadRes
         deferredPromises[key] = value;
       } else {
         immediateData[key] = value;
+        // Non-primitive values can't be serialized as HTML attributes on the
+        // custom element. Emit them as instantly-resolved deferred data islands
+        // so the client-side hydration mechanism picks them up.
+        const t = typeof value;
+        if (value != null && t !== "string" && t !== "number" && t !== "boolean") {
+          deferredPromises[key] = Promise.resolve(value);
+        }
       }
     }
 
@@ -308,7 +315,9 @@ async function matchAndLoad(request: Request, url: URL): Promise<MatchAndLoadRes
   const clientMod = await typedModules.client[clientPath]();
   const Component = clientMod.default as FunctionComponent<any>;
 
-  let content = server.renderComponent(Component, route.tag, props);
+  let content = server.renderComponent(Component, route.tag, props, {
+    shadow: isShadowTag(route.tag),
+  });
 
   const layouts = server.findLayouts(route.path, typedModules);
   if (layouts.length > 0) {
@@ -363,7 +372,6 @@ async function renderStream(
   });
 
   const useEarlyFlush = envOptimizations.earlyFlush ?? metaConfig.earlyFlush;
-  const useCriticalCss = envOptimizations.criticalCss ?? metaConfig.criticalCss;
 
   const ssrStream = await server.renderToStream(content, {
     params,
@@ -395,45 +403,23 @@ async function renderStream(
     status: ssrStream.status ?? 200,
     statusText: ssrStream.statusText,
     metaConfig,
-    stylesheets,
     resourceHints,
     useEarlyFlush,
-    useCriticalCss,
-    pathname: route.parsedPattern.pathname,
   };
 }
 
-async function applyPerfFeatures(plan: RenderPlan, envOptimizations: WorkerOptimizations) {
-  const {
-    ssrStream,
-    finalHeaders,
-    status,
-    statusText,
-    stylesheets,
-    resourceHints,
-    useEarlyFlush,
-    useCriticalCss,
-    pathname,
-    metaConfig,
-  } = plan;
+async function applyPerfFeatures(plan: RenderPlan) {
+  const { ssrStream, finalHeaders, status, statusText, resourceHints, useEarlyFlush, metaConfig } =
+    plan;
 
   if (useEarlyFlush) {
     const staticShell = getStaticShell(metaConfig.lang);
 
-    let criticalCss = "";
-    if (useCriticalCss && envOptimizations.readCss) {
-      criticalCss = await extractCriticalCss(pathname, stylesheets, {
-        readCss: envOptimizations.readCss,
-        cache: true,
-      });
-    }
-
     const optimizedStream = createEarlyFlushStream(staticShell, {
-      criticalCss,
       preloadHints: resourceHints,
       contentStream: ssrStream,
       headTags: "",
-      bodyTags: generateAsyncCssLoader(stylesheets),
+      bodyTags: "",
     });
 
     return new Response(optimizedStream, {
@@ -518,7 +504,7 @@ async function worker(request: Request, env?: WorkerEnv) {
 
     const render = async () => {
       const plan = await renderStream(context, headers, envOptimizations);
-      return applyPerfFeatures(plan, envOptimizations);
+      return applyPerfFeatures(plan);
     };
 
     if (context.metaConfig.cacheConfig) {

package/src/critical-css.ts

@@ -1,103 +0,0 @@
-import { createHash } from "node:crypto";
-import { escapeJsonForHtml } from "./serialize.ts";
-
-/** Critical CSS cache entry. */
-interface CriticalCssEntry {
-  css: string;
-  hash: string;
-  timestamp: number;
-}
-
-/** In-memory cache for critical CSS (per route). */
-const criticalCssCache = new Map<string, CriticalCssEntry>();
-
-/** Max age for cached critical CSS (1 hour). */
-const CACHE_MAX_AGE = 60 * 60 * 1000;
-
-/** Extracts critical CSS for a route */
-export async function extractCriticalCss(
-  routePattern: string,
-  cssFiles: string[],
-  options: {
-    readCss: (path: string) => Promise<string>;
-    maxSize?: number;
-    cache?: boolean;
-  },
-) {
-  const cacheKey = routePattern;
-  const maxSize = options.maxSize ?? 14 * 1024;
-
-  if (options.cache !== false) {
-    const cached = criticalCssCache.get(cacheKey);
-    if (cached && Date.now() - cached.timestamp < CACHE_MAX_AGE) {
-      return cached.css;
-    }
-  }
-
-  const cssContents: string[] = [];
-  let totalSize = 0;
-
-  for (const file of cssFiles) {
-    try {
-      const content = await options.readCss(file);
-      const minified = minifyCss(content);
-
-      if (totalSize + minified.length > maxSize) {
-        break;
-      }
-
-      cssContents.push(minified);
-      totalSize += minified.length;
-    } catch {}
-  }
-
-  const criticalCss = cssContents.join("\n");
-  const hash = createHash("md5").update(criticalCss).digest("hex").slice(0, 8);
-
-  if (options.cache !== false) {
-    criticalCssCache.set(cacheKey, {
-      css: criticalCss,
-      hash,
-      timestamp: Date.now(),
-    });
-  }
-
-  return criticalCss;
-}
-
-/** Simple CSS minification for critical CSS */
-function minifyCss(css: string) {
-  return css
-    .replace(/\/\*[\s\S]*?\*\//g, "")
-    .replace(/\s+/g, " ")
-    .replace(/\s*([{}: ;,])\s*/g, "$1")
-    .trim();
-}
-
-/** Generates a noscript fallback for CSS loading. */
-export function generateCssFallback(stylesheets: string[]) {
-  const links = stylesheets
-    .map((href) => /* html */ `<link rel="stylesheet" href="${href}">`)
-    .join("");
-  return /* html */ `<noscript>${links}</noscript>`;
-}
-
-/** Generates async CSS loading script without blocking render on non-critical CSS */
-export function generateAsyncCssLoader(stylesheets: string[]) {
-  if (stylesheets.length === 0) return "";
-
-  const hrefs = escapeJsonForHtml(stylesheets);
-
-  return /* html */ `
-    <script>
-      (function() {
-        var ss=${hrefs};
-        ss.forEach(function(h){
-          var l=document.createElement('link');
-          l.rel='stylesheet';l.href=h;
-          document.head.appendChild(l);
-        });
-      })();
-    </script>
-  `;
-}