Update `create-extension` to work in monorepo context (#32514)

* Update create-wc-extension to work in monorepo context

* update lock file

package.json

@@ -16,7 +16,8 @@
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "postinstall": "pnpm git:update-hooks",
-    "git:update-hooks": "rm -r .git/hooks && mkdir -p .git/hooks && husky install"
+    "git:update-hooks": "rm -r .git/hooks && mkdir -p .git/hooks && husky install",
+    "create-extension": "node ./tools/create-extension/index.js"
   },
   "devDependencies": {
     "@automattic/nx-composer": "^0.1.0",
@@ -45,7 +46,9 @@
     "@babel/core": "7.12.9",
     "@wordpress/babel-plugin-import-jsx-pragma": "^3.1.0",
     "@wordpress/babel-preset-default": "^6.4.1",
+    "fs-extra": "^10.0.1",
     "lodash": "^4.17.21",
+    "promptly": "^3.2.0",
     "wp-textdomain": "1.0.1"
   }
 }

plugins/woocommerce-admin/bin/starter-pack/src/index.js

@@ -1,4 +0,0 @@
-// Import SCSS entry file so that webpack picks up changes
-import './index.scss';
-
-console.log( 'hello world' );

plugins/woocommerce-admin/package.json

@@ -209,7 +209,6 @@
 		"eslint-plugin-react": "^7.29.2",
 		"expose-loader": "^3.1.0",
 		"fork-ts-checker-webpack-plugin": "^6.5.0",
-		"fs-extra": "^8.1.0",
 		"jest": "^27.5.1",
 		"jest-environment-jsdom": "~27.5.0",
 		"jest-environment-node": "^27.5.1",

plugins/woocommerce/.gitignore

@@ -34,3 +34,6 @@ i18n/languages/woocommerce.pot
 # Allure directories
 allure-report
 allure-results
+
+# Environment files
+.wp-env.override.json

plugins/woocommerce/changelog/fix-starter-pack-monorepo

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Update create-extension script to function in the monorepo.

pnpm-lock.yaml

@@ -19,6 +19,7 @@ importers:
       '@wordpress/eslint-plugin': ^11.0.0
       '@wordpress/prettier-config': ^1.1.1
       chalk: ^4.1.2
+      fs-extra: ^10.0.1
       glob: ^7.2.0
       husky: ^7.0.4
       jest: ^27.3.1
@@ -27,6 +28,7 @@ importers:
       mkdirp: ^1.0.4
       node-stream-zip: ^1.15.0
       prettier: npm:wp-prettier@^2.2.1-beta-1
+      promptly: ^3.2.0
       request: ^2.88.2
       typescript: 4.2.4
       wp-textdomain: 1.0.1
@@ -34,7 +36,9 @@ importers:
       '@babel/core': 7.12.9
       '@wordpress/babel-plugin-import-jsx-pragma': 3.1.0_@babel+core@7.12.9
       '@wordpress/babel-preset-default': 6.4.1
+      fs-extra: 10.0.1
       lodash: 4.17.21
+      promptly: 3.2.0
       wp-textdomain: 1.0.1
     devDependencies:
       '@automattic/nx-composer': 0.1.0
@@ -1310,7 +1314,6 @@ importers:
       eslint-plugin-react: ^7.29.2
       expose-loader: ^3.1.0
       fork-ts-checker-webpack-plugin: ^6.5.0
-      fs-extra: ^8.1.0
       github-label-sync: ^2.0.2
       grapheme-splitter: ^1.0.4
       gridicons: ^3.4.0
@@ -1511,7 +1514,6 @@ importers:
       eslint-plugin-react: 7.29.4_eslint@8.11.0
       expose-loader: 3.1.0_webpack@5.70.0
       fork-ts-checker-webpack-plugin: 6.5.0_10568ae13669cc833891d65cd6879aa0
-      fs-extra: 8.1.0
       jest: 27.5.1
       jest-environment-jsdom: 27.5.1
       jest-environment-node: 27.5.1
@@ -6987,7 +6989,7 @@ packages:
       chalk: 4.1.2
       emittery: 0.8.1
       exit: 0.1.2
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       jest-changed-files: 27.3.0
       jest-config: 27.3.1
       jest-haste-map: 27.3.1
@@ -7278,7 +7280,7 @@ packages:
       collect-v8-coverage: 1.0.1
       exit: 0.1.2
       glob: 7.2.0
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       istanbul-lib-coverage: 3.2.0
       istanbul-lib-instrument: 4.0.3
       istanbul-lib-report: 3.0.0
@@ -7316,7 +7318,7 @@ packages:
       collect-v8-coverage: 1.0.1
       exit: 0.1.2
       glob: 7.2.0
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       istanbul-lib-coverage: 3.2.0
       istanbul-lib-instrument: 4.0.3
       istanbul-lib-report: 3.0.0
