@nx/react 0.0.0-pr-22179-271588f

package/LICENSE

@@ -0,0 +1,22 @@
+(The MIT License)
+
+Copyright (c) 2017-2023 Narwhal Technologies Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,68 @@
+<p style="text-align: center;">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-dark.svg">
+    <img alt="Nx - Smart Monorepos · Fast CI" src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-light.svg" width="100%">
+  </picture>
+</p>
+
+<div style="text-align: center;">
+
+[![CircleCI](https://circleci.com/gh/nrwl/nx.svg?style=svg)](https://circleci.com/gh/nrwl/nx)
+[![License](https://img.shields.io/npm/l/@nx/workspace.svg?style=flat-square)]()
+[![NPM Version](https://badge.fury.io/js/%40nrwl%2Fworkspace.svg)](https://www.npmjs.com/@nx/workspace)
+[![Semantic Release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)]()
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+[![Join the chat at https://gitter.im/nrwl-nx/community](https://badges.gitter.im/nrwl-nx/community.svg)](https://gitter.im/nrwl-nx/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Join us on the Official Nx Discord Server](https://img.shields.io/discord/1143497901675401286?label=discord)](https://go.nx.dev/community)
+
+</div>
+
+
+<hr>
+
+# Nx: Smart Monorepos · Fast CI
+
+Nx is a build system with built-in tooling and advanced CI capabilities. It helps you maintain and scale monorepos, both locally and on CI.
+
+This package is a [React plugin for Nx](https://nx.dev/packages/react).
+
+## Getting Started
+
+### Creating an Nx Workspace
+
+**Using `npx`**
+
+```bash
+npx create-nx-workspace
+```
+
+**Using `npm init`**
+
+```bash
+npm init nx-workspace
+```
+
+**Using `yarn create`**
+
+```bash
+yarn create nx-workspace
+```
+
+### Adding Nx to an Existing Repository
+
+Run:
+
+```bash
+npx nx@latest init
+```
+
+## Documentation & Resources
+
+- [Nx.Dev: Documentation, Guides, Tutorials](https://nx.dev)
+- [Intro to Nx](https://nx.dev/getting-started/intro)
+- [Official Nx YouTube Channel](https://www.youtube.com/@NxDevtools)
+- [Blog Posts About Nx](https://blog.nrwl.io/nx/home)
+
+<p style="text-align: center;"><a href="https://nx.dev/#learning-materials" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-courses-and-videos.svg" 
+width="100%" alt="Nx - Smart Monorepos · Fast CI"></a></p>
+

package/ast-utils.d.ts

@@ -0,0 +1 @@
+export { findMainRenderStatement, findComponentImportPath, findElements, findDefaultExport, findClosestOpening, isTag, } from './src/utils/ast-utils';

package/ast-utils.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isTag = exports.findClosestOpening = exports.findDefaultExport = exports.findElements = exports.findComponentImportPath = exports.findMainRenderStatement = void 0;
+// Exported schematics development outside of Nx. e.g. workspace schematics
+var ast_utils_1 = require("./src/utils/ast-utils");
+Object.defineProperty(exports, "findMainRenderStatement", { enumerable: true, get: function () { return ast_utils_1.findMainRenderStatement; } });
+Object.defineProperty(exports, "findComponentImportPath", { enumerable: true, get: function () { return ast_utils_1.findComponentImportPath; } });
+Object.defineProperty(exports, "findElements", { enumerable: true, get: function () { return ast_utils_1.findElements; } });
+Object.defineProperty(exports, "findDefaultExport", { enumerable: true, get: function () { return ast_utils_1.findDefaultExport; } });
+Object.defineProperty(exports, "findClosestOpening", { enumerable: true, get: function () { return ast_utils_1.findClosestOpening; } });
+Object.defineProperty(exports, "isTag", { enumerable: true, get: function () { return ast_utils_1.isTag; } });

package/babel.d.ts

@@ -0,0 +1,20 @@
+interface NxReactBabelOptions {
+    development?: boolean;
+    runtime?: string;
+    importSource?: string;
+    useBuiltIns?: boolean | string;
+    decorators?: {
+        decoratorsBeforeExport?: boolean;
+        legacy?: boolean;
+    };
+    loose?: boolean;
+    /** @deprecated Use `loose` option instead of `classProperties.loose`
+     */
+    classProperties?: {
+        loose?: boolean;
+    };
+}
+declare function getReactPresetOptions({ presetOptions, env, }: {
+    env: string;
+    presetOptions: NxReactBabelOptions;
+}): Record<string, string | boolean>;

package/babel.js

@@ -0,0 +1,50 @@
+/*
+ * Babel preset to provide React support for Nx.
+ */
+module.exports = function (api, options) {
+    api.assertVersion(7);
+    const env = api.env();
+    /**
+     * pagesDir is set when being transpiled by Next.js
+     */
+    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
+     * the second time here results in having two instances of this preset.
+     *
+     * The plugin is duplicated as opposed to being merged because Next.js uses
+     * their own compiled version of the plugin, rather than one from node_modules.
+     * That affectively changes the "identity" of the plugin, and babel treats it as
+     * two separate instances.
+     *
+     * More on babel merging: https://babeljs.io/docs/en/options#merging
+     */
+    if (!isNextJs) {
+        presets.push([
+            require.resolve('@babel/preset-react'),
+            getReactPresetOptions({
+                presetOptions: options,
+                env,
+            }),
+        ]);
+    }
+    return {
+        presets,
+    };
+};
+function getReactPresetOptions({ presetOptions, env, }) {
+    const reactPresetOptions = {
+        runtime: presetOptions.runtime ?? 'automatic',
+        development: presetOptions.development ?? env !== 'production',
+    };
+    // JSX spread is transformed into object spread in `@babel/plugin-transform-react-jsx`
+    // `useBuiltIns` will be removed in Babel 8.
+    if (reactPresetOptions.runtime === 'automatic') {
+        reactPresetOptions.useBuiltIns = true;
+    }
+    if (presetOptions.importSource) {
+        reactPresetOptions.importSource = presetOptions.importSource;
+    }
+    return reactPresetOptions;
+}

package/executors.json

@@ -0,0 +1,14 @@
+{
+  "executors": {
+    "module-federation-dev-server": {
+      "implementation": "./src/executors/module-federation-dev-server/module-federation-dev-server.impl",
+      "schema": "./src/executors/module-federation-dev-server/schema.json",
+      "description": "Serve a host or remote application."
+    },
+    "module-federation-ssr-dev-server": {
+      "implementation": "./src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl",
+      "schema": "./src/executors/module-federation-ssr-dev-server/schema.json",
+      "description": "Serve a host application along with it's known remotes."
+    }
+  }
+}

package/generators.json

@@ -0,0 +1,112 @@
+{
+  "name": "Nx React",
+  "version": "0.1",
+  "extends": ["@nx/workspace"],
+  "generators": {
+    "init": {
+      "factory": "./src/generators/init/init#reactInitGenerator",
+      "schema": "./src/generators/init/schema.json",
+      "description": "Initialize the `@nrwl/react` plugin.",
+      "aliases": ["ng-add"],
+      "hidden": true
+    },
+    "application": {
+      "factory": "./src/generators/application/application#applicationGeneratorInternal",
+      "schema": "./src/generators/application/schema.json",
+      "aliases": ["app"],
+      "x-type": "application",
+      "description": "Create a React application."
+    },
+    "library": {
+      "factory": "./src/generators/library/library#libraryGeneratorInternal",
+      "schema": "./src/generators/library/schema.json",
+      "aliases": ["lib"],
+      "x-type": "library",
+      "description": "Create a React library."
+    },
+    "component": {
+      "factory": "./src/generators/component/component#componentGeneratorInternal",
+      "schema": "./src/generators/component/schema.json",
+      "description": "Create a React component.",
+      "aliases": ["c"]
+    },
+    "redux": {
+      "factory": "./src/generators/redux/redux#reduxGeneratorInternal",
+      "schema": "./src/generators/redux/schema.json",
+      "description": "Create a Redux slice for a project.",
+      "aliases": ["slice"]
+    },
+    "storybook-configuration": {
+      "factory": "./src/generators/storybook-configuration/configuration#storybookConfigurationGeneratorInternal",
+      "schema": "./src/generators/storybook-configuration/schema.json",
+      "description": "Set up storybook for a React app or library.",
+      "hidden": false
+    },
+    "component-story": {
+      "factory": "./src/generators/component-story/component-story#componentStoryGenerator",
+      "schema": "./src/generators/component-story/schema.json",
+      "description": "Generate storybook story for a React component",
+      "hidden": false
+    },
+    "stories": {
+      "factory": "./src/generators/stories/stories#storiesGenerator",
+      "schema": "./src/generators/stories/schema.json",
+      "description": "Create stories/specs for all components declared in an app or library.",
+      "hidden": false
+    },
+    "component-cypress-spec": {
+      "factory": "./src/generators/component-cypress-spec/component-cypress-spec#componentCypressGenerator",
+      "schema": "./src/generators/component-cypress-spec/schema.json",
+      "description": "Create a Cypress spec for a UI component that has a story.",
+      "hidden": false
+    },
+    "hook": {
+      "factory": "./src/generators/hook/hook#hookGeneratorInternal",
+      "schema": "./src/generators/hook/schema.json",
+      "description": "Create a hook.",
+      "aliases": ["c"]
+    },
+    "host": {
+      "factory": "./src/generators/host/host#hostGeneratorInternal",
+      "schema": "./src/generators/host/schema.json",
+      "x-type": "application",
+      "description": "Generate a host react application"
+    },
+    "remote": {
+      "factory": "./src/generators/remote/remote#remoteGeneratorInternal",
+      "schema": "./src/generators/remote/schema.json",
+      "x-type": "application",
+      "description": "Generate a remote react application"
+    },
+    "cypress-component-configuration": {
+      "factory": "./src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfigGenerator",
+      "schema": "./src/generators/cypress-component-configuration/schema.json",
+      "description": "Setup Cypress component testing for a React project",
+      "hidden": false
+    },
+    "component-test": {
+      "factory": "./src/generators/component-test/component-test#componentTestGenerator",
+      "schema": "./src/generators/component-test/schema.json",
+      "description": "Generate a Cypress component test for a React component",
+      "hidden": false
+    },
+    "setup-tailwind": {
+      "factory": "./src/generators/setup-tailwind/setup-tailwind#setupTailwindGenerator",
+      "schema": "./src/generators/setup-tailwind/schema.json",
+      "description": "Set up Tailwind configuration for a project.",
+      "hidden": false
+    },
+    "setup-ssr": {
+      "factory": "./src/generators/setup-ssr/setup-ssr#setupSsrGenerator",
+      "schema": "./src/generators/setup-ssr/schema.json",
+      "description": "Set up SSR configuration for a project.",
+      "hidden": false
+    },
+    "federate-module": {
+      "factory": "./src/generators/federate-module/federate-module#federateModuleGenerator",
+      "schema": "./src/generators/federate-module/schema.json",
+      "description": "Federate a module.",
+      "hidden": false
+    }
+  }
+}

package/index.d.ts

@@ -0,0 +1,22 @@
+export { extraEslintDependencies, extendReactEslintJson, } from './src/utils/lint';
+export { cssInJsDependenciesBabel } from './src/utils/styled';
+export { assertValidStyle } from './src/utils/assertion';
+export { reactDomVersion, reactVersion } from './src/utils/versions';
+export { applicationGenerator } from './src/generators/application/application';
+export { componentGenerator } from './src/generators/component/component';
+export { hookGenerator } from './src/generators/hook/hook';
+export { componentCypressGenerator } from './src/generators/component-cypress-spec/component-cypress-spec';
+export { componentStoryGenerator } from './src/generators/component-story/component-story';
+export { libraryGenerator } from './src/generators/library/library';
+export { reactInitGenerator } from './src/generators/init/init';
+export { reduxGenerator } from './src/generators/redux/redux';
+export { storiesGenerator } from './src/generators/stories/stories';
+export { storybookConfigurationGenerator } from './src/generators/storybook-configuration/configuration';
+export { hostGenerator } from './src/generators/host/host';
+export { remoteGenerator } from './src/generators/remote/remote';
+export { cypressComponentConfigGenerator } from './src/generators/cypress-component-configuration/cypress-component-configuration';
+export { componentTestGenerator } from './src/generators/component-test/component-test';
+export { setupTailwindGenerator } from './src/generators/setup-tailwind/setup-tailwind';
+export type { SupportedStyles } from './typings/style';
+export * from './plugins/with-react';
+export { NxReactWebpackPlugin } from './plugins/nx-react-webpack-plugin/nx-react-webpack-plugin';

package/index.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NxReactWebpackPlugin = exports.setupTailwindGenerator = exports.componentTestGenerator = exports.cypressComponentConfigGenerator = exports.remoteGenerator = exports.hostGenerator = exports.storybookConfigurationGenerator = exports.storiesGenerator = exports.reduxGenerator = exports.reactInitGenerator = exports.libraryGenerator = exports.componentStoryGenerator = exports.componentCypressGenerator = exports.hookGenerator = exports.componentGenerator = exports.applicationGenerator = exports.reactVersion = exports.reactDomVersion = exports.assertValidStyle = exports.cssInJsDependenciesBabel = exports.extendReactEslintJson = exports.extraEslintDependencies = void 0;
+const tslib_1 = require("tslib");
+var lint_1 = require("./src/utils/lint");
+Object.defineProperty(exports, "extraEslintDependencies", { enumerable: true, get: function () { return lint_1.extraEslintDependencies; } });
+Object.defineProperty(exports, "extendReactEslintJson", { enumerable: true, get: function () { return lint_1.extendReactEslintJson; } });
+var styled_1 = require("./src/utils/styled");
+Object.defineProperty(exports, "cssInJsDependenciesBabel", { enumerable: true, get: function () { return styled_1.cssInJsDependenciesBabel; } });
+var assertion_1 = require("./src/utils/assertion");
+Object.defineProperty(exports, "assertValidStyle", { enumerable: true, get: function () { return assertion_1.assertValidStyle; } });
+var versions_1 = require("./src/utils/versions");
+Object.defineProperty(exports, "reactDomVersion", { enumerable: true, get: function () { return versions_1.reactDomVersion; } });
+Object.defineProperty(exports, "reactVersion", { enumerable: true, get: function () { return versions_1.reactVersion; } });
+var application_1 = require("./src/generators/application/application");
+Object.defineProperty(exports, "applicationGenerator", { enumerable: true, get: function () { return application_1.applicationGenerator; } });
+var component_1 = require("./src/generators/component/component");
+Object.defineProperty(exports, "componentGenerator", { enumerable: true, get: function () { return component_1.componentGenerator; } });
+var hook_1 = require("./src/generators/hook/hook");
+Object.defineProperty(exports, "hookGenerator", { enumerable: true, get: function () { return hook_1.hookGenerator; } });
+var component_cypress_spec_1 = require("./src/generators/component-cypress-spec/component-cypress-spec");
+Object.defineProperty(exports, "componentCypressGenerator", { enumerable: true, get: function () { return component_cypress_spec_1.componentCypressGenerator; } });
+var component_story_1 = require("./src/generators/component-story/component-story");
+Object.defineProperty(exports, "componentStoryGenerator", { enumerable: true, get: function () { return component_story_1.componentStoryGenerator; } });
+var library_1 = require("./src/generators/library/library");
+Object.defineProperty(exports, "libraryGenerator", { enumerable: true, get: function () { return library_1.libraryGenerator; } });
+var init_1 = require("./src/generators/init/init");
+Object.defineProperty(exports, "reactInitGenerator", { enumerable: true, get: function () { return init_1.reactInitGenerator; } });
+var redux_1 = require("./src/generators/redux/redux");
+Object.defineProperty(exports, "reduxGenerator", { enumerable: true, get: function () { return redux_1.reduxGenerator; } });
+var stories_1 = require("./src/generators/stories/stories");
+Object.defineProperty(exports, "storiesGenerator", { enumerable: true, get: function () { return stories_1.storiesGenerator; } });
+var configuration_1 = require("./src/generators/storybook-configuration/configuration");
+Object.defineProperty(exports, "storybookConfigurationGenerator", { enumerable: true, get: function () { return configuration_1.storybookConfigurationGenerator; } });
+var host_1 = require("./src/generators/host/host");
+Object.defineProperty(exports, "hostGenerator", { enumerable: true, get: function () { return host_1.hostGenerator; } });
+var remote_1 = require("./src/generators/remote/remote");
+Object.defineProperty(exports, "remoteGenerator", { enumerable: true, get: function () { return remote_1.remoteGenerator; } });
+var cypress_component_configuration_1 = require("./src/generators/cypress-component-configuration/cypress-component-configuration");
+Object.defineProperty(exports, "cypressComponentConfigGenerator", { enumerable: true, get: function () { return cypress_component_configuration_1.cypressComponentConfigGenerator; } });
+var component_test_1 = require("./src/generators/component-test/component-test");
+Object.defineProperty(exports, "componentTestGenerator", { enumerable: true, get: function () { return component_test_1.componentTestGenerator; } });
+var setup_tailwind_1 = require("./src/generators/setup-tailwind/setup-tailwind");
+Object.defineProperty(exports, "setupTailwindGenerator", { enumerable: true, get: function () { return setup_tailwind_1.setupTailwindGenerator; } });
+tslib_1.__exportStar(require("./plugins/with-react"), exports);
+var nx_react_webpack_plugin_1 = require("./plugins/nx-react-webpack-plugin/nx-react-webpack-plugin");
+Object.defineProperty(exports, "NxReactWebpackPlugin", { enumerable: true, get: function () { return nx_react_webpack_plugin_1.NxReactWebpackPlugin; } });

package/mf/dynamic-federation.d.ts

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,75 @@
+"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

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

package/mf/index.js

@@ -0,0 +1,7 @@
+"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; } });