@khester/create-dynamics-app 3.1.0 → 3.2.0

package/templates/grid-customizer/dev/harness/dataverse.ts

@@ -0,0 +1,168 @@
+import { apiFetch, toHttpError } from '@dataverse-kit/pcf-dev-harness/shell';
+import type { ColumnDataType } from '../../{{componentName}}/types';
+import type { HarnessColumn, HarnessRow } from './MockGrid';
+
+/**
+ * TIER 2 of the dev harness — the {{componentName}}-specific live-org read.
+ *
+ * The reusable parts (shell, proxy, token refresh, `apiFetch`'s one-shot 401/403 retry) come
+ * from `@dataverse-kit/pcf-dev-harness`. This file supplies what only THIS control needs,
+ * and it is not the rows: it is the **column data types**.
+ *
+ * ★ A customizer is dispatched entirely by `ColumnDataType`. Guessing the type from a sample
+ * value cannot work — a Currency and a Decimal are both `number` over the wire, a Picklist
+ * and an Integer are both `number`, a DateOnly and a DateAndTime are both strings — so the
+ * harness would exercise the wrong handler (or none) and tell you nothing. It therefore
+ * reads the real `AttributeType` from entity metadata, the same classification the platform
+ * uses when it decides which override to call.
+ *
+ * All calls go through the same-origin `/api/data` proxy in `vite.config.ts`, which injects
+ * the bearer token server-side — no token ever reaches the browser. READ-ONLY: the harness
+ * never writes, so there is no save counterpart.
+ */
+
+export type { HttpError } from '@dataverse-kit/pcf-dev-harness/shell';
+
+/** What the grid contract calls a column, keyed by Dataverse's `AttributeTypeCode`. */
+const ATTRIBUTE_TYPE_TO_COLUMN_TYPE: Readonly<Record<string, ColumnDataType>> = {
+  // The three that actually drive this template's overrides.
+  Picklist: 'OptionSet',
+  State: 'OptionSet',
+  Status: 'OptionSet',
+  Boolean: 'TwoOptions',
+  Money: 'Currency',
+  Decimal: 'Decimal',
+  Double: 'FloatingPoint',
+  // Everything below is mapped for completeness, so a column you add an override for later
+  // is dispatched correctly without touching this file.
+  Integer: 'Integer',
+  BigInt: 'Integer',
+  String: 'Text',
+  Memo: 'TextArea',
+  DateTime: 'DateAndTime',
+  Lookup: 'Lookup',
+  Customer: 'Customer',
+  Owner: 'Owner',
+  Virtual: 'Text',
+  Uniqueidentifier: 'Text',
+  EntityName: 'Text',
+};
+
+/**
+ * ★ Lookup-typed columns are mapped above but cannot be LOADED by this harness. Dataverse
+ * requires the `_<name>_value` form in `$select` for a lookup, while the metadata call wants
+ * the plain logical name — so a binding that lists one gets a clean metadata read and then a
+ * 400 on the row fetch. Drop lookups from the Columns box; the mapping is here so that a
+ * lookup override you add later dispatches correctly in the org, where the platform supplies
+ * the columns rather than you typing them.
+ */
+
+interface AttributeMetadata {
+  LogicalName: string;
+  AttributeType: string;
+  DisplayName?: { UserLocalizedLabel?: { Label?: string } | null } | null;
+}
+
+/** OData annotation carrying the text the platform itself would paint in the cell. */
+const FORMATTED = '@OData.Community.Display.V1.FormattedValue';
+
+/** Resolve an entity SET name (`accounts`) to its logical name (`account`) for metadata. */
+async function resolveLogicalName(entitySetName: string): Promise<string> {
+  const params = new URLSearchParams({
+    $select: 'LogicalName',
+    $filter: `EntitySetName eq '${entitySetName.replace(/'/g, "''")}'`,
+  });
+  const res = await apiFetch(`/api/data/v9.2/EntityDefinitions?${params}`);
+  if (!res.ok) throw await toHttpError(res);
+  const body = (await res.json()) as { value?: { LogicalName: string }[] };
+  const logicalName = body.value?.[0]?.LogicalName;
+  if (!logicalName) {
+    throw new Error(`No table has entity set name "${entitySetName}".`);
+  }
+  return logicalName;
+}
+
+/**
+ * Read `AttributeType` + display label for every requested column, in the order given.
+ *
+ * Fetches the table's WHOLE attribute set (~200 rows for `account`) rather than filtering to
+ * the requested columns. Deliberate: an `or`-chain built from user-typed field names is the
+ * one place in this file where input would reach an OData filter expression, and the saving
+ * is a few hundred KB on a dev-only call made once per Load.
+ */
+async function fetchColumnTypes(
+  logicalName: string,
+  fields: string[],
+): Promise<HarnessColumn[]> {
+  const params = new URLSearchParams({ $select: 'LogicalName,AttributeType,DisplayName' });
+  const res = await apiFetch(
+    `/api/data/v9.2/EntityDefinitions(LogicalName='${logicalName}')/Attributes?${params}`,
+  );
+  if (!res.ok) throw await toHttpError(res);
+  const body = (await res.json()) as { value?: AttributeMetadata[] };
+
+  const byName = new Map((body.value ?? []).map((a) => [a.LogicalName, a]));
+  return fields.map((f, i) => {
+    const meta = byName.get(f);
+    return {
+      name: f,
+      displayName: meta?.DisplayName?.UserLocalizedLabel?.Label ?? f,
+      // An unknown or missing attribute falls back to Text — it then renders through the
+      // default path, which is the honest outcome for a column we cannot classify.
+      dataType: (meta && ATTRIBUTE_TYPE_TO_COLUMN_TYPE[meta.AttributeType]) ?? 'Text',
+      width: i === 0 ? 220 : 160,
+    };
+  });
+}
+
+/**
+ * Fetch `top` rows of `select` columns, with each column's real data type attached.
+ *
+ * @param entitySetName plural set name, e.g. `accounts`
+ * @param select        comma-separated logical names, e.g. `name,revenue,statuscode`
+ * @param top           max rows
+ */
+export async function fetchGridData(
+  entitySetName: string,
+  select: string,
+  top: string,
+): Promise<{ columns: HarnessColumn[]; rows: HarnessRow[] }> {
+  const fields = select
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean);
+  if (fields.length === 0) throw new Error('Enter at least one column.');
+
+  const logicalName = await resolveLogicalName(entitySetName);
+  const columns = await fetchColumnTypes(logicalName, fields);
+
+  const params = new URLSearchParams({ $select: fields.join(','), $top: top || '25' });
+  const res = await apiFetch(`/api/data/v9.2/${entitySetName}?${params}`, {
+    // Ask for the formatted-value annotations the deployed control renders.
+    headers: { Prefer: 'odata.include-annotations="OData.Community.Display.V1.FormattedValue"' },
+  });
+  if (!res.ok) throw await toHttpError(res);
+  const body = (await res.json()) as { value?: Record<string, unknown>[] };
+
+  const rows: HarnessRow[] = (body.value ?? []).map((record) => {
+    const row: HarnessRow = {};
+    for (const f of fields) {
+      const raw = record[f];
+      const formatted = record[`${f}${FORMATTED}`];
+      row[f] = {
+        raw: raw ?? undefined,
+        // No annotation means the value needs no formatting (plain text, a number the
+        // platform shows as-is) — stringify the raw value, as the grid would.
+        formatted:
+          formatted !== undefined && formatted !== null
+            ? String(formatted)
+            : raw === undefined || raw === null
+              ? ''
+              : String(raw),
+      };
+    }
+    return row;
+  });
+
+  return { columns, rows };
+}

