create-ec-app 0.0.12 → 1.1.0

package/templates/base/package.json

@@ -16,28 +16,28 @@
 		"lint:fix": "biome lint --apply ."
 	},
 	"dependencies": {
-		"@tailwindcss/vite": "^4.1.18",
-		"tailwindcss": "^4.1.18",
-		"@tanstack/react-query": "^5.90.16",
+		"@tailwindcss/vite": "^4.2.1",
+		"tailwindcss": "^4.2.1",
+		"@tanstack/react-query": "^5.90.21",
 		"@types/xrm": "^9.0.88",
-		"react": "^19.2.3",
-		"react-dom": "^19.2.3",
-		"zod": "^4.3.5",
-		"zustand": "^5.0.9"
+		"react": "^19.2.4",
+		"react-dom": "^19.2.4",
+		"zod": "^4.3.6",
+		"zustand": "^5.0.11"
 	},
 	"devDependencies": {
-		"@eslint/js": "^9.39.2",
-		"@tanstack/eslint-plugin-query": "^5.91.2",
-		"@types/node": "^24.10.4",
-		"@types/react": "^19.2.7",
+		"@eslint/js": "^9.39.3",
+		"@tanstack/eslint-plugin-query": "^5.91.4",
+		"@types/node": "^24.11.0",
+		"@types/react": "^19.2.14",
 		"@types/react-dom": "^19.2.3",
-		"@vitejs/plugin-react": "^5.1.2",
-		"eslint": "^9.39.2",
+		"@vitejs/plugin-react": "^5.1.4",
+		"eslint": "^9.39.3",
 		"eslint-plugin-react-hooks": "^7.0.1",
-		"eslint-plugin-react-refresh": "^0.4.26",
+		"eslint-plugin-react-refresh": "^0.5.2",
 		"globals": "^16.5.0",
 		"typescript": "~5.9.3",
-		"typescript-eslint": "^8.52.0",
-		"vite": "^7.3.0"
+		"typescript-eslint": "^8.56.1",
+		"vite": "^7.3.1"
 	}
 }

package/templates/base/src/index.css

@@ -1 +1,3 @@
 @import "tailwindcss";
+
+@custom-variant hover (&:hover);

package/templates/pcf/base/ControlHost.pcfproj

@@ -0,0 +1,15 @@
+<Project Sdk="Microsoft.NET.Sdk">
+  <PropertyGroup>
+    <TargetFramework>net462</TargetFramework>
+    <PowerAppsToolsVersion>1.38.3</PowerAppsToolsVersion>
+    <ControlManifestInputFile>control\ControlManifest.Input.xml</ControlManifestInputFile>
+    <OutputPath>$(MSBuildThisFileDirectory)out\controls\</OutputPath>
+    <AppendTargetFrameworkToOutputPath>false</AppendTargetFrameworkToOutputPath>
+    <RootNamespace>{{PCF_NAMESPACE}}.{{PCF_CONSTRUCTOR}}</RootNamespace>
+    <Name>{{PCF_CONSTRUCTOR}}</Name>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.PowerApps.MSBuild.Pcf" Version="1.38.3" />
+  </ItemGroup>
+</Project>

package/templates/pcf/base/README.md

@@ -0,0 +1,23 @@
+# {{CONTROL_DISPLAY_NAME}}
+
+This folder was generated from the webresource source using the checked-in PCF base template.
+
+## Build
+
+```bash
+npm install
+npm run build
+```
+
+## Control Info
+
+- Namespace: `{{PCF_NAMESPACE}}`
+- Constructor: `{{PCF_CONSTRUCTOR}}`
+- React app import: `{{PROJECT_APP_IMPORT}}`
+- CSS import: `{{PROJECT_CSS_IMPORT}}`
+
+## Notes
+
+- The wrapper imports `src/App` directly and reuses the built `dist/main.css`.
+- Regenerate this folder after rebuilding the webresource whenever the app changes.
+- The project includes both `pcf-scripts` build support and a `.pcfproj` for Dataverse solution packaging flows.

