@unhead/solid-js 3.0.0-beta.2 → 3.0.0-beta.5

package/dist/client.mjs

@@ -1,15 +1,13 @@
-import { createHead as createHead$1, createDebouncedFn, renderDOMHead } from 'unhead/client';
+import { createDomRenderer, createDebouncedFn, createHead as createHead$1 } from 'unhead/client';
 export { renderDOMHead } from 'unhead/client';
 export { U as UnheadContext } from './shared/solid-js.BJ7JZ7E-.mjs';
 import 'solid-js';
 
 function createHead(options = {}) {
-  const head = createHead$1({
-    domOptions: {
-      render: createDebouncedFn(() => renderDOMHead(head), (fn) => setTimeout(fn, 0))
-    },
-    ...options
-  });
+  const domRenderer = createDomRenderer();
+  let head;
+  const debouncedRenderer = createDebouncedFn(() => domRenderer(head), (fn) => setTimeout(fn, 0));
+  head = createHead$1({ render: debouncedRenderer, ...options });
   return head;
 }
 

package/dist/index.mjs

@@ -1,4 +1,5 @@
 import { onMount, onCleanup, useContext, createSignal, createEffect } from 'solid-js';
+import { isServer } from 'solid-js/web';
 import { useScript as useScript$1, useHead as useHead$1, useHeadSafe as useHeadSafe$1, useSeoMeta as useSeoMeta$1 } from 'unhead';
 import { U as UnheadContext } from './shared/solid-js.BJ7JZ7E-.mjs';
 
