@salesforce/pwa-kit-dev 3.9.0-nightly-20241206080208 → 4.0.0-extensibility-preview.0

package/bin/pwa-kit-dev.js

@@ -14,6 +14,13 @@ const program = require('commander')
 const validator = require('validator')
 const {execSync: _execSync} = require('child_process')
 const {getConfig} = require('@salesforce/pwa-kit-runtime/utils/ssr-config')
+const {
+    buildBabelExtensibilityArgs
+} = require('@salesforce/pwa-kit-extension-sdk/configs/babel/utils')
+const {
+    getConfiguredExtensions,
+    validateExtensionDependencies
+} = require('@salesforce/pwa-kit-extension-sdk/shared/utils')
 
 // Scripts in ./bin have never gone through babel, so we
 // don't have a good pattern for mixing compiled/un-compiled
@@ -59,17 +66,24 @@ const getProjectName = async () => {
     return projectPkg.name
 }
 
-const getAppEntrypoint = async () => {
-    const defaultPath = p.join(process.cwd(), 'app', 'ssr.js')
-    if (await fse.pathExists(defaultPath)) return defaultPath
-
-    const projectPkg = await scriptUtils.getProjectPkg()
-    const {overridesDir} = projectPkg?.ccExtensibility ?? {}
-    if (!overridesDir || typeof overridesDir !== 'string') return null
+const getAppEntrypoint = () => {
+    return p.join(process.cwd(), 'app', 'ssr.js')
+}
 
-    const overridePath = p.join(process.cwd(), p.sep + overridesDir, 'app', 'ssr.js')
-    if (await fse.pathExists(overridePath)) return overridePath
-    return null
+/**
+ * For some commands, we like to validate the configuration first before proceeding with the rest of the command.
+ * Currently, we're only validating the app extensions, but we plan to validate other parts of the config in the future.
+ */
+const validateAppConfiguration = () => {
+    const extensions = getConfiguredExtensions(getConfig())
+    if (extensions.length > 0) {
+        info('Validating app extensions...')
+        const {success, errors} = validateExtensionDependencies(extensions)
+        if (!success) {
+            errors.forEach((e) => error(e.message))
+            throw new Error('Please double-check your configuration.')
+        }
+    }
 }
 
 const main = async () => {
@@ -238,6 +252,9 @@ const main = async () => {
             ).default('--extensions ".js,.jsx,.ts,.tsx"')
         )
         .action(async ({inspect, noHMR, babelArgs}) => {
+            validateAppConfiguration()
+
+            info('Starting server...')
             // We use @babel/node instead of node because we want to support ES6 import syntax
             const babelNode = p.join(
                 require.resolve('webpack'),
@@ -248,18 +265,17 @@ const main = async () => {
                 'babel-node'
             )
 
-            const entrypoint = await getAppEntrypoint()
-            if (!entrypoint) {
-                error('Could not determine app entrypoint.')
-                process.exit(1)
-            }
-
-            execSync(`${babelNode} ${inspect ? '--inspect' : ''} ${babelArgs} ${entrypoint}`, {
-                env: {
-                    ...process.env,
-                    ...(noHMR ? {HMR: 'false'} : {})
+            execSync(
+                `"${babelNode}" ${inspect ? '--inspect' : ''} ${buildBabelExtensibilityArgs(
+                    getConfig()
+                )} ${babelArgs} "${getAppEntrypoint()}"`,
+                {
+                    env: {
+                        ...process.env,
+                        ...(noHMR ? {HMR: 'false'} : {})
+                    }
                 }
-            })
+            )
         })
 
     program
@@ -274,6 +290,9 @@ const main = async () => {
         )
         .description(`build your app for production`)
         .action(async ({buildDirectory}) => {
+            validateAppConfiguration()
+
+            info('Building...')
             const webpack = p.join(require.resolve('webpack'), '..', '..', '..', '.bin', 'webpack')
             const projectWebpack = p.join(process.cwd(), 'webpack.config.js')
             const webpackConf = fse.pathExistsSync(projectWebpack)
@@ -309,6 +328,8 @@ const main = async () => {
                     '// This file is required by Managed Runtime for historical reasons.\n'
                 )
             }
+
+            success(`Build directory is at ${buildDirectory}`)
         })
 
     managedRuntimeCommand('push')
@@ -424,7 +445,9 @@ const main = async () => {
         .action(async (path, {fix}) => {
             const eslint = p.join(require.resolve('eslint'), '..', '..', '..', '.bin', 'eslint')
             execSync(
-                `${eslint} --resolve-plugins-relative-to ${pkgRoot}${fix ? ' --fix' : ''} "${path}"`
+                `"${eslint}" --resolve-plugins-relative-to "${pkgRoot}"${
+                    fix ? ' --fix' : ''
+                } "${path}"`
             )
         })
 
@@ -434,16 +457,19 @@ const main = async () => {
         .argument('<path>', 'path or glob to format')
         .action(async (path) => {
             const prettier = p.join(require.resolve('prettier'), '..', '..', '.bin', 'prettier')
-            execSync(`${prettier} --write "${path}"`)
+            execSync(`"${prettier}" --write "${path}"`)
         })
 
     program
         .command('test')
+        .allowUnknownOption()
         .description('test the project')
         .action(async (_, {args}) => {
             const jest = p.join(require.resolve('jest'), '..', '..', '..', '.bin', 'jest')
             execSync(
-                `${jest} --passWithNoTests --maxWorkers=2${args.length ? ' ' + args.join(' ') : ''}`
+                `"${jest}" --passWithNoTests --maxWorkers=2${
+                    args.length ? ' ' + args.join(' ') : ''
+                }`
             )
         })
 

package/configs/babel/babel-config.js

@@ -4,30 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _utils = require("@salesforce/pwa-kit-extension-sdk/shared/utils");
+var _ssrConfig = require("@salesforce/pwa-kit-runtime/utils/ssr-config");
 /*
  * Copyright (c) 2021, salesforce.com, inc.
  * All rights reserved.
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
-const config = {
+// PWA-Kit Imports
+var _default = exports.default = {
   sourceType: 'unambiguous',
   presets: [[require('@babel/preset-env'), {
     targets: {
       node: 18
     }
   }], require('@babel/preset-typescript'), require('@babel/preset-react')],
-  plugins: [require('@babel/plugin-transform-async-to-generator'), require('@babel/plugin-proposal-object-rest-spread'), require('@babel/plugin-transform-object-assign'), [require('@babel/plugin-transform-runtime'), {
+  plugins: [[require('@salesforce/pwa-kit-extension-sdk/configs/babel/plugin-application-extensions'), {
+    target: 'node',
+    configured: (0, _utils.getConfiguredExtensions)((0, _ssrConfig.getConfig)())
+  }], require('@babel/plugin-transform-async-to-generator'), require('@babel/plugin-proposal-object-rest-spread'), require('@babel/plugin-transform-object-assign'), [require('@babel/plugin-transform-runtime'), {
     regenerator: true
   }], require('@babel/plugin-syntax-dynamic-import'), require('@loadable/babel-plugin'), require('@babel/plugin-proposal-optional-chaining'), [require('babel-plugin-formatjs'), {
     idInterpolationPattern: '[sha512:contenthash:base64:6]',
     ast: true
-  }], require('@babel/plugin-transform-async-generator-functions')],
+  }], require('@babel/plugin-transform-async-generator-functions')].filter(Boolean),
   env: {
     test: {
       presets: [require('@babel/preset-env'), require('@babel/preset-react')],
       plugins: [require('babel-plugin-dynamic-import-node-babel-7')]
     }
   }
-};
-var _default = exports.default = config;
+};

package/configs/jest/jest-babel-transform.js

@@ -13,7 +13,7 @@
 /* eslint-env node */
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const babelJest = require('babel-jest');
+const babelJest = require('babel-jest').default;
 module.exports = babelJest.createTransformer({
   rootMode: 'upward'
 });

package/configs/jest/jest.config.js

@@ -13,16 +13,18 @@ module.exports = {
   testURL: 'http://localhost/',
   verbose: true,
   collectCoverage: true,
+  coveragePathIgnorePatterns: ['app/application-extensions', '/node_modules/'],
   // We need access to jsdom globally in tests.
   // jsdom isn't accessible so we need to use this
   // 3rd party test environment wrapper. When we
   // upgrade to jest 28, we can revert back to jsdom.
   testEnvironment: 'jest-environment-jsdom-global',
-  testPathIgnorePatterns: ['node_modules', 'build'],
+  testPathIgnorePatterns: ['node_modules', 'build', 'app/application-extensions'],
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': _path.default.join(__dirname, 'mocks', 'fileMock.js'),
     '\\.(svg)$': _path.default.join(__dirname, 'mocks', 'svgMock.js'),
-    '\\.(css|less)$': _path.default.join(__dirname, 'mocks', 'styleMock.js')
+    '\\.(css|less)$': _path.default.join(__dirname, 'mocks', 'styleMock.js'),
+    'tsx/cjs/api': '<rootDir>/node_modules/tsx/dist/cjs/api/index.cjs'
   },
   globals: {
     DEBUG: true,

package/configs/webpack/config.js

@@ -3,37 +3,39 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EXT_OVERRIDES_DIR_NO_SLASH = exports.EXT_OVERRIDES_DIR = exports.EXT_EXTENDS_WIN = exports.EXT_EXTENDS = exports.EXT_EXTENDABLE = exports.DEPS_TO_DEDUPE = void 0;
-var _path = _interopRequireWildcard(require("path"));
+exports.SUPPORTED_FILE_EXTENSIONS = exports.EXTENIONS_NAMESPACE = exports.DEPS_TO_DEDUPE = void 0;
+var _webpackBundleAnalyzer = require("webpack-bundle-analyzer");
+var _path = require("path");
 var _fsExtra = _interopRequireDefault(require("fs-extra"));
 var _webpack = _interopRequireDefault(require("webpack"));
-var _webpackNotifier = _interopRequireDefault(require("webpack-notifier"));
 var _copyWebpackPlugin = _interopRequireDefault(require("copy-webpack-plugin"));
-var _webpackBundleAnalyzer = require("webpack-bundle-analyzer");
 var _webpackPlugin = _interopRequireDefault(require("@loadable/webpack-plugin"));
 var _reactRefreshWebpackPlugin = _interopRequireDefault(require("@pmmmwh/react-refresh-webpack-plugin"));
 var _speedMeasureWebpackPlugin = _interopRequireDefault(require("speed-measure-webpack-plugin"));
-var _overridesPlugin = _interopRequireDefault(require("./overrides-plugin"));
+var _webpackNotifier = _interopRequireDefault(require("webpack-notifier"));
+var _applicationExtensionsConfigPlugin = _interopRequireDefault(require("@salesforce/pwa-kit-extension-sdk/configs/webpack/application-extensions-config-plugin"));
 var _plugins = require("./plugins");
 var _configNames = require("./config-names");
-var _pkg$ccExtensibility, _pkg$ccExtensibility2, _pkg$ccExtensibility3, _pkg$ccExtensibility4, _pkg$ccExtensibility5, _pkg$ccExtensibility6, _pkg$ccExtensibility7, _pkg$ccExtensibility8, _pkg$ccExtensibility9, _pkg$ccExtensibility10, _pkg$ccExtensibility11, _pkg$ccExtensibility12;
-/*
- * Copyright (c) 2021, salesforce.com, inc.
- * All rights reserved.
- * SPDX-License-Identifier: BSD-3-Clause
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
- */
-/* eslint-env node */
-// For more information on these settings, see https://webpack.js.org/configuration
+var _webpack2 = require("@salesforce/pwa-kit-extension-sdk/configs/webpack");
+var _ssrConfig = require("@salesforce/pwa-kit-runtime/utils/ssr-config");
+var _utils = require("@salesforce/pwa-kit-extension-sdk/shared/utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */ /* eslint-env node */ // For more information on these settings, see https://webpack.js.org/configuration
+// Third-Party Plugins
+// PWA-Kit Plugins
+// Local Plugins
+// Constants
+// Utilities
 const projectDir = process.cwd();
 const pkg = _fsExtra.default.readJsonSync((0, _path.resolve)(projectDir, 'package.json'));
 const buildDir = process.env.PWA_KIT_BUILD_DIR ? (0, _path.resolve)(process.env.PWA_KIT_BUILD_DIR) : (0, _path.resolve)(projectDir, 'build');
@@ -45,16 +47,11 @@ const INSPECT = process.execArgv.some(arg => /^--inspect(?:-brk)?(?:$|=)/.test(a
 const DEBUG = mode !== production && process.env.DEBUG === 'true';
 const CI = process.env.CI;
 const disableHMR = process.env.HMR === 'false';
+const EXTENIONS_NAMESPACE = exports.EXTENIONS_NAMESPACE = '__extensions';
 if ([production, development].indexOf(mode) < 0) {
   throw new Error(`Invalid mode "${mode}"`);
 }
-
-// for API convenience, add the leading slash if missing
-const EXT_OVERRIDES_DIR = exports.EXT_OVERRIDES_DIR = typeof (pkg === null || pkg === void 0 ? void 0 : (_pkg$ccExtensibility = pkg.ccExtensibility) === null || _pkg$ccExtensibility === void 0 ? void 0 : _pkg$ccExtensibility.overridesDir) === 'string' && !(pkg !== null && pkg !== void 0 && (_pkg$ccExtensibility2 = pkg.ccExtensibility) !== null && _pkg$ccExtensibility2 !== void 0 && (_pkg$ccExtensibility3 = _pkg$ccExtensibility2.overridesDir) !== null && _pkg$ccExtensibility3 !== void 0 && _pkg$ccExtensibility3.match(/(^\/|^\\)/)) ? '/' + (pkg === null || pkg === void 0 ? void 0 : (_pkg$ccExtensibility4 = pkg.ccExtensibility) === null || _pkg$ccExtensibility4 === void 0 ? void 0 : (_pkg$ccExtensibility5 = _pkg$ccExtensibility4.overridesDir) === null || _pkg$ccExtensibility5 === void 0 ? void 0 : _pkg$ccExtensibility5.replace(/\\/g, '/')) : pkg !== null && pkg !== void 0 && (_pkg$ccExtensibility6 = pkg.ccExtensibility) !== null && _pkg$ccExtensibility6 !== void 0 && _pkg$ccExtensibility6.overridesDir ? pkg === null || pkg === void 0 ? void 0 : (_pkg$ccExtensibility7 = pkg.ccExtensibility) === null || _pkg$ccExtensibility7 === void 0 ? void 0 : (_pkg$ccExtensibility8 = _pkg$ccExtensibility7.overridesDir) === null || _pkg$ccExtensibility8 === void 0 ? void 0 : _pkg$ccExtensibility8.replace(/\\/g, '/') : '';
-const EXT_OVERRIDES_DIR_NO_SLASH = exports.EXT_OVERRIDES_DIR_NO_SLASH = EXT_OVERRIDES_DIR === null || EXT_OVERRIDES_DIR === void 0 ? void 0 : EXT_OVERRIDES_DIR.replace(/^\//, '');
-const EXT_EXTENDS = exports.EXT_EXTENDS = pkg === null || pkg === void 0 ? void 0 : (_pkg$ccExtensibility9 = pkg.ccExtensibility) === null || _pkg$ccExtensibility9 === void 0 ? void 0 : _pkg$ccExtensibility9.extends;
-const EXT_EXTENDS_WIN = exports.EXT_EXTENDS_WIN = pkg === null || pkg === void 0 ? void 0 : (_pkg$ccExtensibility10 = pkg.ccExtensibility) === null || _pkg$ccExtensibility10 === void 0 ? void 0 : (_pkg$ccExtensibility11 = _pkg$ccExtensibility10.extends) === null || _pkg$ccExtensibility11 === void 0 ? void 0 : _pkg$ccExtensibility11.replace('/', '\\');
-const EXT_EXTENDABLE = exports.EXT_EXTENDABLE = pkg === null || pkg === void 0 ? void 0 : (_pkg$ccExtensibility12 = pkg.ccExtensibility) === null || _pkg$ccExtensibility12 === void 0 ? void 0 : _pkg$ccExtensibility12.extendable;
+const SUPPORTED_FILE_EXTENSIONS = exports.SUPPORTED_FILE_EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.json'];
 
 // TODO: can these be handled in package.json as peerDependencies?
 // https://salesforce-internal.slack.com/archives/C0DKK1FJS/p1672939909212589
@@ -62,13 +59,6 @@ const EXT_EXTENDABLE = exports.EXT_EXTENDABLE = pkg === null || pkg === void 0 ?
 // due to to how the sdks work and the potential of these npm deps coming
 // from multiple places, we need to force them to one place where they're found
 const DEPS_TO_DEDUPE = exports.DEPS_TO_DEDUPE = ['babel-runtime', '@tanstack/react-query', '@loadable/component', '@loadable/server', '@loadable/webpack-plugin', 'svg-sprite-loader', 'react', 'react-router-dom', 'react-dom', 'react-helmet', 'webpack-hot-middleware', 'react-intl', '@chakra-ui/icons', '@chakra-ui/react', '@chakra-ui/skip-nav', '@emotion/react'];
-if (EXT_EXTENDABLE && EXT_EXTENDS) {
-  const extendsAsArr = Array.isArray(EXT_EXTENDS) ? EXT_EXTENDS : [EXT_EXTENDS];
-  const conflicts = extendsAsArr.filter(x => EXT_EXTENDABLE === null || EXT_EXTENDABLE === void 0 ? void 0 : EXT_EXTENDABLE.includes(x));
-  if (conflicts !== null && conflicts !== void 0 && conflicts.length) {
-    throw new Error(`Dependencies in 'extendable' and 'extends' cannot overlap, fix these: ${conflicts.join(', ')}"`);
-  }
-}
 const getBundleAnalyzerPlugin = (name = 'report', pluginOptions) => new _webpackBundleAnalyzer.BundleAnalyzerPlugin(_objectSpread({
   analyzerMode: 'static',
   defaultSizes: 'gzip',
@@ -79,18 +69,16 @@ const getBundleAnalyzerPlugin = (name = 'report', pluginOptions) => new _webpack
   statsFilename: `${name}-analyzer-stats.json`
 }, pluginOptions));
 const entryPointExists = segments => {
-  for (let ext of ['.js', '.jsx', '.ts', '.tsx']) {
-    const primary = (0, _path.resolve)(projectDir, ...segments) + ext;
-    const override = EXT_OVERRIDES_DIR ? (0, _path.resolve)(projectDir, EXT_OVERRIDES_DIR_NO_SLASH, ...segments) + ext : null;
-    if (_fsExtra.default.existsSync(primary) || override && _fsExtra.default.existsSync(override)) {
+  for (let ext of SUPPORTED_FILE_EXTENSIONS) {
+    const p = (0, _path.resolve)(projectDir, ...segments) + ext;
+    if (_fsExtra.default.existsSync(p)) {
       return true;
     }
   }
   return false;
 };
-const getAppEntryPoint = () => {
-  return (0, _path.resolve)('./', EXT_OVERRIDES_DIR_NO_SLASH, 'app', 'main');
-};
+const getAppEntryPoint = () => './app/main';
+const getServerEntryPoint = () => './app/ssr.js';
 const getPublicPathEntryPoint = () => {
   return (0, _path.resolve)(projectDir, 'node_modules', '@salesforce', 'pwa-kit-dev', 'ssr', 'server', 'public-path');
 };
@@ -148,34 +136,35 @@ const baseConfig = target => {
           publicPath: '',
           path: buildDir
         },
-        resolve: _objectSpread(_objectSpread({}, EXT_EXTENDS && EXT_OVERRIDES_DIR ? {
-          plugins: [new _overridesPlugin.default({
-            extends: [EXT_EXTENDS],
-            overridesDir: EXT_OVERRIDES_DIR,
-            projectDir: process.cwd()
-          })]
-        } : {}), {}, {
-          extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
-          alias: _objectSpread(_objectSpread(_objectSpread({}, _extends(...DEPS_TO_DEDUPE.map(dep => ({
+        resolve: _objectSpread({
+          extensions: SUPPORTED_FILE_EXTENSIONS,
+          alias: _objectSpread(_objectSpread({}, _extends(...DEPS_TO_DEDUPE.map(dep => ({
             [dep]: findDepInStack(dep)
-          })))), EXT_OVERRIDES_DIR && EXT_EXTENDS ? _extends(
-          // NOTE: when an array of `extends` dirs are accepted, don't coerce here
-          ...[EXT_EXTENDS].map(extendTarget => ({
-            [extendTarget]: _path.default.resolve(projectDir, 'node_modules', ...extendTarget.split('/'))
-          }))) : {}), EXT_EXTENDABLE ? _extends(...[EXT_EXTENDABLE].map(item => ({
-            [item]: _path.default.resolve(projectDir)
-          }))) : {})
+          })))), {}, {
+            // TODO: This alias is temporary. When we investigate turning the retail template into an application extension
+            // we'll have to decide if we want to continue using an alias, or change back to using relative paths.
+            '@salesforce/retail-react-app': projectDir
+          }, (0, _utils.buildAliases)(Object.keys((pkg === null || pkg === void 0 ? void 0 : pkg.devDependencies) || {}).filter(dependency => dependency.match(_utils.nameRegex))))
         }, target === 'web' ? {
           fallback: {
             crypto: false
           }
         } : {}),
-        plugins: [new _webpack.default.DefinePlugin({
+        resolveLoader: {
+          alias: {
+            overridable: findDepInStack('@salesforce/pwa-kit-extension-sdk/configs/webpack/overrides-resolver-loader.js')
+          }
+        },
+        plugins: [new _applicationExtensionsConfigPlugin.default({
+          extensions: (0, _utils.getConfiguredExtensions)((0, _ssrConfig.getConfig)())
+        }), new _webpack.default.DefinePlugin({
           DEBUG,
           NODE_ENV: `'${process.env.NODE_ENV}'`,
           WEBPACK_TARGET: `'${target}'`,
           ['global.GENTLY']: false
-        }), mode === development && new _webpack.default.NoEmitOnErrorsPlugin(), (0, _plugins.sdkReplacementPlugin)(),
+        }),
+        // new SharedStatePlugin(),
+        mode === development && new _webpack.default.NoEmitOnErrorsPlugin(), (0, _plugins.sdkReplacementPlugin)(),
         // Don't chunk if it's a node target – faster Lambda startup.
         target === 'node' && new _webpack.default.optimize.LimitChunkCountPlugin({
           maxChunks: 1
@@ -199,7 +188,17 @@ const baseConfig = target => {
             use: {
               loader: findDepInStack('source-map-loader')
             }
-          }].filter(Boolean)
+          }, (0, _webpack2.ruleForApplicationExtensibility)({
+            loaderOptions: {
+              configured: (0, _utils.getConfiguredExtensions)((0, _ssrConfig.getConfig)()),
+              target: 'web'
+            }
+          }), (0, _webpack2.ruleForApplicationExtensibility)({
+            loaderOptions: {
+              configured: (0, _utils.getConfiguredExtensions)((0, _ssrConfig.getConfig)()),
+              target: 'node'
+            }
+          })].filter(Boolean)
         }
       });
     }
@@ -226,20 +225,7 @@ const withChunking = config => {
       splitChunks: {
         cacheGroups: {
           vendor: {
-            // Three scenarios that we'd like to chunk vendor.js:
-            // 1. The package is in node_modules
-            // 2. The package is one of the monorepo packages.
-            //    This is for local development to ensure the bundle
-            //    composition is the same as a production build
-            // 3. If extending another template, don't include the
-            //    baseline route files in vendor.js
-            test: module => {
-              var _module$context, _module$context2, _module$context2$matc;
-              if (EXT_EXTENDS && EXT_OVERRIDES_DIR && module !== null && module !== void 0 && (_module$context = module.context) !== null && _module$context !== void 0 && _module$context.includes(`${_path.default.sep}${_path.default.sep === '/' ? EXT_EXTENDS : EXT_EXTENDS_WIN}${_path.default.sep}`)) {
-                return false;
-              }
-              return module === null || module === void 0 ? void 0 : (_module$context2 = module.context) === null || _module$context2 === void 0 ? void 0 : (_module$context2$matc = _module$context2.match) === null || _module$context2$matc === void 0 ? void 0 : _module$context2$matc.call(_module$context2, /(node_modules)|(packages\/(.*)dist)/);
-            },
+            test: /(node_modules)|(packages\/.*\/dist)/,
             name: 'vendor',
             chunks: 'all'
           }
@@ -250,22 +236,23 @@ const withChunking = config => {
 };
 const staticFolderCopyPlugin = new _copyWebpackPlugin.default({
   patterns: [{
-    from: _path.default.resolve(`${EXT_OVERRIDES_DIR ? EXT_OVERRIDES_DIR_NO_SLASH + '/' : ''}app/static`).replace(/\\/g, '/'),
-    to: `static/`,
-    noErrorOnMissing: true
-  }]
+    from: 'app/static/',
+    to: 'static/'
+  }, ...(0, _utils.getConfiguredExtensions)((0, _ssrConfig.getConfig)()).map(extension => {
+    const packageName = extension[0];
+    return {
+      from: `${projectDir}/node_modules/${packageName}/static`,
+      to: `static/${EXTENIONS_NAMESPACE}/${packageName}`,
+      // Add exclude for readme file.
+      noErrorOnMissing: true
+    };
+  })]
 });
 const ruleForBabelLoader = babelPlugins => {
-  return _objectSpread(_objectSpread({
+  return {
     id: 'babel-loader',
-    test: /(\.js(x?)|\.ts(x?))$/
-  }, EXT_OVERRIDES_DIR && EXT_EXTENDS ?
-  // TODO: handle for array here when that's supported
-  {
-    exclude: new RegExp(`${_path.default.sep}node_modules(?!${_path.default.sep}${_path.default.sep === '/' ? EXT_EXTENDS : EXT_EXTENDS_WIN})`)
-  } : {
-    exclude: /node_modules/
-  }), {}, {
+    test: /(\.js(x?)|\.ts(x?))$/,
+    // NOTE: Because our extensions are just folders containing source code, we need to ensure that the babel-loader processes them.
     use: [{
       loader: findDepInStack('babel-loader'),
       options: _objectSpread({
@@ -275,7 +262,7 @@ const ruleForBabelLoader = babelPlugins => {
         plugins: babelPlugins
       } : {})
     }]
-  });
+  };
 };
 const findAndReplace = (array = [], findFn = () => {}, replacement) => {
   const clone = array.slice(0);
@@ -292,6 +279,9 @@ const enableReactRefresh = config => {
   }
   const newRule = ruleForBabelLoader([require.resolve('react-refresh/babel')]);
   const rules = findAndReplace(config.module.rules, rule => rule.id === 'babel-loader', newRule);
+
+  // NOTE: This ensures that files processed with the override-loader do not get processed again for hmr.
+  rules[0].exclude = resource => resource.includes('?noHMR=true');
   return _objectSpread(_objectSpread({}, config), {}, {
     module: _objectSpread(_objectSpread({}, config.module), {}, {
       rules
@@ -330,7 +320,7 @@ const optional = (name, path) => {
 const clientOptional = baseConfig('web').extend(config => {
   return _objectSpread(_objectSpread({}, config), {}, {
     name: _configNames.CLIENT_OPTIONAL,
-    entry: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, optional('loader', (0, _path.resolve)(projectDir, EXT_OVERRIDES_DIR, 'app', 'loader.js'))), optional('worker', (0, _path.resolve)(projectDir, 'worker', 'main.js'))), optional('core-polyfill', (0, _path.resolve)(projectDir, 'node_modules', 'core-js'))), optional('fetch-polyfill', (0, _path.resolve)(projectDir, 'node_modules', 'whatwg-fetch'))),
+    entry: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, optional('loader', (0, _path.resolve)(projectDir, 'app', 'loader.js'))), optional('worker', (0, _path.resolve)(projectDir, 'worker', 'main.js'))), optional('core-polyfill', (0, _path.resolve)(projectDir, 'node_modules', 'core-js'))), optional('fetch-polyfill', (0, _path.resolve)(projectDir, 'node_modules', 'whatwg-fetch'))),
     // use source map to make debugging easier
     devtool: mode === development ? 'source-map' : false,
     plugins: [...config.plugins, analyzeBundle && getBundleAnalyzerPlugin(_configNames.CLIENT_OPTIONAL)].filter(Boolean)
@@ -369,7 +359,7 @@ const ssr = (() => {
       } : {}), {}, {
         // Must *not* be named "server". See - https://www.npmjs.com/package/webpack-hot-server-middleware#usage
         name: _configNames.SSR,
-        entry: `.${EXT_OVERRIDES_DIR}/app/ssr.js`,
+        entry: getServerEntryPoint(),
         output: {
           path: buildDir,
           filename: 'ssr.js',
@@ -385,8 +375,7 @@ const ssr = (() => {
 const requestProcessor = entryPointExists(['app', 'request-processor']) && baseConfig('node').extend(config => {
   return _objectSpread(_objectSpread({}, config), {}, {
     name: _configNames.REQUEST_PROCESSOR,
-    // entry: './app/request-processor.js',
-    entry: `.${EXT_OVERRIDES_DIR}/app/request-processor.js`,
+    entry: './app/request-processor.js',
     output: {
       path: buildDir,
       filename: 'request-processor.js',

package/configs/webpack/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.makeRegExp = void 0;
+exports.makeRegExp = exports.kebabToUpperCamelCase = exports.kebabToLowerCamelCase = void 0;
 var _path = _interopRequireDefault(require("path"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*
@@ -20,4 +20,40 @@ const makeRegExp = (str, sep = _path.default.sep) => {
   }
   return new RegExp(str);
 };
-exports.makeRegExp = makeRegExp;
+
+/**
+ * Converts a kebab-case string to UpperCamelCase (PascalCase).
+ *
+ * @param {string} str - The kebab-case string to be converted.
+ * @returns {string} The converted UpperCamelCase string.
+ *
+ * @example
+ * // Returns 'HelloWorld'
+ * kebabToUpperCamelCase('hello-world')
+ *
+ * @example
+ * // Returns 'FooBarBaz'
+ * kebabToUpperCamelCase('foo-bar-baz')
+ */
+exports.makeRegExp = makeRegExp;
+const kebabToUpperCamelCase = str => str.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('');
+
+/**
+ * Converts a kebab-case string to lowerCamelCase.
+ *
+ * The first word in the resulting string will be in lower case, and each subsequent word will start with an uppercase letter.
+ *
+ * @param {string} str - The kebab-case string to be converted.
+ * @returns {string} The converted lowerCamelCase string.
+ *
+ * @example
+ * // Returns 'helloWorld'
+ * kebabToLowerCamelCase('hello-world')
+ *
+ * @example
+ * // Returns 'fooBarBaz'
+ * kebabToLowerCamelCase('foo-bar-baz')
+ */
+exports.kebabToUpperCamelCase = kebabToUpperCamelCase;
+const kebabToLowerCamelCase = str => str.split('-').map((word, index) => index === 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('');
+exports.kebabToLowerCamelCase = kebabToLowerCamelCase;

package/configs/webpack/utils.test.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _utils = require("./utils");
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+describe('kebabToLowerCamelCase', () => {
+  test('converts a simple kebab-case string to lowerCamelCase', () => {
+    expect((0, _utils.kebabToLowerCamelCase)('hello-world')).toBe('helloWorld');
+  });
+  test('converts a multi-word kebab-case string to lowerCamelCase', () => {
+    expect((0, _utils.kebabToLowerCamelCase)('foo-bar-baz')).toBe('fooBarBaz');
+  });
+  test('handles a single word without hyphens', () => {
+    expect((0, _utils.kebabToLowerCamelCase)('hello')).toBe('hello');
+  });
+  test('handles an empty string', () => {
+    expect((0, _utils.kebabToLowerCamelCase)('')).toBe('');
+  });
+  test('converts strings with multiple consecutive hyphens', () => {
+    expect((0, _utils.kebabToLowerCamelCase)('foo--bar--baz')).toBe('fooBarBaz');
+  });
+  test('converts strings with uppercase characters correctly', () => {
+    expect((0, _utils.kebabToLowerCamelCase)('HELLO-WORLD')).toBe('helloWorld');
+  });
+  test('converts strings with mixed case correctly', () => {
+    expect((0, _utils.kebabToLowerCamelCase)('fOo-BaR-bAz')).toBe('fooBarBaz');
+  });
+  test('handles strings that start or end with hyphens', () => {
+    expect((0, _utils.kebabToLowerCamelCase)('-foo-bar-')).toBe('FooBar');
+  });
+});
+describe('kebabToUpperCamelCase', () => {
+  test('converts a simple kebab-case string to UpperCamelCase', () => {
+    expect((0, _utils.kebabToUpperCamelCase)('hello-world')).toBe('HelloWorld');
+  });
+  test('converts a multi-word kebab-case string to UpperCamelCase', () => {
+    expect((0, _utils.kebabToUpperCamelCase)('foo-bar-baz')).toBe('FooBarBaz');
+  });
+  test('handles a single word without hyphens', () => {
+    expect((0, _utils.kebabToUpperCamelCase)('hello')).toBe('Hello');
+  });
+  test('handles an empty string', () => {
+    expect((0, _utils.kebabToUpperCamelCase)('')).toBe('');
+  });
+  test('converts strings with multiple consecutive hyphens', () => {
+    expect((0, _utils.kebabToUpperCamelCase)('foo--bar--baz')).toBe('FooBarBaz');
+  });
+  test('converts strings with uppercase characters correctly', () => {
+    expect((0, _utils.kebabToUpperCamelCase)('HELLO-WORLD')).toBe('HelloWorld');
+  });
+  test('converts strings with mixed case correctly', () => {
+    expect((0, _utils.kebabToUpperCamelCase)('fOo-BaR-bAz')).toBe('FooBarBaz');
+  });
+  test('handles strings that start or end with hyphens', () => {
+    expect((0, _utils.kebabToUpperCamelCase)('-foo-bar-')).toBe('FooBar');
+  });
+});