@chr33s/solarflare 0.0.7 → 0.0.10

package/package.json

@@ -1,16 +1,15 @@
 {
   "name": "@chr33s/solarflare",
-  "version": "0.0.7",
+  "version": "0.0.10",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/chr33s/solarflare"
   },
   "bin": {
-    "solarflare": "bin/solarflare"
+    "solarflare": "./src/build.ts"
   },
   "files": [
-    "bin",
     "src",
     "tsconfig.json",
     "!src/*.test.ts"
@@ -40,6 +39,7 @@
     "preact-custom-element": "4.6.0",
     "preact-render-to-string": "6.6.6",
     "rolldown": "1.0.0-rc.5",
+    "tsx": "4.21.0",
     "turbo-stream": "3.1.0"
   },
   "devDependencies": {

package/src/build.ts

@@ -1,3 +1,4 @@
+#!/usr/bin/env -S npx tsx
 import { spawn, type ChildProcess } from "node:child_process";
 import { watch } from "node:fs";
 import { writeFile } from "node:fs/promises";

package/src/client.styles.ts

@@ -1,4 +1,8 @@
-import { stylesheets, supportsConstructableStylesheets } from "./stylesheets.ts";
+import {
+  safeAdoptStylesheets,
+  stylesheets,
+  supportsConstructableStylesheets,
+} from "./stylesheets.ts";
 
 /** Style loading state for a component. */
 interface StyleState {
@@ -51,12 +55,11 @@ export function applyStyles(element: HTMLElement, sheets: CSSStyleSheet[]) {
   const shadowRoot = element.shadowRoot;
 
   if (shadowRoot) {
-    shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, ...sheets];
+    safeAdoptStylesheets(shadowRoot, [...shadowRoot.adoptedStyleSheets, ...sheets]);
   } else {
-    for (const sheet of sheets) {
-      if (!document.adoptedStyleSheets.includes(sheet)) {
-        document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
-      }
+    const toAdd = sheets.filter((s) => !document.adoptedStyleSheets.includes(s));
+    if (toAdd.length) {
+      safeAdoptStylesheets(document, [...document.adoptedStyleSheets, ...toAdd]);
     }
   }
 }

package/src/client.ts

@@ -3,7 +3,11 @@ import { parsePath } from "./paths.ts";
 import { hydrateStore, initHydrationCoordinator } from "./hydration.ts";
 import { installHeadHoisting, createHeadContext, setHeadContext } from "./head.ts";
 import { getRuntime } from "./runtime.ts";
-import { stylesheets, supportsConstructableStylesheets } from "./stylesheets.ts";
+import {
+  safeAdoptStylesheets,
+  stylesheets,
+  supportsConstructableStylesheets,
+} from "./stylesheets.ts";
 import { getPreloadedStylesheet } from "./server.styles.ts";
 
 export { initHmrEntry, reloadAllStylesheets } from "./hmr.ts";
@@ -51,15 +55,15 @@ export function registerInlineStyles(tag: string, styles: InlineStyleEntry[]) {
   const sheets = stylesheets.getForConsumer(tag);
   const shadowRoot = el?.shadowRoot;
   if (shadowRoot) {
-    shadowRoot.adoptedStyleSheets = [
+    safeAdoptStylesheets(shadowRoot, [
       ...shadowRoot.adoptedStyleSheets.filter((s) => !sheets.includes(s)),
       ...sheets,
-    ];
+    ]);
   } else {
-    document.adoptedStyleSheets = [
+    safeAdoptStylesheets(document, [
       ...document.adoptedStyleSheets.filter((s) => !sheets.includes(s)),
       ...sheets,
-    ];
+    ]);
   }
 }
 

package/src/stylesheets.ts

@@ -9,6 +9,29 @@ export const supportsConstructableStylesheets = () => {
   }
 };
 
+/** Recreates a stylesheet in the current document context. */
+function cloneSheet(sheet: CSSStyleSheet): CSSStyleSheet {
+  const fresh = new CSSStyleSheet();
+  fresh.replaceSync([...sheet.cssRules].map((r) => r.cssText).join(""));
+  return fresh;
+}
+
+/** Safely adopts stylesheets, recreating them if cross-document sharing fails. */
+export function safeAdoptStylesheets(
+  target: Document | ShadowRoot,
+  sheets: CSSStyleSheet[],
+): CSSStyleSheet[] {
+  try {
+    target.adoptedStyleSheets = sheets;
+    return sheets;
+  } catch {
+    // Stylesheet was created in a different document context - recreate
+    const cloned = sheets.map(cloneSheet);
+    target.adoptedStyleSheets = cloned;
+    return cloned;
+  }
+}
+
 /** Stylesheet entry with metadata. */
 interface StylesheetEntry {
   sheet: CSSStyleSheet;
@@ -143,7 +166,7 @@ class StylesheetManager {
     // Include global sheets
     const globalSheets = [...this.#sheets.values()].filter((e) => e.isGlobal).map((e) => e.sheet);
 
-    shadowRoot.adoptedStyleSheets = [...globalSheets, ...sheets];
+    safeAdoptStylesheets(shadowRoot, [...globalSheets, ...sheets]);
   }
 
   /** Removes a consumer from all its stylesheets. */
@@ -171,7 +194,7 @@ class StylesheetManager {
   #adoptToDocument(sheet: CSSStyleSheet) {
     if (!this.#documentSheets.includes(sheet)) {
       this.#documentSheets.push(sheet);
-      document.adoptedStyleSheets = [...this.#documentSheets];
+      safeAdoptStylesheets(document, [...this.#documentSheets]);
     }
   }
 

package/bin/solarflare

@@ -1,3 +0,0 @@
-#!/usr/bin/env bash
-SCRIPT_DIR="$(cd "$(dirname "$(readlink -f "$0")")" && pwd)"
-exec node --experimental-transform-types "$SCRIPT_DIR/../src/build.ts" "$@"