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

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 (279) hide show
  1. package/README.md +43 -0
  2. package/app.tsconfig.json +1 -1
  3. package/build/docs/404.html +16 -0
  4. package/build/docs/api/functions/loadRoutes/index.html +22 -0
  5. package/build/docs/api/index.html +22 -0
  6. package/build/docs/api/type-aliases/LIB_NAME/index.html +17 -0
  7. package/build/docs/api/variables/babelConfig/index.html +40 -0
  8. package/build/docs/api/variables/commitlintConfig/index.html +20 -0
  9. package/build/docs/api/variables/eslintBaseConfig/index.html +132 -0
  10. package/build/docs/api/variables/eslintConfig/index.html +180 -0
  11. package/build/docs/api/variables/eslintFlatBaseConfig/index.html +18 -0
  12. package/build/docs/api/variables/eslintFlatBaseConfigStrict/index.html +18 -0
  13. package/build/docs/api/variables/eslintFlatConfig/index.html +18 -0
  14. package/build/docs/api/variables/eslintFlatConfigStrict/index.html +18 -0
  15. package/build/docs/api/variables/jestConfig/index.html +98 -0
  16. package/build/docs/api/variables/jestNodeConfig/index.html +98 -0
  17. package/build/docs/api/variables/lintStagedConfig/index.html +24 -0
  18. package/build/docs/api/variables/prettierConfig/index.html +30 -0
  19. package/build/docs/api/variables/stylelintConfig/index.html +17 -0
  20. package/build/docs/api/variables/vitestConfig/index.html +17 -0
  21. package/build/docs/assets/css/styles.74603f39.css +1 -0
  22. package/build/docs/assets/js/04ee7372.eaa386ed.js +1 -0
  23. package/build/docs/assets/js/0551d4dd.ebb18f4f.js +1 -0
  24. package/build/docs/assets/js/0a1d0315.fc8f91a7.js +1 -0
  25. package/build/docs/assets/js/1126.fa547e9c.js +1 -0
  26. package/build/docs/assets/js/1127.f28430e6.js +1 -0
  27. package/build/docs/assets/js/1298.fb0939c9.js +1 -0
  28. package/build/docs/assets/js/13097d8d.af480dfd.js +1 -0
  29. package/build/docs/assets/js/1617.b2623271.js +1 -0
  30. package/build/docs/assets/js/16b7bc88.c3779e27.js +1 -0
  31. package/build/docs/assets/js/1700.4f7a9007.js +1 -0
  32. package/build/docs/assets/js/17896441.84339068.js +1 -0
  33. package/build/docs/assets/js/1b9df811.aaa95da1.js +1 -0
  34. package/build/docs/assets/js/213.e69351b3.js +1 -0
  35. package/build/docs/assets/js/2297.e63290f4.js +1 -0
  36. package/build/docs/assets/js/232a0286.33b2782b.js +1 -0
  37. package/build/docs/assets/js/2399.cc5803e0.js +1 -0
  38. package/build/docs/assets/js/242.73516ab6.js +1 -0
  39. package/build/docs/assets/js/247.e1522e52.js +1 -0
  40. package/build/docs/assets/js/2673.da75a556.js +1 -0
  41. package/build/docs/assets/js/2805.f0505f8c.js +1 -0
  42. package/build/docs/assets/js/3395.eb3dad5b.js +1 -0
  43. package/build/docs/assets/js/3499.2d5c6821.js +1 -0
  44. package/build/docs/assets/js/3552.9272c0d9.js +1 -0
  45. package/build/docs/assets/js/3720.8e7f36d4.js +2 -0
  46. package/build/docs/assets/js/3720.8e7f36d4.js.LICENSE.txt +9 -0
  47. package/build/docs/assets/js/37d86055.47211796.js +1 -0
  48. package/build/docs/assets/js/3992.0ac29b2f.js +2 -0
  49. package/build/docs/assets/js/3992.0ac29b2f.js.LICENSE.txt +1 -0
  50. package/build/docs/assets/js/4069.301f1115.js +1 -0
  51. package/build/docs/assets/js/4134.553b3645.js +1 -0
  52. package/build/docs/assets/js/4257.9afce6ac.js +1 -0
  53. package/build/docs/assets/js/4772.6294b364.js +1 -0
  54. package/build/docs/assets/js/4884.9dbe23e5.js +1 -0
  55. package/build/docs/assets/js/4fb6949f.369cc1b9.js +1 -0
  56. package/build/docs/assets/js/5196.98f7e06a.js +1 -0
  57. package/build/docs/assets/js/5248.ee436cea.js +1 -0
  58. package/build/docs/assets/js/5428.71752e9a.js +1 -0
  59. package/build/docs/assets/js/5964.0728ed91.js +1 -0
  60. package/build/docs/assets/js/5968.5f4ccba7.js +1 -0
  61. package/build/docs/assets/js/5befad71.5f19afb5.js +1 -0
  62. package/build/docs/assets/js/5d5f1db0.c5aa5afa.js +1 -0
  63. package/build/docs/assets/js/5e8c322a.ef3b894b.js +1 -0
  64. package/build/docs/assets/js/5e95c892.f550b901.js +1 -0
  65. package/build/docs/assets/js/5fb3c522.da5628e8.js +1 -0
  66. package/build/docs/assets/js/6486.68ae0007.js +1 -0
  67. package/build/docs/assets/js/6704.2615a5c6.js +1 -0
  68. package/build/docs/assets/js/6bd11e52.08b95209.js +1 -0
  69. package/build/docs/assets/js/6e96545e.30c1b801.js +1 -0
  70. package/build/docs/assets/js/7080.efd5ba6c.js +1 -0
  71. package/build/docs/assets/js/71f6d02b.cfd98385.js +1 -0
  72. package/build/docs/assets/js/7201.e90ba636.js +1 -0
  73. package/build/docs/assets/js/7344.95656e38.js +1 -0
  74. package/build/docs/assets/js/7516.b6668d60.js +1 -0
  75. package/build/docs/assets/js/7525.a8d0db87.js +1 -0
  76. package/build/docs/assets/js/7540.7a4353cf.js +1 -0
  77. package/build/docs/assets/js/7985.8c6943d6.js +1 -0
  78. package/build/docs/assets/js/8049.8ba75278.js +1 -0
  79. package/build/docs/assets/js/80e87108.f9507b95.js +1 -0
  80. package/build/docs/assets/js/8152.f2bebb2f.js +1 -0
  81. package/build/docs/assets/js/821.8d4e2a80.js +1 -0
  82. package/build/docs/assets/js/8290.a4f7a2ca.js +1 -0
  83. package/build/docs/assets/js/8355.864847a1.js +1 -0
  84. package/build/docs/assets/js/8389.26a9caca.js +1 -0
  85. package/build/docs/assets/js/8585.3cb09ff7.js +1 -0
  86. package/build/docs/assets/js/8788.03856709.js +1 -0
  87. package/build/docs/assets/js/9178.50ac2954.js +1 -0
  88. package/build/docs/assets/js/9210.1ac21da8.js +1 -0
  89. package/build/docs/assets/js/9354.37ad86f9.js +1 -0
  90. package/build/docs/assets/js/936.c151b43f.js +1 -0
  91. package/build/docs/assets/js/9574.b172d607.js +1 -0
  92. package/build/docs/assets/js/97.70eddfb5.js +1 -0
  93. package/build/docs/assets/js/9852.f77caf52.js +1 -0
  94. package/build/docs/assets/js/9953.f6278635.js +1 -0
  95. package/build/docs/assets/js/a7bd4aaa.30ffad02.js +1 -0
  96. package/build/docs/assets/js/a94703ab.f1796514.js +1 -0
  97. package/build/docs/assets/js/aba21aa0.3bbcf0cc.js +1 -0
  98. package/build/docs/assets/js/b7b585d8.6d53e73f.js +1 -0
  99. package/build/docs/assets/js/b8ac1d98.62684003.js +1 -0
  100. package/build/docs/assets/js/bde5209a.f5bca8b2.js +1 -0
  101. package/build/docs/assets/js/c377a04b.0f8625c6.js +1 -0
  102. package/build/docs/assets/js/dfd75424.51c4e2cb.js +1 -0
  103. package/build/docs/assets/js/e5f79924.c793a74d.js +1 -0
  104. package/build/docs/assets/js/f736c962.dbd0d004.js +1 -0
  105. package/build/docs/assets/js/main.7f815b7e.js +2 -0
  106. package/build/docs/assets/js/main.7f815b7e.js.LICENSE.txt +51 -0
  107. package/build/docs/assets/js/runtime~main.f7c5bef0.js +1 -0
  108. package/build/docs/eslint-rules-migration/index.html +135 -0
  109. package/build/docs/img/favicon.ico +0 -0
  110. package/build/docs/img/logo.jpeg +0 -0
  111. package/build/docs/img/logo.svg +22 -0
  112. package/build/docs/img/readme.md +1 -0
  113. package/build/docs/index.html +179 -0
  114. package/build/docs/pui-cli-9-migration/index.html +180 -0
  115. package/build/docs/readme.md +1 -0
  116. package/build/docs/sitemap.xml +1 -0
  117. package/build/docs/ssl-certificate-setup/index.html +284 -0
  118. package/build/docs/stylelint-migration/index.html +57 -0
  119. package/build/docs/usage-guide/index.html +439 -0
  120. package/dist/cjs/cli.js +3 -13
  121. package/dist/cjs/commands/build.js +1 -2
  122. package/dist/cjs/commands/buildcdn.js +1 -2
  123. package/dist/cjs/commands/codemod.js +1 -12
  124. package/dist/cjs/commands/gendoc.js +1 -2
  125. package/dist/cjs/commands/lint.js +11 -9
  126. package/dist/cjs/commands/pack.js +1 -2
  127. package/dist/cjs/commands/skills.js +206 -0
  128. package/dist/cjs/commands/start.js +1 -2
  129. package/dist/cjs/commands/storybook.js +1 -12
  130. package/dist/cjs/commands/test.js +1 -13
  131. package/dist/cjs/commands/tscheck.js +1 -2
  132. package/dist/cjs/commands/utils.js +16 -12
  133. package/dist/cjs/commands/version.js +1 -12
  134. package/dist/cjs/commands/vitest.js +1 -13
  135. package/dist/cjs/index.cjs +13 -1
  136. package/dist/cjs/index.js +8 -2
  137. package/dist/cjs/lint-config/eslint/common.cjs +1 -1
  138. package/dist/cjs/lint-config/eslint/flat/common.mjs +169 -0
  139. package/dist/cjs/lint-config/eslint/flat/compat.mjs +27 -0
  140. package/dist/cjs/lint-config/eslint/flat/index.mjs +21 -0
  141. package/dist/cjs/lint-config/eslint/flat/non-react-export.mjs +10 -0
  142. package/dist/cjs/lint-config/eslint/flat/non-react.mjs +6 -0
  143. package/dist/cjs/lint-config/eslint/flat/presets.mjs +96 -0
  144. package/dist/cjs/lint-config/eslint/flat/react-export.mjs +7 -0
  145. package/dist/cjs/lint-config/eslint/flat/react.mjs +59 -0
  146. package/dist/cjs/lint-config/eslint/flat/rules.mjs +185 -0
  147. package/dist/cjs/lint-config/eslint/typescript/non-react.cjs +1 -1
  148. package/dist/cjs/lint-config/eslint/typescript/react.cjs +1 -1
  149. package/dist/cjs/lint-config/stylelint/config.mjs +27 -0
  150. package/dist/cjs/lint-config/stylelint/export.mjs +1 -0
  151. package/dist/cjs/lint-config/stylelint.config.cjs +3 -19
  152. package/dist/cjs/monorepo/utils.cjs +16 -8
  153. package/dist/cjs/monorepo/utils.js +5 -8
  154. package/dist/cjs/{release.config.cjs → release.config.mjs} +3 -2
  155. package/dist/cjs/{semantic-release-plugin.cjs → semantic-release-plugin.mjs} +3 -3
  156. package/dist/cjs/skills/migrate-to-pui-cli-9/SKILL.md +309 -0
  157. package/dist/cjs/testing/jest.config.cjs +4 -4
  158. package/dist/cjs/testing/resolver.cjs +1 -1
  159. package/dist/cjs/testing/setup-react-env.js +1 -1
  160. package/dist/cjs/testing/vitest.config.js +2 -1
  161. package/dist/cjs/transpile/esbuild.js +1 -1
  162. package/dist/cjs/webpack/csp-plugin.js +2 -4
  163. package/dist/cjs/webpack/prop-types-shim.js +0 -1
  164. package/dist/cjs/webpack/webpack.lib.base.babel.js +0 -8
  165. package/dist/esm/cli.js +3 -13
  166. package/dist/esm/commands/build.js +1 -2
  167. package/dist/esm/commands/buildcdn.js +1 -2
  168. package/dist/esm/commands/codemod.js +1 -2
  169. package/dist/esm/commands/gendoc.js +1 -2
  170. package/dist/esm/commands/lint.js +11 -9
  171. package/dist/esm/commands/pack.js +1 -2
  172. package/dist/esm/commands/skills.js +175 -0
  173. package/dist/esm/commands/start.js +1 -2
  174. package/dist/esm/commands/storybook.js +1 -2
  175. package/dist/esm/commands/test.js +1 -3
  176. package/dist/esm/commands/tscheck.js +1 -2
  177. package/dist/esm/commands/utils.js +17 -13
  178. package/dist/esm/commands/version.js +1 -2
  179. package/dist/esm/commands/vitest.js +1 -3
  180. package/dist/esm/index.cjs +13 -1
  181. package/dist/esm/index.js +13 -1
  182. package/dist/esm/lint-config/eslint/common.cjs +1 -1
  183. package/dist/esm/lint-config/eslint/flat/common.mjs +169 -0
  184. package/dist/esm/lint-config/eslint/flat/compat.mjs +27 -0
  185. package/dist/esm/lint-config/eslint/flat/index.mjs +21 -0
  186. package/dist/esm/lint-config/eslint/flat/non-react-export.mjs +10 -0
  187. package/dist/esm/lint-config/eslint/flat/non-react.mjs +6 -0
  188. package/dist/esm/lint-config/eslint/flat/presets.mjs +96 -0
  189. package/dist/esm/lint-config/eslint/flat/react-export.mjs +7 -0
  190. package/dist/esm/lint-config/eslint/flat/react.mjs +59 -0
  191. package/dist/esm/lint-config/eslint/flat/rules.mjs +185 -0
  192. package/dist/esm/lint-config/eslint/typescript/non-react.cjs +1 -1
  193. package/dist/esm/lint-config/eslint/typescript/react.cjs +1 -1
  194. package/dist/esm/lint-config/stylelint/config.mjs +27 -0
  195. package/dist/esm/lint-config/stylelint/export.mjs +1 -0
  196. package/dist/esm/lint-config/stylelint.config.cjs +3 -19
  197. package/dist/esm/monorepo/utils.cjs +16 -8
  198. package/dist/esm/monorepo/utils.js +5 -8
  199. package/dist/esm/{release.config.cjs → release.config.mjs} +3 -2
  200. package/dist/esm/{semantic-release-plugin.cjs → semantic-release-plugin.mjs} +3 -3
  201. package/dist/esm/skills/migrate-to-pui-cli-9/SKILL.md +309 -0
  202. package/dist/esm/testing/jest.config.cjs +4 -4
  203. package/dist/esm/testing/resolver.cjs +1 -1
  204. package/dist/esm/testing/setup-react-env.js +1 -1
  205. package/dist/esm/testing/vitest.config.js +2 -1
  206. package/dist/esm/transpile/esbuild.js +1 -1
  207. package/dist/esm/webpack/csp-plugin.js +2 -4
  208. package/dist/esm/webpack/prop-types-shim.js +0 -1
  209. package/dist/esm/webpack/webpack.lib.base.babel.js +0 -8
  210. package/dist/types/lib/commands/build.d.ts +1 -1
  211. package/dist/types/lib/commands/buildcdn.d.ts +1 -1
  212. package/dist/types/lib/commands/codemod.d.ts +1 -1
  213. package/dist/types/lib/commands/gendoc.d.ts +1 -1
  214. package/dist/types/lib/commands/lint.d.ts +1 -1
  215. package/dist/types/lib/commands/pack.d.ts +1 -1
  216. package/dist/types/lib/commands/skills.d.ts +11 -0
  217. package/dist/types/lib/commands/start.d.ts +1 -1
  218. package/dist/types/lib/commands/storybook.d.ts +1 -1
  219. package/dist/types/lib/commands/test.d.ts +1 -1
  220. package/dist/types/lib/commands/tscheck.d.ts +1 -1
  221. package/dist/types/lib/commands/utils.d.ts +43 -2
  222. package/dist/types/lib/commands/version.d.ts +1 -1
  223. package/dist/types/lib/commands/vitest.d.ts +1 -1
  224. package/dist/types/lib/index.d.cts +6 -2
  225. package/dist/types/lib/index.d.ts +5 -1
  226. package/dist/types/lib/lint-config/eslint/flat/common.d.mts +6 -0
  227. package/dist/types/lib/lint-config/eslint/flat/compat.d.mts +9 -0
  228. package/dist/types/lib/lint-config/eslint/flat/index.d.mts +6 -0
  229. package/dist/types/lib/lint-config/eslint/flat/non-react-export.d.mts +4 -0
  230. package/dist/types/lib/lint-config/eslint/flat/non-react.d.mts +3 -0
  231. package/dist/types/lib/lint-config/eslint/flat/presets.d.mts +34 -0
  232. package/dist/types/lib/lint-config/eslint/flat/react-export.d.mts +4 -0
  233. package/dist/types/lib/lint-config/eslint/flat/react.d.mts +4 -0
  234. package/dist/types/lib/lint-config/eslint/flat/rules.d.mts +361 -0
  235. package/dist/types/lib/lint-config/stylelint/config.d.mts +3 -0
  236. package/dist/types/lib/lint-config/stylelint/export.d.mts +1 -0
  237. package/dist/types/lib/lint-config/stylelint.config.d.cts +2 -10
  238. package/dist/types/lib/release.config.d.mts +10 -0
  239. package/dist/types/lib/semantic-release-plugin.d.mts +4 -0
  240. package/dist/types/lib/server/appRoutes.d.ts +1 -1
  241. package/dist/types/lib/server/csp.d.ts +1 -1
  242. package/dist/types/lib/server/middlewares.d.ts +1 -1
  243. package/dist/types/lib/webpack/csp-plugin.d.ts +3 -3
  244. package/dist/types/lib/webpack/helpers.d.ts +1 -1
  245. package/dist/types/lib/webpack/interceptor-middleware.d.ts +2 -2
  246. package/dist/types/lib/webpack/webpack.base.babel.d.ts +1 -1
  247. package/dist/types/lib/webpack/webpack.lib.base.babel.d.ts +1 -1
  248. package/dist/types/lib/webpack/webpack.lib.prod.babel.d.ts +1 -1
  249. package/dist/types/lib/webpack/webpack.prod.babel.d.ts +1 -1
  250. package/dist/types/lib/webpack/webpack.storybook.d.ts +1 -1
  251. package/dist/types/tsconfig.tsbuildinfo +1 -1
  252. package/lib/lint-config/commitlint.config.cjs +1 -0
  253. package/lib/lint-config/eslint/common.cjs +164 -0
  254. package/lib/lint-config/eslint/flat/common.mjs +169 -0
  255. package/lib/lint-config/eslint/flat/compat.mjs +27 -0
  256. package/lib/lint-config/eslint/flat/index.mjs +21 -0
  257. package/lib/lint-config/eslint/flat/non-react-export.mjs +10 -0
  258. package/lib/lint-config/eslint/flat/non-react.mjs +6 -0
  259. package/lib/lint-config/eslint/flat/presets.mjs +96 -0
  260. package/lib/lint-config/eslint/flat/react-export.mjs +7 -0
  261. package/lib/lint-config/eslint/flat/react.mjs +59 -0
  262. package/lib/lint-config/eslint/flat/rules.mjs +185 -0
  263. package/lib/lint-config/eslint/non-react.cjs +14 -0
  264. package/lib/lint-config/eslint/react.cjs +26 -0
  265. package/lib/lint-config/eslint/typescript/common.cjs +49 -0
  266. package/lib/lint-config/eslint/typescript/non-react.cjs +12 -0
  267. package/lib/lint-config/eslint/typescript/react.cjs +19 -0
  268. package/lib/lint-config/lint-staged.config.js +15 -0
  269. package/lib/lint-config/prettier.config.cjs +8 -0
  270. package/lib/lint-config/stylelint/config.mjs +27 -0
  271. package/lib/lint-config/stylelint/export.mjs +1 -0
  272. package/lib/lint-config/stylelint.config.cjs +3 -0
  273. package/lib/release.config.mjs +28 -0
  274. package/lib/semantic-release-plugin.mjs +30 -0
  275. package/lib/skills/migrate-to-pui-cli-9/SKILL.md +309 -0
  276. package/library.tsconfig.json +1 -1
  277. package/package.json +95 -90
  278. package/dist/types/lib/release.config.d.cts +0 -7
  279. package/dist/types/lib/semantic-release-plugin.d.cts +0 -1
