@nx/react 17.0.4 → 17.0.6

package/typings/style.d.ts

@@ -2,7 +2,6 @@ export type SupportedStyles =
   | 'css'
   | 'scss'
   | 'less'
-  | 'tailwind'
   | 'styled-components'
   | '@emotion/styled'
   | 'styled-jsx'

package/mf/dynamic-federation.d.ts

@@ -1,4 +0,0 @@
-export type ResolveRemoteUrlFunction = (remoteName: string) => string | Promise<string>;
-export declare function setRemoteUrlResolver(_resolveRemoteUrl: ResolveRemoteUrlFunction): void;
-export declare function setRemoteDefinitions(definitions: Record<string, string>): void;
-export declare function loadRemoteModule(remoteName: string, moduleName: string): Promise<any>;

package/mf/dynamic-federation.js

@@ -1,75 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadRemoteModule = exports.setRemoteDefinitions = exports.setRemoteUrlResolver = void 0;
-let remoteUrlDefinitions;
-let resolveRemoteUrl;
-const remoteModuleMap = new Map();
-const remoteContainerMap = new Map();
-let initialSharingScopeCreated = false;
-function setRemoteUrlResolver(_resolveRemoteUrl) {
-    resolveRemoteUrl = _resolveRemoteUrl;
-}
-exports.setRemoteUrlResolver = setRemoteUrlResolver;
-function setRemoteDefinitions(definitions) {
-    remoteUrlDefinitions = definitions;
-}
-exports.setRemoteDefinitions = setRemoteDefinitions;
-async function loadRemoteModule(remoteName, moduleName) {
-    const remoteModuleKey = `${remoteName}:${moduleName}`;
-    if (remoteModuleMap.has(remoteModuleKey)) {
-        return remoteModuleMap.get(remoteModuleKey);
-    }
-    const container = remoteContainerMap.has(remoteName)
-        ? remoteContainerMap.get(remoteName)
-        : await loadRemoteContainer(remoteName);
-    const factory = await container.get(moduleName);
-    const Module = factory();
-    remoteModuleMap.set(remoteModuleKey, Module);
-    return Module;
-}
-exports.loadRemoteModule = loadRemoteModule;
-const fetchRemoteModule = (url, remoteName) => {
-    return new Promise((resolve, reject) => {
-        const script = document.createElement('script');
-        script.src = url;
-        script.type = 'text/javascript';
-        script.async = true;
-        script.onload = () => {
-            const proxy = {
-                get: (request) => window[remoteName].get(request),
-                init: (arg) => {
-                    try {
-                        window[remoteName].init(arg);
-                    }
-                    catch (e) {
-                        console.error(`Failed to initialize remote ${remoteName}`, e);
-                        reject(e);
-                    }
-                },
-            };
-            resolve(proxy);
-        };
-        script.onerror = () => reject(new Error(`Remote ${remoteName} not found`));
-        document.head.appendChild(script);
-    });
-};
-async function loadRemoteContainer(remoteName) {
-    if (!resolveRemoteUrl && !remoteUrlDefinitions) {
-        throw new Error('Call setRemoteDefinitions or setRemoteUrlResolver to allow Dynamic Federation to find the remote apps correctly.');
-    }
-    if (!initialSharingScopeCreated) {
-        initialSharingScopeCreated = true;
-        await __webpack_init_sharing__('default');
-    }
-    const remoteUrl = remoteUrlDefinitions
-        ? remoteUrlDefinitions[remoteName]
-        : await resolveRemoteUrl(remoteName);
-    let containerUrl = remoteUrl;
-    if (!remoteUrl.endsWith('.mjs') && !remoteUrl.endsWith('.js')) {
-        containerUrl = `${remoteUrl}${remoteUrl.endsWith('/') ? '' : '/'}remoteEntry.js`;
-    }
-    const container = await fetchRemoteModule(containerUrl, remoteName);
-    await container.init(__webpack_share_scopes__.default);
-    remoteContainerMap.set(remoteName, container);
-    return container;
-}

package/mf/index.d.ts

@@ -1 +0,0 @@
-export { loadRemoteModule, setRemoteDefinitions, setRemoteUrlResolver, } from './dynamic-federation';

