vite-plugin-react-shopify 2.1.1 → 2.2.1

package/dist/index.js

@@ -590,6 +590,21 @@ function pathToFileURL(filePath) {
   return "file://" + absPath;
 }
 var log6 = logger("ssg:renderer");
+var DEFAULT_LIQUID_FILTERS = {
+  textarea: " | newline_to_br",
+  image_picker: " | img_url: 'master'"
+};
+function buildLiquidFilterMap(settings, prefix) {
+  const map = {};
+  if (!settings) return map;
+  for (const s of settings) {
+    const filter = DEFAULT_LIQUID_FILTERS[s.type];
+    if (filter) {
+      map[`${prefix}${s.id}`] = filter;
+    }
+  }
+  return map;
+}
 function renderEntry(tmpFile, entry, projectRoot) {
   return import(pathToFileURL(tmpFile)).then((mod) => {
     const Component = mod.default;
@@ -612,11 +627,15 @@ function renderEntry(tmpFile, entry, projectRoot) {
       return null;
     }
     globalThis.__shopify_ssg_target = entry.targetType;
+    const prefix = entry.targetType === "block" ? "block.settings." : "section.settings.";
+    const filterMap = buildLiquidFilterMap(shopifyMeta?.settings, prefix);
+    globalThis.__shopify_ssg_liquid_filters = filterMap;
     const trackedExpressions = /* @__PURE__ */ new Set();
     globalThis.__shopify_ssg_liquid_track = trackedExpressions;
     const element = createElement(Component);
     let html = renderToStaticMarkup(element);
     delete globalThis.__shopify_ssg_liquid_track;
+    delete globalThis.__shopify_ssg_liquid_filters;
     html = normalizeVoidElements(html);
     html = normalizeStyleAttributes(html);
     html = unwrapHtmlEntities(html);
@@ -992,7 +1011,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");
       }

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,46 +7,40 @@ var LiquidDataContext = createContext({});
 var LiquidDataProvider = LiquidDataContext.Provider;
 
 // src/runtime/hooks.ts
-function useLiquid(expr) {
+function getLiquidFilter(expr) {
+  const filterMap = globalThis.__shopify_ssg_liquid_filters;
+  return filterMap?.[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} }}` };
+    const filter = getLiquidFilter(expr);
+    return `{{ ${expr}${filter} }}`;
   }
   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;
     const values2 = {};
     for (const [key, expr] of Object.entries(map)) {
       if (tracker) tracker.add(expr);
-      values2[key] = `{{ ${expr} }}`;
+      const filter = getLiquidFilter(expr);
+      values2[key] = `{{ ${expr}${filter} }}`;
     }
-    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 +53,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 +130,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.1",
+  "version": "2.2.1",
   "description": "Vite plugin for React Shopify themes",
   "files": [
     "dist"