npm - @khester/create-dynamics-app - Versions diffs - 2.1.0 → 2.2.0 - Mend

@khester/create-dynamics-app 2.1.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (121) hide show

package/templates/grid-starter/src/core/services/crudLogging.ts ADDED Viewed

@@ -0,0 +1,52 @@
+// Binds the generic `withCrudLog` wrapper (from @khester/reusable-components) to
+// the Dataverse error shapes thrown by the IApiService implementations, so each
+// service method can be instrumented with a single `logCrud(meta, fn)` call.
+//
+// `parseServiceError` lives here (app/template code), not in the library — the
+// library's logger stays backend-agnostic and the app injects this parser.
+import { withCrudLog, type CrudMeta } from "@khester/reusable-components";
+/**
+ * Extract a numeric status + human message from the error shapes the services
+ * throw: an `Error("… 400: <body>")` whose body may embed a Dataverse error
+ * JSON blob, or a plain `json.error` object with a CDS InnerError message.
+ */
+function parseServiceError(err: unknown): { status?: number; message?: string } {
+  if (err && typeof err === "object" && !(err instanceof Error)) {
+    const obj = err as Record<string, unknown>;
+    const inner = obj["@Microsoft.PowerApps.CDS.InnerError.Message"];
+    const message =
+      (typeof inner === "string" && inner) ||
+      (typeof obj.message === "string" && obj.message) ||
+      undefined;
+    const status = typeof obj.status === "number" ? obj.status : undefined;
+    return { status, message: message || undefined };
+  }
+  if (err instanceof Error) {
+    const statusMatch = err.message.match(/\b(\d{3})\b/);
+    const status = statusMatch ? Number(statusMatch[1]) : undefined;
+    const jsonStart = err.message.indexOf("{");
+    if (jsonStart !== -1) {
+      try {
+        const parsed = JSON.parse(err.message.substring(jsonStart));
+        const inner =
+          parsed?.error?.["@Microsoft.PowerApps.CDS.InnerError.Message"];
+        const message = inner || parsed?.error?.message || err.message;
+        return { status, message };
+      } catch {
+        // not JSON — fall through to the raw message
+      }
+    }
+    return { status, message: err.message };
+  }
+  return { message: String(err) };
+}
+/** Run a CRUD operation, emitting one structured `[CRUD] …` log line for it. */
+export function logCrud<T>(meta: CrudMeta, fn: () => Promise<T>): Promise<T> {
+  return withCrudLog(meta, fn, { parseError: parseServiceError });
+}

package/templates/grid-starter/src/dev-tools/DevPanel.tsx ADDED Viewed

