@salesforce/ui-bundle-template-base-angular-app 11.35.5 → 11.36.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.36.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.35.6...v11.36.0) (2026-07-24)
+
+### Features
+
+- @W-23438702: Implementing codegen for typescript safety ([#767](https://github.com/salesforce-experience-platform-emu/webapps/issues/767)) ([99f116c](https://github.com/salesforce-experience-platform-emu/webapps/commit/99f116c2c15904c0511a4d1b105d954be2e378b1))
+
+## [11.35.6](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.35.5...v11.35.6) (2026-07-23)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-angular-app
+
 ## [11.35.5](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.35.4...v11.35.5) (2026-07-23)
 
 **Note:** Version bump only for package @salesforce/ui-bundle-template-base-angular-app

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/ui-bundle-template-base-angular-app",
-  "version": "11.35.5",
+  "version": "11.36.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {
     "access": "public"

package/src/force-app/main/default/uiBundles/base-angular-app/.graphqlrc.yml

@@ -0,0 +1,2 @@
+schema: '../../../../../schema.graphql'
+documents: 'src/**/*.{graphql,ts}'

package/src/force-app/main/default/uiBundles/base-angular-app/angular.json

@@ -43,10 +43,11 @@
                 "silenceDeprecations": ["import"]
               }
             },
-            "plugins": ["./esbuild/api-version.mjs"]
+            "plugins": []
           },
           "configurations": {
             "production": {
+              "plugins": ["./esbuild/api-version.mjs"],
               "budgets": [
                 {
                   "type": "anyComponentStyle",
@@ -64,6 +65,7 @@
               }
             },
             "development": {
+              "plugins": ["./esbuild/graphql-codegen.mjs"],
               "optimization": false,
               "extractLicenses": false,
               "sourceMap": true

package/src/force-app/main/default/uiBundles/base-angular-app/codegen.yml

@@ -0,0 +1,95 @@
+schema: '../../../../../schema.graphql'
+documents: 'src/**/*.{graphql,ts}'
+generates:
+  src/app/api/graphql-operations-types.ts:
+    plugins:
+      - 'graphql-codegen-typescript-operation-types'
+      - 'typescript-operations'
+    config:
+      onlyOperationTypes: true
+      skipTypename: true
+      preResolveTypes: true
+      scalars:
+        # String-serialized scalars
+        JSON:
+          input: 'string'
+          output: 'string'
+        Date:
+          input: 'string'
+          output: 'string'
+        DateTime:
+          input: 'string'
+          output: 'string'
+        Time:
+          input: 'string'
+          output: 'string'
+        Email:
+          input: 'string'
+          output: 'string'
+        Url:
+          input: 'string'
+          output: 'string'
+        PhoneNumber:
+          input: 'string'
+          output: 'string'
+        Picklist:
+          input: 'string'
+          output: 'string'
+        MultiPicklist:
+          input: 'string'
+          output: 'string'
+        TextArea:
+          input: 'string'
+          output: 'string'
+        LongTextArea:
+          input: 'string'
+          output: 'string'
+        RichTextArea:
+          input: 'string'
+          output: 'string'
+        EncryptedString:
+          input: 'string'
+          output: 'string'
+        Base64:
+          input: 'string'
+          output: 'string'
+        IdOrRef:
+          input: 'string'
+          output: 'string'
+        # BigDecimal-serialized scalars (accepts number or string, returns number)
+        Currency:
+          input: 'number | string'
+          output: 'number'
+        BigDecimal:
+          input: 'number | string'
+          output: 'number'
+        Double:
+          input: 'number | string'
+          output: 'number'
+        Percent:
+          input: 'number | string'
+          output: 'number'
+        Longitude:
+          input: 'number | string'
+          output: 'number'
+        Latitude:
+          input: 'number | string'
+          output: 'number'
+        # Integer-like scalars
+        Long:
+          input: 'number'
+          output: 'number'
+        BigInteger:
+          input: 'number'
+          output: 'number'
+        Short:
+          input: 'number'
+          output: 'number'
+        Byte:
+          input: 'number'
+          output: 'number'
+        Char:
+          input: 'number'
+          output: 'number'
+overwrite: true
+ignoreNoDocuments: true

package/src/force-app/main/default/uiBundles/base-angular-app/esbuild/graphql-codegen.mjs

@@ -0,0 +1,13 @@
+/**
+ * GraphQL Codegen esbuild plugin — runs codegen on build start.
+ *
+ * Resolves GraphQL operations into typed TypeScript at build time using the
+ * project's `codegen.yml` configuration. Re-runs on every rebuild during
+ * `ng serve` so generated types stay in sync with schema/document changes.
+ *
+ * Referenced from angular.json: architect.build.options.plugins[].
+ */
+import { createGraphQLCodegenPlugin } from '@salesforce/angular-plugin-ui-bundle';
+
+const plugin = createGraphQLCodegenPlugin();
+export default plugin;

package/src/force-app/main/default/uiBundles/base-angular-app/package.json

@@ -14,7 +14,9 @@
     "test": "ng test",
     "lint": "ng lint",
     "build:e2e": "ng build && node scripts/rewrite-e2e-assets.mjs",
-    "e2e": "playwright test"
+    "e2e": "playwright test",
+    "graphql:schema": "node scripts/get-graphql-schema.mjs",
+    "graphql:codegen": "graphql-codegen"
   },
   "dependencies": {
     "@angular/animations": "^21.2.0",
@@ -48,7 +50,12 @@
     "tailwindcss": "^4.0.0",
     "typescript": "~5.9.2",
     "typescript-eslint": "^8.0.0",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.0",
+    "@graphql-codegen/cli": "^6.1.0",
+    "@graphql-codegen/typescript-operations": "^5.0.6",
+    "graphql": "^16.11.0",
+    "graphql-codegen-typescript-operation-types": "^2.0.2",
+    "@graphql-eslint/eslint-plugin": "^4.1.0"
   },
   "overrides": {
     "undici": "^7.28.0"

package/src/force-app/main/default/uiBundles/base-angular-app/scripts/get-graphql-schema.mjs

@@ -0,0 +1,69 @@
+/**
+ * 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/ui-bundle/app';
+import { buildClientSchema, getIntrospectionQuery, printSchema } from 'graphql';
+import { pruneSchema } from '@graphql-tools/utils';
+
+const DEFAULT_SCHEMA_PATH = '../../../../../schema.graphql';
+const TARGET_ORG = process.env.SF_TARGET_ORG || undefined;
+
+async function executeSalesforceGraphQLQuery(query, variables, operationName) {
+	const orgInfo = await getOrgInfo(TARGET_ORG);
+	if (!orgInfo) {
+		throw new Error('Could not resolve a Salesforce org. Set SF_TARGET_ORG or a default org.');
+	}
+	const { rawInstanceUrl: instanceUrl, apiVersion, accessToken } = orgInfo;
+
+	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);
+}