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

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

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

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

@@ -0,0 +1,79 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactNativeStorybookConfigure",
+  "title": "React native Storybook configuration",
+  "description": "Set up Storybook for a React-Native app or library.",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "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-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?",
+      "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.",
+      "default": false
+    },
+    "tsConfiguration": {
+      "type": "boolean",
+      "description": "Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.",
+      "default": true
+    },
+    "linter": {
+      "description": "The tool to use for running lint checks.",
+      "type": "string",
+      "enum": ["eslint"],
+      "default": "eslint"
+    },
+    "ignorePaths": {
+      "type": "array",
+      "description": "Paths to ignore when looking for components.",
+      "items": {
+        "type": "string",
+        "description": "Path to ignore."
+      },
+      "default": [
+        "*.stories.ts,*.stories.tsx,*.stories.js,*.stories.jsx,*.stories.mdx"
+      ],
+      "examples": [
+        "apps/my-app/src/not-stories/**",
+        "**/**/src/**/not-stories/**",
+        "libs/my-lib/**/*.something.ts",
+        "**/**/src/**/*.other.*",
+        "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
+      ]
+    }
+  },
+  "required": ["project"]
+}

package/src/generators/upgrade-native/lib/create-native-files.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { UpgradeNativeConfigureSchema } from '../schema';
+export declare function createNativeFiles(host: Tree, schema: UpgradeNativeConfigureSchema, appProjectRoot: string): void;

package/src/generators/upgrade-native/lib/create-native-files.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNativeFiles = void 0;
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+const normalize_options_1 = require("./normalize-options");
+function createNativeFiles(host, schema, appProjectRoot) {
+    const options = (0, normalize_options_1.normalizeOptions)(schema, appProjectRoot);
+    const iosProjectRoot = (0, devkit_1.joinPathFragments)(appProjectRoot, 'ios');
+    const androidProjectRoot = (0, devkit_1.joinPathFragments)(appProjectRoot, 'android');
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../../application/files/app/ios'), iosProjectRoot, options);
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../../application/files/app/android'), androidProjectRoot, options);
+}
+exports.createNativeFiles = createNativeFiles;

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

@@ -0,0 +1,12 @@
+import { UpgradeNativeConfigureSchema } from '../schema';
+export interface NormalizedSchema {
+    name: string;
+    displayName: string;
+    className: string;
+    lowerCaseName: string;
+    entryFile: string;
+    entryFileIos: string;
+    e2eTestRunner: 'cypress' | 'playwright' | 'detox' | 'none';
+    offsetFromRoot: string;
+}
+export declare function normalizeOptions(options: UpgradeNativeConfigureSchema, appProjectRoot: string): NormalizedSchema;

package/src/generators/upgrade-native/lib/normalize-options.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeOptions = void 0;
+const devkit_1 = require("@nx/devkit");
+function normalizeOptions(options, appProjectRoot // app root
+) {
+    const { fileName, className } = (0, devkit_1.names)(options.name);
+    const entryFileIos = 'src/main';
+    const entryFile = options.js ? 'src/main.js' : 'src/main.tsx';
+    /**
+     * if options.name is "my-app"
+     * name: "my-app", className: 'MyApp', lowerCaseName: 'myapp', displayName: 'MyApp'
+     * if options.name is "myApp"
+     * name: "my-app", className: 'MyApp', lowerCaseName: 'myapp', displayName: 'MyApp'
+     */
+    return {
+        name: fileName,
+        className,
+        lowerCaseName: className.toLowerCase(),
+        displayName: options.displayName || className,
+        entryFile,
+        entryFileIos,
+        e2eTestRunner: options.e2eTestRunner,
+        offsetFromRoot: (0, devkit_1.offsetFromRoot)(appProjectRoot),
+    };
+}
+exports.normalizeOptions = normalizeOptions;

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

@@ -0,0 +1,9 @@
+import { Linter } from '@nx/eslint';
+
+export interface UpgradeNativeConfigureSchema {
+  name: string;
+  displayName?: string;
+  js: boolean; // default is false
+  e2eTestRunner: 'cypress' | 'playwright' | 'detox' | 'none'; // default is cypress
+  install: boolean; // default is true
+}

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

@@ -0,0 +1,41 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactNativeUpgradeNativeConfigure",
+  "title": "React native upgrade native configuration",
+  "description": "Upgrade native iOS and Android code to latest.",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "Application project name to upgrade native files.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-dropdown": "project"
+    },
+    "displayName": {
+      "description": "The display name to show in the application. Defaults to name.",
+      "type": "string"
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate JavaScript files rather than TypeScript files",
+      "default": false
+    },
+    "e2eTestRunner": {
+      "description": "Adds the specified e2e test runner.",
+      "type": "string",
+      "enum": ["cypress", "playwright", "detox", "none"],
+      "default": "cypress"
+    },
+    "install": {
+      "type": "boolean",
+      "description": "Runs `pod install` for native modules before building iOS app.",
+      "default": true,
+      "x-priority": "internal"
+    }
+  },
+  "required": ["name"]
+}

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

