@nx/react-native 18.0.0-beta.1 → 18.0.0-canary.20240201-8762c38

package/src/generators/application/files/app/android/app/src/main/java/com/__lowerCaseName__/MainActivity.java.template

@@ -1,32 +0,0 @@
-package com.<%= lowerCaseName %>;
-
-import com.facebook.react.ReactActivity;
-import com.facebook.react.ReactActivityDelegate;
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
-import com.facebook.react.defaults.DefaultReactActivityDelegate;
-
-public class MainActivity extends ReactActivity {
-
-  /**
-   * Returns the name of the main component registered from JavaScript. This is used to schedule
-   * rendering of the component.
-   */
-  @Override
-  protected String getMainComponentName() {
-    return "<%= className %>";
-  }
-
-  /**
-   * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link
-   * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React
-   * (aka React 18) with two boolean flags.
-   */
-  @Override
-  protected ReactActivityDelegate createReactActivityDelegate() {
-    return new DefaultReactActivityDelegate(
-        this,
-        getMainComponentName(),
-        // If you opted-in for the New Architecture, we enable the Fabric Renderer.
-        DefaultNewArchitectureEntryPoint.getFabricEnabled());
-  }
-}

package/src/generators/application/files/app/android/app/src/main/java/com/__lowerCaseName__/MainApplication.java.template

@@ -1,62 +0,0 @@
-package com.<%= lowerCaseName %>;
-
-import android.app.Application;
-import com.facebook.react.PackageList;
-import com.facebook.react.ReactApplication;
-import com.facebook.react.ReactNativeHost;
-import com.facebook.react.ReactPackage;
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
-import com.facebook.react.defaults.DefaultReactNativeHost;
-import com.facebook.soloader.SoLoader;
-import java.util.List;
-
-public class MainApplication extends Application implements ReactApplication {
-
-  private final ReactNativeHost mReactNativeHost =
-      new DefaultReactNativeHost(this) {
-        @Override
-        public boolean getUseDeveloperSupport() {
-          return BuildConfig.DEBUG;
-        }
-
-        @Override
-        protected List<ReactPackage> getPackages() {
-          @SuppressWarnings("UnnecessaryLocalVariable")
-          List<ReactPackage> packages = new PackageList(this).getPackages();
-          // Packages that cannot be autolinked yet can be added manually here, for example:
-          // packages.add(new MyReactNativePackage());
-          return packages;
-        }
-
-        @Override
-        protected String getJSMainModuleName() {
-          return "<%= entryFile %>";
-        }
-
-        @Override
-        protected boolean isNewArchEnabled() {
-          return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
-        }
-
-        @Override
-        protected Boolean isHermesEnabled() {
-          return BuildConfig.IS_HERMES_ENABLED;
-        }
-      };
-
-  @Override
-  public ReactNativeHost getReactNativeHost() {
-    return mReactNativeHost;
-  }
-
-  @Override
-  public void onCreate() {
-    super.onCreate();
-    SoLoader.init(this, /* native exopackage */ false);
-    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-      // If you opted-in for the New Architecture, we load the native entry point for this app.
-      DefaultNewArchitectureEntryPoint.load();
-    }
-    ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
-  }
-}

package/src/generators/application/files/app/android/app/src/release/java/com/__lowerCaseName__/ReactNativeFlipper.java.template

@@ -1,20 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
- * directory of this source tree.
- */
-package com.<%= lowerCaseName %>;
-
-import android.content.Context;
-import com.facebook.react.ReactInstanceManager;
-
-/**
- * Class responsible of loading Flipper inside your React Native application. This is the release
- * flavor of it so it's empty as we don't want to load Flipper.
- */
-public class ReactNativeFlipper {
-  public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
-    // Do nothing as we don't want to initialize Flipper on Release.
-  }
-}

package/src/generators/application/files/app/babel.config.json.template

@@ -1,10 +0,0 @@
-{
-  "presets": [
-    [
-      "module:metro-react-native-babel-preset",
-      {
-        "useTransformReactJSX": true
-      }
-    ]
-  ]
-}

package/src/generators/application/lib/add-detox.d.ts

