@decocms/blocks-cli 7.37.5 → 7.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/blocks-cli",
-  "version": "7.37.5",
+  "version": "7.38.0",
   "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.37.5",
+    "@decocms/blocks": "7.38.0",
     "ts-morph": "^27.0.0",
     "tsx": "^4.22.5"
   },

package/scripts/generate-schema.test.ts

@@ -191,6 +191,68 @@ describe("typeToJsonSchema with intersection types", () => {
   }, 30_000);
 });
 
+describe("typeToJsonSchema Section-typed props", () => {
+  // The framework's `Section` is opaque (`export type Section = any`), so a
+  // Section-typed prop is a "pick any section" reference emitted as a
+  // __SECTION_REF__ picker. This must keep working.
+  it("emits a __SECTION_REF__ picker for the framework's opaque Section[]", () => {
+    const project = new Project({
+      useInMemoryFileSystem: true,
+      compilerOptions: { skipLibCheck: true },
+    });
+    const sf = project.createSourceFile(
+      "props.ts",
+      `
+        type Section = any;
+        export interface Props {
+          children?: Section[] | null;
+        }
+      `,
+    );
+    const schema = typeToJsonSchema(sf.getInterfaceOrThrow("Props").getType());
+
+    expect(schema.properties.children).toMatchObject({
+      type: "array",
+      items: { $ref: "#/definitions/__SECTION_REF__" },
+    });
+  }, 30_000);
+
+  // Regression (casaevideo footer): a component that declares its own local
+  // `type Section = { label; items }` used to collide with the magic name and
+  // collapse into a non-editable __SECTION_REF__ picker — the footer columns
+  // showed only a drag handle, no expand arrow, no form. A concretely-shaped
+  // local type is user data and must render as an inline editable object.
+  it("keeps a user-defined local `type Section` as an inline editable object", () => {
+    const project = new Project({
+      useInMemoryFileSystem: true,
+      compilerOptions: { skipLibCheck: true },
+    });
+    const sf = project.createSourceFile(
+      "props.ts",
+      `
+        interface Item { label: string; href: string; }
+        type Section = { label: string; items: Item[] };
+        export interface Props {
+          sections?: Section[];
+        }
+      `,
+    );
+    const schema = typeToJsonSchema(sf.getInterfaceOrThrow("Props").getType());
+
+    const sections = schema.properties.sections;
+    // Editable array of objects — NOT a section-picker reference.
+    expect(sections.type).toBe("array");
+    expect(JSON.stringify(sections)).not.toContain("__SECTION_REF__");
+
+    const item = sections.items;
+    expect(item.type).toBe("object");
+    expect(item.properties.label).toMatchObject({ type: "string" });
+    expect(item.properties.items.type).toBe("array");
+    expect(item.properties.items.items.type).toBe("object");
+    expect(item.properties.items.items.properties.href).toMatchObject({ type: "string" });
+  }, 30_000);
+});
+
 describe("typeToJsonSchema loader block-ref matching", () => {
   // Regression: a loader that returns an array whose element type has no
   // resolvable name (`VNode[]`, `string[]`, …) used to be bucketed under the

package/scripts/generate-schema.ts

@@ -306,6 +306,33 @@ const SECTION_REF_DEF_KEY = "__SECTION_REF__";
 // Well-known definition key for Resolvable (saved blocks picker)
 const RESOLVABLE_KEY = "Resolvable";
 
+/**
+ * Whether a prop annotated `Section` / `Section[]` is the framework's opaque
+ * Section type (a "pick any section" reference) rather than a user-defined type
+ * that merely happens to be named `Section`.
+ *
+ * The framework's `Section` is opaque — `export type Section = any` in the
+ * scaffolded `~/types/deco.ts` — so it resolves to `any` (or `unknown`). A
+ * component that declares its own local `type Section = { label; items }`
+ * (e.g. a footer column list) resolves to a concrete object with properties;
+ * that is user data and must render as an inline editable object, NOT a picker.
+ *
+ * Discriminates by the resolved shape after stripping `| null | undefined` and
+ * the array wrapper: only the opaque type is a section reference.
+ */
+function isOpaqueSectionType(propType: Type): boolean {
+  let type = propType;
+  if (type.isUnion()) {
+    const nonNull = type.getUnionTypes().filter((u) => !u.isNull() && !u.isUndefined());
+    if (nonNull.length === 1) type = nonNull[0];
+  }
+  if (type.isArray()) {
+    const el = type.getArrayElementType();
+    if (el) type = el;
+  }
+  return type.isAny() || type.isUnknown();
+}
+
 // Only truly React-internal props that are never user-defined.
 // Do NOT include "children", "type", "props", or "key" — those are commonly
 // used as legitimate property names in data interfaces (e.g. SelectedFacet
@@ -560,9 +587,16 @@ export function typeToJsonSchema(type: Type, visited = new Set<string>(), ctx?:
           if (tn) typeHint = tn.getText();
         }
 
-        // Section type → section picker reference (resolved by composeMeta)
+        // Section type → section picker reference (resolved by composeMeta).
+        // Guard on the resolved shape: the name `Section` is not reserved, so a
+        // component may declare its own local `type Section = { label; items }`
+        // (e.g. a footer column list). Only the framework's opaque Section type
+        // becomes a picker; a concretely-shaped local type falls through to the
+        // normal inline-object handling below (`isOpaqueSectionType`).
         const baseHint = typeHint.replace(/\s*\|\s*(null|undefined)/g, "").trim();
-        if (baseHint === "Section" || baseHint === "Section[]" || baseHint === "Section[] | null") {
+        const isSectionName =
+          baseHint === "Section" || baseHint === "Section[]" || baseHint === "Section[] | null";
+        if (isSectionName && isOpaqueSectionType(propType)) {
           const isArray = baseHint.includes("[]");
           const sectionSchema: any = isArray
             ? {

package/scripts/migrate/templates/perf-yml.ts

@@ -3,14 +3,16 @@
  *   .github/workflows/perf.yml     — GitHub Actions workflow
  *   tools/perf/changed-paths.sh    — maps edited sections → CMS page paths
  *   tools/perf/compare.mjs         — compares two LHCI result dirs, emits markdown
- *   lighthouserc.json              — LHCI collect settings (3 runs, mobile UA)
+ *   lighthouserc.json              — LHCI collect settings (3 runs, mobile UA, 4 categories)
  *
  * Design rationale:
  *   - CF Workers Builds generates a per-PR preview URL (workers.dev). Both the
  *     PR and main previews are workers.dev — no edge cache — so the delta is
  *     purely code, not cache state.
- *   - Gate signal = CLS + TBT (layout stability / JS work; cache-insensitive).
- *     LCP and score are informational only (noisy on cold SSR).
+ *   - Gate signal = CLS + TBT + a11y/best-practices/SEO scores. CLS/TBT are
+ *     layout stability / JS work; the three category scores are static-analysis
+ *     audits. All cache-insensitive, so a regression is real code, not cold SSR.
+ *     LCP and performance score are informational only (noisy on cold SSR).
  *   - Advisory: `continue-on-error: true`. Remove it once the site stabilises.
  *   - LHCI 0.15 does not write manifest.json; compare.mjs reads lhr-*.json
  *     directly and selects the median run by performance score.
@@ -40,7 +42,7 @@ function generatePerfYml(workerName: string): string {
 # preview URL do output — sem token CF nem build local.
 #
 # Baseline: URL fixa da preview do main (https://${workerName}.deco-cx.workers.dev).
-# Gate: CLS + TBT (estrutura/JS, insensíveis a cache). LCP/score: informativos.
+# Gate: CLS + TBT + A11y/BP/SEO (estrutura/JS + auditorias estáticas, insensíveis a cache). LCP/score: informativos.
 
 on:
   pull_request:
@@ -297,8 +299,10 @@ const COMPARE_MJS = `#!/usr/bin/env node
 // cache, same runner/region, same mobile UA — so the delta is the PR's code
 // effect, not cache warm/cold.
 //
-// Gate signal = CLS + TBT (page structure / JS work — cache-insensitive).
-// LCP / score are shown but informative only (noisy on cold workers.dev SSR).
+// Gate signal = CLS + TBT + a11y/best-practices/SEO scores. CLS/TBT are page
+// structure / JS work; the three category scores are static-analysis audits.
+// All are cache-insensitive, so a regression is real code, not cold SSR.
+// LCP / performance score are shown but informative only (noisy on cold workers.dev SSR).
 //
 // LHCI 0.15 does not write manifest.json; we read lhr-*.json directly.
 //
@@ -312,7 +316,12 @@ const TBT_ABS = 50; // ms — deltas below this are noise
 const TBT_REL = 0.15; // 15% relative change
 const CLS_ABS = 0.02; // absolute CLS delta that matters
 const CLS_FLOOR = 0.1; // only flag CLS regression when PR is above "good"
+const SCORE_DROP = 3; // pts — a11y/bp/seo score drop that gates (tolerates 1–2pt audit jitter)
+const SCORES = ["a11y", "bp", "seo"]; // gated category scores (0–100)
 
+// base/pr = { tbt, cls, a11y, bp, seo }. Called from selftest with only
+// { tbt, cls }: the SCORES deltas become NaN and NaN comparisons are false,
+// so score gating is simply inert there.
 function verdict(base, pr) {
   const tbtUp = pr.tbt - base.tbt;
   const tbtBad = tbtUp > TBT_ABS && tbtUp > base.tbt * TBT_REL;
@@ -320,8 +329,10 @@ function verdict(base, pr) {
   const clsUp = pr.cls - base.cls;
   const clsBad = clsUp > CLS_ABS && pr.cls > CLS_FLOOR;
   const clsGood = -clsUp > CLS_ABS && base.cls > CLS_FLOOR;
-  if (tbtBad || clsBad) return { icon: "🔴", gate: true };
-  if (tbtGood || clsGood) return { icon: "🟢", gate: false };
+  const scoreBad = SCORES.some((k) => pr[k] - base[k] <= -SCORE_DROP);
+  const scoreGood = !scoreBad && SCORES.some((k) => pr[k] - base[k] >= SCORE_DROP);
+  if (tbtBad || clsBad || scoreBad) return { icon: "🔴", gate: true };
+  if (tbtGood || clsGood || scoreGood) return { icon: "🟢", gate: false };
   return { icon: "⚪", gate: false };
 }
 
@@ -340,7 +351,10 @@ function loadDir(dir) {
     const lhr = runs[Math.floor(runs.length / 2)];
     const a = lhr.audits;
     byPath[new URL(url).pathname] = {
-      score: Math.round((lhr.categories.performance.score ?? 0) * 100),
+      score: Math.round((lhr.categories.performance?.score ?? 0) * 100),
+      a11y: Math.round((lhr.categories.accessibility?.score ?? 0) * 100),
+      bp: Math.round((lhr.categories["best-practices"]?.score ?? 0) * 100),
+      seo: Math.round((lhr.categories.seo?.score ?? 0) * 100),
       lcp: a["largest-contentful-paint"].numericValue,
       cls: a["cumulative-layout-shift"].numericValue,
       tbt: a["total-blocking-time"].numericValue,
@@ -351,11 +365,14 @@ function loadDir(dir) {
 
 const ms = (v) => \`\${Math.round(v)}ms\`;
 const cls = (v) => v.toFixed(3);
+const pts = (v) => \`\${Math.round(v)}\`;
 function delta(base, pr, fmt) {
   const d = pr - base;
   const arrow = d < 0 ? "↓" : d > 0 ? "↑" : "";
   return \`\${d > 0 ? "+" : ""}\${fmt(d)} \${arrow}\`.trim();
 }
+// base→PR (Δ) for a 0–100 category score.
+const scoreCell = (b, p) => \`\${b}→\${p} (\${delta(b, p, pts)})\`;
 
 function render(base, pr) {
   const paths = [...new Set([...Object.keys(base), ...Object.keys(pr)])].sort();
@@ -365,29 +382,29 @@ function render(base, pr) {
     "",
     "Ambas as previews rodam em \`*.workers.dev\` (sem edge cache), mesmo runner e UA mobile — o delta é efeito do código, não de cache quente/frio.",
     "",
-    "**Gate:** CLS + TBT (estrutura / JS). LCP e score são informativos (ruído esperado em SSR frio).",
+    "**Gate:** CLS + TBT + A11y/BP/SEO (estrutura/JS + auditorias estáticas). LCP e score de performance são informativos (ruído esperado em SSR frio).",
     "",
-    "| Página | | CLS (base→PR) | TBT (base→PR) | LCP | Score |",
-    "|---|:--:|---|---|---|---|",
+    "| Página | | CLS (base→PR) | TBT (base→PR) | A11y | BP | SEO | LCP | Score |",
+    "|---|:--:|---|---|---|---|---|---|---|",
   ];
   for (const p of paths) {
     const b = base[p];
     const r = pr[p];
     if (!b || !r) {
-      lines.push(\`| \\\`\${p}\\\` | ⚠️ | \${b ? "faltou PR" : "faltou base"} | | | |\`);
+      lines.push(\`| \\\`\${p}\\\` | ⚠️ | \${b ? "faltou PR" : "faltou base"} | | | | | | |\`);
       continue;
     }
     const v = verdict(b, r);
     anyGate = anyGate || v.gate;
     lines.push(
-      \`| \\\`\${p}\\\` | \${v.icon} | \${cls(b.cls)}→\${cls(r.cls)} (\${delta(b.cls, r.cls, cls)}) | \${ms(b.tbt)}→\${ms(r.tbt)} (\${delta(b.tbt, r.tbt, ms)}) | \${ms(b.lcp)}→\${ms(r.lcp)} | \${b.score}→\${r.score} |\`,
+      \`| \\\`\${p}\\\` | \${v.icon} | \${cls(b.cls)}→\${cls(r.cls)} (\${delta(b.cls, r.cls, cls)}) | \${ms(b.tbt)}→\${ms(r.tbt)} (\${delta(b.tbt, r.tbt, ms)}) | \${scoreCell(b.a11y, r.a11y)} | \${scoreCell(b.bp, r.bp)} | \${scoreCell(b.seo, r.seo)} | \${ms(b.lcp)}→\${ms(r.lcp)} | \${b.score}→\${r.score} |\`,
     );
   }
   lines.push("");
   lines.push(
     anyGate
-      ? "🔴 **Regressão de CLS/TBT detectada** (advisory — não trava o merge)."
-      : "🟢 Sem regressão de CLS/TBT.",
+      ? "🔴 **Regressão detectada em CLS/TBT/A11y/BP/SEO** (advisory — não trava o merge)."
+      : "🟢 Sem regressão nas métricas gateadas (CLS/TBT/A11y/BP/SEO).",
   );
   return { md: lines.join("\\n"), anyGate };
 }
@@ -400,6 +417,13 @@ function selftest() {
   ok(!verdict({ tbt: 100, cls: 0.02 }, { tbt: 100, cls: 0.08 }).gate, "cls under 0.1 floor no gate");
   ok(verdict({ tbt: 300, cls: 0.01 }, { tbt: 100, cls: 0.01 }).icon === "🟢", "tbt drop is green");
   ok(verdict({ tbt: 100, cls: 0.01 }, { tbt: 105, cls: 0.01 }).icon === "⚪", "tiny change is neutral");
+  // Category-score gating. S() supplies a neutral CLS/TBT baseline plus perfect scores.
+  const S = (o) => ({ tbt: 100, cls: 0.01, a11y: 100, bp: 100, seo: 100, ...o });
+  ok(verdict(S({}), S({ seo: 96 })).gate, "seo 100→96 (-4) should gate");
+  ok(verdict(S({ a11y: 90 }), S({ a11y: 87 })).gate, "a11y -3 should gate");
+  ok(!verdict(S({}), S({ bp: 98 })).gate, "bp -2 is jitter, no gate");
+  ok(verdict(S({ a11y: 90 }), S({ a11y: 95 })).icon === "🟢", "a11y +5 is green");
+  ok(verdict(S({}), S({ a11y: 99, seo: 97 })).icon === "🔴", "seo -3 gates even with a11y -1");
   console.log("compare.mjs selftest: OK");
 }
 
@@ -411,12 +435,12 @@ process.stdout.write(render(loadDir(baseDir), loadDir(prDir)).md + "\\n");
 `;
 
 const LIGHTHOUSERC_JSON = `{
-  "//": "Lighthouse CI config for the per-PR perf workflow (.github/workflows/perf.yml). Mobile UA matches worker-entry.ts buildSegment (MOBILE_RE) so warmup and measurement hit the same device cache key.",
+  "//": "Lighthouse CI config for the per-PR perf workflow (.github/workflows/perf.yml). Mobile UA matches worker-entry.ts buildSegment (MOBILE_RE) so warmup and measurement hit the same device cache key. accessibility/best-practices/seo são análise estática determinística (não sofrem ruído de SSR frio como LCP/score), então compare.mjs os gateia por regressão de score.",
   "ci": {
     "collect": {
       "numberOfRuns": 3,
       "settings": {
-        "onlyCategories": ["performance"],
+        "onlyCategories": ["performance", "accessibility", "best-practices", "seo"],
         "emulatedUserAgent": "Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36"
       }
     }