package/templates/pcf/base/control/ControlManifest.Input.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<manifest>
+  <control
+    namespace="{{PCF_NAMESPACE}}"
+    constructor="{{PCF_CONSTRUCTOR}}"
+    version="{{PCF_VERSION}}"
+    display-name-key="Control_Display_Name"
+    description-key="Control_Description"
+    control-type="standard">
+    <external-service-usage enabled="false" />
+    <property
+      name="hostField"
+      display-name-key="HostField_Display_Name"
+      description-key="HostField_Description"
+      of-type="SingleLine.Text"
+      usage="bound"
+      required="false" />
+    <feature-usage>
+      <uses-feature name="WebAPI" required="true" />
+    </feature-usage>
+    <resources>
+      <code path="../index.ts" order="1" />
+      <resx path="../strings/control.1033.resx" version="1.0.0" />
+    </resources>
+  </control>
+</manifest>

package/templates/pcf/base/featureconfig.json

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

package/templates/pcf/base/global.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/templates/pcf/base/index.ts

@@ -0,0 +1,152 @@
+import React, { StrictMode } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import App from "{{PROJECT_APP_IMPORT}}";
+import "{{PROJECT_CSS_IMPORT}}";
+import type { IInputs, IOutputs } from "./control/generated/ManifestTypes";
+import type {
+	PcfRuntimeContext,
+	PcfWebApi,
+} from "{{PROJECT_RUNTIME_TYPES_IMPORT}}";
+
+function sanitizeGuid(value: string | null | undefined): string | null {
+	if (!value) return null;
+	return value.replace(/[{}]/g, "");
+}
+
+function getContextInfo(context: ComponentFramework.Context<IInputs>) {
+	const pageContext = (
+		context as ComponentFramework.Context<IInputs> & {
+			page?: {
+				entityId?: string;
+				entityTypeName?: string;
+				getClientUrl?: () => string;
+			};
+		}
+	).page;
+
+	const modeContextInfo = (
+		context.mode as ComponentFramework.Mode & {
+			contextInfo?: { entityId?: string; entityTypeName?: string };
+		}
+	).contextInfo;
+
+	return {
+		recordId: sanitizeGuid(
+			modeContextInfo?.entityId ?? pageContext?.entityId ?? null,
+		),
+		entityName:
+			modeContextInfo?.entityTypeName ?? pageContext?.entityTypeName ?? null,
+		clientUrl: pageContext?.getClientUrl?.() ?? null,
+		userId: sanitizeGuid(context.userSettings.userId),
+	};
+}
+
+function createPcfWebApi(
+	context: ComponentFramework.Context<IInputs>,
+): PcfWebApi {
+	return {
+		async retrieve<T>(entitySet: string, id: string, query = ""): Promise<T> {
+			return (await context.webAPI.retrieveRecord(
+				entitySet,
+				id,
+				query,
+			)) as T;
+		},
+		async retrieveMultiple<T>(entitySet: string, query = ""): Promise<T[]> {
+			const response = await context.webAPI.retrieveMultipleRecords(
+				entitySet,
+				query,
+			);
+			return response.entities as T[];
+		},
+		async create<T>(entitySet: string, data: unknown): Promise<T> {
+			return (await context.webAPI.createRecord(
+				entitySet,
+				data as ComponentFramework.WebApi.Entity,
+			)) as T;
+		},
+		async update(entitySet: string, id: string, data: unknown): Promise<void> {
+			await context.webAPI.updateRecord(
+				entitySet,
+				id,
+				data as ComponentFramework.WebApi.Entity,
+			);
+		},
+	};
+}
+
+function createRuntime(
+	context: ComponentFramework.Context<IInputs>,
+): PcfRuntimeContext {
+	return {
+		host: "pcf",
+		...getContextInfo(context),
+		webApi: createPcfWebApi(context),
+	};
+}
+
+export class {{PCF_CONSTRUCTOR}}
+	implements ComponentFramework.StandardControl<IInputs, IOutputs>
+{
+	private root: Root | null = null;
+	private runtime!: PcfRuntimeContext;
+	private readonly queryClient = new QueryClient({
+		defaultOptions: {
+			queries: {
+				refetchOnWindowFocus: false,
+				retry: 3,
+				staleTime: 5 * 60 * 1000,
+			},
+			mutations: {
+				retry: 1,
+			},
+		},
+	});
+
+	public init(
+		context: ComponentFramework.Context<IInputs>,
+		_notifyOutputChanged: () => void,
+		_state: ComponentFramework.Dictionary,
+		container: HTMLDivElement,
+	): void {
+		container.classList.add("ec-pcf-shell-control");
+		this.runtime = createRuntime(context);
+		this.root = createRoot(container);
+		this.render();
+	}
+
+	public updateView(context: ComponentFramework.Context<IInputs>): void {
+		this.runtime = {
+			...this.runtime,
+			...getContextInfo(context),
+		};
+		this.render();
+	}
+
+	public getOutputs(): IOutputs {
+		return {
+			hostField: this.runtime.recordId ?? undefined,
+		};
+	}
+
+	public destroy(): void {
+		this.root?.unmount();
+		this.root = null;
+	}
+
+	private render(): void {
+		this.root?.render(
+			React.createElement(
+				StrictMode,
+				null,
+				React.createElement(
+					QueryClientProvider,
+					{ client: this.queryClient },
+					React.createElement(App, { runtime: this.runtime }),
+				),
+			),
+		);
+	}
+}

