@salesforce/templates 66.1.1 → 66.2.1

package/lib/templates/webapplication/reactbasic/package.json

@@ -9,9 +9,12 @@
     "build:e2e": "npm run build && node scripts/rewrite-e2e-assets.mjs",
     "lint": "eslint .",
     "preview": "vite preview",
-    "test": "vitest"
+    "test": "vitest",
+    "graphql:codegen": "graphql-codegen",
+    "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
+    "@salesforce/sdk-data": "^1.11.2",
     "@salesforce/webapp-experimental": "*",
     "@tailwindcss/vite": "^4.1.17",
     "react": "^19.2.0",
@@ -21,6 +24,12 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@graphql-codegen/cli": "^6.1.0",
+    "@graphql-codegen/typescript": "^5.0.6",
+    "@graphql-codegen/typescript-operations": "^5.0.6",
+    "@graphql-eslint/eslint-plugin": "^4.1.0",
+    "@graphql-tools/utils": "^11.0.0",
+    "@playwright/test": "^1.49.0",
     "@salesforce/vite-plugin-webapp-experimental": "*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
@@ -31,15 +40,18 @@
     "@vitejs/plugin-react": "^5.1.1",
     "@vitest/ui": "^4.0.17",
     "eslint": "^9.39.1",
+    "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "graphql": "^16.11.0",
+    "graphql-codegen-typescript-operation-types": "^2.0.2",
     "jsdom": "^25.0.1",
+    "serve": "^14.2.5",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4",
-    "vitest": "^4.0.17",
-    "@playwright/test": "^1.49.0",
-    "serve": "^14.2.5"
+    "vite-plugin-graphql-codegen": "^3.6.3",
+    "vitest": "^4.0.17"
   }
 }

package/lib/templates/webapplication/reactbasic/scripts/get-graphql-schema.mjs

@@ -0,0 +1,68 @@
+/**
+ * Downloads the full GraphQL schema from a connected Salesforce org via introspection.
+ *
+ * Usage:
+ *   npm run graphql:schema
+ *   node scripts/get-graphql-schema.mjs [output-path]
+ *
+ * The default output path matches the schema location expected by codegen.yml
+ * and .graphqlrc.yml so that codegen and IDE tooling resolve it automatically.
+ */
+import { writeFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { getOrgInfo } from '@salesforce/webapp-experimental/app';
+import { buildClientSchema, getIntrospectionQuery, printSchema } from 'graphql';
+import { pruneSchema } from '@graphql-tools/utils';
+
+const DEFAULT_SCHEMA_PATH = '../../../../../schema.graphql';
+
+async function executeSalesforceGraphQLQuery(query, variables, operationName) {
+  const {
+    rawInstanceUrl: instanceUrl,
+    apiVersion,
+    accessToken,
+  } = await getOrgInfo();
+
+  const targetUrl = `${instanceUrl}/services/data/v${apiVersion}/graphql`;
+
+  console.log(`Executing introspection query against ${targetUrl}`);
+  const response = await fetch(targetUrl, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      'Content-Type': 'application/json',
+      'X-Chatter-Entity-Encoding': 'false',
+    },
+    body: JSON.stringify({ query, variables, operationName }),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(
+      `Salesforce GraphQL request failed: ${response.status} ${response.statusText} - ${errorText}`
+    );
+  }
+
+  return response.json();
+}
+
+try {
+  const outputPath = resolve(process.argv[2] || DEFAULT_SCHEMA_PATH);
+
+  const introspectionResult = await executeSalesforceGraphQLQuery(
+    getIntrospectionQuery(),
+    {},
+    'IntrospectionQuery'
+  );
+
+  const schema = buildClientSchema(introspectionResult.data);
+  const prunedSchema = pruneSchema(schema);
+  const sdl = printSchema(prunedSchema);
+
+  writeFileSync(outputPath, sdl);
+
+  console.log(`Schema saved to ${outputPath}`);
+} catch (error) {
+  console.error('Error:', error.message);
+  process.exit(1);
+}

package/lib/templates/webapplication/reactbasic/src/api/graphql-operations-types.ts