@@ -0,0 +1,10 @@
+/**
+ * @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.
+ */
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { UpgradeNativeConfigureSchema } from './schema';
+export declare function reactNativeUpgradeNativeGenerator(host: Tree, schema: UpgradeNativeConfigureSchema): Promise<GeneratorCallback>;
+export default reactNativeUpgradeNativeGenerator;

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

@@ -0,0 +1,31 @@
+"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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reactNativeUpgradeNativeGenerator = void 0;
+const devkit_1 = require("@nx/devkit");
+const fs_1 = require("fs");
+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');
+    if (projectType !== 'application' ||
+        !(0, fs_1.existsSync)(iosProjectRoot) ||
+        !(0, fs_1.existsSync)(androidProjectRoot)) {
+        throw new Error(`Could not upgrade React Native code for ${schema.name}`);
+    }
+    (0, create_native_files_1.createNativeFiles)(host, schema, appProjectRoot);
+    const podInstallTask = (0, pod_install_task_1.runPodInstall)(iosProjectRoot, schema.install);
+    const chmodTaskGradlew = (0, chmod_android_gradle_files_1.chmodAndroidGradlewFilesTask)(androidProjectRoot);
+    return (0, devkit_1.runTasksInSerial)(podInstallTask, chmodTaskGradlew);
+}
+exports.reactNativeUpgradeNativeGenerator = reactNativeUpgradeNativeGenerator;
+exports.default = reactNativeUpgradeNativeGenerator;

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>
+);

package/src/generators/web-configuration/files/base-webpack/webpack.config.js__tmpl__

@@ -0,0 +1,77 @@
+<% if (webpackPluginOptions) { %>
+const { NxWebpackPlugin } = require('@nx/webpack');
+const { NxReactWebpackPlugin } = require('@nx/react');
+
+module.exports = {
+  resolve: {
+    alias: {
+      'react-native$': 'react-native-web',
+    },
+    extensions: ['.web.tsx', '.web.ts', '.web.jsx', '.web.js']
+  },
+  devServer: {
+    port: 4200
+  },
+  plugins: [
+    new NxWebpackPlugin({
+      tsConfig: '<%= webpackPluginOptions.tsConfig %>',
+      compiler: '<%= webpackPluginOptions.compiler %>',
+      main: '<%= webpackPluginOptions.main %>',
+      index: '<%= webpackPluginOptions.index %>',
+      outputPath: '<%= webpackPluginOptions.outputPath %>', 
+      baseHref: '<%= webpackPluginOptions.baseHref %>',
+      assets: <%- JSON.stringify(webpackPluginOptions.assets) %>,
+      styles: <%- JSON.stringify(webpackPluginOptions.styles) %>,
+      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
+      optimization: process.env['NODE_ENV'] === 'production',
+    }),
+    new NxReactWebpackPlugin({
+      // Uncomment this line if you don't want to use SVGR
+      // See: https://react-svgr.com/
+      // svgr: false
+    }),
+  ],
+};
+<% } else { %>
+const { composePlugins, withNx } = require('@nx/webpack');
+const { withReact } = require('@nx/react');
+
+// Nx plugins for webpack.
+module.exports = composePlugins(
+  withNx(),
+  withReact({
+    // Uncomment this line if you don't want to use SVGR
+    // See: https://react-svgr.com/
+    // svgr: false
+  }),
+  (config) => {
+    // Update the webpack config as needed here.
+    // e.g. `config.plugins.push(new MyPlugin())`
+    
+  config.resolve.alias = {
+    ...config.resolve.alias ?? {},
+    'react-native$': 'react-native-web',
+  };
+  config.resolve.extensions = [
+    '.web.tsx',
+    '.web.ts',
+    '.web.jsx',
+    '.web.js',
+    ...config.resolve.extensions,
+  ];
+  config.module.rules.push({
+    test: /\.(js|jsx)$/,
+    include: /react-native-vector-icons/,
+    loader: 'babel-loader',
+    options: {
+      presets: [
+        '@babel/preset-env',
+        ['@babel/preset-react', { runtime: 'automatic' }],
+      ],
+    },
+  });
+  
+  return config;
+  }
+);
+<% } %>

package/src/generators/web-configuration/lib/normalize-schema.d.ts