@@ -7586,7 +7588,7 @@ packages:
       chalk: 4.1.2
       convert-source-map: 1.8.0
       fast-json-stable-stringify: 2.1.0
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       jest-haste-map: 27.3.1
       jest-regex-util: 27.0.6
       jest-util: 27.3.1
@@ -8654,7 +8656,7 @@ packages:
       react-refresh: 0.11.0
       schema-utils: 3.1.1
       source-map: 0.7.3
-      webpack: 4.46.0_webpack-cli@3.3.12
+      webpack: 4.46.0_webpack-cli@4.9.2
     dev: true
 
   /@pmmmwh/react-refresh-webpack-plugin/0.5.1_92cb4b81c6b9f71cf92f0bdb85e4210c:
@@ -9037,7 +9039,7 @@ packages:
     peerDependencies:
       '@storybook/addon-actions': '*'
     dependencies:
-      '@storybook/addon-actions': 6.4.19
+      '@storybook/addon-actions': 6.4.19_react-dom@17.0.2+react@17.0.2
       global: 4.4.0
     dev: true
 
@@ -10572,7 +10574,7 @@ packages:
       util-deprecate: 1.0.2
       watchpack: 2.2.0
       webpack: 4.46.0_webpack-cli@3.3.12
-      ws: 8.2.3
+      ws: 8.5.0
     transitivePeerDependencies:
       - '@types/react'
       - acorn
@@ -10648,7 +10650,7 @@ packages:
       util-deprecate: 1.0.2
       watchpack: 2.2.0
       webpack: 4.46.0_webpack-cli@4.9.2
-      ws: 8.2.3
+      ws: 8.5.0
     transitivePeerDependencies:
       - '@types/react'
       - acorn
@@ -10724,7 +10726,7 @@ packages:
       util-deprecate: 1.0.2
       watchpack: 2.2.0
       webpack: 4.46.0_webpack-cli@4.9.2
-      ws: 8.2.3
+      ws: 8.5.0
     transitivePeerDependencies:
       - '@types/react'
       - acorn
@@ -10796,7 +10798,7 @@ packages:
       util-deprecate: 1.0.2
       watchpack: 2.2.0
       webpack: 4.46.0_webpack-cli@3.3.12
-      ws: 8.2.3
+      ws: 8.5.0
     transitivePeerDependencies:
       - '@types/react'
       - acorn
@@ -11350,7 +11352,7 @@ packages:
       react-docgen-typescript: 2.2.2_typescript@4.6.2
       tslib: 2.3.1
       typescript: 4.6.2
-      webpack: 4.46.0_webpack-cli@3.3.12
+      webpack: 4.46.0_webpack-cli@4.9.2
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -12553,7 +12555,6 @@ packages:
       re-resizable: 4.11.0
     transitivePeerDependencies:
       - react
-      - react-dom
     dev: true
 
   /@types/wordpress__compose/4.0.1:
@@ -15639,7 +15640,7 @@ packages:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
     dependencies:
-      debug: 4.3.3
+      debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -17720,8 +17721,8 @@ packages:
   /caniuse-api/3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
     dependencies:
-      browserslist: 4.18.1
+      browserslist: 4.20.2
-      caniuse-lite: 1.0.30001280
+      caniuse-lite: 1.0.30001317
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
 
@@ -18345,10 +18346,6 @@ packages:
       color-convert: 1.9.3
       color-string: 1.9.0
 
-  /colord/2.9.1:
-    resolution: {integrity: sha512-4LBMSt09vR0uLnPVkOUBnmxgoaeN4ewRbx801wY/bXcltXfpR/G46OdWn96XpYmCWuYvO46aBZP4NgX8HpNAcw==}
-    dev: true
-
   /colord/2.9.2:
     resolution: {integrity: sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==}
 
@@ -19509,6 +19506,17 @@ packages:
       supports-color: 9.2.2
     dev: true
 
+  /debug/4.3.4:
+    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+
   /debuglog/1.0.1:
     resolution: {integrity: sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=}
     dev: true
@@ -19659,7 +19667,7 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       globby: 11.1.0
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       is-glob: 4.0.3
       is-path-cwd: 2.2.0
       is-path-inside: 3.0.3
@@ -20198,7 +20206,7 @@ packages:
     resolution: {integrity: sha512-EGAbGvH7j7Xt2nc0E7D99La1OiEs8LnyimkRgwExpUMScN6O+3x9tIWs7PLQZVNx4YD+00skHXPXi1yQHpAmZA==}
     engines: {node: '>=10.13.0'}
     dependencies:
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       tapable: 2.2.1
     dev: true
 