package/mf/index.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setRemoteUrlResolver = exports.setRemoteDefinitions = exports.loadRemoteModule = void 0;
-var dynamic_federation_1 = require("./dynamic-federation");
-Object.defineProperty(exports, "loadRemoteModule", { enumerable: true, get: function () { return dynamic_federation_1.loadRemoteModule; } });
-Object.defineProperty(exports, "setRemoteDefinitions", { enumerable: true, get: function () { return dynamic_federation_1.setRemoteDefinitions; } });
-Object.defineProperty(exports, "setRemoteUrlResolver", { enumerable: true, get: function () { return dynamic_federation_1.setRemoteUrlResolver; } });

package/plugins/nx-react-webpack-plugin/lib/apply-react-config.d.ts

@@ -1,4 +0,0 @@
-import { Configuration, WebpackOptionsNormalized } from 'webpack';
-export declare function applyReactConfig(options: {
-    svgr?: boolean;
-}, config?: Partial<WebpackOptionsNormalized | Configuration>): void;

package/plugins/nx-react-webpack-plugin/lib/apply-react-config.js

@@ -1,86 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyReactConfig = void 0;
-function applyReactConfig(options, config = {}) {
-    if (!process.env['NX_TASK_TARGET_PROJECT'])
-        return;
-    addHotReload(config);
-    if (options.svgr !== false) {
-        removeSvgLoaderIfPresent(config);
-        // TODO(v20): Remove file-loader and use `?react` querystring to differentiate between asset and SVGR.
-        // It should be:
-        // use: [{
-        //   test: /\.svg$/i,
-        //   type: 'asset',
-        //   resourceQuery: /react/, // *.svg?react
-        // },
-        // {
-        //   test: /\.svg$/i,
-        //   issuer: /\.[jt]sx?$/,
-        //   resourceQuery: { not: [/react/] }, // exclude react component if *.svg?react
-        //   use: ['@svgr/webpack'],
-        // }],
-        // See:
-        // - SVGR: https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project
-        // - Vite: https://www.npmjs.com/package/vite-plugin-svgr
-        // - Rsbuild: https://github.com/web-infra-dev/rsbuild/pull/1783
-        // Note: We also need a migration for any projects that are using SVGR to convert
-        //       `import { ReactComponent as X } from './x.svg` to
-        //       `import X from './x.svg?react';
-        config.module.rules.push({
-            test: /\.svg$/,
-            issuer: /\.(js|ts|md)x?$/,
-            use: [
-                {
-                    loader: require.resolve('@svgr/webpack'),
-                    options: {
-                        svgo: false,
-                        titleProp: true,
-                        ref: true,
-                    },
-                },
-                {
-                    loader: require.resolve('file-loader'),
-                    options: {
-                        name: '[name].[hash].[ext]',
-                    },
-                },
-            ],
-        });
-    }
-    // enable webpack node api
-    config.node = {
-        __dirname: true,
-        __filename: true,
-    };
-}
-exports.applyReactConfig = applyReactConfig;
-function addHotReload(config) {
-    if (config.mode === 'development' && config['devServer']?.hot) {
-        // add `react-refresh/babel` to babel loader plugin
-        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'] || []),
-                [
-                    require.resolve('react-refresh/babel'),
-                    {
-                        skipEnvCheck: true,
-                    },
-                ],
-            ];
-        }
-        const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-        config.plugins.push(new ReactRefreshPlugin());
-    }
-}
-// We remove potentially conflicting rules that target SVGs because we use @svgr/webpack loader
-// See https://github.com/nrwl/nx/issues/14383
-function removeSvgLoaderIfPresent(config) {
-    const svgLoaderIdx = config.module.rules.findIndex((rule) => typeof rule === 'object' && rule.test.toString().includes('svg'));
-    if (svgLoaderIdx === -1)
-        return;
-    config.module.rules.splice(svgLoaderIdx, 1);
-}

package/plugins/nx-react-webpack-plugin/nx-react-webpack-plugin.d.ts

@@ -1,8 +0,0 @@
-import { Compiler } from 'webpack';
-export declare class NxReactWebpackPlugin {
-    private options;
-    constructor(options?: {
-        svgr?: boolean;
-    });
-    apply(compiler: Compiler): void;
-}