@@ -20,16 +21,17 @@ function useUnhead() {
 }
 function withSideEffects(input, options, fn) {
   const unhead = options.head || useUnhead();
-  const [entry] = createSignal(fn(unhead, input, options));
-  createEffect(() => {
-    entry().patch(input);
-  }, [input]);
-  createEffect(() => {
-    return () => {
-      entry().dispose();
-    };
-  }, []);
-  return entry();
+  const entry = fn(unhead, input, options);
+  if (!isServer) {
+    const [entrySignal] = createSignal(entry);
+    createEffect(() => {
+      entrySignal().patch(input);
+    });
+    createEffect(() => {
+      return () => entry.dispose();
+    });
+  }
+  return entry;
 }
 function useHead(input = {}, options = {}) {
   return withSideEffects(input, options, useHead$1);

package/dist/server.d.mts

@@ -2,8 +2,8 @@ import * as solid_js from 'solid-js';
 import * as unhead_types from 'unhead/types';
 import { Unhead } from 'unhead/types';
 export { CreateServerHeadOptions, SSRHeadPayload, Unhead } from 'unhead/types';
-export { createHead, extractUnheadInputFromHtml, renderSSRHead, transformHtmlTemplate } from 'unhead/server';
+export { createHead, renderSSRHead, transformHtmlTemplate } from 'unhead/server';
 
-declare const UnheadContext: solid_js.Context<Unhead<unhead_types.ResolvableHead> | null>;
+declare const UnheadContext: solid_js.Context<Unhead<unhead_types.ResolvableHead, unknown> | null>;
 
 export { UnheadContext };

package/dist/server.d.ts

@@ -2,8 +2,8 @@ import * as solid_js from 'solid-js';
 import * as unhead_types from 'unhead/types';
 import { Unhead } from 'unhead/types';
 export { CreateServerHeadOptions, SSRHeadPayload, Unhead } from 'unhead/types';
-export { createHead, extractUnheadInputFromHtml, renderSSRHead, transformHtmlTemplate } from 'unhead/server';
+export { createHead, renderSSRHead, transformHtmlTemplate } from 'unhead/server';
 
-declare const UnheadContext: solid_js.Context<Unhead<unhead_types.ResolvableHead> | null>;
+declare const UnheadContext: solid_js.Context<Unhead<unhead_types.ResolvableHead, unknown> | null>;
 
 export { UnheadContext };

package/dist/server.mjs

@@ -1,3 +1,3 @@
 export { U as UnheadContext } from './shared/solid-js.BJ7JZ7E-.mjs';
-export { createHead, extractUnheadInputFromHtml, renderSSRHead, transformHtmlTemplate } from 'unhead/server';
+export { createHead, renderSSRHead, transformHtmlTemplate } from 'unhead/server';
 import 'solid-js';

package/dist/stream/client.d.mts

@@ -0,0 +1,12 @@
+export { UnheadContext } from '../server.mjs';
+export { CreateStreamableClientHeadOptions, UnheadStreamQueue, createStreamableHead } from 'unhead/stream/client';
+import 'solid-js';
+import 'unhead/types';
+import 'unhead/server';
+
+/**
+ * Client-side HeadStream - returns null (script already executed during SSR streaming)
+ */
+declare function HeadStream(): null;
+
+export { HeadStream };

package/dist/stream/client.d.ts

@@ -0,0 +1,12 @@
+export { UnheadContext } from '../server.js';
+export { CreateStreamableClientHeadOptions, UnheadStreamQueue, createStreamableHead } from 'unhead/stream/client';
+import 'solid-js';
+import 'unhead/types';
+import 'unhead/server';
+
+/**
+ * Client-side HeadStream - returns null (script already executed during SSR streaming)
+ */
+declare function HeadStream(): null;
+
+export { HeadStream };

package/dist/stream/client.mjs

@@ -0,0 +1,9 @@
+export { U as UnheadContext } from '../shared/solid-js.BJ7JZ7E-.mjs';
+export { createStreamableHead } from 'unhead/stream/client';
+import 'solid-js';
+
+function HeadStream() {
+  return null;
+}
+
+export { HeadStream };

package/dist/stream/server.d.mts

@@ -0,0 +1,52 @@
+import { Unhead, CreateStreamableServerHeadOptions } from 'unhead/types';
+export { UnheadContext } from '../server.mjs';
+export { StreamingTemplateParts, WebStreamableHeadContext, prepareStreamingTemplate, renderSSRHeadShell, renderSSRHeadSuspenseChunk, wrapStream } from 'unhead/stream/server';
+import 'solid-js';
+import 'unhead/server';
+
+/**
+ * Solid-js streaming context returned by createStreamableHead.
+ */
+interface SolidStreamableHeadContext {
+    head: Unhead;
+    /**
+     * Callback to pass to renderToStream's onCompleteShell option.
+     * This captures head entries from shell components before streaming starts.
+     */
+    onCompleteShell: () => void;
+    /**
+     * Wrap a web ReadableStream to handle head injection automatically.
+     * Must be called after onCompleteShell has fired.
+     */
+    wrapStream: (stream: ReadableStream<Uint8Array>, template: string) => ReadableStream<Uint8Array>;
+}
+/**
+ * Creates a head instance configured for Solid-js streaming SSR.
+ *
+ * @example
+ * ```tsx
+ * const { head, onCompleteShell, wrapStream } = createStreamableHead()
+ *
+ * const stream = renderToStream(() => (
+ *   <UnheadContext.Provider value={head}>
+ *     <App />
+ *   </UnheadContext.Provider>
+ * ), { onCompleteShell })
+ *
+ * return wrapStream(stream, template)
+ * ```
+ */
+declare function createStreamableHead(options?: CreateStreamableServerHeadOptions): SolidStreamableHeadContext;
+/**
+ * Streaming script component - outputs inline script with current head state.
+ * The Vite plugin with streaming: true auto-injects this.
+ *
+ * Note: In SolidJS, this only outputs content AFTER the shell is complete.
+ * During shell rendering, we accumulate entries which are captured by onCompleteShell.
+ */
+declare function HeadStream(): {
+    t: string;
+} | null;
+
+export { HeadStream, createStreamableHead };
+export type { SolidStreamableHeadContext };

package/dist/stream/server.d.ts

@@ -0,0 +1,52 @@
+import { Unhead, CreateStreamableServerHeadOptions } from 'unhead/types';
+export { UnheadContext } from '../server.js';
+export { StreamingTemplateParts, WebStreamableHeadContext, prepareStreamingTemplate, renderSSRHeadShell, renderSSRHeadSuspenseChunk, wrapStream } from 'unhead/stream/server';
+import 'solid-js';
+import 'unhead/server';
+
+/**
+ * Solid-js streaming context returned by createStreamableHead.
+ */
+interface SolidStreamableHeadContext {
+    head: Unhead;
+    /**
+     * Callback to pass to renderToStream's onCompleteShell option.
+     * This captures head entries from shell components before streaming starts.
+     */
+    onCompleteShell: () => void;
+    /**
+     * Wrap a web ReadableStream to handle head injection automatically.
+     * Must be called after onCompleteShell has fired.
+     */
+    wrapStream: (stream: ReadableStream<Uint8Array>, template: string) => ReadableStream<Uint8Array>;
+}
+/**
+ * Creates a head instance configured for Solid-js streaming SSR.
+ *
+ * @example
+ * ```tsx
+ * const { head, onCompleteShell, wrapStream } = createStreamableHead()
+ *
+ * const stream = renderToStream(() => (
+ *   <UnheadContext.Provider value={head}>
+ *     <App />
+ *   </UnheadContext.Provider>
+ * ), { onCompleteShell })
+ *
+ * return wrapStream(stream, template)
+ * ```
+ */
+declare function createStreamableHead(options?: CreateStreamableServerHeadOptions): SolidStreamableHeadContext;
+/**
+ * Streaming script component - outputs inline script with current head state.
+ * The Vite plugin with streaming: true auto-injects this.
+ *
+ * Note: In SolidJS, this only outputs content AFTER the shell is complete.
+ * During shell rendering, we accumulate entries which are captured by onCompleteShell.
+ */
+declare function HeadStream(): {
+    t: string;
+} | null;
+
+export { HeadStream, createStreamableHead };
+export type { SolidStreamableHeadContext };

package/dist/stream/server.mjs

@@ -0,0 +1,57 @@
+import { useContext } from 'solid-js';
+import { ssr } from 'solid-js/web';
+import { createStreamableHead as createStreamableHead$1, prepareStreamingTemplate, renderSSRHeadSuspenseChunk } from 'unhead/stream/server';
+export { prepareStreamingTemplate, renderSSRHeadShell, renderSSRHeadSuspenseChunk, wrapStream } from 'unhead/stream/server';
+import { U as UnheadContext } from '../shared/solid-js.BJ7JZ7E-.mjs';
+
+function createStreamableHead(options = {}) {
+  const { head } = createStreamableHead$1(options);
+  let resolveShellReady;
+  const shellReady = new Promise((resolve) => {
+    resolveShellReady = resolve;
+  });
+  head._solidShellComplete = false;
+  return {
+    head,
+    onCompleteShell: () => {
+      const shellState = head.render();
+      head.entries.clear();
+      head._solidShellComplete = true;
+      resolveShellReady(shellState);
+    },
+    wrapStream: (stream, template) => {
+      const encoder = new TextEncoder();
+      return new ReadableStream({
+        async start(controller) {
+          const shellState = await shellReady;
+          const { shell, end } = prepareStreamingTemplate(head, template, shellState);
+          controller.enqueue(encoder.encode(shell));
+          const reader = stream.getReader();
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done)
+              break;
+            controller.enqueue(value);
+          }
+          reader.releaseLock();
+          controller.enqueue(encoder.encode(end));
+          controller.close();
+        }
+      });
+    }
+  };
+}
+const scriptTemplate = ["<script>", "<\/script>"];
+function HeadStream() {
+  const head = useContext(UnheadContext);
+  if (!head)
+    return null;
+  if (!head._solidShellComplete)
+    return null;
+  const update = renderSSRHeadSuspenseChunk(head);
+  if (!update)
+    return null;
+  return ssr(scriptTemplate, update);
+}
+
+export { HeadStream, UnheadContext, createStreamableHead };

