@absolutejs/absolute 0.20.0-beta.177 → 0.20.0-beta.179

package/dist/react/index.js

@@ -313,7 +313,7 @@ var ISLAND_BOOTSTRAP_MANIFEST_KEY = "AbsoluteIslandBootstrap", LEGACY_ISLAND_BOO
       islands[framework] = entries;
   }
   return islands;
-}, getIslandManifestKey = (framework, component) => `Island${toIslandFrameworkSegment(framework)}${component}`;
+}, getIslandManifestKey = (framework, component) => `Island${toIslandFrameworkSegment(framework)}${component}`, ISLAND_STYLE_PREFIX = "IslandStyle", getIslandStyleManifestEntries = (manifest) => Object.entries(manifest).filter(([key]) => key.startsWith(ISLAND_STYLE_PREFIX)), getIslandStyleManifestKey = (framework, component) => `${ISLAND_STYLE_PREFIX}${toIslandFrameworkSegment(framework)}${component}`;
 
 // src/core/islandPageContext.ts
 var ISLAND_MARKER = 'data-island="true"', MANIFEST_MARKER = "__ABSOLUTE_MANIFEST__", ISLAND_STATE_MARKER = "__ABS_ISLAND_STATE__", CLOSING_HEAD_TAG = "</head>", warnedMissingBootstrap = false, warnIfBootstrapMissing = (manifest) => {
@@ -350,12 +350,27 @@ var ISLAND_MARKER = 'data-island="true"', MANIFEST_MARKER = "__ABSOLUTE_MANIFEST
     browserManifest[key] = value;
   }
   return browserManifest;
-}, buildIslandsHeadMarkup = (manifest) => {
+}, ISLAND_MARKER_TAG, ISLAND_FRAMEWORKS, readMarkerAttribute = (tag, name) => new RegExp(`\\b${name}="([^"]*)"`).exec(tag)?.[1]?.replaceAll("&quot;", '"').replaceAll("&lt;", "<").replaceAll("&gt;", ">").replaceAll("&amp;", "&"), toIslandFramework = (value) => ISLAND_FRAMEWORKS.find((framework) => framework === value), collectRenderedIslandStyleKeys = (html) => {
+  const keys = new Set;
+  for (const [tag] of html.matchAll(ISLAND_MARKER_TAG)) {
+    const framework = toIslandFramework(readMarkerAttribute(tag, "data-framework"));
+    const component = readMarkerAttribute(tag, "data-component");
+    if (framework && component)
+      keys.add(getIslandStyleManifestKey(framework, component));
+  }
+  return keys;
+}, buildIslandStyleLinks = (manifest, html) => {
+  if (html === undefined)
+    return "";
+  const renderedKeys = collectRenderedIslandStyleKeys(html);
+  return getIslandStyleManifestEntries(manifest).filter(([key]) => renderedKeys.has(key)).filter(([, href]) => !html.includes(`href="${href}"`)).map(([key, href]) => `<link rel="stylesheet" href="${href}" data-island-style="${key}"${nonceAttr()}>`).join("");
+}, buildIslandsHeadMarkup = (manifest, html) => {
+  const styleLinks = buildIslandStyleLinks(manifest, html);
   const manifestScript = `<script${nonceAttr()}>window.__ABSOLUTE_MANIFEST__ = ${escapeScriptContent(JSON.stringify(toBrowserManifest(manifest)))}</script>`;
   const islandStateScript = `<script${nonceAttr()}>window.__ABS_ISLAND_STATE__ = ${escapeScriptContent(JSON.stringify(globalThis.__ABS_ISLAND_STATE__ ?? {}))}</script>`;
   const bootstrapPath = getIslandBootstrapPath(manifest);
   const bootstrapScript = bootstrapPath ? `<script${nonceAttr()} type="module" src="${bootstrapPath}"></script>` : "";
-  return `${manifestScript}${islandStateScript}${bootstrapScript}`;
+  return `${styleLinks}${manifestScript}${islandStateScript}${bootstrapScript}`;
 }, injectHeadMarkup = (html, markup) => {
   const closingHeadIndex = html.indexOf("</head>");
   if (closingHeadIndex >= 0) {
@@ -537,7 +552,7 @@ var ISLAND_MARKER = 'data-island="true"', MANIFEST_MARKER = "__ABSOLUTE_MANIFEST
     return html;
   }
   warnIfBootstrapMissing(manifest);
-  return injectHeadMarkup(html, buildIslandsHeadMarkup(manifest));
+  return injectHeadMarkup(html, buildIslandsHeadMarkup(manifest, html));
 }, injectIslandPageContextStream = (stream, options) => {
   const manifest = globalThis.__absoluteManifest;
   if (!manifest)
@@ -561,6 +576,13 @@ var init_islandPageContext = __esm(() => {
   init_logger();
   MANIFEST_BUILD_DIR_KEY = Symbol.for("absolutejs.islandManifestBuildDir");
   WINDOWS_ABSOLUTE_PATH = /^[A-Za-z]:[\\/]|^\\\\/;
+  ISLAND_MARKER_TAG = /<[^>]*\bdata-island="true"[^>]*>/g;
+  ISLAND_FRAMEWORKS = [
+    "react",
+    "svelte",
+    "vue",
+    "angular"
+  ];
 });
 
 // src/core/devRouteRegistrationCallsite.ts
@@ -2128,6 +2150,12 @@ var CONVENTIONS_KEY = "__absoluteConventions", isConventionsMap = (value) => Boo
     logConventionRenderError(framework, "error", renderError);
   }
   return null;