@@ -0,0 +1,239 @@
+import React, { useCallback, useMemo, useState } from "react";
+import {
+  Panel,
+  PanelType,
+  TextField,
+  PrimaryButton,
+  DefaultButton,
+  Stack,
+  Text,
+  Separator,
+  MessageBar,
+  MessageBarType,
+  Link,
+  Icon,
+} from "@fluentui/react";
+import { logger } from "@khester/reusable-components";
+// Floating dev-tools panel for local development — a 🔧 FAB (bottom-right) that
+// opens a Fluent Panel. Localhost-gated: it renders nothing once deployed, so a
+// live custom page never shows it. Modeled on the original import_weights dev tool,
+// adapted to Vite + this minimal Account example.
+//
+// It does NOT authenticate — "live data" is still the token-proxy env
+// (npm run auth:token + DYNAMICS_URL). The panel surfaces the active mode and lets
+// you set a record GUID in the URL (?id= + reload). The grid starter loads the full
+// list and ignores ?id=; wire it into GridPage if you add a record-detail view.
+const GUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+const RECENT_KEY = "cda-dev-panel-recent";
+const stripBraces = (s: string) => s.replace(/[{}]/g, "").trim();
+function isLocalhost(): boolean {
+  return (
+    typeof window !== "undefined" &&
+    (window.location.hostname === "localhost" ||
+      window.location.hostname === "127.0.0.1")
+  );
+}
+function getRecent(): string[] {
+  try {
+    return JSON.parse(localStorage.getItem(RECENT_KEY) || "[]");
+  } catch {
+    return [];
+  }
+}
+function addRecent(id: string): string[] {
+  const next = [id, ...getRecent().filter((x) => x !== id)].slice(0, 5);
+  try {
+    localStorage.setItem(RECENT_KEY, JSON.stringify(next));
+  } catch {
+    /* ignore */
+  }
+  return next;
+}
+const fabStyle: React.CSSProperties = {
+  position: "fixed",
+  bottom: 20,
+  right: 20,
+  zIndex: 2147483000,
+  width: 48,
+  height: 48,
+  borderRadius: "50%",
+  backgroundColor: "#0078d4",
+  color: "#ffffff",
+  boxShadow: "0 2px 8px rgba(0, 0, 0, 0.26)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  border: "none",
+  cursor: "pointer",
+  fontSize: 20,
+  padding: 0,
+};
+const EnvRow: React.FC<{ label: string; value: string }> = ({ label, value }) => (
+  <div
+    style={{
+      display: "flex",
+      justifyContent: "space-between",
+      gap: 12,
+      padding: "2px 0",
+      fontSize: 12,
+    }}
+  >
+    <span style={{ color: "#605e5c", fontWeight: 600 }}>{label}</span>
+    <span
+      title={value}
+      style={{
+        color: "#323130",
+        maxWidth: 210,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      }}
+    >
+      {value}
+    </span>
+  </div>
+);
+export const DevPanel: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  const [recordId, setRecordId] = useState(
+    () => new URLSearchParams(window.location.search).get("id") || "",
+  );
+  const [guidError, setGuidError] = useState<string | null>(null);
+  const [recent, setRecent] = useState<string[]>(getRecent);
+  const [logs, setLogs] = useState<string | null>(null);
+  const mode = useMemo(
+    () =>
+      import.meta.env.VITE_USE_PROXY
+        ? "Token-proxy (live Dataverse)"
+        : "Mock (in-memory)",
+    [],
+  );
+  const targetUrl = import.meta.env.VITE_DYNAMICS_URL || "";
+  const openRecord = useCallback((id: string) => {
+    const clean = stripBraces(id);
+    if (!GUID_RE.test(clean)) {
+      setGuidError("Invalid GUID (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx).");
+      return;
+    }
+    setRecent(addRecent(clean));
+    const url = new URL(window.location.href);
+    url.searchParams.set("id", clean);
+    window.location.href = url.toString(); // reload with ?id= (consume it in GridPage if needed)
+  }, []);
+  // Localhost-only. (Hooks run unconditionally above this guard.)
+  if (!isLocalhost()) return null;
+  return (
+    <>
+      <button
+        style={fabStyle}
+        title="Dev Tools"
+        aria-label="Open dev tools panel"
+        onClick={() => setOpen(true)}
+      >
+        🔧
+      </button>
+      <Panel
+        isOpen={open}
+        onDismiss={() => setOpen(false)}
+        type={PanelType.smallFixedFar}
+        headerText="Dev Tools"
+        isLightDismiss
+        styles={{ main: { maxWidth: 360 } }}
+      >
+        <Stack tokens={{ childrenGap: 16 }} styles={{ root: { paddingTop: 12 } }}>
+          <Stack tokens={{ childrenGap: 8 }}>
+            <Text variant="smallPlus" styles={{ root: { fontWeight: 600, color: "#605e5c" } }}>
+              Open record
+            </Text>
+            <TextField
+              label="Record ID (GUID)"
+              placeholder="00000000-0000-0000-0000-000000000000"
+              value={recordId}
+              onChange={(_, v) => {
+                setRecordId(v || "");
+                setGuidError(null);
+              }}
+              errorMessage={guidError || undefined}
+            />
+            <PrimaryButton
+              text="Open"
+              disabled={!recordId.trim()}
+              onClick={() => openRecord(recordId)}
+            />
+            <Text variant="tiny" styles={{ root: { color: "#a19f9d" } }}>
+              Adds ?id= and reloads. In mock mode the seeded record is always returned.
+            </Text>
+          </Stack>
+          {recent.length > 0 && (
+            <>
+              <Separator />
+              <Stack tokens={{ childrenGap: 4 }}>
+                <Text variant="smallPlus" styles={{ root: { fontWeight: 600, color: "#605e5c" } }}>
+                  Recent
+                </Text>
+                {recent.map((id) => (
+                  <Link key={id} title={id} onClick={() => openRecord(id)}>
+                    <Icon iconName="OpenFile" styles={{ root: { fontSize: 12, marginRight: 6 } }} />
+                    {id.substring(0, 8)}…
+                  </Link>
+                ))}
+              </Stack>
+            </>
+          )}
+          <Separator />
+          <Stack tokens={{ childrenGap: 2 }}>
+            <Text variant="smallPlus" styles={{ root: { fontWeight: 600, color: "#605e5c" } }}>
+              Environment
+            </Text>
+            <EnvRow label="Mode" value={mode} />
+            {targetUrl && <EnvRow label="Target" value={targetUrl} />}
+            <EnvRow
+              label="Token"
+              value={import.meta.env.VITE_USE_PROXY ? "Configured (server-side)" : "Not set"}
+            />
+            <MessageBar messageBarType={MessageBarType.info} isMultiline styles={{ root: { marginTop: 8 } }}>
+              For live data: run <strong>npm run auth:token -- --url https://your-org.crm.dynamics.com</strong>, then restart <strong>npm run dev</strong>.
+            </MessageBar>
+          </Stack>
+          <Separator />
+          <Stack tokens={{ childrenGap: 6 }}>
+            <Text variant="smallPlus" styles={{ root: { fontWeight: 600, color: "#605e5c" } }}>
+              Logs
+            </Text>
+            <Stack horizontal tokens={{ childrenGap: 8 }}>
+              <DefaultButton text="Refresh" onClick={() => setLogs(logger.dump())} />
+              <DefaultButton
+                text="Clear"
+                onClick={() => {
+                  logger.clear();
+                  setLogs("");
+                }}
+              />
+            </Stack>
+            {logs !== null && (
+              <TextField multiline rows={6} readOnly value={logs || "(no entries)"} />
+            )}
+          </Stack>
+        </Stack>
+      </Panel>
+    </>
+  );
+};
+export default DevPanel;