package/plugins/nx-react-webpack-plugin/nx-react-webpack-plugin.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NxReactWebpackPlugin = void 0;
-const apply_react_config_1 = require("./lib/apply-react-config");
-class NxReactWebpackPlugin {
-    constructor(options = {}) {
-        this.options = options;
-    }
-    apply(compiler) {
-        (0, apply_react_config_1.applyReactConfig)(this.options, compiler.options);
-    }
-}
-exports.NxReactWebpackPlugin = NxReactWebpackPlugin;

package/src/generators/application/files/style-tailwind/src/app/__fileName__.tsx__tmpl__

@@ -1,33 +0,0 @@
-<% if (classComponent) { %>
-import { Component } from 'react';
-<% } if (!minimal) { %>
-import NxWelcome from "./nx-welcome";
-<% } %>
-
-<% if (classComponent) { %>
-export class App extends Component {
-  render() {
-<% } else { %>
-export function App() {
-<% } %>
-  return (
-  <div>
-    <% if (!minimal) { %>
-    <NxWelcome title="<%= projectName %>"/>
-     <% } else { %>
-      <h1>
-        <span> Hello there, </span>
-        Welcome <%= projectName %> 👋
-      </h1>
-     <% } %>
-  </div>);
-<% if (classComponent) { %>
-  }
-}
-<% } else { %>
-}
-<% } %>
-
-export default App;
-
-<% if (inSourceTests === true) { %> <%- inSourceVitestTests %> <% } %>

package/src/generators/application/files/style-tailwind/src/styles.css

@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */

package/src/generators/host/files/common/src/main.js__tmpl__

@@ -1,10 +0,0 @@
-<% if (dynamic) { %>
-    import { setRemoteDefinitions } from '@nx/react/mf';
-
-    fetch('/assets/module-federation.manifest.json')
-    .then((res) => res.json())
-    .then(definitions => setRemoteDefinitions(definitions))
-    .then(() =>  import('./bootstrap').catch(err => console.error(err)));
-<% } else { %>
-    import('./bootstrap').catch(err => console.error(err));
-<% } %>

package/src/generators/host/files/common/tsconfig.lint.json__tmpl__

@@ -1,19 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": [
-        "node",
-        "@nx/react/typings/cssmodule.d.ts",
-        "@nx/react/typings/image.d.ts"
-    ]
-  },
-  "include": [
-    "src/**/*.js",
-    "src/**/*.jsx",
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "webpack.config.ts",
-    "webpack.prod.config.ts"
-  ]
-}

package/src/generators/host/files/common-ts/src/app/__fileName__.tsx__tmpl__

@@ -1,41 +0,0 @@
-import * as React from 'react';
-<% if (!minimal) { %>
-import NxWelcome from "./nx-welcome";
-<% } %>
-import { Link, Route, Routes } from 'react-router-dom';
-<% if (dynamic) { %>
-import { loadRemoteModule } from '@nx/react/mf';
-<% } %>
-
-<% if (remotes.length > 0) { %>
-<% remotes.forEach(function(r) { %>
-<% if (dynamic) { %>
- const <%= r.className %> = React.lazy(() => loadRemoteModule('<%= r.fileName %>', './Module'))
-<% } else  { %>
- const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
-<% } %>
- <% }); %>
-<% } %>
-
-export function App() {
-  return (
-    <React.Suspense fallback={null}>
-     <ul>
-       <li><Link to="/">Home</Link></li>
-       <% remotes.forEach(function(r) { %>
-         <li><Link to="/<%=r.fileName%>"><%=r.className%></Link></li>
-       <% }); %>
-     </ul>
-     <Routes>
-       <% if (!minimal) { %>
-       <Route path="/" element={<NxWelcome title="<%= projectName %>"/>} />
-       <% } %>
-       <% remotes.forEach(function(r) { %>
-         <Route path="/<%=r.fileName%>" element={<<%= r.className %>/>} />
-       <% }); %>
-     </Routes>
-    </React.Suspense>
-  );
-}
-
-export default App;

package/src/generators/host/files/common-ts/src/main.ts__tmpl__