package/templates/pcf/base/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "{{PCF_PACKAGE_NAME}}",
+  "version": "{{PCF_VERSION}}",
+  "private": true,
+  "description": "{{CONTROL_DESCRIPTION}}",
+  "scripts": {
+    "build": "pcf-scripts build",
+    "clean": "pcf-scripts clean",
+    "lint": "pcf-scripts lint",
+    "rebuild": "npm run clean && npm run build",
+    "start": "pcf-scripts start",
+    "push": "pcf-scripts push"
+  },
+  "devDependencies": {
+    "@types/powerapps-component-framework": "^1.3.14",
+    "pcf-start": "^1.48.2",
+    "pcf-scripts": "^1.48.2",
+    "typescript": "^5.9.3"
+  }
+}

package/templates/pcf/base/strings/control.1033.resx

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+  <resheader name="resmimetype">
+    <value>text/microsoft-resx</value>
+  </resheader>
+  <resheader name="version">
+    <value>2.0</value>
+  </resheader>
+  <resheader name="reader">
+    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <resheader name="writer">
+    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <data name="Control_Display_Name" xml:space="preserve">
+    <value>{{CONTROL_DISPLAY_NAME}}</value>
+  </data>
+  <data name="Control_Description" xml:space="preserve">
+    <value>{{CONTROL_DESCRIPTION}}</value>
+  </data>
+  <data name="HostField_Display_Name" xml:space="preserve">
+    <value>Host field</value>
+  </data>
+  <data name="HostField_Description" xml:space="preserve">
+    <value>Optional bound field used to surface the current record id.</value>
+  </data>
+</root>

package/templates/pcf/base/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "types": ["react", "react-dom", "powerapps-component-framework"],
+    "typeRoots": ["./node_modules/@types", "{{PROJECT_NODE_MODULES_TYPES_ROOT}}"],
+    "baseUrl": "{{PROJECT_ROOT_REL}}",
+    "paths": {
+      "@/*": ["src/*"],
+      "react": ["node_modules/@types/react"],
+      "react/jsx-runtime": ["node_modules/@types/react/jsx-runtime"],
+      "react-dom": ["node_modules/@types/react-dom"],
+      "react-dom/client": ["node_modules/@types/react-dom/client"]
+    }
+  },
+  "include": [
+    "./**/*.ts",
+    "./**/*.tsx",
+    "{{PROJECT_ROOT_REL}}/src/**/*.ts",
+    "{{PROJECT_ROOT_REL}}/src/**/*.tsx"
+  ],
+  "exclude": [
+    "{{PROJECT_ROOT_REL}}/src/main.tsx",
+    "{{PROJECT_ROOT_REL}}/src/services/AuthService.ts"
+  ]
+}

package/templates/pcf/base/webpack.config.js