@@ -25,39 +25,28 @@ export type Scalars = {
   Boolean: { input: boolean; output: boolean };
   Int: { input: number; output: number };
   Float: { input: number; output: number };
-  Base64: { input: any; output: any };
-  /** An arbitrary precision signed decimal */
-  BigDecimal: { input: any; output: any };
-  /** An arbitrary precision signed integer */
-  BigInteger: { input: any; output: any };
-  /** An 8-bit signed integer */
-  Byte: { input: any; output: any };
-  /** A UTF-16 code unit; a character on Unicode's BMP */
-  Char: { input: any; output: any };
-  Currency: { input: any; output: any };
-  Date: { input: any; output: any };
-  DateTime: { input: any; output: any };
-  Double: { input: any; output: any };
-  Email: { input: any; output: any };
-  EncryptedString: { input: any; output: any };
+  Base64: { input: string; output: string };
+  Currency: { input: number | string; output: number };
+  Date: { input: string; output: string };
+  DateTime: { input: string; output: string };
+  Double: { input: number | string; output: number };
+  Email: { input: string; output: string };
+  EncryptedString: { input: string; output: string };
   /** Can be set to an ID or a Reference to the result of another mutation operation. */
-  IdOrRef: { input: any; output: any };
-  JSON: { input: any; output: any };
-  Latitude: { input: any; output: any };
+  IdOrRef: { input: string; output: string };
+  Latitude: { input: number | string; output: number };
   /** A 64-bit signed integer */
-  Long: { input: any; output: any };
-  LongTextArea: { input: any; output: any };
-  Longitude: { input: any; output: any };
-  MultiPicklist: { input: any; output: any };
-  Percent: { input: any; output: any };
-  PhoneNumber: { input: any; output: any };
-  Picklist: { input: any; output: any };
-  RichTextArea: { input: any; output: any };
-  /** A 16-bit signed integer */
-  Short: { input: any; output: any };
-  TextArea: { input: any; output: any };
-  Time: { input: any; output: any };
-  Url: { input: any; output: any };
+  Long: { input: number; output: number };
+  LongTextArea: { input: string; output: string };
+  Longitude: { input: number | string; output: number };
+  MultiPicklist: { input: string; output: string };
+  Percent: { input: number | string; output: number };
+  PhoneNumber: { input: string; output: string };
+  Picklist: { input: string; output: string };
+  RichTextArea: { input: string; output: string };
+  TextArea: { input: string; output: string };
+  Time: { input: string; output: string };
+  Url: { input: string; output: string };
 };
 
 export enum DataType {
@@ -116,9 +105,9 @@ export type GetHighRevenueAccountsQuery = {
           node?: {
             Id: string;
             Name?: { value?: string | null } | null;
-            AnnualRevenue?: { value?: any | null } | null;
-            Industry?: { value?: any | null } | null;
-            Website?: { value?: any | null } | null;
+            AnnualRevenue?: { value?: number | null } | null;
+            Industry?: { value?: string | null } | null;
+            Website?: { value?: string | null } | null;
           } | null;
         } | null> | null;
       } | null;

package/lib/templates/webapplication/reactbasic/src/api/utils/accounts.ts

@@ -0,0 +1,33 @@
+import { executeGraphQL } from '@salesforce/webapp-experimental/api';
+import HIGH_REVENUE_ACCOUNTS_QUERY from './query/highRevenueAccountsQuery.graphql?raw';
+import type {
+  GetHighRevenueAccountsQuery,
+  GetHighRevenueAccountsQueryVariables,
+} from '../graphql-operations-types';
+
+type AccountNode = NonNullable<
+  NonNullable<
+    NonNullable<
+      NonNullable<
+        GetHighRevenueAccountsQuery['uiapi']['query']['Account']
+      >['edges']
+    >[number]
+  >['node']
+>;
+
+/**
+ * Fetch accounts with annual revenue greater than the specified amount
+ *
+ * @param minRevenue - Minimum annual revenue threshold (default: 100000)
+ * @returns Array of accounts matching the criteria
+ */
+export async function getHighRevenueAccounts(
+  variables: GetHighRevenueAccountsQueryVariables
+): Promise<(AccountNode | null | undefined)[]> {
+  const response = await executeGraphQL<GetHighRevenueAccountsQuery>(
+    HIGH_REVENUE_ACCOUNTS_QUERY,
+    variables
+  );
+
+  return response.uiapi?.query?.Account?.edges?.map(edge => edge?.node) || [];
+}