@@ -21503,7 +21511,7 @@ packages:
       ajv: 6.12.6
       chalk: 2.4.2
       cross-spawn: 6.0.5
-      debug: 4.3.3
+      debug: 4.3.4
       doctrine: 3.0.0
       eslint-scope: 5.1.1
       eslint-utils: 1.4.3
@@ -22230,7 +22238,7 @@ packages:
     engines: {node: '>= 10.17.0'}
     hasBin: true
     dependencies:
-      debug: 4.3.3
+      debug: 4.3.4
       get-stream: 5.2.0
       yauzl: 2.10.0
     optionalDependencies:
@@ -22405,7 +22413,7 @@ packages:
     dependencies:
       loader-utils: 2.0.2
       schema-utils: 3.1.1
-      webpack: 4.46.0_webpack-cli@3.3.12
+      webpack: 4.46.0_webpack-cli@4.9.2
     dev: true
 
   /file-loader/6.2.0_webpack@5.64.1:
@@ -22530,7 +22538,7 @@ packages:
     dependencies:
       chalk: 4.1.2
       commander: 5.1.0
-      debug: 4.3.3
+      debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
 
@@ -23002,6 +23010,15 @@ packages:
       rimraf: 2.7.1
     dev: true
 
+  /fs-extra/10.0.1:
+    resolution: {integrity: sha512-NbdoVMZso2Lsrn/QwLXOy6rm0ufY2zEOKCDzJR/0kBsb0E6qed0P3iYK+Ath3BfvXEeu4JhEtXLgILx5psUfag==}
+    engines: {node: '>=12'}
+    dependencies:
+      graceful-fs: 4.2.9
+      jsonfile: 6.1.0
+      universalify: 2.0.0
+    dev: false
+
   /fs-extra/6.0.1:
     resolution: {integrity: sha512-GnyIkKhhzXZUWFCaJzvyDLEEgDkPfb4/TPvJCJVuS8MWZgoSsErf++QpiAlDnKFcqhRlm+tIOcencCjyJE6ZCA==}
     dependencies:
@@ -24244,7 +24261,7 @@ packages:
       pretty-error: 2.1.2
       tapable: 1.1.3
       util.promisify: 1.0.0
-      webpack: 4.46.0_webpack-cli@3.3.12
+      webpack: 4.46.0_webpack-cli@4.9.2
     dev: true
 
   /html-webpack-plugin/5.5.0_webpack@5.70.0:
@@ -24440,7 +24457,7 @@ packages:
     engines: {node: '>= 6.0.0'}
     dependencies:
       agent-base: 5.1.1
-      debug: 4.3.3
+      debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
 
@@ -24449,7 +24466,7 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.3
+      debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -25636,7 +25653,7 @@ packages:
     resolution: {integrity: sha512-R47KzMtDJH6X4/YW9XTx+jrLnZnscW4VpNN+1PViSYTejLVPWv7oov+Duf8YQSPyVRUvueQqz1TcsC6mooZTXw==}
     engines: {node: '>=6'}
     dependencies:
-      debug: 4.3.3
+      debug: 4.3.4
       istanbul-lib-coverage: 2.0.5
       make-dir: 2.1.0
       rimraf: 2.7.1
@@ -25903,7 +25920,7 @@ packages:
       '@jest/types': 27.2.5
       chalk: 4.1.2
       exit: 0.1.2
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       import-local: 3.0.3
       jest-config: 27.3.1
       jest-util: 27.3.1
@@ -26018,7 +26035,7 @@ packages:
       chalk: 4.1.2
       deepmerge: 4.2.2
       glob: 7.2.0
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       is-ci: 3.0.1
       jest-circus: 27.3.1
       jest-environment-jsdom: 27.3.1
@@ -26055,7 +26072,7 @@ packages:
       chalk: 4.1.2
       deepmerge: 4.2.2
       glob: 7.2.0
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       is-ci: 3.0.1
       jest-circus: 27.3.1
       jest-environment-jsdom: 27.3.1
@@ -26094,7 +26111,7 @@ packages:
       ci-info: 3.2.0
       deepmerge: 4.2.2
       glob: 7.2.0
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       jest-circus: 27.3.1
       jest-environment-jsdom: 27.3.1
       jest-environment-node: 27.3.1
@@ -26498,7 +26515,7 @@ packages:
       '@types/node': 16.10.3
       anymatch: 3.1.2
       fb-watchman: 2.0.1
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       jest-regex-util: 27.0.6
       jest-serializer: 27.0.6
       jest-util: 27.3.1
@@ -27007,7 +27024,7 @@ packages:
       '@jest/types': 27.2.5
       chalk: 4.1.2
       escalade: 3.1.1
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       jest-haste-map: 27.3.1
       jest-pnp-resolver: 1.2.2_jest-resolve@27.2.2
       jest-util: 27.3.1