@@ -0,0 +1,11 @@
+const path = require("path");
+
+module.exports = {
+	resolve: {
+		alias: {
+			"@": path.resolve(__dirname, "{{PROJECT_SRC_ALIAS}}"),
+			react: path.resolve(__dirname, "{{PROJECT_REACT_ALIAS}}"),
+			"react-dom": path.resolve(__dirname, "{{PROJECT_REACT_DOM_ALIAS}}"),
+		},
+	},
+};

package/templates/targets/webresource/AGENTS.md

@@ -0,0 +1,123 @@
+## Purpose
+
+This is a Dynamics 365 / Dataverse web resource template using React + TypeScript + Vite.
+Treat it as a **Dynamics-hosted frontend** — not a generic SPA. Do not modernise it into something else unless explicitly asked.
+
+---
+
+## Hard Constraints
+
+1. **Dynamics runtime must keep working** — preserve `window.parent.Xrm`/`window.top.Xrm` detection and `ClientGlobalContext.js.aspx` where present.
+2. **Local dev must keep working** — `token.json` drives local auth; never bundle it into output or commit real values.
+3. **Build output must stay web-resource-friendly** — predictable filenames, no uncontrolled chunking, deployable via Webresource Manager or pipeline upload.
+4. **Keep it client-side** — no SSR, no Next.js, no backend coupling unless explicitly requested.
+5. **Make surgical changes** — extend existing patterns before inventing new ones; don't refactor unrelated areas.
+
+---
+
+## Runtime Modes
+
+**Dynamics-hosted:** detect via `window.parent.Xrm`, derive base URL from `getGlobalContext().getClientUrl()`, no bearer token needed.
+
+**Local dev:** load `token.json` dynamically, use bearer token, call Dataverse directly.
+
+Never mix the two modes or duplicate their logic — reuse `authService.ts`.
+
+---
+
+## Critical Files — Don't Break These
+
+| File | Why it matters |
+|---|---|
+| `src/services/authService.ts` | Single source of truth for env detection, base URL, and auth headers |
+| `src/main.tsx` | App bootstrap — preserve providers and theme imports |
+| `vite.config.ts` | Controls deployment shape: `base: "./"`, predictable output names, `main.css` |
+| `index.html` | Dynamics integration boundary — may inject `ClientGlobalContext.js.aspx` |
+| `token.json` | Local dev only — never commit real values, never bundle |
+
+---
+
+## API / Data Access
+
+- Put reusable API logic in `src/services`
+- Always reuse `getApiUrl()` and `getAuthHeaders()` — never duplicate them
+- Use narrow `$select` queries; throw on non-OK responses
+- No raw fetch calls scattered across UI components
+
+**Preferred pattern:**
+```ts
+// service.ts — fetch function + TanStack Query hook
+// invalidate relevant queryKey on mutation success
+```
+
+See the example at the bottom of this file.
+
+---
+
+## State Management
+
+- **TanStack Query** → server state
+- **Zustand** → shared client state
+- **Local component state** → local UI behaviour
+- No Redux unless explicitly requested; don't store server state in Zustand
+
+---
+
+## UI & Styling
+
+- Kendo UI or Shadcn/ui — stay consistent with whichever the project uses; don't mix
+- Tailwind is the default styling approach; preserve `main.css` output
+- Reuse existing components and utilities before building new ones
+
+---
+
+## Planning Rule
+
+For changes touching multiple files, auth, build config, or new service patterns — write a short plan first:
+- current state
+- intended change
+- files to touch
+- risks / compatibility concerns
+
+For large or risky changes, write an `ExecPlan` in `PLANS.md` before implementing.
+
+---
+
+## What To Avoid
+
+Unless explicitly asked: don't replace Vite, don't add SSR, don't remove Dynamics runtime logic, don't remove the local token flow, don't hardcode org-specific values, don't rename output files in ways that complicate deployment.
+
+---
+
+## Example Service Pattern
+
+```ts
+import { getApiUrl, getAuthHeaders } from "@/services/authService";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+export interface Account {
+  accountid: string;
+  name?: string | null;
+}
+
+export const listAccounts = async (): Promise<Account[]> => {
+  const res = await fetch(
+    `${getApiUrl()}/accounts?$select=accountid,name&$top=50`,
+    { headers: await getAuthHeaders() },
+  );
+  if (!res.ok) throw new Error(`Failed to fetch accounts: ${res.status}`);
+  return (await res.json()).value as Account[];
+};
+
+export const useAccounts = () =>
+  useQuery({ queryKey: ["accounts"], queryFn: listAccounts });
+
+export const useUpdateAccount = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, data }: { id: string; data: Partial<Account> }) =>
+      patchAccount(id, data),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["accounts"] }),
+  });
+};
+```

