@unhead/react 3.0.0-beta.6 → 3.0.0-beta.8

package/dist/index.mjs

@@ -22,20 +22,41 @@ function useUnhead() {
 function withSideEffects(input, options, fn) {
   const unhead = options.head || useUnhead();
   const entryRef = useRef(null);
-  if (!entryRef.current) {
+  const inputRef = useRef(input);
+  inputRef.current = input;
+  if (unhead.ssr && !entryRef.current) {
     entryRef.current = fn(unhead, input, options);
   }
-  const entry = entryRef.current;
-  useEffect(() => {
-    entry?.patch(input);
-  }, [input, entry]);
   useEffect(() => {
+    const entry = fn(unhead, inputRef.current, options);
+    entryRef.current = entry;
     return () => {
-      entry?.dispose();
+      entry.dispose();
       entryRef.current = null;
     };
-  }, [entry]);
-  return entry;
+  }, [unhead]);
+  useEffect(() => {
+    entryRef.current?.patch(input);
+  }, [input]);
+  if (unhead.ssr) {
+    return entryRef.current;
+  }
+  const proxyRef = useRef(null);
+  if (!proxyRef.current) {
+    proxyRef.current = {
+      patch: (newInput) => {
+        entryRef.current?.patch(newInput);
+      },
+      dispose: () => {
+        entryRef.current?.dispose();
+        entryRef.current = null;
+      },
+      _poll: (rm) => {
+        entryRef.current?._poll(rm);
+      }
+    };
+  }
+  return proxyRef.current;
 }
 function useHead(input = {}, options = {}) {
   return withSideEffects(input, options, useHead$1);

package/dist/stream/vite.mjs

@@ -1,43 +1,64 @@
 import MagicString from 'magic-string';
-import { findStaticImports } from 'mlly';
-import { parseSync, Visitor } from 'oxc-parser';
+import { parseAndWalk } from 'oxc-walker';
 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)
+  let currentFnHasHead = false;
+  const fnStack = [];
+  const importPath = isSSR ? "@unhead/react/stream/server" : "@unhead/react/stream/client";
+  let existingImport = null;
+  let lastImportEnd = -1;
+  const result = parseAndWalk(code, id, {
+    parseOptions: { lang },
+    enter(node) {
+      if (node.type === "ImportDeclaration") {
+        if (node.source.value === importPath) {
+          existingImport = {
+            start: node.start,
+            end: node.end,
+            specifiers: node.specifiers?.map((spec) => spec.local?.name).filter(Boolean) || []
+          };
+        }
+        if (node.end > lastImportEnd)
+          lastImportEnd = node.end;
+        this.skip();
+        return;
+      }
+      const isFn = node.type === "FunctionDeclaration" || node.type === "FunctionExpression" || node.type === "ArrowFunctionExpression";
+      if (isFn) {
+        fnStack.push(currentFnHasHead);
+        if (!node.body) {
+          currentFnHasHead = false;
+          return;
+        }
+        const bodyCode = code.slice(node.body.start, node.body.end);
+        currentFnHasHead = bodyCode.includes("useHead") || bodyCode.includes("useSeoMeta") || bodyCode.includes("useHeadSafe");
+        if (currentFnHasHead && (node.body.type === "JSXElement" || node.body.type === "JSXFragment")) {
+          returns.push({ jsxStart: node.body.start, jsxEnd: node.body.end });
+        }
+        return;
+      }
+      if (currentFnHasHead && node.type === "ReturnStatement") {
+        if (!node.argument)
           return;
-        let arg = innerNode.argument;
+        let arg = node.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);
+    },
+    leave(node) {
+      const isFn = node.type === "FunctionDeclaration" || node.type === "FunctionExpression" || node.type === "ArrowFunctionExpression";
+      if (isFn) {
+        currentFnHasHead = fnStack.pop();
+      }
+    }
+  });
+  if (result.errors.length > 0)
+    return false;
   if (returns.length === 0)
     return false;
   returns.sort((a, b) => b.jsxStart - a.jsxStart);
@@ -45,22 +66,17 @@ function transform(code, id, isSSR, s) {
     const jsxCode = code.slice(ret.jsxStart, ret.jsxEnd);
     s.overwrite(ret.jsxStart, ret.jsxEnd, `<><HeadStream />${jsxCode}</>`);
   }
-  const importPath = isSSR ? "@unhead/react/stream/server" : "@unhead/react/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}'
-`);
+  const foundImport = existingImport;
+  if (foundImport) {
+    if (!foundImport.specifiers.includes("HeadStream")) {
+      const inner = foundImport.specifiers.join(", ");
+      s.overwrite(foundImport.start, foundImport.end, `import { ${inner ? `${inner}, ` : ""}HeadStream } from '${importPath}'`);
     }
+  } else if (lastImportEnd > -1) {
+    s.appendLeft(lastImportEnd, `
+import { 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}'
+    s.prepend(`import { HeadStream } from '${importPath}'
 `);
   }
   return true;
@@ -68,10 +84,9 @@ function transform(code, id, isSSR, s) {
 function unheadReactPlugin(options) {
   return createStreamingPlugin({
     framework: "@unhead/react",
+    filter: /\.[jt]sx$/,
     mode: options?.mode,
     transform(code, id, opts) {
-      if (!/\.[jt]sx$/.test(id))
-        return null;
       const s = new MagicString(code);
       if (!transform(code, id, opts?.ssr ?? false, s))
         return null;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unhead/react",
   "type": "module",
-  "version": "3.0.0-beta.6",
+  "version": "3.0.0-beta.8",
   "description": "Full-stack <head> manager built for React.",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
@@ -98,9 +98,9 @@
   },
   "dependencies": {
     "magic-string": "^0.30.21",
-    "mlly": "^1.8.0",
     "oxc-parser": "^0.106.0",
-    "unhead": "3.0.0-beta.6"
+    "oxc-walker": "^0.7.0",
+    "unhead": "3.0.0-beta.8"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.1",
@@ -108,7 +108,7 @@
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "vite": "7.2.2"
+    "vite": "^7.2.2"
   },
   "scripts": {
     "build": "unbuild",