@@ -27022,7 +27039,7 @@ packages:
     dependencies:
       '@jest/types': 27.2.5
       chalk: 4.1.2
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       jest-haste-map: 27.3.1
       jest-pnp-resolver: 1.2.2_jest-resolve@27.3.1
       jest-util: 27.3.1
@@ -27125,7 +27142,7 @@ packages:
       chalk: 4.1.2
       emittery: 0.8.1
       exit: 0.1.2
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       jest-docblock: 27.0.6
       jest-environment-jsdom: 27.3.1
       jest-environment-node: 27.3.1
@@ -27491,7 +27508,7 @@ packages:
       '@jest/types': 27.2.5
       '@types/node': 16.10.3
       chalk: 4.1.2
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       is-ci: 3.0.1
       picomatch: 2.3.0
     dev: true
@@ -29127,7 +29144,7 @@ packages:
   /micromark/2.11.4:
     resolution: {integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==}
     dependencies:
-      debug: 4.3.3
+      debug: 4.3.4
       parse-entities: 2.0.0
     transitivePeerDependencies:
       - supports-color
@@ -31011,8 +31028,8 @@ packages:
       postcss: ^8.2.2
     dependencies:
       postcss: 8.3.0
-      postcss-selector-parser: 6.0.6
+      postcss-selector-parser: 6.0.9
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-calc/8.0.0_postcss@8.3.11:
@@ -31021,8 +31038,8 @@ packages:
       postcss: ^8.2.2
     dependencies:
       postcss: 8.3.11
-      postcss-selector-parser: 6.0.6
+      postcss-selector-parser: 6.0.9
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-color-function/4.1.0:
@@ -31050,11 +31067,11 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.18.1
+      browserslist: 4.20.2
       caniuse-api: 3.0.0
-      colord: 2.9.1
+      colord: 2.9.2
       postcss: 8.3.0
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-colormin/5.2.1_postcss@8.3.11:
@@ -31063,11 +31080,11 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.18.1
+      browserslist: 4.20.2
       caniuse-api: 3.0.0
-      colord: 2.9.1
+      colord: 2.9.2
       postcss: 8.3.11
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-convert-values/4.0.1:
@@ -31084,7 +31101,7 @@ packages:
       postcss: ^8.2.15
     dependencies:
       postcss: 8.3.0
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-convert-values/5.0.2_postcss@8.3.11:
@@ -31094,7 +31111,7 @@ packages:
       postcss: ^8.2.15
     dependencies:
       postcss: 8.3.11
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-custom-properties/10.0.0:
@@ -31280,7 +31297,7 @@ packages:
       postcss: 7.0.39
       schema-utils: 3.1.1
       semver: 7.3.5
-      webpack: 4.46.0_webpack-cli@3.3.12
+      webpack: 4.46.0_webpack-cli@4.9.2
     dev: true
 
   /postcss-loader/6.2.0_postcss@8.3.0+webpack@5.64.1:
@@ -31317,7 +31334,7 @@ packages:
       postcss: ^8.2.15
     dependencies:
       postcss: 8.3.0
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
       stylehacks: 5.0.1_postcss@8.3.0
     dev: true
 
@@ -31328,7 +31345,7 @@ packages:
       postcss: ^8.2.15
     dependencies:
       postcss: 8.3.11
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
       stylehacks: 5.0.1_postcss@8.3.11
     dev: true
 
@@ -31349,11 +31366,11 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.18.1
+      browserslist: 4.20.2
       caniuse-api: 3.0.0
       cssnano-utils: 2.0.1_postcss@8.3.0
       postcss: 8.3.0
-      postcss-selector-parser: 6.0.6
+      postcss-selector-parser: 6.0.9
     dev: true
 
   /postcss-merge-rules/5.0.3_postcss@8.3.11:
@@ -31362,11 +31379,11 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.18.1
+      browserslist: 4.20.2
       caniuse-api: 3.0.0
       cssnano-utils: 2.0.1_postcss@8.3.11
       postcss: 8.3.11
-      postcss-selector-parser: 6.0.6
+      postcss-selector-parser: 6.0.9
     dev: true
 
   /postcss-message-helpers/2.0.0:
