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

package/dist/vue/index.js

@@ -491,6 +491,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);
@@ -502,12 +508,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;
@@ -927,7 +927,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) => {
@@ -964,12 +964,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) {
@@ -1151,7 +1166,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)
@@ -1175,6 +1190,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
@@ -4946,9 +4968,9 @@ var createVueCompiler = async () => {
 // src/core/vueServerModule.ts
 import { readFileSync as readFileSync7, realpathSync } from "fs";
 import { mkdir as mkdir3 } from "fs/promises";
-import { dirname as dirname7, join as join9, relative as relative4, resolve as resolve7 } from "path";
+import { basename as basename5, dirname as dirname7, join as join9, relative as relative4, resolve as resolve7 } 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(dirname7(from), target).replace(/\\/g, "/");
   return importPath.startsWith(".") ? importPath : `./${importPath}`;
 }, getCachedModulePath3 = (sourcePath) => {
@@ -4990,7 +5012,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(basename5(sourcePath, ".vue"));
   const hasScript = descriptor.script || descriptor.scriptSetup;
   const compiledScript = hasScript ? compiler.compileScript(descriptor, {
     fs: {
@@ -5040,7 +5062,6 @@ var ISLAND_COMPONENT_ID_LENGTH = 8, serverCacheRoot3, compiledModuleCache3, sync
   return compiledModulePath;
 };
 var init_vueServerModule = __esm(() => {
-  init_constants();
   init_isFile();
   serverCacheRoot3 = join9(process.cwd(), ".absolutejs", "islands", "vue");
   compiledModuleCache3 = new Map;
@@ -5209,6 +5230,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/vue/pageHandler.ts
 init_escapeScriptContent();
 init_cspNonceRef();
@@ -5216,6 +5249,38 @@ init_inlinePageCss();
 init_spaRouteCss();
 init_spaRouteManifest();
 init_islandPageContext();
+
+// 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/vue/pageHandler.ts
 init_devRouteRegistrationCallsite();
 init_requestContext();
 init_pageProtocol();
@@ -5618,16 +5683,7 @@ var readSetupAppHook = (value) => {
 };
 var readHasSpaRoutes = (value) => isRecord4(value) && Array.isArray(value["routes"]);
 var readDefaultExport = (value) => isRecord4(value) ? value.default : undefined;
-var resolveRequestRenderUrl = (request) => {
-  if (!request)
-    return "/";
-  try {
-    const parsed = new URL(request.url);
-    return `${parsed.pathname}${parsed.search}`;
-  } catch {
-    return "/";
-  }
-};
+var resolveRequestRenderUrl = (request) => requestRenderUrl(request) ?? "/";
 var primeVueStream = async (stream) => {
   const reader = stream.getReader();
   const firstChunk = await reader.read();
@@ -5783,10 +5839,12 @@ var handleVuePageRequest = async (input) => {
       }
       if (resolvedOptions?.collectStreamingSlots !== true) {
         const body = await renderToString(app, ssrContext);
-        return new Response(`${head}${body}${buildTail()}`, {
+        const html = injectIslandPageContext(`${head}${body}${buildTail()}`, { hasIslands: resolvedPage.hasIslands ? true : undefined });
+        return new Response(html, {
           headers: streamingPageHeaders()
         });
       }
+      ssrContext[INLINE_ISLAND_STYLES_CONTEXT_KEY] = new Set;
       const bodyStream = renderToWebStream(app, ssrContext);
       const { firstChunk, reader } = await primeVueStream(bodyStream);
       const stream = new ReadableStream({
@@ -5856,7 +5914,12 @@ var applyVueRouterRedirect = (router, requestedUrl, setRedirect, status = DEFAUL
 var defineRoutes = (routes) => routes;
 var defineVueSetupApp = (hook) => hook;
 // src/vue/Island.ts
-import { defineComponent, h, onServerPrefetch } from "vue";
+import {
+  defineComponent,
+  h as h2,
+  onServerPrefetch,
+  useSSRContext
+} from "vue";
 
 // src/client/preserveIslandMarkup.ts
 init_islandMarkupAttributes();
@@ -5910,6 +5973,21 @@ var preserveIslandMarkup = (props) => {
     innerHTML: liveCandidate.innerHTML
   };
 };
+var claimedServerIslands = new WeakSet;
+var claimServerIslandStyleLink = (props) => {
+  if (typeof document === "undefined")
+    return null;
+  const element = Array.from(document.querySelectorAll('[data-island="true"]')).find((candidate) => !claimedServerIslands.has(candidate) && isMatchingIslandElement(candidate, props));
+  if (!element)
+    return null;
+  claimedServerIslands.add(element);
+  const previous = element.previousSibling;
+  if (!(previous instanceof HTMLLinkElement))
+    return null;
+  const key = previous.dataset.islandStyle;
+  const href = previous.getAttribute("href");
+  return key && href ? { href, key } : null;
+};
 var innerHtmlObjects = new Map;
 var getStableInnerHtml = (html) => {
   const existing = innerHtmlObjects.get(html);
@@ -5925,7 +6003,7 @@ init_islandMarkupAttributes();
 
 // src/core/normalizeIslandProps.ts
 var EMPTY_PROPS = {};
-var ISLAND_FRAMEWORKS = [
+var ISLAND_FRAMEWORKS3 = [
   "react",
   "svelte",
   "vue",
@@ -5938,7 +6016,7 @@ var ISLAND_HYDRATE_MODES = [
   "visible",
   "none"
 ];
-var isIslandFramework = (value) => ISLAND_FRAMEWORKS.some((framework) => framework === value);
+var isIslandFramework = (value) => ISLAND_FRAMEWORKS3.some((framework) => framework === value);
 var isIslandHydrate = (value) => ISLAND_HYDRATE_MODES.some((mode) => mode === value);
 var normalizeRuntimeIslandRenderProps = (raw) => {
   const { component, framework, hydrate, props } = raw;
@@ -5977,6 +6055,40 @@ var normalizeIslandProps = (value) => {
 
 // src/vue/Island.ts
 init_renderIslandMarkup();
+
+// src/vue/islandStyleLink.ts
+import { h } from "vue";
+var readInlineStyleKeys = (ssrContext) => {
+  if (typeof ssrContext !== "object" || ssrContext === null)
+    return;
+  const keys = Reflect.get(ssrContext, INLINE_ISLAND_STYLES_CONTEXT_KEY);
+  return keys instanceof Set ? keys : undefined;
+};
+var claimInlineIslandStyleLink = (ssrContext, props) => {
+  const claimed = readInlineStyleKeys(ssrContext);
+  const stylesheet = claimed ? findIslandStylesheet(props.framework, props.component) : undefined;
+  if (!claimed || !stylesheet || claimed.has(stylesheet.key))
+    return null;
+  claimed.add(stylesheet.key);
+  const nonce = readIslandStyleNonce();
+  return {
+    "data-island-style": stylesheet.key,
+    href: stylesheet.href,
+    ...nonce ? { nonce } : {},
+    rel: "stylesheet"
+  };
+};
+var hydratedIslandStyleLink = (props) => {
+  const link = claimServerIslandStyleLink(props);
+  return link ? {
+    "data-island-style": link.key,
+    href: link.href,
+    rel: "stylesheet"
+  } : null;
+};
+var withIslandStyleLink = (link, island) => link ? [h("link", link), island] : island;
+
+// src/vue/Island.ts
 var defineRuntimeIslandComponent = (setup) => defineComponent({
   name: "AbsoluteIsland",
   props: {
@@ -6001,25 +6113,33 @@ var defineRuntimeIslandComponent = (setup) => defineComponent({
 });
 var Island = defineRuntimeIslandComponent((props) => {
   const isBrowser = typeof window !== "undefined";
+  const ssrContext = isBrowser ? undefined : useSSRContext();
   let markerAttributes = getIslandMarkerAttributes(props);
   let html = "";
+  let styleLink = isBrowser ? hydratedIslandStyleLink(props) : null;
   onServerPrefetch(async () => {
     const result = await renderIslandResult(requireCurrentIslandRegistry(), props);
     ({ attributes: markerAttributes, html } = result);
+    styleLink = claimInlineIslandStyleLink(ssrContext, props);
   });
   return () => {
     const preserved = isBrowser ? preserveIslandMarkup(props) : null;
-    return h("div", {
+    return withIslandStyleLink(styleLink, h2("div", {
       ...preserved?.attributes ?? markerAttributes,
       "data-allow-mismatch": "",
       innerHTML: isBrowser ? preserved?.innerHTML : html
-    });
+    }));
   };
 });
 // src/vue/createIsland.ts
 init_islandMarkupAttributes();
 init_renderIslandMarkup();
-import { defineComponent as defineComponent2, h as h2, onServerPrefetch as onServerPrefetch2 } from "vue";
+import {
+  defineComponent as defineComponent2,
+  h as h3,
+  onServerPrefetch as onServerPrefetch2,
+  useSSRContext as useSSRContext2
+} from "vue";
 var defineRuntimeIslandComponent2 = (setup) => defineComponent2({
   name: "AbsoluteIsland",
   props: {
@@ -6044,17 +6164,20 @@ var defineRuntimeIslandComponent2 = (setup) => defineComponent2({
 });
 var createTypedIsland = (registry) => defineRuntimeIslandComponent2((props) => {
   const isBrowser = typeof window !== "undefined";
+  const ssrContext = isBrowser ? undefined : useSSRContext2();
   let markerAttributes = getIslandMarkerAttributes(props);
   let html = "";
+  let styleLink = isBrowser ? hydratedIslandStyleLink(props) : null;
   onServerPrefetch2(async () => {
     const result = await renderIslandResult(registry, props);
     ({ attributes: markerAttributes, html } = result);
+    styleLink = claimInlineIslandStyleLink(ssrContext, props);
   });
-  return () => h2("div", {
+  return () => withIslandStyleLink(styleLink, h3("div", {
     ...markerAttributes,
     "data-allow-mismatch": "",
     innerHTML: isBrowser ? undefined : html
-  });
+  }));
 });
 // src/vue/useIslandStore.ts
 import { customRef, onBeforeUnmount } from "vue";
@@ -6334,7 +6457,7 @@ var preserveBrowserTranslation = (strategy) => {
   return translatedStrategy;
 };
 // src/vue/components/Image.ts
-import { computed, defineComponent as defineComponent3, h as h3, ref } from "vue";
+import { computed, defineComponent as defineComponent3, h as h4, ref } from "vue";
 
 // src/utils/imageClient.ts
 init_constants();
@@ -6471,7 +6594,7 @@ var Image = defineComponent3({
       props.onError?.(event);
     };
     return () => {
-      const imgNode = h3("img", {
+      const imgNode = h4("img", {
         alt: props.alt,
         class: props.className,
         crossorigin: props.crossOrigin,
@@ -6488,7 +6611,7 @@ var Image = defineComponent3({
         style: imgStyle.value,
         width: props.fill ? undefined : props.width
       });
-      return props.fill ? h3("span", { style: fillWrapperStyle }, [imgNode]) : imgNode;
+      return props.fill ? h4("span", { style: fillWrapperStyle }, [imgNode]) : imgNode;
     };
   }
 });
@@ -6496,12 +6619,12 @@ var Image = defineComponent3({
 import {
   cloneVNode,
   defineComponent as defineComponent4,
-  h as h4,
+  h as h5,
   isVNode,
   onMounted,
   onBeforeUnmount as onBeforeUnmount2,
   ref as ref2,
-  useSSRContext
+  useSSRContext as useSSRContext3
 } from "vue";
 var renderVueNodesToHtml = async (nodes) => {
   const { createSSRApp, h: createVNode } = await import("vue");
@@ -6644,7 +6767,7 @@ var SuspenseSlot = defineComponent4({
     const hasError = ref2(false);
     const hasPatchedDom = ref2(readPatchedDomState());
     const usesFrameworkSlots = hasFrameworkSlots(slots.default, slots.fallback, slots.error, props.promise);
-    const isSsrRender = useSSRContext() !== undefined;
+    const isSsrRender = useSSRContext3() !== undefined;
     if (isSsrRender) {
       registerSuspenseSlotForSsr(props, slots, usesFrameworkSlots);
     }
@@ -6694,14 +6817,14 @@ var SuspenseSlot = defineComponent4({
     };
     return () => {
       if (!usesFrameworkSlots) {
-        return h4("div", {
+        return h5("div", {
           class: props.className,
           "data-absolute-slot": "true",
           id: props.id,
           innerHTML: props.fallbackHtml
         });
       }
-      return h4("div", {
+      return h5("div", {
         class: props.className,
         "data-absolute-slot": "true",
         "data-allow-mismatch": "",
@@ -6711,7 +6834,7 @@ var SuspenseSlot = defineComponent4({
   }
 });
 // src/vue/components/StreamSlot.ts
-import { defineComponent as defineComponent5, h as h5, useSSRContext as useSSRContext2 } from "vue";
+import { defineComponent as defineComponent5, h as h6, useSSRContext as useSSRContext4 } from "vue";
 var StreamSlot = defineComponent5({
   name: "AbsoluteStreamSlot",
   props: {
@@ -6726,10 +6849,10 @@ var StreamSlot = defineComponent5({
     timeoutMs: { default: undefined, type: Number }
   },
   setup(props) {
-    if (useSSRContext2() !== undefined) {
+    if (useSSRContext4() !== undefined) {
       registerStreamSlotForSsr(props);
     }
-    return () => h5("div", {
+    return () => h6("div", {
       class: props.className,
       "data-absolute-slot": "true",
       id: props.id,
@@ -6914,7 +7037,7 @@ var useServerData = (key, fetcher, options = {}) => {
   return state;
 };
 // src/vue/router/Link.ts
-import { defineComponent as defineComponent6, getCurrentInstance as getCurrentInstance2, h as h6 } from "vue";
+import { defineComponent as defineComponent6, getCurrentInstance as getCurrentInstance2, h as h7 } from "vue";
 
 // src/client/prefetch.ts
 var PREFETCH_CACHE_LIMIT = 16;
@@ -7382,7 +7505,7 @@ var Link = defineComponent6({
         router.push(props.href);
       }
     };
-    return () => h6("a", {
+    return () => h7("a", {
       download: props.download,
       href: props.href,
       onBlur,
@@ -7418,5 +7541,5 @@ export {
   useServerData
 };
 
-//# debugId=BD21CC972FDF821C64756E2164756E21
+//# debugId=3A0CD60AE9E8377764756E2164756E21
 //# sourceMappingURL=index.js.map