package/build/docs/usage-guide/index.html ADDED
@@ -0,0 +1,439 @@
1
+ <!doctype html>
2
+ <html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-usage-guide" data-has-hydrated="false">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="generator" content="Docusaurus v3.10.1">
6
+ <title data-rh="true">Usage Guide | Cli</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/cli/usage-guide"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Usage Guide | Cli"><meta data-rh="true" name="description" content="This guide provides detailed documentation for all available commands in @elliemae/pui-cli."><meta data-rh="true" property="og:description" content="This guide provides detailed documentation for all available commands in @elliemae/pui-cli."><link data-rh="true" rel="icon" href="/cli/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/cli/usage-guide"><link data-rh="true" rel="alternate" href="https://pui.ice.com/cli/usage-guide" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/cli/usage-guide" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Usage Guide","item":"https://pui.ice.com/cli/usage-guide"}]}</script><link rel="stylesheet" href="/cli/assets/css/styles.74603f39.css">
7
+ <script src="/cli/assets/js/runtime~main.f7c5bef0.js" defer="defer"></script>
8
+ <script src="/cli/assets/js/main.7f815b7e.js" defer="defer"></script>
9
+ </head>
10
+ <body>
11
+ <svg style="display: none;"><defs>
12
+ <symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
13
+ </defs></svg>
14
+ <script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||"light"),document.documentElement.setAttribute("data-theme-choice",t||"light")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent__KB6" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/cli/"><div class="navbar__logo"><img src="/cli/img/logo.svg" alt="Cli" class="themedComponent__Gxr themedComponent--light_euW4"><img src="/cli/img/logo.svg" alt="Cli" class="themedComponent__Gxr themedComponent--dark_cG3D"></div><b class="navbar__title text--truncate">Cli</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/cli/">Getting Started</a><a class="navbar__item navbar__link" href="/cli/api">API</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://git.elliemae.io/platform-ui/pui-cli.git" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink__EWc"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_TGb8 colorModeToggle_zDjd"><button class="clean-btn toggleButton_pX7R toggleButtonDisabled_J9eq" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_aiXM lightToggleIcon_TXA8"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_aiXM darkToggleIcon_koy3"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_aiXM systemToggleIcon_nzkW"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer__iSk"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_KuT8"><div class="docsWrapper_VaWq"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_j5oK" type="button"></button><div class="docRoot_noFI"><aside class="theme-doc-sidebar-container docSidebarContainer_VgAC"><div class="sidebarViewport_KhCA"><div class="sidebar_kOfH"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_OmRr"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_jyam menu__link menu__link--sublist" href="/cli/api/"><span title="Cli API" class="categoryLinkLabel_sc1K">Cli API</span></a><button aria-label="Expand sidebar category &#x27;Cli API&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/cli/eslint-rules-migration"><span title="ESLint rules migration guide (legacy → ESLint 10 flat config)" class="linkLabel_gjq0">ESLint rules migration guide (legacy → ESLint 10 flat config)</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/cli/"><span title="PUI CLI Documentation" class="linkLabel_gjq0">PUI CLI Documentation</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/cli/pui-cli-9-migration"><span title="pui-cli 9 migration guide" class="linkLabel_gjq0">pui-cli 9 migration guide</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/cli/ssl-certificate-setup"><span title="Trust SSL Certificate Guide" class="linkLabel_gjq0">Trust SSL Certificate Guide</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/cli/stylelint-migration"><span title="Stylelint migration guide (pui-cli 8 → 9 / Stylelint 17)" class="linkLabel_gjq0">Stylelint migration guide (pui-cli 8 → 9 / Stylelint 17)</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/cli/usage-guide"><span title="Usage Guide" class="linkLabel_gjq0">Usage Guide</span></a></li></ul></nav></div></div></aside><main class="docMainContainer_QTZx"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_zFNv"><div class="docItemContainer_gTAZ"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_WbZx" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/cli/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_eRUI"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Usage Guide</span></li></ul></nav><div class="tocCollapsible_XRgF theme-doc-toc-mobile tocMobile_QmTN"><button type="button" class="clean-btn tocCollapsibleButton_wt2y">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Usage Guide</h1></header>
15
+ <p>This guide provides detailed documentation for all available commands in <code>@elliemae/pui-cli</code>.</p>
16
+ <h2 class="anchor anchorTargetStickyNavbar_jFbF" id="table-of-contents">Table of Contents<a href="#table-of-contents" class="hash-link" aria-label="Direct link to Table of Contents" title="Direct link to Table of Contents" translate="no">​</a></h2>
17
+ <ul>
18
+ <li class=""><a href="#build-commands" class="">Build Commands</a></li>
19
+ <li class=""><a href="#development-commands" class="">Development Commands</a></li>
20
+ <li class=""><a href="#testing-commands" class="">Testing Commands</a></li>
21
+ <li class=""><a href="#linting-commands" class="">Linting Commands</a></li>
22
+ <li class=""><a href="#documentation-commands" class="">Documentation Commands</a></li>
23
+ <li class=""><a href="#utility-commands" class="">Utility Commands</a></li>
24
+ <li class=""><a href="#framework-chunk-splitting" class="">Framework Chunk Splitting</a></li>
25
+ </ul>
26
+ <h2 class="anchor anchorTargetStickyNavbar_jFbF" id="build-commands">Build Commands<a href="#build-commands" class="hash-link" aria-label="Direct link to Build Commands" title="Direct link to Build Commands" translate="no">​</a></h2>
27
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="pui-cli-build"><code>pui-cli build</code><a href="#pui-cli-build" class="hash-link" aria-label="Direct link to pui-cli-build" title="Direct link to pui-cli-build" translate="no">​</a></h3>
28
+ <p>Builds your application for production.</p>
29
+ <p><strong>Usage:</strong></p>
30
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli build [options]</span><br></div></code></pre></div></div>
31
+ <p><strong>Options:</strong></p>
32
+ <ul>
33
+ <li class=""><code>-p, --prod</code> - Production build with optimizations</li>
34
+ </ul>
35
+ <p><strong>Examples:</strong></p>
36
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain"># Build web application (development)</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli build</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Build web application (production)</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli build -p</span><br></div></code></pre></div></div>
37
+ <p><strong>Output:</strong></p>
38
+ <ul>
39
+ <li class="">Application builds go to <code>build/</code> or <code>dist/</code> directory</li>
40
+ <li class="">Creates optimized bundles with code splitting</li>
41
+ </ul>
42
+ <p><strong>What it does:</strong></p>
43
+ <ul>
44
+ <li class="">Bundles code using Webpack</li>
45
+ <li class="">Minifies JavaScript and CSS</li>
46
+ <li class="">Generates source maps</li>
47
+ <li class="">Optimizes assets</li>
48
+ <li class="">Creates production-ready build</li>
49
+ <li class="">Applies tree shaking for smaller bundles</li>
50
+ </ul>
51
+ <hr>
52
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="pui-cli-buildcdn"><code>pui-cli buildCDN</code><a href="#pui-cli-buildcdn" class="hash-link" aria-label="Direct link to pui-cli-buildcdn" title="Direct link to pui-cli-buildcdn" translate="no">​</a></h3>
53
+ <p>Builds the application for CDN deployment.</p>
54
+ <p><strong>Usage:</strong></p>
55
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli buildCDN</span><br></div></code></pre></div></div>
56
+ <p><strong>What it does:</strong></p>
57
+ <ul>
58
+ <li class="">Creates CDN-optimized builds</li>
59
+ <li class="">Generates proper asset paths for CDN</li>
60
+ <li class="">Optimizes bundle splitting</li>
61
+ </ul>
62
+ <hr>
63
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="pui-cli-pack"><code>pui-cli pack</code><a href="#pui-cli-pack" class="hash-link" aria-label="Direct link to pui-cli-pack" title="Direct link to pui-cli-pack" translate="no">​</a></h3>
64
+ <p>Packages your library for distribution with multiple output formats.</p>
65
+ <p><strong>Usage:</strong></p>
66
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli pack [options]</span><br></div></code></pre></div></div>
67
+ <p><strong>Options:</strong></p>
68
+ <ul>
69
+ <li class=""><code>-p, --prod</code> - Production build with minification</li>
70
+ <li class=""><code>-t, --target &lt;target&gt;</code> - Build target (default: browser, options: node, browser)</li>
71
+ </ul>
72
+ <p><strong>Examples:</strong></p>
73
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain"># Build library (development)</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli pack</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Build library (production)</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli pack -p</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Build for Node.js target</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli pack -p -t node</span><br></div></code></pre></div></div>
74
+ <p><strong>Output:</strong></p>
75
+ <ul>
76
+ <li class="">Creates <code>dist/</code> directory with:<!-- -->
77
+ <ul>
78
+ <li class=""><code>dist/esm/</code> - ES Module format</li>
79
+ <li class=""><code>dist/cjs/</code> - CommonJS format</li>
80
+ <li class=""><code>dist/types/</code> - TypeScript declarations</li>
81
+ <li class=""><code>dist/umd/</code> - UMD format (browser)</li>
82
+ </ul>
83
+ </li>
84
+ </ul>
85
+ <p><strong>What it does:</strong></p>
86
+ <ul>
87
+ <li class="">Builds library in multiple formats (ESM, CJS, UMD)</li>
88
+ <li class="">Generates TypeScript declaration files</li>
89
+ <li class="">Minifies code in production mode</li>
90
+ <li class="">Creates source maps</li>
91
+ <li class="">Validates package.json exports</li>
92
+ <li class="">Optimized for tree-shaking</li>
93
+ </ul>
94
+ <hr>
95
+ <h2 class="anchor anchorTargetStickyNavbar_jFbF" id="development-commands">Development Commands<a href="#development-commands" class="hash-link" aria-label="Direct link to Development Commands" title="Direct link to Development Commands" translate="no">​</a></h2>
96
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="pui-cli-start"><code>pui-cli start</code><a href="#pui-cli-start" class="hash-link" aria-label="Direct link to pui-cli-start" title="Direct link to pui-cli-start" translate="no">​</a></h3>
97
+ <p>Starts the development server with hot module replacement.</p>
98
+ <p><strong>Usage:</strong></p>
99
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli start [options]</span><br></div></code></pre></div></div>
100
+ <p><strong>Options:</strong></p>
101
+ <ul>
102
+ <li class=""><code>-p, --prod</code> - Start in production mode</li>
103
+ <li class=""><code>--port &lt;number&gt;</code> - Specify port (default: 3000)</li>
104
+ <li class=""><code>--open</code> - Automatically open browser</li>
105
+ <li class=""><code>--hot</code> - Enable hot module replacement (default: true)</li>
106
+ </ul>
107
+ <p><strong>Examples:</strong></p>
108
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain"># Start on default port (development)</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli start</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Start in production mode</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli start -p</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># or</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm start:prod</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Start on custom port</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli start --port 8080</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Start and open browser</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli start --open</span><br></div></code></pre></div></div>
109
+ <p><strong>What it does:</strong></p>
110
+ <ul>
111
+ <li class="">Starts Webpack dev server</li>
112
+ <li class="">Enables hot module replacement</li>
113
+ <li class="">Serves static files</li>
114
+ <li class="">Provides mock API endpoints</li>
115
+ <li class="">Auto-reloads on file changes</li>
116
+ </ul>
117
+ <p><strong>Environment Variables:</strong></p>
118
+ <div class="language-env codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-env codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">PORT=3000</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">HOST=localhost</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">HTTPS=false</span><br></div></code></pre></div></div>
119
+ <hr>
120
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="pui-cli-storybook"><code>pui-cli storybook</code><a href="#pui-cli-storybook" class="hash-link" aria-label="Direct link to pui-cli-storybook" title="Direct link to pui-cli-storybook" translate="no">​</a></h3>
121
+ <p>Runs Storybook for component development and documentation.</p>
122
+ <p><strong>Usage:</strong></p>
123
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli storybook [options]</span><br></div></code></pre></div></div>
124
+ <p><strong>Options:</strong></p>
125
+ <ul>
126
+ <li class=""><code>-b, --build</code> - Build static storybook</li>
127
+ <li class=""><code>--docs</code> - Run in documentation mode</li>
128
+ <li class=""><code>--port &lt;number&gt;</code> - Specify port (default: 6006)</li>
129
+ </ul>
130
+ <p><strong>Examples:</strong></p>
131
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain"># Start Storybook dev server</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli storybook</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Start with documentation mode</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli storybook --docs</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Build static Storybook</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli storybook -b</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Build with documentation mode</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli storybook -b --docs</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Run on custom port</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli storybook --port 9000</span><br></div></code></pre></div></div>
132
+ <p><strong>What it does:</strong></p>
133
+ <ul>
134
+ <li class="">Starts Storybook development server</li>
135
+ <li class="">Provides interactive component playground</li>
136
+ <li class="">Generates component documentation</li>
137
+ <li class="">Useful for library development</li>
138
+ </ul>
139
+ <hr>
140
+ <h2 class="anchor anchorTargetStickyNavbar_jFbF" id="testing-commands">Testing Commands<a href="#testing-commands" class="hash-link" aria-label="Direct link to Testing Commands" title="Direct link to Testing Commands" translate="no">​</a></h2>
141
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="pui-cli-test"><code>pui-cli test</code><a href="#pui-cli-test" class="hash-link" aria-label="Direct link to pui-cli-test" title="Direct link to pui-cli-test" translate="no">​</a></h3>
142
+ <p>Runs Jest tests with coverage reporting.</p>
143
+ <p><strong>Usage:</strong></p>
144
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli test [options]</span><br></div></code></pre></div></div>
145
+ <p><strong>Options:</strong></p>
146
+ <ul>
147
+ <li class=""><code>-f, --fix</code> - Update snapshots (<code>-u</code>)</li>
148
+ <li class=""><code>-p, --prod</code> - Run tests in production mode</li>
149
+ <li class=""><code>--watch</code> - Run tests in watch mode</li>
150
+ <li class=""><code>--debug</code> - Run tests in debug mode</li>
151
+ <li class=""><code>--coverage</code> - Generate coverage reports (default: true)</li>
152
+ <li class=""><code>--passWithNoTests</code> - Don&#x27;t fail if no tests found</li>
153
+ <li class=""><code>--bail</code> - Stop on first test failure</li>
154
+ <li class=""><code>--findRelatedTests</code> - Run tests related to changed files</li>
155
+ </ul>
156
+ <p><strong>Examples:</strong></p>
157
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain"># Run all tests with coverage</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli test</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Run tests in production mode</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli test -p</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Run in watch mode</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm test:watch</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Update snapshots</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli test -f</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># or</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm test:fix</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Debug tests</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli test --debug</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># or</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm test:debug</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Run only tests related to changed files (useful for pre-commit)</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli test --coverage --passWithNoTests --bail --findRelatedTests</span><br></div></code></pre></div></div>
158
+ <p><strong>What it does:</strong></p>
159
+ <ul>
160
+ <li class="">Executes Jest test runner</li>
161
+ <li class="">Generates coverage reports in <code>reports/</code> directory</li>
162
+ <li class="">Supports React Testing Library</li>
163
+ <li class="">Provides snapshot testing</li>
164
+ <li class="">Generates HTML coverage reports</li>
165
+ </ul>
166
+ <p><strong>Coverage Reports:</strong></p>
167
+ <p>After running tests, view coverage at:</p>
168
+ <ul>
169
+ <li class=""><code>reports/index.html</code> - Overall coverage report</li>
170
+ <li class=""><code>reports/lcov-report/index.html</code> - Detailed line coverage</li>
171
+ </ul>
172
+ <hr>
173
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="pui-cli-vitest"><code>pui-cli vitest</code><a href="#pui-cli-vitest" class="hash-link" aria-label="Direct link to pui-cli-vitest" title="Direct link to pui-cli-vitest" translate="no">​</a></h3>
174
+ <p>Runs Vitest for modern, fast testing.</p>
175
+ <p><strong>Usage:</strong></p>
176
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli vitest [options]</span><br></div></code></pre></div></div>
177
+ <p><strong>Options:</strong></p>
178
+ <ul>
179
+ <li class=""><code>--watch</code> - Run in watch mode</li>
180
+ <li class=""><code>--ui</code> - Open Vitest UI</li>
181
+ <li class=""><code>--coverage</code> - Generate coverage</li>
182
+ </ul>
183
+ <p><strong>Examples:</strong></p>
184
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain"># Run tests</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli vitest</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Run with UI</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli vitest --ui</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Run in watch mode</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli vitest --watch</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Generate coverage</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli vitest --coverage</span><br></div></code></pre></div></div>
185
+ <p><strong>What it does:</strong></p>
186
+ <ul>
187
+ <li class="">Provides fast test execution with Vite</li>
188
+ <li class="">Supports ESM natively</li>
189
+ <li class="">Offers visual test UI</li>
190
+ <li class="">Compatible with Jest syntax</li>
191
+ </ul>
192
+ <hr>
193
+ <h2 class="anchor anchorTargetStickyNavbar_jFbF" id="linting-commands">Linting Commands<a href="#linting-commands" class="hash-link" aria-label="Direct link to Linting Commands" title="Direct link to Linting Commands" translate="no">​</a></h2>
194
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="pui-cli-lint"><code>pui-cli lint</code><a href="#pui-cli-lint" class="hash-link" aria-label="Direct link to pui-cli-lint" title="Direct link to pui-cli-lint" translate="no">​</a></h3>
195
+ <p>Lints your codebase for code quality and style issues.</p>
196
+ <p><strong>Usage:</strong></p>
197
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli lint [options]</span><br></div></code></pre></div></div>
198
+ <p><strong>Options:</strong></p>
199
+ <ul>
200
+ <li class=""><code>--fix</code> - Automatically fix linting issues</li>
201
+ <li class=""><code>--js</code> - Lint JavaScript/TypeScript files only</li>
202
+ <li class=""><code>--css</code> - Lint CSS/SCSS files only</li>
203
+ <li class=""><code>--commit</code> - Lint commit messages</li>
204
+ <li class=""><code>--debug</code> - Show detailed error messages</li>
205
+ </ul>
206
+ <p><strong>Examples:</strong></p>
207
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain"># Lint all files</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli lint</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Auto-fix issues</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli lint --fix</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Lint only JavaScript files</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli lint --js</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Lint only CSS files</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli lint --css</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Lint commit messages</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli lint --commit</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Show debug information</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli lint --debug</span><br></div></code></pre></div></div>
208
+ <p><strong>What it does:</strong></p>
209
+ <ul>
210
+ <li class="">Runs ESLint on JavaScript/TypeScript files</li>
211
+ <li class="">Runs Stylelint on CSS/SCSS files</li>
212
+ <li class="">Runs Commitlint on commit messages</li>
213
+ <li class="">Enforces code style consistency</li>
214
+ <li class="">Checks for common errors and anti-patterns</li>
215
+ </ul>
216
+ <p><strong>Linting Rules:</strong></p>
217
+ <p>The CLI provides pre-configured rules for:</p>
218
+ <ul>
219
+ <li class=""><strong>ESLint</strong>: React, TypeScript, Jest best practices</li>
220
+ <li class=""><strong>Stylelint</strong>: CSS best practices and conventions</li>
221
+ <li class=""><strong>Commitlint</strong>: Conventional Commits format</li>
222
+ </ul>
223
+ <hr>
224
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="pui-cli-tscheck"><code>pui-cli tscheck</code><a href="#pui-cli-tscheck" class="hash-link" aria-label="Direct link to pui-cli-tscheck" title="Direct link to pui-cli-tscheck" translate="no">​</a></h3>
225
+ <p>Type-checks TypeScript files without emitting output.</p>
226
+ <p><strong>Usage:</strong></p>
227
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli tscheck [options]</span><br></div></code></pre></div></div>
228
+ <p><strong>Options:</strong></p>
229
+ <ul>
230
+ <li class=""><code>--files</code> - Check specific files only</li>
231
+ <li class=""><code>--watch</code> - Watch mode for continuous type checking</li>
232
+ <li class=""><code>--debug</code> - Show detailed TypeScript errors</li>
233
+ </ul>
234
+ <p><strong>Examples:</strong></p>
235
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain"># Check all types</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli tscheck</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Check with file listing</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli tscheck --files</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Watch for changes</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli tscheck --watch</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Show detailed errors</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli tscheck --debug</span><br></div></code></pre></div></div>
236
+ <p><strong>What it does:</strong></p>
237
+ <ul>
238
+ <li class="">Runs TypeScript compiler in check mode</li>
239
+ <li class="">Reports type errors</li>
240
+ <li class="">Doesn&#x27;t emit JavaScript files</li>
241
+ <li class="">Useful for CI/CD pipelines</li>
242
+ </ul>
243
+ <hr>
244
+ <h2 class="anchor anchorTargetStickyNavbar_jFbF" id="documentation-commands">Documentation Commands<a href="#documentation-commands" class="hash-link" aria-label="Direct link to Documentation Commands" title="Direct link to Documentation Commands" translate="no">​</a></h2>
245
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="pui-cli-gendoc"><code>pui-cli gendoc</code><a href="#pui-cli-gendoc" class="hash-link" aria-label="Direct link to pui-cli-gendoc" title="Direct link to pui-cli-gendoc" translate="no">​</a></h3>
246
+ <p>Generates API documentation from your code.</p>
247
+ <p><strong>Usage:</strong></p>
248
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli gendoc</span><br></div></code></pre></div></div>
249
+ <p><strong>What it does:</strong></p>
250
+ <ul>
251
+ <li class="">Generates TypeDoc documentation</li>
252
+ <li class="">Extracts JSDoc comments</li>
253
+ <li class="">Creates HTML documentation</li>
254
+ <li class="">Outputs to <code>docs/api/</code> directory</li>
255
+ </ul>
256
+ <p><strong>Example JSDoc comments:</strong></p>
257
+ <div class="language-typescript codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-typescript codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">/**</span><br></div><div class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic"> * Adds two numbers together</span><br></div><div class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic"> * </span><span class="token doc-comment comment keyword" style="color:#00009f;font-style:italic">@param</span><span class="token doc-comment comment" style="color:#999988;font-style:italic"> </span><span class="token doc-comment comment parameter" style="color:#999988;font-style:italic">a</span><span class="token doc-comment comment" style="color:#999988;font-style:italic"> - First number</span><br></div><div class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic"> * </span><span class="token doc-comment comment keyword" style="color:#00009f;font-style:italic">@param</span><span class="token doc-comment comment" style="color:#999988;font-style:italic"> </span><span class="token doc-comment comment parameter" style="color:#999988;font-style:italic">b</span><span class="token doc-comment comment" style="color:#999988;font-style:italic"> - Second number</span><br></div><div class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic"> * </span><span class="token doc-comment comment keyword" style="color:#00009f;font-style:italic">@returns</span><span class="token doc-comment comment" style="color:#999988;font-style:italic"> The sum of a and b</span><br></div><div class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic"> * </span><span class="token doc-comment comment keyword" style="color:#00009f;font-style:italic">@example</span><span class="token doc-comment comment" style="color:#999988;font-style:italic"></span><br></div><div class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic"> * ```ts</span><br></div><div class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic"> * add(2, 3) // returns 5</span><br></div><div class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic"> * ```</span><br></div><div class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic"> */</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">add</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">a</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">number</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> b</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">number</span><span class="token punctuation" style="color:#393A34">)</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">number</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> a </span><span class="token operator" style="color:#393A34">+</span><span class="token plain"> b</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
258
+ <hr>
259
+ <h2 class="anchor anchorTargetStickyNavbar_jFbF" id="utility-commands">Utility Commands<a href="#utility-commands" class="hash-link" aria-label="Direct link to Utility Commands" title="Direct link to Utility Commands" translate="no">​</a></h2>
260
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="pui-cli-version"><code>pui-cli version</code><a href="#pui-cli-version" class="hash-link" aria-label="Direct link to pui-cli-version" title="Direct link to pui-cli-version" translate="no">​</a></h3>
261
+ <p>Manages versioning for monorepo workspaces.</p>
262
+ <p><strong>Usage:</strong></p>
263
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli version [options]</span><br></div></code></pre></div></div>
264
+ <p><strong>Options:</strong></p>
265
+ <ul>
266
+ <li class=""><code>--set &lt;version&gt;</code> - Set specific version for all packages</li>
267
+ <li class=""><code>--workspace</code> - Update workspace package versions</li>
268
+ </ul>
269
+ <p><strong>Examples:</strong></p>
270
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain"># Update versions in monorepo</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli version --workspace</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Set specific version</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli version --set 2.0.0</span><br></div></code></pre></div></div>
271
+ <p><strong>What it does:</strong></p>
272
+ <ul>
273
+ <li class="">Updates package.json versions</li>
274
+ <li class="">Maintains version consistency in monorepos</li>
275
+ <li class="">Updates dependency versions</li>
276
+ </ul>
277
+ <hr>
278
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="pui-cli-codemod"><code>pui-cli codemod</code><a href="#pui-cli-codemod" class="hash-link" aria-label="Direct link to pui-cli-codemod" title="Direct link to pui-cli-codemod" translate="no">​</a></h3>
279
+ <p>Runs code transformations using jscodeshift.</p>
280
+ <p><strong>Usage:</strong></p>
281
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli codemod &lt;transform&gt;</span><br></div></code></pre></div></div>
282
+ <p><strong>Arguments:</strong></p>
283
+ <ul>
284
+ <li class=""><code>&lt;transform&gt;</code> - Name of the transform to apply</li>
285
+ </ul>
286
+ <p><strong>What it does:</strong></p>
287
+ <ul>
288
+ <li class="">Applies automated code transformations</li>
289
+ <li class="">Useful for migrations</li>
290
+ <li class="">Batch code refactoring</li>
291
+ </ul>
292
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="pui-cli-skills"><code>pui-cli skills</code><a href="#pui-cli-skills" class="hash-link" aria-label="Direct link to pui-cli-skills" title="Direct link to pui-cli-skills" translate="no">​</a></h3>
293
+ <p>Installs bundled agent skills from <code>@elliemae/pui-cli</code> into the current repo.</p>
294
+ <p><strong>Usage:</strong></p>
295
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli skills list</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli skills install [name] [--target &lt;target&gt;] [--force]</span><br></div></code></pre></div></div>
296
+ <p><strong>Options:</strong></p>
297
+ <ul>
298
+ <li class=""><code>--target</code> — <code>cursor</code> (default), <code>claude</code>, <code>copilot</code>, or <code>all</code>
299
+ <ul>
300
+ <li class=""><code>cursor</code> → <code>.cursor/skills/</code></li>
301
+ <li class=""><code>claude</code> → <code>.claude/skills/</code></li>
302
+ <li class=""><code>copilot</code> → <code>.github/skills/</code></li>
303
+ <li class=""><code>all</code> → all three paths (recommended for mixed teams)</li>
304
+ </ul>
305
+ </li>
306
+ </ul>
307
+ <p><strong>Examples:</strong></p>
308
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain"># List bundled skills shipped with this pui-cli version</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec pui-cli skills list</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Install for Cursor, Claude Code, and GitHub Copilot</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec pui-cli skills install migrate-to-pui-cli-9 --target all</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Install for Cursor only (default)</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec pui-cli skills install migrate-to-pui-cli-9</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Install for Claude Code only</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec pui-cli skills install migrate-to-pui-cli-9 --target claude</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Overwrite an existing skill directory</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec pui-cli skills install migrate-to-pui-cli-9 --target all --force</span><br></div></code></pre></div></div>
309
+ <p><strong>What it does:</strong></p>
310
+ <ul>
311
+ <li class="">Copies <code>lib/skills/&lt;name&gt;/</code> from the installed package into the target skill directories</li>
312
+ <li class="">Uses the shared Agent Skills <code>SKILL.md</code> format (works across Cursor, Claude Code, and Copilot)</li>
313
+ <li class="">See <a class="" href="/cli/pui-cli-9-migration">pui-cli 9 migration guide</a> for the full upgrade path</li>
314
+ </ul>
315
+ <hr>
316
+ <h2 class="anchor anchorTargetStickyNavbar_jFbF" id="advanced-usage">Advanced Usage<a href="#advanced-usage" class="hash-link" aria-label="Direct link to Advanced Usage" title="Direct link to Advanced Usage" translate="no">​</a></h2>
317
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="using-pui-cli-in-npm-scripts">Using pui-cli in npm scripts<a href="#using-pui-cli-in-npm-scripts" class="hash-link" aria-label="Direct link to Using pui-cli in npm scripts" title="Direct link to Using pui-cli in npm scripts" translate="no">​</a></h3>
318
+ <p><strong>package.json example:</strong></p>
319
+ <div class="language-json codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-json codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;scripts&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;dev&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;pui-cli start&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;build&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;pui-cli build&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;build:lib&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;pui-cli build --service&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;test&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;pui-cli test --coverage&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;test:watch&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;pui-cli test --watch&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;test:debug&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;pui-cli test --debug&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;lint&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;pui-cli lint&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;lint:fix&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;pui-cli lint --fix&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;lint:js&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;pui-cli lint --js --fix&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;lint:css&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;pui-cli lint --css --fix&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;typecheck&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;pui-cli tscheck&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;storybook&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;pui-cli storybook&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;storybook:build&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;pui-cli storybook --build&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;gendoc&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;pui-cli gendoc&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;pack&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;pui-cli pack&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;precommit&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;lint-staged&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
320
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="cicd-integration">CI/CD Integration<a href="#cicd-integration" class="hash-link" aria-label="Direct link to CI/CD Integration" title="Direct link to CI/CD Integration" translate="no">​</a></h3>
321
+ <p><strong>Jenkins example:</strong></p>
322
+ <div class="language-groovy codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-groovy codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pipeline {</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> agent any</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> stages {</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> stage(&#x27;Install&#x27;) {</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> steps {</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> sh &#x27;pnpm install&#x27;</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> }</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> }</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> stage(&#x27;Lint&#x27;) {</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> steps {</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> sh &#x27;pnpm lint&#x27;</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> }</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> }</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> stage(&#x27;Type Check&#x27;) {</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> steps {</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> sh &#x27;pnpm tscheck&#x27;</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> }</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> }</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> stage(&#x27;Test&#x27;) {</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> steps {</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> sh &#x27;pnpm test&#x27;</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> }</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> }</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> stage(&#x27;Build&#x27;) {</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> steps {</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> sh &#x27;pnpm build&#x27;</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> }</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> }</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> }</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">}</span><br></div></code></pre></div></div>
323
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="using-exported-configurations">Using Exported Configurations<a href="#using-exported-configurations" class="hash-link" aria-label="Direct link to Using Exported Configurations" title="Direct link to Using Exported Configurations" translate="no">​</a></h3>
324
+ <p>You can import and extend the CLI&#x27;s configurations in your own config files:</p>
325
+ <p><strong>ESLint:</strong></p>
326
+ <div class="language-javascript codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-javascript codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> eslintConfig </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-cli&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">default</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token spread operator" style="color:#393A34">...</span><span class="token plain">eslintConfig</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">rules</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Your custom rules</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string-property property" style="color:#36acaa">&#x27;no-console&#x27;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;warn&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
327
+ <p><strong>Prettier:</strong></p>
328
+ <div class="language-javascript codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-javascript codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> prettierConfig </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-cli&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">default</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token spread operator" style="color:#393A34">...</span><span class="token plain">prettierConfig</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Your custom overrides</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">printWidth</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">100</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
329
+ <p><strong>Vitest:</strong></p>
330
+ <div class="language-typescript codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-typescript codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> defineConfig </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;vitest/config&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> vitestConfig </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-cli/vitest&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">default</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">defineConfig</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">...</span><span class="token plain">vitestConfig</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> test</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">...</span><span class="token plain">vitestConfig</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">test</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Your custom test config</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
331
+ <h2 class="anchor anchorTargetStickyNavbar_jFbF" id="configuration-priority">Configuration Priority<a href="#configuration-priority" class="hash-link" aria-label="Direct link to Configuration Priority" title="Direct link to Configuration Priority" translate="no">​</a></h2>
332
+ <p>The CLI follows this priority order for configuration:</p>
333
+ <ol>
334
+ <li class="">Project-level configuration files</li>
335
+ <li class="">CLI&#x27;s default configurations</li>
336
+ <li class="">Command-line arguments</li>
337
+ <li class="">Environment variables</li>
338
+ </ol>
339
+ <h2 class="anchor anchorTargetStickyNavbar_jFbF" id="best-practices">Best Practices<a href="#best-practices" class="hash-link" aria-label="Direct link to Best Practices" title="Direct link to Best Practices" translate="no">​</a></h2>
340
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="development-workflow">Development Workflow<a href="#development-workflow" class="hash-link" aria-label="Direct link to Development Workflow" title="Direct link to Development Workflow" translate="no">​</a></h3>
341
+ <ol>
342
+ <li class="">
343
+ <p><strong>Start development server:</strong></p>
344
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm start</span><br></div></code></pre></div></div>
345
+ </li>
346
+ <li class="">
347
+ <p><strong>Run tests in watch mode (separate terminal):</strong></p>
348
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm test --watch</span><br></div></code></pre></div></div>
349
+ </li>
350
+ <li class="">
351
+ <p><strong>Type check (separate terminal):</strong></p>
352
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm tscheck --watch</span><br></div></code></pre></div></div>
353
+ </li>
354
+ <li class="">
355
+ <p><strong>Before committing:</strong></p>
356
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm lint:fix</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm test</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm typecheck</span><br></div></code></pre></div></div>
357
+ </li>
358
+ </ol>
359
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="library-development-workflow">Library Development Workflow<a href="#library-development-workflow" class="hash-link" aria-label="Direct link to Library Development Workflow" title="Direct link to Library Development Workflow" translate="no">​</a></h3>
360
+ <ol>
361
+ <li class="">
362
+ <p><strong>Start Storybook:</strong></p>
363
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm storybook</span><br></div></code></pre></div></div>
364
+ </li>
365
+ <li class="">
366
+ <p><strong>Run tests in watch mode:</strong></p>
367
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm test --watch</span><br></div></code></pre></div></div>
368
+ </li>
369
+ <li class="">
370
+ <p><strong>Build library:</strong></p>
371
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm build --service</span><br></div></code></pre></div></div>
372
+ </li>
373
+ <li class="">
374
+ <p><strong>Test package:</strong></p>
375
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm pack</span><br></div></code></pre></div></div>
376
+ </li>
377
+ </ol>
378
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="performance-tips">Performance Tips<a href="#performance-tips" class="hash-link" aria-label="Direct link to Performance Tips" title="Direct link to Performance Tips" translate="no">​</a></h3>
379
+ <ul>
380
+ <li class="">Use <code>--findRelatedTests</code> to run only relevant tests</li>
381
+ <li class="">Enable <code>--watch</code> mode during development</li>
382
+ <li class="">Use <code>--silent</code> in CI to reduce output</li>
383
+ <li class="">Run <code>lint --js</code> and <code>lint --css</code> separately for faster feedback</li>
384
+ </ul>
385
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="framework-chunk-splitting">Framework Chunk Splitting<a href="#framework-chunk-splitting" class="hash-link" aria-label="Direct link to Framework Chunk Splitting" title="Direct link to Framework Chunk Splitting" translate="no">​</a></h3>
386
+ <p><code>pui-cli</code> supports an opt-in <strong>framework chunk</strong> 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.</p>
387
+ <p><strong>How it works</strong></p>
388
+ <p>When enabled, the production (and dev) Webpack build creates three vendor-level chunks instead of two:</p>
389
+ <table><thead><tr><th>Chunk</th><th>Contents</th></tr></thead><tbody><tr><td><code>emui.js</code></td><td><code>@elliemae/*</code> packages (design system, SDK, diagnostics, etc.)</td></tr><tr><td><code>framework.js</code></td><td><code>react</code>, <code>react-dom</code>, <code>scheduler</code>, <code>react-router</code>, <code>react-router-dom</code>, <code>history</code>, <code>react-is</code></td></tr><tr><td><code>vendors.js</code></td><td>Everything else from <code>node_modules</code></td></tr></tbody></table>
390
+ <p>Without the flag, the default two-chunk layout is preserved (<code>emui.js</code> + <code>vendors.js</code>).</p>
391
+ <p><strong>Enabling the flag</strong></p>
392
+ <p>Add the following to your application&#x27;s <code>.env</code> file:</p>
393
+ <div class="language-env codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-env codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">SPLIT_FRAMEWORK_CHUNK=true</span><br></div></code></pre></div></div>
394
+ <p>The flag is read at build time. No changes to <code>pui-cli</code> itself are needed.</p>
395
+ <p><strong>Required application updates</strong></p>
396
+ <p>After enabling the flag you must update three places in your application to include <code>framework.js</code> in the script loading order.</p>
397
+ <p><strong>1. <code>index-app-loader.html</code></strong></p>
398
+ <p>If your application uses <code>pui-app-loader</code>, update the <code>bodyScripts</code> array to include <code>framework.js</code> <strong>before</strong> <code>vendors.js</code>:</p>
399
+ <div class="language-javascript codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-javascript codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">emuiAppLoader</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">load</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">appId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;loanapp&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">headScripts</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">bodyScripts</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">&#x27;runtime~app.js&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;framework.js&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;vendors.js&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;emui.js&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;app.js&#x27;</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">styles</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">&#x27;vendors.css&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;emui.css&#x27;</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">isJsModule</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
400
+ <p><strong>2. <code>app.config.json</code> — <code>microFrontendApps</code> file lists</strong></p>
401
+ <p>Any microapp built with the framework chunk enabled must list <code>framework.js</code> in its <code>development.files</code> and <code>production.files</code> arrays. The host app&#x27;s <code>app.config.json</code> must reflect this so that <code>app-bridge</code> loads the scripts in the correct order.</p>
402
+ <p>Development example:</p>
403
+ <div class="language-json codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-json codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;microFrontendApps&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;myapp&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;name&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;My App&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;hostUrl&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;./myapp&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;development&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;files&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;https://cdn.mortgagetech.q1.ice.com/pui-diagnostics@3&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;https://cdn.mortgagetech.q1.ice.com/pui-logrocket@1&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;js/global.js&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;framework.js&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;emui.js&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;vendors.js&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;app.js&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
404
+ <p>Production example:</p>
405
+ <div class="language-json codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-json codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;microFrontendApps&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;myapp&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;name&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;My App&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;hostUrl&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;./myapp&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;production&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;files&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;https://cdn.mortgagetech.q1.ice.com/pui-diagnostics@3&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;https://cdn.mortgagetech.q1.ice.com/pui-logrocket@1&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;js/global.js&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;runtime~app.js&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;framework.js&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;emui.js&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;vendors.js&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;app.js&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;emui.css&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;vendors.css&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
406
+ <blockquote>
407
+ <p><strong>Load order matters.</strong> <code>framework.js</code> must appear before <code>vendors.js</code> and <code>emui.js</code> because both depend on React.</p>
408
+ </blockquote>
409
+ <p><strong>3. Verify the build output</strong></p>
410
+ <p>After enabling the flag, run a production build and confirm the new chunk appears:</p>
411
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm build</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">ls build/latest/js/framework.*.js</span><br></div></code></pre></div></div>
412
+ <p>You should see a hashed file like <code>framework.abc123.js</code> alongside the existing <code>emui</code>, <code>vendors</code>, and <code>app</code> chunks.</p>
413
+ <p><strong>Disabling the flag</strong></p>
414
+ <p>Remove <code>SPLIT_FRAMEWORK_CHUNK=true</code> from <code>.env</code> (or set it to <code>false</code>), then reverse the file-list changes above — remove <code>framework.js</code> from <code>index-app-loader.html</code> and <code>app.config.json</code>. The build will revert to the default two-chunk layout.</p>
415
+ <h2 class="anchor anchorTargetStickyNavbar_jFbF" id="troubleshooting">Troubleshooting<a href="#troubleshooting" class="hash-link" aria-label="Direct link to Troubleshooting" title="Direct link to Troubleshooting" translate="no">​</a></h2>
416
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="build-issues">Build Issues<a href="#build-issues" class="hash-link" aria-label="Direct link to Build Issues" title="Direct link to Build Issues" translate="no">​</a></h3>
417
+ <p><strong>Error: Module not found</strong></p>
418
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain"># Clear cache and rebuild</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">rm -rf node_modules dist</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm install</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm build</span><br></div></code></pre></div></div>
419
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="test-issues">Test Issues<a href="#test-issues" class="hash-link" aria-label="Direct link to Test Issues" title="Direct link to Test Issues" translate="no">​</a></h3>
420
+ <p><strong>Error: Tests timing out</strong></p>
421
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain"># Increase timeout in jest.config</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pui-cli test --debug</span><br></div></code></pre></div></div>
422
+ <h3 class="anchor anchorTargetStickyNavbar_jFbF" id="linting-issues">Linting Issues<a href="#linting-issues" class="hash-link" aria-label="Direct link to Linting Issues" title="Direct link to Linting Issues" translate="no">​</a></h3>
423
+ <p><strong>Error: Too many linting errors</strong></p>
424
+ <div class="language-bash codeBlockContainer_uLrG theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_yDoo"><pre tabindex="0" class="prism-code language-bash codeBlock_whMN thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_r5mI"><div class="token-line" style="color:#393A34"><span class="token plain"># Fix automatically</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm lint --fix</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Fix only JS</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm lint --js --fix</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"># Fix only CSS</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm lint --css --fix</span><br></div></code></pre></div></div>
425
+ <h2 class="anchor anchorTargetStickyNavbar_jFbF" id="additional-resources">Additional Resources<a href="#additional-resources" class="hash-link" aria-label="Direct link to Additional Resources" title="Direct link to Additional Resources" translate="no">​</a></h2>
426
+ <ul>
427
+ <li class=""><a class="" href="/cli/#getting-started">Getting Started Guide</a></li>
428
+ <li class=""><a class="" href="/cli/api/">API Documentation</a></li>
429
+ <li class=""><a href="https://git.elliemae.io/platform-ui/pui-cli#migration-guide" target="_blank" rel="noopener noreferrer" class="">Migration Guide</a></li>
430
+ <li class=""><a href="https://git.elliemae.io/platform-ui/pui-cli" target="_blank" rel="noopener noreferrer" class="">GitHub Repository</a></li>
431
+ </ul>
432
+ <h2 class="anchor anchorTargetStickyNavbar_jFbF" id="need-help">Need Help?<a href="#need-help" class="hash-link" aria-label="Direct link to Need Help?" title="Direct link to Need Help?" translate="no">​</a></h2>
433
+ <p>If you encounter issues or have questions:</p>
434
+ <ul>
435
+ <li class="">Review the documentation</li>
436
+ <li class="">Contact the UI Platform team via ui-platform teams channel</li>
437
+ </ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_sn50"><a href="https://git.elliemae.io/platform-ui/pui-cli.git/docs/usage-guide.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_sbI6" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_n07i"></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/cli/stylelint-migration"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Stylelint migration guide (pui-cli 8 → 9 / Stylelint 17)</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_gGRX thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#table-of-contents" class="table-of-contents__link toc-highlight">Table of Contents</a></li><li><a href="#build-commands" class="table-of-contents__link toc-highlight">Build Commands</a><ul><li><a href="#pui-cli-build" class="table-of-contents__link toc-highlight"><code>pui-cli build</code></a></li><li><a href="#pui-cli-buildcdn" class="table-of-contents__link toc-highlight"><code>pui-cli buildCDN</code></a></li><li><a href="#pui-cli-pack" class="table-of-contents__link toc-highlight"><code>pui-cli pack</code></a></li></ul></li><li><a href="#development-commands" class="table-of-contents__link toc-highlight">Development Commands</a><ul><li><a href="#pui-cli-start" class="table-of-contents__link toc-highlight"><code>pui-cli start</code></a></li><li><a href="#pui-cli-storybook" class="table-of-contents__link toc-highlight"><code>pui-cli storybook</code></a></li></ul></li><li><a href="#testing-commands" class="table-of-contents__link toc-highlight">Testing Commands</a><ul><li><a href="#pui-cli-test" class="table-of-contents__link toc-highlight"><code>pui-cli test</code></a></li><li><a href="#pui-cli-vitest" class="table-of-contents__link toc-highlight"><code>pui-cli vitest</code></a></li></ul></li><li><a href="#linting-commands" class="table-of-contents__link toc-highlight">Linting Commands</a><ul><li><a href="#pui-cli-lint" class="table-of-contents__link toc-highlight"><code>pui-cli lint</code></a></li><li><a href="#pui-cli-tscheck" class="table-of-contents__link toc-highlight"><code>pui-cli tscheck</code></a></li></ul></li><li><a href="#documentation-commands" class="table-of-contents__link toc-highlight">Documentation Commands</a><ul><li><a href="#pui-cli-gendoc" class="table-of-contents__link toc-highlight"><code>pui-cli gendoc</code></a></li></ul></li><li><a href="#utility-commands" class="table-of-contents__link toc-highlight">Utility Commands</a><ul><li><a href="#pui-cli-version" class="table-of-contents__link toc-highlight"><code>pui-cli version</code></a></li><li><a href="#pui-cli-codemod" class="table-of-contents__link toc-highlight"><code>pui-cli codemod</code></a></li><li><a href="#pui-cli-skills" class="table-of-contents__link toc-highlight"><code>pui-cli skills</code></a></li></ul></li><li><a href="#advanced-usage" class="table-of-contents__link toc-highlight">Advanced Usage</a><ul><li><a href="#using-pui-cli-in-npm-scripts" class="table-of-contents__link toc-highlight">Using pui-cli in npm scripts</a></li><li><a href="#cicd-integration" class="table-of-contents__link toc-highlight">CI/CD Integration</a></li><li><a href="#using-exported-configurations" class="table-of-contents__link toc-highlight">Using Exported Configurations</a></li></ul></li><li><a href="#configuration-priority" class="table-of-contents__link toc-highlight">Configuration Priority</a></li><li><a href="#best-practices" class="table-of-contents__link toc-highlight">Best Practices</a><ul><li><a href="#development-workflow" class="table-of-contents__link toc-highlight">Development Workflow</a></li><li><a href="#library-development-workflow" class="table-of-contents__link toc-highlight">Library Development Workflow</a></li><li><a href="#performance-tips" class="table-of-contents__link toc-highlight">Performance Tips</a></li><li><a href="#framework-chunk-splitting" class="table-of-contents__link toc-highlight">Framework Chunk Splitting</a></li></ul></li><li><a href="#troubleshooting" class="table-of-contents__link toc-highlight">Troubleshooting</a><ul><li><a href="#build-issues" class="table-of-contents__link toc-highlight">Build Issues</a></li><li><a href="#test-issues" class="table-of-contents__link toc-highlight">Test Issues</a></li><li><a href="#linting-issues" class="table-of-contents__link toc-highlight">Linting Issues</a></li></ul></li><li><a href="#additional-resources" class="table-of-contents__link toc-highlight">Additional Resources</a></li><li><a href="#need-help" class="table-of-contents__link toc-highlight">Need Help?</a></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/cli/">Getting Started</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://icemortgagetechnology.slack.com/archives/C01M49EGP6Z" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink__EWc"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://git.elliemae.io/platform-ui/pui-cli.git" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink__EWc"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2026 ICE.</div></div></div></footer></div>
438
+ </body>
439
+ </html>