vite-plugin-react-shopify 2.1.0 → 2.1.1

package/dist/index.js

@@ -394,32 +394,75 @@ import fs2 from "fs";
 import path6 from "path";
 import { createRequire } from "module";
 
-// src/ssg/hydration-fix.ts
+// src/hydration-fix/index.ts
+import { parseSync } from "oxc-parser";
+import { walk } from "oxc-walker";
 var log4 = logger("hydration-fix");
 function autoFixAdjacentText(source, filePath) {
-  let fixCount = 0;
-  const lines = source.split("\n");
-  const fixed = [];
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    const replaced = line.replace(
-      /<(\w+)([^>]*?)>([^<]*?\{[^}]*\}[^<]*?)<\/\1>/g,
-      (match, tagName, attrs, content) => {
-        const trimmed = content.trim();
-        if (!needsFix(trimmed)) return match;
-        fixCount++;
-        const tpl = trimmed.replace(/\{([^}]+)\}/g, "${$1}");
-        return `<${tagName}${attrs}>{\`${tpl}\`}</${tagName}>`;
+  const parseResult = parseSync(filePath, source);
+  if (parseResult.errors.length > 0) {
+    log4.debug("OXC parse errors for %s, skipping hydration fix", filePath);
+    return { result: source, fixCount: 0 };
+  }
+  const replacements = [];
+  walk(parseResult.program, {
+    enter(node) {
+      if (node.type === "JSXElement" || node.type === "JSXFragment") {
+        const children = node.children;
+        if (children.length > 0) {
+          processChildren(children, source, replacements);
+        }
       }
-    );
-    fixed.push(replaced);
+    }
+  });
+  if (replacements.length === 0) {
+    return { result: source, fixCount: 0 };
   }
-  if (fixCount > 0) {
-    log4.warn(
-      `auto-fixed ${fixCount} adjacent text+expression issue(s) in ${filePath}`
-    );
+  replacements.sort((a, b) => b.start - a.start);
+  let fixed = source;
+  for (const { start, end, replacement } of replacements) {
+    fixed = fixed.slice(0, start) + replacement + fixed.slice(end);
+  }
+  log4.warn(
+    `auto-fixed ${replacements.length} adjacent text+expression issue(s) in ${filePath}`
+  );
+  return { result: fixed, fixCount: replacements.length };
+}
+function processChildren(children, source, replacements) {
+  let i = 0;
+  while (i < children.length) {
+    if (children[i].type !== "JSXText" && children[i].type !== "JSXExpressionContainer") {
+      i++;
+      continue;
+    }
+    let runEnd = i;
+    let hasText = children[i].type === "JSXText";
+    let hasExpr = children[i].type === "JSXExpressionContainer";
+    while (runEnd + 1 < children.length && (children[runEnd + 1].type === "JSXText" || children[runEnd + 1].type === "JSXExpressionContainer")) {
+      runEnd++;
+      if (children[runEnd].type === "JSXText") hasText = true;
+      if (children[runEnd].type === "JSXExpressionContainer") hasExpr = true;
+    }
+    if (!hasText || !hasExpr) {
+      i = runEnd + 1;
+      continue;
+    }
+    const sliceStart = children[i].start;
+    const sliceEnd = children[runEnd].end;
+    const runText = source.slice(sliceStart, sliceEnd);
+    const trimmed = runText.trim();
+    if (!needsFix(trimmed)) {
+      i = runEnd + 1;
+      continue;
+    }
+    const tpl = trimmed.replace(/\{([^}]+)\}/g, "${$1}");
+    replacements.push({
+      start: sliceStart,
+      end: sliceEnd,
+      replacement: `{\`${tpl}\`}`
+    });
+    i = runEnd + 1;
   }
-  return { result: fixed.join("\n"), fixCount };
 }
 function needsFix(content) {
   const trimmed = content.trim();
@@ -485,7 +528,8 @@ async function bundleEntry(entry, projectRoot, sourceDir) {
               if (fixCount2 > 0) {
                 return { contents: result, loader: args.path.endsWith(".tsx") ? "tsx" : "jsx" };
               }
-            } catch {
+            } catch (e) {
+              log5.debug("SSG hydration-fix failed for %s: %s", args.path, e);
             }
             return void 0;
           });
@@ -980,6 +1024,25 @@ function writeImportMapSnippet(options) {
   fs4.writeFileSync(snippetPath, content);
 }
 
+// src/hydration-fix/vite-plugin.ts
+import path11 from "path";
+function hydrationFix(options) {
+  const sourceDir = path11.resolve(options.themeRoot, options.sourceCodeDir);
+  return {
+    name: "vite-plugin-shopify:hydration-fix",
+    enforce: "pre",
+    transform(code, id) {
+      if (!/\.(tsx|jsx)$/.test(id)) return;
+      if (!id.startsWith(sourceDir)) return;
+      const { result, fixCount } = autoFixAdjacentText(code, id);
+      if (fixCount > 0) {
+        return result;
+      }
+      return;
+    }
+  };
+}
+
 // src/index.ts
 var vitePluginShopify = (options = {}) => {
   const resolvedOptions = resolveOptions(options);
@@ -987,6 +1050,7 @@ var vitePluginShopify = (options = {}) => {
     enableDebug();
   }
   return [
+    hydrationFix(resolvedOptions),
     shopifyConfig(resolvedOptions),
     shopifyEntries(resolvedOptions),
     shopifySSG(resolvedOptions)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-react-shopify",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Vite plugin for React Shopify themes",
   "files": [
     "dist"
@@ -19,7 +19,9 @@
   },
   "dependencies": {
     "debug": "^4.4.0",
-    "fast-glob": "^3.3.0"
+    "fast-glob": "^3.3.0",
+    "oxc-parser": "^0.133.0",
+    "oxc-walker": "^1.0.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.0",