npm - @elliemae/pui-cli - Versions diffs - 9.0.0-alpha.11 → 9.0.0-alpha.12 - Mend

@elliemae/pui-cli 9.0.0-alpha.11 → 9.0.0-alpha.12

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 (58) hide show

package/lib/lint-config/eslint/flat/compat.mjs CHANGED Viewed

@@ -2,7 +2,7 @@
  * ESLint 10 removed deprecated context APIs (e.g. getSourceCode, getScope, getFilename).
  * Wrap legacy plugins via @eslint/compat v2 (ESLint 10–aware fixupPluginRules).
  */
-import { fixupConfigRules, fixupPluginRules } from '@eslint/compat';
+import { fixupPluginRules } from '@eslint/compat';
 import react from 'eslint-plugin-react';
 import reduxSaga from 'eslint-plugin-redux-saga';
 import storybook from 'eslint-plugin-storybook';
@@ -20,8 +20,8 @@ export const reactPlugin = fixupPluginRules(react);
 /** @type {import('eslint').ESLint.Plugin} */
 export const reduxSagaPlugin = fixupPluginRules(reduxSaga);
-/** Storybook flat presets — uses legacy context APIs (eslint-plugin-storybook@0.12). */
+/** Storybook flat presets — native flat config (eslint-plugin-storybook@10). */
 /** @type {import('eslint').Linter.Config[]} */
-export const storybookFlatConfigs = fixupConfigRules(
-  Array.isArray(storybookFlat) ? storybookFlat : [storybookFlat],
-);
+export const storybookFlatConfigs = Array.isArray(storybookFlat)
+  ? storybookFlat
+  : [storybookFlat];

package/lib/skills/migrate-storybook-out-of-cjs/SKILL.md ADDED Viewed