package/templates/grid-customizer/dev/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{componentName}} – Dev Harness</title>
+    <style>
+      html, body, #root {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/templates/grid-customizer/dev/main.tsx

@@ -0,0 +1,260 @@
+import * as React from 'react';
+// ReactDOM.render, NOT createRoot — this control is pinned to React 16.14.0 to match the
+// `Reactv16` platform global it externalises, and `react-dom/client` does not exist there.
+import * as ReactDOM from 'react-dom';
+import {
+  HarnessShell,
+  usePersistedState,
+  type ThemeChoice,
+  type DataSource,
+  type HarnessField,
+} from '@dataverse-kit/pcf-dev-harness/shell';
+import { createCellRendererOverrides } from '../{{componentName}}/customizers/CellRendererOverrides';
+import { MockGrid, type HarnessColumn, type HarnessRow } from './harness/MockGrid';
+import { fetchGridData, type HttpError } from './harness/dataverse';
+
+/**
+ * Dev harness for {{componentName}}.
+ *
+ * ★ It renders the customizer's REAL override map (`createCellRendererOverrides`) through a
+ * stand-in grid that follows the same call contract as PowerAppsOneGrid — see
+ * `harness/MockGrid.tsx`. `npm start` cannot do this: the stock PCF harness has no grid, so
+ * the overrides are never invoked and the canvas is simply blank.
+ *
+ * Two data sources:
+ *   - Mock — the recordset below, one column per overridden data type. Needs no org.
+ *   - Live — real rows and, critically, real column DATA TYPES read from entity metadata.
+ *            Enabled only when VITE_DYNAMICS_URL is set in `.env.local`.
+ */
+
+/** Live-org binding: entity set + columns + page size. */
+interface GridBinding {
+  entitySetName: string;
+  select: string;
+  top: string;
+}
+
+/** One column per data type this template overrides, plus a Text column to show fall-through. */
+const MOCK_COLUMNS: HarnessColumn[] = [
+  { name: 'name', displayName: 'Name', dataType: 'Text', width: 200 },
+  { name: 'statuscode', displayName: 'Status', dataType: 'OptionSet', width: 150 },
+  { name: 'revenue', displayName: 'Revenue', dataType: 'Currency', width: 150 },
+  { name: 'percentcomplete', displayName: 'Complete', dataType: 'Decimal', width: 200 },
+  { name: 'donotemail', displayName: 'Email OK', dataType: 'TwoOptions', width: 130 },
+];
+
+function cell(raw: unknown, formatted: string): { raw: unknown; formatted: string } {
+  return { raw, formatted };
+}
+
+const MOCK_ROWS: HarnessRow[] = [
+  {
+    name: cell('Contoso Ltd', 'Contoso Ltd'),
+    statuscode: cell(1, 'Active'),
+    revenue: cell(5200000, '$5,200,000.00'),
+    percentcomplete: cell(82, '82'),
+    donotemail: cell(true, 'Yes'),
+  },
+  {
+    name: cell('Fabrikam Inc', 'Fabrikam Inc'),
+    statuscode: cell(2, 'Pending'),
+    revenue: cell(-18500, '-$18,500.00'),
+    percentcomplete: cell(35, '35'),
+    donotemail: cell(false, 'No'),
+  },
+  {
+    name: cell('Adventure Works', 'Adventure Works'),
+    statuscode: cell(3, 'Blocked'),
+    revenue: cell(920000, '$920,000.00'),
+    percentcomplete: cell(0, '0'),
+    donotemail: cell(false, 'No'),
+  },
+  {
+    name: cell('Northwind Traders', 'Northwind Traders'),
+    statuscode: cell(4, 'Completed'),
+    revenue: cell(3400000, '$3,400,000.00'),
+    percentcomplete: cell(100, '100'),
+    donotemail: cell(true, 'Yes'),
+  },
+  {
+    name: cell('Tailspin Toys', 'Tailspin Toys'),
+    // An option label absent from config.STATUS_COLORS — proves the derived-colour fallback.
+    statuscode: cell(5, 'Awaiting Review'),
+    revenue: cell(undefined, ''),
+    percentcomplete: cell(58, '58'),
+    donotemail: cell(false, 'No'),
+  },
+  {
+    // ★ The null row. Dataverse columns are nullable — a Boolean added to a table with
+    // existing rows is null on all of them — and a renderer that coerces null would paint
+    // this as a definite "No". Every cell here must fall through to the DEFAULT renderer
+    // (blank), not to a custom one. If a badge, tick or bar appears on this row, a handler
+    // is missing its empty check.
+    name: cell('Wingtip Toys (empty row)', 'Wingtip Toys (empty row)'),
+    statuscode: cell(null, ''),
+    revenue: cell(null, ''),
+    percentcomplete: cell(null, ''),
+    donotemail: cell(null, ''),
+  },
+];
+
+// VITE_-prefixed vars reach client code; this one only GATES Live mode. The token is
+// deliberately not read here — it would be inlined into the bundle. The proxy injects it.
+const LIVE_ENABLED = !!import.meta.env.VITE_DYNAMICS_URL;
+
+/** Turn a failed live fetch into a red status line, calling out auth failures specifically. */
+function describeLoadError(e: unknown): React.ReactNode {
+  const err = e as HttpError;
+  // The dev server refreshes the token in the background, so a 401/403 that survives the
+  // client retry means the `az login` session itself lapsed — not just the short-lived token.
+  const msg =
+    err.status === 401 || err.status === 403
+      ? 'Not authorized — your `az login` session has expired. Run `az login`, then Load again.'
+      : `Failed to load: ${err.message}`;
+  return <span style={{ color: '#a4262c' }}>{msg}</span>;
+}
+
+const Harness: React.FC = () => {
+  // Panel CONFIG persists across reloads (localStorage); fetched DATA does not.
+  const [width, setWidth] = usePersistedState('width', 0); // 0 => fill the canvas
+  const [height, setHeight] = usePersistedState('height', 0); // 0 => auto
+  const [theme, setTheme] = usePersistedState<ThemeChoice>('theme', 'light');
+  const [dataSource, setDataSource] = usePersistedState<DataSource>('dataSource', 'mock');
+  const [binding, setBinding] = usePersistedState<GridBinding>('binding', {
+    entitySetName: 'accounts',
+    select: 'name,statuscode,revenue,donotemail',
+    top: '25',
+  });
+  // Seeded with the mock decimal column so the progress renderer is visible on first run.
+  // The SHIPPED default (config.PROGRESS_COLUMNS) is deliberately empty — see that file.
+  const [progressColumns, setProgressColumns] = usePersistedState(
+    'progressColumns',
+    'percentcomplete',
+  );
+
+  const [columns, setColumns] = React.useState<HarnessColumn[]>(MOCK_COLUMNS);
+  const [rows, setRows] = React.useState<HarnessRow[]>(MOCK_ROWS);
+  const [liveStatus, setLiveStatus] = React.useState<React.ReactNode>(null);
+
+  // The real override map, rebuilt only when the progress-column list changes. This is the
+  // same factory index.ts calls — the harness never forks the renderers.
+  const overrides = React.useMemo(
+    () =>
+      createCellRendererOverrides({
+        progressColumns: progressColumns
+          .split(',')
+          .map((s) => s.trim())
+          .filter(Boolean),
+      }),
+    [progressColumns],
+  );
+
+  // On reload with a restored Live selection: clear and prompt for Load — or fall back to
+  // Mock when this session has no org configured. Runs once on mount.
+  React.useEffect(() => {
+    if (dataSource !== 'live') return;
+    if (!LIVE_ENABLED) {
+      setDataSource('mock');
+      return;
+    }
+    setColumns([]);
+    setRows([]);
+    setLiveStatus(<span style={{ color: '#605e5c' }}>Binding restored — click Load.</span>);
+    // Mount-only by design: `[]` deliberately omits dataSource/LIVE_ENABLED, because this
+    // reconciles the RESTORED selection once and must not re-run when it later changes.
+    // (No eslint-disable here: this template's .eslintrc loads no react-hooks plugin, and a
+    // disable naming an unresolvable rule is an ESLint ERROR the moment anything lints it —
+    // the failure mode gated by "PCF templates never disable an unresolvable ESLint rule".)
+  }, []);
+
+  const onDataSourceChange = (next: DataSource): void => {
+    setDataSource(next);
+    if (next === 'mock') {
+      setColumns(MOCK_COLUMNS);
+      setRows(MOCK_ROWS);
+      setLiveStatus(null);
+    } else {
+      setColumns([]);
+      setRows([]);
+      setLiveStatus(<span style={{ color: '#605e5c' }}>Enter a binding and click Load.</span>);
+    }
+  };
+
+  const onLoadLive = (): void => {
+    void (async () => {
+      setLiveStatus(<span style={{ color: '#605e5c' }}>Loading…</span>);
+      try {
+        const result = await fetchGridData(binding.entitySetName, binding.select, binding.top);
+        setColumns(result.columns);
+        setRows(result.rows);
+        const typed = result.columns.map((c) => `${c.name}:${c.dataType}`).join(', ');
+        setLiveStatus(
+          <span style={{ color: '#107c10' }}>
+            Loaded {result.rows.length} row{result.rows.length === 1 ? '' : 's'} — {typed}
+          </span>,
+        );
+      } catch (e) {
+        setLiveStatus(describeLoadError(e));
+      }
+    })();
+  };
+
+  const bindingFields: HarnessField[] = [
+    {
+      kind: 'text',
+      label: 'Entity set (plural)',
+      placeholder: 'accounts',
+      value: binding.entitySetName,
+      onChange: (v) => setBinding((b) => ({ ...b, entitySetName: v })),
+    },
+    {
+      kind: 'text',
+      label: 'Columns ($select, comma-separated)',
+      placeholder: 'name,statuscode,revenue',
+      value: binding.select,
+      onChange: (v) => setBinding((b) => ({ ...b, select: v })),
+    },
+    {
+      kind: 'text',
+      label: 'Top (max rows)',
+      placeholder: '25',
+      value: binding.top,
+      onChange: (v) => setBinding((b) => ({ ...b, top: v })),
+    },
+  ];
+
+  return (
+    <HarnessShell
+      title="{{componentName}} — dev harness"
+      subtitle="Grid customizer · cell renderer overrides against a stand-in OneGrid"
+      width={width}
+      onWidthChange={setWidth}
+      height={height}
+      onHeightChange={setHeight}
+      theme={theme}
+      onThemeChange={setTheme}
+      dataSource={dataSource}
+      onDataSourceChange={onDataSourceChange}
+      liveEnabled={LIVE_ENABLED}
+      bindingFields={bindingFields}
+      onLoadLive={onLoadLive}
+      liveStatus={liveStatus}
+      // ★ NOT manifest input properties — a grid customizer cannot have any (see the
+      // manifest). This is the compile-time config from customizers/config.ts, exposed here
+      // so you can find the right column list before hard-coding it and redeploying.
+      fields={[
+        {
+          kind: 'text',
+          label: 'Progress columns (config.PROGRESS_COLUMNS)',
+          placeholder: 'dvk_percentcomplete',
+          value: progressColumns,
+          onChange: setProgressColumns,
+        },
+      ]}
+    >
+      <MockGrid columns={columns} rows={rows} overrides={overrides} />
+    </HarnessShell>
+  );
+};
+
+ReactDOM.render(<Harness />, document.getElementById('root'));

