vite-plugin-react-shopify 2.1.0 → 2.2.0

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;
           });
@@ -948,7 +992,7 @@ function shopifySSG(options) {
       if (id === "\0vite-plugin-shopify:runtime") {
         const exports = [
           `export { LiquidDataProvider, LiquidDataContext } from 'vite-plugin-shopify/runtime'`,
-          `export { useLiquid, useLiquidValues, useSectionSettings, useBlockSettings, useSnippetParams, useBlockParams } from 'vite-plugin-shopify/runtime'`
+          `export { useLiquidValue, useLiquidValues, useSectionSettings, useBlockSettings, useSnippetParams, useBlockParams } from 'vite-plugin-shopify/runtime'`
         ];
         return exports.join("\n");
       }
@@ -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/dist/runtime/index.d.ts

@@ -1,13 +1,21 @@
 import * as react from 'react';
 
-declare function useLiquid(expr: string): {
-    value: string | undefined;
-};
-declare function useLiquidValues<T extends Record<string, string>>(map: T): {
-    values: {
-        [K in keyof T]: string | undefined;
-    };
+declare function parseLiquidBoolean(value: string | boolean | undefined | null): boolean;
+declare function parseLiquidNumber(value: string | number | undefined | null, defaultVal?: number): number;
+type LiquidTypeMode = "string" | "number" | "boolean";
+type Setter<T> = (val: T | ((prev: T) => T)) => void;
+type ValueForMode<M extends LiquidTypeMode | undefined> = M extends "number" ? number : M extends "boolean" ? boolean : string | undefined;
+declare function useLiquidValue(expr: string): [string | undefined, Setter<string | undefined>];
+declare function useLiquidValue(expr: string, type: "string"): [string | undefined, Setter<string | undefined>];
+declare function useLiquidValue(expr: string, type: "number"): [number, Setter<number>];
+declare function useLiquidValue(expr: string, type: "boolean"): [boolean, Setter<boolean>];
+type TypeModes<T extends Record<string, string>> = Partial<{
+    [K in keyof T & string]: LiquidTypeMode;
+}>;
+type InferValues<T extends Record<string, string>, Types extends TypeModes<T>> = {
+    [K in keyof T & string]: ValueForMode<Types[K]>;
 };
+declare function useLiquidValues<T extends Record<string, string>, const Types extends TypeModes<T> = {}>(map: T, types?: Types): InferValues<T, Types>;
 declare function useSectionSettings(key: string): {
     value: string | undefined;
 };
@@ -21,12 +29,7 @@ declare function useBlockParams(key: string): {
     value: string | undefined;
 };
 
-/** SSR-safe boolean parser: treats Liquid expression strings as truthy, real booleans as-is */
-declare function parseLiquidBoolean(value: string | boolean | undefined | null): boolean;
-/** SSR-safe number parser: returns defaultVal for unparseable SSR placeholders */
-declare function parseLiquidNumber(value: string | number | undefined | null, defaultVal?: number): number;
-
 declare const LiquidDataContext: react.Context<Record<string, any>>;
 declare const LiquidDataProvider: react.Provider<Record<string, any>>;
 
-export { LiquidDataContext, LiquidDataProvider, parseLiquidBoolean, parseLiquidNumber, useBlockParams, useBlockSettings, useLiquid, useLiquidValues, useSectionSettings, useSnippetParams };
+export { LiquidDataContext, LiquidDataProvider, type LiquidTypeMode, parseLiquidBoolean, parseLiquidNumber, useBlockParams, useBlockSettings, useLiquidValue, useLiquidValues, useSectionSettings, useSnippetParams };

package/dist/runtime/index.js

@@ -1,5 +1,5 @@
 // src/runtime/hooks.ts
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 
 // src/runtime/provider.ts
 import { createContext } from "react";
@@ -7,19 +7,19 @@ var LiquidDataContext = createContext({});
 var LiquidDataProvider = LiquidDataContext.Provider;
 
 // src/runtime/hooks.ts
-function useLiquid(expr) {
+function useLiquidRaw(expr) {
   const data = useContext(LiquidDataContext);
   if (typeof globalThis.document === "undefined") {
     const tracker = globalThis.__shopify_ssg_liquid_track;
     if (tracker) tracker.add(expr);
-    return { value: `{{ ${expr} }}` };
+    return `{{ ${expr} }}`;
   }
   if (Object.prototype.hasOwnProperty.call(data, expr)) {
-    return { value: data[expr] };
+    return data[expr];
   }
-  return { value: void 0 };
+  return void 0;
 }
-function useLiquidValues(map) {
+function useLiquidRawValues(map) {
   const data = useContext(LiquidDataContext);
   if (typeof globalThis.document === "undefined") {
     const tracker = globalThis.__shopify_ssg_liquid_track;
@@ -28,25 +28,13 @@ function useLiquidValues(map) {
       if (tracker) tracker.add(expr);
       values2[key] = `{{ ${expr} }}`;
     }
-    return { values: values2 };
+    return values2;
   }
   const values = {};
   for (const [key, expr] of Object.entries(map)) {
     values[key] = Object.prototype.hasOwnProperty.call(data, expr) ? data[expr] : void 0;
   }
-  return { values };
-}
-function useSectionSettings(key) {
-  return useLiquid(`section.settings.${key}`);
-}
-function useBlockSettings(key) {
-  return useLiquid(`block.settings.${key}`);
-}
-function useSnippetParams(key) {
-  return useLiquid(key);
-}
-function useBlockParams(key) {
-  return useLiquid(key);
+  return values;
 }
 function parseLiquidBoolean(value) {
   if (typeof value === "boolean") return value;
@@ -59,6 +47,76 @@ function parseLiquidNumber(value, defaultVal = 0) {
   const num = Number(value);
   return Number.isNaN(num) ? defaultVal : num;
 }
+function useLiquidValue(expr, type = "string") {
+  const raw = useLiquidRaw(expr);
+  const isSSR = typeof globalThis.document === "undefined";
+  let initialVal;
+  if (type === "boolean") {
+    initialVal = false;
+  } else if (type === "number") {
+    initialVal = isSSR ? raw : parseLiquidNumber(raw, 0);
+  } else {
+    initialVal = raw;
+  }
+  const [val, setVal] = useState(initialVal);
+  useEffect(() => {
+    if (type === "number") setVal(parseLiquidNumber(raw, 0));
+    else if (type === "boolean") setVal(parseLiquidBoolean(raw));
+    else setVal(raw);
+  }, [raw]);
+  return [val, setVal];
+}
+function useLiquidValues(map, types) {
+  const raw = useLiquidRawValues(map);
+  const keys = Object.keys(map);
+  const rawDep = keys.map((k) => raw[k]).join("\0");
+  const isSSR = typeof globalThis.document === "undefined";
+  const [parsed, setParsed] = useState(() => {
+    const vals = {};
+    for (const k of keys) {
+      const mode = types?.[k] ?? "string";
+      if (mode === "boolean") {
+        vals[k] = false;
+      } else if (mode === "number") {
+        vals[k] = isSSR ? raw[k] : parseLiquidNumber(raw[k], 0);
+      } else {
+        vals[k] = raw[k];
+      }
+    }
+    return vals;
+  });
+  useEffect(() => {
+    setParsed((prev) => {
+      let changed = false;
+      const next = { ...prev };
+      for (const k of keys) {
+        const mode = types?.[k] ?? "string";
+        let v;
+        if (mode === "number") v = parseLiquidNumber(raw[k], 0);
+        else if (mode === "boolean") v = parseLiquidBoolean(raw[k]);
+        else v = raw[k];
+        if (v !== prev[k]) {
+          next[k] = v;
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [rawDep]);
+  return parsed;
+}
+function useSectionSettings(key) {
+  return { value: useLiquidRaw(`section.settings.${key}`) };
+}
+function useBlockSettings(key) {
+  return { value: useLiquidRaw(`block.settings.${key}`) };
+}
+function useSnippetParams(key) {
+  return { value: useLiquidRaw(key) };
+}
+function useBlockParams(key) {
+  return { value: useLiquidRaw(key) };
+}
 export {
   LiquidDataContext,
   LiquidDataProvider,
@@ -66,7 +124,7 @@ export {
   parseLiquidNumber,
   useBlockParams,
   useBlockSettings,
-  useLiquid,
+  useLiquidValue,
   useLiquidValues,
   useSectionSettings,
   useSnippetParams

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-react-shopify",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "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",