@@ -0,0 +1,188 @@
+---
+name: migrate-storybook-out-of-cjs
+description: >-
+  Migrate PUI Storybook from CJS wrappers and @elliemae/pui-app-sdk/storybook/cjs/* to ESM
+  (.storybook/*.mjs) and @elliemae/pui-app-sdk/storybook/* imports. Use when upgrading Storybook
+  10 with pui-cli 9, replacing require() in .storybook/main.js, removing storybook/cjs/main or
+  storybook/cjs/middleware, deleting .storybook/middleware.js, or converting preview/manager/theme
+  to ESM.
+---
+# Migrate Storybook out of CJS
+Moves consumer repos from legacy CommonJS Storybook wrappers (`require('@elliemae/pui-app-sdk/storybook/cjs/...')`) to ESM (`.storybook/*.mjs` + `@elliemae/pui-app-sdk/storybook/*`).
+Requires **pui-cli 9** and a matching **pui-app-sdk** release on the same train. The `storybook/cjs/*` package paths are **removed** from pui-app-sdk — repos still on CJS imports will fail at install or runtime.
+For the full pui-cli 9 upgrade (Node 24, ESLint 10, etc.), install `migrate-to-pui-cli-9` first or in parallel.
+## When to use
+- `.storybook/main.js` uses `require('@elliemae/pui-app-sdk/storybook/cjs/main')`
+- `.storybook/middleware.js` exists or imports `storybook/cjs/middleware`
+- Storybook fails after bumping pui-app-sdk with “Cannot find module …/storybook/cjs/…”
+- Moving from Storybook 6 CJS config to Storybook 10 ESM config with pui-cli
+## What changed
+| Topic             | Before (CJS / SB6)                         | After (ESM / SB10)                                               |
+| ----------------- | ------------------------------------------ | ---------------------------------------------------------------- |
+| Consumer config   | `.storybook/main.js`                       | `.storybook/main.mjs`                                            |
+| Shared import     | `@elliemae/pui-app-sdk/storybook/cjs/main` | `@elliemae/pui-app-sdk/storybook/main`                           |
+| Export name       | `getConfig()` (CJS default)                | **`getStorybookConfig()`** (named export)                        |
+| API mocks         | `.storybook/middleware.js`                 | Built into pui-cli Storybook dev server                          |
+| Preview / manager | `.storybook/preview.js`, `manager.js`      | `.storybook/preview.mjs`, `manager.mjs` (when using ESM imports) |
+| CLI               | `start-storybook` / `build-storybook`      | `pui-cli storybook` → `storybook dev` / `storybook build`        |
+| Addons            | Installed in consumer `package.json`       | Bundled in pui-cli; resolved via pui-app-sdk                     |
+## Pre-flight
+1. Bump `@elliemae/pui-cli@9` and `@elliemae/pui-app-sdk@*` together.
+2. Run `pnpm install`. If using a local `file:` link to pui-app-sdk, reinstall after rebuilding app-sdk so workspace `node_modules` picks up fresh dist.
+3. Confirm the repo uses `pui-cli storybook` (not raw `start-storybook` scripts).
+## Migration steps
+### Step 1 — Replace `.storybook/main.js`
+Delete `main.js`. Create `.storybook/main.mjs`:
+```javascript
+import { getStorybookConfig } from '@elliemae/pui-app-sdk/storybook/main';
+export default getStorybookConfig();
+```
+**Do not** use `getConfig` or `require('…/storybook/cjs/main')` — those paths and names are removed.
+### Step 2 — Remove middleware
+Delete `.storybook/middleware.js` if present.
+pui-cli registers mock API routes during `storybook dev`. The deprecated `@elliemae/pui-app-sdk/storybook/middleware` export exists only for repos not yet on pui-cli 9 Storybook — **do not** add it back in new ESM configs.
+### Step 3 — Convert preview, manager, theme (if customized)
+If the repo only uses shared pui-app-sdk defaults, you may have no preview file — skip.
+**Minimal preview** (no custom theme):
+```javascript
+// .storybook/preview.mjs
+export {
+  decorators,
+  parameters,
+  loaders,
+} from '@elliemae/pui-app-sdk/storybook/preview';
+```
+**Preview with local theme** (see `pui-react-boilerplate`, `pui-app-sdk`):
+```javascript
+// .storybook/preview.mjs
+import {
+  getParameters,
+  loaders,
+  decorators,
+} from '@elliemae/pui-app-sdk/storybook/preview';
+import { theme } from './theme.mjs';
+const parameters = getParameters(theme);
+export { decorators, parameters, loaders };
+```
+**Manager / theme** — convert `manager.js` → `manager.mjs`, `theme.js` → `theme.mjs` when they use `import`/`export`:
+```javascript
+// .storybook/manager.mjs
+export { managerConfig } from '@elliemae/pui-app-sdk/storybook/manager';
+```
+```javascript
+// .storybook/theme.mjs
+export { theme } from '@elliemae/pui-app-sdk/storybook/theme';
+```
+Keep `.storybook/preview-head.html` unchanged.
+Delete obsolete `.js` duplicates after creating `.mjs` files (`preview.js`, `manager.js`, `theme.js`, `middleware.js`).
+### Step 4 — Monorepo lib packages (no `app/` directory)
+pui-app-sdk omits `../app/**` story globs when no `app/` folder exists. If globs still fail, filter explicitly in `main.mjs`:
+```javascript
+import { getStorybookConfig } from '@elliemae/pui-app-sdk/storybook/main';
+const config = getStorybookConfig();
+config.stories = config.stories.filter((s) => !s.includes('/app/'));
+export default config;
+```
+Pilot: `pui-mono-repo-boilerplate/libs/foo`.
+### Step 5 — Stories and types
+- Prefer CSF3 and `@storybook/react-webpack5` types where TypeScript fails.
+- Remove Storybook 6 webpack alias workarounds (MDX pinning, react-select hacks) unless a story still breaks after upgrade.
+- Consumers do **not** install `@storybook/addon-*` separately — addons resolve from pui-cli via pui-app-sdk.
+### Step 6 — ESLint
+Ensure `.storybook/**` is linted. After pui-cli 9 ESLint flat config migration, run `pnpm exec pui-cli lint` on story files.
+## Verify
+```bash
+pnpm exec pui-cli storybook              # dev, default port 11000
+pnpm exec pui-cli storybook -b           # static build to demo/
+pnpm exec pui-cli storybook -b --docs    # docs build
+pnpm exec pui-cli lint
+```
+Checklist:
+- [ ] No `require('@elliemae/pui-app-sdk/storybook/cjs/…')` anywhere
+- [ ] `.storybook/main.mjs` exists; `main.js` removed
+- [ ] `.storybook/middleware.js` removed (if it existed)
+- [ ] Story dev server starts; mock API routes work without middleware file
+- [ ] Static build succeeds
+## Troubleshooting
+| Symptom                                      | Fix                                                                                   |
+| -------------------------------------------- | ------------------------------------------------------------------------------------- |
+| `Cannot find module '…/storybook/cjs/main'`  | Migrate to `@elliemae/pui-app-sdk/storybook/main` in `main.mjs`                       |
+| `getConfig is not a function`                | Use named import **`getStorybookConfig`**, not `getConfig`                            |
+| `Can't resolve './app'` in lib-only package  | Use conditional globs in app-sdk or filter `config.stories` in `main.mjs`             |
+| `Failed to load native binding` / SWC errors | Rebuild pui-app-sdk; reinstall workspace; Babel compiler addon is bundled via pui-cli |
+| “Using default Webpack5 setup” (no Babel)    | Refresh pnpm install after bumping `file:` pui-cli / pui-app-sdk links                |
+| API mocks missing                            | Delete middleware file; use `pui-cli storybook` (not legacy CLI)                      |
+| Stale app-sdk in monorepo                    | `pnpm install --ignore-scripts` after rebuilding linked packages                      |
+## Reference repos
+- `pui-react-boilerplate` — app with `app/` stories
+- `pui-mono-repo-boilerplate/libs/foo` — lib-only package
+- `pui-app-sdk/.storybook/` — dogfood ESM wrappers
+Full guide: [pui-cli 9 migration — Storybook 10](https://docs.pui.mortgagetech.q1.ice.com/cli/pui-cli-9-migration) (`docs/pui-cli-9-migration.md` in pui-cli).
+## Install this skill
+From a consumer repo (after `@elliemae/pui-cli` is installed):
+```bash
+pnpm exec pui-cli skills list
+pnpm exec pui-cli skills install migrate-storybook-out-of-cjs --target all
+```
+Skills are copied to `.cursor/skills/`, `.claude/skills/`, and `.github/skills/`.
+## What NOT to change
+- Production Webpack build config — Storybook migration is dev/docs tooling only
+- Business logic in stories unless types or CSF3 require it
+- Do not re-add `@storybook/*` addon packages to consumer `package.json` unless pui-cli docs explicitly require an exception

package/lib/skills/migrate-to-pui-cli-9/SKILL.md CHANGED Viewed

@@ -5,8 +5,8 @@ description: >-
   Husky 9, Vitest 4, semantic-release 25, Lerna 9, Nx 22). Use when upgrading @elliemae/pui-cli,
   migrating from .eslintrc.cjs to eslint.config.mjs, release.config.cjs to release.config.mjs,
   upgrading Husky 8 hooks, fixing Vitest 4 / coverage-v8 breakages, migrating monorepo nx.json from
-  @nrwl/workspace to nx 22, or adopting shared configs from pui-cli. App/library production builds
-  stay on Webpack.
+  @nrwl/workspace to nx 22, moving shamefully-hoist from .npmrc to pnpm-workspace.yaml for pnpm 11,
+  or adopting shared configs from pui-cli. App/library production builds stay on Webpack.
 ---
 # Migrate to pui-cli 9
@@ -35,9 +35,46 @@ pnpm install
 1. Update `.node-version` to `24` if needed.
 2. Ensure CI Jenkins/docker images use Node 24.
-3. Upgrade pnpm to 11 (`packageManager` field in root `package.json`).
+3. Upgrade pnpm to 11 — set `engines.pnpm` to `>=11` in root `package.json` (do not pin an exact version in `packageManager`; customers may use any pnpm 11 minor/patch).
 4. Run `pnpm install`, `pnpm test`, `pnpm run build` — fix any Node/pnpm breakages only.
+### Phase 1b — pnpm 11 hoisting (`pnpm-workspace.yaml`)
+**Required for every repo** (apps, libs, monorepos). pnpm 11 ignores hoist settings in `.npmrc`.
+1. **Keep org hoisting policy** — set `shamefullyHoist: true` in `pnpm-workspace.yaml` (same as legacy `shamefully-hoist=true`). Do not switch to isolated/no-hoist; PUI apps use `@elliemae/app-react-dependencies` and pui-cli webpack `getAlias()` expects deps at repo root `node_modules/`.
+2. **Create or update `pnpm-workspace.yaml`** at the repo root. Move settings out of `.npmrc` using camelCase:
+   | `.npmrc` (ignored by pnpm 11)     | `pnpm-workspace.yaml`         |
+   | --------------------------------- | ----------------------------- |
+   | `shamefully-hoist=true`           | `shamefullyHoist: true`       |
+   | `public-hoist-pattern[]=…`        | `publicHoistPattern: [ "…" ]` |
+   | `strict-peer-dependencies`        | `strictPeerDependencies`      |
+   | `auto-install-peers`              | `autoInstallPeers`            |
+   | `package.json` `"pnpm".overrides` | top-level `overrides:`        |
+3. **Single-package repo** — include `packages: ['.']`. Reference: `pui-react-boilerplate/pnpm-workspace.yaml`.
+4. **Monorepo** — include `packages: ["libs/*", "apps/*"]`. Optional explicit `publicHoistPattern` for webpack alias targets: `esbuild-loader`, `@elliemae/*`, `styled-components`, `history`, `lodash`. Reference: `pui-microfe/pnpm-workspace.yaml`.
+5. **Migrate `allowBuilds`** — replace `onlyBuiltDependencies` / placeholder `allowBuilds` entries with `true` for packages that need postinstall scripts (`@swc/core`, `esbuild`, `nx`, etc.). Fix `ERR_PNPM_IGNORED_BUILDS`.
+6. **Trim `.npmrc`** — keep auth/registry only (for example `legacy-peer-deps=true`).
+7. **Clean reinstall and verify:**
+```bash
+rm -rf node_modules libs/*/node_modules   # if monorepo
+SKIP_POST_INSTALL_BUILD=1 pnpm install --no-frozen-lockfile
+grep publicHoistPattern node_modules/.modules.yaml   # must NOT be []
+pnpm run build
+```
+**Symptoms if skipped:** `Can't resolve 'esbuild-loader'` / `styled-components` / `@elliemae/pui-theme` during webpack; `publicHoistPattern: []` in `.modules.yaml`.
+See migration guide section **1b. Migrate pnpm hoisting to `pnpm-workspace.yaml`**.
 ### Phase 2 — Bump pui-cli
 ```bash
@@ -255,8 +292,36 @@ pnpm exec pui-cli lint
 See [pui-cli 9 migration guide](https://docs.pui.mortgagetech.q1.ice.com/cli/pui-cli-9-migration) — **Lerna 9 and Nx 22** section for the full `nx.json` template.
+### Phase 11 — Storybook 10 (out of CJS)
+Applies when the repo uses `pui-cli storybook`. Requires pui-cli 9 **and** a matching pui-app-sdk release.
+Install the dedicated skill for agents:
+```bash
+pnpm exec pui-cli skills install migrate-storybook-out-of-cjs --target all
+```
+Follow **`migrate-storybook-out-of-cjs`** for the full CJS → ESM playbook (`storybook/cjs/*` removed; use `.storybook/main.mjs` + `getStorybookConfig()`). Summary:
+1. Bump `@elliemae/pui-app-sdk` with `@elliemae/pui-cli@9`.
+2. Replace `.storybook/main.js` with `.storybook/main.mjs` importing `@elliemae/pui-app-sdk/storybook/main`.
+3. Delete `.storybook/middleware.js`; migrate `preview` / `manager` / `theme` to `.mjs` when customized.
+4. Update stories to CSF3 where types fail; remove SB6 webpack alias workarounds unless still required.
+Verify:
+```bash
+pnpm exec pui-cli storybook
+pnpm exec pui-cli storybook -b
+pnpm exec pui-cli lint
+```
+See [pui-cli 9 migration guide — Storybook 10](https://docs.pui.mortgagetech.q1.ice.com/cli/pui-cli-9-migration) for addon removals and troubleshooting.
 ### Phase 10 — Verify
+- [ ] `shamefullyHoist` in `pnpm-workspace.yaml` (not `.npmrc`); `publicHoistPattern` not `[]` in `.modules.yaml`
 - [ ] `pnpm exec pui-cli lint` — 0 errors
 - [ ] `pnpm exec pui-cli tscheck --files`
 - [ ] `pnpm test` (or `pui-cli vitest` if applicable)
@@ -267,21 +332,30 @@ See [pui-cli 9 migration guide](https://docs.pui.mortgagetech.q1.ice.com/cli/pui
 ## Common lint fixes after upgrade
-| Symptom                              | Fix                                                                                 |
-| ------------------------------------ | ----------------------------------------------------------------------------------- |
-| `import-x/no-unresolved`             | Use `import type` for type-only imports                                             |
-| `@typescript-eslint/no-explicit-any` | Type the value or add targeted override (warn) during transition                    |
-| `@typescript-eslint/no-unused-vars`  | Remove or prefix with `_`                                                           |
-| Stale `eslint-disable` comments      | Remove disables for rules no longer in config                                       |
-| Test/fixture files flagged           | Shared config includes `lib/**/tests/**` globs — ensure pui-cli 9.0.0+              |
-| `.d.ts` files                        | pui-cli turns off `no-explicit-any` for `**/*.d.ts`                                 |
-| Cannot find module `vite` in tscheck | Set `moduleResolution: "bundler"` or extend pui-cli 9 tsconfig                      |
-| Vitest `optimizer.web` unknown       | Rename to `test.deps.optimizer.client` (Vitest 4)                                   |
-| Coverage fails after upgrade         | Remove `@vitest/coverage-c8`; use `@vitest/coverage-v8@4`                           |
-| `release.config.cjs` extends fails   | Migrate to `release.config.mjs`; requires semantic-release 22+ (pui-cli 9 ships 25) |
-| `nx` fails after pui-cli 9 bump      | Migrate `nx.json` off `@nrwl/*`; use `targetDefaults` not `targetDependencies`      |
-| `lerna bootstrap` / `add` / `link`   | Removed in lerna 9 — use `pnpm` workspaces and `pnpm add --filter`                  |
-| Stale `@nrwl/workspace` in lockfile  | Remove direct `@nrwl/*` pins; rely on pui-cli's `nx` + `@nx/workspace`              |
+| Symptom                                                     | Fix                                                                                                                                                                |
+| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `import-x/no-unresolved`                                    | Use `import type` for type-only imports                                                                                                                            |
+| `@typescript-eslint/no-explicit-any`                        | Type the value or add targeted override (warn) during transition                                                                                                   |
+| `@typescript-eslint/no-unused-vars`                         | Remove or prefix with `_`                                                                                                                                          |
+| Stale `eslint-disable` comments                             | Remove disables for rules no longer in config                                                                                                                      |
+| Test/fixture files flagged                                  | Shared config includes `lib/**/tests/**` globs — ensure pui-cli 9.0.0+                                                                                             |
+| `.d.ts` files                                               | pui-cli turns off `no-explicit-any` for `**/*.d.ts`                                                                                                                |
+| Cannot find module `vite` in tscheck                        | Set `moduleResolution: "bundler"` or extend pui-cli 9 tsconfig                                                                                                     |
+| Vitest `optimizer.web` unknown                              | Rename to `test.deps.optimizer.client` (Vitest 4)                                                                                                                  |
+| Coverage fails after upgrade                                | Remove `@vitest/coverage-c8`; use `@vitest/coverage-v8@4`                                                                                                          |
+| `release.config.cjs` extends fails                          | Migrate to `release.config.mjs`; requires semantic-release 22+ (pui-cli 9 ships 25)                                                                                |
+| `nx` fails after pui-cli 9 bump                             | Migrate `nx.json` off `@nrwl/*`; use `targetDefaults` not `targetDependencies`                                                                                     |
+| `lerna bootstrap` / `add` / `link`                          | Removed in lerna 9 — use `pnpm` workspaces and `pnpm add --filter`                                                                                                 |
+| Stale `@nrwl/workspace` in lockfile                         | Remove direct `@nrwl/*` pins; rely on pui-cli's `nx` + `@nx/workspace`                                                                                             |
+| `Can't resolve 'esbuild-loader'`                            | Move `shamefullyHoist: true` to `pnpm-workspace.yaml`; clean reinstall                                                                                             |
+| `Can't resolve 'styled-components'` / `@elliemae/pui-theme` | Same — hoisting ignored if still only in `.npmrc`                                                                                                                  |
+| `publicHoistPattern: []` in `.modules.yaml`                 | Migrate hoist settings from `.npmrc` to `pnpm-workspace.yaml`                                                                                                      |
+| `ERR_PNPM_IGNORED_BUILDS`                                   | Set real `allowBuilds` in `pnpm-workspace.yaml` or run `pnpm approve-builds`                                                                                       |
+| `husky: command not found` on prepare                       | `shamefullyHoist` + `publicHoistPattern: [husky]` or direct root `devDependency`                                                                                   |
+| Storybook fails after pui-cli 9 bump                        | Migrate `.storybook/main.js` → `main.mjs`; import `@elliemae/pui-app-sdk/storybook/main`                                                                           |
+| `Failed to load native binding` / SWC errors                | Ensure pui-app-sdk resolves Babel compiler from pui-cli; rebuild app-sdk and reinstall workspace deps                                                              |
+| `middleware.js` ignored / API mocks missing                 | Delete middleware file; pui-cli Storybook dev server loads routes automatically                                                                                    |
+| Jest `TextEncoder is not defined`                           | Built into pui-cli `jestConfig` — remove repo `jest-textencoder-setup.cjs`; keep `delete moduleNameMapper['@elliemae/pui-diagnostics']` only if using real package |
 Full rule comparison: [eslint-rules-migration.md](https://docs.pui.mortgagetech.q1.ice.com/cli/eslint-rules-migration) (also at `docs/eslint-rules-migration.md` in pui-cli).
@@ -300,6 +374,7 @@ Skills are copied to `.cursor/skills/`, `.claude/skills/`, and `.github/skills/`
 - Application business logic — migration is tooling/config only
 - Webpack/babel production build config — pui-cli 9 does not migrate apps to Vite for bundling
 - Prettier / commitlint configs unless pui-cli 9 bumps those presets
+- **Org hoisting policy** — keep `shamefullyHoist: true`; do not remove hoisting or duplicate webpack deps in root `package.json` as a workaround
 ## Additional resources

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/pui-cli",
-  "version": "9.0.0-alpha.11",
+  "version": "9.0.0-alpha.12",
   "description": "ICE MT UI Platform CLI",
   "sideEffects": false,
   "main": "./dist/cjs/index.cjs",
@@ -20,6 +20,8 @@
       "default": "./lib/release.config.mjs"
     },
     "./storybook": {
+      "types": "./dist/types/lib/webpack/webpack.storybook.d.ts",
+      "import": "./dist/esm/webpack/webpack.storybook.js",
       "require": "./dist/cjs/webpack/webpack.storybook.js"
     },
     "./vitest": {
@@ -88,8 +90,8 @@
     "@babel/preset-react": "~7.29.7",
     "@babel/preset-typescript": "~7.29.7",
     "@babel/runtime": "~7.29.7",
-    "@commitlint/cli": "21.0.1",
-    "@commitlint/config-conventional": "21.0.1",
+    "@commitlint/cli": "21.0.2",
+    "@commitlint/config-conventional": "21.0.2",
     "@elliemae/browserslist-config-elliemae-latest-browsers": "~1.15.0",
     "@eslint/compat": "~2.1.0",
     "@eslint/js": "~10.0.1",
@@ -100,17 +102,11 @@
     "@semantic-release/changelog": "~6.0.3",
     "@semantic-release/exec": "~7.1.0",
     "@semantic-release/git": "~10.0.1",
-    "@storybook/addon-a11y": "~6.5.16",
-    "@storybook/addon-essentials": "~6.5.16",
-    "@storybook/addon-events": "~6.2.9",
-    "@storybook/addon-interactions": "~6.5.16",
-    "@storybook/addon-links": "~6.5.16",
-    "@storybook/addon-storysource": "~6.5.16",
-    "@storybook/builder-vite": "~0.4.2",
-    "@storybook/builder-webpack5": "~6.5.16",
-    "@storybook/manager-webpack5": "~6.5.16",
-    "@storybook/react": "~6.5.16",
-    "@storybook/theming": "~6.5.16",
+    "@storybook/addon-a11y": "~10.4.0",
+    "@storybook/addon-docs": "~10.4.0",
+    "@storybook/addon-webpack5-compiler-babel": "~4.0.1",
+    "@storybook/react-webpack5": "~10.4.0",
+    "storybook": "~10.4.0",
     "@svgr/webpack": "~7.0.0",
     "@swc/cli": "~0.8.1",
     "@swc/core": "1.15.40",
@@ -132,7 +128,7 @@
     "@types/lodash": "~4.17.24",
     "@types/minimist": "~1.2.5",
     "@types/moment-locales-webpack-plugin": "~1.2.6",
-    "@types/node": "~24.12.4",
+    "@types/node": "~24.13.1",
     "@types/normalize-path": "~3.0.2",
     "@types/postcss-preset-env": "~7.7.0",
     "@types/rimraf": "~3.0.2",
@@ -175,7 +171,7 @@
     "dotenv": "~17.4.2",
     "dotenv-webpack": "~8.1.1",
     "duplicate-package-checker-webpack-plugin": "~3.0.0",
-    "enhanced-resolve": "~5.22.1",
+    "enhanced-resolve": "~5.23.0",
     "esbuild": "~0.28.0",
     "esbuild-loader": "~3.2.0",
     "esbuild-plugin-svgr": "~1.1.0",
@@ -189,7 +185,7 @@
     "eslint-plugin-react": "~7.37.5",
     "eslint-plugin-react-hooks": "~7.1.1",
     "eslint-plugin-redux-saga": "~1.3.2",
-    "eslint-plugin-storybook": "~0.12.0",
+    "eslint-plugin-storybook": "~10.4.0",
     "eslint-plugin-testing-library": "~7.16.2",
     "eslint-plugin-wdio": "~9.27.2",
     "execa": "~9.6.1",
@@ -226,7 +222,7 @@
     "moment": "~2.30.1",
     "moment-locales-webpack-plugin": "~1.2.0",
     "msw": "~1.3.5",
-    "node-gyp": "~12.3.0",
+    "node-gyp": "~12.4.0",
     "node-plop": "~0.32.3",
     "nodemon": "~3.1.14",
     "normalize-path": "~3.0.0",
@@ -256,10 +252,8 @@
     "semantic-release": "~25.0.3",
     "slackify-markdown": "~4.5.0",
     "speed-measure-webpack-plugin": "~1.6.0",
-    "storybook-addon-turbo-build": "~1.1.0",
-    "storybook-react-router": "~1.0.8",
     "style-loader": "~3.3.4",
-    "stylelint": "~17.12.0",
+    "stylelint": "~17.13.0",
     "stylelint-config-recommended": "~18.0.0",
     "supertest": "~6.3.4",
     "swc-loader": "~0.2.7",

package/build/docs/assets/js/04ee7372.eaa386ed.js DELETED Viewed

@@ -1 +0,0 @@

- "use strict";(globalThis.webpackChunk_elliemae_pui_cli=globalThis.webpackChunk_elliemae_pui_cli||[]).push([[5908],{4391(e,n,i){i.r(n),i.d(n,{assets:()=>t,contentTitle:()=>d,default:()=>h,frontMatter:()=>c,metadata:()=>s,toc:()=>o});const s=JSON.parse('{"id":"usage-guide","title":"Usage Guide","description":"This guide provides detailed documentation for all available commands in @elliemae/pui-cli.","source":"@site/docs/usage-guide.md","sourceDirName":".","slug":"/usage-guide","permalink":"/cli/usage-guide","draft":false,"unlisted":false,"editUrl":"https://git.elliemae.io/platform-ui/pui-cli.git/docs/usage-guide.md","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Stylelint migration guide (pui-cli 8 \u2192 9 / Stylelint 17)","permalink":"/cli/stylelint-migration"}}');var l=i(6070),r=i(6607);const c={},d="Usage Guide",t={},o=[{value:"Table of Contents",id:"table-of-contents",level:2},{value:"Build Commands",id:"build-commands",level:2},{value:"<code>pui-cli build</code>",id:"pui-cli-build",level:3},{value:"<code>pui-cli buildCDN</code>",id:"pui-cli-buildcdn",level:3},{value:"<code>pui-cli pack</code>",id:"pui-cli-pack",level:3},{value:"Development Commands",id:"development-commands",level:2},{value:"<code>pui-cli start</code>",id:"pui-cli-start",level:3},{value:"<code>pui-cli storybook</code>",id:"pui-cli-storybook",level:3},{value:"Testing Commands",id:"testing-commands",level:2},{value:"<code>pui-cli test</code>",id:"pui-cli-test",level:3},{value:"<code>pui-cli vitest</code>",id:"pui-cli-vitest",level:3},{value:"Linting Commands",id:"linting-commands",level:2},{value:"<code>pui-cli lint</code>",id:"pui-cli-lint",level:3},{value:"<code>pui-cli tscheck</code>",id:"pui-cli-tscheck",level:3},{value:"Documentation Commands",id:"documentation-commands",level:2},{value:"<code>pui-cli gendoc</code>",id:"pui-cli-gendoc",level:3},{value:"Utility Commands",id:"utility-commands",level:2},{value:"<code>pui-cli version</code>",id:"pui-cli-version",level:3},{value:"<code>pui-cli codemod</code>",id:"pui-cli-codemod",level:3},{value:"<code>pui-cli skills</code>",id:"pui-cli-skills",level:3},{value:"Advanced Usage",id:"advanced-usage",level:2},{value:"Using pui-cli in npm scripts",id:"using-pui-cli-in-npm-scripts",level:3},{value:"CI/CD Integration",id:"cicd-integration",level:3},{value:"Using Exported Configurations",id:"using-exported-configurations",level:3},{value:"Configuration Priority",id:"configuration-priority",level:2},{value:"Best Practices",id:"best-practices",level:2},{value:"Development Workflow",id:"development-workflow",level:3},{value:"Library Development Workflow",id:"library-development-workflow",level:3},{value:"Performance Tips",id:"performance-tips",level:3},{value:"Framework Chunk Splitting",id:"framework-chunk-splitting",level:3},{value:"Troubleshooting",id:"troubleshooting",level:2},{value:"Build Issues",id:"build-issues",level:3},{value:"Test Issues",id:"test-issues",level:3},{value:"Linting Issues",id:"linting-issues",level:3},{value:"Additional Resources",id:"additional-resources",level:2},{value:"Need Help?",id:"need-help",level:2}];function a(e){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",hr:"hr",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,r.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.header,{children:(0,l.jsx)(n.h1,{id:"usage-guide",children:"Usage Guide"})}),"\n",(0,l.jsxs)(n.p,{children:["This guide provides detailed documentation for all available commands in ",(0,l.jsx)(n.code,{children:"@elliemae/pui-cli"}),"."]}),"\n",(0,l.jsx)(n.h2,{id:"table-of-contents",children:"Table of Contents"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"#build-commands",children:"Build Commands"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"#development-commands",children:"Development Commands"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"#testing-commands",children:"Testing Commands"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"#linting-commands",children:"Linting Commands"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"#documentation-commands",children:"Documentation Commands"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"#utility-commands",children:"Utility Commands"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"#framework-chunk-splitting",children:"Framework Chunk Splitting"})}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"build-commands",children:"Build Commands"}),"\n",(0,l.jsx)(n.h3,{id:"pui-cli-build",children:(0,l.jsx)(n.code,{children:"pui-cli build"})}),"\n",(0,l.jsx)(n.p,{children:"Builds your application for production."}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Usage:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pui-cli build [options]\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Options:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"-p, --prod"})," - Production build with optimizations"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Examples:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"# Build web application (development)\npui-cli build\n\n# Build web application (production)\npui-cli build -p\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Output:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Application builds go to ",(0,l.jsx)(n.code,{children:"build/"})," or ",(0,l.jsx)(n.code,{children:"dist/"})," directory"]}),"\n",(0,l.jsx)(n.li,{children:"Creates optimized bundles with code splitting"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"What it does:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Bundles code using Webpack"}),"\n",(0,l.jsx)(n.li,{children:"Minifies JavaScript and CSS"}),"\n",(0,l.jsx)(n.li,{children:"Generates source maps"}),"\n",(0,l.jsx)(n.li,{children:"Optimizes assets"}),"\n",(0,l.jsx)(n.li,{children:"Creates production-ready build"}),"\n",(0,l.jsx)(n.li,{children:"Applies tree shaking for smaller bundles"}),"\n"]}),"\n",(0,l.jsx)(n.hr,{}),"\n",(0,l.jsx)(n.h3,{id:"pui-cli-buildcdn",children:(0,l.jsx)(n.code,{children:"pui-cli buildCDN"})}),"\n",(0,l.jsx)(n.p,{children:"Builds the application for CDN deployment."}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Usage:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pui-cli buildCDN\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"What it does:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Creates CDN-optimized builds"}),"\n",(0,l.jsx)(n.li,{children:"Generates proper asset paths for CDN"}),"\n",(0,l.jsx)(n.li,{children:"Optimizes bundle splitting"}),"\n"]}),"\n",(0,l.jsx)(n.hr,{}),"\n",(0,l.jsx)(n.h3,{id:"pui-cli-pack",children:(0,l.jsx)(n.code,{children:"pui-cli pack"})}),"\n",(0,l.jsx)(n.p,{children:"Packages your library for distribution with multiple output formats."}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Usage:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pui-cli pack [options]\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Options:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"-p, --prod"})," - Production build with minification"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"-t, --target <target>"})," - Build target (default: browser, options: node, browser)"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Examples:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"# Build library (development)\npui-cli pack\n\n# Build library (production)\npui-cli pack -p\n\n# Build for Node.js target\npui-cli pack -p -t node\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Output:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Creates ",(0,l.jsx)(n.code,{children:"dist/"})," directory with:","\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"dist/esm/"})," - ES Module format"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"dist/cjs/"})," - CommonJS format"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"dist/types/"})," - TypeScript declarations"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"dist/umd/"})," - UMD format (browser)"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"What it does:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Builds library in multiple formats (ESM, CJS, UMD)"}),"\n",(0,l.jsx)(n.li,{children:"Generates TypeScript declaration files"}),"\n",(0,l.jsx)(n.li,{children:"Minifies code in production mode"}),"\n",(0,l.jsx)(n.li,{children:"Creates source maps"}),"\n",(0,l.jsx)(n.li,{children:"Validates package.json exports"}),"\n",(0,l.jsx)(n.li,{children:"Optimized for tree-shaking"}),"\n"]}),"\n",(0,l.jsx)(n.hr,{}),"\n",(0,l.jsx)(n.h2,{id:"development-commands",children:"Development Commands"}),"\n",(0,l.jsx)(n.h3,{id:"pui-cli-start",children:(0,l.jsx)(n.code,{children:"pui-cli start"})}),"\n",(0,l.jsx)(n.p,{children:"Starts the development server with hot module replacement."}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Usage:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pui-cli start [options]\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Options:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"-p, --prod"})," - Start in production mode"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--port <number>"})," - Specify port (default: 3000)"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--open"})," - Automatically open browser"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--hot"})," - Enable hot module replacement (default: true)"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Examples:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"# Start on default port (development)\npui-cli start\n\n# Start in production mode\npui-cli start -p\n# or\npnpm start:prod\n\n# Start on custom port\npui-cli start --port 8080\n\n# Start and open browser\npui-cli start --open\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"What it does:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Starts Webpack dev server"}),"\n",(0,l.jsx)(n.li,{children:"Enables hot module replacement"}),"\n",(0,l.jsx)(n.li,{children:"Serves static files"}),"\n",(0,l.jsx)(n.li,{children:"Provides mock API endpoints"}),"\n",(0,l.jsx)(n.li,{children:"Auto-reloads on file changes"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Environment Variables:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-env",children:"PORT=3000\nHOST=localhost\nHTTPS=false\n"})}),"\n",(0,l.jsx)(n.hr,{}),"\n",(0,l.jsx)(n.h3,{id:"pui-cli-storybook",children:(0,l.jsx)(n.code,{children:"pui-cli storybook"})}),"\n",(0,l.jsx)(n.p,{children:"Runs Storybook for component development and documentation."}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Usage:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pui-cli storybook [options]\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Options:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"-b, --build"})," - Build static storybook"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--docs"})," - Run in documentation mode"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--port <number>"})," - Specify port (default: 6006)"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Examples:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"# Start Storybook dev server\npui-cli storybook\n\n# Start with documentation mode\npui-cli storybook --docs\n\n# Build static Storybook\npui-cli storybook -b\n\n# Build with documentation mode\npui-cli storybook -b --docs\n\n# Run on custom port\npui-cli storybook --port 9000\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"What it does:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Starts Storybook development server"}),"\n",(0,l.jsx)(n.li,{children:"Provides interactive component playground"}),"\n",(0,l.jsx)(n.li,{children:"Generates component documentation"}),"\n",(0,l.jsx)(n.li,{children:"Useful for library development"}),"\n"]}),"\n",(0,l.jsx)(n.hr,{}),"\n",(0,l.jsx)(n.h2,{id:"testing-commands",children:"Testing Commands"}),"\n",(0,l.jsx)(n.h3,{id:"pui-cli-test",children:(0,l.jsx)(n.code,{children:"pui-cli test"})}),"\n",(0,l.jsx)(n.p,{children:"Runs Jest tests with coverage reporting."}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Usage:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pui-cli test [options]\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Options:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"-f, --fix"})," - Update snapshots (",(0,l.jsx)(n.code,{children:"-u"}),")"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"-p, --prod"})," - Run tests in production mode"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--watch"})," - Run tests in watch mode"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--debug"})," - Run tests in debug mode"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--coverage"})," - Generate coverage reports (default: true)"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--passWithNoTests"})," - Don't fail if no tests found"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--bail"})," - Stop on first test failure"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--findRelatedTests"})," - Run tests related to changed files"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Examples:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"# Run all tests with coverage\npui-cli test\n\n# Run tests in production mode\npui-cli test -p\n\n# Run in watch mode\npnpm test:watch\n\n# Update snapshots\npui-cli test -f\n# or\npnpm test:fix\n\n# Debug tests\npui-cli test --debug\n# or\npnpm test:debug\n\n# Run only tests related to changed files (useful for pre-commit)\npui-cli test --coverage --passWithNoTests --bail --findRelatedTests\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"What it does:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Executes Jest test runner"}),"\n",(0,l.jsxs)(n.li,{children:["Generates coverage reports in ",(0,l.jsx)(n.code,{children:"reports/"})," directory"]}),"\n",(0,l.jsx)(n.li,{children:"Supports React Testing Library"}),"\n",(0,l.jsx)(n.li,{children:"Provides snapshot testing"}),"\n",(0,l.jsx)(n.li,{children:"Generates HTML coverage reports"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Coverage Reports:"})}),"\n",(0,l.jsx)(n.p,{children:"After running tests, view coverage at:"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"reports/index.html"})," - Overall coverage report"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"reports/lcov-report/index.html"})," - Detailed line coverage"]}),"\n"]}),"\n",(0,l.jsx)(n.hr,{}),"\n",(0,l.jsx)(n.h3,{id:"pui-cli-vitest",children:(0,l.jsx)(n.code,{children:"pui-cli vitest"})}),"\n",(0,l.jsx)(n.p,{children:"Runs Vitest for modern, fast testing."}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Usage:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pui-cli vitest [options]\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Options:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--watch"})," - Run in watch mode"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--ui"})," - Open Vitest UI"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--coverage"})," - Generate coverage"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Examples:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"# Run tests\npui-cli vitest\n\n# Run with UI\npui-cli vitest --ui\n\n# Run in watch mode\npui-cli vitest --watch\n\n# Generate coverage\npui-cli vitest --coverage\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"What it does:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Provides fast test execution with Vite"}),"\n",(0,l.jsx)(n.li,{children:"Supports ESM natively"}),"\n",(0,l.jsx)(n.li,{children:"Offers visual test UI"}),"\n",(0,l.jsx)(n.li,{children:"Compatible with Jest syntax"}),"\n"]}),"\n",(0,l.jsx)(n.hr,{}),"\n",(0,l.jsx)(n.h2,{id:"linting-commands",children:"Linting Commands"}),"\n",(0,l.jsx)(n.h3,{id:"pui-cli-lint",children:(0,l.jsx)(n.code,{children:"pui-cli lint"})}),"\n",(0,l.jsx)(n.p,{children:"Lints your codebase for code quality and style issues."}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Usage:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pui-cli lint [options]\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Options:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--fix"})," - Automatically fix linting issues"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--js"})," - Lint JavaScript/TypeScript files only"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--css"})," - Lint CSS/SCSS files only"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--commit"})," - Lint commit messages"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--debug"})," - Show detailed error messages"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Examples:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"# Lint all files\npui-cli lint\n\n# Auto-fix issues\npui-cli lint --fix\n\n# Lint only JavaScript files\npui-cli lint --js\n\n# Lint only CSS files\npui-cli lint --css\n\n# Lint commit messages\npui-cli lint --commit\n\n# Show debug information\npui-cli lint --debug\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"What it does:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Runs ESLint on JavaScript/TypeScript files"}),"\n",(0,l.jsx)(n.li,{children:"Runs Stylelint on CSS/SCSS files"}),"\n",(0,l.jsx)(n.li,{children:"Runs Commitlint on commit messages"}),"\n",(0,l.jsx)(n.li,{children:"Enforces code style consistency"}),"\n",(0,l.jsx)(n.li,{children:"Checks for common errors and anti-patterns"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Linting Rules:"})}),"\n",(0,l.jsx)(n.p,{children:"The CLI provides pre-configured rules for:"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"ESLint"}),": React, TypeScript, Jest best practices"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Stylelint"}),": CSS best practices and conventions"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Commitlint"}),": Conventional Commits format"]}),"\n"]}),"\n",(0,l.jsx)(n.hr,{}),"\n",(0,l.jsx)(n.h3,{id:"pui-cli-tscheck",children:(0,l.jsx)(n.code,{children:"pui-cli tscheck"})}),"\n",(0,l.jsx)(n.p,{children:"Type-checks TypeScript files without emitting output."}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Usage:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pui-cli tscheck [options]\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Options:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--files"})," - Check specific files only"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--watch"})," - Watch mode for continuous type checking"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--debug"})," - Show detailed TypeScript errors"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Examples:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"# Check all types\npui-cli tscheck\n\n# Check with file listing\npui-cli tscheck --files\n\n# Watch for changes\npui-cli tscheck --watch\n\n# Show detailed errors\npui-cli tscheck --debug\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"What it does:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Runs TypeScript compiler in check mode"}),"\n",(0,l.jsx)(n.li,{children:"Reports type errors"}),"\n",(0,l.jsx)(n.li,{children:"Doesn't emit JavaScript files"}),"\n",(0,l.jsx)(n.li,{children:"Useful for CI/CD pipelines"}),"\n"]}),"\n",(0,l.jsx)(n.hr,{}),"\n",(0,l.jsx)(n.h2,{id:"documentation-commands",children:"Documentation Commands"}),"\n",(0,l.jsx)(n.h3,{id:"pui-cli-gendoc",children:(0,l.jsx)(n.code,{children:"pui-cli gendoc"})}),"\n",(0,l.jsx)(n.p,{children:"Generates API documentation from your code."}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Usage:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pui-cli gendoc\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"What it does:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Generates TypeDoc documentation"}),"\n",(0,l.jsx)(n.li,{children:"Extracts JSDoc comments"}),"\n",(0,l.jsx)(n.li,{children:"Creates HTML documentation"}),"\n",(0,l.jsxs)(n.li,{children:["Outputs to ",(0,l.jsx)(n.code,{children:"docs/api/"})," directory"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Example JSDoc comments:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-typescript",children:"/**\n * Adds two numbers together\n * @param a - First number\n * @param b - Second number\n * @returns The sum of a and b\n * @example\n * ```ts\n * add(2, 3) // returns 5\n * ```\n */\nexport function add(a: number, b: number): number {\n return a + b;\n}\n"})}),"\n",(0,l.jsx)(n.hr,{}),"\n",(0,l.jsx)(n.h2,{id:"utility-commands",children:"Utility Commands"}),"\n",(0,l.jsx)(n.h3,{id:"pui-cli-version",children:(0,l.jsx)(n.code,{children:"pui-cli version"})}),"\n",(0,l.jsx)(n.p,{children:"Manages versioning for monorepo workspaces."}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Usage:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pui-cli version [options]\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Options:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--set <version>"})," - Set specific version for all packages"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--workspace"})," - Update workspace package versions"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Examples:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"# Update versions in monorepo\npui-cli version --workspace\n\n# Set specific version\npui-cli version --set 2.0.0\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"What it does:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Updates package.json versions"}),"\n",(0,l.jsx)(n.li,{children:"Maintains version consistency in monorepos"}),"\n",(0,l.jsx)(n.li,{children:"Updates dependency versions"}),"\n"]}),"\n",(0,l.jsx)(n.hr,{}),"\n",(0,l.jsx)(n.h3,{id:"pui-cli-codemod",children:(0,l.jsx)(n.code,{children:"pui-cli codemod"})}),"\n",(0,l.jsx)(n.p,{children:"Runs code transformations using jscodeshift."}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Usage:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pui-cli codemod <transform>\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Arguments:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"<transform>"})," - Name of the transform to apply"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"What it does:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Applies automated code transformations"}),"\n",(0,l.jsx)(n.li,{children:"Useful for migrations"}),"\n",(0,l.jsx)(n.li,{children:"Batch code refactoring"}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"pui-cli-skills",children:(0,l.jsx)(n.code,{children:"pui-cli skills"})}),"\n",(0,l.jsxs)(n.p,{children:["Installs bundled agent skills from ",(0,l.jsx)(n.code,{children:"@elliemae/pui-cli"})," into the current repo."]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Usage:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pui-cli skills list\npui-cli skills install [name] [--target <target>] [--force]\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Options:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"--target"})," \u2014 ",(0,l.jsx)(n.code,{children:"cursor"})," (default), ",(0,l.jsx)(n.code,{children:"claude"}),", ",(0,l.jsx)(n.code,{children:"copilot"}),", or ",(0,l.jsx)(n.code,{children:"all"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"cursor"})," \u2192 ",(0,l.jsx)(n.code,{children:".cursor/skills/"})]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"claude"})," \u2192 ",(0,l.jsx)(n.code,{children:".claude/skills/"})]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"copilot"})," \u2192 ",(0,l.jsx)(n.code,{children:".github/skills/"})]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"all"})," \u2192 all three paths (recommended for mixed teams)"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Examples:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"# List bundled skills shipped with this pui-cli version\npnpm exec pui-cli skills list\n\n# Install for Cursor, Claude Code, and GitHub Copilot\npnpm exec pui-cli skills install migrate-to-pui-cli-9 --target all\n\n# Install for Cursor only (default)\npnpm exec pui-cli skills install migrate-to-pui-cli-9\n\n# Install for Claude Code only\npnpm exec pui-cli skills install migrate-to-pui-cli-9 --target claude\n\n# Overwrite an existing skill directory\npnpm exec pui-cli skills install migrate-to-pui-cli-9 --target all --force\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"What it does:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Copies ",(0,l.jsx)(n.code,{children:"lib/skills/<name>/"})," from the installed package into the target skill directories"]}),"\n",(0,l.jsxs)(n.li,{children:["Uses the shared Agent Skills ",(0,l.jsx)(n.code,{children:"SKILL.md"})," format (works across Cursor, Claude Code, and Copilot)"]}),"\n",(0,l.jsxs)(n.li,{children:["See ",(0,l.jsx)(n.a,{href:"/cli/pui-cli-9-migration",children:"pui-cli 9 migration guide"})," for the full upgrade path"]}),"\n"]}),"\n",(0,l.jsx)(n.hr,{}),"\n",(0,l.jsx)(n.h2,{id:"advanced-usage",children:"Advanced Usage"}),"\n",(0,l.jsx)(n.h3,{id:"using-pui-cli-in-npm-scripts",children:"Using pui-cli in npm scripts"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"package.json example:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-json",children:'{\n "scripts": {\n "dev": "pui-cli start",\n "build": "pui-cli build",\n "build:lib": "pui-cli build --service",\n "test": "pui-cli test --coverage",\n "test:watch": "pui-cli test --watch",\n "test:debug": "pui-cli test --debug",\n "lint": "pui-cli lint",\n "lint:fix": "pui-cli lint --fix",\n "lint:js": "pui-cli lint --js --fix",\n "lint:css": "pui-cli lint --css --fix",\n "typecheck": "pui-cli tscheck",\n "storybook": "pui-cli storybook",\n "storybook:build": "pui-cli storybook --build",\n "gendoc": "pui-cli gendoc",\n "pack": "pui-cli pack",\n "precommit": "lint-staged"\n }\n}\n'})}),"\n",(0,l.jsx)(n.h3,{id:"cicd-integration",children:"CI/CD Integration"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Jenkins example:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-groovy",children:"pipeline {\n agent any\n stages {\n stage('Install') {\n steps {\n sh 'pnpm install'\n }\n }\n stage('Lint') {\n steps {\n sh 'pnpm lint'\n }\n }\n stage('Type Check') {\n steps {\n sh 'pnpm tscheck'\n }\n }\n stage('Test') {\n steps {\n sh 'pnpm test'\n }\n }\n stage('Build') {\n steps {\n sh 'pnpm build'\n }\n }\n }\n}\n"})}),"\n",(0,l.jsx)(n.h3,{id:"using-exported-configurations",children:"Using Exported Configurations"}),"\n",(0,l.jsx)(n.p,{children:"You can import and extend the CLI's configurations in your own config files:"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"ESLint:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-javascript",children:"import { eslintConfig } from '@elliemae/pui-cli';\n\nexport default [\n ...eslintConfig,\n {\n rules: {\n // Your custom rules\n 'no-console': 'warn',\n },\n },\n];\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Prettier:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-javascript",children:"import { prettierConfig } from '@elliemae/pui-cli';\n\nexport default {\n ...prettierConfig,\n // Your custom overrides\n printWidth: 100,\n};\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Vitest:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-typescript",children:"import { defineConfig } from 'vitest/config';\nimport { vitestConfig } from '@elliemae/pui-cli/vitest';\n\nexport default defineConfig({\n ...vitestConfig,\n test: {\n ...vitestConfig.test,\n // Your custom test config\n },\n});\n"})}),"\n",(0,l.jsx)(n.h2,{id:"configuration-priority",children:"Configuration Priority"}),"\n",(0,l.jsx)(n.p,{children:"The CLI follows this priority order for configuration:"}),"\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsx)(n.li,{children:"Project-level configuration files"}),"\n",(0,l.jsx)(n.li,{children:"CLI's default configurations"}),"\n",(0,l.jsx)(n.li,{children:"Command-line arguments"}),"\n",(0,l.jsx)(n.li,{children:"Environment variables"}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,l.jsx)(n.h3,{id:"development-workflow",children:"Development Workflow"}),"\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Start development server:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pnpm start\n"})}),"\n"]}),"\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Run tests in watch mode (separate terminal):"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pnpm test --watch\n"})}),"\n"]}),"\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Type check (separate terminal):"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pnpm tscheck --watch\n"})}),"\n"]}),"\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Before committing:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pnpm lint:fix\npnpm test\npnpm typecheck\n"})}),"\n"]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"library-development-workflow",children:"Library Development Workflow"}),"\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Start Storybook:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pnpm storybook\n"})}),"\n"]}),"\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Run tests in watch mode:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pnpm test --watch\n"})}),"\n"]}),"\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Build library:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pnpm build --service\n"})}),"\n"]}),"\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Test package:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pnpm pack\n"})}),"\n"]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"performance-tips",children:"Performance Tips"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Use ",(0,l.jsx)(n.code,{children:"--findRelatedTests"})," to run only relevant tests"]}),"\n",(0,l.jsxs)(n.li,{children:["Enable ",(0,l.jsx)(n.code,{children:"--watch"})," mode during development"]}),"\n",(0,l.jsxs)(n.li,{children:["Use ",(0,l.jsx)(n.code,{children:"--silent"})," in CI to reduce output"]}),"\n",(0,l.jsxs)(n.li,{children:["Run ",(0,l.jsx)(n.code,{children:"lint --js"})," and ",(0,l.jsx)(n.code,{children:"lint --css"})," separately for faster feedback"]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"framework-chunk-splitting",children:"Framework Chunk Splitting"}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.code,{children:"pui-cli"})," supports an opt-in ",(0,l.jsx)(n.strong,{children:"framework chunk"})," that separates React core libraries into a dedicated bundle. Because the framework changes far less frequently than other vendor dependencies, this improves long-term browser caching and reduces the amount of JavaScript users re-download on routine releases."]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"How it works"})}),"\n",(0,l.jsx)(n.p,{children:"When enabled, the production (and dev) Webpack build creates three vendor-level chunks instead of two:"}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{children:"Chunk"}),(0,l.jsx)(n.th,{children:"Contents"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"emui.js"})}),(0,l.jsxs)(n.td,{children:[(0,l.jsx)(n.code,{children:"@elliemae/*"})," packages (design system, SDK, diagnostics, etc.)"]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"framework.js"})}),(0,l.jsxs)(n.td,{children:[(0,l.jsx)(n.code,{children:"react"}),", ",(0,l.jsx)(n.code,{children:"react-dom"}),", ",(0,l.jsx)(n.code,{children:"scheduler"}),", ",(0,l.jsx)(n.code,{children:"react-router"}),", ",(0,l.jsx)(n.code,{children:"react-router-dom"}),", ",(0,l.jsx)(n.code,{children:"history"}),", ",(0,l.jsx)(n.code,{children:"react-is"})]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"vendors.js"})}),(0,l.jsxs)(n.td,{children:["Everything else from ",(0,l.jsx)(n.code,{children:"node_modules"})]})]})]})]}),"\n",(0,l.jsxs)(n.p,{children:["Without the flag, the default two-chunk layout is preserved (",(0,l.jsx)(n.code,{children:"emui.js"})," + ",(0,l.jsx)(n.code,{children:"vendors.js"}),")."]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Enabling the flag"})}),"\n",(0,l.jsxs)(n.p,{children:["Add the following to your application's ",(0,l.jsx)(n.code,{children:".env"})," file:"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-env",children:"SPLIT_FRAMEWORK_CHUNK=true\n"})}),"\n",(0,l.jsxs)(n.p,{children:["The flag is read at build time. No changes to ",(0,l.jsx)(n.code,{children:"pui-cli"})," itself are needed."]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Required application updates"})}),"\n",(0,l.jsxs)(n.p,{children:["After enabling the flag you must update three places in your application to include ",(0,l.jsx)(n.code,{children:"framework.js"})," in the script loading order."]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsxs)(n.strong,{children:["1. ",(0,l.jsx)(n.code,{children:"index-app-loader.html"})]})}),"\n",(0,l.jsxs)(n.p,{children:["If your application uses ",(0,l.jsx)(n.code,{children:"pui-app-loader"}),", update the ",(0,l.jsx)(n.code,{children:"bodyScripts"})," array to include ",(0,l.jsx)(n.code,{children:"framework.js"})," ",(0,l.jsx)(n.strong,{children:"before"})," ",(0,l.jsx)(n.code,{children:"vendors.js"}),":"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-javascript",children:"emuiAppLoader.load({\n appId: 'loanapp',\n headScripts: [],\n bodyScripts: ['runtime~app.js', 'framework.js', 'vendors.js', 'emui.js', 'app.js'],\n styles: ['vendors.css', 'emui.css'],\n isJsModule: true,\n});\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsxs)(n.strong,{children:["2. ",(0,l.jsx)(n.code,{children:"app.config.json"})," \u2014 ",(0,l.jsx)(n.code,{children:"microFrontendApps"})," file lists"]})}),"\n",(0,l.jsxs)(n.p,{children:["Any microapp built with the framework chunk enabled must list ",(0,l.jsx)(n.code,{children:"framework.js"})," in its ",(0,l.jsx)(n.code,{children:"development.files"})," and ",(0,l.jsx)(n.code,{children:"production.files"})," arrays. The host app's ",(0,l.jsx)(n.code,{children:"app.config.json"})," must reflect this so that ",(0,l.jsx)(n.code,{children:"app-bridge"})," loads the scripts in the correct order."]}),"\n",(0,l.jsx)(n.p,{children:"Development example:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-json",children:'{\n "microFrontendApps": {\n "myapp": {\n "name": "My App",\n "hostUrl": "./myapp",\n "development": {\n "files": [\n "https://cdn.mortgagetech.q1.ice.com/pui-diagnostics@3",\n "https://cdn.mortgagetech.q1.ice.com/pui-logrocket@1",\n "js/global.js",\n "framework.js",\n "emui.js",\n "vendors.js",\n "app.js"\n ]\n }\n }\n }\n}\n'})}),"\n",(0,l.jsx)(n.p,{children:"Production example:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-json",children:'{\n "microFrontendApps": {\n "myapp": {\n "name": "My App",\n "hostUrl": "./myapp",\n "production": {\n "files": [\n "https://cdn.mortgagetech.q1.ice.com/pui-diagnostics@3",\n "https://cdn.mortgagetech.q1.ice.com/pui-logrocket@1",\n "js/global.js",\n "runtime~app.js",\n "framework.js",\n "emui.js",\n "vendors.js",\n "app.js",\n "emui.css",\n "vendors.css"\n ]\n }\n }\n }\n}\n'})}),"\n",(0,l.jsxs)(n.blockquote,{children:["\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.strong,{children:"Load order matters."})," ",(0,l.jsx)(n.code,{children:"framework.js"})," must appear before ",(0,l.jsx)(n.code,{children:"vendors.js"})," and ",(0,l.jsx)(n.code,{children:"emui.js"})," because both depend on React."]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"3. Verify the build output"})}),"\n",(0,l.jsx)(n.p,{children:"After enabling the flag, run a production build and confirm the new chunk appears:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"pnpm build\nls build/latest/js/framework.*.js\n"})}),"\n",(0,l.jsxs)(n.p,{children:["You should see a hashed file like ",(0,l.jsx)(n.code,{children:"framework.abc123.js"})," alongside the existing ",(0,l.jsx)(n.code,{children:"emui"}),", ",(0,l.jsx)(n.code,{children:"vendors"}),", and ",(0,l.jsx)(n.code,{children:"app"})," chunks."]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Disabling the flag"})}),"\n",(0,l.jsxs)(n.p,{children:["Remove ",(0,l.jsx)(n.code,{children:"SPLIT_FRAMEWORK_CHUNK=true"})," from ",(0,l.jsx)(n.code,{children:".env"})," (or set it to ",(0,l.jsx)(n.code,{children:"false"}),"), then reverse the file-list changes above \u2014 remove ",(0,l.jsx)(n.code,{children:"framework.js"})," from ",(0,l.jsx)(n.code,{children:"index-app-loader.html"})," and ",(0,l.jsx)(n.code,{children:"app.config.json"}),". The build will revert to the default two-chunk layout."]}),"\n",(0,l.jsx)(n.h2,{id:"troubleshooting",children:"Troubleshooting"}),"\n",(0,l.jsx)(n.h3,{id:"build-issues",children:"Build Issues"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Error: Module not found"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"# Clear cache and rebuild\nrm -rf node_modules dist\npnpm install\npnpm build\n"})}),"\n",(0,l.jsx)(n.h3,{id:"test-issues",children:"Test Issues"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Error: Tests timing out"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"# Increase timeout in jest.config\npui-cli test --debug\n"})}),"\n",(0,l.jsx)(n.h3,{id:"linting-issues",children:"Linting Issues"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Error: Too many linting errors"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"# Fix automatically\npnpm lint --fix\n\n# Fix only JS\npnpm lint --js --fix\n\n# Fix only CSS\npnpm lint --css --fix\n"})}),"\n",(0,l.jsx)(n.h2,{id:"additional-resources",children:"Additional Resources"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"/cli/#getting-started",children:"Getting Started Guide"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"./api/",children:"API Documentation"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"https://git.elliemae.io/platform-ui/pui-cli#migration-guide",children:"Migration Guide"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"https://git.elliemae.io/platform-ui/pui-cli",children:"GitHub Repository"})}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"need-help",children:"Need Help?"}),"\n",(0,l.jsx)(n.p,{children:"If you encounter issues or have questions:"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Review the documentation"}),"\n",(0,l.jsx)(n.li,{children:"Contact the UI Platform team via ui-platform teams channel"}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(a,{...e})}):a(e)}},6607(e,n,i){i.d(n,{R:()=>c,x:()=>d});var s=i(758);const l={},r=s.createContext(l);function c(e){const n=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:c(e.components),s.createElement(r.Provider,{value:n},e.children)}}}]);