@@ -1,10 +0,0 @@
-<% if (dynamic) { %>
-    import { setRemoteDefinitions } from '@nx/react/mf';
-
-    fetch('/assets/module-federation.manifest.json')
-    .then((res) => res.json())
-    .then(definitions => setRemoteDefinitions(definitions))
-    .then(() =>  import('./bootstrap').catch(err => console.error(err)));
-<% } else { %>
-    import('./bootstrap').catch(err => console.error(err));
-<% } %>

package/src/generators/remote/files/module-federation-ssr-ts/tsconfig.lint.json__tmpl__

@@ -1,19 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": [
-        "node",
-        "@nx/react/typings/cssmodule.d.ts",
-        "@nx/react/typings/image.d.ts"
-    ]
-  },
-  "include": [
-    "src/**/*.js",
-    "src/**/*.jsx",
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "webpack.config.ts",
-    "webpack.prod.config.ts"
-  ]
-}

package/src/generators/remote/files/module-federation-ts/tsconfig.lint.json__tmpl__

@@ -1,19 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": [
-        "node",
-        "@nx/react/typings/cssmodule.d.ts",
-        "@nx/react/typings/image.d.ts"
-    ]
-  },
-  "include": [
-    "src/**/*.js",
-    "src/**/*.jsx",
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "webpack.config.ts",
-    "webpack.prod.config.ts"
-  ]
-}

package/src/generators/remote/lib/add-remote-to-dynamic-host.d.ts

@@ -1,2 +0,0 @@
-import { Tree } from '@nx/devkit';
-export declare function addRemoteToDynamicHost(tree: Tree, remoteName: string, remotePort: number, pathToMfManifest: string): void;

package/src/generators/remote/lib/add-remote-to-dynamic-host.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.addRemoteToDynamicHost = void 0;
-function addRemoteToDynamicHost(tree, remoteName, remotePort, pathToMfManifest) {
-    const current = tree.read(pathToMfManifest, 'utf8');
-    tree.write(pathToMfManifest, JSON.stringify({
-        ...JSON.parse(current),
-        [remoteName]: `http://localhost:${remotePort}`,
-    }));
-}
-exports.addRemoteToDynamicHost = addRemoteToDynamicHost;

package/src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults.d.ts

@@ -1,2 +0,0 @@
-import { type Tree } from '@nx/devkit';
-export default function (tree: Tree): Promise<void>;

