@nx/react 16.4.0-beta.1 → 16.4.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "16.4.0-beta.1",
+  "version": "16.4.0-beta.2",
   "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.4.0-beta.1",
-    "@nx/devkit": "16.4.0-beta.1",
-    "@nx/js": "16.4.0-beta.1",
-    "@nx/linter": "16.4.0-beta.1",
-    "@nx/web": "16.4.0-beta.1",
+    "@nrwl/react": "16.4.0-beta.2",
+    "@nx/devkit": "16.4.0-beta.2",
+    "@nx/js": "16.4.0-beta.2",
+    "@nx/linter": "16.4.0-beta.2",
+    "@nx/web": "16.4.0-beta.2",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "@svgr/webpack": "^8.0.1",
     "chalk": "^4.1.0",
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "types": "./index.d.ts",
-  "gitHead": "1c4fb934b607f0d93bb23bff2cf0f39b31a8fa43"
+  "gitHead": "abb2678056668cc8beaaf9c5ebc2a2e6ad487173"
 }

package/plugins/storybook/index.js

@@ -8,6 +8,7 @@ const path_1 = require("path");
 const webpack_1 = require("webpack");
 const merge_plugins_1 = require("./merge-plugins");
 const with_react_1 = require("../with-react");
+const fs_1 = require("fs");
 // This is shamelessly taken from CRA and modified for NX use
 // https://github.com/facebook/create-react-app/blob/4784997f0682e75eb32a897b4ffe34d735912e6c/packages/react-scripts/config/env.js#L71
 function getClientEnvironment(mode) {
@@ -44,6 +45,67 @@ function getClientEnvironment(mode) {
 }
 const core = (prev, options) => (Object.assign(Object.assign({}, prev), { disableWebpackDefaults: true }));
 exports.core = core;
+const getProjectData = (storybookOptions) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+    const fallbackData = {
+        workspaceRoot: storybookOptions.configDir,
+        projectRoot: '',
+        sourceRoot: '',
+    };
+    // Edge-case: not running from Nx
+    if (!process.env.NX_WORKSPACE_ROOT)
+        return fallbackData;
+    const projectGraph = yield (0, devkit_1.createProjectGraphAsync)();
+    const projectNode = projectGraph.nodes[process.env.NX_TASK_TARGET_PROJECT];
+    return projectNode
+        ? {
+            workspaceRoot: process.env.NX_WORKSPACE_ROOT,
+            projectRoot: projectNode.data.root,
+            sourceRoot: projectNode.data.sourceRoot,
+            projectNode,
+        }
+        : // 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));
+    });
+    if (isUsingBabelUpwardRootMode)
+        return;
+    let babelrcPath;
+    for (const ext of ['', '.json', '.js', '.cjs', '.mjs', '.cts']) {
+        const candidate = (0, path_1.join)(projectData.workspaceRoot, projectData.projectRoot, `.babelrc${ext}`);
+        if ((0, fs_1.existsSync)(candidate)) {
+            babelrcPath = candidate;
+            break;
+        }
+    }
+    // Unexpected setup, skip.
+    if (!babelrcPath)
+        return;
+    let babelRuleItem;
+    for (const rule of webpackConfig.module.rules) {
+        if (typeof rule === 'string')
+            continue;
+        if (!Array.isArray(rule.use))
+            continue;
+        for (const item of rule.use) {
+            if (typeof item !== 'string' && item['loader'].includes('babel-loader')) {
+                babelRuleItem = item;
+                break;
+            }
+        }
+    }
+    if (babelRuleItem) {
+        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;
     devkit_1.logger.info('=> Loading Nx React Storybook Addon from "@nx/react/plugins/storybook"');
@@ -57,9 +119,9 @@ const webpack = (storybookWebpackConfig = {}, options) => tslib_1.__awaiter(void
     }
     const { withNx, withWeb } = require('@nx/webpack');
     const tsconfigPath = (0, path_1.join)(options.configDir, 'tsconfig.json');
-    const builderOptions = Object.assign(Object.assign({}, options), { root: options.configDir, 
-        // These are blank because root is the absolute path to .storybook folder
-        projectRoot: '', sourceRoot: '', fileReplacements: [], sourceMap: true, styles: (_a = options.styles) !== null && _a !== void 0 ? _a : [], optimization: {}, tsConfig: tsconfigPath, extractCss: storybookWebpackConfig.mode === 'production', target: 'web' });
+    const projectData = yield getProjectData(options);
+    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' });
     // ESM build for modern browsers.
     let baseWebpackConfig = {};
     const configure = (0, config_1.composePluginsSync)(withNx({ skipTypeChecking: true }), withWeb(), (0, with_react_1.withReact)());

package/src/generators/application/application.js

@@ -21,6 +21,7 @@ const install_common_dependencies_1 = require("./lib/install-common-dependencies
 const create_ts_config_1 = require("../../utils/create-ts-config");
 const add_swc_dependencies_1 = require("@nx/js/src/utils/swc/add-swc-dependencies");
 const chalk = require("chalk");
+const show_possible_warnings_1 = require("./lib/show-possible-warnings");
 function addLinting(host, options) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         const tasks = [];
@@ -42,9 +43,7 @@ function addLinting(host, options) {
             tasks.push(lintTask);
             (0, devkit_1.updateJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, '.eslintrc.json'), lint_1.extendReactEslintJson);
             if (!options.skipPackageJson) {
-                const installTask = yield (0, devkit_1.addDependenciesToPackageJson)(host, lint_1.extraEslintDependencies.dependencies, Object.assign(Object.assign({}, lint_1.extraEslintDependencies.devDependencies), (options.compiler === 'swc'
-                    ? { 'swc-loader': versions_1.swcLoaderVersion }
-                    : {})));
+                const installTask = yield (0, devkit_1.addDependenciesToPackageJson)(host, lint_1.extraEslintDependencies.dependencies, lint_1.extraEslintDependencies.devDependencies);
                 const addSwcTask = (0, add_swc_dependencies_1.addSwcDependencies)(host);
                 tasks.push(installTask, addSwcTask);
             }
@@ -56,7 +55,8 @@ function applicationGenerator(host, schema) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         const tasks = [];
         const options = (0, normalize_options_1.normalizeOptions)(host, schema);
-        const initTask = yield (0, init_1.default)(host, Object.assign(Object.assign({}, options), { skipFormat: true, skipBabelConfig: options.bundler === 'vite', skipHelperLibs: options.bundler === 'vite' }));
+        (0, show_possible_warnings_1.showPossibleWarnings)(host, options);
+        const initTask = yield (0, init_1.default)(host, Object.assign(Object.assign({}, options), { skipFormat: true, skipHelperLibs: options.bundler === 'vite' }));
         tasks.push(initTask);
         if (!options.rootProject) {
             (0, create_ts_config_1.extractTsConfigBase)(host);

package/src/generators/application/lib/install-common-dependencies.js

@@ -4,25 +4,32 @@ exports.installCommonDependencies = void 0;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
 function installCommonDependencies(host, options) {
-    let devDependencies = null;
+    const devDependencies = {};
     // Vite requires style preprocessors to be installed manually.
     // `@nx/webpack` installs them automatically for now.
-    // TODO(jack): Once we clean up webpack we can remove this check
     if (options.bundler === 'vite' || options.unitTestRunner === 'vitest') {
         switch (options.style) {
             case 'scss':
-                devDependencies = { sass: versions_1.sassVersion };
+                devDependencies['sass'] = versions_1.sassVersion;
                 break;
             case 'less':
-                devDependencies = { less: versions_1.lessVersion };
+                devDependencies['less'] = versions_1.lessVersion;
                 break;
             case 'styl': // @TODO(17): deprecated, going to be removed in Nx 17
-                devDependencies = { stylus: versions_1.stylusVersion };
+                devDependencies['stylus'] = versions_1.stylusVersion;
                 break;
         }
     }
-    return devDependencies
-        ? (0, devkit_1.addDependenciesToPackageJson)(host, {}, devDependencies)
-        : function noop() { };
+    if (options.bundler === 'webpack') {
+        if (options.compiler === 'swc') {
+            devDependencies['swc-loader'] = versions_1.swcLoaderVersion;
+        }
+        else if (options.compiler === 'babel') {
+            // babel-loader is currently included in @nx/webpack
+            // TODO(jack): Install babel-loader and other babel packages only as needed
+            devDependencies['@babel/preset-react'] = versions_1.babelPresetReactVersion;
+        }
+    }
+    return (0, devkit_1.addDependenciesToPackageJson)(host, {}, devDependencies);
 }
 exports.installCommonDependencies = installCommonDependencies;

package/src/generators/application/lib/set-defaults.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setDefaults = void 0;
 const devkit_1 = require("@nx/devkit");
 function setDefaults(host, options) {
-    if (options.skipWorkspaceJson) {
+    if (options.skipNxJson) {
         return;
     }
     const nxJson = (0, devkit_1.readNxJson)(host);

package/src/generators/application/lib/show-possible-warnings.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema, Schema } from '../schema';
+export declare function showPossibleWarnings(tree: Tree, options: NormalizedSchema<Schema>): void;

package/src/generators/application/lib/show-possible-warnings.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.showPossibleWarnings = void 0;
+const chalk = require("chalk");
+const devkit_1 = require("@nx/devkit");
+function showPossibleWarnings(tree, options) {
+    if (options.style === 'styled-jsx' && options.compiler === 'swc') {
+        devkit_1.logger.warn(`styled-jsx may not work with SWC. Try using ${chalk.bold('nx g @nx/react:app --compiler=babel')} instead.`);
+    }
+}
+exports.showPossibleWarnings = showPossibleWarnings;

package/src/generators/application/schema.d.ts

@@ -14,7 +14,7 @@ export interface Schema {
   pascalCaseFiles?: boolean;
   classComponent?: boolean;
   routing?: boolean;
-  skipWorkspaceJson?: boolean;
+  skipNxJson?: boolean;
   js?: boolean;
   globalCss?: boolean;
   strict?: boolean;

package/src/generators/application/schema.json

@@ -98,8 +98,8 @@
       "default": false,
       "x-priority": "internal"
     },
-    "skipWorkspaceJson": {
-      "description": "Skip updating `workspace.json` with default options based on values provided to this app (e.g. babel, style).",
+    "skipNxJson": {
+      "description": "Skip updating `nx.json` with default options based on values provided to this app.",
       "type": "boolean",
       "default": false,
       "x-priority": "internal"

package/src/generators/host/schema.d.ts

@@ -15,7 +15,7 @@ export interface Schema {
   remotes?: string[];
   setParserOptionsProject?: boolean;
   skipFormat?: boolean;
-  skipWorkspaceJson?: boolean;
+  skipNxJson?: boolean;
   ssr?: boolean;
   strict?: boolean;
   style: SupportedStyles;

package/src/generators/host/schema.json

@@ -79,7 +79,7 @@
       "default": false,
       "x-priority": "internal"
     },
-    "skipWorkspaceJson": {
+    "skipNxJson": {
       "description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
       "type": "boolean",
       "default": false,

package/src/generators/init/init.js

@@ -29,22 +29,6 @@ function updateDependencies(host, schema) {
         '@testing-library/react': versions_1.testingLibraryReactVersion,
     });
 }
-function initRootBabelConfig(tree, schema) {
-    var _a;
-    if (tree.exists('/babel.config.json') || tree.exists('/babel.config.js')) {
-        return;
-    }
-    if (!schema.skipBabelConfig) {
-        (0, devkit_1.writeJson)(tree, '/babel.config.json', {
-            babelrcRoots: ['*'], // Make sure .babelrc files other than root can be loaded in a monorepo
-        });
-    }
-    const nxJson = (0, devkit_1.readNxJson)(tree);
-    if ((_a = nxJson.namedInputs) === null || _a === void 0 ? void 0 : _a.sharedGlobals) {
-        nxJson.namedInputs.sharedGlobals.push('{workspaceRoot}/babel.config.json');
-    }
-    (0, devkit_1.updateNxJson)(tree, nxJson);
-}
 function reactInitGenerator(host, schema) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         const tasks = [];
@@ -57,15 +41,6 @@ function reactInitGenerator(host, schema) {
             const cypressTask = yield cypressInitGenerator(host, {});
             tasks.push(cypressTask);
         }
-        if (!schema.skipPackageJson && !schema.skipBabelConfig) {
-            const installBabelTask = (0, devkit_1.addDependenciesToPackageJson)(host, {}, {
-                '@babel/preset-react': versions_1.babelPresetReactVersion,
-            });
-            tasks.push(installBabelTask);
-        }
-        if (!schema.skipBabelConfig) {
-            initRootBabelConfig(host, schema);
-        }
         if (!schema.skipPackageJson) {
             const installTask = updateDependencies(host, schema);
             tasks.push(installTask);

package/src/generators/init/schema.d.ts

@@ -1,7 +1,6 @@
 export interface InitSchema {
   unitTestRunner?: 'jest' | 'vitest' | 'none';
   e2eTestRunner?: 'cypress' | 'none';
-  skipBabelConfig?: boolean;
   skipFormat?: boolean;
   skipPackageJson?: boolean;
   skipHelperLibs?: boolean;

package/src/generators/init/schema.json

@@ -28,11 +28,6 @@
       "type": "boolean",
       "default": false
     },
-    "skipBabelConfig": {
-      "description": "Do not generate a root babel.config.json (if babel is not needed).",
-      "type": "boolean",
-      "default": false
-    },
     "skipHelperLibs": {
       "description": "Do not install  tslib.",
       "type": "boolean",

package/src/generators/library/lib/create-files.js

@@ -10,9 +10,31 @@ function createFiles(host, options) {
     (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, '../files/common'), options.projectRoot, substitutions);
     if (options.bundler === 'vite' || options.unitTestRunner === 'vitest') {
         (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, '../files/vite'), options.projectRoot, substitutions);
-        if (host.exists((0, devkit_1.joinPathFragments)(options.projectRoot, '.babelrc'))) {
-            host.delete((0, devkit_1.joinPathFragments)(options.projectRoot, '.babelrc'));
-        }
+    }
+    if (options.compiler === 'babel') {
+        (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.projectRoot, '.babelrc'), {
+            presets: [
+                [
+                    '@nx/react/babel',
+                    {
+                        runtime: 'automatic',
+                        useBuiltIns: 'usage',
+                        importSource: options.style === '@emotion/styled'
+                            ? '@emotion/react'
+                            : undefined,
+                    },
+                ],
+            ],
+            plugins: [
+                options.style === 'styled-components'
+                    ? ['styled-components', { pure: true, ssr: true }]
+                    : undefined,
+                options.style === 'styled-jsx' ? 'styled-jsx/babel' : undefined,
+                options.style === '@emotion/styled'
+                    ? '@emotion/babel-plugin'
+                    : undefined,
+            ].filter(Boolean),
+        });
     }
     if (!options.publishable && !options.buildable) {
         host.delete(`${options.projectRoot}/package.json`);

package/src/generators/library/lib/install-common-dependencies.js

@@ -31,6 +31,9 @@ function installCommonDependencies(host, options) {
     if (options.compiler === 'swc') {
         tasks.push((0, add_swc_dependencies_1.addSwcDependencies)(host));
     }
+    else if (options.compiler === 'babel') {
+        tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, {}, { '@babel/preset-react': versions_1.babelPresetReactVersion }));
+    }
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.installCommonDependencies = installCommonDependencies;

package/src/generators/library/library.js

@@ -26,7 +26,7 @@ function libraryGenerator(host, schema) {
         if (!options.component) {
             options.style = 'none';
         }
-        const initTask = yield (0, init_1.default)(host, Object.assign(Object.assign({}, options), { e2eTestRunner: 'none', skipFormat: true, skipBabelConfig: options.bundler === 'vite' || options.compiler === 'swc', skipHelperLibs: options.bundler === 'vite' }));
+        const initTask = yield (0, init_1.default)(host, Object.assign(Object.assign({}, options), { e2eTestRunner: 'none', skipFormat: true, skipHelperLibs: options.bundler === 'vite' }));
         tasks.push(initTask);
         (0, devkit_1.addProjectConfiguration)(host, options.name, {
             root: options.projectRoot,

package/src/generators/remote/schema.d.ts

@@ -17,7 +17,7 @@ export interface Schema {
   routing?: boolean;
   setParserOptionsProject?: boolean;
   skipFormat: boolean;
-  skipWorkspaceJson?: boolean;
+  skipNxJson?: boolean;
   ssr?: boolean;
   strict?: boolean;
   style: SupportedStyles;

package/src/generators/remote/schema.json

@@ -84,7 +84,7 @@
       "default": false,
       "x-priority": "internal"
     },
-    "skipWorkspaceJson": {
+    "skipNxJson": {
       "description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
       "type": "boolean",
       "default": false,

package/src/generators/library/files/common/.babelrc__tmpl__

@@ -1,16 +0,0 @@
-{
-  "presets": [
-    [
-      "@nx/react/babel", {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-        <% if (style === '@emotion/styled') { %>,"importSource": "@emotion/react"<% } %>
-      }
-    ]
-  ],
-  "plugins": [
-    <% if (style === 'styled-components') { %>["styled-components", { "pure": true, "ssr": true }]<% } %>
-    <% if (style === 'styled-jsx') { %>"styled-jsx/babel"<% } %>
-    <% if (style === '@emotion/styled') { %>"@emotion/babel-plugin"<% } %>
-  ]
-}