@salesforce/pwa-kit-dev 4.0.0-extensibility-preview.3 → 4.0.0-extensibility-preview.4

package/bin/pwa-kit-dev.js

@@ -473,6 +473,13 @@ const main = async () => {
             )
         })
 
+    program
+        .command('list-overrides')
+        .description('List all overridable files in the project')
+        .action(() => {
+            execSync(p.join('node_modules', '.bin', 'pwa-kit-extension-sdk'))
+        })
+
     managedRuntimeCommand('tail-logs')
         .description(`continuously stream environment logs`)
         .addOption(

package/configs/babel/babel-config.js

@@ -19,7 +19,8 @@ var _default = exports.default = {
   sourceType: 'unambiguous',
   presets: [[require('@babel/preset-env'), {
     targets: {
-      node: 18
+      // The _minimum_ Node version supported. See https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/upgrade-node-version.html#supported-node-versions
+      node: '18'
     }
   }], require('@babel/preset-typescript'), require('@babel/preset-react')],
   plugins: [[require('@salesforce/pwa-kit-extension-sdk/configs/babel/plugin-application-extensions'), {

package/configs/webpack/config.js

@@ -14,6 +14,7 @@ var _reactRefreshWebpackPlugin = _interopRequireDefault(require("@pmmmwh/react-r
 var _speedMeasureWebpackPlugin = _interopRequireDefault(require("speed-measure-webpack-plugin"));
 var _webpackNotifier = _interopRequireDefault(require("webpack-notifier"));
 var _applicationExtensionsConfigPlugin = _interopRequireDefault(require("@salesforce/pwa-kit-extension-sdk/configs/webpack/application-extensions-config-plugin"));
+var _overrideStatsPlugin = _interopRequireDefault(require("@salesforce/pwa-kit-extension-sdk/configs/webpack/override-stats-plugin"));
 var _plugins = require("./plugins");
 var _configNames = require("./config-names");
 var _webpack2 = require("@salesforce/pwa-kit-extension-sdk/configs/webpack");
@@ -98,10 +99,32 @@ const findDepInStack = pkg => {
   }
   return candidate;
 };
+
+// Helper function to detect extensions
+const detectExtensions = ({
+  dependencies,
+  projectDir
+} = {}) => {
+  const extensions = [];
+
+  // Use provided dependencies or get them from package.json
+  const allDependencies = dependencies || [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.devDependencies || {})];
+  for (const dependency of allDependencies) {
+    const packagePath = _path.default.join(projectDir || process.cwd(), 'node_modules', dependency);
+    if ((0, _utils.isExtensionPackage)(packagePath)) {
+      extensions.push(dependency);
+    }
+  }
+  return extensions;
+};
+const detectedExtensions = detectExtensions({
+  projectDir
+});
 const baseConfig = target => {
   if (!['web', 'node'].includes(target)) {
     throw Error(`The value "${target}" is not a supported webpack target`);
   }
+  const extensions = (0, _utils.getConfiguredExtensions)((0, _ssrConfig.getConfig)());
   class Builder {
     constructor() {
       this.config = _objectSpread(_objectSpread({
@@ -143,11 +166,7 @@ const baseConfig = target => {
           extensions: SUPPORTED_FILE_EXTENSIONS,
           alias: _objectSpread(_objectSpread({}, _extends(...DEPS_TO_DEDUPE.map(dep => ({
             [dep]: findDepInStack(dep)
-          })))), {}, {
-            // 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))))
+          })))), (0, _utils.buildAliases)(detectedExtensions))
         }, target === 'web' ? {
           fallback: {
             crypto: false
@@ -159,13 +178,13 @@ const baseConfig = target => {
           }
         },
         plugins: [new _applicationExtensionsConfigPlugin.default({
-          extensions: (0, _utils.getConfiguredExtensions)((0, _ssrConfig.getConfig)())
+          extensions
         }), new _webpack.default.DefinePlugin({
           DEBUG,
           NODE_ENV: `'${process.env.NODE_ENV}'`,
           WEBPACK_TARGET: `'${target}'`,
           ['global.GENTLY']: false
-        }),
+        }), process.env.RECORD_OVERRIDES === 'true' && new _overrideStatsPlugin.default(),
         // new SharedStatePlugin(),
         mode === development && new _webpack.default.NoEmitOnErrorsPlugin(), (0, _plugins.sdkReplacementPlugin)(),
         // Don't chunk if it's a node target – faster Lambda startup.
@@ -193,18 +212,20 @@ const baseConfig = target => {
             }
           }, (0, _webpack2.ruleForApplicationExtensibility)({
             loaderOptions: {
-              configured: (0, _utils.getConfiguredExtensions)((0, _ssrConfig.getConfig)()),
+              configured: extensions,
               target: 'web'
             }
           }), (0, _webpack2.ruleForApplicationExtensibility)({
             loaderOptions: {
-              configured: (0, _utils.getConfiguredExtensions)((0, _ssrConfig.getConfig)()),
+              configured: extensions,
               target: 'node'
             }
           }), (0, _webpack2.ruleForOverrideResolver)({
-            target,
+            extensions,
+            resolveExtensions: SUPPORTED_FILE_EXTENSIONS,
+            isMonoRepo,
             projectDir,
-            isMonoRepo
+            target
           })].filter(Boolean)
         }
       });
@@ -245,24 +266,66 @@ const staticFolderCopyPlugin = new _copyWebpackPlugin.default({
   patterns: [{
     from: 'app/static/',
     to: 'static/'
-  }, ...(0, _utils.getConfiguredExtensions)((0, _ssrConfig.getConfig)()).map(extension => {
-    const packageName = extension[0];
+  }, ...detectedExtensions.map(extension => {
     return {
-      from: `${projectDir}/node_modules/${packageName}/static`,
-      to: `static/${EXTENIONS_NAMESPACE}/${packageName}`,
+      from: `${projectDir}/node_modules/${extension}/static`,
+      to: `static/${EXTENIONS_NAMESPACE}/${extension}`,
       // Add exclude for readme file.
       noErrorOnMissing: true
     };
   })]
 });
 const ruleForBabelLoader = babelPlugins => {
+  // Handle the case when no extensions are detected
+  if (!detectedExtensions.length) {
+    return {
+      id: 'babel-loader',
+      test: /(\.js(x?)|\.ts(x?))$/,
+      exclude: /node_modules/,
+      use: [{
+        loader: findDepInStack('thread-loader'),
+        options: {
+          // eslint-disable-next-line @typescript-eslint/no-var-requires
+          workers: Math.min(4, require('os').cpus().length),
+          workerParallelJobs: 100
+        }
+      }, {
+        loader: findDepInStack('babel-loader'),
+        options: _objectSpread({
+          rootMode: 'upward',
+          cacheDirectory: true
+        }, babelPlugins ? {
+          plugins: babelPlugins
+        } : {})
+      }]
+    };
+  }
+
+  // Pre-compute the paths to extensions for performance
+  const extensionPaths = detectedExtensions.map(ext => _path.default.normalize(`node_modules${_path.default.sep}${ext}${_path.default.sep}`));
   return {
     id: 'babel-loader',
     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.
-    // This regex exclude everything in node_modules, but node_modules/extensions-*/ folders
-    exclude: new RegExp(`node_modules\\${_path.default.sep}(?!(@?[^\\${_path.default.sep}]+\\${_path.default.sep})?extension-).*`, 'i'),
+    exclude: modulePath => {
+      // Not in node_modules. Include it (don't exclude)
+      if (!modulePath.includes('node_modules')) {
+        return false;
+      }
+
+      // Normalize path for consistent comparison
+      const normalizedPath = _path.default.normalize(modulePath);
+
+      // Check if the path includes any of our extension paths
+      return !extensionPaths.some(extPath => normalizedPath.includes(extPath));
+    },
     use: [{
+      loader: findDepInStack('thread-loader'),
+      options: {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        workers: Math.min(4, require('os').cpus().length),
+        workerParallelJobs: 100
+      }
+    }, {
       loader: findDepInStack('babel-loader'),
       options: _objectSpread({
         rootMode: 'upward',
@@ -308,7 +371,7 @@ const client = entryPointExists(['app', 'main']) && baseConfig('web').extend(wit
     // Must be named "client". See - https://www.npmjs.com/package/webpack-hot-server-middleware#usage
     name: _configNames.CLIENT,
     // use source map to make debugging easier
-    devtool: mode === development ? 'source-map' : false,
+    devtool: mode === development || process.env.PWA_KIT_SOURCE_MAP === 'true' ? 'source-map' : false,
     entry: {
       main: getAppEntryPoint()
     },
@@ -329,9 +392,9 @@ 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, '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({}, optional('loader', (0, _path.resolve)(projectDir, 'app', 'loader.js'))), optional('worker', (0, _path.resolve)(projectDir, 'worker', 'main.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,
+    devtool: mode === development || process.env.PWA_KIT_SOURCE_MAP === 'true' ? 'source-map' : false,
     plugins: [...config.plugins, analyzeBundle && getBundleAnalyzerPlugin(_configNames.CLIENT_OPTIONAL)].filter(Boolean)
   });
 }).build();
@@ -341,7 +404,7 @@ const renderer = _fsExtra.default.existsSync((0, _path.resolve)(projectDir, 'nod
     name: _configNames.SERVER,
     entry: '@salesforce/pwa-kit-react-sdk/ssr/server/react-rendering.js',
     // use eval-source-map for server-side debugging
-    devtool: mode === development && INSPECT ? 'eval-source-map' : false,
+    devtool: mode === development && INSPECT || process.env.PWA_KIT_SOURCE_MAP === 'true' ? 'eval-source-map' : false,
     output: {
       path: buildDir,
       // We want to split the build on local development to reduce memory usage.
@@ -363,7 +426,7 @@ const ssr = (() => {
   // Only compile the ssr file when we're building for prod.
   if (mode === production) {
     return baseConfig('node').extend(config => {
-      return _objectSpread(_objectSpread(_objectSpread({}, config), process.env.PWA_KIT_SSR_SOURCE_MAP === 'true' ? {
+      return _objectSpread(_objectSpread(_objectSpread({}, config), process.env.PWA_KIT_SOURCE_MAP === 'true' ? {
         devtool: 'source-map'
       } : {}), {}, {
         // Must *not* be named "server". See - https://www.npmjs.com/package/webpack-hot-server-middleware#usage
@@ -391,7 +454,7 @@ const requestProcessor = entryPointExists(['app', 'request-processor']) && baseC
       libraryTarget: 'commonjs2'
     },
     // use eval-source-map for server-side debugging
-    devtool: mode === development && INSPECT ? 'eval-source-map' : false,
+    devtool: mode === development && INSPECT || process.env.PWA_KIT_SOURCE_MAP === 'true' ? 'eval-source-map' : false,
     plugins: [...config.plugins, analyzeBundle && getBundleAnalyzerPlugin(_configNames.REQUEST_PROCESSOR)].filter(Boolean)
   });
 }).build();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/pwa-kit-dev",
-  "version": "4.0.0-extensibility-preview.3",
+  "version": "4.0.0-extensibility-preview.4",
   "description": "Build tools for pwa-kit",
   "homepage": "https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/pwa-kit-dev#readme",
   "bugs": {
@@ -58,15 +58,15 @@
     "@loadable/server": "^5.15.3",
     "@loadable/webpack-plugin": "^5.15.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
-    "@salesforce/pwa-kit-extension-sdk": "4.0.0-extensibility-preview.3",
-    "@salesforce/pwa-kit-runtime": "4.0.0-extensibility-preview.3",
+    "@salesforce/pwa-kit-extension-sdk": "4.0.0-extensibility-preview.4",
+    "@salesforce/pwa-kit-runtime": "4.0.0-extensibility-preview.4",
     "@typescript-eslint/eslint-plugin": "^5.57.0",
     "@typescript-eslint/parser": "^5.57.0",
     "archiver": "1.3.0",
     "babel-jest": "^27.1.0",
     "babel-loader": "^8.3.0",
     "babel-plugin-dynamic-import-node-babel-7": "^2.0.7",
-    "babel-plugin-formatjs": "10.4.0",
+    "babel-plugin-formatjs": "10.5.36",
     "babel-plugin-module-resolver": "^5.0.2",
     "chalk": "^4.1.2",
     "commander": "^9.5.0",
@@ -105,6 +105,7 @@
     "source-map-loader": "^4.0.1",
     "speed-measure-webpack-plugin": "^1.5.0",
     "svg-sprite-loader": "^6.0.11",
+    "thread-loader": "^4.0.4",
     "validator": "^13.9.0",
     "webpack": "^5.76.3",
     "webpack-bundle-analyzer": "^4.8.0",
@@ -123,7 +124,7 @@
     "@types/node": "~16.0.3",
     "@types/node-fetch": "~2.6.3",
     "@types/validator": "~13.7.14",
-    "internal-lib-build": "4.0.0-extensibility-preview.3",
+    "internal-lib-build": "4.0.0-extensibility-preview.4",
     "nock": "^13.3.0",
     "nodemon": "^2.0.22",
     "superagent": "^6.1.0",
@@ -143,11 +144,11 @@
     }
   },
   "engines": {
-    "node": "^16.11.0 || ^18.0.0 || ^20.0.0",
-    "npm": "^8.0.0 || ^9.0.0 || ^10.0.0"
+    "node": "^16.11.0 || ^18.0.0 || ^20.0.0 || ^22.0.0",
+    "npm": "^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0"
   },
   "publishConfig": {
     "directory": "dist"
   },
-  "gitHead": "904de01e826117febeea952e034478349e16ea4d"
+  "gitHead": "5ad3b1f0e598cfe0fbdec5b1212b4dabc0a8733c"
 }