package/templates/grid-starter/src/grid/GridPage.tsx ADDED Viewed

@@ -0,0 +1,119 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  initializeIcons,
+  MessageBar,
+  MessageBarType,
+  Spinner,
+  Text,
+} from "@fluentui/react";
+import { DataGrid, createCellRegistry } from "@dataverse-kit/grid-kit";
+import type { ColumnDef } from "@dataverse-kit/grid-kit";
+import type { IApiService } from "../core/services/IApiService";
+initializeIcons();
+/** Display row shape — map your Dataverse attributes to this in `mapAccount`. */
+interface AccountRow extends Record<string, unknown> {
+  key: string;
+  name: string;
+  accountnumber: string;
+  telephone1: string;
+  revenue: number;
+  statuscode: string;
+  rating: number;
+}
+const STATUS_COLORS: Record<string, string> = {
+  Active: "#107c10",
+  "On hold": "#f7e600",
+  Inactive: "#d13438",
+};
+// grid-kit columns. Swap `rendererType` / `rendererConfig` to change a cell's
+// look; add `editorType` to make a column inline-editable.
+const columns: ColumnDef<AccountRow>[] = [
+  { key: "name", fieldName: "name", name: "Account", rendererType: "text", editorType: "text", minWidth: 180, isSortable: true },
+  { key: "accountnumber", fieldName: "accountnumber", name: "Number", rendererType: "text", minWidth: 110 },
+  { key: "telephone1", fieldName: "telephone1", name: "Phone", rendererType: "text", minWidth: 150 },
+  { key: "revenue", fieldName: "revenue", name: "Revenue", rendererType: "currency", minWidth: 130, isSortable: true, rendererConfig: { currencyCode: "USD" } },
+  { key: "statuscode", fieldName: "statuscode", name: "Status", rendererType: "coloredCell", minWidth: 110, rendererConfig: { colorMap: STATUS_COLORS } },
+  { key: "rating", fieldName: "rating", name: "Rating", rendererType: "rating", minWidth: 120, rendererConfig: { max: 5 } },
+];
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function mapAccount(e: any): AccountRow {
+  return {
+    key: e.accountid,
+    name: e.name ?? "",
+    accountnumber: e.accountnumber ?? "",
+    telephone1: e.telephone1 ?? "",
+    revenue: Number(e.revenue ?? 0),
+    // NOTE: the mock seeds a display string. Real Dataverse `statuscode` is an
+    // int optionset — its label is in the `statuscode@OData.Community.Display.V1.FormattedValue`
+    // sibling key. In production prefer that label (or switch this column to
+    // rendererType 'optionset' with options) so STATUS_COLORS resolves.
+    statuscode: e["statuscode@OData.Community.Display.V1.FormattedValue"] ?? e.statuscode ?? "Active",
+    rating: Number(e.rating ?? 0),
+  };
+}
+/* eslint-enable @typescript-eslint/no-explicit-any */
+export const GridPage: React.FC<{ api: IApiService }> = ({ api }) => {
+  const [rows, setRows] = useState<AccountRow[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+  const registry = useMemo(() => createCellRegistry(), []);
+  const filteredRows = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return rows;
+    return rows.filter((r) =>
+      [r.name, r.accountnumber, r.telephone1, r.statuscode].some((v) =>
+        String(v).toLowerCase().includes(q),
+      ),
+    );
+  }, [rows, search]);
+  const load = useCallback(() => {
+    setIsLoading(true);
+    setError(null);
+    api
+      .retrieveMultipleRecords("accounts", "")
+      .then((res) => setRows(res.entities.map(mapAccount)))
+      .catch((e) => setError(e?.message ?? String(e)))
+      .finally(() => setIsLoading(false));
+  }, [api]);
+  useEffect(load, [load]);
+  if (isLoading) return <Spinner label="Loading accounts…" />;
+  return (
+    <div style={{ maxWidth: 1100, margin: "16px auto" }}>
+      <Text variant="xLarge" block styles={{ root: { marginBottom: 12 } }}>
+        Accounts
+      </Text>
+      {error && (
+        <MessageBar messageBarType={MessageBarType.error} styles={{ root: { marginBottom: 12 } }}>
+          {error}
+        </MessageBar>
+      )}
+      <DataGrid<AccountRow>
+        items={filteredRows}
+        columns={columns}
+        registry={registry}
+        selectionMode="multiple"
+        getKey={(r) => r.key}
+        toolbar={{
+          showSearch: true,
+          searchPlaceholder: "Search accounts",
+          onSearch: setSearch,
+          commands: [{ key: "refresh", text: "Refresh", iconName: "Refresh", onClick: load }],
+        }}
+      />
+    </div>
+  );
+};
+export default GridPage;

