@nx/react 16.8.0-beta.4 → 16.8.0-beta.5

package/babel.js

@@ -7,7 +7,7 @@ module.exports = function (api, options) {
     /**
      * pagesDir is set when being transpiled by Next.js
      */
-    const isNextJs = api.caller((caller) => caller === null || caller === void 0 ? void 0 : caller.pagesDir);
+    const isNextJs = api.caller((caller) => caller?.pagesDir);
     const presets = [[require.resolve('@nx/js/babel'), options]];
     /**
      * Next.js already includes the preset-react, and including it
@@ -34,9 +34,8 @@ module.exports = function (api, options) {
     };
 };
 function getReactPresetOptions({ presetOptions, env }) {
-    var _a;
     const reactPresetOptions = {
-        runtime: (_a = presetOptions.runtime) !== null && _a !== void 0 ? _a : 'automatic',
+        runtime: presetOptions.runtime ?? 'automatic',
         development: env !== 'production',
     };
     // JSX spread is transformed into object spread in `@babel/plugin-transform-react-jsx`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "16.8.0-beta.4",
+  "version": "16.8.0-beta.5",
   "private": false,
   "description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -31,11 +31,11 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nrwl/react": "16.8.0-beta.4",
-    "@nx/devkit": "16.8.0-beta.4",
-    "@nx/js": "16.8.0-beta.4",
-    "@nx/linter": "16.8.0-beta.4",
-    "@nx/web": "16.8.0-beta.4",
+    "@nrwl/react": "16.8.0-beta.5",
+    "@nx/devkit": "16.8.0-beta.5",
+    "@nx/js": "16.8.0-beta.5",
+    "@nx/linter": "16.8.0-beta.5",
+    "@nx/web": "16.8.0-beta.5",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "@svgr/webpack": "^8.0.1",
     "chalk": "^4.1.0",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "type": "commonjs",
-  "gitHead": "c9aad2dc8c2b34531cf61549bff872e68c481e4e"
+  "gitHead": "ad2d1e8a55b2d1b358bb5e7483343d9757ff2c53"
 }

package/plugins/bundle-rollup.js

@@ -10,11 +10,17 @@ function getRollupOptions(options) {
     };
     if (Array.isArray(options.output)) {
         options.output.forEach((o) => {
-            o.globals = Object.assign(Object.assign({}, o.globals), extraGlobals);
+            o.globals = { ...o.globals, ...extraGlobals };
         });
     }
     else {
-        options.output = Object.assign(Object.assign({}, options.output), { globals: Object.assign(Object.assign({}, options.output.globals), extraGlobals) });
+        options.output = {
+            ...options.output,
+            globals: {
+                ...options.output.globals,
+                ...extraGlobals,
+            },
+        };
     }
     // React buildable libs support SVGR, but not for React Native.
     // If imports fail, ignore it.
@@ -33,7 +39,7 @@ function getRollupOptions(options) {
             ...options.plugins,
         ];
     }
-    catch (_a) {
+    catch {
         // Ignored for React Native
     }
     return options;

package/plugins/component-testing/index.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.nxComponentTestingPreset = void 0;
-const tslib_1 = require("tslib");
 const cypress_preset_1 = require("@nx/cypress/plugins/cypress-preset");
 const devkit_1 = require("@nx/devkit");
 const ct_helpers_1 = require("@nx/cypress/src/utils/ct-helpers");
@@ -32,11 +31,16 @@ function nxComponentTestingPreset(pathToConfig, options) {
     const basePresetSettings = (0, cypress_preset_1.nxBaseCypressPreset)(pathToConfig, {
         testingType: 'component',
     });
-    if ((options === null || options === void 0 ? void 0 : options.bundler) === 'vite') {
-        return Object.assign(Object.assign({}, basePresetSettings), { specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}', devServer: Object.assign(Object.assign({}, { framework: 'react', bundler: 'vite' }), { viteConfig: () => tslib_1.__awaiter(this, void 0, void 0, function* () {
+    if (options?.bundler === 'vite') {
+        return {
+            ...basePresetSettings,
+            specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
+            devServer: {
+                ...{ framework: 'react', bundler: 'vite' },
+                viteConfig: async () => {
                     const viteConfigPath = findViteConfig(normalizedProjectRootPath);
-                    const { mergeConfig, loadConfigFromFile, searchForWorkspaceRoot } = yield Function('return import("vite")')();
-                    const resolved = yield loadConfigFromFile({
+                    const { mergeConfig, loadConfigFromFile, searchForWorkspaceRoot } = await Function('return import("vite")')();
+                    const resolved = await loadConfigFromFile({
                         mode: 'watch',
                         command: 'serve',
                     }, viteConfigPath);
@@ -51,13 +55,15 @@ function nxComponentTestingPreset(pathToConfig, options) {
                             },
                         },
                     });
-                }) }) });
+                },
+            },
+        };
     }
     let webpackConfig;
     try {
         const graph = (0, devkit_1.readCachedProjectGraph)();
         const { targets: ctTargets, name: ctProjectName } = (0, ct_helpers_1.getProjectConfigByPath)(graph, pathToConfig);
-        const ctTargetName = (options === null || options === void 0 ? void 0 : options.ctTargetName) || 'component-test';
+        const ctTargetName = options?.ctTargetName || 'component-test';
         const ctConfigurationName = process.env.NX_CYPRESS_TARGET_CONFIGURATION;
         const ctExecutorContext = (0, ct_helpers_1.createExecutorContext)(graph, ctTargets, ctProjectName, ctTargetName, ctConfigurationName);
         const ctExecutorOptions = (0, devkit_1.readTargetOptions)({
@@ -81,40 +87,49 @@ function nxComponentTestingPreset(pathToConfig, options) {
             compiler: 'babel',
         });
     }
-    return Object.assign(Object.assign({}, basePresetSettings), { specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}', devServer: Object.assign(Object.assign({}, { framework: 'react', bundler: 'webpack' }), { webpackConfig }) });
+    return {
+        ...basePresetSettings,
+        specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
+        devServer: {
+            // cypress uses string union type,
+            // need to use const to prevent typing to string
+            // but don't want to use as const on webpackConfig
+            // so it is still user modifiable
+            ...{ framework: 'react', bundler: 'webpack' },
+            webpackConfig,
+        },
+    };
 }
 exports.nxComponentTestingPreset = nxComponentTestingPreset;
 /**
  * apply the schema.json defaults from the @nx/web:webpack executor to the target options
  */
 function withSchemaDefaults(target, context) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     const options = (0, devkit_1.readTargetOptions)(target, context);
-    (_a = options.compiler) !== null && _a !== void 0 ? _a : (options.compiler = 'babel');
-    (_b = options.deleteOutputPath) !== null && _b !== void 0 ? _b : (options.deleteOutputPath = true);
-    (_c = options.vendorChunk) !== null && _c !== void 0 ? _c : (options.vendorChunk = true);
-    (_d = options.commonChunk) !== null && _d !== void 0 ? _d : (options.commonChunk = true);
-    (_e = options.runtimeChunk) !== null && _e !== void 0 ? _e : (options.runtimeChunk = true);
-    (_f = options.sourceMap) !== null && _f !== void 0 ? _f : (options.sourceMap = true);
-    (_g = options.assets) !== null && _g !== void 0 ? _g : (options.assets = []);
-    (_h = options.scripts) !== null && _h !== void 0 ? _h : (options.scripts = []);
-    (_j = options.styles) !== null && _j !== void 0 ? _j : (options.styles = []);
-    (_k = options.budgets) !== null && _k !== void 0 ? _k : (options.budgets = []);
-    (_l = options.namedChunks) !== null && _l !== void 0 ? _l : (options.namedChunks = true);
-    (_m = options.outputHashing) !== null && _m !== void 0 ? _m : (options.outputHashing = 'none');
-    (_o = options.extractCss) !== null && _o !== void 0 ? _o : (options.extractCss = true);
-    (_p = options.memoryLimit) !== null && _p !== void 0 ? _p : (options.memoryLimit = 2048);
-    (_q = options.maxWorkers) !== null && _q !== void 0 ? _q : (options.maxWorkers = 2);
-    (_r = options.fileReplacements) !== null && _r !== void 0 ? _r : (options.fileReplacements = []);
-    (_s = options.buildLibsFromSource) !== null && _s !== void 0 ? _s : (options.buildLibsFromSource = true);
-    (_t = options.generateIndexHtml) !== null && _t !== void 0 ? _t : (options.generateIndexHtml = true);
+    options.compiler ??= 'babel';
+    options.deleteOutputPath ??= true;
+    options.vendorChunk ??= true;
+    options.commonChunk ??= true;
+    options.runtimeChunk ??= true;
+    options.sourceMap ??= true;
+    options.assets ??= [];
+    options.scripts ??= [];
+    options.styles ??= [];
+    options.budgets ??= [];
+    options.namedChunks ??= true;
+    options.outputHashing ??= 'none';
+    options.extractCss ??= true;
+    options.memoryLimit ??= 2048;
+    options.maxWorkers ??= 2;
+    options.fileReplacements ??= [];
+    options.buildLibsFromSource ??= true;
+    options.generateIndexHtml ??= true;
     return options;
 }
 function buildTargetWebpack(graph, buildTarget, componentTestingProjectName) {
-    var _a, _b;
     const parsed = (0, devkit_1.parseTargetString)(buildTarget, graph);
-    const buildableProjectConfig = (_a = graph.nodes[parsed.project]) === null || _a === void 0 ? void 0 : _a.data;
-    const ctProjectConfig = (_b = graph.nodes[componentTestingProjectName]) === null || _b === void 0 ? void 0 : _b.data;
+    const buildableProjectConfig = graph.nodes[parsed.project]?.data;
+    const ctProjectConfig = graph.nodes[componentTestingProjectName]?.data;
     if (!buildableProjectConfig || !ctProjectConfig) {
         throw new Error((0, devkit_1.stripIndents) `Unable to load project configs from graph. 
     Using build target '${buildTarget}'
@@ -131,23 +146,28 @@ function buildTargetWebpack(graph, buildTarget, componentTestingProjectName) {
     if (options.webpackConfig) {
         customWebpack = resolveCustomWebpackConfig(options.webpackConfig, options.tsConfig);
     }
-    return () => tslib_1.__awaiter(this, void 0, void 0, function* () {
-        customWebpack = yield customWebpack;
+    return async () => {
+        customWebpack = await customWebpack;
         // TODO(jack): Once webpackConfig is always set in @nx/webpack:webpack, we no longer need this default.
-        const defaultWebpack = getWebpackConfig(context, Object.assign(Object.assign({}, options), { 
+        const defaultWebpack = getWebpackConfig(context, {
+            ...options,
             // cypress will generate its own index.html from component-index.html
-            generateIndexHtml: false, 
+            generateIndexHtml: false,
             // causes issues with buildable libraries with ENOENT: no such file or directory, scandir error
-            extractLicenses: false, root: devkit_1.workspaceRoot, projectRoot: ctProjectConfig.root, sourceRoot: ctProjectConfig.sourceRoot }));
+            extractLicenses: false,
+            root: devkit_1.workspaceRoot,
+            projectRoot: ctProjectConfig.root,
+            sourceRoot: ctProjectConfig.sourceRoot,
+        });
         if (customWebpack) {
-            return yield customWebpack(defaultWebpack, {
+            return await customWebpack(defaultWebpack, {
                 options,
                 context,
                 configuration: parsed.configuration,
             });
         }
         return defaultWebpack;
-    });
+    };
 }
 function findViteConfig(projectRootFullPath) {
     const allowsExt = ['js', 'mjs', 'ts', 'cjs', 'mts', 'cts'];

package/plugins/jest.js

@@ -5,7 +5,6 @@ const devkit_1 = require("@nx/devkit");
 const JS_SOURCE_EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.cjs'];
 module.exports = {
     process(src, filename, options) {
-        var _a, _b;
         const assetFilename = JSON.stringify(path.basename(filename));
         if (filename.match(/\.svg$/)) {
             // Based on how SVGR generates a component name:
@@ -32,7 +31,7 @@ module.exports = {
             };
         }
         if (JS_SOURCE_EXTENSIONS.includes(path.extname(filename))) {
-            const transformer = getJsTransform((_b = (_a = options.config) === null || _a === void 0 ? void 0 : _a.transform) !== null && _b !== void 0 ? _b : []);
+            const transformer = getJsTransform(options.config?.transform ?? []);
             if (transformer)
                 return transformer.process(src, filename, options);
         }
@@ -43,19 +42,18 @@ module.exports = {
     },
 };
 function getJsTransform(transformers) {
-    var _a;
     try {
-        if ((_a = transformers === null || transformers === void 0 ? void 0 : transformers[1]) === null || _a === void 0 ? void 0 : _a.includes('@swc/jest')) {
+        if (transformers?.[1]?.includes('@swc/jest')) {
             return require('@swc/jest').createTransformer();
         }
     }
-    catch (_b) {
+    catch {
         // ignored
     }
     try {
         return require('babel-jest').default.createTransformer();
     }
-    catch (_c) {
+    catch {
         // ignored
     }
 }

package/plugins/storybook/index.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.webpack = exports.core = void 0;
-const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const config_1 = require("@nx/webpack/src/utils/config");
 const path_1 = require("path");
@@ -43,9 +42,12 @@ function getClientEnvironment(mode) {
     };
     return { stringified };
 }
-const core = (prev, options) => (Object.assign(Object.assign({}, prev), { disableWebpackDefaults: true }));
+const core = (prev, options) => ({
+    ...prev,
+    disableWebpackDefaults: true,
+});
 exports.core = core;
-const getProjectData = (storybookOptions) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+const getProjectData = async (storybookOptions) => {
     const fallbackData = {
         workspaceRoot: storybookOptions.configDir,
         projectRoot: '',
@@ -54,7 +56,7 @@ const getProjectData = (storybookOptions) => tslib_1.__awaiter(void 0, void 0, v
     // Edge-case: not running from Nx
     if (!process.env.NX_WORKSPACE_ROOT)
         return fallbackData;
-    const projectGraph = yield (0, devkit_1.createProjectGraphAsync)();
+    const projectGraph = await (0, devkit_1.createProjectGraphAsync)();
     const projectNode = projectGraph.nodes[process.env.NX_TASK_TARGET_PROJECT];
     return projectNode
         ? {
@@ -65,16 +67,15 @@ const getProjectData = (storybookOptions) => tslib_1.__awaiter(void 0, void 0, v
         }
         : // Edge-case: missing project node
             fallbackData;
-});
+};
 const fixBabelConfigurationIfNeeded = (webpackConfig, projectData) => {
     if (!projectData.projectNode)
         return;
     const isUsingBabelUpwardRootMode = Object.keys(projectData.projectNode.data.targets).find((k) => {
-        var _a;
         const targetConfig = projectData.projectNode.data.targets[k];
         return ((targetConfig.executor === '@nx/webpack:webpack' ||
             targetConfig.executor === '@nrwl/webpack:webpack') &&
-            ((_a = targetConfig.options) === null || _a === void 0 ? void 0 : _a.babelUpwardRootMode));
+            targetConfig.options?.babelUpwardRootMode);
     });
     if (isUsingBabelUpwardRootMode)
         return;
@@ -106,22 +107,33 @@ const fixBabelConfigurationIfNeeded = (webpackConfig, projectData) => {
         babelRuleItem.options.configFile = babelrcPath;
     }
 };
-const webpack = (storybookWebpackConfig = {}, options) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b, _c, _d, _e, _f;
+const webpack = async (storybookWebpackConfig = {}, options) => {
     devkit_1.logger.info('=> Loading Nx React Storybook Addon from "@nx/react/plugins/storybook"');
     // In case anyone is missing dep and did not run migrations.
     // See: https://github.com/nrwl/nx/issues/14455
     try {
         require.resolve('@nx/webpack');
     }
-    catch (_g) {
+    catch {
         throw new Error(`'@nx/webpack' package is not installed. Install it and try again.`);
     }
     const { withNx, withWeb } = require('@nx/webpack');
-    const projectData = yield getProjectData(options);
+    const projectData = await getProjectData(options);
     const tsconfigPath = (0, path_1.join)(projectData.projectRoot, 'tsconfig.storybook.json');
     fixBabelConfigurationIfNeeded(storybookWebpackConfig, projectData);
-    const builderOptions = Object.assign(Object.assign({}, options), { root: projectData.workspaceRoot, projectRoot: projectData.projectRoot, sourceRoot: projectData.sourceRoot, fileReplacements: [], sourceMap: true, styles: (_a = options.styles) !== null && _a !== void 0 ? _a : [], optimization: {}, tsConfig: tsconfigPath, extractCss: storybookWebpackConfig.mode === 'production', target: 'web' });
+    const builderOptions = {
+        ...options,
+        root: projectData.workspaceRoot,
+        projectRoot: projectData.projectRoot,
+        sourceRoot: projectData.sourceRoot,
+        fileReplacements: [],
+        sourceMap: true,
+        styles: options.styles ?? [],
+        optimization: {},
+        tsConfig: tsconfigPath,
+        extractCss: storybookWebpackConfig.mode === 'production',
+        target: 'web',
+    };
     // ESM build for modern browsers.
     let baseWebpackConfig = {};
     const configure = (0, config_1.composePluginsSync)(withNx({ skipTypeChecking: true }), withWeb(), (0, with_react_1.withReact)());
@@ -129,13 +141,30 @@ const webpack = (storybookWebpackConfig = {}, options) => tslib_1.__awaiter(void
         options: builderOptions,
         context: { root: devkit_1.workspaceRoot }, // The context is not used here.
     });
-    return Object.assign(Object.assign({}, storybookWebpackConfig), { module: Object.assign(Object.assign({}, storybookWebpackConfig.module), { rules: [
+    return {
+        ...storybookWebpackConfig,
+        module: {
+            ...storybookWebpackConfig.module,
+            rules: [
                 ...storybookWebpackConfig.module.rules,
                 ...finalConfig.module.rules,
-            ] }), resolve: Object.assign(Object.assign({}, storybookWebpackConfig.resolve), { fallback: Object.assign(Object.assign({}, (_b = storybookWebpackConfig.resolve) === null || _b === void 0 ? void 0 : _b.fallback), { 
+            ],
+        },
+        resolve: {
+            ...storybookWebpackConfig.resolve,
+            fallback: {
+                ...storybookWebpackConfig.resolve?.fallback,
                 // Next.js and other React frameworks may have server-code that uses these modules.
                 // They are not meant for client-side components so skip the fallbacks.
-                assert: false, path: false, util: false }), plugins: (0, merge_plugins_1.mergePlugins)(...((_c = storybookWebpackConfig.resolve.plugins) !== null && _c !== void 0 ? _c : []), ...((_d = finalConfig.resolve
-                .plugins) !== null && _d !== void 0 ? _d : [])) }), plugins: (0, merge_plugins_1.mergePlugins)(new webpack_1.DefinePlugin(getClientEnvironment(storybookWebpackConfig.mode).stringified), ...((_e = storybookWebpackConfig.plugins) !== null && _e !== void 0 ? _e : []), ...((_f = finalConfig.plugins) !== null && _f !== void 0 ? _f : [])) });
-});
+                assert: false,
+                path: false,
+                util: false,
+            },
+            plugins: (0, merge_plugins_1.mergePlugins)(...(storybookWebpackConfig.resolve.plugins ??
+                []), ...(finalConfig.resolve
+                .plugins ?? [])),
+        },
+        plugins: (0, merge_plugins_1.mergePlugins)(new webpack_1.DefinePlugin(getClientEnvironment(storybookWebpackConfig.mode).stringified), ...(storybookWebpackConfig.plugins ?? []), ...(finalConfig.plugins ?? [])),
+    };
+};
 exports.webpack = webpack;

package/plugins/with-react.js

@@ -3,15 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.withReact = void 0;
 const processed = new Set();
 function addHotReload(config) {
-    var _a;
-    if (config.mode === 'development' && ((_a = config['devServer']) === null || _a === void 0 ? void 0 : _a.hot)) {
+    if (config.mode === 'development' && config['devServer']?.hot) {
         // add `react-refresh/babel` to babel loader plugin
-        const babelLoader = config.module.rules.find((rule) => {
-            var _a;
-            return rule &&
-                typeof rule !== 'string' &&
-                ((_a = rule.loader) === null || _a === void 0 ? void 0 : _a.toString().includes('babel-loader'));
-        });
+        const babelLoader = config.module.rules.find((rule) => rule &&
+            typeof rule !== 'string' &&
+            rule.loader?.toString().includes('babel-loader'));
         if (babelLoader && typeof babelLoader !== 'string') {
             babelLoader.options['plugins'] = [
                 ...(babelLoader.options['plugins'] || []),
@@ -47,7 +43,7 @@ function withReact(pluginOptions = {}) {
         // Apply web config for CSS, JSX, index.html handling, etc.
         config = withWeb(pluginOptions)(config, context);
         addHotReload(config);
-        if ((pluginOptions === null || pluginOptions === void 0 ? void 0 : pluginOptions.svgr) !== false) {
+        if (pluginOptions?.svgr !== false) {
             removeSvgLoaderIfPresent(config);
             config.module.rules.push({
                 test: /\.svg$/,