package/dist/stream/vite.d.mts

@@ -0,0 +1,27 @@
+import * as vite from 'vite';
+import { StreamingPluginOptions } from 'unhead/stream/vite';
+
+/**
+ * Vite plugin for Solid.js streaming SSR support.
+ * Automatically injects HeadStream components into Solid components that use useHead hooks.
+ *
+ * @returns Vite plugin configuration object with:
+ *   - `name`: Plugin identifier
+ *   - `enforce`: Plugin execution order ('pre')
+ *   - `transform`: Transform hook for processing JSX/TSX files
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { unheadSolidPlugin } from '@unhead/solid-js/stream/vite'
+ *
+ * export default {
+ *   plugins: [
+ *     unheadSolidPlugin()
+ *   ]
+ * }
+ * ```
+ */
+declare function unheadSolidPlugin(options?: Pick<StreamingPluginOptions, 'mode'>): vite.Plugin<any>;
+
+export { unheadSolidPlugin as default, unheadSolidPlugin };

package/dist/stream/vite.d.ts

@@ -0,0 +1,27 @@
+import * as vite from 'vite';
+import { StreamingPluginOptions } from 'unhead/stream/vite';
+
+/**
+ * Vite plugin for Solid.js streaming SSR support.
+ * Automatically injects HeadStream components into Solid components that use useHead hooks.
+ *
+ * @returns Vite plugin configuration object with:
+ *   - `name`: Plugin identifier
+ *   - `enforce`: Plugin execution order ('pre')
+ *   - `transform`: Transform hook for processing JSX/TSX files
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { unheadSolidPlugin } from '@unhead/solid-js/stream/vite'
+ *
+ * export default {
+ *   plugins: [
+ *     unheadSolidPlugin()
+ *   ]
+ * }
+ * ```
+ */
+declare function unheadSolidPlugin(options?: Pick<StreamingPluginOptions, 'mode'>): vite.Plugin<any>;
+
+export { unheadSolidPlugin as default, unheadSolidPlugin };