package/templates/grid-customizer/dev/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/grid-customizer/env.local.example

@@ -0,0 +1,24 @@
+# Live-org dev harness config. Copy to `.env.local` (gitignored) and fill in your org.
+#
+#   cp env.local.example .env.local
+#   az login
+#   npm run dev          # http://localhost:8182
+#
+# `az login` alone is enough: the Vite dev server acquires the bearer token in-process and
+# refreshes it before expiry. DYNAMICS_TOKEN below is only an optional static fallback.
+
+# The ONLY var exposed to the browser bundle. Setting it enables the harness "Live" toggle;
+# leave it blank to run against mock data only.
+VITE_DYNAMICS_URL=
+
+# Optional. Set for a CDX / cross-tenant org — passed to `az --tenant`.
+DYNAMICS_TENANT=
+
+# Optional static token fallback, used only if the in-process `az` acquisition fails.
+# ★ NO `VITE_` PREFIX, deliberately: a VITE_-prefixed var is inlined into the client bundle,
+# which would ship your bearer token to the browser. Server-side only.
+#
+# ★ Do NOT populate this with the workspace's `msft/04-dynamics/scripts/get-token.sh` — its
+# detect_env_prefix writes REACT_APP_/VITE_-prefixed names, and this harness looks up a bare
+# `DYNAMICS_TOKEN`. Use `npm run auth:token` (the pcf-dev-token bin) instead.
+DYNAMICS_TOKEN=