package/templates/targets/webresource/CLAUDE.md

@@ -0,0 +1 @@
+[AGENTS.md](AGENTS.md)

package/templates/targets/webresource/README.md

@@ -258,6 +258,76 @@ export function AccountsList() {
   - Upload your index.html, index.js and main.css to your folder.
   - This will now allow you to use auto publisher to bind to your deployed resources.
 
+## Generate a PCF Wrapper
+
+If you want to host the React webresource inside a PCF control instead of loading the HTML webresource directly in an iframe, use `create-ec-app` itself to generate the wrapper for an existing webresource project.
+
+Basic flow:
+
+1. Build the webresource:
+
+```bash
+npm run build
+```
+
+2. Run the generator against the current project directory:
+
+```bash
+npx create-ec-app --pcf-dir . --namespace EC --constructor FusionNotebookHost
+```
+
+If you are not inside the webresource folder, point `--pcf-dir` at that folder explicitly:
+
+```bash
+npx create-ec-app --pcf-dir /path/to/my-webresource --namespace EC --constructor FusionNotebookHost
+```
+
+This writes a standalone PCF project to `pcf/FusionNotebookHost` by default. The generated control:
+
+- imports `src/App.tsx` directly instead of wrapping built HTML in an iframe
+- reuses the built stylesheet from `dist/main.css`
+- creates `src/runtime/types.ts` only if that file does not already exist
+- provides a runtime object with record context and `context.webAPI` access inside the generated PCF shell, following the `PcfBase` pattern
+- mounts your React app directly into the PCF container
+
+Typical conversion flow from inside a generated webresource project:
+
+```bash
+npm install
+npm run build
+npx create-ec-app --pcf-dir . --namespace EC --constructor FusionNotebookHost --display-name "Fusion Notebook Host"
+cd pcf/FusionNotebookHost
+npm install
+npm run build
+```
+
+Useful options:
+
+- `--dist dist` to point at a different build folder
+- `--output pcf/MyControl` to choose the target folder
+- `--template /path/to/create-ec-app/templates/pcf/base` to swap the base shell
+- `--layer path/to/layer` to apply one or more patch layers after the base copy
+
+Build the generated PCF project from inside the generated folder:
+
+```bash
+cd pcf/FusionNotebookHost
+npm install
+npm run build
+```
+
+What gets generated:
+
+- a minimal PCF wrapper project under `pcf/<ConstructorName>`
+- a checked-in PCF shell stamped out from `create-ec-app/templates/pcf/base`
+- direct imports back to your webresource source and built CSS
+
+What does not happen:
+
+- your existing webresource project is not converted in place
+- your React source is not moved into the PCF project
+- the generated PCF project does not automatically get added to a Dataverse solution
+
 ## Notes
 
 - If you change the build, ensure code splitting stays disabled and asset names remain predictable to simplify web resource updates.

package/templates/ui/shadcn-ui/src/index.patch.css

@@ -1,6 +1,7 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
+@custom-variant hover (&:hover);
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
@@ -118,4 +119,3 @@
     @apply bg-background text-foreground;
   }
 }
-

package/templates/targets/power-pages/.env

@@ -1,3 +0,0 @@
-VITE_AAD_CLIENT_ID=db392465-21e2-4e5f-9fa5-a25d4dab354f
-VITE_AAD_TENANT_ID=961b8f6e-3902-49b5-b679-5beabfc73016
-VITE_AUTH_DEBUG=true