package/dist/stream/vite.mjs

@@ -0,0 +1,87 @@
+import MagicString from 'magic-string';
+import { findStaticImports } from 'mlly';
+import { parseSync, Visitor } from 'oxc-parser';
+import { createStreamingPlugin } from 'unhead/stream/vite';
+
+function transform(code, id, isSSR, s) {
+  const lang = id.endsWith(".tsx") ? "tsx" : id.endsWith(".jsx") ? "jsx" : "tsx";
+  const result = parseSync(id, code, { lang });
+  if (result.errors.length > 0)
+    return false;
+  const returns = [];
+  const visitor = new Visitor({
+    FunctionDeclaration: (node) => processFunction(node),
+    FunctionExpression: (node) => processFunction(node),
+    ArrowFunctionExpression: (node) => processFunction(node)
+  });
+  function processFunction(node) {
+    if (!node.body)
+      return;
+    const bodyCode = code.slice(node.body.start, node.body.end);
+    if (!bodyCode.includes("useHead") && !bodyCode.includes("useSeoMeta") && !bodyCode.includes("useHeadSafe"))
+      return;
+    if (node.body.type === "JSXElement" || node.body.type === "JSXFragment") {
+      returns.push({ jsxStart: node.body.start, jsxEnd: node.body.end });
+      return;
+    }
+    const innerVisitor = new Visitor({
+      ReturnStatement(innerNode) {
+        if (!innerNode.argument)
+          return;
+        let arg = innerNode.argument;
+        if (arg.type === "ParenthesizedExpression" && arg.expression)
+          arg = arg.expression;
+        if (arg.type === "JSXElement" || arg.type === "JSXFragment")
+          returns.push({ jsxStart: arg.start, jsxEnd: arg.end });
+      }
+    });
+    innerVisitor.visit(node.body);
+  }
+  visitor.visit(result.program);
+  if (returns.length === 0)
+    return false;
+  returns.sort((a, b) => b.jsxStart - a.jsxStart);
+  for (const ret of returns) {
+    const jsxCode = code.slice(ret.jsxStart, ret.jsxEnd);
+    s.overwrite(ret.jsxStart, ret.jsxEnd, `<><HeadStream />${jsxCode}</>`);
+  }
+  const importPath = isSSR ? "@unhead/solid-js/stream/server" : "@unhead/solid-js/stream/client";
+  const imports = findStaticImports(code);
+  const existing = imports.find((i) => i.specifier === importPath);
+  if (existing) {
+    if (!existing.imports?.includes("HeadStream")) {
+      const inner = existing.imports?.replace(/^\{\s*|\s*\}\s*$/g, "").trim() || "";
+      s.overwrite(existing.start, existing.end, `import { ${inner ? `${inner}, ` : ""}HeadStream } from '${importPath}'
+`);
+    }
+  } else {
+    const last = imports[imports.length - 1];
+    if (last)
+      s.appendLeft(last.end, `import { HeadStream } from '${importPath}'
+`);
+    else
+      s.prepend(`import { HeadStream } from '${importPath}'
+`);
+  }
+  return true;
+}
+function unheadSolidPlugin(options) {
+  return createStreamingPlugin({
+    framework: "@unhead/solid-js",
+    mode: options?.mode,
+    transform(code, id, opts) {
+      if (!/\.[jt]sx$/.test(id))
+        return null;
+      const s = new MagicString(code);
+      const transformed = transform(code, id, opts?.ssr ?? false, s);
+      if (!transformed)
+        return null;
+      return {
+        code: s.toString(),
+        map: s.generateMap({ includeContent: true, source: id })
+      };
+    }
+  });
+}
+
+export { unheadSolidPlugin as default, unheadSolidPlugin };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unhead/solid-js",
   "type": "module",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.5",
   "description": "Full-stack <head> manager built for SolidJS.",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