package/templates/grid-customizer/eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2021,
+    "sourceType": "module",
+    "ecmaFeatures": { "jsx": true }
+  },
+  "env": { "browser": true, "es2021": true },
+  "ignorePatterns": ["out/**", "node_modules/**", "**/generated/**"]
+}

package/templates/grid-customizer/featureconfig.json

@@ -0,0 +1,3 @@
+{
+  "pcfReactPlatformLibraries": "on"
+}

package/templates/grid-customizer/gitignore

@@ -1,4 +1,7 @@
 node_modules/
+out/
 dist/
+generated/
 *.log
 .env
+.env.local

package/templates/grid-customizer/package.json

@@ -1,25 +1,39 @@
 {
   "name": "{{projectName}}",
   "version": "1.0.0",
-  "description": "{{componentName}} — Dynamics 365 editable-grid customizer (Fluent v9)",
-  "private": true,
+  "description": "{{componentName}} — Power Apps OneGrid cell-renderer customizer (PCF, Fluent v8)",
+  "_comment_versions": "react/react-dom are pinned EXACTLY to 16.14.0 and @fluentui/react to 8.121.1 because this is a control-type=\"virtual\" control: both are externalised to the platform globals Reactv16 / FluentUIReactv81211, so the compiled-against version MUST equal the served version. Measured live 2026-08-02 on orge2e285aa: the model-driven host serves React 17.0.2 under the Reactv16 alias and defines NO Reactv18. Fluent 8.121.1 AND 9.68.0 (FluentUIReactv940) are both served, but a customizer's cells are rendered inside Microsoft's v8 OneGrid tree — see the manifest for why that makes v8 the right contract here.",
   "scripts": {
-    "build": "webpack --mode production",
-    "dev": "webpack --mode development --watch",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint src --ext .ts,.tsx"
+    "build": "pcf-scripts build",
+    "clean": "pcf-scripts clean",
+    "rebuild": "pcf-scripts rebuild",
+    "start": "pcf-scripts start",
+    "refreshTypes": "pcf-scripts refreshTypes",
+    "dev": "vite --config vite.config.ts",
+    "dev:token": "npm run auth:token && npm run dev",
+    "auth:token": "pcf-dev-token",
+    "typecheck:dev": "tsc -p tsconfig.dev.json --noEmit",
+    "harness:check": "npm run typecheck:dev && vite build --config vite.config.ts"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@fluentui/react-components": "^9.46.2"
+    "@fluentui/react": "8.121.1",
+    "@types/powerapps-component-framework": "^1.3.18",
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.3.3",
-    "webpack": "^5.89.0",
-    "webpack-cli": "^5.1.4"
-  }
+    "@dataverse-kit/pcf-dev-harness": "^0.2.0",
+    "@types/node": "^18.16.9",
+    "@types/react": "^16.14.34",
+    "@types/react-dom": "^16.9.17",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "pcf-scripts": "^1",
+    "pcf-start": "^1",
+    "typescript": "^5.3.0",
+    "vite": "^5.4.0"
+  },
+  "browserslist": [
+    "last 2 versions"
+  ]
 }