package/src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const devkit_1 = require("@nx/devkit");
-const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
-async function default_1(tree) {
-    if (!hasModuleFederationProject(tree)) {
-        return;
-    }
-    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(tree);
-    await (0, devkit_1.formatFiles)(tree);
-}
-exports.default = default_1;
-function hasModuleFederationProject(tree) {
-    const projects = (0, devkit_1.getProjects)(tree);
-    for (const project of projects.values()) {
-        const targets = project.targets || {};
-        for (const [_, target] of Object.entries(targets)) {
-            if (target.executor === '@nx/webpack:webpack' &&
-                (tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.ts')) ||
-                    tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.js')))) {
-                return true;
-            }
-        }
-    }
-    return false;
-}

package/src/migrations/update-18-1-1/fix-target-defaults-inputs.d.ts

@@ -1,2 +0,0 @@
-import { type Tree } from '@nx/devkit';
-export default function (tree: Tree): Promise<void>;

package/src/migrations/update-18-1-1/fix-target-defaults-inputs.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const devkit_1 = require("@nx/devkit");
-async function default_1(tree) {
-    if (!hasModuleFederationProject(tree)) {
-        return;
-    }
-    ensureTargetDefaultsContainProductionInputs(tree);
-    await (0, devkit_1.formatFiles)(tree);
-}
-exports.default = default_1;
-function ensureTargetDefaultsContainProductionInputs(tree) {
-    const nxJson = (0, devkit_1.readNxJson)(tree);
-    const webpackExecutor = '@nx/webpack:webpack';
-    const mfEnvVar = 'NX_MF_DEV_SERVER_STATIC_REMOTES';
-    nxJson.targetDefaults[webpackExecutor] ??= {};
-    nxJson.targetDefaults[webpackExecutor].inputs ??= [
-        'production',
-        '^production',
-        { env: mfEnvVar },
-    ];
-    if (!nxJson.targetDefaults[webpackExecutor].inputs.includes('production')) {
-        nxJson.targetDefaults[webpackExecutor].inputs.push('production');
-    }
-    if (!nxJson.targetDefaults[webpackExecutor].inputs.includes('^production')) {
-        nxJson.targetDefaults[webpackExecutor].inputs.push('^production');
-    }
-    let mfEnvVarExists = false;
-    for (const input of nxJson.targetDefaults[webpackExecutor].inputs) {
-        if (typeof input === 'object' && input['env'] === mfEnvVar) {
-            mfEnvVarExists = true;
-            break;
-        }
-    }
-    if (!mfEnvVarExists) {
-        nxJson.targetDefaults[webpackExecutor].inputs.push({ env: mfEnvVar });
-    }
-    (0, devkit_1.updateNxJson)(tree, nxJson);
-}
-function hasModuleFederationProject(tree) {
-    const projects = (0, devkit_1.getProjects)(tree);
-    for (const project of projects.values()) {
-        const targets = project.targets || {};
-        for (const [_, target] of Object.entries(targets)) {
-            if (target.executor === '@nx/webpack:webpack' &&
-                (tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.ts')) ||
-                    tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.js')))) {
-                return true;
-            }
-        }
-    }
-    return false;
-}

package/src/utils/add-mf-env-to-inputs.d.ts

@@ -1,2 +0,0 @@
-import { type Tree } from '@nx/devkit';
-export declare function addMfEnvToTargetDefaultInputs(tree: Tree): void;

package/src/utils/add-mf-env-to-inputs.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.addMfEnvToTargetDefaultInputs = void 0;
-const devkit_1 = require("@nx/devkit");
-function addMfEnvToTargetDefaultInputs(tree) {
-    const nxJson = (0, devkit_1.readNxJson)(tree);
-    const webpackExecutor = '@nx/webpack:webpack';
-    const mfEnvVar = 'NX_MF_DEV_SERVER_STATIC_REMOTES';
-    nxJson.targetDefaults ??= {};
-    nxJson.targetDefaults[webpackExecutor] ??= {};
-    nxJson.targetDefaults[webpackExecutor].inputs ??= [
-        'production',
-        '^production',
-    ];
-    let mfEnvVarExists = false;
-    for (const input of nxJson.targetDefaults[webpackExecutor].inputs) {
-        if (typeof input === 'object' && input['env'] === mfEnvVar) {
-            mfEnvVarExists = true;
-            break;
-        }
-    }
-    if (!mfEnvVarExists) {
-        nxJson.targetDefaults[webpackExecutor].inputs.push({ env: mfEnvVar });
-        (0, devkit_1.updateNxJson)(tree, nxJson);
-    }
-}
-exports.addMfEnvToTargetDefaultInputs = addMfEnvToTargetDefaultInputs;

package/src/utils/has-vite-plugin.d.ts

@@ -1,2 +0,0 @@
-import { Tree } from '@nx/devkit';
-export declare function hasVitePlugin(tree: Tree): boolean;

package/src/utils/has-vite-plugin.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.hasVitePlugin = void 0;
-const devkit_1 = require("@nx/devkit");
-function hasVitePlugin(tree) {
-    const nxJson = (0, devkit_1.readNxJson)(tree);
-    return !!nxJson.plugins?.some((p) => typeof p === 'string'
-        ? p === '@nx/vite/plugin'
-        : p.plugin === '@nx/vite/plugin');
-}
-exports.hasVitePlugin = hasVitePlugin;

package/src/utils/has-webpack-plugin.d.ts

@@ -1,2 +0,0 @@
-import { Tree } from '@nx/devkit';
-export declare function hasWebpackPlugin(tree: Tree): boolean;

package/src/utils/has-webpack-plugin.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.hasWebpackPlugin = void 0;
-const devkit_1 = require("@nx/devkit");
-function hasWebpackPlugin(tree) {
-    const nxJson = (0, devkit_1.readNxJson)(tree);
-    return !!nxJson.plugins?.some((p) => typeof p === 'string'
-        ? p === '@nx/webpack/plugin'
-        : p.plugin === '@nx/webpack/plugin');
-}
-exports.hasWebpackPlugin = hasWebpackPlugin;

package/src/utils/maybe-js.d.ts

@@ -1,3 +0,0 @@
-export declare function maybeJs(options: {
-    js?: boolean;
-}, path: string): string;