@@ -0,0 +1,17 @@
+import { Tree } from '@nx/devkit';
+import { WebConfigurationGeneratorSchema } from '../schema';
+export interface NormalizedSchema extends WebConfigurationGeneratorSchema {
+    projectRoot: string;
+    fileName: string;
+    className: string;
+}
+export declare function normalizeSchema(tree: Tree, schema: WebConfigurationGeneratorSchema): {
+    projectRoot: string;
+    offsetFromRoot: string;
+    fileName: string;
+    className: string;
+    project: string;
+    bundler: "vite" | "webpack";
+    skipFormat?: boolean;
+    skipPackageJson?: boolean;
+};

package/src/generators/web-configuration/lib/normalize-schema.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeSchema = void 0;
+const devkit_1 = require("@nx/devkit");
+function normalizeSchema(tree, schema) {
+    const project = (0, devkit_1.getProjects)(tree).get(schema.project);
+    const { fileName, className } = (0, devkit_1.names)(schema.project);
+    return {
+        ...schema,
+        projectRoot: project.root,
+        offsetFromRoot: (0, devkit_1.offsetFromRoot)(project.root),
+        fileName,
+        className,
+    };
+}
+exports.normalizeSchema = normalizeSchema;

package/src/generators/web-configuration/lib/webpack-targets.d.ts

@@ -0,0 +1,7 @@
+import { TargetConfiguration } from '@nx/devkit';
+import type { WithReactOptions } from '@nx/react';
+import type { WithNxOptions } from '@nx/webpack';
+import { NormalizedSchema } from './normalize-schema';
+export declare function createBuildTarget(options: NormalizedSchema): TargetConfiguration;
+export declare function createServeTarget(options: NormalizedSchema): TargetConfiguration;
+export declare function createNxWebpackPluginOptions(options: NormalizedSchema): WithNxOptions & WithReactOptions;

package/src/generators/web-configuration/lib/webpack-targets.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNxWebpackPluginOptions = exports.createServeTarget = exports.createBuildTarget = void 0;
+const devkit_1 = require("@nx/devkit");
+function createBuildTarget(options) {
+    return {
+        executor: '@nx/webpack:webpack',
+        outputs: ['{options.outputPath}'],
+        defaultConfiguration: 'production',
+        options: {
+            compiler: 'babel',
+            outputPath: (0, devkit_1.joinPathFragments)('dist', options.projectRoot != '.' ? options.projectRoot : options.project, 'web'),
+            index: (0, devkit_1.joinPathFragments)(options.projectRoot, 'src/index.html'),
+            baseHref: '/',
+            main: (0, devkit_1.joinPathFragments)(options.projectRoot, `src/main-web.tsx`),
+            tsConfig: (0, devkit_1.joinPathFragments)(options.projectRoot, 'tsconfig.app.json'),
+            assets: [
+                (0, devkit_1.joinPathFragments)(options.projectRoot, 'src/favicon.ico'),
+                (0, devkit_1.joinPathFragments)(options.projectRoot, 'src/assets'),
+            ],
+            webpackConfig: (0, devkit_1.joinPathFragments)(options.projectRoot, 'webpack.config.js'),
+        },
+        configurations: {
+            development: {
+                extractLicenses: false,
+                optimization: false,
+                sourceMap: true,
+                vendorChunk: true,
+            },
+            production: {
+                optimization: true,
+                outputHashing: 'all',
+                sourceMap: false,
+                namedChunks: false,
+                extractLicenses: true,
+                vendorChunk: false,
+            },
+        },
+    };
+}
+exports.createBuildTarget = createBuildTarget;
+function createServeTarget(options) {
+    return {
+        executor: '@nx/webpack:dev-server',
+        defaultConfiguration: 'development',
+        options: {
+            buildTarget: `${options.project}:build`,
+            hmr: true,
+        },
+        configurations: {
+            development: {
+                buildTarget: `${options.project}:build:development`,
+            },
+            production: {
+                buildTarget: `${options.project}:build:production`,
+                hmr: false,
+            },
+        },
+    };
+}
+exports.createServeTarget = createServeTarget;
+function createNxWebpackPluginOptions(options) {
+    return {
+        target: 'web',
+        compiler: 'babel',
+        outputPath: (0, devkit_1.joinPathFragments)('dist', options.projectRoot != '.' ? options.projectRoot : options.project),
+        index: './src/index.html',
+        baseHref: '/',
+        main: `./src/main-web.tsx`,
+        tsConfig: './tsconfig.app.json',
+        assets: ['./src/favicon.ico', './src/assets'],
+        styles: [],
+    };
+}
+exports.createNxWebpackPluginOptions = createNxWebpackPluginOptions;

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

@@ -0,0 +1,6 @@
+export interface WebConfigurationGeneratorSchema {
+  project: string;
+  bundler: 'vite' | 'webpack';
+  skipFormat?: boolean;
+  skipPackageJson?: boolean; //default is false
+}