@nx/react-native 18.0.0-beta.1 → 18.0.0-beta.3

package/src/generators/library/library.spec.ts

@@ -20,6 +20,7 @@ describe('lib', () => {
     unitTestRunner: 'jest',
     strict: true,
     projectNameAndRootFormat: 'as-provided',
+    addPlugin: true,
   };
 
   beforeEach(() => {
@@ -28,17 +29,6 @@ describe('lib', () => {
   });
 
   describe('not nested', () => {
-    it('should update project.json', async () => {
-      await libraryGenerator(appTree, { ...defaultSchema, tags: 'one,two' });
-      const projectConfiguration = readProjectConfiguration(appTree, 'my-lib');
-      expect(projectConfiguration.root).toEqual('my-lib');
-      expect(projectConfiguration.targets.build).toBeUndefined();
-      expect(projectConfiguration.targets.lint).toEqual({
-        executor: '@nx/eslint:lint',
-      });
-      expect(projectConfiguration.tags).toEqual(['one', 'two']);
-    });
-
     it('should update root tsconfig.base.json', async () => {
       await libraryGenerator(appTree, defaultSchema);
       const tsconfigJson = readJson(appTree, '/tsconfig.base.json');
@@ -145,19 +135,6 @@ describe('lib', () => {
       });
     });
 
-    it('should update project.json', async () => {
-      await libraryGenerator(appTree, {
-        ...defaultSchema,
-        directory: 'my-dir',
-      });
-      const projectConfiguration = readProjectConfiguration(appTree, 'my-lib');
-
-      expect(projectConfiguration.root).toEqual('my-dir');
-      expect(projectConfiguration.targets.lint).toEqual({
-        executor: '@nx/eslint:lint',
-      });
-    });
-
     it('should update root tsconfig.base.json', async () => {
       await libraryGenerator(appTree, {
         ...defaultSchema,
@@ -229,11 +206,6 @@ describe('lib', () => {
 
       expect(appTree.exists('my-lib/tsconfig.spec.json')).toBeFalsy();
       expect(appTree.exists('my-lib/jest.config.ts')).toBeFalsy();
-      const projectConfiguration = readProjectConfiguration(appTree, 'my-lib');
-      expect(projectConfiguration.targets.test).toBeUndefined();
-      expect(projectConfiguration.targets.lint).toMatchObject({
-        executor: '@nx/eslint:lint',
-      });
     });
 
     it('should generate test configuration', async () => {
@@ -277,22 +249,21 @@ describe('lib', () => {
           moduleNameMapper: {
             '\\\\.svg$': '@nx/react-native/plugins/jest/svg-mock',
           },
+          transform: {
+            '^.+.(js|ts|tsx)$': [
+              'babel-jest',
+              {
+                configFile: __dirname + '/.babelrc.js',
+              },
+            ],
+            '^.+.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$': require.resolve(
+              'react-native/jest/assetFileTransformer.js'
+            ),
+          },
           coverageDirectory: '../coverage/my-lib',
         };
         "
       `);
-      const projectConfiguration = readProjectConfiguration(appTree, 'my-lib');
-      expect(projectConfiguration.targets.test).toMatchInlineSnapshot(`
-        {
-          "executor": "@nx/jest:jest",
-          "options": {
-            "jestConfig": "my-lib/jest.config.ts",
-          },
-          "outputs": [
-            "{workspaceRoot}/coverage/{projectRoot}",
-          ],
-        }
-      `);
     });
   });
 

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

@@ -21,4 +21,5 @@ export interface Schema {
   strict?: boolean;
   setParserOptionsProject?: boolean;
   skipPackageJson?: boolean; //default is false
+  addPlugin?: boolean;
 }

package/src/generators/library/schema.json

@@ -36,7 +36,7 @@
     "linter": {
       "description": "The tool to use for running lint checks.",
       "type": "string",
-      "enum": ["eslint"],
+      "enum": ["eslint", "none"],
       "default": "eslint"
     },
     "unitTestRunner": {

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

@@ -1,5 +1,7 @@
 export interface StorybookStoriesSchema {
   project: string;
+  interactionTests?: boolean;
+  js?: boolean;
   ignorePaths?: string[];
   skipFormat?: boolean;
 }

package/src/generators/stories/schema.json

@@ -14,7 +14,20 @@
         "$source": "projectName",
         "index": 0
       },
-      "x-prompt": "For which project do you want to generate stories?"
+      "x-prompt": "For which project do you want to generate stories?",
+      "x-priority": "important"
+    },
+    "interactionTests": {
+      "type": "boolean",
+      "description": "Set up Storybook interaction tests.",
+      "x-prompt": "Do you want to set up Storybook interaction tests?",
+      "x-priority": "important",
+      "default": true
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate JavaScript files rather than TypeScript files.",
+      "default": false
     },
     "ignorePaths": {
       "type": "array",

package/src/generators/stories/stories.d.ts

@@ -1,5 +1,8 @@
 import { Tree } from '@nx/devkit';
 import { StorybookStoriesSchema } from './schema';
-export declare function createAllStories(tree: Tree, projectName: string, ignorePaths?: string[]): Promise<void>;
-export declare function storiesGenerator(host: Tree, schema: StorybookStoriesSchema): Promise<void>;
+/**
+ * @deprecated This would be a direct pass through to @nx/react:stories generator.
+ * TODO (@xiongemi): remove this generator for v19
+ */
+export declare function storiesGenerator(host: Tree, schema: StorybookStoriesSchema): Promise<import("@nx/devkit").GeneratorCallback>;
 export default storiesGenerator;

package/src/generators/stories/stories.js

@@ -1,56 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.storiesGenerator = exports.createAllStories = void 0;
-const devkit_1 = require("@nx/devkit");
-const path_1 = require("path");
-const component_story_1 = require("../component-story/component-story");
-const stories_1 = require("@nx/react/src/generators/stories/stories");
-const minimatch_1 = require("minimatch");
-const versions_1 = require("../../utils/versions");
-async function createAllStories(tree, projectName, ignorePaths) {
-    (0, devkit_1.ensurePackage)('@nx/storybook', versions_1.nxVersion);
-    const { isTheFileAStory } = await Promise.resolve().then(() => require('@nx/storybook/src/utils/utilities'));
-    const projects = (0, devkit_1.getProjects)(tree);
-    const projectConfiguration = projects.get(projectName);
-    const { sourceRoot } = projectConfiguration;
-    const projectPath = await (0, stories_1.projectRootPath)(tree, projectConfiguration);
-    let componentPaths = [];
-    (0, devkit_1.visitNotIgnoredFiles)(tree, projectPath, (path) => {
-        if (ignorePaths?.some((pattern) => (0, minimatch_1.minimatch)(path, pattern)))
-            return;
-        if ((path.endsWith('.tsx') && !path.endsWith('.spec.tsx')) ||
-            (path.endsWith('.js') && !path.endsWith('.spec.js')) ||
-            (path.endsWith('.jsx') && !path.endsWith('.spec.jsx'))) {
-            // Check if file is NOT a story (either ts/tsx or js/jsx)
-            if (!isTheFileAStory(tree, path)) {
-                // Since the file is not a story
-                // Let's see if the .stories.* file exists
-                const ext = path.slice(path.lastIndexOf('.'));
-                const storyPath = `${path.split(ext)[0]}.stories${ext}`;
-                if (!tree.exists(storyPath)) {
-                    componentPaths.push(path);
-                }
-            }
-        }
-    });
-    await Promise.all(componentPaths.map(async (componentPath) => {
-        const relativeCmpDir = componentPath.replace((0, path_1.join)(sourceRoot, '/'), '');
-        if (!(0, stories_1.containsComponentDeclaration)(tree, componentPath)) {
-            return;
-        }
-        await (0, component_story_1.default)(tree, {
-            componentPath: relativeCmpDir,
-            project: projectName,
-            skipFormat: true,
-        });
-    }));
-}
-exports.createAllStories = createAllStories;
+exports.storiesGenerator = void 0;
+const react_1 = require("@nx/react");
+/**
+ * @deprecated This would be a direct pass through to @nx/react:stories generator.
+ * TODO (@xiongemi): remove this generator for v19
+ */
 async function storiesGenerator(host, schema) {
-    await createAllStories(host, schema.project, schema.ignorePaths);
-    if (!schema.skipFormat) {
-        await (0, devkit_1.formatFiles)(host);
-    }
+    return (0, react_1.storiesGenerator)(host, schema);
 }
 exports.storiesGenerator = storiesGenerator;
 exports.default = storiesGenerator;

package/src/generators/storybook-configuration/configuration.d.ts

@@ -1,4 +1,9 @@
-import { GeneratorCallback, Tree } from '@nx/devkit';
+import { Tree } from '@nx/devkit';
 import { StorybookConfigureSchema } from './schema';
-export declare function storybookConfigurationGenerator(host: Tree, schema: StorybookConfigureSchema): Promise<GeneratorCallback>;
+export declare function storybookConfigurationGenerator(tree: Tree, schema: StorybookConfigureSchema): Promise<import("@nx/devkit").GeneratorCallback>;
+/**
+ * This would be a direct pass through to @nx/react:storybook-configuration generator.
+ * @TODO (@xiongemi): remove this generator for v19
+ */
+export declare function storybookConfigurationGeneratorInternal(host: Tree, schema: StorybookConfigureSchema): Promise<import("@nx/devkit").GeneratorCallback>;
 export default storybookConfigurationGenerator;

package/src/generators/storybook-configuration/configuration.js

@@ -1,56 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.storybookConfigurationGenerator = void 0;
+exports.storybookConfigurationGeneratorInternal = exports.storybookConfigurationGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
-const versions_1 = require("../../utils/versions");
-const stories_1 = require("../stories/stories");
-const add_resolver_main_fields_to_metro_config_1 = require("./lib/add-resolver-main-fields-to-metro-config");
-const create_storybook_files_1 = require("./lib/create-storybook-files");
-const replace_app_import_with_storybook_toggle_1 = require("./lib/replace-app-import-with-storybook-toggle");
-async function generateStories(host, schema) {
-    await (0, stories_1.default)(host, {
-        project: schema.name,
-        ignorePaths: schema.ignorePaths,
-        skipFormat: true,
+const react_1 = require("@nx/react");
+function storybookConfigurationGenerator(tree, schema) {
+    return storybookConfigurationGeneratorInternal(tree, {
+        addPlugin: false,
+        ...schema,
     });
 }
-async function storybookConfigurationGenerator(host, schema) {
-    const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/storybook', versions_1.nxVersion);
-    const installTask = await configurationGenerator(host, {
-        project: schema.name,
-        uiFramework: '@storybook/react-native',
-        configureCypress: false,
-        js: false,
-        linter: schema.linter,
-        standaloneConfig: schema.standaloneConfig,
-        tsConfiguration: schema.tsConfiguration,
-        skipFormat: true,
-    });
-    const installRequiredPackagesTask = await (0, devkit_1.addDependenciesToPackageJson)(host, {}, {
-        '@react-native-async-storage/async-storage': versions_1.reactNativeAsyncStorageVersion,
-        'react-native-safe-area-context': versions_1.reactNativeSafeAreaContextVersion,
-    });
-    addStorybookTask(host, schema.name);
-    (0, create_storybook_files_1.createStorybookFiles)(host, schema);
-    (0, replace_app_import_with_storybook_toggle_1.replaceAppImportWithStorybookToggle)(host, schema);
-    (0, add_resolver_main_fields_to_metro_config_1.addResolverMainFieldsToMetroConfig)(host, schema);
-    if (schema.generateStories) {
-        await generateStories(host, schema);
-    }
-    await (0, devkit_1.formatFiles)(host);
-    return (0, devkit_1.runTasksInSerial)(installTask, installRequiredPackagesTask);
-}
 exports.storybookConfigurationGenerator = storybookConfigurationGenerator;
-function addStorybookTask(host, projectName) {
-    const projectConfig = (0, devkit_1.readProjectConfiguration)(host, projectName);
-    projectConfig.targets['storybook'] = {
-        executor: '@nx/react-native:storybook',
-        options: {
-            searchDir: [projectConfig.sourceRoot],
-            outputFile: './.storybook/story-loader.js',
-            pattern: '**/*.stories.@(js|jsx|ts|tsx|md)',
-        },
-    };
-    (0, devkit_1.updateProjectConfiguration)(host, projectName, projectConfig);
+/**
+ * This would be a direct pass through to @nx/react:storybook-configuration generator.
+ * @TODO (@xiongemi): remove this generator for v19
+ */
+async function storybookConfigurationGeneratorInternal(host, schema) {
+    devkit_1.logger.warn(`Please run 'nx run @nx/react:storybook-configuration ${schema.project}' instead.`);
+    schema.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
+    return (0, react_1.storybookConfigurationGenerator)(host, schema);
 }
+exports.storybookConfigurationGeneratorInternal = storybookConfigurationGeneratorInternal;
 exports.default = storybookConfigurationGenerator;

package/src/generators/storybook-configuration/schema.d.ts

@@ -1,11 +1,13 @@
 import { Linter } from '@nx/eslint';
 
 export interface StorybookConfigureSchema {
-  name: string;
+  project: string;
+  interactionTests?: boolean;
   generateStories?: boolean;
   js?: boolean;
   tsConfiguration?: boolean;
   linter?: Linter;
-  standaloneConfig?: boolean;
   ignorePaths?: string[];
+  configureStaticServe?: boolean;
+  addPlugin?: boolean;
 }

package/src/generators/storybook-configuration/schema.json

@@ -6,24 +6,40 @@
   "description": "Set up Storybook for a React-Native app or library.",
   "type": "object",
   "properties": {
-    "name": {
+    "project": {
       "type": "string",
-      "aliases": ["project", "projectName"],
+      "aliases": ["name", "projectName"],
       "description": "Project for which to generate Storybook configuration.",
       "$default": {
         "$source": "argv",
         "index": 0
       },
       "x-prompt": "For which project do you want to generate Storybook configuration?",
-      "x-dropdown": "projects"
+      "x-dropdown": "projects",
+      "x-priority": "important"
+    },
+    "interactionTests": {
+      "type": "boolean",
+      "description": "Set up Storybook interaction tests.",
+      "x-prompt": "Do you want to set up Storybook interaction tests?",
+      "x-priority": "important",
+      "alias": ["configureTestRunner"],
+      "default": true
     },
     "generateStories": {
       "type": "boolean",
-      "description": "Automatically generate *.stories.ts files for components declared in this project?",
+      "description": "Automatically generate `*.stories.ts` files for components declared in this project?",
       "x-prompt": "Automatically generate *.stories.ts files for components declared in this project?",
       "default": true,
       "x-priority": "important"
     },
+    "configureStaticServe": {
+      "type": "boolean",
+      "description": "Specifies whether to configure a static file server target for serving storybook. Helpful for speeding up CI build/test times.",
+      "x-prompt": "Configure a static file server for the storybook instance?",
+      "default": true,
+      "x-priority": "important"
+    },
     "js": {
       "type": "boolean",
       "description": "Generate JavaScript story files rather than TypeScript story files.",
@@ -40,12 +56,6 @@
       "enum": ["eslint"],
       "default": "eslint"
     },
-    "standaloneConfig": {
-      "description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
-      "type": "boolean",
-      "default": true,
-      "x-deprecated": "Nx only supports standaloneConfig"
-    },
     "ignorePaths": {
       "type": "array",
       "description": "Paths to ignore when looking for components.",
@@ -65,5 +75,5 @@
       ]
     }
   },
-  "required": ["name"]
+  "required": ["project"]
 }

package/src/generators/upgrade-native/lib/normalize-options.d.ts

@@ -6,7 +6,7 @@ export interface NormalizedSchema {
     lowerCaseName: string;
     entryFile: string;
     entryFileIos: string;
-    e2eTestRunner: 'detox' | 'none';
+    e2eTestRunner: 'cypress' | 'playwright' | 'detox' | 'none';
     offsetFromRoot: string;
 }
 export declare function normalizeOptions(options: UpgradeNativeConfigureSchema, appProjectRoot: string): NormalizedSchema;

package/src/generators/upgrade-native/schema.d.ts

@@ -4,6 +4,6 @@ export interface UpgradeNativeConfigureSchema {
   name: string;
   displayName?: string;
   js: boolean; // default is false
-  e2eTestRunner: 'detox' | 'none'; // default is detox
+  e2eTestRunner: 'cypress' | 'playwright' | 'detox' | 'none'; // default is cypress
   install: boolean; // default is true
 }

package/src/generators/upgrade-native/schema.json

@@ -27,8 +27,8 @@
     "e2eTestRunner": {
       "description": "Adds the specified e2e test runner.",
       "type": "string",
-      "enum": ["detox", "none"],
-      "default": "detox"
+      "enum": ["cypress", "playwright", "detox", "none"],
+      "default": "cypress"
     },
     "install": {
       "type": "boolean",

package/src/generators/upgrade-native/upgrade-native.d.ts

@@ -1,4 +1,6 @@
 /**
+ * @deprecated use `nx run @nx/react-native:upgrade` instead.
+ * TODO (@xiongemi): remove this generator for nx v19
  * This function is a destructive command that replace React Native iOS and Android code with latest.
  * It would replace the Android and iOS folder entirely.
  */

package/src/generators/upgrade-native/upgrade-native.js

@@ -1,5 +1,7 @@
 "use strict";
 /**
+ * @deprecated use `nx run @nx/react-native:upgrade` instead.
+ * TODO (@xiongemi): remove this generator for nx v19
  * This function is a destructive command that replace React Native iOS and Android code with latest.
  * It would replace the Android and iOS folder entirely.
  */
@@ -11,6 +13,7 @@ const pod_install_task_1 = require("../../utils/pod-install-task");
 const chmod_android_gradle_files_1 = require("../../utils/chmod-android-gradle-files");
 const create_native_files_1 = require("./lib/create-native-files");
 async function reactNativeUpgradeNativeGenerator(host, schema) {
+    devkit_1.logger.warn(`Please run 'nx run @nx/react-native:upgrade ${schema.name}' instead.`);
     const { projectType, root: appProjectRoot } = (0, devkit_1.readProjectConfiguration)(host, schema.name);
     const iosProjectRoot = (0, devkit_1.joinPathFragments)(host.root, appProjectRoot, 'ios');
     const androidProjectRoot = (0, devkit_1.joinPathFragments)(host.root, appProjectRoot, 'android');

package/src/generators/web-configuration/files/base-vite/.babelrc.js.template

@@ -0,0 +1,23 @@
+module.exports = function (api) {
+  api.cache(true);
+
+  if (
+    process.env.NX_TASK_TARGET_TARGET === 'build' ||
+    process.env.NX_TASK_TARGET_TARGET.includes('storybook')
+  ) {
+    return {
+      presets: [
+        [
+          '@nx/react/babel',
+          {
+            runtime: 'automatic',
+          },
+        ],
+      ],
+    };
+  }
+
+  return {
+    presets: [['module:@react-native/babel-preset',  { "useTransformReactJSX": true }]],
+  };
+};

package/src/generators/web-configuration/files/base-vite/index.html__tmpl__

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en" style="height: 100%">
+  <head>
+    <meta charset="utf-8" />
+    <title><%= className %></title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+  </head>
+  <body style="height:100%">
+    <div id="root" style="display: flex; height: 100%"></div>
+    <script type="module" src="/src/main-web.tsx"></script>
+  </body>
+</html>

package/src/generators/web-configuration/files/base-vite/src/main-web.tsx__tmpl__

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react';
+import * as ReactDOM from 'react-dom/client';
+
+import App from './app/App';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(
+  <StrictMode><App /></StrictMode>
+);

package/src/generators/web-configuration/files/base-vite/vite.config.ts__tmpl__

@@ -0,0 +1,82 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import * as esbuild from 'esbuild';
+import { readFileSync } from 'fs';
+
+const extensions = [
+  '.mjs',
+  '.web.tsx',
+  '.tsx',
+  '.web.ts',
+  '.ts',
+  '.web.jsx',
+  '.jsx',
+  '.web.js',
+  '.js',
+  '.css',
+  '.json',
+];
+
+const rollupPlugin = (matchers: RegExp[]) => ({
+  name: 'js-in-jsx',
+  load(id: string) {
+    if (matchers.some((matcher) => matcher.test(id)) && id.endsWith('.js')) {
+      const file = readFileSync(id, { encoding: 'utf-8' });
+      return esbuild.transformSync(file, { loader: 'jsx', jsx: 'automatic' });
+    }
+  },
+});
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/<%= fileName %>',
+  define: {
+    global: 'window',
+  },
+
+  resolve: {
+    extensions,
+    alias: {
+      'react-native': 'react-native-web',
+    },
+  },
+
+  build: {
+    reportCompressedSize: true,
+    commonjsOptions: { transformMixedEsModules: true },
+    outDir: '../../dist/apps/<%= fileName %>/web',
+    rollupOptions: {
+      plugins: [rollupPlugin([/react-native-vector-icons/])],
+    },
+  },
+
+  server: {
+    port: 4200,
+    host: 'localhost',
+    fs: {
+      // Allow serving files from one level up to the project root
+      allow: ['..'],
+    },
+  },
+
+  preview: {
+    port: 4300,
+    host: 'localhost',
+  },
+
+  optimizeDeps: {
+    esbuildOptions: {
+      resolveExtensions: extensions,
+      jsx: 'automatic',
+      loader: { '.js': 'jsx' },
+    },
+  },
+
+  plugins: [react(), nxViteTsPaths()],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+});

package/src/generators/web-configuration/files/base-webpack/.babelrc.js.template

@@ -0,0 +1,23 @@
+module.exports = function (api) {
+  api.cache(true);
+
+  if (
+    process.env.NX_TASK_TARGET_TARGET === 'build' ||
+    process.env.NX_TASK_TARGET_TARGET.includes('storybook')
+  ) {
+    return {
+      presets: [
+        [
+          '@nx/react/babel',
+          {
+            runtime: 'automatic',
+          },
+        ],
+      ],
+    };
+  }
+
+  return {
+    presets: [['module:@react-native/babel-preset',  { "useTransformReactJSX": true }]],
+  };
+};

package/src/generators/web-configuration/files/base-webpack/src/index.html__tmpl__

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en" style="height: 100%">
+  <head>
+    <meta charset="utf-8" />
+    <title><%= className %></title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body style="height:100%">
+    <div id="root" style="display: flex; height: 100%"></div>
+  </body>
+</html>

package/src/generators/web-configuration/files/base-webpack/src/main-web.tsx__tmpl__

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react';
+import * as ReactDOM from 'react-dom/client';
+
+import App from './app/App';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(
+  <StrictMode><App /></StrictMode>
+);