@decocms/blocks-cli 7.31.5 → 7.31.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/blocks-cli",
-  "version": "7.31.5",
+  "version": "7.31.7",
   "type": "module",
   "description": "Deco codegen (generate-blocks, generate-schema, generate-invoke) and Fresh-to-TanStack migration tooling",
   "repository": {
@@ -31,7 +31,7 @@
     "lint:unused": "knip"
   },
   "dependencies": {
-    "@decocms/blocks": "7.31.5",
+    "@decocms/blocks": "7.31.7",
     "ts-morph": "^27.0.0",
     "tsx": "^4.22.5"
   },

package/scripts/migrate/phase-analyze.test.ts

@@ -2,7 +2,7 @@ import * as fs from "node:fs";
 import * as os from "node:os";
 import * as path from "node:path";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { extractPlatform } from "./phase-analyze";
+import { extractGoogleFonts, extractPlatform } from "./phase-analyze";
 
 // `extractPlatform` runs four strategies in order:
 //   1. deno.json imports referencing apps/{platform}/
@@ -16,6 +16,68 @@ import { extractPlatform } from "./phase-analyze";
 // list so Strategy 2 fires first and short-circuits before Strategy 3 can
 // over-match.
 
+describe("extractGoogleFonts", () => {
+  let tmp: string;
+
+  beforeEach(() => {
+    tmp = fs.mkdtempSync(path.join(os.tmpdir(), "extract-gfonts-"));
+    fs.mkdirSync(path.join(tmp, "routes"), { recursive: true });
+  });
+
+  afterEach(() => {
+    fs.rmSync(tmp, { recursive: true, force: true });
+  });
+
+  it("extracts preconnects and stylesheet from _app.tsx", () => {
+    fs.writeFileSync(
+      path.join(tmp, "routes", "_app.tsx"),
+      `<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" />`,
+    );
+    const result = extractGoogleFonts(tmp);
+    expect(result.preconnects).toEqual([
+      "https://fonts.googleapis.com",
+      "https://fonts.gstatic.com",
+    ]);
+    expect(result.stylesheets).toEqual([
+      "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap",
+    ]);
+  });
+
+  it("deduplicates URLs present in both _app.tsx and _layout.tsx", () => {
+    const sharedUrl = "https://fonts.googleapis.com/css2?family=Roboto&display=swap";
+    fs.writeFileSync(
+      path.join(tmp, "routes", "_app.tsx"),
+      `<link rel="stylesheet" href="${sharedUrl}" />`,
+    );
+    fs.writeFileSync(
+      path.join(tmp, "routes", "_layout.tsx"),
+      `<link rel="stylesheet" href="${sharedUrl}" />`,
+    );
+    const result = extractGoogleFonts(tmp);
+    expect(result.stylesheets).toHaveLength(1);
+  });
+
+  it("extracts Google Fonts @import from tailwind.css", () => {
+    fs.writeFileSync(
+      path.join(tmp, "tailwind.css"),
+      `@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');`,
+    );
+    const result = extractGoogleFonts(tmp);
+    expect(result.stylesheets).toEqual([
+      "https://fonts.googleapis.com/css2?family=Poppins&display=swap",
+    ]);
+  });
+
+  it("returns empty arrays when no Google Fonts are declared", () => {
+    fs.writeFileSync(path.join(tmp, "routes", "_app.tsx"), `<link rel="icon" href="/favicon.ico" />`);
+    const result = extractGoogleFonts(tmp);
+    expect(result.preconnects).toHaveLength(0);
+    expect(result.stylesheets).toHaveLength(0);
+  });
+});
+
 describe("extractPlatform", () => {
   let tmp: string;
 

package/scripts/migrate/phase-analyze.ts

@@ -418,6 +418,50 @@ function scanDir(
   }
 }
 
+export function extractGoogleFonts(
+  sourceDir: string,
+): { preconnects: string[]; stylesheets: string[] } {
+  const preconnects: string[] = [];
+  const stylesheets: string[] = [];
+  const seen = new Set<string>();
+
+  const hrefRe = /href=["'](https:\/\/fonts\.(?:googleapis|gstatic)\.com[^"']*)["']/g;
+
+  // Read _app.tsx and _layout.tsx for <link> declarations
+  for (const candidate of ["routes/_app.tsx", "routes/_layout.tsx"]) {
+    const fp = path.join(sourceDir, candidate);
+    if (!fs.existsSync(fp)) continue;
+    const content = fs.readFileSync(fp, "utf-8");
+    for (const m of content.matchAll(hrefRe)) {
+      const href = m[1];
+      if (seen.has(href)) continue;
+      seen.add(href);
+      if (href.includes("/css")) {
+        stylesheets.push(href);
+      } else {
+        preconnects.push(href);
+      }
+    }
+  }
+
+  // Also check tailwind.css for @import url(https://fonts.googleapis.com/...)
+  for (const cssCandidate of ["tailwind.css", "styles/app.css", "styles/global.css"]) {
+    const fp = path.join(sourceDir, cssCandidate);
+    if (!fs.existsSync(fp)) continue;
+    const content = fs.readFileSync(fp, "utf-8");
+    const importRe = /@import\s+url\(['"]?(https:\/\/fonts\.googleapis\.com[^'")\s]+)/g;
+    for (const m of content.matchAll(importRe)) {
+      const href = m[1];
+      if (!seen.has(href)) {
+        seen.add(href);
+        stylesheets.push(href);
+      }
+    }
+  }
+
+  return { preconnects, stylesheets };
+}
+
 function extractGtmId(sourceDir: string): string | null {
   const appPath = path.join(sourceDir, "routes", "_app.tsx");
   if (!fs.existsSync(appPath)) return null;
@@ -627,6 +671,20 @@ export function analyze(ctx: MigrationContext): void {
   ctx.platform = extractPlatform(ctx.sourceDir);
   ctx.vtexAccount = ctx.platform === "vtex" ? extractVtexAccount(ctx.sourceDir) : null;
   ctx.gtmId = extractGtmId(ctx.sourceDir);
+  ctx.googleFonts = extractGoogleFonts(ctx.sourceDir);
+  // If no font URLs were extracted but the file mentions googleapis (likely a
+  // JSX expression like href={URL_CONST}), flag it for manual review.
+  if (ctx.googleFonts.preconnects.length === 0 && ctx.googleFonts.stylesheets.length === 0) {
+    const appPath = path.join(ctx.sourceDir, "routes", "_app.tsx");
+    if (fs.existsSync(appPath) && fs.readFileSync(appPath, "utf-8").includes("fonts.googleapis")) {
+      ctx.manualReviewItems.push({
+        file: "routes/_app.tsx",
+        reason:
+          "Google Fonts reference found but could not be extracted automatically (may use a JSX expression or variable). Add the font preconnect and stylesheet links manually to src/routes/__root.tsx.",
+        severity: "warning",
+      });
+    }
+  }
 
   // Extract theme colors and font from CMS
   const theme = extractThemeFromCms(ctx.sourceDir);

package/scripts/migrate/phase-scaffold.ts

@@ -341,7 +341,7 @@ export default debounce;
 }
 
 function generateSignalShim(): string {
-  return `import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+  return `import { useState, useRef, useEffect, useMemo, useCallback, useSyncExternalStore } from "react";
 export { signal, type ReactiveSignal } from "@decocms/blocks/sdk/signal";
 
 /** Run a function immediately. Kept for legacy module-level side effects. */
@@ -387,6 +387,24 @@ export function useComputed<T>(compute: () => T): { readonly value: T } {
 export function useSignalEffect(cb: () => void | (() => void)): void {
   useEffect(cb);
 }
+
+/**
+ * Subscribe to a ReactiveSignal and re-render when it changes.
+ * Required for signals from useUI() (displayCart, displayMenu, etc.) —
+ * reading .value directly in render is a dead read in React and freezes the UI.
+ *
+ * @example
+ *   const { displayCart } = useUI();
+ *   const open = useSignalValue(displayCart);
+ *   return <Drawer open={open} />;
+ */
+export function useSignalValue<T>(sig: ReactiveSignal<T>): T {
+  return useSyncExternalStore(
+    (cb) => sig.subscribe(cb),
+    () => sig.value,
+    () => sig.value,
+  );
+}
 `;
 }
 

package/scripts/migrate/post-cleanup/rules.ts

@@ -1702,9 +1702,21 @@ const ruleVtexProxyHandlerMissing: Rule = {
 const MODULE_SIGNAL_RE =
   /^(?:export\s+)?const\s+([A-Za-z_$][A-Za-z0-9_$]*)\s*=\s*(?:\w+\.)?signal\s*\(/m;
 
+// Well-known signals returned by useUI(). These are never declared with
+// `const x = signal(...)` at module scope — they come from a hook — so
+// MODULE_SIGNAL_RE won't catch them. The list is stable: it's the public
+// API surface of useUI() across all deco storefronts.
+const WELL_KNOWN_UI_SIGNALS = new Set([
+  "displayCart",
+  "displayMenu",
+  "displayNav",
+  "displaySearchbar",
+  "displaySearchPopup",
+]);
+
 const ruleSignalValueReads: Rule = {
   id: "signal-value-reads",
-  title: "Module-level signal .value reads without useStore()",
+  title: "Signal .value reads without subscription (freezes UI)",
   run({ siteDir, fs }: RuleContext): Finding[] {
     const tsFiles = fs.glob(siteDir, "src/**/*.{ts,tsx}", SRC_GLOB_EXCLUDES);
 
@@ -1724,7 +1736,13 @@ const ruleSignalValueReads: Rule = {
       }
     }
 
-    if (moduleSignals.size === 0) return [];
+    // Also check well-known useUI() signals — they never appear as module-level
+    // declarations, so MODULE_SIGNAL_RE never picks them up.
+    for (const name of WELL_KNOWN_UI_SIGNALS) {
+      if (!moduleSignals.has(name)) {
+        moduleSignals.set(name, "useUI()");
+      }
+    }
 
     // Pre-compile per-signal regexes once — avoids N×M compilations in Pass 2.
     const valueReMap = new Map<string, RegExp>(
@@ -1732,7 +1750,8 @@ const ruleSignalValueReads: Rule = {
     );
 
     // Pass 2: for each .tsx file, check per-signal whether .value is read
-    // without a matching useStore(name.store call in the same file.
+    // without a matching subscription in the same file.
+    // Accepts either useStore(name.store or useSignalValue(name as subscriptions.
     const tsxFiles = tsFiles.filter((f) => f.endsWith(".tsx"));
     const findings: Finding[] = [];
 
@@ -1743,18 +1762,17 @@ const ruleSignalValueReads: Rule = {
       for (const [name, declaredIn] of moduleSignals) {
         const valueRe = valueReMap.get(name)!;
         if (!valueRe.test(content)) continue;
-        // Per-signal subscription check: useStore(name.store is the canonical
-        // subscription pattern. A file that subscribes to a different signal
-        // is not considered subscribed to this one.
-        const subscribedRe = new RegExp(`\\buseStore\\s*\\(\\s*${name}\\.store\\b`);
+        const subscribedRe = new RegExp(
+          `\\buseStore\\s*\\(\\s*${name}\\.store\\b|\\buseSignalValue\\s*\\(\\s*${name}\\b`,
+        );
         if (subscribedRe.test(content)) continue;
 
         findings.push({
           rule: "signal-value-reads",
           severity: "warning",
           file: rel,
-          message: `'${name}.value' read without useStore() — component will not re-render when the signal changes`,
-          fix: `Use useStore(${name}.store, (s) => s) to subscribe, or replace with useQuery / useMutation`,
+          message: `'${name}.value' read without subscription — component will not re-render when the signal changes`,
+          fix: `Replace with \`const ${name}Value = useSignalValue(${name})\` (from ~/sdk/signal) or \`useStore(${name}.store)\``,
           meta: { signalName: name, declaredIn },
         });
       }

package/scripts/migrate/templates/routes.ts

@@ -51,17 +51,26 @@ function generateRoot(ctx: MigrationContext, siteTitle: string, vtexAccount: str
     preconnects.push(`      { rel: "preconnect", href: "https://${vtexAccount}.vtexassets.com", crossOrigin: "anonymous" as const },`);
   }
 
-  // Font preloads
+  const googleFontLinks = [
+    ...ctx.googleFonts.preconnects.map((href) =>
+      `      { rel: "preconnect", href: "${href}"${href.includes("gstatic") ? ', crossOrigin: "anonymous" as const' : ""} },`
+    ),
+    ...ctx.googleFonts.stylesheets.map((href) =>
+      `      { rel: "stylesheet", href: "${href}" },`
+    ),
+  ];
+
   const fontPreloads = fonts.map((f) =>
     `      { rel: "preload", href: "${f}", as: "font", type: "font/woff2", crossOrigin: "anonymous" as const },`
   );
 
-  // DNS prefetch for common third-party services
   const dnsPrefetch: string[] = [];
   if (isVtex) {
     dnsPrefetch.push(`      { rel: "dns-prefetch", href: "https://sp.vtex.com" },`);
   }
 
+  const linkLines = [...preconnects, ...googleFontLinks, ...fontPreloads].filter(Boolean);
+
   return `import { createRootRoute } from "@tanstack/react-router";
 import { DecoRootLayout } from "@decocms/tanstack";
 // @ts-ignore Vite ?url import
@@ -83,8 +92,7 @@ export const Route = createRootRoute({
       { property: "og:locale", content: "pt_BR" },
     ],
     links: [
-${preconnects.join("\n")}
-${fontPreloads.join("\n")}
+${linkLines.join("\n")}
       { rel: "stylesheet", href: appCss },
       { rel: "icon", href: "/favicon.ico" },
 ${dnsPrefetch.join("\n")}

package/scripts/migrate/types.ts

@@ -156,6 +156,8 @@ export interface MigrationContext {
   themeColors: Record<string, string>;
   /** Font family from CMS config */
   fontFamily: string | null;
+  /** Google Fonts URLs extracted from routes/_app.tsx or CSS @import */
+  googleFonts: { preconnects: string[]; stylesheets: string[] };
 
   /**
    * Statically-extracted content of the source site's `tailwind.config.ts`
@@ -226,6 +228,7 @@ export function createContext(
     discoveredNpmDeps: {},
     themeColors: {},
     fontFamily: null,
+    googleFonts: { preconnects: [], stylesheets: [] },
     tailwindConfig: {
       colors: {},
       fontFamily: {},