@salesforce/ui-bundle-template-app-react-template-b2e 11.2.0 → 11.3.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.
package/dist/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [11.3.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.2.0...v11.3.0) (2026-06-30)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [11.2.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.1.3...v11.2.0) (2026-06-30)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
|
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
"graphql:schema": "node scripts/get-graphql-schema.mjs"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@salesforce/platform-sdk": "^11.
|
|
22
|
-
"@salesforce/ui-bundle": "^11.
|
|
21
|
+
"@salesforce/platform-sdk": "^11.3.0",
|
|
22
|
+
"@salesforce/ui-bundle": "^11.3.0",
|
|
23
23
|
"@tailwindcss/vite": "^4.1.17",
|
|
24
24
|
"class-variance-authority": "^0.7.1",
|
|
25
25
|
"clsx": "^2.1.1",
|
|
@@ -45,8 +45,8 @@
|
|
|
45
45
|
"@graphql-eslint/eslint-plugin": "^4.1.0",
|
|
46
46
|
"@graphql-tools/utils": "^11.0.0",
|
|
47
47
|
"@playwright/test": "^1.49.0",
|
|
48
|
-
"@salesforce/graphiti": "^11.
|
|
49
|
-
"@salesforce/vite-plugin-ui-bundle": "^11.
|
|
48
|
+
"@salesforce/graphiti": "^11.3.0",
|
|
49
|
+
"@salesforce/vite-plugin-ui-bundle": "^11.3.0",
|
|
50
50
|
"@testing-library/jest-dom": "^6.6.3",
|
|
51
51
|
"@testing-library/react": "^16.1.0",
|
|
52
52
|
"@testing-library/user-event": "^14.5.2",
|
package/dist/package-lock.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforce/webapp-template-base-sfdx-project-experimental",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.3.0",
|
|
4
4
|
"lockfileVersion": 3,
|
|
5
5
|
"requires": true,
|
|
6
6
|
"packages": {
|
|
7
7
|
"": {
|
|
8
8
|
"name": "@salesforce/webapp-template-base-sfdx-project-experimental",
|
|
9
|
-
"version": "11.
|
|
9
|
+
"version": "11.3.0",
|
|
10
10
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
11
11
|
"devDependencies": {
|
|
12
12
|
"@lwc/eslint-plugin-lwc": "^3.3.0",
|
package/dist/package.json
CHANGED
package/package.json
CHANGED
package/dist/AGENT.md
DELETED
|
@@ -1,252 +0,0 @@
|
|
|
1
|
-
# Agent guide: Salesforce UI Bundle development
|
|
2
|
-
|
|
3
|
-
This project is a **Salesforce DX (SFDX) project** containing a **React UI Bundle**. The UI Bundle is a standalone Vite + React SPA that runs inside the Salesforce platform. Use this file when working in this project.
|
|
4
|
-
|
|
5
|
-
## Resolving paths
|
|
6
|
-
|
|
7
|
-
Read `sfdx-project.json` at the project root. Take the first `packageDirectories[].path` value and append `/main/default` to get `<sfdx-source>`. The UI Bundle directory is:
|
|
8
|
-
|
|
9
|
-
```
|
|
10
|
-
<sfdx-source>/uiBundles/<appName>/
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
Replace `<appName>` with the actual folder name found under `uiBundles/`. The source path is **not** always `force-app` — always resolve it from `sfdx-project.json`.
|
|
14
|
-
|
|
15
|
-
## Project layout
|
|
16
|
-
|
|
17
|
-
```
|
|
18
|
-
<project-root>/
|
|
19
|
-
├── sfdx-project.json
|
|
20
|
-
├── package.json # SFDX root scripts
|
|
21
|
-
├── scripts/
|
|
22
|
-
│ ├── org-setup.mjs # One-time org setup (deploy, schema, build)
|
|
23
|
-
│ └── graphql-search.sh # Schema entity lookup
|
|
24
|
-
├── config/
|
|
25
|
-
│ └── project-scratch-def.json
|
|
26
|
-
│
|
|
27
|
-
└── <sfdx-source>/
|
|
28
|
-
├── uiBundles/
|
|
29
|
-
│ └── <appName>/ # ← React UI Bundle (primary workspace)
|
|
30
|
-
│ ├── <appName>.uibundle-meta.xml
|
|
31
|
-
│ ├── ui-bundle.json
|
|
32
|
-
│ ├── index.html
|
|
33
|
-
│ ├── package.json
|
|
34
|
-
│ ├── vite.config.ts / tsconfig.json
|
|
35
|
-
│ ├── vitest.config.ts / playwright.config.ts
|
|
36
|
-
│ ├── codegen.yml / .graphqlrc.yml
|
|
37
|
-
│ └── src/ # All application code lives here
|
|
38
|
-
│
|
|
39
|
-
├── classes/ # Apex classes (optional)
|
|
40
|
-
├── objects/ # Custom objects and fields (optional)
|
|
41
|
-
├── permissionsets/ # Permission sets (optional)
|
|
42
|
-
├── cspTrustedSites/ # CSP trusted site definitions (optional)
|
|
43
|
-
├── layouts/ # Object layouts (optional)
|
|
44
|
-
├── triggers/ # Apex triggers (optional)
|
|
45
|
-
└── data/ # Sample data for import (optional)
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
## UI Bundle source structure
|
|
49
|
-
|
|
50
|
-
All application code lives inside the UI Bundle's `src/` directory:
|
|
51
|
-
|
|
52
|
-
```
|
|
53
|
-
src/
|
|
54
|
-
├── app.tsx # Entry point — creates the browser router
|
|
55
|
-
├── appLayout.tsx # Shell layout (header, navigation, Outlet, footer)
|
|
56
|
-
├── routes.tsx # Single route registry for the entire app
|
|
57
|
-
├── navigationMenu.tsx # Navigation component
|
|
58
|
-
├── router-utils.tsx # Router helpers
|
|
59
|
-
├── lib/utils.ts # Utility functions (cn, etc.)
|
|
60
|
-
├── styles/global.css # Tailwind global styles
|
|
61
|
-
├── api/ # GraphQL operations, clients, data services
|
|
62
|
-
├── assets/ # Static SVGs, images
|
|
63
|
-
├── components/
|
|
64
|
-
│ ├── ui/ # Shared primitives (shadcn-style: button, card, input, etc.)
|
|
65
|
-
│ ├── layout/ # Layout components (header, footer, sidebar)
|
|
66
|
-
│ └── <feature>/ # Feature-specific components
|
|
67
|
-
├── features/ # Feature modules (auth, search, etc.)
|
|
68
|
-
├── hooks/ # Custom React hooks
|
|
69
|
-
├── pages/ # Page components (one per route)
|
|
70
|
-
├── public/ # Static assets served as-is
|
|
71
|
-
└── utils/ # Shared utilities
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
### Key files
|
|
75
|
-
|
|
76
|
-
| File | Role |
|
|
77
|
-
|------|------|
|
|
78
|
-
| `app.tsx` | Creates `BrowserRouter`; do not add UI here |
|
|
79
|
-
| `appLayout.tsx` | Source of truth for navigation, header, footer, and page shell |
|
|
80
|
-
| `routes.tsx` | Single route registry; all pages are children of the layout route |
|
|
81
|
-
| `<appName>.uibundle-meta.xml` | Salesforce deploy descriptor (`masterLabel`, `version`, `isActive`) |
|
|
82
|
-
| `ui-bundle.json` | Runtime config (`outputDir`, routing) |
|
|
83
|
-
|
|
84
|
-
## Two package.json contexts
|
|
85
|
-
|
|
86
|
-
### 1. Project root
|
|
87
|
-
|
|
88
|
-
Used for SFDX metadata tooling. Scripts here target LWC/Aura, not the React app.
|
|
89
|
-
|
|
90
|
-
| Command | Purpose |
|
|
91
|
-
|---------|---------|
|
|
92
|
-
| `npm run test` | LWC Jest (passWithNoTests) |
|
|
93
|
-
| `npm run prettier` | Format metadata files |
|
|
94
|
-
| `npm run prettier:verify` | Check Prettier |
|
|
95
|
-
|
|
96
|
-
**One-time org setup:** `node scripts/org-setup.mjs --target-org <alias>` runs login, deploy, permset assignment, data import, GraphQL schema/codegen, UI Bundle build, and optionally the dev server. Use `--help` for all flags.
|
|
97
|
-
|
|
98
|
-
### 2. UI Bundle directory (primary workspace)
|
|
99
|
-
|
|
100
|
-
**ALL dev, build, lint, and test commands MUST be run from inside the UI Bundle directory (`<sfdx-source>/uiBundles/<appName>/`). Never run them from the project root.**
|
|
101
|
-
|
|
102
|
-
Resolve the correct path from `sfdx-project.json` before running any command. Do not hardcode the path.
|
|
103
|
-
|
|
104
|
-
| Command | Purpose |
|
|
105
|
-
|---------|---------|
|
|
106
|
-
| `npm run dev` | Start Vite dev server |
|
|
107
|
-
| `npm run build` | TypeScript check + Vite production build |
|
|
108
|
-
| `npm run lint` | ESLint for the React app |
|
|
109
|
-
| `npm run test` | Vitest unit tests |
|
|
110
|
-
| `npm run preview` | Preview production build |
|
|
111
|
-
| `npm run graphql:codegen` | Generate GraphQL types from schema |
|
|
112
|
-
| `npm run graphql:schema` | Fetch GraphQL schema from org |
|
|
113
|
-
|
|
114
|
-
**After every task, without exception:**
|
|
115
|
-
1. Run `npm run build` from the UI Bundle directory — must pass with zero errors.
|
|
116
|
-
2. Run `npm run lint` from the UI Bundle directory — must pass with zero errors.
|
|
117
|
-
3. Run `npm run dev` to start the dev server so the user can verify the result.
|
|
118
|
-
|
|
119
|
-
Do not consider a task complete until all three steps have been run successfully.
|
|
120
|
-
## Development conventions
|
|
121
|
-
|
|
122
|
-
### UI
|
|
123
|
-
|
|
124
|
-
- **Component library:** shadcn/ui primitives in `src/components/ui/`. Always use these over raw HTML equivalents. **Before importing any component, verify both the file exists in `src/components/ui/` AND the named export exists within that file.** Never assume a component or export is available — read the file to confirm the exact exports before importing.
|
|
125
|
-
- **Styling:** Tailwind CSS only. No inline `style={{}}`. Use `cn()` from `@/lib/utils` for conditional classes.
|
|
126
|
-
- **Icons:** Lucide React.
|
|
127
|
-
- **Path alias:** `@/*` maps to `src/*`. Use it for all imports.
|
|
128
|
-
- **TypeScript:** No `any`. Use proper types, generics, or `unknown`.
|
|
129
|
-
- **Components:** Accept `className?: string` prop. Extract shared state to custom hooks in `src/hooks/`.
|
|
130
|
-
- **React apps must not** import Salesforce platform modules (`lightning/*`, `@wire`, LWC APIs).
|
|
131
|
-
|
|
132
|
-
### Routing
|
|
133
|
-
|
|
134
|
-
- React Router with `createBrowserRouter`. Route definitions live exclusively in `routes.tsx`.
|
|
135
|
-
- All page routes are children of the layout route (which renders `appLayout.tsx`).
|
|
136
|
-
- Default-export one component per page file.
|
|
137
|
-
- The catch-all `path: '*'` route must always be last.
|
|
138
|
-
- Navigation uses absolute paths (`/dashboard`). Non-router imports use dot-relative paths (`./utils`).
|
|
139
|
-
- Navigation visibility is driven by `handle.showInNavigation` on route definitions.
|
|
140
|
-
|
|
141
|
-
### Layout and navigation
|
|
142
|
-
|
|
143
|
-
- `appLayout.tsx` owns the header, navigation menu, footer, and `<Outlet />`.
|
|
144
|
-
- To modify header or footer, edit `appLayout.tsx` and create components in `src/components/layout/`.
|
|
145
|
-
- To add a page, add a route in `routes.tsx` and create the page component — do not modify `appLayout.tsx` or `app.tsx` for page additions.
|
|
146
|
-
|
|
147
|
-
### Data access (Salesforce)
|
|
148
|
-
|
|
149
|
-
**Before writing any code that connects to Salesforce, you MUST invoke the `using-ui-bundle-salesforce-data` skill. Do not write any data access code without consulting it first.**
|
|
150
|
-
|
|
151
|
-
This applies to: GraphQL queries/mutations, REST calls, SDK initialization, custom hooks that fetch data, or any code that imports from `@salesforce/platform-sdk`.
|
|
152
|
-
|
|
153
|
-
- **All data access uses the Data SDK** (`@salesforce/platform-sdk`) via `createDataSDK()`.
|
|
154
|
-
- **Never** use `fetch()` or `axios` directly for Salesforce data.
|
|
155
|
-
- **GraphQL is preferred** for record operations (`sdk.graphql`). Use `sdk.fetch` only when GraphQL cannot cover the case (UI API REST, Apex REST, Connect REST, Einstein LLM).
|
|
156
|
-
- Use optional chaining: `sdk.graphql?.()`, `sdk.fetch?.()`.
|
|
157
|
-
- Apply the `@optional` directive to all record fields for field-level security resilience.
|
|
158
|
-
- Verify field and object names via `scripts/graphql-search.sh` before writing queries.
|
|
159
|
-
- Use `__SF_API_VERSION__` global for API version in REST calls.
|
|
160
|
-
- **Blocked APIs:** Enterprise REST query endpoint (`/query` with SOQL), `@AuraEnabled` Apex, Chatter API.
|
|
161
|
-
|
|
162
|
-
#### Permitted APIs
|
|
163
|
-
|
|
164
|
-
| API | Method | Endpoints / Use Case |
|
|
165
|
-
|-----|--------|----------------------|
|
|
166
|
-
| GraphQL | `sdk.graphql` | All record queries and mutations via `uiapi { }` namespace |
|
|
167
|
-
| UI API REST | `sdk.fetch` | `/services/data/v{ver}/ui-api/records/{id}` |
|
|
168
|
-
| Apex REST | `sdk.fetch` | `/services/apexrest/{resource}` |
|
|
169
|
-
| Connect REST | `sdk.fetch` | `/services/data/v{ver}/connect/...` |
|
|
170
|
-
| Einstein LLM | `sdk.fetch` | `/services/data/v{ver}/einstein/llm/prompt/generations` |
|
|
171
|
-
|
|
172
|
-
Any endpoint not listed above is not permitted.
|
|
173
|
-
|
|
174
|
-
#### GraphQL non-negotiable rules
|
|
175
|
-
|
|
176
|
-
1. **Schema is the single source of truth** — every entity and field name must be confirmed via the schema search script before use. Never guess.
|
|
177
|
-
2. **`@optional` on all record fields** — FLS causes entire queries to fail if any field is inaccessible. Apply to every scalar, parent, and child relationship field.
|
|
178
|
-
3. **Correct mutation syntax** — mutations wrap under `uiapi(input: { allOrNone: true/false })`, not bare `uiapi { ... }`.
|
|
179
|
-
4. **Explicit `first:` in every query** — omitting it silently defaults to 10 records. Always include `pageInfo { hasNextPage endCursor }` for paginated queries.
|
|
180
|
-
5. **SOQL-derived execution limits** — max 10 subqueries per request, max 5 levels of child-to-parent traversal, max 1 level parent-to-child, max 2,000 records per subquery.
|
|
181
|
-
6. **HTTP 200 does not mean success** — Salesforce returns HTTP 200 even on failure. Always check the `errors` array in the response body.
|
|
182
|
-
|
|
183
|
-
#### GraphQL inline queries
|
|
184
|
-
Must use the `gql` template tag from `@salesforce/platform-sdk` — plain template strings bypass `@graphql-eslint` schema validation. For complex queries, use external `.graphql` files with codegen.
|
|
185
|
-
|
|
186
|
-
#### Current user info
|
|
187
|
-
Use GraphQL (`uiapi { currentUser { Id Name { value } } }`), not Chatter (`/chatter/users/me`).
|
|
188
|
-
|
|
189
|
-
#### Schema file (`schema.graphql`)
|
|
190
|
-
|
|
191
|
-
The `schema.graphql` file at the SFDX project root is the source of truth for all entity and field name lookups. It is 265K+ lines — never open or parse it directly. Use the schema search script instead.
|
|
192
|
-
|
|
193
|
-
- **Generate/refresh:** Run `npm run graphql:schema` from the UI bundle directory
|
|
194
|
-
- **When to regenerate:** After any metadata deployment that changes objects, fields, or permission sets
|
|
195
|
-
- **Custom objects** only appear in the schema after metadata deployment AND permission set assignment
|
|
196
|
-
- **After regenerating:** Always re-run `npm run graphql:codegen` and `npm run build` (schema changes may affect generated types)
|
|
197
|
-
|
|
198
|
-
### CSP trusted sites
|
|
199
|
-
|
|
200
|
-
Any external domain the app calls (APIs, CDNs, fonts) must have a `.cspTrustedSite-meta.xml` file under `<sfdx-source>/cspTrustedSites/`. Unregistered domains are blocked at runtime. Each subdomain needs its own entry. URLs must be HTTPS with no trailing slash, no path, and no wildcards.
|
|
201
|
-
|
|
202
|
-
## Building and launching the app
|
|
203
|
-
|
|
204
|
-
All build, dev, and test commands run from the UI Bundle directory. Before running any command, read the UI Bundle's `package.json` to confirm available scripts — do not assume script names.
|
|
205
|
-
|
|
206
|
-
Typical scripts found in the UI Bundle:
|
|
207
|
-
|
|
208
|
-
| Command | Purpose |
|
|
209
|
-
|---------|---------|
|
|
210
|
-
| `npm run build` | TypeScript check + Vite production build |
|
|
211
|
-
| `npm run dev` | Start Vite dev server |
|
|
212
|
-
| `npm run lint` | ESLint |
|
|
213
|
-
| `npm run test` | Vitest unit tests |
|
|
214
|
-
| `npm run graphql:codegen` | Generate GraphQL types |
|
|
215
|
-
| `npm run graphql:schema` | Fetch GraphQL schema from org |
|
|
216
|
-
|
|
217
|
-
If dependencies have not been installed yet, run `npm install` in the UI Bundle directory first. Alternatively, run `npm run sf-project-setup` from the project root — it resolves the UI Bundle directory automatically and runs install, build, and dev in sequence.
|
|
218
|
-
|
|
219
|
-
**After any JavaScript or TypeScript change, run `npm run build` to validate the change.** If the build fails, read the error output, identify the cause, fix it, and run `npm run build` again. Do not move on until the build passes.
|
|
220
|
-
|
|
221
|
-
## Deploying
|
|
222
|
-
|
|
223
|
-
**Deployment order matters.** Metadata (objects, permission sets) must be deployed before fetching the GraphQL schema. After any metadata deployment that changes objects, fields, or permissions, re-run schema fetch and codegen.
|
|
224
|
-
|
|
225
|
-
**Deployment steps:**
|
|
226
|
-
|
|
227
|
-
1. Authenticate to the target org
|
|
228
|
-
2. Build the UI Bundle (`npm run build` in the UI Bundle directory)
|
|
229
|
-
3. Deploy metadata (`sf project deploy start --source-dir <packageDir> --target-org <alias>`)
|
|
230
|
-
|
|
231
|
-
```bash
|
|
232
|
-
# Deploy UI Bundle only
|
|
233
|
-
sf project deploy start --source-dir <sfdx-source>/ui-bundles --target-org <alias>
|
|
234
|
-
|
|
235
|
-
# Deploy all metadata
|
|
236
|
-
sf project deploy start --source-dir <packageDir> --target-org <alias>
|
|
237
|
-
```
|
|
238
|
-
|
|
239
|
-
**Do not open the app after deployment.** Do not run `sf org open`, do not guess the runtime URL, and do not construct paths like `/s/<appName>`. Deployment is complete when the `sf project deploy start` command succeeds.
|
|
240
|
-
|
|
241
|
-
## Post-deployment org setup
|
|
242
|
-
|
|
243
|
-
These steps apply after a fresh deployment to configure the org. They are not part of routine deployment.
|
|
244
|
-
|
|
245
|
-
1. Assign permission sets
|
|
246
|
-
2. Import data (only with user confirmation)
|
|
247
|
-
3. Fetch GraphQL schema + run codegen (`npm run graphql:schema && npm run graphql:codegen`)
|
|
248
|
-
4. Rebuild the UI Bundle (`npm run build` — schema changes may affect generated types)
|
|
249
|
-
|
|
250
|
-
## Skills
|
|
251
|
-
|
|
252
|
-
Before starting any task, check whether a relevant skill exists. If one does, invoke it before writing any code or making any implementation decision. Skills are the authoritative source for patterns, constraints, and code examples.
|