@@ -31387,7 +31404,7 @@ packages:
       postcss: ^8.2.15
     dependencies:
       postcss: 8.3.0
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-minify-font-values/5.0.1_postcss@8.3.11:
@@ -31397,7 +31414,7 @@ packages:
       postcss: ^8.2.15
     dependencies:
       postcss: 8.3.11
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-minify-gradients/4.0.2:
@@ -31415,10 +31432,10 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      colord: 2.9.1
+      colord: 2.9.2
       cssnano-utils: 2.0.1_postcss@8.3.0
       postcss: 8.3.0
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-minify-gradients/5.0.3_postcss@8.3.11:
@@ -31427,10 +31444,10 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      colord: 2.9.1
+      colord: 2.9.2
       cssnano-utils: 2.0.1_postcss@8.3.11
       postcss: 8.3.11
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-minify-params/4.0.2:
@@ -31451,10 +31468,10 @@ packages:
       postcss: ^8.2.15
     dependencies:
       alphanum-sort: 1.0.2
-      browserslist: 4.18.1
+      browserslist: 4.20.2
       cssnano-utils: 2.0.1_postcss@8.3.0
       postcss: 8.3.0
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-minify-params/5.0.2_postcss@8.3.11:
@@ -31464,10 +31481,10 @@ packages:
       postcss: ^8.2.15
     dependencies:
       alphanum-sort: 1.0.2
-      browserslist: 4.18.1
+      browserslist: 4.20.2
       cssnano-utils: 2.0.1_postcss@8.3.11
       postcss: 8.3.11
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-minify-selectors/4.0.2:
@@ -31487,7 +31504,7 @@ packages:
     dependencies:
       alphanum-sort: 1.0.2
       postcss: 8.3.0
-      postcss-selector-parser: 6.0.6
+      postcss-selector-parser: 6.0.9
     dev: true
 
   /postcss-minify-selectors/5.1.0_postcss@8.3.11:
@@ -31498,7 +31515,7 @@ packages:
     dependencies:
       alphanum-sort: 1.0.2
       postcss: 8.3.11
-      postcss-selector-parser: 6.0.6
+      postcss-selector-parser: 6.0.9
     dev: true
 
   /postcss-modules-extract-imports/2.0.0:
@@ -31708,7 +31725,7 @@ packages:
     dependencies:
       cssnano-utils: 2.0.1_postcss@8.3.0
       postcss: 8.3.0
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-normalize-display-values/5.0.1_postcss@8.3.11:
@@ -31719,7 +31736,7 @@ packages:
     dependencies:
       cssnano-utils: 2.0.1_postcss@8.3.11
       postcss: 8.3.11
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-normalize-positions/4.0.2:
@@ -31738,7 +31755,7 @@ packages:
       postcss: ^8.2.15
     dependencies:
       postcss: 8.3.0
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-normalize-positions/5.0.1_postcss@8.3.11:
@@ -31748,7 +31765,7 @@ packages:
       postcss: ^8.2.15
     dependencies:
       postcss: 8.3.11
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-normalize-repeat-style/4.0.2:
@@ -31768,7 +31785,7 @@ packages:
     dependencies:
       cssnano-utils: 2.0.1_postcss@8.3.0
       postcss: 8.3.0
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-normalize-repeat-style/5.0.1_postcss@8.3.11:
@@ -31779,7 +31796,7 @@ packages:
     dependencies:
       cssnano-utils: 2.0.1_postcss@8.3.11
       postcss: 8.3.11
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-normalize-string/4.0.2:
@@ -31797,7 +31814,7 @@ packages:
       postcss: ^8.2.15
     dependencies:
       postcss: 8.3.0
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-normalize-string/5.0.1_postcss@8.3.11:
@@ -31807,7 +31824,7 @@ packages:
       postcss: ^8.2.15
     dependencies:
       postcss: 8.3.11
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-normalize-timing-functions/4.0.2:
@@ -31826,7 +31843,7 @@ packages:
     dependencies:
       cssnano-utils: 2.0.1_postcss@8.3.0
       postcss: 8.3.0
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-normalize-timing-functions/5.0.1_postcss@8.3.11:
@@ -31837,7 +31854,7 @@ packages:
     dependencies:
       cssnano-utils: 2.0.1_postcss@8.3.11
       postcss: 8.3.11
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-normalize-unicode/4.0.1:
@@ -31854,9 +31871,9 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.18.1
+      browserslist: 4.20.2
       postcss: 8.3.0
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-normalize-unicode/5.0.1_postcss@8.3.11:
@@ -31865,9 +31882,9 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.18.1
+      browserslist: 4.20.2
       postcss: 8.3.11
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-normalize-url/4.0.1:
@@ -31888,7 +31905,7 @@ packages:
       is-absolute-url: 3.0.3
       normalize-url: 6.1.0
       postcss: 8.3.0
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-normalize-url/5.0.3_postcss@8.3.11:
@@ -31900,7 +31917,7 @@ packages:
       is-absolute-url: 3.0.3
       normalize-url: 6.1.0
       postcss: 8.3.11
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-normalize-whitespace/4.0.2:
@@ -31917,7 +31934,7 @@ packages:
       postcss: ^8.2.15
     dependencies:
       postcss: 8.3.0
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-normalize-whitespace/5.0.1_postcss@8.3.11:
@@ -31927,7 +31944,7 @@ packages:
       postcss: ^8.2.15
     dependencies:
       postcss: 8.3.11
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-ordered-values/4.1.2:
@@ -31946,7 +31963,7 @@ packages:
     dependencies:
       cssnano-utils: 2.0.1_postcss@8.3.0
       postcss: 8.3.0
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-ordered-values/5.0.2_postcss@8.3.11:
@@ -31957,7 +31974,7 @@ packages:
     dependencies:
       cssnano-utils: 2.0.1_postcss@8.3.11
       postcss: 8.3.11
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-reduce-initial/4.0.3:
@@ -31975,7 +31992,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.18.1
+      browserslist: 4.20.2
       caniuse-api: 3.0.0
       postcss: 8.3.0
     dev: true
