@elliemae/pui-cli 9.0.0-alpha.12 → 9.0.0-alpha.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -3
- package/build/docs/404.html +4 -4
- package/build/docs/api/functions/loadRoutes/index.html +9 -9
- package/build/docs/api/index.html +8 -8
- package/build/docs/api/type-aliases/LIB_NAME/index.html +5 -5
- package/build/docs/api/variables/babelConfig/index.html +5 -28
- package/build/docs/api/variables/commitlintConfig/index.html +5 -8
- package/build/docs/api/variables/eslintFlatBaseConfig/index.html +6 -6
- package/build/docs/api/variables/eslintFlatBaseConfigStrict/index.html +6 -6
- package/build/docs/api/variables/eslintFlatConfig/index.html +6 -6
- package/build/docs/api/variables/eslintFlatConfigStrict/index.html +6 -6
- package/build/docs/api/variables/jestConfig/index.html +86 -86
- package/build/docs/api/variables/jestNodeConfig/index.html +86 -86
- package/build/docs/api/variables/lintStagedConfig/index.html +22 -12
- package/build/docs/api/variables/prettierConfig/index.html +5 -18
- package/build/docs/api/variables/stylelintConfig/index.html +5 -5
- package/build/docs/api/variables/vitestConfig/index.html +5 -5
- package/build/docs/assets/css/{styles.74603f39.css → styles.3cba4e67.css} +1 -1
- package/build/docs/assets/js/04ee7372.c6c3d513.js +1 -0
- package/build/docs/assets/js/0551d4dd.a6b1d9fa.js +1 -0
- package/build/docs/assets/js/0a1d0315.43980061.js +1 -0
- package/build/docs/assets/js/13097d8d.4ac8ef79.js +1 -0
- package/build/docs/assets/js/{16b7bc88.c3779e27.js → 16b7bc88.2ac57556.js} +1 -1
- package/build/docs/assets/js/{17896441.84339068.js → 17896441.705d85a0.js} +1 -1
- package/build/docs/assets/js/{1b9df811.aaa95da1.js → 1b9df811.ec75cfdc.js} +1 -1
- package/build/docs/assets/js/{232a0286.33b2782b.js → 232a0286.6f749ae5.js} +1 -1
- package/build/docs/assets/js/{2399.cc5803e0.js → 2399.5d123cba.js} +1 -1
- package/build/docs/assets/js/{37d86055.47211796.js → 37d86055.1e73f036.js} +1 -1
- package/build/docs/assets/js/3992.b9b54f94.js +2 -0
- package/build/docs/assets/js/{4fb6949f.69e375e4.js → 4fb6949f.13bde4a8.js} +1 -1
- package/build/docs/assets/js/5befad71.96f04f67.js +1 -0
- package/build/docs/assets/js/5d5f1db0.e7607cd2.js +1 -0
- package/build/docs/assets/js/5e8c322a.0b86bf5a.js +1 -0
- package/build/docs/assets/js/5e95c892.de377e27.js +1 -0
- package/build/docs/assets/js/{5fb3c522.da5628e8.js → 5fb3c522.3ec831ee.js} +1 -1
- package/build/docs/assets/js/6bd11e52.c61bfcd5.js +1 -0
- package/build/docs/assets/js/6e96545e.1b545333.js +1 -0
- package/build/docs/assets/js/{71f6d02b.cfd98385.js → 71f6d02b.4b381360.js} +1 -1
- package/build/docs/assets/js/{6704.2615a5c6.js → 7843.f4b19776.js} +1 -1
- package/build/docs/assets/js/80e87108.8c451f49.js +1 -0
- package/build/docs/assets/js/{8585.3cb09ff7.js → 8585.e2298db3.js} +1 -1
- package/build/docs/assets/js/{a7bd4aaa.30ffad02.js → a7bd4aaa.aceac89c.js} +1 -1
- package/build/docs/assets/js/a94703ab.248144c2.js +1 -0
- package/build/docs/assets/js/b7b585d8.7d50f3f6.js +1 -0
- package/build/docs/assets/js/{bde5209a.f5bca8b2.js → bde5209a.480cc8d8.js} +1 -1
- package/build/docs/assets/js/c377a04b.c6b6b394.js +1 -0
- package/build/docs/assets/js/{dfd75424.51c4e2cb.js → dfd75424.459da76b.js} +1 -1
- package/build/docs/assets/js/f736c962.ab424879.js +1 -0
- package/build/docs/assets/js/main.3ae939d4.js +2 -0
- package/build/docs/assets/js/runtime~main.9ecf1839.js +1 -0
- package/build/docs/eslint-rules-migration/index.html +39 -39
- package/build/docs/index.html +70 -71
- package/build/docs/pui-cli-9-migration/index.html +163 -99
- package/build/docs/sitemap.xml +1 -1
- package/build/docs/ssl-certificate-setup/index.html +23 -23
- package/build/docs/stylelint-migration/index.html +19 -21
- package/build/docs/usage-guide/index.html +90 -90
- package/dist/cjs/babel.config.js +124 -0
- package/dist/cjs/index.js +5 -9
- package/dist/cjs/lint-config/commitlint/export.mjs +1 -0
- package/dist/cjs/lint-config/commitlint.config.mjs +6 -0
- package/dist/cjs/lint-config/eslint/common.cjs +8 -1
- package/dist/cjs/lint-config/eslint/flat/rules.mjs +1 -0
- package/dist/cjs/lint-config/lint-staged.config.js +17 -5
- package/dist/cjs/lint-config/prettier/export.mjs +1 -0
- package/dist/cjs/lint-config/{prettier.config.cjs → prettier.config.mjs} +4 -1
- package/dist/cjs/skills/migrate-storybook-out-of-cjs/SKILL.md +89 -35
- package/dist/cjs/skills/migrate-to-pui-cli-9/SKILL.md +126 -38
- package/dist/cjs/testing/{jest.config.cjs → jest.config.mjs} +9 -5
- package/dist/{esm/testing/jest.node.config.cjs → cjs/testing/jest.node.config.mjs} +3 -2
- package/dist/esm/babel.config.js +94 -0
- package/dist/esm/index.js +5 -9
- package/dist/esm/lint-config/commitlint/export.mjs +1 -0
- package/dist/esm/lint-config/commitlint.config.mjs +6 -0
- package/dist/esm/lint-config/eslint/common.cjs +8 -1
- package/dist/esm/lint-config/eslint/flat/rules.mjs +1 -0
- package/dist/esm/lint-config/lint-staged.config.js +17 -5
- package/dist/esm/lint-config/prettier/export.mjs +1 -0
- package/{lib/lint-config/prettier.config.cjs → dist/esm/lint-config/prettier.config.mjs} +4 -1
- package/dist/esm/skills/migrate-storybook-out-of-cjs/SKILL.md +89 -35
- package/dist/esm/skills/migrate-to-pui-cli-9/SKILL.md +126 -38
- package/dist/esm/testing/{jest.config.cjs → jest.config.mjs} +9 -5
- package/dist/{cjs/testing/jest.node.config.cjs → esm/testing/jest.node.config.mjs} +3 -2
- package/dist/types/lib/babel.config.d.ts +3 -0
- package/dist/types/lib/index.d.ts +5 -9
- package/dist/types/lib/lint-config/commitlint/export.d.mts +1 -0
- package/dist/types/lib/lint-config/commitlint.config.d.mts +3 -0
- package/dist/types/lib/lint-config/eslint/common.d.cts +8 -2
- package/dist/types/lib/lint-config/eslint/non-react.d.cts +8 -1
- package/dist/types/lib/lint-config/eslint/react.d.cts +8 -1
- package/dist/types/lib/lint-config/eslint/typescript/non-react.d.cts +8 -1
- package/dist/types/lib/lint-config/eslint/typescript/react.d.cts +8 -1
- package/dist/types/lib/lint-config/lint-staged.config.d.ts +2 -2
- package/dist/types/lib/lint-config/prettier/export.d.mts +1 -0
- package/dist/types/lib/lint-config/prettier.config.d.mts +3 -0
- package/dist/types/lib/utils.d.cts +1 -1
- package/dist/types/lib/utils.d.ts +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/lib/lint-config/commitlint/export.mjs +1 -0
- package/lib/lint-config/commitlint.config.mjs +6 -0
- package/lib/lint-config/eslint/common.cjs +8 -1
- package/lib/lint-config/eslint/flat/rules.mjs +1 -0
- package/lib/lint-config/lint-staged.config.js +20 -5
- package/lib/lint-config/prettier/export.mjs +1 -0
- package/{dist/esm/lint-config/prettier.config.cjs → lib/lint-config/prettier.config.mjs} +4 -1
- package/lib/skills/migrate-storybook-out-of-cjs/SKILL.md +89 -35
- package/lib/skills/migrate-to-pui-cli-9/SKILL.md +126 -38
- package/lib/testing/jest.config.mjs +124 -0
- package/lib/testing/jest.node.config.mjs +9 -0
- package/package.json +38 -22
- package/build/docs/api/variables/eslintBaseConfig/index.html +0 -132
- package/build/docs/api/variables/eslintConfig/index.html +0 -180
- package/build/docs/assets/js/04ee7372.2852111b.js +0 -1
- package/build/docs/assets/js/0551d4dd.ebb18f4f.js +0 -1
- package/build/docs/assets/js/0a1d0315.fc8f91a7.js +0 -1
- package/build/docs/assets/js/13097d8d.7877421c.js +0 -1
- package/build/docs/assets/js/3992.0ac29b2f.js +0 -2
- package/build/docs/assets/js/5befad71.5f19afb5.js +0 -1
- package/build/docs/assets/js/5d5f1db0.c5aa5afa.js +0 -1
- package/build/docs/assets/js/5e8c322a.ef3b894b.js +0 -1
- package/build/docs/assets/js/5e95c892.f550b901.js +0 -1
- package/build/docs/assets/js/6bd11e52.08b95209.js +0 -1
- package/build/docs/assets/js/6e96545e.30c1b801.js +0 -1
- package/build/docs/assets/js/80e87108.f9507b95.js +0 -1
- package/build/docs/assets/js/a94703ab.f1796514.js +0 -1
- package/build/docs/assets/js/b7b585d8.6d53e73f.js +0 -1
- package/build/docs/assets/js/b8ac1d98.62684003.js +0 -1
- package/build/docs/assets/js/c377a04b.0f8625c6.js +0 -1
- package/build/docs/assets/js/e5f79924.c793a74d.js +0 -1
- package/build/docs/assets/js/f736c962.dbd0d004.js +0 -1
- package/build/docs/assets/js/main.d5acb4ca.js +0 -2
- package/build/docs/assets/js/runtime~main.4f7cd700.js +0 -1
- package/dist/cjs/babel.config.cjs +0 -97
- package/dist/cjs/index.cjs +0 -35
- package/dist/cjs/lint-config/commitlint.config.cjs +0 -1
- package/dist/cjs/lint-config/stylelint.config.cjs +0 -3
- package/dist/esm/babel.config.cjs +0 -97
- package/dist/esm/index.cjs +0 -35
- package/dist/esm/lint-config/commitlint.config.cjs +0 -1
- package/dist/esm/lint-config/stylelint.config.cjs +0 -3
- package/dist/types/lib/babel.config.d.cts +0 -59
- package/dist/types/lib/index.d.cts +0 -13
- package/dist/types/lib/lint-config/commitlint.config.d.cts +0 -4
- package/dist/types/lib/lint-config/prettier.config.d.cts +0 -8
- package/dist/types/lib/lint-config/stylelint.config.d.cts +0 -2
- package/lib/lint-config/commitlint.config.cjs +0 -1
- package/lib/lint-config/stylelint.config.cjs +0 -3
- /package/build/docs/assets/js/{3992.0ac29b2f.js.LICENSE.txt → 3992.b9b54f94.js.LICENSE.txt} +0 -0
- /package/build/docs/assets/js/{main.d5acb4ca.js.LICENSE.txt → main.3ae939d4.js.LICENSE.txt} +0 -0
- /package/dist/types/lib/testing/{jest.config.d.cts → jest.config.d.mts} +0 -0
- /package/dist/types/lib/testing/{jest.node.config.d.cts → jest.node.config.d.mts} +0 -0
|
@@ -3,28 +3,30 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="generator" content="Docusaurus v3.10.1">
|
|
6
|
-
<title data-rh="true">pui-cli 9 migration 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/pui-cli-9-migration"><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="pui-cli 9 migration guide | Cli"><meta data-rh="true" name="description" content="This guide helps PUI consumers upgrade apps and libraries from pui-cli 8 to pui-cli 9."><meta data-rh="true" property="og:description" content="This guide helps PUI consumers upgrade apps and libraries from pui-cli 8 to pui-cli 9."><link data-rh="true" rel="icon" href="/cli/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/cli/pui-cli-9-migration"><link data-rh="true" rel="alternate" href="https://pui.ice.com/cli/pui-cli-9-migration" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/cli/pui-cli-9-migration" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"pui-cli 9 migration guide","item":"https://pui.ice.com/cli/pui-cli-9-migration"}]}</script><link rel="stylesheet" href="/cli/assets/css/styles.
|
|
7
|
-
<script src="/cli/assets/js/runtime~main.
|
|
8
|
-
<script src="/cli/assets/js/main.
|
|
6
|
+
<title data-rh="true">pui-cli 9 migration 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/pui-cli-9-migration"><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="pui-cli 9 migration guide | Cli"><meta data-rh="true" name="description" content="This guide helps PUI consumers upgrade apps and libraries from pui-cli 8 to pui-cli 9."><meta data-rh="true" property="og:description" content="This guide helps PUI consumers upgrade apps and libraries from pui-cli 8 to pui-cli 9."><link data-rh="true" rel="icon" href="/cli/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/cli/pui-cli-9-migration"><link data-rh="true" rel="alternate" href="https://pui.ice.com/cli/pui-cli-9-migration" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/cli/pui-cli-9-migration" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"pui-cli 9 migration guide","item":"https://pui.ice.com/cli/pui-cli-9-migration"}]}</script><link rel="stylesheet" href="/cli/assets/css/styles.3cba4e67.css">
|
|
7
|
+
<script src="/cli/assets/js/runtime~main.9ecf1839.js" defer="defer"></script>
|
|
8
|
+
<script src="/cli/assets/js/main.3ae939d4.js" defer="defer"></script>
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<svg style="display: none;"><defs>
|
|
12
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
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="
|
|
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_uUOh" 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_DNHH themedComponent--light_puUK"><img src="/cli/img/logo.svg" alt="Cli" class="themedComponent_DNHH themedComponent--dark_ytUh"></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_gBgG"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_bwF7 colorModeToggle_QGVI"><button class="clean-btn toggleButton_Cu0l toggleButtonDisabled_OZ9s" 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_njg9 lightToggleIcon_jmWU"><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_njg9 darkToggleIcon_cwWx"><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_njg9 systemToggleIcon_OGHn"><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_WcYf"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_yECr"><div class="docsWrapper_uGqN"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_psYS" type="button"></button><div class="docRoot_xjvB"><aside class="theme-doc-sidebar-container docSidebarContainer_CacH"><div class="sidebarViewport_EpUQ"><div class="sidebar_Pceu"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_NnMk"><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_Uon2 menu__link menu__link--sublist" href="/cli/api/"><span title="Cli API" class="categoryLinkLabel_eWUU">Cli API</span></a><button aria-label="Expand sidebar category 'Cli API'" 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_GXod">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_GXod">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 menu__link--active" aria-current="page" href="/cli/pui-cli-9-migration"><span title="pui-cli 9 migration guide" class="linkLabel_GXod">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_GXod">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_GXod">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" href="/cli/usage-guide"><span title="Usage Guide" class="linkLabel_GXod">Usage Guide</span></a></li></ul></nav></div></div></aside><main class="docMainContainer_eyKo"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_Dj72"><div class="docItemContainer_Qzlb"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_BbJP" 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_h1OG"><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">pui-cli 9 migration guide</span></li></ul></nav><div class="tocCollapsible_SEmd theme-doc-toc-mobile tocMobile_GImu"><button type="button" class="clean-btn tocCollapsibleButton_wJia">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>pui-cli 9 migration guide</h1></header>
|
|
15
15
|
<p>This guide helps PUI consumers upgrade apps and libraries from <strong>pui-cli 8</strong> to <strong>pui-cli 9</strong>.
|
|
16
16
|
For ESLint rule-level detail, see <a class="" href="/cli/eslint-rules-migration">ESLint rules migration guide</a>.</p>
|
|
17
17
|
<hr>
|
|
18
|
-
<h2 class="anchor
|
|
19
|
-
<table><thead><tr><th>Topic</th><th>pui-cli 8</th><th>pui-cli 9</th></tr></thead><tbody><tr><td>Node.js</td><td>20</td><td><strong>24</strong></td></tr><tr><td>pnpm</td><td>8–10</td><td><strong>11</strong> (hoist settings in <strong><code>pnpm-workspace.yaml</code></strong>, not <code>.npmrc</code>)</td></tr><tr><td>App/library bundler</td><td>Webpack</td><td><strong>Webpack</strong> (unchanged)</td></tr><tr><td>ESLint</td><td>8.x + <code>.eslintrc.cjs</code></td><td><strong>10.x</strong> + <code>eslint.config.mjs</code></td></tr><tr><td>Stylelint</td><td>15.x + <code>stylelint-config-styled-components</code></td><td><strong>17.x</strong> + <code>postcss-styled-syntax</code> (styled-components rules inlined)</td></tr><tr><td>Vitest (via <code>pui-cli vitest</code>)</td><td>1.x</td><td><strong>4.x</strong> (uses Vite internally; not the app bundler)</td></tr><tr><td>TypeScript lint</td><td><code>@typescript-eslint</code> v5</td><td><code>typescript-eslint</code> v8</td></tr><tr><td>Exported tsconfig</td><td><code>moduleResolution: "node"</code></td><td><strong><code>moduleResolution: "bundler"</code></strong></td></tr><tr><td>Shared config import</td><td><code>require('@elliemae/pui-cli').eslintConfig</code></td><td><code>import { eslintFlatConfig } from '@elliemae/pui-cli/eslint'</code></td></tr><tr><td>Stylelint import</td><td><code>require('@elliemae/pui-cli').stylelintConfig</code></td><td><code>import { stylelintConfig } from '@elliemae/pui-cli/stylelint'</code> (
|
|
18
|
+
<h2 class="anchor anchorTargetStickyNavbar_a4V3" id="at-a-glance">At a glance<a href="#at-a-glance" class="hash-link" aria-label="Direct link to At a glance" title="Direct link to At a glance" translate="no"></a></h2>
|
|
19
|
+
<table><thead><tr><th>Topic</th><th>pui-cli 8</th><th>pui-cli 9</th></tr></thead><tbody><tr><td>Node.js</td><td>20</td><td><strong>24</strong></td></tr><tr><td>pnpm</td><td>8–10</td><td><strong>11</strong> (hoist settings in <strong><code>pnpm-workspace.yaml</code></strong>, not <code>.npmrc</code>)</td></tr><tr><td>App/library bundler</td><td>Webpack</td><td><strong>Webpack</strong> (unchanged)</td></tr><tr><td>ESLint</td><td>8.x + <code>.eslintrc.cjs</code></td><td><strong>10.x</strong> + <code>eslint.config.mjs</code></td></tr><tr><td>Stylelint</td><td>15.x + <code>stylelint-config-styled-components</code></td><td><strong>17.x</strong> + <code>postcss-styled-syntax</code> (styled-components rules inlined)</td></tr><tr><td>Vitest (via <code>pui-cli vitest</code>)</td><td>1.x</td><td><strong>4.x</strong> (uses Vite internally; not the app bundler)</td></tr><tr><td>TypeScript lint</td><td><code>@typescript-eslint</code> v5</td><td><code>typescript-eslint</code> v8</td></tr><tr><td>Exported tsconfig</td><td><code>moduleResolution: "node"</code></td><td><strong><code>moduleResolution: "bundler"</code></strong></td></tr><tr><td>Shared config import</td><td><code>require('@elliemae/pui-cli').eslintConfig</code></td><td><code>import { eslintFlatConfig } from '@elliemae/pui-cli/eslint'</code></td></tr><tr><td>Package exports</td><td>Dual CJS + ESM (<code>require('@elliemae/pui-cli')</code>)</td><td><strong>ESM only</strong> — no <code>require()</code> entry; use subpath imports</td></tr><tr><td>Stylelint import</td><td><code>require('@elliemae/pui-cli').stylelintConfig</code></td><td><code>import { stylelintConfig } from '@elliemae/pui-cli/stylelint'</code></td></tr><tr><td>Babel config</td><td><code>babel.config.cjs</code></td><td><strong><code>babel.config.ts</code></strong> (re-export <code>@elliemae/pui-cli</code> <code>babelConfig</code>; Node 24 + Babel 7.28+)</td></tr><tr><td>Prettier config</td><td><code>prettier.config.cjs</code></td><td><strong><code>prettier.config.mjs</code></strong> (import <code>@elliemae/pui-cli/prettier</code>)</td></tr><tr><td>Commitlint config</td><td><code>commitlint.config.cjs</code></td><td><strong><code>commitlint.config.mjs</code></strong> (import <code>@elliemae/pui-cli/commitlint</code>)</td></tr><tr><td>semantic-release</td><td>21.x + <code>release.config.cjs</code></td><td><strong>25.x</strong> + <code>release.config.mjs</code> (ESM <code>extends</code> for shareable config)</td></tr><tr><td>Husky</td><td>8.x</td><td><strong>9.x</strong></td></tr><tr><td>Lerna (monorepos)</td><td>6.x</td><td><strong>9.x</strong> (via pui-cli; <code>bootstrap</code>/<code>add</code>/<code>link</code> removed)</td></tr><tr><td>Nx (monorepos)</td><td>15.x (<code>@nrwl/*</code>)</td><td><strong>22.x</strong> (<code>nx</code> + <code>@nx/workspace</code>; modern <code>nx.json</code>)</td></tr><tr><td>Cursor skill</td><td>—</td><td><code>pui-cli skills install migrate-to-pui-cli-9 --target all</code></td></tr><tr><td>Storybook CJS → ESM skill</td><td>—</td><td><code>pui-cli skills install migrate-storybook-out-of-cjs --target all</code></td></tr></tbody></table>
|
|
20
20
|
<hr>
|
|
21
|
-
<h2 class="anchor
|
|
21
|
+
<h2 class="anchor anchorTargetStickyNavbar_a4V3" id="recommended-rollout">Recommended rollout<a href="#recommended-rollout" class="hash-link" aria-label="Direct link to Recommended rollout" title="Direct link to Recommended rollout" translate="no"></a></h2>
|
|
22
22
|
<p>Ship in <strong>small PRs</strong> to reduce regression risk:</p>
|
|
23
23
|
<ol>
|
|
24
24
|
<li class=""><strong>Toolchain</strong> — Node 24 + pnpm 11 + CI image updates + <strong>hoisting in <code>pnpm-workspace.yaml</code></strong></li>
|
|
25
25
|
<li class=""><strong>Dependency bump</strong> — <code>@elliemae/pui-cli@9</code> without ESLint config change</li>
|
|
26
|
+
<li class=""><strong>Babel config</strong> — migrate <code>babel.config.cjs</code> → <code>babel.config.ts</code> (re-export shared config)</li>
|
|
27
|
+
<li class=""><strong>Prettier / Commitlint</strong> — migrate <code>prettier.config.cjs</code> / <code>commitlint.config.cjs</code> → <code>.mjs</code> (import subpath exports)</li>
|
|
26
28
|
<li class=""><strong>ESLint flat config</strong> — add <code>eslint.config.mjs</code>, delete legacy ESLint files, fix lint</li>
|
|
27
|
-
<li class=""><strong>Stylelint 17</strong> —
|
|
29
|
+
<li class=""><strong>Stylelint 17</strong> — migrate to <code>stylelint.config.mjs</code> (remove <code>stylelint-config-styled-components</code> overrides)</li>
|
|
28
30
|
<li class=""><strong>Husky 9</strong> — update <code>prepare</code> script and hook files (if <code>.husky/</code> exists)</li>
|
|
29
31
|
<li class=""><strong>Vitest 4</strong> — only if the repo uses <code>pui-cli vitest</code> (see below)</li>
|
|
30
32
|
<li class=""><strong>semantic-release 25</strong> — migrate <code>release.config.cjs</code> → <code>release.config.mjs</code> (libraries that publish to npm)</li>
|
|
@@ -33,83 +35,105 @@ For ESLint rule-level detail, see <a class="" href="/cli/eslint-rules-migration"
|
|
|
33
35
|
</ol>
|
|
34
36
|
<p>Each PR should pass: <code>lint</code>, <code>tscheck</code>, <code>test</code>, <code>build</code>.</p>
|
|
35
37
|
<hr>
|
|
36
|
-
<h2 class="anchor
|
|
37
|
-
<h3 class="anchor
|
|
38
|
-
<div class="language-bash
|
|
39
|
-
<div class="language-json
|
|
38
|
+
<h2 class="anchor anchorTargetStickyNavbar_a4V3" id="step-by-step">Step-by-step<a href="#step-by-step" class="hash-link" aria-label="Direct link to Step-by-step" title="Direct link to Step-by-step" translate="no"></a></h2>
|
|
39
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="1-upgrade-toolchain">1. Upgrade toolchain<a href="#1-upgrade-toolchain" class="hash-link" aria-label="Direct link to 1. Upgrade toolchain" title="Direct link to 1. Upgrade toolchain" translate="no"></a></h3>
|
|
40
|
+
<div class="language-bash codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-bash codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token plain"># .node-version</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">24</span><br></div></code></pre></div></div>
|
|
41
|
+
<div class="language-json codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-json codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// package.json (root)</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">"engines"</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">"pnpm"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">">=11"</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">"node"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">">=24"</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>
|
|
40
42
|
<p>Do <strong>not</strong> pin an exact pnpm version in <code>packageManager</code> — Corepack requires an exact semver there, which forces every customer onto the same patch. Use <code>engines.pnpm</code> so teams can run any pnpm 11 minor or patch. Omit <code>packageManager</code> unless you intentionally want Corepack to lock one version for your own CI.</p>
|
|
41
43
|
<p>Update Jenkins/docker Node images before merging.</p>
|
|
42
|
-
<h3 class="anchor
|
|
44
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="1b-migrate-pnpm-hoisting-to-pnpm-workspaceyaml-pnpm-11">1b. Migrate pnpm hoisting to <code>pnpm-workspace.yaml</code> (pnpm 11)<a href="#1b-migrate-pnpm-hoisting-to-pnpm-workspaceyaml-pnpm-11" class="hash-link" aria-label="Direct link to 1b-migrate-pnpm-hoisting-to-pnpm-workspaceyaml-pnpm-11" title="Direct link to 1b-migrate-pnpm-hoisting-to-pnpm-workspaceyaml-pnpm-11" translate="no"></a></h3>
|
|
43
45
|
<p><strong>Do this in every repo</strong> that upgrades to pnpm 11 — single-package apps, libraries, and monorepos.</p>
|
|
44
|
-
<h4 class="anchor
|
|
46
|
+
<h4 class="anchor anchorTargetStickyNavbar_a4V3" id="why">Why<a href="#why" class="hash-link" aria-label="Direct link to Why" title="Direct link to Why" translate="no"></a></h4>
|
|
45
47
|
<p>pnpm 11 only reads <strong>auth and registry</strong> from <code>.npmrc</code>. Every other pnpm setting — including hoisting — must live in <strong><code>pnpm-workspace.yaml</code></strong> (camelCase keys). See <a href="https://pnpm.io/next/migration" target="_blank" rel="noopener noreferrer" class="">pnpm v11 migration</a>.</p>
|
|
46
48
|
<p>If hoisting stays only in <code>.npmrc</code>, pnpm <strong>silently ignores it</strong>. Symptom: <code>node_modules/.modules.yaml</code> shows <code>"publicHoistPattern": []</code> even when <code>.npmrc</code> has <code>shamefully-hoist=true</code>. Webpack builds then fail with <code>Can't resolve 'esbuild-loader'</code>, <code>styled-components</code>, or <code>@elliemae/pui-theme</code> because <strong>pui-cli webpack aliases</strong> resolve packages from the <strong>repo root</strong> <code>node_modules/</code>.</p>
|
|
47
49
|
<p>PUI org policy keeps <strong><code>shamefullyHoist: true</code></strong> (same as pnpm 8 <code>shamefully-hoist=true</code>) for compatibility with <code>@elliemae/app-react-dependencies</code> and pui-cli tooling. <strong>Do not remove hoisting</strong> during the cli 9 migration.</p>
|
|
48
|
-
<h4 class="anchor
|
|
50
|
+
<h4 class="anchor anchorTargetStickyNavbar_a4V3" id="settings-to-move">Settings to move<a href="#settings-to-move" class="hash-link" aria-label="Direct link to Settings to move" title="Direct link to Settings to move" translate="no"></a></h4>
|
|
49
51
|
<table><thead><tr><th>pnpm 8–10 (<code>.npmrc</code> or <code>package.json#pnpm</code>)</th><th>pnpm 11 (<code>pnpm-workspace.yaml</code>)</th></tr></thead><tbody><tr><td><code>shamefully-hoist=true</code></td><td><code>shamefullyHoist: true</code></td></tr><tr><td><code>public-hoist-pattern[]=…</code></td><td><code>publicHoistPattern: [ "…" ]</code></td></tr><tr><td><code>strict-peer-dependencies=false</code></td><td><code>strictPeerDependencies: false</code></td></tr><tr><td><code>auto-install-peers=false</code></td><td><code>autoInstallPeers: false</code></td></tr><tr><td><code>git-checks=false</code></td><td><code>gitChecks: false</code></td></tr><tr><td><code>enable-pre-post-scripts=true</code></td><td><code>enablePrePostScripts: true</code></td></tr><tr><td><code>package.json</code> → <code>"pnpm": { "overrides": … }</code></td><td>top-level <code>overrides:</code></td></tr><tr><td><code>onlyBuiltDependencies</code> / <code>neverBuiltDependencies</code></td><td><code>allowBuilds:</code> (<code>true</code> / <code>false</code> per package)</td></tr></tbody></table>
|
|
50
52
|
<p>Leave <strong>only</strong> auth/registry lines in <code>.npmrc</code> (for example <code>legacy-peer-deps=true</code> if your registry workflow needs it).</p>
|
|
51
|
-
<h4 class="anchor
|
|
53
|
+
<h4 class="anchor anchorTargetStickyNavbar_a4V3" id="single-package-app-or-library">Single-package app or library<a href="#single-package-app-or-library" class="hash-link" aria-label="Direct link to Single-package app or library" title="Direct link to Single-package app or library" translate="no"></a></h4>
|
|
52
54
|
<p>Create or update <code>pnpm-workspace.yaml</code> at the repo root:</p>
|
|
53
|
-
<div class="language-yaml
|
|
55
|
+
<div class="language-yaml codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-yaml codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">packages</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><span class="token string" style="color:#e3116c">'.'</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 key atrule" style="color:#00a4db">shamefullyHoist</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">strictPeerDependencies</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">false</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">autoInstallPeers</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">false</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 key atrule" style="color:#00a4db">allowBuilds</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 key atrule" style="color:#00a4db">'@swc/core'</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">esbuild</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">nx</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</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"># …approve other packages that run install scripts (see pnpm approve-builds)</span><br></div></code></pre></div></div>
|
|
54
56
|
<p>Reference: <code>pui-react-boilerplate/pnpm-workspace.yaml</code>, <code>pui-lib-boilerplate/pnpm-workspace.yaml</code>.</p>
|
|
55
|
-
<h4 class="anchor
|
|
56
|
-
<div class="language-yaml
|
|
57
|
+
<h4 class="anchor anchorTargetStickyNavbar_a4V3" id="monorepo-libs-apps">Monorepo (<code>libs/*</code>, <code>apps/*</code>)<a href="#monorepo-libs-apps" class="hash-link" aria-label="Direct link to monorepo-libs-apps" title="Direct link to monorepo-libs-apps" translate="no"></a></h4>
|
|
58
|
+
<div class="language-yaml codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-yaml codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">packages</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><span class="token string" style="color:#e3116c">"libs/*"</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><span class="token string" style="color:#e3116c">"apps/*"</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 key atrule" style="color:#00a4db">shamefullyHoist</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</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"># Optional explicit patterns (shamefullyHoist already hoists all deps to root)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">publicHoistPattern</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><span class="token string" style="color:#e3116c">"esbuild-loader"</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><span class="token string" style="color:#e3116c">"@elliemae/*"</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><span class="token string" style="color:#e3116c">"styled-components"</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><span class="token string" style="color:#e3116c">"history"</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><span class="token string" style="color:#e3116c">"lodash"</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">strictPeerDependencies</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">false</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">autoInstallPeers</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">false</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">gitChecks</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">false</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">enablePrePostScripts</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</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 key atrule" style="color:#00a4db">overrides</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 key atrule" style="color:#00a4db">esbuild-loader</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"4.4.3"</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic"># if webpack hits esbuild-loader@3.x useSourceMap crash</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 key atrule" style="color:#00a4db">allowBuilds</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 key atrule" style="color:#00a4db">'@swc/core'</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">esbuild</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">nx</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</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"># …set true for each package that must run postinstall scripts</span><br></div></code></pre></div></div>
|
|
57
59
|
<p>Reference: <code>pui-microfe/pnpm-workspace.yaml</code>, <code>pui-mono-repo-boilerplate/pnpm-workspace.yaml</code>.</p>
|
|
58
60
|
<p>Move any <code>package.json</code> <code>"pnpm": { "overrides": … }</code> block into this file and delete the <code>pnpm</code> key from <code>package.json</code>.</p>
|
|
59
|
-
<h4 class="anchor
|
|
60
|
-
<div class="language-bash
|
|
61
|
+
<h4 class="anchor anchorTargetStickyNavbar_a4V3" id="reinstall-and-verify">Reinstall and verify<a href="#reinstall-and-verify" class="hash-link" aria-label="Direct link to Reinstall and verify" title="Direct link to Reinstall and verify" translate="no"></a></h4>
|
|
62
|
+
<div class="language-bash codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-bash codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token plain">rm -rf node_modules libs/*/node_modules # monorepos; apps/libs only if present</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">SKIP_POST_INSTALL_BUILD=1 pnpm install --no-frozen-lockfile</span><br></div></code></pre></div></div>
|
|
61
63
|
<p>Check hoisting took effect:</p>
|
|
62
|
-
<div class="language-bash
|
|
63
|
-
<h4 class="anchor
|
|
64
|
+
<div class="language-bash codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-bash codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token plain"># Should list patterns (shamefullyHoist => ["*"]) — not []</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">grep publicHoistPattern node_modules/.modules.yaml</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"># Webpack / pui-cli alias targets should exist at repo root</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">ls node_modules/esbuild-loader node_modules/styled-components 2>/dev/null</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm run build</span><br></div></code></pre></div></div>
|
|
65
|
+
<h4 class="anchor anchorTargetStickyNavbar_a4V3" id="common-failures">Common failures<a href="#common-failures" class="hash-link" aria-label="Direct link to Common failures" title="Direct link to Common failures" translate="no"></a></h4>
|
|
64
66
|
<table><thead><tr><th>Symptom</th><th>Fix</th></tr></thead><tbody><tr><td><code>Can't resolve 'esbuild-loader'</code> during <code>pui-cli pack</code> / webpack</td><td>Add <code>shamefullyHoist: true</code> to <code>pnpm-workspace.yaml</code>; clean reinstall</td></tr><tr><td><code>Can't resolve '@elliemae/pui-theme'</code> or <code>styled-components</code></td><td>Same — hoisting must be in workspace yaml, not <code>.npmrc</code></td></tr><tr><td><code>husky: command not found</code> on <code>pnpm prepare</code></td><td><code>shamefullyHoist</code> + optional <code>publicHoistPattern: [husky]</code>; or keep <code>husky</code> as a direct root <code>devDependency</code></td></tr><tr><td><code>ERR_PNPM_IGNORED_BUILDS</code></td><td>Replace placeholder <code>allowBuilds</code> values with <code>true</code> or run <code>pnpm approve-builds</code></td></tr><tr><td><code>publicHoistPattern: []</code> in <code>.modules.yaml</code></td><td>Hoist settings still in <code>.npmrc</code> only — migrate to <code>pnpm-workspace.yaml</code></td></tr></tbody></table>
|
|
65
67
|
<p><strong>Long-term platform fix:</strong> pui-cli should resolve webpack loaders from its own install path and make <code>getAlias()</code> fall back beyond root <code>node_modules</code>. Until then, hoisting in <code>pnpm-workspace.yaml</code> is required for pnpm 11 consumers.</p>
|
|
66
|
-
<h3 class="anchor
|
|
67
|
-
<div class="language-bash
|
|
68
|
-
<h3 class="anchor
|
|
68
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="2-upgrade-pui-cli">2. Upgrade pui-cli<a href="#2-upgrade-pui-cli" class="hash-link" aria-label="Direct link to 2. Upgrade pui-cli" title="Direct link to 2. Upgrade pui-cli" translate="no"></a></h3>
|
|
69
|
+
<div class="language-bash codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-bash codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm add -D @elliemae/pui-cli@9</span><br></div></code></pre></div></div>
|
|
70
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="2b-migrate-babel-config-to-typescript">2b. Migrate Babel config to TypeScript<a href="#2b-migrate-babel-config-to-typescript" class="hash-link" aria-label="Direct link to 2b. Migrate Babel config to TypeScript" title="Direct link to 2b. Migrate Babel config to TypeScript" translate="no"></a></h3>
|
|
71
|
+
<p>pui-cli 9 requires <strong>Node 24</strong>, which natively loads TypeScript config files. Babel <strong>7.28+</strong> (bundled with pui-cli 9) supports <strong><code>babel.config.ts</code></strong> without <code>ts-node</code> or <code>tsx</code>.</p>
|
|
72
|
+
<p>Replace root <code>babel.config.cjs</code> with <code>babel.config.ts</code>:</p>
|
|
73
|
+
<p><strong>Before:</strong></p>
|
|
74
|
+
<div class="language-javascript codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-javascript codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// babel.config.cjs</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">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> babelConfig </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'@elliemae/pui-cli'</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">module</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> babelConfig</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
|
|
75
|
+
<p><strong>After:</strong></p>
|
|
76
|
+
<div class="language-typescript codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-typescript codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// babel.config.ts</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"> babelConfig </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">'@elliemae/pui-cli'</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"> babelConfig</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
|
|
77
|
+
<p>Delete <code>babel.config.cjs</code> after adding <code>babel.config.ts</code>.</p>
|
|
78
|
+
<p><strong>Custom overrides</strong> (rare — prefer env-specific config in pui-cli if possible):</p>
|
|
79
|
+
<div class="language-typescript codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-typescript codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><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"> babelConfig </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">'@elliemae/pui-cli'</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 keyword" style="color:#00009f">type</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> TransformOptions </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">'@babel/core'</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">const</span><span class="token plain"> config</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> TransformOptions </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">babelConfig</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">// plugins: [...(babelConfig.plugins ?? []), 'my-plugin'],</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" 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"> config</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
|
|
80
|
+
<p><strong>Do not</strong> add <code>@babel/plugin-transform-private-methods</code> or <code>@babel/plugin-transform-private-property-in-object</code> in consumer Babel config — pui-cli 9 includes them in shared <code>babelConfig</code> (required for Storybook and app-sdk private class syntax).</p>
|
|
81
|
+
<p>Monorepo packages with their own Babel file (for example <code>libs/foo/babel.config.cjs</code>) follow the same pattern.</p>
|
|
82
|
+
<p>Verify: <code>pnpm run build</code> and, if applicable, <code>pnpm exec pui-cli storybook -b</code>.</p>
|
|
83
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="2c-migrate-prettier-and-commitlint-configs-to-esm">2c. Migrate Prettier and Commitlint configs to ESM<a href="#2c-migrate-prettier-and-commitlint-configs-to-esm" class="hash-link" aria-label="Direct link to 2c. Migrate Prettier and Commitlint configs to ESM" title="Direct link to 2c. Migrate Prettier and Commitlint configs to ESM" translate="no"></a></h3>
|
|
84
|
+
<p>pui-cli 9 ships shared Prettier and Commitlint configs as ESM. Prefer <code>.mjs</code> root configs that import subpath exports (same pattern as Stylelint and Jest).</p>
|
|
85
|
+
<p><strong>Prettier — before:</strong></p>
|
|
86
|
+
<div class="language-javascript codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-javascript codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// prettier.config.cjs</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">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> prettierConfig </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'@elliemae/pui-cli'</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">module</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> prettierConfig</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
|
|
87
|
+
<p><strong>Prettier — after:</strong></p>
|
|
88
|
+
<div class="language-javascript codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-javascript codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// prettier.config.mjs</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><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">'@elliemae/pui-cli/prettier'</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"> prettierConfig</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
|
|
89
|
+
<p><strong>Commitlint — before:</strong></p>
|
|
90
|
+
<div class="language-javascript codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-javascript codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// commitlint.config.cjs</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">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> commitlintConfig </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'@elliemae/pui-cli'</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">module</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> commitlintConfig</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
|
|
91
|
+
<p><strong>Commitlint — after:</strong></p>
|
|
92
|
+
<div class="language-javascript codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-javascript codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// commitlint.config.mjs</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><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"> commitlintConfig </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">'@elliemae/pui-cli/commitlint'</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"> commitlintConfig</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
|
|
93
|
+
<p>Delete the matching <code>.cjs</code> files after adding <code>.mjs</code>. <strong><code>require('@elliemae/pui-cli')</code> is removed in pui-cli 9</strong> — consumer configs must use ESM imports (subpath exports or main ESM entry).</p>
|
|
94
|
+
<p>Verify: <code>pnpm exec prettier --check .</code> and a test commit through Husky (if commitlint is enabled).</p>
|
|
95
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="3-add-flat-eslint-config">3. Add flat ESLint config<a href="#3-add-flat-eslint-config" class="hash-link" aria-label="Direct link to 3. Add flat ESLint config" title="Direct link to 3. Add flat ESLint config" translate="no"></a></h3>
|
|
69
96
|
<p><strong>React app or library:</strong></p>
|
|
70
|
-
<div class="language-js
|
|
97
|
+
<div class="language-js codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-js codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// eslint.config.mjs</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><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"> eslintFlatConfig </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">'@elliemae/pui-cli/eslint'</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"> eslintFlatConfig</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
|
|
71
98
|
<p><strong>Node / TS service:</strong></p>
|
|
72
|
-
<div class="language-js
|
|
99
|
+
<div class="language-js codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-js codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// eslint.config.mjs</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><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"> eslintFlatBaseConfig </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">'@elliemae/pui-cli/eslint'</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"> eslintFlatBaseConfig</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
|
|
73
100
|
<p>Remove:</p>
|
|
74
101
|
<ul>
|
|
75
102
|
<li class=""><code>.eslintrc.cjs</code></li>
|
|
76
103
|
<li class=""><code>.eslintignore</code></li>
|
|
77
104
|
</ul>
|
|
78
|
-
<h3 class="anchor
|
|
105
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="4-update-stylelint-config">4. Update Stylelint config<a href="#4-update-stylelint-config" class="hash-link" aria-label="Direct link to 4. Update Stylelint config" title="Direct link to 4. Update Stylelint config" translate="no"></a></h3>
|
|
79
106
|
<p>pui-cli 9 ships <strong>Stylelint 17</strong> with <code>stylelint-config-recommended@18</code> and <code>postcss-styled-syntax</code>. The unmaintained <code>stylelint-config-styled-components</code> package is removed; its rules are inlined in the shared config.</p>
|
|
80
|
-
<
|
|
81
|
-
<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 comment" style="color:#999988;font-style:italic">// stylelint.config.cjs</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">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> stylelintConfig </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'@elliemae/pui-cli'</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">module</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> stylelintConfig</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
|
|
107
|
+
<div class="language-javascript codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-javascript codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// stylelint.config.mjs</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><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"> stylelintConfig </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">'@elliemae/pui-cli/stylelint'</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"> stylelintConfig</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
|
|
82
108
|
<p>If your repo previously filtered out <code>stylelint-config-styled-components</code> from <code>extends</code>, delete that workaround — the base config no longer extends it.</p>
|
|
83
|
-
<p><
|
|
84
|
-
<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 comment" style="color:#999988;font-style:italic">// stylelint.config.mjs</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><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"> stylelintConfig </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">'@elliemae/pui-cli/stylelint'</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"> stylelintConfig</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
|
|
85
|
-
<p><code>pui-cli lint</code> prefers <code>stylelint.config.mjs</code> when present, otherwise falls back to <code>stylelint.config.cjs</code>.</p>
|
|
109
|
+
<p><code>pui-cli lint</code> prefers <code>stylelint.config.mjs</code> when present, otherwise falls back to <code>stylelint.config.cjs</code> in the consumer repo (local file only — not via <code>require('@elliemae/pui-cli')</code>).</p>
|
|
86
110
|
<p>See <a class="" href="/cli/stylelint-migration">Stylelint migration guide</a> for version and rule changes.</p>
|
|
87
|
-
<h3 class="anchor
|
|
88
|
-
<div class="language-bash
|
|
89
|
-
<h3 class="anchor
|
|
111
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="5-fix-lint">5. Fix lint<a href="#5-fix-lint" class="hash-link" aria-label="Direct link to 5. Fix lint" title="Direct link to 5. Fix lint" translate="no"></a></h3>
|
|
112
|
+
<div class="language-bash codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-bash codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec pui-cli lint --fix</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec pui-cli lint</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec pui-cli tscheck --files</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 run build</span><br></div></code></pre></div></div>
|
|
113
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="6-install-the-migration-skill-optional">6. Install the migration skill (optional)<a href="#6-install-the-migration-skill-optional" class="hash-link" aria-label="Direct link to 6. Install the migration skill (optional)" title="Direct link to 6. Install the migration skill (optional)" translate="no"></a></h3>
|
|
90
114
|
<p>Gives Cursor, Claude Code, and GitHub Copilot agents a step-by-step playbook in the repo:</p>
|
|
91
|
-
<div class="language-bash
|
|
115
|
+
<div class="language-bash codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-bash codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><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">pnpm exec pui-cli skills install migrate-to-pui-cli-9 --target all</span><br></div></code></pre></div></div>
|
|
92
116
|
<p>Skills are copied to <code>.cursor/skills/</code>, <code>.claude/skills/</code>, and <code>.github/skills/</code> (commit them if you want the whole team to share the same agent guidance).</p>
|
|
93
117
|
<hr>
|
|
94
|
-
<h2 class="anchor
|
|
118
|
+
<h2 class="anchor anchorTargetStickyNavbar_a4V3" id="temporary-overrides">Temporary overrides<a href="#temporary-overrides" class="hash-link" aria-label="Direct link to Temporary overrides" title="Direct link to Temporary overrides" translate="no"></a></h2>
|
|
95
119
|
<p>Large repos may have pre-existing <code>any</code> usage. Legacy ESLint reported these as <strong>warnings</strong>; flat config defaults them to <strong>error</strong>.</p>
|
|
96
120
|
<p>Short-term override (remove in a follow-up):</p>
|
|
97
|
-
<div class="language-js
|
|
121
|
+
<div class="language-js codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-js codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><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"> eslintFlatConfig </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">'@elliemae/pui-cli/eslint'</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">eslintFlatConfig</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 string-property property" style="color:#36acaa">'@typescript-eslint/no-explicit-any'</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'warn'</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>
|
|
98
122
|
<p>Libraries with heavy decorator/micro-frontend typings may need additional one-off overrides — keep them minimal and tracked.</p>
|
|
99
123
|
<hr>
|
|
100
|
-
<h2 class="anchor
|
|
101
|
-
<div class="language-js
|
|
124
|
+
<h2 class="anchor anchorTargetStickyNavbar_a4V3" id="strict-config-after-cleanup">Strict config (after cleanup)<a href="#strict-config-after-cleanup" class="hash-link" aria-label="Direct link to Strict config (after cleanup)" title="Direct link to Strict config (after cleanup)" translate="no"></a></h2>
|
|
125
|
+
<div class="language-js codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-js codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><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"> eslintFlatConfigStrict </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">'@elliemae/pui-cli/eslint'</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"> eslintFlatConfigStrict</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
|
|
102
126
|
<p>Strict mode elevates <code>no-unsafe-*</code> and <code>exhaustive-deps</code> to error.</p>
|
|
103
127
|
<hr>
|
|
104
|
-
<h2 class="anchor
|
|
128
|
+
<h2 class="anchor anchorTargetStickyNavbar_a4V3" id="husky-9">Husky 9<a href="#husky-9" class="hash-link" aria-label="Direct link to Husky 9" title="Direct link to Husky 9" translate="no"></a></h2>
|
|
105
129
|
<p>If your repo uses Husky 8 hooks from pui-cli boilerplate:</p>
|
|
106
130
|
<ol>
|
|
107
131
|
<li class="">Upgrade: <code>pnpm add -D husky@9</code></li>
|
|
108
132
|
<li class="">Update <code>package.json</code>:<!-- -->
|
|
109
|
-
<div class="language-diff
|
|
133
|
+
<div class="language-diff codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-diff codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token plain">- "prepare": "[ -n \"$CI\" ] || husky install"</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">+ "prepare": "[ -n \"$CI\" ] || husky"</span><br></div></code></pre></div></div>
|
|
110
134
|
</li>
|
|
111
135
|
<li class="">Remove the shebang and <code>husky.sh</code> source from each hook in <code>.husky/</code>:<!-- -->
|
|
112
|
-
<div class="language-diff
|
|
136
|
+
<div class="language-diff codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-diff codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token plain">- #!/bin/sh</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">- . "$(dirname "$0")/_/husky.sh"</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">pnpm -s dlx lint-staged</span><br></div></code></pre></div></div>
|
|
113
137
|
</li>
|
|
114
138
|
<li class="">Delete <code>.husky/.gitignore</code> if present (v9 regenerates <code>.husky/_</code> on install).</li>
|
|
115
139
|
<li class="">Remove <code>husky-init</code> from devDependencies (use <code>pnpm exec husky init</code> for new projects).</li>
|
|
@@ -117,103 +141,143 @@ For ESLint rule-level detail, see <a class="" href="/cli/eslint-rules-migration"
|
|
|
117
141
|
</ol>
|
|
118
142
|
<p><strong>Environment variable changes:</strong> <code>HUSKY_SKIP_HOOKS</code> / <code>HUSKY_SKIP_INSTALL</code> → <code>HUSKY=0</code>; <code>HUSKY_GIT_PARAMS</code> → use <code>$1</code> in hook scripts.</p>
|
|
119
143
|
<hr>
|
|
120
|
-
<h2 class="anchor
|
|
144
|
+
<h2 class="anchor anchorTargetStickyNavbar_a4V3" id="jest-30-pui-cli-test">Jest 30 (<code>pui-cli test</code>)<a href="#jest-30-pui-cli-test" class="hash-link" aria-label="Direct link to jest-30-pui-cli-test" title="Direct link to jest-30-pui-cli-test" translate="no"></a></h2>
|
|
145
|
+
<p>pui-cli 9 ships <strong>Jest 30</strong> with shared configuration in <strong><code>.mjs</code></strong> format. Jest 30 upgrades jsdom, improves performance, and drops deprecated matcher aliases (for example <code>toBeCalled</code> → <code>toHaveBeenCalled</code>).</p>
|
|
146
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="consumer-migration">Consumer migration<a href="#consumer-migration" class="hash-link" aria-label="Direct link to Consumer migration" title="Direct link to Consumer migration" translate="no"></a></h3>
|
|
147
|
+
<ol>
|
|
148
|
+
<li class="">Replace <code>jest.config.cjs</code> with <code>jest.config.mjs</code>:</li>
|
|
149
|
+
</ol>
|
|
150
|
+
<div class="language-javascript codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-javascript codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><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"> jestConfig </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">'@elliemae/pui-cli'</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">delete</span><span class="token plain"> jestConfig</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">moduleNameMapper</span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">'@elliemae/pui-diagnostics'</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" 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"> jestConfig</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
|
|
151
|
+
<ol start="2">
|
|
152
|
+
<li class="">Align local Jest devDependencies with pui-cli 9:</li>
|
|
153
|
+
</ol>
|
|
154
|
+
<div class="language-bash codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-bash codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm add -D jest-cli@30 jest-environment-jsdom@30 @types/jest@30 jest-watch-typeahead@3</span><br></div></code></pre></div></div>
|
|
155
|
+
<ol start="3">
|
|
156
|
+
<li class="">
|
|
157
|
+
<p>Search for deprecated matcher aliases and update (or run <code>eslint-plugin-jest</code> <code>no-alias-methods</code> autofix).</p>
|
|
158
|
+
</li>
|
|
159
|
+
<li class="">
|
|
160
|
+
<p>Regenerate snapshots if tests fail after the upgrade (<code>pui-cli test --fix</code> or <code>jest -u</code>).</p>
|
|
161
|
+
</li>
|
|
162
|
+
</ol>
|
|
163
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="shared-setup">Shared setup<a href="#shared-setup" class="hash-link" aria-label="Direct link to Shared setup" title="Direct link to Shared setup" translate="no"></a></h3>
|
|
121
164
|
<p>pui-cli's default <code>jestConfig</code> runs <code>lib/testing/setup-textencoder.cjs</code> before other <code>setupFiles</code>. It polyfills <code>TextEncoder</code> / <code>TextDecoder</code> on <code>globalThis</code> from <code>node:util</code> so <strong>jsdom</strong> tests can import packages (for example <code>@elliemae/pui-diagnostics</code> HTTP transport) that expect those APIs at module load time.</p>
|
|
122
165
|
<p><strong>Repos do not need a local <code>jest-textencoder-setup.cjs</code>.</strong> Delete it if you added one during migration.</p>
|
|
123
|
-
<p>Typical <code>jest.config.cjs</code> when testing against the real diagnostics package (not the pui-cli mock):</p>
|
|
124
|
-
<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" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> jestConfig </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'@elliemae/pui-cli'</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" 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">delete</span><span class="token plain"> jestConfig</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">moduleNameMapper</span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">'@elliemae/pui-diagnostics'</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" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">module</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> jestConfig</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
|
|
125
166
|
<p>Do <strong>not</strong> replace <code>setupFiles</code> unless you must prepend repo-specific setup; spread the defaults instead:</p>
|
|
126
|
-
<div class="language-javascript
|
|
167
|
+
<div class="language-javascript codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-javascript codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><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">path</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">'node:path'</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 module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> fileURLToPath </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">'node:url'</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 module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> jestConfig </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">'@elliemae/pui-cli'</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">const</span><span class="token plain"> __dirname </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> path</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">dirname</span><span class="token punctuation" style="color:#393A34">(</span><span class="token function" style="color:#d73a49">fileURLToPath</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword module" style="color:#00009f">import</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">meta</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">url</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" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">jestConfig</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">setupFiles</span><span class="token plain"> </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"> path</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">resolve</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">__dirname</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'./my-extra-setup.cjs'</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 spread operator" style="color:#393A34">...</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">jestConfig</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">setupFiles</span><span class="token plain"> </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 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" 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"> jestConfig</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
|
|
127
168
|
<hr>
|
|
128
|
-
<h2 class="anchor
|
|
169
|
+
<h2 class="anchor anchorTargetStickyNavbar_a4V3" id="vitest-4">Vitest 4<a href="#vitest-4" class="hash-link" aria-label="Direct link to Vitest 4" title="Direct link to Vitest 4" translate="no"></a></h2>
|
|
129
170
|
<p>Skip this section if the repo uses Jest (<code>pui-cli test</code>) only. <strong>pui-cli 9 still builds apps and libraries with Webpack</strong>; Vite is used by Vitest (and optional <code>pui-cli buildCDN</code>), not for production bundling.</p>
|
|
130
171
|
<p>After bumping <code>@elliemae/pui-cli@9</code>, align local test dependencies with the versions pui-cli ships:</p>
|
|
131
|
-
<div class="language-bash
|
|
172
|
+
<div class="language-bash codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-bash codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm add -D vitest@4 @vitest/coverage-v8@4 vite@8 @vitejs/plugin-react@6 vite-tsconfig-paths@6</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm remove @vitest/coverage-c8 @types/uuid # if present; uuid 14+ includes types</span><br></div></code></pre></div></div>
|
|
132
173
|
<p><strong>Extend the shared config</strong> (recommended):</p>
|
|
133
|
-
<div class="language-typescript
|
|
174
|
+
<div class="language-typescript codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-typescript codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// vitest.config.ts</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"> defineConfig</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> mergeConfig </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">'vitest/config'</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">'@elliemae/pui-cli/vitest'</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">mergeConfig</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 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"> 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 comment" style="color:#999988;font-style:italic">// repo-specific overrides</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><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
|
|
134
175
|
<p><strong>If you spread <code>vitestConfig</code> manually</strong>, update any Vitest 1.x options:</p>
|
|
135
176
|
<table><thead><tr><th>pui-cli 8 / Vitest 1</th><th>pui-cli 9 / Vitest 4</th></tr></thead><tbody><tr><td><code>test.deps.optimizer.web</code></td><td><code>test.deps.optimizer.client</code></td></tr><tr><td><code>@vitest/coverage-c8</code></td><td><code>@vitest/coverage-v8</code> (coverage provider <code>v8</code>)</td></tr><tr><td><code>import { PluginOption } from 'vite'</code></td><td><code>import type { PluginOption } from 'vite'</code> (Vite 8)</td></tr></tbody></table>
|
|
136
177
|
<p><strong>TypeScript:</strong> exported <code>@elliemae/pui-cli/app.tsconfig.json</code> and <code>library.tsconfig.json</code> use <code>moduleResolution: "bundler"</code>. If your <code>tsconfig.json</code> extends them, reinstall pui-cli and re-run <code>tscheck</code>. Custom tsconfigs that import <code>vitest/config</code> or <code>vite</code> may need the same setting.</p>
|
|
137
178
|
<p><strong>Vitest config import:</strong> use <code>@elliemae/pui-cli/vitest</code> (not the package root). pui-cli 9 publishes <code>types</code> on each <code>package.json</code> <code>exports</code> entry so <code>tsc</code> resolves declarations under <code>moduleResolution: "bundler"</code> — no <code>tsconfig</code> <code>paths</code> workaround.</p>
|
|
138
|
-
<div class="language-bash
|
|
179
|
+
<div class="language-bash codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-bash codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec pui-cli vitest --passWithNoTests</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec pui-cli tscheck --files</span><br></div></code></pre></div></div>
|
|
139
180
|
<hr>
|
|
140
|
-
<h2 class="anchor
|
|
181
|
+
<h2 class="anchor anchorTargetStickyNavbar_a4V3" id="semantic-release-25">semantic-release 25<a href="#semantic-release-25" class="hash-link" aria-label="Direct link to semantic-release 25" title="Direct link to semantic-release 25" translate="no"></a></h2>
|
|
141
182
|
<p>pui-cli 9 ships <strong>semantic-release 25</strong> with an ESM shareable config at <code>@elliemae/pui-cli/releaseConfig</code>. semantic-release 22+ loads ESM <code>extends</code> targets via dynamic <code>import()</code> — the old <code>release.config.cjs</code> + <code>require()</code> path no longer works for the shared config.</p>
|
|
142
183
|
<p><strong>Libraries that run <code>semantic-release</code> in CI</strong> should migrate in the same PR as the pui-cli 9 bump (or immediately after).</p>
|
|
143
|
-
<h3 class="anchor
|
|
184
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="1-upgrade-semantic-release-if-pinned-locally">1. Upgrade semantic-release (if pinned locally)<a href="#1-upgrade-semantic-release-if-pinned-locally" class="hash-link" aria-label="Direct link to 1. Upgrade semantic-release (if pinned locally)" title="Direct link to 1. Upgrade semantic-release (if pinned locally)" translate="no"></a></h3>
|
|
144
185
|
<p>Most PUI libraries inherit semantic-release from <code>@elliemae/pui-cli</code>. If your <code>package.json</code> pins <code>semantic-release</code> or <code>@semantic-release/*</code> plugins directly, align with pui-cli 9:</p>
|
|
145
|
-
<div class="language-bash
|
|
186
|
+
<div class="language-bash codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-bash codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm add -D semantic-release@25 @semantic-release/changelog@6 @semantic-release/exec@7 @semantic-release/git@10</span><br></div></code></pre></div></div>
|
|
146
187
|
<p>Remove explicit pins if the repo only uses <code>pnpm release</code> and relies on pui-cli's dependency tree.</p>
|
|
147
|
-
<h3 class="anchor
|
|
188
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="2-migrate-release-config-to-esm">2. Migrate release config to ESM<a href="#2-migrate-release-config-to-esm" class="hash-link" aria-label="Direct link to 2. Migrate release config to ESM" title="Direct link to 2. Migrate release config to ESM" translate="no"></a></h3>
|
|
148
189
|
<p><strong>Before:</strong></p>
|
|
149
|
-
<div class="language-javascript
|
|
190
|
+
<div class="language-javascript codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-javascript codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// release.config.cjs</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">module</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">exports</span><span class="token plain"> </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 keyword" style="color:#00009f">extends</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@elliemae/pui-cli/releaseConfig'</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>
|
|
150
191
|
<p><strong>After:</strong></p>
|
|
151
|
-
<div class="language-javascript
|
|
192
|
+
<div class="language-javascript codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-javascript codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// release.config.mjs</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><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">@type</span><span class="token doc-comment comment" style="color:#999988;font-style:italic"> </span><span class="token doc-comment comment class-name punctuation" style="color:#393A34;font-style:italic">{</span><span class="token doc-comment comment class-name keyword" style="color:#00009f;font-style:italic">import</span><span class="token doc-comment comment class-name punctuation" style="color:#393A34;font-style:italic">(</span><span class="token doc-comment comment class-name string" style="color:#e3116c;font-style:italic">'semantic-release'</span><span class="token doc-comment comment class-name punctuation" style="color:#393A34;font-style:italic">)</span><span class="token doc-comment comment class-name punctuation" style="color:#393A34;font-style:italic">.</span><span class="token doc-comment comment class-name" style="color:#999988;font-style:italic">GlobalConfig</span><span class="token doc-comment comment class-name punctuation" style="color:#393A34;font-style:italic">}</span><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 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 keyword" style="color:#00009f">extends</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@elliemae/pui-cli/releaseConfig'</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>
|
|
152
193
|
<p>Delete <code>release.config.cjs</code> after adding <code>release.config.mjs</code>.</p>
|
|
153
|
-
<h3 class="anchor
|
|
194
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="3-custom-plugins-or-overrides">3. Custom plugins or overrides<a href="#3-custom-plugins-or-overrides" class="hash-link" aria-label="Direct link to 3. Custom plugins or overrides" title="Direct link to 3. Custom plugins or overrides" translate="no"></a></h3>
|
|
154
195
|
<p>Keep repo-specific plugins as relative paths from the config file. ESM plugins use <code>export default</code>:</p>
|
|
155
|
-
<div class="language-javascript
|
|
196
|
+
<div class="language-javascript codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-javascript codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// release.config.mjs</span><span class="token plain"></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 keyword" style="color:#00009f">extends</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@elliemae/pui-cli/releaseConfig'</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">plugins</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">'@semantic-release/commit-analyzer'</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">// ...other plugins from the shared config if replacing extends entirely</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">'./my-custom-plugin.mjs'</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>
|
|
156
197
|
<p>CJS plugins (<code>.cjs</code>) still work when referenced by path.</p>
|
|
157
|
-
<h3 class="anchor
|
|
158
|
-
<div class="language-bash
|
|
159
|
-
<h3 class="anchor
|
|
198
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="4-verify-locally">4. Verify locally<a href="#4-verify-locally" class="hash-link" aria-label="Direct link to 4. Verify locally" title="Direct link to 4. Verify locally" translate="no"></a></h3>
|
|
199
|
+
<div class="language-bash codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-bash codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec semantic-release --dry-run</span><br></div></code></pre></div></div>
|
|
200
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="agent-assisted-migration">Agent-assisted migration<a href="#agent-assisted-migration" class="hash-link" aria-label="Direct link to Agent-assisted migration" title="Direct link to Agent-assisted migration" translate="no"></a></h3>
|
|
160
201
|
<p>Install the pui-cli 9 skill so Cursor / Copilot agents follow the full config migration playbook (ESLint, Stylelint, Vitest, Husky, and semantic-release):</p>
|
|
161
|
-
<div class="language-bash
|
|
202
|
+
<div class="language-bash codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-bash codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><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></code></pre></div></div>
|
|
162
203
|
<p>Then ask the agent to migrate configuration files for pui-cli 9.</p>
|
|
163
204
|
<hr>
|
|
164
|
-
<h2 class="anchor
|
|
205
|
+
<h2 class="anchor anchorTargetStickyNavbar_a4V3" id="lerna-9-and-nx-22-monorepos-only">Lerna 9 and Nx 22 (monorepos only)<a href="#lerna-9-and-nx-22-monorepos-only" class="hash-link" aria-label="Direct link to Lerna 9 and Nx 22 (monorepos only)" title="Direct link to Lerna 9 and Nx 22 (monorepos only)" translate="no"></a></h2>
|
|
165
206
|
<p>Skip this section for single-package apps and libraries. PUI monorepos (for example <code>pui-microfe</code>, <code>pui-websocket</code>, <code>pui-mono-repo-boilerplate</code>) use <strong>Nx</strong> for task orchestration and <strong>Lerna</strong> (via <code>pui-cli version</code>) for independent package versioning.</p>
|
|
166
207
|
<p>pui-cli 9 ships <strong>lerna 9</strong> and <strong>nx 22</strong> (<code>nx</code> + <code>@nx/workspace</code>). After bumping <code>@elliemae/pui-cli@9</code>, reinstall so the workspace picks up the new CLIs:</p>
|
|
167
|
-
<div class="language-bash
|
|
168
|
-
<h3 class="anchor
|
|
208
|
+
<div class="language-bash codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-bash codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><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 exec nx --version # expect 22.x</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec lerna --version # expect 9.x</span><br></div></code></pre></div></div>
|
|
209
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="1-remove-legacy-nx-package-pins">1. Remove legacy Nx package pins<a href="#1-remove-legacy-nx-package-pins" class="hash-link" aria-label="Direct link to 1. Remove legacy Nx package pins" title="Direct link to 1. Remove legacy Nx package pins" translate="no"></a></h3>
|
|
169
210
|
<p>Most monorepos inherit Nx and Lerna from pui-cli and do <strong>not</strong> pin them locally. If your root <code>package.json</code> still lists <code>@nrwl/cli</code>, <code>@nrwl/tao</code>, or <code>@nrwl/workspace</code>, remove those entries and any direct <code>lerna</code> / <code>nx</code> pins — pui-cli 9 provides them.</p>
|
|
170
|
-
<div class="language-bash
|
|
171
|
-
<h3 class="anchor
|
|
211
|
+
<div class="language-bash codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-bash codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm remove @nrwl/cli @nrwl/tao @nrwl/workspace lerna nx # only if explicitly pinned</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm install</span><br></div></code></pre></div></div>
|
|
212
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="2-migrate-nxjson">2. Migrate <code>nx.json</code><a href="#2-migrate-nxjson" class="hash-link" aria-label="Direct link to 2-migrate-nxjson" title="Direct link to 2-migrate-nxjson" translate="no"></a></h3>
|
|
172
213
|
<p>Nx 15 configs use deprecated <code>@nrwl/workspace</code> presets, <code>tasksRunnerOptions</code>, and <code>targetDependencies</code>. Nx 22 uses <code>nx/presets/npm.json</code> (or <code>@nx/workspace/presets/npm.json</code>) and <code>targetDefaults.dependsOn</code>.</p>
|
|
173
214
|
<p><strong>Before (pui-cli 8 / Nx 15):</strong></p>
|
|
174
|
-
<div class="language-json
|
|
215
|
+
<div class="language-json codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-json codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><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">"extends"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"@nrwl/workspace/presets/npm.json"</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">"tasksRunnerOptions"</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">"default"</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">"runner"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"@nrwl/workspace/tasks-runners/default"</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">"options"</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">"cacheableOperations"</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">"build"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"test"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"lint"</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 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">"targetDependencies"</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">"build"</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 plain"> </span><span class="token property" style="color:#36acaa">"target"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"build"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token property" style="color:#36acaa">"projects"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"dependencies"</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 property" style="color:#36acaa">"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 punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token property" style="color:#36acaa">"target"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"build"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token property" style="color:#36acaa">"projects"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"dependencies"</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 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>
|
|
175
216
|
<p><strong>After (pui-cli 9 / Nx 22):</strong></p>
|
|
176
|
-
<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">"$schema"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"./node_modules/nx/schemas/nx-schema.json"</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">"extends"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"nx/presets/npm.json"</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">"targetDefaults"</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">"build"</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">"dependsOn"</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">"^build"</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 property" style="color:#36acaa">"cache"</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 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 property" style="color:#36acaa">"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 property" style="color:#36acaa">"dependsOn"</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">"^build"</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 property" style="color:#36acaa">"cache"</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 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 property" style="color:#36acaa">"dts"</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">"dependsOn"</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">"^dts"</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 property" style="color:#36acaa">"cache"</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 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 property" style="color:#36acaa">"lint"</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">"dependsOn"</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">"^dts"</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 property" style="color:#36acaa">"cache"</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 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 property" style="color:#36acaa">"dev"</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">"dependsOn"</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">"^dev"</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 property" style="color:#36acaa">"cache"</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 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 property" style="color:#36acaa">"storybook:start"</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">"dependsOn"</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">"^build"</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 property" style="color:#36acaa">"cache"</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 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 property" style="color:#36acaa">"storybook:build"</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">"dependsOn"</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">"^build"</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 property" style="color:#36acaa">"cache"</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 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 property" style="color:#36acaa">"prepare"</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">"dependsOn"</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">"^prepare"</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 property" style="color:#36acaa">"cache"</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 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 property" style="color:#36acaa">"package"</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">"dependsOn"</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">"^package"</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 property" style="color:#36acaa">"cache"</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 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 property" style="color:#36acaa">"postinstall"</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">"cache"</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 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 property" style="color:#36acaa">"compile:scss"</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">"cache"</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 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>
|
|
217
|
+
<div class="language-json codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-json codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><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">"$schema"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"./node_modules/nx/schemas/nx-schema.json"</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">"extends"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"nx/presets/npm.json"</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">"targetDefaults"</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">"build"</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">"dependsOn"</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">"^build"</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 property" style="color:#36acaa">"cache"</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 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 property" style="color:#36acaa">"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 property" style="color:#36acaa">"dependsOn"</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">"^build"</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 property" style="color:#36acaa">"cache"</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 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 property" style="color:#36acaa">"dts"</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">"dependsOn"</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">"^dts"</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 property" style="color:#36acaa">"cache"</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 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 property" style="color:#36acaa">"lint"</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">"dependsOn"</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">"^dts"</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 property" style="color:#36acaa">"cache"</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 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 property" style="color:#36acaa">"dev"</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">"dependsOn"</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">"^dev"</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 property" style="color:#36acaa">"cache"</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 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 property" style="color:#36acaa">"storybook:start"</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">"dependsOn"</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">"^build"</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 property" style="color:#36acaa">"cache"</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 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 property" style="color:#36acaa">"storybook:build"</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">"dependsOn"</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">"^build"</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 property" style="color:#36acaa">"cache"</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 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 property" style="color:#36acaa">"prepare"</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">"dependsOn"</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">"^prepare"</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 property" style="color:#36acaa">"cache"</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 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 property" style="color:#36acaa">"package"</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">"dependsOn"</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">"^package"</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 property" style="color:#36acaa">"cache"</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 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 property" style="color:#36acaa">"postinstall"</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">"cache"</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 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 property" style="color:#36acaa">"compile:scss"</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">"cache"</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 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>
|
|
177
218
|
<p>Map each legacy <code>targetDependencies</code> entry to <code>"dependsOn": ["^<target>"]</code> on the same target name. Targets that were only listed under <code>cacheableOperations</code> get <code>"cache": true</code> in <code>targetDefaults</code>.</p>
|
|
178
219
|
<p><strong>Automated migration (optional):</strong> from the monorepo root after installing pui-cli 9:</p>
|
|
179
|
-
<div class="language-bash
|
|
220
|
+
<div class="language-bash codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-bash codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec nx migrate latest</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec nx migrate --run-migrations</span><br></div></code></pre></div></div>
|
|
180
221
|
<p>Review the generated migrations; they may simplify <code>nx.json</code> further. Commit the result with your pui-cli 9 bump.</p>
|
|
181
|
-
<h3 class="anchor
|
|
222
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="3-lerna-9-notes">3. Lerna 9 notes<a href="#3-lerna-9-notes" class="hash-link" aria-label="Direct link to 3. Lerna 9 notes" title="Direct link to 3. Lerna 9 notes" translate="no"></a></h3>
|
|
182
223
|
<ul>
|
|
183
|
-
<li class=""
|
|
184
|
-
<
|
|
185
|
-
|
|
186
|
-
<li class=""
|
|
224
|
+
<li class="">
|
|
225
|
+
<p><strong>Removed commands:</strong> <code>lerna bootstrap</code>, <code>lerna add</code>, and <code>lerna link</code> are gone. Use pnpm workspaces (<code>pnpm add <pkg> --filter <lib></code>) for linking and dependency management.</p>
|
|
226
|
+
</li>
|
|
227
|
+
<li class="">
|
|
228
|
+
<p><strong><code>lerna.json</code> — remove <code>useWorkspaces</code>:</strong> Lerna 7+ dropped this option; Lerna 9 fails with <code>ECONFIGWORKSPACES</code> if it is still present. Delete <code>"useWorkspaces": true</code> from <code>lerna.json</code>. Keep <code>"npmClient": "pnpm"</code> so Lerna reads <code>pnpm-workspace.yaml</code> for package discovery. You do not need a <code>packages</code> array unless you want to override the workspace globs.</p>
|
|
229
|
+
<p><strong>Before:</strong></p>
|
|
230
|
+
<div class="language-json codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-json codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><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">"npmClient"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"pnpm"</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">"useWorkspaces"</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 property" style="color:#36acaa">"version"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"2.0.0-alpha.0"</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>
|
|
231
|
+
<p><strong>After:</strong></p>
|
|
232
|
+
<div class="language-json codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-json codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><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">"npmClient"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"pnpm"</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">"version"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"2.0.0-alpha.0"</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>
|
|
233
|
+
<p>Optional cleanup: <code>pnpm exec lerna repair</code> removes other deprecated keys. Verify package resolution: <code>pnpm exec lerna list</code>.</p>
|
|
234
|
+
</li>
|
|
235
|
+
<li class="">
|
|
236
|
+
<p><strong><code>pui-cli version</code>:</strong> unchanged — still wraps <code>lerna version --conventional-commits --exact --create-release github --force-publish --yes</code>.</p>
|
|
237
|
+
</li>
|
|
238
|
+
<li class="">
|
|
239
|
+
<p><strong>Dry-run override:</strong> <code>semantic-version:dryrun:override</code> scripts that call <code>lerna version</code> directly continue to work with lerna 9.</p>
|
|
240
|
+
</li>
|
|
187
241
|
</ul>
|
|
188
|
-
<h3 class="anchor
|
|
189
|
-
<div class="language-bash
|
|
242
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="4-verify-monorepo-workflows">4. Verify monorepo workflows<a href="#4-verify-monorepo-workflows" class="hash-link" aria-label="Direct link to 4. Verify monorepo workflows" title="Direct link to 4. Verify monorepo workflows" translate="no"></a></h3>
|
|
243
|
+
<div class="language-bash codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-bash codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec lerna list # confirms lerna.json + pnpm-workspace.yaml resolve packages</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec nx run-many --target=build --all --parallel</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec nx affected --target=test --uncommitted</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec pui-cli lint</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec pui-cli version --help # confirms pui-cli can invoke lerna 9</span><br></div></code></pre></div></div>
|
|
190
244
|
<hr>
|
|
191
|
-
<h2 class="anchor
|
|
192
|
-
<p>Applies to repos that run <code>pui-cli storybook</code>. Upgrade <strong>pui-cli 9</strong> and <strong>pui-app-sdk</strong>
|
|
245
|
+
<h2 class="anchor anchorTargetStickyNavbar_a4V3" id="storybook-10-pui-cli-9--pui-app-sdk">Storybook 10 (pui-cli 9 + pui-app-sdk)<a href="#storybook-10-pui-cli-9--pui-app-sdk" class="hash-link" aria-label="Direct link to Storybook 10 (pui-cli 9 + pui-app-sdk)" title="Direct link to Storybook 10 (pui-cli 9 + pui-app-sdk)" translate="no"></a></h2>
|
|
246
|
+
<p>Applies to repos that run <code>pui-cli storybook</code>. Upgrade <strong>pui-cli 9</strong> and <strong>pui-app-sdk</strong> on the <strong>same release train</strong> — shared Storybook config is published from pui-app-sdk (<code>lib/utils/storybook/*.ts</code> → <code>dist/</code>).</p>
|
|
193
247
|
<p><strong>Agent skill:</strong> install the bundled playbook for CJS → ESM migration:</p>
|
|
194
|
-
<div class="language-bash
|
|
195
|
-
<h3 class="anchor
|
|
196
|
-
<table><thead><tr><th>Topic</th><th>Before
|
|
197
|
-
<
|
|
248
|
+
<div class="language-bash codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-bash codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec pui-cli skills install migrate-storybook-out-of-cjs --target all</span><br></div></code></pre></div></div>
|
|
249
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="what-changed-in-pui-app-sdk">What changed in pui-app-sdk<a href="#what-changed-in-pui-app-sdk" class="hash-link" aria-label="Direct link to What changed in pui-app-sdk" title="Direct link to What changed in pui-app-sdk" translate="no"></a></h3>
|
|
250
|
+
<table><thead><tr><th>Topic</th><th>Before</th><th>After (Storybook 10 train)</th></tr></thead><tbody><tr><td>Package paths</td><td><code>@elliemae/pui-app-sdk/storybook/cjs/*</code></td><td><strong><code>@elliemae/pui-app-sdk/storybook/*</code></strong> (compiled <code>dist/esm|cjs/utils/storybook/*</code>)</td></tr><tr><td>Config source</td><td>CJS <code>cjs/main.js</code>, <code>cjs/webpack.js</code>, …</td><td>TypeScript <code>lib/utils/storybook/*.ts</code></td></tr><tr><td>Export API</td><td><code>getConfig()</code> (CJS default)</td><td><strong><code>getStorybookConfig(viteBuilder?)</code></strong> (named export)</td></tr><tr><td>Shared modules</td><td><code>cjs/main</code>, <code>cjs/middleware</code>, …</td><td><code>main</code>, <code>preview</code>, <code>manager</code>, <code>theme</code>, <code>webpack</code>, <code>vite</code>, <code>middleware</code> (deprecated)</td></tr><tr><td><code>.storybook</code> in app-sdk</td><td>CJS wrappers + SB6 webpack hacks</td><td><strong><code>.storybook/*.ts</code></strong> importing source via <code>../lib/utils/storybook/*</code> (dogfood only)</td></tr></tbody></table>
|
|
251
|
+
<p>Consumers import <strong><code>@elliemae/pui-app-sdk/storybook/main</code></strong> — that resolves to <strong>built dist</strong>. Run <code>pnpm run build</code> in app-sdk (or install a published alpha) before Storybook in repos that link app-sdk locally.</p>
|
|
252
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="what-changed-in-pui-cli--storybook">What changed in pui-cli / Storybook<a href="#what-changed-in-pui-cli--storybook" class="hash-link" aria-label="Direct link to What changed in pui-cli / Storybook" title="Direct link to What changed in pui-cli / Storybook" translate="no"></a></h3>
|
|
253
|
+
<table><thead><tr><th>Topic</th><th>Before (Storybook 6)</th><th>After (Storybook 10)</th></tr></thead><tbody><tr><td>CLI</td><td><code>start-storybook</code> / <code>build-storybook</code></td><td><code>storybook dev</code> / <code>storybook build</code></td></tr><tr><td>Consumer <code>.storybook</code></td><td><code>main.js</code> (CJS)</td><td><strong><code>main.mjs</code></strong> (ESM)</td></tr><tr><td>Framework</td><td><code>@storybook/react</code> + <code>core.builder: webpack5</code></td><td><code>@storybook/react-webpack5</code></td></tr><tr><td>Default port</td><td>11000 (pui-cli)</td><td>11000 (unchanged)</td></tr><tr><td>Story globs</td><td><code>../lib</code> only (webpack)</td><td><code>../lib</code> and <code>../app</code></td></tr><tr><td>API middleware</td><td><code>.storybook/middleware.js</code></td><td>Built into pui-cli <code>webpackFinal</code> dev server</td></tr><tr><td>Removed addons</td><td>—</td><td><code>addon-essentials</code>, <code>addon-interactions</code>, <code>addon-links</code> (moved into Storybook core in v9+), <code>addon-events</code>, <code>addon-storysource</code>, <code>storybook-addon-turbo-build</code>, <code>storybook-react-router</code></td></tr><tr><td>JS compiler</td><td>SWC (default in some setups)</td><td><code>@storybook/addon-webpack5-compiler-babel</code> (uses project <code>babel.config.ts</code> → pui-cli <code>babelConfig</code>, including <strong>private class fields/methods</strong>)</td></tr><tr><td>Lib-only packages</td><td>N/A</td><td>Story globs skip <code>../app/**</code> when no <code>app/</code> directory exists</td></tr><tr><td>MDX docs pages</td><td><code>.stories.mdx</code> with SB6 blocks</td><td><strong><code>.mdx</code></strong> for docs-only pages; <code><Meta></code> from <code>@storybook/addon-docs/blocks</code> (MDX3)</td></tr></tbody></table>
|
|
254
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="consumer-migration-1">Consumer migration<a href="#consumer-migration-1" class="hash-link" aria-label="Direct link to Consumer migration" title="Direct link to Consumer migration" translate="no"></a></h3>
|
|
198
255
|
<ol>
|
|
199
|
-
<li class="">Bump <code>@elliemae/pui-cli@9</code> and <code>@elliemae/pui-app-sdk@*</code> (same release train).</li>
|
|
256
|
+
<li class="">Bump <code>@elliemae/pui-cli@9</code> and <code>@elliemae/pui-app-sdk@*</code> (same release train). Reinstall after bumping a local <code>file:</code> app-sdk link.</li>
|
|
200
257
|
<li class="">Rename <code>.storybook/main.js</code> → <code>.storybook/main.mjs</code>:</li>
|
|
201
258
|
</ol>
|
|
202
|
-
<div class="language-javascript
|
|
259
|
+
<div class="language-javascript codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-javascript codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><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"> getStorybookConfig </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">'@elliemae/pui-app-sdk/storybook/main'</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 function" style="color:#d73a49">getStorybookConfig</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>
|
|
260
|
+
<p><strong>Do not</strong> use <code>getConfig</code>, <code>require('…/storybook/cjs/main')</code>, or import app-sdk storybook paths before app-sdk is built.</p>
|
|
203
261
|
<ol start="3">
|
|
204
|
-
<li class="">Convert other <code>.storybook/*.js</code> wrappers to <code>.mjs</code>
|
|
205
|
-
<li class="">Delete <code>.storybook/middleware.js</code> — mock API routes are registered by pui-cli during <code>storybook dev</code>.
|
|
206
|
-
<li class="">Update
|
|
207
|
-
<li class="">
|
|
262
|
+
<li class="">Convert other <code>.storybook/*.js</code> wrappers to <code>.mjs</code> when they use <code>import</code>/<code>export</code> (<code>preview.mjs</code>, <code>manager.mjs</code>, <code>theme.mjs</code>). See <code>migrate-storybook-out-of-cjs</code> for preview/manager/theme patterns.</li>
|
|
263
|
+
<li class="">Delete <code>.storybook/middleware.js</code> — mock API routes are registered by pui-cli during <code>storybook dev</code>. <code>@elliemae/pui-app-sdk/storybook/middleware</code> remains as a <strong>deprecated</strong> export only for legacy repos.</li>
|
|
264
|
+
<li class="">Update stories to CSF3 / <code>@storybook/react-webpack5</code> types where needed.</li>
|
|
265
|
+
<li class="">Rename docs-only <strong><code>*.stories.mdx</code></strong> → <strong><code>*.mdx</code></strong> if Storybook fails to index with “Invariant failed”.</li>
|
|
266
|
+
<li class="">Remove Storybook 6 webpack alias workarounds (MDX pinning, react-select hacks) unless a specific story still fails after upgrade.</li>
|
|
267
|
+
<li class="">Migrate consumer <strong><code>babel.config.cjs</code> → <code>babel.config.ts</code></strong> (see <a href="#2b-migrate-babel-config-to-typescript" class="">§2b</a>). <strong>Do not</strong> add Babel private-method plugins locally — pui-cli 9 includes <code>@babel/plugin-transform-private-methods</code> and <code>@babel/plugin-transform-private-property-in-object</code> in shared <code>babelConfig</code> (required for app-sdk private class syntax under the Storybook Babel compiler).</li>
|
|
208
268
|
</ol>
|
|
209
|
-
<
|
|
210
|
-
<
|
|
211
|
-
<
|
|
269
|
+
<p>Monorepo lib packages without <code>app/</code> may filter story globs in <code>main.mjs</code> — see <code>pui-mono-repo-boilerplate/libs/foo</code>.</p>
|
|
270
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="verify">Verify<a href="#verify" class="hash-link" aria-label="Direct link to Verify" title="Direct link to Verify" translate="no"></a></h3>
|
|
271
|
+
<div class="language-bash codeBlockContainer_xJos theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HrWh"><pre tabindex="0" class="prism-code language-bash codeBlock_wqKj thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tOUB"><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec pui-cli storybook # dev on port 11000</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec pui-cli storybook -b # static build to demo/</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec pui-cli storybook -b --docs # docs build</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">pnpm exec pui-cli lint # stories + .storybook/</span><br></div></code></pre></div></div>
|
|
272
|
+
<h3 class="anchor anchorTargetStickyNavbar_a4V3" id="troubleshooting">Troubleshooting<a href="#troubleshooting" class="hash-link" aria-label="Direct link to Troubleshooting" title="Direct link to Troubleshooting" translate="no"></a></h3>
|
|
273
|
+
<table><thead><tr><th>Symptom</th><th>Fix</th></tr></thead><tbody><tr><td><code>Cannot find module '…/dist/esm/utils/storybook/main.js'</code></td><td>Build app-sdk (<code>pnpm run build</code>) or use a published app-sdk version; consumers must not import storybook from unpublished source</td></tr><tr><td><code>getConfig is not a function</code></td><td>Use <strong><code>getStorybookConfig</code></strong> named import</td></tr><tr><td><code>Cannot find module '…/storybook/cjs/main'</code></td><td>Migrate to <code>@elliemae/pui-app-sdk/storybook/main</code></td></tr><tr><td><code>Class private methods are not enabled</code></td><td>Upgrade to pui-cli 9 with private-method Babel plugins; remove duplicate plugins from consumer Babel config</td></tr><tr><td>Babel cannot load <code>babel.config.ts</code></td><td>Confirm Node <strong>24</strong> (<code>.node-version</code>, CI image); pui-cli 9 requires Node 24 for native TS config loading</td></tr><tr><td><code>Unable to index …stories.mdx</code> / Invariant failed</td><td>Rename docs-only file to <code>.mdx</code>; use <code>@storybook/addon-docs/blocks</code> for <code><Meta></code></td></tr><tr><td>SWC / native binding errors</td><td>pui-cli removes SWC from Storybook webpack; ensure Babel compiler addon loads via NODE_PATH</td></tr><tr><td>API mocks missing</td><td>Delete <code>middleware.js</code>; use <code>pui-cli storybook</code> (not legacy CLI)</td></tr></tbody></table>
|
|
274
|
+
<p>Pilot reference: <code>pui-mono-repo-boilerplate/libs/foo</code>, <code>pui-react-boilerplate</code>, <code>pui-app-sdk</code> (dogfood <code>.storybook/*.ts</code>).</p>
|
|
212
275
|
<hr>
|
|
213
|
-
<h2 class="anchor
|
|
214
|
-
<ul class="contains-task-list
|
|
276
|
+
<h2 class="anchor anchorTargetStickyNavbar_a4V3" id="ci-checklist">CI checklist<a href="#ci-checklist" class="hash-link" aria-label="Direct link to CI checklist" title="Direct link to CI checklist" translate="no"></a></h2>
|
|
277
|
+
<ul class="contains-task-list containsTaskList_WKF2">
|
|
215
278
|
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Node 24 in pipeline</li>
|
|
216
279
|
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->pnpm 11 in pipeline</li>
|
|
280
|
+
<li class="task-list-item"><input type="checkbox" disabled=""> <code>babel.config.ts</code> re-exports pui-cli <code>babelConfig</code> (no root <code>babel.config.cjs</code>)</li>
|
|
217
281
|
<li class="task-list-item"><input type="checkbox" disabled=""> <code>shamefullyHoist</code> (and related settings) in <code>pnpm-workspace.yaml</code>, not <code>.npmrc</code></li>
|
|
218
282
|
<li class="task-list-item"><input type="checkbox" disabled=""> <code>pnpm run build</code> after clean install (webpack resolves hoisted deps)</li>
|
|
219
283
|
<li class="task-list-item"><input type="checkbox" disabled=""> <code>pui-cli lint</code> (0 errors)</li>
|
|
@@ -226,12 +290,12 @@ For ESLint rule-level detail, see <a class="" href="/cli/eslint-rules-migration"
|
|
|
226
290
|
<li class="task-list-item"><input type="checkbox" disabled=""> <code>pui-cli version --help</code> or dry-run versioning (monorepos that publish packages)</li>
|
|
227
291
|
</ul>
|
|
228
292
|
<hr>
|
|
229
|
-
<h2 class="anchor
|
|
293
|
+
<h2 class="anchor anchorTargetStickyNavbar_a4V3" id="getting-help">Getting help<a href="#getting-help" class="hash-link" aria-label="Direct link to Getting help" title="Direct link to Getting help" translate="no"></a></h2>
|
|
230
294
|
<ul>
|
|
231
295
|
<li class=""><strong>Rule changes:</strong> <a class="" href="/cli/eslint-rules-migration">eslint-rules-migration.md</a></li>
|
|
232
296
|
<li class=""><strong>Stylelint changes:</strong> <a class="" href="/cli/stylelint-migration">stylelint-migration.md</a></li>
|
|
233
297
|
<li class=""><strong>Commands:</strong> <a class="" href="/cli/usage-guide">usage guide</a></li>
|
|
234
298
|
<li class=""><strong>Platform team:</strong> <code>#pui-platform</code> or your team's platform-ui channel</li>
|
|
235
|
-
</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
|
|
299
|
+
</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_wx0h"><a href="https://git.elliemae.io/platform-ui/pui-cli.git/docs/pui-cli-9-migration.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_HJtS" 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_rV1z"></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/"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">PUI CLI Documentation</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/cli/ssl-certificate-setup"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Trust SSL Certificate Guide</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_Vnv3 thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#at-a-glance" class="table-of-contents__link toc-highlight">At a glance</a></li><li><a href="#recommended-rollout" class="table-of-contents__link toc-highlight">Recommended rollout</a></li><li><a href="#step-by-step" class="table-of-contents__link toc-highlight">Step-by-step</a><ul><li><a href="#1-upgrade-toolchain" class="table-of-contents__link toc-highlight">1. Upgrade toolchain</a></li><li><a href="#1b-migrate-pnpm-hoisting-to-pnpm-workspaceyaml-pnpm-11" class="table-of-contents__link toc-highlight">1b. Migrate pnpm hoisting to <code>pnpm-workspace.yaml</code> (pnpm 11)</a></li><li><a href="#2-upgrade-pui-cli" class="table-of-contents__link toc-highlight">2. Upgrade pui-cli</a></li><li><a href="#2b-migrate-babel-config-to-typescript" class="table-of-contents__link toc-highlight">2b. Migrate Babel config to TypeScript</a></li><li><a href="#2c-migrate-prettier-and-commitlint-configs-to-esm" class="table-of-contents__link toc-highlight">2c. Migrate Prettier and Commitlint configs to ESM</a></li><li><a href="#3-add-flat-eslint-config" class="table-of-contents__link toc-highlight">3. Add flat ESLint config</a></li><li><a href="#4-update-stylelint-config" class="table-of-contents__link toc-highlight">4. Update Stylelint config</a></li><li><a href="#5-fix-lint" class="table-of-contents__link toc-highlight">5. Fix lint</a></li><li><a href="#6-install-the-migration-skill-optional" class="table-of-contents__link toc-highlight">6. Install the migration skill (optional)</a></li></ul></li><li><a href="#temporary-overrides" class="table-of-contents__link toc-highlight">Temporary overrides</a></li><li><a href="#strict-config-after-cleanup" class="table-of-contents__link toc-highlight">Strict config (after cleanup)</a></li><li><a href="#husky-9" class="table-of-contents__link toc-highlight">Husky 9</a></li><li><a href="#jest-30-pui-cli-test" class="table-of-contents__link toc-highlight">Jest 30 (<code>pui-cli test</code>)</a><ul><li><a href="#consumer-migration" class="table-of-contents__link toc-highlight">Consumer migration</a></li><li><a href="#shared-setup" class="table-of-contents__link toc-highlight">Shared setup</a></li></ul></li><li><a href="#vitest-4" class="table-of-contents__link toc-highlight">Vitest 4</a></li><li><a href="#semantic-release-25" class="table-of-contents__link toc-highlight">semantic-release 25</a><ul><li><a href="#1-upgrade-semantic-release-if-pinned-locally" class="table-of-contents__link toc-highlight">1. Upgrade semantic-release (if pinned locally)</a></li><li><a href="#2-migrate-release-config-to-esm" class="table-of-contents__link toc-highlight">2. Migrate release config to ESM</a></li><li><a href="#3-custom-plugins-or-overrides" class="table-of-contents__link toc-highlight">3. Custom plugins or overrides</a></li><li><a href="#4-verify-locally" class="table-of-contents__link toc-highlight">4. Verify locally</a></li><li><a href="#agent-assisted-migration" class="table-of-contents__link toc-highlight">Agent-assisted migration</a></li></ul></li><li><a href="#lerna-9-and-nx-22-monorepos-only" class="table-of-contents__link toc-highlight">Lerna 9 and Nx 22 (monorepos only)</a><ul><li><a href="#1-remove-legacy-nx-package-pins" class="table-of-contents__link toc-highlight">1. Remove legacy Nx package pins</a></li><li><a href="#2-migrate-nxjson" class="table-of-contents__link toc-highlight">2. Migrate <code>nx.json</code></a></li><li><a href="#3-lerna-9-notes" class="table-of-contents__link toc-highlight">3. Lerna 9 notes</a></li><li><a href="#4-verify-monorepo-workflows" class="table-of-contents__link toc-highlight">4. Verify monorepo workflows</a></li></ul></li><li><a href="#storybook-10-pui-cli-9--pui-app-sdk" class="table-of-contents__link toc-highlight">Storybook 10 (pui-cli 9 + pui-app-sdk)</a><ul><li><a href="#what-changed-in-pui-app-sdk" class="table-of-contents__link toc-highlight">What changed in pui-app-sdk</a></li><li><a href="#what-changed-in-pui-cli--storybook" class="table-of-contents__link toc-highlight">What changed in pui-cli / Storybook</a></li><li><a href="#consumer-migration-1" class="table-of-contents__link toc-highlight">Consumer migration</a></li><li><a href="#verify" class="table-of-contents__link toc-highlight">Verify</a></li><li><a href="#troubleshooting" class="table-of-contents__link toc-highlight">Troubleshooting</a></li></ul></li><li><a href="#ci-checklist" class="table-of-contents__link toc-highlight">CI checklist</a></li><li><a href="#getting-help" class="table-of-contents__link toc-highlight">Getting 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_gBgG"><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_gBgG"><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>
|
|
236
300
|
</body>
|
|
237
301
|
</html>
|