@@ -29,6 +29,14 @@
       "types": "./dist/client.d.ts",
       "default": "./dist/client.mjs"
     },
+    "./stream/server": {
+      "types": "./dist/stream/server.d.ts",
+      "default": "./dist/stream/server.mjs"
+    },
+    "./stream/client": {
+      "types": "./dist/stream/client.d.ts",
+      "default": "./dist/stream/client.mjs"
+    },
     "./utils": {
       "types": "./dist/utils.d.ts",
       "default": "./dist/utils.mjs"
@@ -36,6 +44,10 @@
     "./plugins": {
       "types": "./dist/plugins.d.ts",
       "default": "./dist/plugins.mjs"
+    },
+    "./stream/vite": {
+      "types": "./dist/stream/vite.d.ts",
+      "default": "./dist/stream/vite.mjs"
     }
   },
   "main": "dist/index.mjs",
@@ -49,11 +61,20 @@
       "client": [
         "dist/client"
       ],
+      "stream/server": [
+        "dist/stream/server"
+      ],
+      "stream/client": [
+        "dist/stream/client"
+      ],
       "plugins": [
         "dist/plugins"
       ],
       "utils": [
         "dist/utils"
+      ],
+      "stream/vite": [
+        "dist/stream/vite"
       ]
     }
   },
@@ -62,7 +83,13 @@
     "dist"
   ],
   "peerDependencies": {
-    "solid-js": ">=19"
+    "solid-js": ">=19",
+    "vite": ">=6"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
   },
   "build": {
     "external": [
@@ -70,13 +97,17 @@
     ]
   },
   "dependencies": {
-    "unhead": "3.0.0-beta.2"
+    "magic-string": "^0.30.21",
+    "mlly": "^1.8.0",
+    "oxc-parser": "^0.106.0",
+    "unhead": "3.0.0-beta.5"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/user-event": "14.6.1",
     "solid-js": "^1.9.10",
+    "vite": "7.2.2",
     "vite-plugin-solid": "^2.11.10"
   },
   "scripts": {