@@ -31986,7 +32003,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.18.1
+      browserslist: 4.20.2
       caniuse-api: 3.0.0
       postcss: 8.3.11
     dev: true
@@ -32008,7 +32025,7 @@ packages:
     dependencies:
       cssnano-utils: 2.0.1_postcss@8.3.0
       postcss: 8.3.0
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-reduce-transforms/5.0.1_postcss@8.3.11:
@@ -32019,7 +32036,7 @@ packages:
     dependencies:
       cssnano-utils: 2.0.1_postcss@8.3.11
       postcss: 8.3.11
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-resolve-nested-selector/0.1.1:
@@ -32103,7 +32120,7 @@ packages:
       postcss: ^8.2.15
     dependencies:
       postcss: 8.3.0
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
       svgo: 2.8.0
     dev: true
 
@@ -32114,7 +32131,7 @@ packages:
       postcss: ^8.2.15
     dependencies:
       postcss: 8.3.11
-      postcss-value-parser: 4.1.0
+      postcss-value-parser: 4.2.0
       svgo: 2.8.0
     dev: true
 
@@ -32142,7 +32159,7 @@ packages:
     dependencies:
       alphanum-sort: 1.0.2
       postcss: 8.3.0
-      postcss-selector-parser: 6.0.6
+      postcss-selector-parser: 6.0.9
     dev: true
 
   /postcss-unique-selectors/5.0.2_postcss@8.3.11:
@@ -32153,7 +32170,7 @@ packages:
     dependencies:
       alphanum-sort: 1.0.2
       postcss: 8.3.11
-      postcss-selector-parser: 6.0.6
+      postcss-selector-parser: 6.0.9
     dev: true
 
   /postcss-value-parser/3.3.1:
@@ -32439,7 +32456,6 @@ packages:
     resolution: {integrity: sha512-WnR9obtgW+rG4oUV3hSnNGl1pHm3V1H/qD9iJBumGSmVsSC5HpZOLuu8qdMb6yCItGfT7dcRszejr/5P3i9Pug==}
     dependencies:
       read: 1.0.7
-    dev: true
 
   /prompts/2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
@@ -32542,7 +32558,7 @@ packages:
     engines: {node: '>=6.4.0'}
     requiresBuild: true
     dependencies:
-      debug: 4.3.3
+      debug: 4.3.4
       extract-zip: 1.7.0
       https-proxy-agent: 2.2.4
       mime: 2.5.2
@@ -32559,7 +32575,7 @@ packages:
     engines: {node: '>=10.18.1'}
     dependencies:
       '@types/mime-types': 2.1.1
-      debug: 4.3.3
+      debug: 4.3.4
       extract-zip: 2.0.1
       https-proxy-agent: 4.0.0
       mime: 2.5.2
@@ -32568,7 +32584,7 @@ packages:
       proxy-from-env: 1.1.0
       rimraf: 3.0.2
       tar-fs: 2.1.1
-      unbzip2-stream: 1.3.3
+      unbzip2-stream: 1.4.3
       ws: 7.5.5
     transitivePeerDependencies:
       - bufferutil
@@ -32747,7 +32763,7 @@ packages:
     dependencies:
       loader-utils: 2.0.2
       schema-utils: 3.1.1
-      webpack: 4.46.0_webpack-cli@3.3.12
+      webpack: 4.46.0_webpack-cli@4.9.2
     dev: true
 
   /raw-loader/4.0.2_webpack@5.64.1:
@@ -33700,7 +33716,6 @@ packages:
     engines: {node: '>=0.8'}
     dependencies:
       mute-stream: 0.0.8
-    dev: true
 
   /readable-stream/2.3.7:
     resolution: {integrity: sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==}
@@ -35715,7 +35730,7 @@ packages:
     dependencies:
       loader-utils: 2.0.2
       schema-utils: 2.7.1