package/templates/grid-starter/src/index.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { initLogging } from "@khester/reusable-components";
+import { App } from "./App";
+// Wire up the localhost-only troubleshooting hooks (window.dumpAppLogs()).
+// No-op in a live org. Fluent's initializeIcons() is called inside the component
+// library (via MessageBarComponent) — do NOT call it again here.
+initLogging();
+const container = document.getElementById("root");
+if (!container) throw new Error('Root element "#root" not found');
+createRoot(container).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/templates/grid-starter/src/vite-env.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+// Custom env keys exposed via `define` in vite.config.ts. `tsc` trusts THIS
+// declaration (it does not evaluate `define`), so the type must match the
+// runtime value the config injects (a boolean).
+interface ImportMetaEnv {
+  /** True when DYNAMICS_URL is configured (token-proxy dev mode). */
+  readonly VITE_USE_PROXY: boolean;
+  /** The org URL (not the token) for the dev panel readout; "" in production. */
+  readonly VITE_DYNAMICS_URL: string;
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/templates/grid-starter/tools/deploy/deploy-webresource.cjs ADDED Viewed

@@ -0,0 +1,117 @@
+#!/usr/bin/env node
+/**
+ * Build + deploy: upload the single-file `dist/index.html` (from `npm run
+ * build:d365`) to Dataverse as an HTML web resource, then publish it.
+ *
+ * Reads DYNAMICS_URL + DYNAMICS_TOKEN from `.env` (run `npm run auth:token`
+ * first, or use `npm run deploy`, which refreshes the token for you).
+ *
+ * The web-resource unique name MUST start with a publisher prefix that exists in
+ * your org (e.g. `cr1a2_` or `new_`). Set it via WEBRESOURCE_NAME in `.env`, or:
+ *   node tools/deploy/deploy-webresource.cjs --name cr1a2_/myapp/index.html --solution MySolution
+ */
+const fs = require("fs");
+const path = require("path");
+function arg(name) {
+  const i = process.argv.indexOf(name);
+  return i !== -1 ? process.argv[i + 1] : undefined;
+}
+function readEnv(file) {
+  if (!fs.existsSync(file)) return {};
+  const out = {};
+  for (const line of fs.readFileSync(file, "utf8").split(/\r?\n/)) {
+    const m = line.match(/^([A-Z0-9_]+)=(.*)$/);
+    if (m) out[m[1]] = m[2];
+  }
+  return out;
+}
+const root = process.cwd();
+const env = readEnv(path.join(root, ".env"));
+const url = (arg("--url") || process.env.DYNAMICS_URL || env.DYNAMICS_URL || "").replace(/\/+$/, "");
+const token = arg("--token") || process.env.DYNAMICS_TOKEN || env.DYNAMICS_TOKEN;
+let pkgName = "custompage";
+try {
+  pkgName = require(path.join(root, "package.json")).name || pkgName;
+} catch {
+  /* keep default */
+}
+const name = arg("--name") || process.env.WEBRESOURCE_NAME || env.WEBRESOURCE_NAME || `new_/${pkgName}/index.html`;
+const solution = arg("--solution") || process.env.WEBRESOURCE_SOLUTION || env.WEBRESOURCE_SOLUTION;
+if (!url || !token) {
+  console.error("✗ Missing DYNAMICS_URL / DYNAMICS_TOKEN. Run `npm run auth:token -- --url https://<org>.crm.dynamics.com` first.");
+  process.exit(1);
+}
+const file = path.join(root, "dist", "index.html");
+if (!fs.existsSync(file)) {
+  console.error("✗ dist/index.html not found. Run `npm run build:d365` first.");
+  process.exit(1);
+}
+const content = fs.readFileSync(file).toString("base64");
+const api = `${url}/api/data/v9.2`;
+const headers = {
+  Authorization: `Bearer ${token}`,
+  "Content-Type": "application/json; charset=utf-8",
+  Accept: "application/json",
+  "OData-Version": "4.0",
+  "OData-MaxVersion": "4.0",
+};
+if (solution) headers["MSCRM.SolutionUniqueName"] = solution;
+async function req(method, urlPath, body) {
+  const res = await fetch(urlPath.startsWith("http") ? urlPath : `${api}/${urlPath}`, {
+    method,
+    headers,
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    throw new Error(`${method} ${urlPath} → ${res.status}: ${text}`);
+  }
+  return res;
+}
+async function main() {
+  console.log(`→ Deploying "${name}" to ${url} ...`);
+  // 1. Upsert the web resource (find by unique name, then PATCH or POST).
+  const findRes = await req("GET", `webresourceset?$select=webresourceid&$filter=name eq '${encodeURIComponent(name)}'`);
+  const found = (await findRes.json()).value || [];
+  let id;
+  if (found.length) {
+    id = found[0].webresourceid;
+    await req("PATCH", `webresourceset(${id})`, { content });
+    console.log(`✓ Updated existing web resource (${id}).`);
+  } else {
+    const createRes = await req("POST", "webresourceset", {
+      name,
+      displayname: name,
+      webresourcetype: 1, // HTML
+      content,
+    });
+    const loc = createRes.headers.get("OData-EntityId") || "";
+    const match = /\(([^)]+)\)/.exec(loc);
+    id = match ? match[1] : null;
+    console.log(`✓ Created web resource (${id}).`);
+  }
+  // 2. Publish it.
+  const paramXml =
+    "<importexportxml><webresources><webresource>{" + id + "}</webresource></webresources></importexportxml>";
+  await req("POST", "PublishXml", { ParameterXml: paramXml });
+  console.log("✓ Published.");
+  console.log(`\nOpen it:  ${url}/WebResources/${name}`);
+  console.log("Or host it on a model-driven custom page / open via Xrm.Navigation.navigateTo.");
+}
+main().catch((e) => {
+  console.error("✗ Deploy failed:", e.message);
+  process.exit(1);
+});

package/templates/grid-starter/tsconfig.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["vite/client", "vitest/globals"]
+  },
+  "include": ["src"]
+}