@@ -1,3 +0,0 @@
-import { Tree } from '@nx/devkit';
-import { NormalizedSchema } from './normalize-options';
-export declare function addDetox(host: Tree, options: NormalizedSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/application/lib/add-detox.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.addDetox = void 0;
-const detox_1 = require("@nx/detox");
-const eslint_1 = require("@nx/eslint");
-async function addDetox(host, options) {
-    if (options?.e2eTestRunner !== 'detox') {
-        return () => { };
-    }
-    return (0, detox_1.detoxApplicationGenerator)(host, {
-        ...options,
-        linter: eslint_1.Linter.EsLint,
-        e2eName: `${options.projectName}-e2e`,
-        e2eDirectory: `${options.appProjectRoot}-e2e`,
-        projectNameAndRootFormat: 'as-provided',
-        appProject: options.projectName,
-        appDisplayName: options.displayName,
-        appName: options.name,
-        framework: 'react-native',
-        skipFormat: true,
-    });
-}
-exports.addDetox = addDetox;

package/src/generators/component-story/component-story.spec.ts

@@ -1,427 +0,0 @@
-import { getProjects, Tree, updateProjectConfiguration } from '@nx/devkit';
-import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
-import componentStoryGenerator from './component-story';
-import { Linter } from '@nx/eslint';
-
-import { formatFile } from '../../utils/format-file';
-import libraryGenerator from '../library/library';
-import componentGenerator from '../component/component';
-
-describe('react-native:component-story', () => {
-  let appTree: Tree;
-  let cmpPath = 'test-ui-lib/src/lib/test-ui-lib/test-ui-lib.tsx';
-  let storyFilePath = 'test-ui-lib/src/lib/test-ui-lib/test-ui-lib.stories.tsx';
-
-  describe('default setup', () => {
-    beforeEach(async () => {
-      appTree = await createTestUILib('test-ui-lib');
-    });
-
-    describe('when file does not contain a component', () => {
-      beforeEach(() => {
-        appTree.write(
-          cmpPath,
-          `export const add = (a: number, b: number) => a + b;`
-        );
-      });
-
-      it('should fail with a descriptive error message', async () => {
-        try {
-          await componentStoryGenerator(appTree, {
-            componentPath: 'lib/test-ui-lib/test-ui-lib.tsx',
-            project: 'test-ui-lib',
-          });
-        } catch (e) {
-          expect(e.message).toContain(
-            'Could not find any React Native component in file test-ui-lib/src/lib/test-ui-lib/test-ui-lib.tsx'
-          );
-        }
-      });
-    });
-
-    describe('default component setup', () => {
-      beforeEach(async () => {
-        await componentStoryGenerator(appTree, {
-          componentPath: 'lib/test-ui-lib/test-ui-lib.tsx',
-          project: 'test-ui-lib',
-        });
-      });
-
-      it('should create the story file', () => {
-        expect(appTree.exists(storyFilePath)).toBeTruthy();
-      });
-
-      it('should properly set up the story', () => {
-        expect(
-          formatFile`${appTree.read(storyFilePath, 'utf-8').replace('·', '')}`
-        ).toContain(formatFile`
-        import type { Meta } from '@storybook/react-native';
-        import { TestUiLib } from './test-ui-lib';
-        const Story: Meta<typeof TestUiLib> = {
-          component: TestUiLib,
-          title: 'TestUiLib',
-        };
-        export default Story;
-        export const Primary = { args: {} };
-          `);
-      });
-    });
-
-    describe('when using plain JS components', () => {
-      let storyFilePathPlain =
-        'test-ui-lib/src/lib/test-ui-libplain.stories.jsx';
-
-      beforeEach(async () => {
-        appTree.write(
-          'test-ui-lib/src/lib/test-ui-libplain.jsx',
-          `import React from 'react';
-
-          import './test.scss';
-
-          export const Test = () => {
-            return (
-              <div>
-                <h1>Welcome to test component</h1>
-              </div>
-            );
-          };
-
-          export default Test;
-          `
-        );
-
-        await componentStoryGenerator(appTree, {
-          componentPath: 'lib/test-ui-libplain.jsx',
-          project: 'test-ui-lib',
-        });
-      });
-
-      it('should create the story file', () => {
-        expect(appTree.exists(storyFilePathPlain)).toBeTruthy();
-      });
-
-      it('should properly set up the story', () => {
-        expect(formatFile`${appTree.read(storyFilePathPlain, 'utf-8')}`)
-          .toContain(formatFile`
-          import Test from './test-ui-libplain';
-          export default { component: Test, title: 'Test' };
-          export const Primary = { args: {} };
-          `);
-      });
-    });
-
-    describe('component without any props defined', () => {
-      beforeEach(async () => {
-        appTree.write(
-          cmpPath,
-          `import React from 'react';
-
-          import { View, Text } from 'react-native';
-
-          export function Test() {
-            return (
-              <View>
-                <Text>Welcome to test!</Text>
-              </View>
-            );
-          }
-
-          export default Test;
-          `
-        );
-        await componentStoryGenerator(appTree, {
-          componentPath: 'lib/test-ui-lib/test-ui-lib.tsx',
-          project: 'test-ui-lib',
-        });
-      });
-
-      it('should create a story without controls', () => {
-        expect(formatFile`${appTree.read(storyFilePath, 'utf-8')}`)
-          .toContain(formatFile`
-          import type { Meta } from '@storybook/react-native';
-          import { Test } from './test-ui-lib';
-          const Story: Meta<typeof Test> = { component: Test, title: 'Test' };
-          export default Story;
-          export const Primary = { args: {} };
-          `);
-      });
-    });
-
-    describe('component with props', () => {
-      beforeEach(async () => {
-        await componentStoryGenerator(appTree, {
-          componentPath: 'lib/test-ui-lib/test-ui-lib.tsx',
-          project: 'test-ui-lib',
-        });
-      });
-
-      it('should setup controls based on the component props', () => {
-        expect(
-          formatFile`${appTree.read(storyFilePath, 'utf-8').replace('·', '')}`
-        ).toContain(formatFile`
-        import type { Meta } from '@storybook/react-native';
-        import { TestUiLib } from './test-ui-lib';
-        const Story: Meta<typeof TestUiLib> = {
-          component: TestUiLib,
-          title: 'TestUiLib',
-        };
-        export default Story;
-        export const Primary = { args: {} };
-          `);
-      });
-    });
-
-    describe('component with props and actions', () => {
-      beforeEach(async () => {
-        appTree.write(
-          cmpPath,
-          `import React from 'react';
-
-          export type ButtonStyle = 'default' | 'primary' | 'warning';
-
-          export interface TestProps {
-            name: string;
-            displayAge: boolean;
-            someAction: (e: unknown) => void;
-            style: ButtonStyle;
-          }
-
-          export const Test = (props: TestProps) => {
-            return (
-              <div>
-                <h1>Welcome to test component, {props.name}</h1>
-                <button onClick={props.someAction}>Click me!</button>
-              </div>
-            );
-          };
-
-          export default Test;
-          `
-        );
-
-        await componentStoryGenerator(appTree, {
-          componentPath: 'lib/test-ui-lib/test-ui-lib.tsx',
-          project: 'test-ui-lib',
-        });
-      });
-
-      it('should setup controls based on the component props', () => {
-        expect(
-          formatFile`${appTree.read(storyFilePath, 'utf-8').replace('·', '')}`
-        ).toContain(formatFile`
-        import type { Meta } from '@storybook/react-native';
-        import { Test } from './test-ui-lib';
-        const Story: Meta<typeof Test> = {
-          component: Test,
-          title: 'Test',
-          argTypes: { someAction: { action: 'someAction executed!' } },
-        };
-        export default Story;
-        export const Primary = { args: { name: '', displayAge: false } };
-          `);
-      });
-    });
-
-    [
-      {
-        name: 'default export function',
-        src: `export default function Test(props: TestProps) {
-        return (
-          <div>
-            <h1>Welcome to test component, {props.name}</h1>
-          </div>
-        );
-      };
-      `,
-      },
-      {
-        name: 'function and then export',
-        src: `
-      function Test(props: TestProps) {
-        return (
-          <div>
-            <h1>Welcome to test component, {props.name}</h1>
-          </div>
-        );
-      };
-      export default Test;
-      `,
-      },
-      {
-        name: 'arrow function',
-        src: `
-      const Test = (props: TestProps) => {
-        return (
-          <div>
-            <h1>Welcome to test component, {props.name}</h1>
-          </div>
-        );
-      };
-      export default Test;
-      `,
-      },
-      {
-        name: 'arrow function without {..}',
-        src: `
-      const Test = (props: TestProps) => <div><h1>Welcome to test component, {props.name}</h1></div>;
-      export default Test
-      `,
-      },
-      {
-        name: 'direct export of component class',
-        src: `
-        export default class Test extends React.Component<TestProps> {
-          render() {
-            return <div><h1>Welcome to test component, {this.props.name}</h1></div>;
-          }
-        }
-        `,
-      },
-      {
-        name: 'component class & then default export',
-        src: `
-        class Test extends React.Component<TestProps> {
-          render() {
-            return <div><h1>Welcome to test component, {this.props.name}</h1></div>;
-          }
-        }
-        export default Test
-        `,
-      },
-      {
-        name: 'PureComponent class & then default export',
-        src: `
-        class Test extends React.PureComponent<TestProps> {
-          render() {
-            return <div><h1>Welcome to test component, {this.props.name}</h1></div>;
-          }
-        }
-        export default Test
-        `,
-      },
-      {
-        name: 'direct export of component class new JSX transform',
-        src: `
-        export default class Test extends Component<TestProps> {
-          render() {
-            return <div><h1>Welcome to test component, {this.props.name}</h1></div>;
-          }
-        }
-        `,
-      },
-      {
-        name: 'component class & then default export new JSX transform',
-        src: `
-        class Test extends Component<TestProps> {
-          render() {
-            return <div><h1>Welcome to test component, {this.props.name}</h1></div>;
-          }
-        }
-        export default Test
-        `,
-      },
-      {
-        name: 'PureComponent class & then default export new JSX transform',
-        src: `
-        class Test extends PureComponent<TestProps> {
-          render() {
-            return <div><h1>Welcome to test component, {this.props.name}</h1></div>;
-          }
-        }
-        export default Test
-        `,
-      },
-    ].forEach((config) => {
-      describe(`React Native component defined as:${config.name}`, () => {
-        beforeEach(async () => {
-          appTree.write(
-            cmpPath,
-            `import React from 'react';
-
-            export interface TestProps {
-              name: string;
-              displayAge: boolean;
-            }
-
-            ${config.src}
-            `
-          );
-
-          await componentStoryGenerator(appTree, {
-            componentPath: 'lib/test-ui-lib/test-ui-lib.tsx',
-            project: 'test-ui-lib',
-          });
-        });
-
-        it('should properly setup the controls based on the component props', () => {
-          expect(
-            formatFile`${appTree.read(storyFilePath, 'utf-8').replace('·', '')}`
-          ).toContain(formatFile`
-    import type { Meta } from '@storybook/react-native';
-    import { Test } from './test-ui-lib';
-    const Story: Meta<typeof Test> = { component: Test, title: 'Test' };
-    export default Story;
-    export const Primary = { args: { name: '', displayAge: false } };
-          `);
-        });
-      });
-    });
-  });
-
-  describe('using eslint', () => {
-    beforeEach(async () => {
-      appTree = await createTestUILib('test-ui-lib');
-      await componentGenerator(appTree, {
-        name: 'test-ui-lib',
-        project: 'test-ui-lib',
-        export: true,
-      });
-      await componentStoryGenerator(appTree, {
-        componentPath: 'lib/test-ui-lib/test-ui-lib.tsx',
-        project: 'test-ui-lib',
-      });
-    });
-
-    it('should properly set up the story', () => {
-      expect(formatFile`${appTree.read(storyFilePath, 'utf-8')}`)
-        .toContain(formatFile`
-    import type { Meta } from '@storybook/react-native';
-    import { TestUiLib } from './test-ui-lib';
-    const Story: Meta<typeof TestUiLib> = {
-      component: TestUiLib,
-      title: 'TestUiLib',
-    };
-    export default Story;
-    export const Primary = { args: {} };
-        `);
-    });
-  });
-});
-
-export async function createTestUILib(libName: string): Promise<Tree> {
-  let appTree = createTreeWithEmptyWorkspace();
-  appTree.write('.gitignore', '');
-
-  await libraryGenerator(appTree, {
-    name: libName,
-    linter: Linter.EsLint,
-    skipFormat: true,
-    skipTsConfig: false,
-    unitTestRunner: 'jest',
-    projectNameAndRootFormat: 'as-provided',
-  });
-
-  await componentGenerator(appTree, {
-    name: libName,
-    project: libName,
-    export: true,
-  });
-
-  const currentWorkspaceJson = getProjects(appTree);
-
-  const projectConfig = currentWorkspaceJson.get(libName);
-
-  updateProjectConfiguration(appTree, libName, projectConfig);
-
-  return appTree;
-}

package/src/generators/component-story/files/__componentFileName__.stories.__fileExt__

@@ -1,32 +0,0 @@
-<% if ( !isPlainJs ) { %>import type { Meta } from '@storybook/react-native';<% } %>
-import<% if ( !isPlainJs ) { %> { <% } %> <%= componentName %> <% if ( !isPlainJs ) { %> } <% } %> from './<%= componentImportFileName %>';
-
-<% if ( isPlainJs ) { %>
-export default {
-  component: <%= componentName %>,
-  title: '<%= componentName %>',<% if ( argTypes && argTypes.length > 0 ) { %> 
-  argTypes: {<% for (let argType of argTypes) { %>
-    <%= argType.name %>: { <%- argType.type %> : "<%- argType.actionText %>" },<% } %>
-}
-   <% } %> 
-};
-<% } %>
-
-
-<% if ( !isPlainJs ) { %>
-const Story: Meta<typeof <%= componentName %>> = {
-  component: <%= componentName %>,
-  title: '<%= componentName %>',<% if ( argTypes && argTypes.length > 0 ) { %> 
-  argTypes: {<% for (let argType of argTypes) { %>
-    <%= argType.name %>: { <%- argType.type %> : "<%- argType.actionText %>" },<% } %>
-}
-   <% } %> 
-};
-export default Story;
-<% } %>
-
-export const Primary = {
-  args: {<% for (let prop of props) { %>
-    <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
-  },
-};

package/src/generators/library/files/lib/babel.config.json.template

@@ -1,19 +0,0 @@
-{
-  "presets": [
-    [
-      "@nx/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
-  "plugins": [],
-  "env": {
-    "test": {
-      "presets": [
-        ["module:metro-react-native-babel-preset", { "useTransformReactJSX": true }]
-      ]
-    }
-  }
-}