-      webpack: 4.46.0_webpack-cli@3.3.12
+      webpack: 4.46.0_webpack-cli@4.9.2
     dev: true
 
   /style-loader/2.0.0_webpack@5.70.0:
@@ -35769,9 +35784,9 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.18.1
+      browserslist: 4.20.2
       postcss: 8.3.0
-      postcss-selector-parser: 6.0.6
+      postcss-selector-parser: 6.0.9
     dev: true
 
   /stylehacks/5.0.1_postcss@8.3.11:
@@ -35780,9 +35795,9 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.18.1
+      browserslist: 4.20.2
       postcss: 8.3.11
-      postcss-selector-parser: 6.0.6
+      postcss-selector-parser: 6.0.9
     dev: true
 
   /stylelint-config-recommended-scss/4.3.0_748c5b2cfae76328890a14c0b5cd0d73:
@@ -36456,7 +36471,7 @@ packages:
       serialize-javascript: 5.0.1
       source-map: 0.6.1
       terser: 5.10.0_acorn@7.4.1
-      webpack: 4.46.0_webpack-cli@3.3.12
+      webpack: 4.46.0_webpack-cli@4.9.2
       webpack-sources: 1.4.3
     transitivePeerDependencies:
       - acorn
@@ -36476,7 +36491,7 @@ packages:
       serialize-javascript: 5.0.1
       source-map: 0.6.1
       terser: 5.10.0
-      webpack: 4.46.0_webpack-cli@3.3.12
+      webpack: 4.46.0_webpack-cli@4.9.2
       webpack-sources: 1.4.3
     transitivePeerDependencies:
       - acorn
@@ -37351,8 +37366,8 @@ packages:
       has-symbols: 1.0.2
       which-boxed-primitive: 1.0.2
 
-  /unbzip2-stream/1.3.3:
+  /unbzip2-stream/1.4.3:
-    resolution: {integrity: sha512-fUlAF7U9Ah1Q6EieQ4x4zLNejrRvDWUYmxXUpN3uziFYCHapjWFaCAnreY9bGgxzaMCFAPPpYNng57CypwJVhg==}
+    resolution: {integrity: sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==}
     dependencies:
       buffer: 5.7.1
       through: 2.3.8
@@ -37683,7 +37698,7 @@ packages:
       loader-utils: 2.0.2
       mime-types: 2.1.34
       schema-utils: 3.1.1
-      webpack: 4.46.0_webpack-cli@3.3.12
+      webpack: 4.46.0_webpack-cli@4.9.2
     dev: true
 
   /url-parse-lax/1.0.0:
@@ -38043,7 +38058,7 @@ packages:
     dependencies:
       chalk: 2.4.2
       commander: 3.0.2
-      debug: 4.3.3
+      debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
 
@@ -38085,7 +38100,7 @@ packages:
     engines: {node: '>=10.13.0'}
     dependencies:
       glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
     dev: true
 
   /watchpack/2.3.1:
@@ -38255,7 +38270,7 @@ packages:
       mime: 2.5.2
       mkdirp: 0.5.5
       range-parser: 1.2.1
-      webpack: 4.46.0_webpack-cli@3.3.12
+      webpack: 4.46.0_webpack-cli@4.9.2
       webpack-log: 2.0.0
     dev: true
 
@@ -38307,7 +38322,7 @@ packages:
       connect-history-api-fallback: 1.6.0
       del: 6.0.0
       express: 4.17.1
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       html-entities: 2.3.2
       http-proxy-middleware: 2.0.1
       internal-ip: 6.2.0
@@ -38338,7 +38353,7 @@ packages:
     peerDependencies:
       webpack: ^2.0.0 || ^3.0.0 || ^4.0.0
     dependencies:
-      webpack: 4.46.0_webpack-cli@3.3.12
+      webpack: 4.46.0_webpack-cli@4.9.2
     dev: true
 
   /webpack-fix-style-only-entries/0.6.1:
@@ -38522,7 +38537,7 @@ packages:
       tapable: 1.1.3
       terser-webpack-plugin: 1.4.5_webpack@4.46.0
       watchpack: 1.7.5
-      webpack-cli: 3.3.12_webpack@5.70.0
+      webpack-cli: 3.3.12_webpack@4.46.0
       webpack-sources: 1.4.3
     dev: true
 
@@ -38589,7 +38604,7 @@ packages:
       eslint-scope: 5.1.1
       events: 3.3.0
       glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       json-parse-better-errors: 1.0.2
       loader-runner: 4.2.0
       mime-types: 2.1.34
@@ -39025,6 +39040,19 @@ packages:
         optional: true
     dev: true
 