package/templates/grid-customizer/pcfconfig.json

@@ -0,0 +1,3 @@
+{
+  "outDir": "./out/controls"
+}

package/templates/grid-customizer/tsconfig.dev.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "skipLibCheck": true
+  },
+  "//": [
+    "★ `exclude` is INHERITED through `extends`, so it MUST be overridden here — otherwise",
+    "dev/ stays excluded from its own project, `include` resolves to nothing, and",
+    "`npm run typecheck:dev` passes while checking zero files: a green gate gating nothing.",
+    "dev/main.tsx imports the real cellRendererOverrides, so this also typechecks the",
+    "customizer against the grid contract."
+  ],
+  "exclude": ["node_modules", "out"],
+  "include": ["dev", "vite.config.ts"]
+}

package/templates/grid-customizer/tsconfig.json

@@ -1,15 +1,22 @@
 {
+  "extends": "./node_modules/pcf-scripts/tsconfig_base.json",
   "compilerOptions": {
-    "target": "ES2018",
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "jsx": "react-jsx",
-    "strict": true,
+    "typeRoots": ["node_modules/@types"],
+    "jsx": "react",
     "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "skipLibCheck": true,
-    "declaration": false,
-    "lib": ["DOM", "DOM.Iterable", "ES2018"]
+    "experimentalDecorators": true,
+    "skipLibCheck": true
   },
-  "include": ["src"]
+  "//": [
+    "★ `exclude` REPLACES the base's [\"./node_modules\"] — node_modules MUST be re-listed here.",
+    "pcf-scripts runs ts-loader in full (non-transpileOnly) mode, and ts-loader seeds its file",
+    "list from EVERY file the tsconfig resolves — not just what webpack reaches from the entry.",
+    "So without this exclude the Vite harness under dev/ would be typechecked as part of the",
+    "control build and could fail it. dev/ has its own project: tsconfig.dev.json.",
+    "",
+    "`jsx: react` (classic) rather than `react-jsx`: the automatic runtime emits imports of",
+    "`react/jsx-runtime`, which does not exist in React 16 — the version this control is pinned",
+    "to so it matches the platform's Reactv16 global."
+  ],
+  "exclude": ["node_modules", "out", "dev", "vite.config.ts"]
 }