package/lib/templates/webapplication/reactbasic/src/app.tsx

@@ -4,7 +4,16 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import './styles/global.css';
 
-const router = createBrowserRouter(routes);
+// Match Vite base so client-side routes work when deployed under a path (e.g. /lwr/application/ai/c-webapp2/).
+// When served at root (e.g. e2e with static serve), use '/' so routes match.
+const base = (import.meta.env.BASE_URL ?? '/').replace(/\/$/, '') || '/';
+const basename =
+  typeof window !== 'undefined' &&
+  (window.location.pathname === '/' ||
+    !window.location.pathname.startsWith('/lwr/'))
+    ? '/'
+    : base;
+const router = createBrowserRouter(routes, { basename });
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

package/lib/templates/webapplication/reactbasic/src/appLayout.tsx

@@ -1,8 +1,10 @@
 import { Outlet } from 'react-router';
+import NavigationMenu from './navigationMenu';
 
 export default function AppLayout() {
   return (
     <>
+      <NavigationMenu />
       <Outlet />
     </>
   );

package/lib/templates/webapplication/reactbasic/src/navigationMenu.tsx

@@ -0,0 +1,80 @@
+import { Link, useLocation } from 'react-router';
+import { getAllRoutes } from './router-utils';
+import { useState } from 'react';
+
+export default function NavigationMenu() {
+  const [isOpen, setIsOpen] = useState(false);
+  const location = useLocation();
+
+  const isActive = (path: string) => location.pathname === path;
+
+  const toggleMenu = () => setIsOpen(!isOpen);
+
+  const navigationRoutes: { path: string; label: string }[] = getAllRoutes()
+    .filter(
+      route =>
+        route.handle?.showInNavigation === true &&
+        route.fullPath !== undefined &&
+        route.handle?.label !== undefined
+    )
+    .map(
+      route =>
+        ({
+          path: route.fullPath,
+          label: route.handle?.label,
+        }) as { path: string; label: string }
+    );
+
+  return (
+    <nav className="bg-white border-b border-gray-200">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          <Link to="/" className="text-xl font-semibold text-gray-900">
+            React App
+          </Link>
+          <button
+            onClick={toggleMenu}
+            className="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            aria-label="Toggle menu"
+          >
+            <div className="w-6 h-6 flex flex-col justify-center space-y-1.5">
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${
+                  isOpen ? 'rotate-45 translate-y-2' : ''
+                }`}
+              />
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${isOpen ? 'opacity-0' : ''}`}
+              />
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${
+                  isOpen ? '-rotate-45 -translate-y-2' : ''
+                }`}
+              />
+            </div>
+          </button>
+        </div>
+        {isOpen && (
+          <div className="pb-4">
+            <div className="flex flex-col space-y-2">
+              {navigationRoutes.map(item => (
+                <Link
+                  key={item.path}
+                  to={item.path}
+                  onClick={() => setIsOpen(false)}
+                  className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                    isActive(item.path)
+                      ? 'bg-blue-100 text-blue-700'
+                      : 'text-gray-700 hover:bg-gray-100'
+                  }`}
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}

package/lib/templates/webapplication/reactbasic/src/router-utils.tsx

@@ -0,0 +1,35 @@
+import type { RouteObject } from 'react-router';
+import { routes } from './routes';
+
+export type RouteWithFullPath = RouteObject & { fullPath: string };
+
+const flatMapRoutes = (
+  route: RouteObject,
+  parentPath: string = ''
+): RouteWithFullPath[] => {
+  let fullPath: string;
+
+  if (route.index) {
+    fullPath = parentPath || '/';
+  } else if (route.path) {
+    if (route.path.startsWith('/')) {
+      fullPath = route.path;
+    } else {
+      fullPath =
+        parentPath === '/' ? `/${route.path}` : `${parentPath}/${route.path}`;
+    }
+  } else {
+    fullPath = parentPath;
+  }
+
+  const routeWithPath = { ...route, fullPath };
+
+  const childRoutes =
+    route.children?.flatMap(child => flatMapRoutes(child, fullPath)) || [];
+
+  return [routeWithPath, ...childRoutes];
+};
+
+export const getAllRoutes = (): RouteWithFullPath[] => {
+  return routes.flatMap(route => flatMapRoutes(route));
+};