package/templates/grid-starter/vite.config.ts ADDED Viewed

@@ -0,0 +1,76 @@
+/// <reference types="vitest/config" />
+import { defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react";
+import { viteSingleFile } from "vite-plugin-singlefile";
+import fs from "node:fs";
+import path from "node:path";
+/**
+ * Read a single key from .env / .env.local at request time. Re-reading per
+ * request (rather than capturing it at config eval) means a refreshed
+ * `npm run auth:token` takes effect WITHOUT restarting the dev server.
+ */
+function readEnvValue(key: string): string | undefined {
+  for (const file of [".env.local", ".env"]) {
+    const p = path.resolve(process.cwd(), file);
+    if (!fs.existsSync(p)) continue;
+    for (const line of fs.readFileSync(p, "utf8").split(/\r?\n/)) {
+      const m = line.match(/^([A-Z0-9_]+)=(.*)$/);
+      if (m && m[1] === key) return m[2];
+    }
+  }
+  return undefined;
+}
+export default defineConfig(({ mode }) => {
+  // DYNAMICS_URL / DYNAMICS_TOKEN are written to .env by `npm run auth:token`.
+  // Empty prefix loads unprefixed keys; we read ONLY the two below by name and
+  // never spread `env` into `define` (that would leak the whole environment).
+  const env = loadEnv(mode, process.cwd(), "");
+  const dynamicsUrl = env.DYNAMICS_URL;
+  return {
+    // Relative base — the built bundle is served from the Dataverse web-resource
+    // CDN under a long prefixed path, where absolute /assets URLs would 404.
+    base: "./",
+    plugins: [react(), ...(mode === "d365" ? [viteSingleFile()] : [])],
+    server: {
+      port: 3000,
+      // Token-proxy mode: forward /api/data/* to Dataverse and inject the bearer
+      // SERVER-SIDE, so the token is never read by or bundled into the client.
+      proxy: dynamicsUrl
+        ? {
+            "/api/data": {
+              target: dynamicsUrl,
+              changeOrigin: true,
+              secure: true,
+              configure: (proxy) => {
+                proxy.on("proxyReq", (proxyReq) => {
+                  const token = readEnvValue("DYNAMICS_TOKEN");
+                  if (token) proxyReq.setHeader("Authorization", `Bearer ${token}`);
+                  proxyReq.setHeader("OData-Version", "4.0");
+                  proxyReq.setHeader("OData-MaxVersion", "4.0");
+                });
+              },
+            },
+          }
+        : undefined,
+    },
+    define: {
+      // Client flag for ServiceFactory — a real boolean (Vite stringifies it).
+      // True only when a Dataverse URL is configured (token-proxy dev mode).
+      "import.meta.env.VITE_USE_PROXY": Boolean(dynamicsUrl),
+      // The org URL (NOT the token) for the dev panel's Environment readout. Empty
+      // in a production build, so nothing leaks into a deployed web resource.
+      "import.meta.env.VITE_DYNAMICS_URL": JSON.stringify(dynamicsUrl ?? ""),
+    },
+    build: {
+      outDir: "dist",
+    },
+    test: {
+      // Pure layers only (diff, mappers) — no DOM needed.
+      globals: true,
+      include: ["src/**/*.test.ts"],
+    },
+  };
+});

package/templates/pcf-field/_variants/ValueInput.boolean.tsx CHANGED Viewed

@@ -7,6 +7,8 @@ export interface ValueInputProps {
     disabled?: boolean;
     onChange: (value: boolean) => void;
     onBlur: () => void;
+    /** Optional PCF context (forwarded uniformly; only the optionset variant reads it). */
+    context?: ComponentFramework.Context<any>;
 }
 export const ValueInput: React.FC<ValueInputProps> = ({

package/templates/pcf-field/_variants/ValueInput.date.tsx CHANGED Viewed

@@ -7,6 +7,8 @@ export interface ValueInputProps {
     disabled?: boolean;
     onChange: (value: Date | null) => void;
     onBlur: () => void;
+    /** Optional PCF context (forwarded uniformly; only the optionset variant reads it). */
+    context?: ComponentFramework.Context<any>;
 }
 export const ValueInput: React.FC<ValueInputProps> = ({