+  /ws/8.5.0:
+    resolution: {integrity: sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dev: true
+
   /x-is-string/0.1.0:
     resolution: {integrity: sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=}
     dev: true

tools/create-extension/._wp-env.json

@@ -0,0 +1,14 @@
+{
+	"phpVersion": "7.4",
+	"core": null,
+	"plugins": [
+		"https://downloads.wordpress.org/plugin/woocommerce.6.3.1.zip",
+		"."
+	],
+	"config": {
+		"JETPACK_AUTOLOAD_DEV": true,
+		"WP_DEBUG_LOG": true,
+		"WP_DEBUG_DISPLAY": true,
+		"ALTERNATE_WP_CRON": true
+	}
+}

tools/create-extension/README.md

@@ -10,10 +10,8 @@ Scaffold a modern JavaScript WordPress plugin with WooCommerce tooling.
 
 ### Usage
 
-At the root of a [WooCommerce Admin](https://github.com/woocommerce/woocommerce/tree/trunk/plugins/woocommerce-admin) installation, run the create extension command.
-
 ```
-pnpm run create-wc-extension
+pnpm run create-extension
 ```
 
 The script will create a sibling directory by a name of your choosing. Once you change directories into the new folder, install dependencies and start a development build.

tools/create-extension/_main.php

@@ -6,13 +6,17 @@
  */
 
 /**
- * Register the JS.
+ * Register the JS and CSS.
  */
 function add_extension_register_script() {
-	if ( ! class_exists( 'Automattic\WooCommerce\Admin\PageController' ) || ! \Automattic\WooCommerce\Admin\PageController::is_admin_or_embed_page() ) {
+	if ( 
+		! method_exists( 'Automattic\WooCommerce\Admin\Loader', 'is_admin_or_embed_page' ) ||
+		! \Automattic\WooCommerce\Admin\Loader::is_admin_or_embed_page()
+	) {
 		return;
 	}
 
+
 	$script_path       = '/build/index.js';
 	$script_asset_path = dirname( __FILE__ ) . '/build/index.asset.php';
 	$script_asset      = file_exists( $script_asset_path )
@@ -41,3 +45,25 @@ function add_extension_register_script() {
 }
 
 add_action( 'admin_enqueue_scripts', 'add_extension_register_script' );
+
+/**
+ * Register a WooCommerce Admin page.
+ */
+function add_extension_register_page() {
+    if ( ! function_exists( 'wc_admin_register_page' ) ) {
+		return;
+	}
+
+    wc_admin_register_page( array(
+		'id'       => 'my-example-page',
+		'title'    => __( 'My Example Page', 'my-textdomain' ),
+		'parent'   => 'woocommerce',
+		'path'     => '/example',
+		'nav_args' => array(
+			'order'  => 10,
+			'parent' => 'woocommerce',
+		),
+	) );
+}
+
+add_action( 'admin_menu', 'add_extension_register_page' );

tools/create-extension/_package.json

@@ -23,5 +23,8 @@
 		"@wordpress/scripts": "^12.2.1",
 		"@woocommerce/eslint-plugin": "1.1.0",
 		"@woocommerce/dependency-extraction-webpack-plugin": "1.6.0"
+	},
+	"dependencies": {
+		"@wordpress/hooks": "^3.5.0"
 	}
 }

tools/create-extension/index.js

@@ -11,6 +11,7 @@ const files = [
 	'_package.json',
 	'._eslintrc.js',
 	'._prettierrc.json',
+	'._wp-env.json',
 ];
 const maybeThrowError = ( error ) => {
 	if ( error ) throw error;
@@ -37,7 +38,7 @@ const maybeThrowError = ( error ) => {
 		const from = path.join( __dirname, file );
 		const to = path.join(
 			folder,
-			'_main.php' === file
+			file === '_main.php'
 				? `${ extensionSlug }.php`
 				: file.replace( '_', '' )
 		);
@@ -79,10 +80,11 @@ const maybeThrowError = ( error ) => {
 	process.stdout.write( '\n' );
 	console.log(
 		chalk.green(
-			'Run the following commands from the root of the extension and activate the plugin.'
+			'Run the following commands from the root of the extension to scaffold a dev environment.'
 		)
 	);
 	process.stdout.write( '\n' );
+	console.log( 'wp-env start' );
 	console.log( 'pnpm install' );
 	console.log( 'pnpm start' );
 	process.stdout.write( '\n' );

tools/create-extension/src/index.js

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import './index.scss';
+
+const MyExamplePage = () => <h1>My Example Extension</h1>;
+
+addFilter( 'woocommerce_admin_pages_list', 'my-namespace', ( pages ) => {
+	pages.push( {
+		container: MyExamplePage,
+		path: '/example',
+		breadcrumbs: [ 'My Example Page' ],
+		navArgs: {
+			id: 'my-example-page',
+		},
+	} );
+
+	return pages;
+} );