+}, isPageRequest = (request) => {
+  if (request.headers.get("hx-request") === "true")
+    return true;
+  if (request.headers.get("sec-fetch-dest") === "document")
+    return true;
+  return (request.headers.get("accept") ?? "").includes("text/html");
 }, renderConventionError = async (framework, pageName, error) => {
   const errorProps = buildErrorProps(error);
   const frameworkResponse = await tryFrameworkErrorConvention(framework, pageName, errorProps, error);
@@ -2139,12 +2167,6 @@ var CONVENTIONS_KEY = "__absoluteConventions", isConventionsMap = (value) => Boo
       return htmlResponse;
   }
   return null;
-}, isPageRequest = (request) => {
-  if (request.headers.get("hx-request") === "true")
-    return true;
-  if (request.headers.get("sec-fetch-dest") === "document")
-    return true;
-  return (request.headers.get("accept") ?? "").includes("text/html");
 }, renderStaticRouteError = async (request, error) => {
   if (!isPageRequest(request))
     return null;
@@ -4458,7 +4480,7 @@ import { basename as basename3, dirname as dirname4, extname as extname2, join a
 var serverCacheRoot2, compiledModuleCache2, originalSourcePathCache, syncIslandGeneration, transpiler, ensureRelativeImportPath = (from, target) => {
   const importPath = relative3(dirname4(from), target).replace(/\\/g, "/");
   return importPath.startsWith(".") ? importPath : `./${importPath}`;
-}, processDirectoryEntries = (entries, dir, targetFileName, stack) => {
+}, escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), replaceQuotedSpecifier = (code, spec, target) => code.replace(new RegExp(`(['"])${escapeRegExp(spec)}\\1`, "g"), (_match, quote) => `${quote}${target}${quote}`), processDirectoryEntries = (entries, dir, targetFileName, stack) => {
   for (const entry of entries) {
     const entryPath = join7(dir, entry.name);
     if (entry.isDirectory())
@@ -4503,18 +4525,21 @@ var serverCacheRoot2, compiledModuleCache2, originalSourcePathCache, syncIslandG
     return null;
   }
   const basePath = resolve4(dirname4(from), spec);
+  const extensions = [
+    ".ts",
+    ".tsx",
+    ".mts",
+    ".cts",
+    ".js",
+    ".jsx",
+    ".mjs",
+    ".cjs",
+    ".json"
+  ];
   const candidates = [
     basePath,
-    `${basePath}.ts`,
-    `${basePath}.js`,
-    `${basePath}.mjs`,
-    `${basePath}.cjs`,
-    `${basePath}.json`,
-    join7(basePath, "index.ts"),
-    join7(basePath, "index.js"),
-    join7(basePath, "index.mjs"),
-    join7(basePath, "index.cjs"),
-    join7(basePath, "index.json")
+    ...extensions.map((extension) => `${basePath}${extension}`),
+    ...extensions.map((extension) => join7(basePath, `index${extension}`))
   ];
   const existResults = await Promise.all(candidates.map((candidate) => Bun.file(candidate).exists()));
   const foundIndex = existResults.indexOf(true);
@@ -4599,7 +4624,7 @@ var serverCacheRoot2, compiledModuleCache2, originalSourcePathCache, syncIslandG
     rewrittenModulePaths.set(spec, ensureRelativeImportPath(getCachedModulePath2(sourcePath), resolvedModuleImport));
   }
   for (const [spec, resolvedModuleImport] of rewrittenModulePaths) {
-    transpiled = transpiled.replaceAll(spec, resolvedModuleImport);
+    transpiled = replaceQuotedSpecifier(transpiled, spec, resolvedModuleImport);
   }
   let compiledCode = compile(transpiled, {
     css: "injected",
@@ -4611,10 +4636,10 @@ var serverCacheRoot2, compiledModuleCache2, originalSourcePathCache, syncIslandG
     hmr: isDevelopmentRuntime()
   }).js.code;
   for (const [spec, compiledChildPath] of childModulePaths) {
-    compiledCode = compiledCode.replaceAll(spec, ensureRelativeImportPath(getCachedModulePath2(sourcePath), compiledChildPath));
+    compiledCode = replaceQuotedSpecifier(compiledCode, spec, ensureRelativeImportPath(getCachedModulePath2(sourcePath), compiledChildPath));
   }
   for (const [spec, resolvedModuleImport] of rewrittenModulePaths) {
-    compiledCode = compiledCode.replaceAll(spec, resolvedModuleImport);
+    compiledCode = replaceQuotedSpecifier(compiledCode, spec, resolvedModuleImport);
   }
   const sourceId = JSON.stringify(relative3(process.cwd(), resolutionSourcePath).replace(/\\/g, "/"));
   const componentName = /export default function ([\w$]+)\s*\(/.exec(compiledCode)?.[1];
@@ -4674,9 +4699,9 @@ var createVueCompiler = async () => {
 // src/core/vueServerModule.ts
 import { readFileSync as readFileSync5, realpathSync } from "fs";
 import { mkdir as mkdir3 } from "fs/promises";
-import { dirname as dirname5, join as join8, relative as relative4, resolve as resolve5 } from "path";
+import { basename as basename4, dirname as dirname5, join as join8, relative as relative4, resolve as resolve5 } from "path";
 var {Transpiler } = globalThis.Bun;
-var ISLAND_COMPONENT_ID_LENGTH = 8, serverCacheRoot3, compiledModuleCache3, syncIslandGeneration2, transpiler2, ensureRelativeImportPath2 = (from, target) => {
+var serverCacheRoot3, compiledModuleCache3, syncIslandGeneration2, transpiler2, ensureRelativeImportPath2 = (from, target) => {
   const importPath = relative4(dirname5(from), target).replace(/\\/g, "/");
   return importPath.startsWith(".") ? importPath : `./${importPath}`;
 }, getCachedModulePath3 = (sourcePath) => {
@@ -4710,7 +4735,13 @@ var ISLAND_COMPONENT_ID_LENGTH = 8, serverCacheRoot3, compiledModuleCache3, sync
   ].join(`
 `) : nonVueLines.join(`
 `);
-}, extractRelativeVueImports = (sourceCode) => Array.from(sourceCode.matchAll(/import\s+[\s\S]+?['"]([^'"]+)['"]/g)).map((match) => match[1]).filter((importPath) => typeof importPath === "string" && importPath.startsWith(".") && importPath.endsWith(".vue")), compileVueServerModule = async (sourcePath) => {
+}, RELATIVE_SPECIFIER_PATTERN, extractRelativeImports = (code) => Array.from(new Set(Array.from(code.matchAll(RELATIVE_SPECIFIER_PATTERN), (match) => match.groups?.spec).filter((spec) => spec !== undefined))), resolveFromSource = (spec, sourcePath) => {
+  try {
+    return Bun.resolveSync(spec, dirname5(sourcePath));
+  } catch {
+    return null;
+  }
+}, compileVueServerModule = async (sourcePath) => {
   syncIslandGeneration2();
   const cachedModulePath = compiledModuleCache3.get(sourcePath);
   if (cachedModulePath)
@@ -4718,7 +4749,7 @@ var ISLAND_COMPONENT_ID_LENGTH = 8, serverCacheRoot3, compiledModuleCache3, sync
   const compiler = await loadVueCompiler();
   const source = await Bun.file(sourcePath).text();
   const { descriptor } = compiler.parse(source, { filename: sourcePath });
-  const componentId = Bun.hash(sourcePath).toString(BASE_36_RADIX).slice(0, ISLAND_COMPONENT_ID_LENGTH);
+  const componentId = toKebab(basename4(sourcePath, ".vue"));
   const hasScript = descriptor.script || descriptor.scriptSetup;
   const compiledScript = hasScript ? compiler.compileScript(descriptor, {
     fs: {
@@ -4743,10 +4774,10 @@ var ISLAND_COMPONENT_ID_LENGTH = 8, serverCacheRoot3, compiledModuleCache3, sync
     ssr: true,
     ssrCssVars: descriptor.cssVars
   }).code : "const ssrRender = () => {};";
-  const childImportPaths = extractRelativeVueImports(compiledScript.content);
-  const compiledChildren = await Promise.all(childImportPaths.map(async (relativeImport) => ({
-    compiledPath: await compileVueServerModule(resolve5(dirname5(sourcePath), relativeImport)),
-    spec: relativeImport
+  const relativeImports = extractRelativeImports(compiledScript.content);
+  const compiledChildren = await Promise.all(relativeImports.filter((spec) => spec.endsWith(".vue")).map(async (spec) => ({
+    compiledPath: await compileVueServerModule(resolve5(dirname5(sourcePath), spec)),
+    spec
   })));
   const strippedScript = stripExports(compiledScript.content);
   const transpiledScript = transpiler2.transformSync(strippedScript);
@@ -4758,17 +4789,28 @@ var ISLAND_COMPONENT_ID_LENGTH = 8, serverCacheRoot3, compiledModuleCache3, sync
   ].join(`
 `));
   const compiledModulePath = getCachedModulePath3(sourcePath);
-  let rewritten = assembled;
+  const rewrittenSpecifiers = new Map;
   for (const child of compiledChildren) {
-    rewritten = rewritten.replaceAll(child.spec, ensureRelativeImportPath2(compiledModulePath, child.compiledPath));
+    rewrittenSpecifiers.set(child.spec, ensureRelativeImportPath2(compiledModulePath, child.compiledPath));
   }
+  for (const spec of extractRelativeImports(assembled)) {
+    if (rewrittenSpecifiers.has(spec))
+      continue;
+    const resolvedImport = resolveFromSource(spec, sourcePath);
+    if (!resolvedImport)
+      continue;
+    rewrittenSpecifiers.set(spec, ensureRelativeImportPath2(compiledModulePath, resolvedImport));
+  }
+  const rewritten = assembled.replace(RELATIVE_SPECIFIER_PATTERN, (match, prefix, quote, spec) => {
+    const target = rewrittenSpecifiers.get(spec);
+    return target ? `${prefix}${quote}${target}${quote}` : match;
+  });
   await mkdir3(dirname5(compiledModulePath), { recursive: true });
   await writeIfChanged2(compiledModulePath, rewritten);
   compiledModuleCache3.set(sourcePath, compiledModulePath);
   return compiledModulePath;
 };
 var init_vueServerModule = __esm(() => {
-  init_constants();
   init_isFile();
   serverCacheRoot3 = join8(process.cwd(), ".absolutejs", "islands", "vue");
   compiledModuleCache3 = new Map;
@@ -4776,6 +4818,7 @@ var init_vueServerModule = __esm(() => {
     compiledModuleCache3.clear();
   });
   transpiler2 = new Transpiler({ loader: "ts", target: "browser" });
+  RELATIVE_SPECIFIER_PATTERN = /(\bfrom\s*|\bimport\s*\(\s*|\bimport\s+)(['"])(?<spec>\.{1,2}\/[^'"]*)\2/g;
 });
 
 // src/core/renderIslandMarkup.ts
@@ -4937,6 +4980,18 @@ var init_renderIslandMarkup = __esm(() => {
   });
 });
 
+// src/utils/requestRenderUrl.ts
+var requestRenderUrl = (request) => {
+  if (!request)
+    return;
+  try {
+    const parsed = new URL(request.url);
+    return `${parsed.pathname.replace(/\/{2,}/g, "/")}${parsed.search}`;
+  } catch {
+    return;
+  }
+};
+
 // src/react/pageHandler.ts
 init_cspNonceRef();
 init_islandPageContext();
@@ -5222,16 +5277,7 @@ init_spaRouteManifest();
 init_resolveConvention();
 init_browserTranslation();
 var withRequestUrl = (props, url) => Object.assign(Object.create(null), props, { url });
-var resolveRequestPathname = (request) => {
-  if (!request)
-    return;
-  try {
-    const parsed = new URL(request.url);
-    return `${parsed.pathname}${parsed.search}`;
-  } catch {
-    return;
-  }
-};
+var resolveRequestPathname = (request) => requestRenderUrl(request);
 var buildRefreshSetup = () => {
   if (isProductionRuntime()) {
     return "";
@@ -5407,6 +5453,7 @@ var reactFileRoute = (route) => defineFileRouteWith("react", route, async ({ man
 init_cspNonceRef();
 init_requestContext();
 init_pageResponseCache();
+import { AsyncLocalStorage as AsyncLocalStorage5 } from "async_hooks";
 import { readFile } from "fs/promises";
 import { dirname, join } from "path";
 init_devRouteRegistrationCallsite();
@@ -5479,6 +5526,27 @@ var injectFlightPayload = (html, flight, nonce) => {
   });
 };
 
+// src/react/serverComponents/nodeRendererRef.ts
+var STORAGE_KEY = Symbol.for("absolutejs.reactServerNodeRendererStorage");
+var isRendererStorage = (value) => typeof value === "object" && value !== null && ("getStore" in value) && typeof value.getStore === "function" && ("run" in value) && typeof value.run === "function";
+var isRenderer = (value) => typeof value === "function";
+var readStorage = () => {
+  const storage = Reflect.get(globalThis, STORAGE_KEY);
+  return isRendererStorage(storage) ? storage : undefined;
+};
+var getReactServerNodeRenderer = () => {
+  const store = readStorage()?.getStore();
+  return isRenderer(store) ? store : undefined;
+};
+var runWithReactServerNodeRenderer = (renderer, createStorage, render) => {
+  let storage = readStorage();
+  if (!storage) {
+    storage = createStorage();
+    Reflect.set(globalThis, STORAGE_KEY, storage);
+  }
+  return storage.run(renderer, render);
+};
+
 // src/react/serverComponents/pageHandler.ts
 var isRecord4 = (value) => typeof value === "object" && value !== null;
 var isPageModule = (value) => isRecord4(value) && typeof value.Page === "function" && isRecord4(value.clientManifest) && typeof value.createElement === "function" && typeof value.renderToReadableStream === "function";
@@ -5521,6 +5589,16 @@ var loadRenderer = async (rendererPath) => {
 var logRenderError = (error) => {
   console.error("[SSR] React Server Components error:", error);
 };
+var createNodeRenderer = (pageModule, renderer) => {
+  const { renderStaticHtml } = renderer;
+  if (!renderStaticHtml)
+    return;
+  const render = (node) => renderStaticHtml(pageModule.renderToReadableStream(node, pageModule.clientManifest, {
+    onError: logRenderError
+  }));
+  return render;
+};
+var createRendererStorage = () => new AsyncLocalStorage5;
 var handleReactServerPageRequest = async (input) => {
   const request = input.request ?? getCurrentAbsoluteRequest();
   if (input.page === "") {
@@ -5536,11 +5614,13 @@ var handleReactServerPageRequest = async (input) => {
       ]);
       const renderer = await loadRenderer(runtime.ssr);
       const nonce = readCspNonce();
-      const flight = pageModule.renderToReadableStream(pageModule.createElement(pageModule.Page, input.props ?? {}), pageModule.clientManifest, { onError: logRenderError });
+      const renderFlight = () => pageModule.renderToReadableStream(pageModule.createElement(pageModule.Page, input.props ?? {}), pageModule.clientManifest, { onError: logRenderError });
+      const nodeRenderer = createNodeRenderer(pageModule, renderer);
+      const flight = nodeRenderer ? runWithReactServerNodeRenderer(nodeRenderer, createRendererStorage, renderFlight) : renderFlight();
       const [forHtml, forPayload] = flight.tee();
       const html = await renderer.renderHtml(forHtml, {
         bootstrapModules: [runtime.client],
-        bootstrapScriptContent: BROWSER_TRANSLATION_BASELINE_SCRIPT,
+        bootstrapScriptContent: `${BROWSER_TRANSLATION_BASELINE_SCRIPT}window.__ABS_SLOT_HYDRATION_PENDING__=true;`,
         nonce,
         onError: logRenderError
       });
@@ -5563,36 +5643,122 @@ var handleReactServerPageRequest = async (input) => {
 // src/react/Island.tsx
 init_islandMarkupAttributes();
 init_renderIslandMarkup();
-import { jsx } from "react/jsx-runtime";
-var Island = async (props) => {
+
+// src/core/islandStylesheet.ts
+init_cspNonceRef();
+var INLINE_ISLAND_STYLES_CONTEXT_KEY = "__absoluteInlineIslandStyles";
+var ISLAND_STYLE_PRECEDENCE = "absolute-islands";
+var ISLAND_FRAMEWORKS2 = [
+  "react",
+  "svelte",
+  "vue",
+  "angular"
+];
+var toIslandFramework2 = (value) => ISLAND_FRAMEWORKS2.find((framework) => framework === value);
+var readIslandManifest = () => {
+  const manifest = typeof window === "undefined" ? Reflect.get(globalThis, "__absoluteManifest") : Reflect.get(window, "__ABSOLUTE_MANIFEST__");
+  return typeof manifest === "object" && manifest !== null ? manifest : undefined;
+};
+var findIslandStylesheet = (framework, component) => {
+  const islandFramework = toIslandFramework2(framework);
+  const manifest = readIslandManifest();
+  if (!islandFramework || !manifest)
+    return;
+  const key = getIslandStyleManifestKey(islandFramework, component);
+  const href = Reflect.get(manifest, key);
+  return typeof href === "string" ? { href, key } : undefined;
+};
+var readIslandStyleNonce = () => {
+  if (typeof document === "undefined")
+    return readCspNonce() ?? "";
+  return Array.from(document.querySelectorAll("script[nonce]")).find((element) => element.nonce)?.nonce ?? "";
+};
+
+// src/react/IslandStyleLink.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var IslandStyleLink = ({
+  component,
+  framework
+}) => {
+  const stylesheet = findIslandStylesheet(framework, component);
+  if (!stylesheet)
+    return null;
+  const nonce = readIslandStyleNonce();
+  return /* @__PURE__ */ jsx("link", {
+    "data-island-style": stylesheet.key,
+    href: stylesheet.href,
+    nonce: nonce || undefined,
+    precedence: ISLAND_STYLE_PRECEDENCE,
+    rel: "stylesheet"
+  });
+};
+var IslandWithStylesheet = ({
+  component,
+  framework,
+  marker
+}) => /* @__PURE__ */ jsxs(Fragment, {
+  children: [
+    /* @__PURE__ */ jsx(IslandStyleLink, {
+      component,
+      framework
+    }),
+    /* @__PURE__ */ jsx("div", {
+      ...marker
+    })
+  ]
+});
+
+// src/react/Island.tsx
+import { jsx as jsx2, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
+var Island = (props) => {
   if (typeof window !== "undefined") {
-    return /* @__PURE__ */ jsx("div", {
-      ...getIslandMarkerAttributes(props),
-      suppressHydrationWarning: true
+    return /* @__PURE__ */ jsx2(IslandWithStylesheet, {
+      component: props.component,
+      framework: props.framework,
+      marker: {
+        ...getIslandMarkerAttributes(props),
+        suppressHydrationWarning: true
+      }
     });
   }
-  const result = await renderIslandResult(requireCurrentIslandRegistry(), props);
-  return /* @__PURE__ */ jsx("div", {
-    ...result.attributes,
-    dangerouslySetInnerHTML: { __html: result.html }
+  return /* @__PURE__ */ jsx2(ServerIsland, {
+    island: props,
+    registry: requireCurrentIslandRegistry()
+  });
+};
+var ServerIsland = async ({ island, registry }) => {
+  const { attributes, html } = await renderIslandResult(registry, island);
+  return /* @__PURE__ */ jsxs2(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsx2(IslandStyleLink, {
+        component: island.component,
+        framework: island.framework
+      }),
+      /* @__PURE__ */ jsx2("div", {
+        ...attributes,
+        dangerouslySetInnerHTML: { __html: html }
+      })
+    ]
   });
 };
 // src/react/createIsland.tsx
 init_islandMarkupAttributes();
-init_renderIslandMarkup();
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var createTypedIsland = (registry) => {
-  const Island = async (props) => {
+  const Island = (props) => {
     if (typeof window !== "undefined") {
-      return /* @__PURE__ */ jsx2("div", {
-        ...getIslandMarkerAttributes(props),
-        suppressHydrationWarning: true
+      return /* @__PURE__ */ jsx3(IslandWithStylesheet, {
+        component: props.component,
+        framework: props.framework,
+        marker: {
+          ...getIslandMarkerAttributes(props),
+          suppressHydrationWarning: true
+        }
       });
     }
-    const result = await renderIslandResult(registry, props);
-    return /* @__PURE__ */ jsx2("div", {
-      ...result.attributes,
-      dangerouslySetInnerHTML: { __html: result.html }
+    return /* @__PURE__ */ jsx3(ServerIsland, {
+      island: props,
+      registry
     });
   };
   return Island;
@@ -5710,5 +5876,5 @@ export {
   useIslandStore
 };
 
-//# debugId=76F279FE64B890CE64756E2164756E21
+//# debugId=EB99DA4FD961DFEC64756E2164756E21
 //# sourceMappingURL=index.js.map