package/lib/templates/webapplication/reactbasic/src/routes.tsx

@@ -1,7 +1,6 @@
 import type { RouteObject } from 'react-router';
 import AppLayout from '@/appLayout';
-import Home from '@/pages/Home';
-import About from './pages/About';
+import Home from './pages/Home';
 import NotFound from './pages/NotFound';
 
 export const routes: RouteObject[] = [
@@ -14,11 +13,6 @@ export const routes: RouteObject[] = [
         element: <Home />,
         handle: { showInNavigation: true, label: 'Home' },
       },
-      {
-        path: 'about',
-        element: <About />,
-        handle: { showInNavigation: true, label: 'About' },
-      },
       {
         path: '*',
         element: <NotFound />,

package/lib/templates/webapplication/reactbasic/vite.config.ts

@@ -4,10 +4,29 @@ import path from 'path';
 import { resolve } from 'path';
 import tailwindcss from '@tailwindcss/vite';
 import salesforce from '@salesforce/vite-plugin-webapp-experimental';
+import codegen from 'vite-plugin-graphql-codegen';
 
 export default defineConfig(({ mode }) => {
   return {
-    plugins: [tailwindcss(), react(), salesforce()],
+    // Ensure root base for e2e/static serve; plugin may override when deployed under a path
+    base: '/',
+    plugins: [
+      tailwindcss(),
+      react(),
+      salesforce(),
+      codegen({
+        // Path to the codegen config file
+        configFilePathOverride: resolve(__dirname, 'codegen.yml'),
+        // Run codegen on dev server start
+        runOnStart: true,
+        // Don't run codegen on build for now
+        runOnBuild: false,
+        // Enable file watcher during development
+        enableWatcher: true,
+        // Fail build if codegen errors
+        throwOnBuild: true,
+      }),
+    ],
 
     // Build configuration for MPA
     build: {

package/lib/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/generators/analyticsTemplateGenerator.ts","../src/generators/apexClassGenerator.ts","../src/generators/apexTriggerGenerator.ts","../src/generators/baseGenerator.ts","../src/generators/digitalExperienceSiteGenerator.ts","../src/generators/flexipageGenerator.ts","../src/generators/lightningAppGenerator.ts","../src/generators/lightningComponentGenerator.ts","../src/generators/lightningEventGenerator.ts","../src/generators/lightningInterfaceGenerator.ts","../src/generators/lightningTestGenerator.ts","../src/generators/projectGenerator.ts","../src/generators/staticResourceGenerator.ts","../src/generators/visualforceComponentGenerator.ts","../src/generators/visualforcePageGenerator.ts","../src/generators/webApplicationGenerator.ts","../src/i18n/i18n.ts","../src/i18n/index.ts","../src/i18n/localization.ts","../src/service/gitRepoUtils.ts","../src/service/templateService.ts","../src/utils/constants.ts","../src/utils/createUtil.ts","../src/utils/index.ts","../src/utils/types.ts"],"version":"5.9.3"}
+{"root":["../src/index.ts","../src/generators/analyticsTemplateGenerator.ts","../src/generators/apexClassGenerator.ts","../src/generators/apexTriggerGenerator.ts","../src/generators/baseGenerator.ts","../src/generators/digitalExperienceSiteGenerator.ts","../src/generators/flexipageGenerator.ts","../src/generators/lightningAppGenerator.ts","../src/generators/lightningComponentGenerator.ts","../src/generators/lightningEventGenerator.ts","../src/generators/lightningInterfaceGenerator.ts","../src/generators/lightningTestGenerator.ts","../src/generators/projectGenerator.ts","../src/generators/staticResourceGenerator.ts","../src/generators/visualforceComponentGenerator.ts","../src/generators/visualforcePageGenerator.ts","../src/generators/webApplicationGenerator.ts","../src/i18n/i18n.ts","../src/i18n/index.ts","../src/i18n/localization.ts","../src/service/gitRepoUtils.ts","../src/service/templateService.ts","../src/utils/constants.ts","../src/utils/createUtil.ts","../src/utils/index.ts","../src/utils/types.ts","../src/utils/webappTemplateUtils.ts"],"version":"5.9.3"}

package/lib/utils/types.d.ts

@@ -102,7 +102,7 @@ export interface ProjectOptions extends TemplateOptions {
      * Note that namespace is a reserved keyword for yeoman generator
      */
     ns: string;
-    template: 'standard' | 'empty' | 'analytics';
+    template: 'standard' | 'empty' | 'analytics' | 'reactb2e' | 'reactb2x';
     manifest: boolean;
     loginurl: string;
 }

package/lib/utils/webappTemplateUtils.d.ts

@@ -0,0 +1,54 @@
+/** File extensions that should be processed as EJS templates */
+export declare const EJS_EXTENSIONS: Set<string>;
+/** Templates that have a full folder under src/templates/project/ (populated at build time from npm) */
+export declare const BUILT_IN_FULL_TEMPLATES: Set<string>;
+/**
+ * Default app/site names embedded in each full template; all are renamed to the project name.
+ * Order matters: replace longer (suffix) first to avoid partial replacements.
+ */
+export declare const FULL_TEMPLATE_DEFAULT_NAMES: Record<string, {
+    base: string;
+    withSuffix: string;
+}>;
+/** Directories to skip when walking a full template dir (e.g. node_modules) */
+export declare const FULL_TEMPLATE_SKIP_DIRS: Set<string>;
+/**
+ * Returns a string containing only alphanumeric characters [A-Za-z0-9].
+ * Used for folder and file names under webapplications, which must be alphanumeric.
+ */
+export declare function toAlphanumericForPath(name: string): string;
+/** Heuristic: treat as text if no null byte in the first chunk and decodable as UTF-8 */
+export declare function isLikelyText(filename: string, buffer: Buffer): boolean;
+/** Renders an EJS template file with the given data (stateless, no generator dependency). */
+export declare function renderEjsFile(sourcePath: string, data: Record<string, unknown>): Promise<string>;
+export type GenerateBuiltInFullTemplateOptions = {
+    templateDir: string;
+    projectDir: string;
+    defaultpackagedir: string;
+    ns: string;
+    loginurl: string;
+    apiversion: string;
+    /** Renders an EJS template file; use renderEjsFile from this module */
+    renderEjs: (filePath: string, data: Record<string, unknown>) => Promise<string>;
+    /** Called for each file created (e.g. to push to generator changes) */
+    onFileCreated: (destPath: string) => void;
+};
+/**
+ * Generate project files from a built-in full template (e.g. reactb2e, reactb2x).
+ * Builds template vars and name replacements and delegates to generateFromProjectTemplateDir.
+ */
+export declare function generateBuiltInFullTemplate(template: string, projectname: string, options: GenerateBuiltInFullTemplateOptions): Promise<void>;
+export type GenerateFromProjectTemplateDirOptions = {
+    /** Pairs of [from, to] for renaming template default app/site names to project name */
+    nameReplacements?: [string, string][];
+    /** Renders an EJS template file with the given data; used for template files */
+    renderEjs: (filePath: string, data: Record<string, unknown>) => Promise<string>;
+    /** Called for each file/dir created under destDir (for change tracking) */
+    onFileCreated: (destPath: string) => void;
+};
+/**
+ * Recursively walk a full project template directory (e.g. reactb2e, reactb2x),
+ * rendering EJS for text files and copying the rest. Renames template default app/site
+ * names (e.g. appreacttemplateb2e) to the project name in paths and file contents.
+ */
+export declare function generateFromProjectTemplateDir(sourceDir: string, destDir: string, templateVars: Record<string, unknown>, options: GenerateFromProjectTemplateDirOptions): Promise<void>;