@nx/react 16.0.0-beta.1

package/src/generators/application/lib/normalize-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalize-options.js","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/application/lib/normalize-options.ts"],"names":[],"mappings":"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"}

package/src/generators/application/lib/set-defaults.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
+export declare function setDefaults(host: Tree, options: NormalizedSchema): void;

package/src/generators/application/lib/set-defaults.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setDefaults = void 0;
+const devkit_1 = require("@nx/devkit");
+function setDefaults(host, options) {
+    if (options.skipWorkspaceJson) {
+        return;
+    }
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    if (options.rootProject) {
+        nxJson.defaultProject = options.projectName;
+    }
+    nxJson.generators = nxJson.generators || {};
+    nxJson.generators['@nrwl/react'] = nxJson.generators['@nrwl/react'] || {};
+    const prev = Object.assign({}, nxJson.generators['@nrwl/react']);
+    const appDefaults = Object.assign({ style: options.style, linter: options.linter, bundler: options.bundler }, prev.application);
+    const componentDefaults = Object.assign({ style: options.style }, prev.component);
+    const libDefaults = Object.assign({ style: options.style, linter: options.linter }, prev.library);
+    nxJson.generators = Object.assign(Object.assign({}, nxJson.generators), { '@nrwl/react': Object.assign(Object.assign({}, prev), { application: appDefaults, component: componentDefaults, library: libDefaults }) });
+    (0, devkit_1.updateNxJson)(host, nxJson);
+}
+exports.setDefaults = setDefaults;
+//# sourceMappingURL=set-defaults.js.map

package/src/generators/application/lib/set-defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"set-defaults.js","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/application/lib/set-defaults.ts"],"names":[],"mappings":";;;AAAA,uCAA4D;AAG5D,SAAgB,WAAW,CAAC,IAAU,EAAE,OAAyB;IAC/D,IAAI,OAAO,CAAC,iBAAiB,EAAE;QAC7B,OAAO;KACR;IAED,MAAM,MAAM,GAAG,IAAA,mBAAU,EAAC,IAAI,CAAC,CAAC;IAEhC,IAAI,OAAO,CAAC,WAAW,EAAE;QACvB,MAAM,CAAC,cAAc,GAAG,OAAO,CAAC,WAAW,CAAC;KAC7C;IAED,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,IAAI,EAAE,CAAC;IAC5C,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAE1E,MAAM,IAAI,qBAAQ,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,CAAE,CAAC;IAErD,MAAM,WAAW,mBACf,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,OAAO,EAAE,OAAO,CAAC,OAAO,IACrB,IAAI,CAAC,WAAW,CACpB,CAAC;IACF,MAAM,iBAAiB,mBACrB,KAAK,EAAE,OAAO,CAAC,KAAK,IACjB,IAAI,CAAC,SAAS,CAClB,CAAC;IACF,MAAM,WAAW,mBACf,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,MAAM,EAAE,OAAO,CAAC,MAAM,IACnB,IAAI,CAAC,OAAO,CAChB,CAAC;IAEF,MAAM,CAAC,UAAU,mCACZ,MAAM,CAAC,UAAU,KACpB,aAAa,kCACR,IAAI,KACP,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,iBAAiB,EAC5B,OAAO,EAAE,WAAW,MAEvB,CAAC;IAEF,IAAA,qBAAY,EAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AAC7B,CAAC;AA3CD,kCA2CC"}

package/src/generators/application/lib/update-jest-config.d.ts

@@ -0,0 +1,3 @@
+import { NormalizedSchema } from '../schema';
+import { Tree } from '@nx/devkit';
+export declare function updateSpecConfig(host: Tree, options: NormalizedSchema): void;

package/src/generators/application/lib/update-jest-config.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateSpecConfig = void 0;
+const jest_utils_1 = require("../../../utils/jest-utils");
+const devkit_1 = require("@nx/devkit");
+function updateSpecConfig(host, options) {
+    if (options.unitTestRunner === 'none') {
+        return;
+    }
+    (0, devkit_1.updateJson)(host, `${options.appProjectRoot}/tsconfig.spec.json`, (json) => {
+        const offset = (0, devkit_1.offsetFromRoot)(options.appProjectRoot);
+        json.files = [
+            `${offset}node_modules/@nrwl/react/typings/cssmodule.d.ts`,
+            `${offset}node_modules/@nrwl/react/typings/image.d.ts`,
+        ];
+        if (options.style === 'styled-jsx') {
+            json.files.unshift(`${offset}node_modules/@nrwl/react/typings/styled-jsx.d.ts`);
+        }
+        return json;
+    });
+    if (options.unitTestRunner !== 'jest') {
+        return;
+    }
+    const configPath = `${options.appProjectRoot}/jest.config.${options.js ? 'js' : 'ts'}`;
+    const originalContent = host.read(configPath, 'utf-8');
+    const content = (0, jest_utils_1.updateJestConfigContent)(originalContent);
+    host.write(configPath, content);
+}
+exports.updateSpecConfig = updateSpecConfig;
+//# sourceMappingURL=update-jest-config.js.map

package/src/generators/application/lib/update-jest-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-jest-config.js","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/application/lib/update-jest-config.ts"],"names":[],"mappings":";;;AAAA,0DAAoE;AAEpE,uCAA8D;AAE9D,SAAgB,gBAAgB,CAAC,IAAU,EAAE,OAAyB;IACpE,IAAI,OAAO,CAAC,cAAc,KAAK,MAAM,EAAE;QACrC,OAAO;KACR;IAED,IAAA,mBAAU,EAAC,IAAI,EAAE,GAAG,OAAO,CAAC,cAAc,qBAAqB,EAAE,CAAC,IAAI,EAAE,EAAE;QACxE,MAAM,MAAM,GAAG,IAAA,uBAAc,EAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QACtD,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,MAAM,iDAAiD;YAC1D,GAAG,MAAM,6CAA6C;SACvD,CAAC;QACF,IAAI,OAAO,CAAC,KAAK,KAAK,YAAY,EAAE;YAClC,IAAI,CAAC,KAAK,CAAC,OAAO,CAChB,GAAG,MAAM,kDAAkD,CAC5D,CAAC;SACH;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,IAAI,OAAO,CAAC,cAAc,KAAK,MAAM,EAAE;QACrC,OAAO;KACR;IAED,MAAM,UAAU,GAAG,GAAG,OAAO,CAAC,cAAc,gBAC1C,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IACtB,EAAE,CAAC;IACH,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IACvD,MAAM,OAAO,GAAG,IAAA,oCAAuB,EAAC,eAAe,CAAC,CAAC;IACzD,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAClC,CAAC;AA7BD,4CA6BC"}

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

@@ -0,0 +1,44 @@
+import { Linter } from '@nx/linter';
+import { SupportedStyles } from '../../../typings/style';
+
+export interface Schema {
+  name: string;
+  style: SupportedStyles;
+  skipFormat?: boolean;
+  directory?: string;
+  tags?: string;
+  unitTestRunner?: 'jest' | 'vitest' | 'none';
+  inSourceTests?: boolean;
+  /**
+   * @deprecated
+   */
+  babelJest?: boolean;
+  e2eTestRunner: 'cypress' | 'none';
+  linter: Linter;
+  pascalCaseFiles?: boolean;
+  classComponent?: boolean;
+  routing?: boolean;
+  skipWorkspaceJson?: boolean;
+  js?: boolean;
+  globalCss?: boolean;
+  strict?: boolean;
+  setParserOptionsProject?: boolean;
+  compiler?: 'babel' | 'swc';
+  remotes?: string[];
+  devServerPort?: number;
+  skipPackageJson?: boolean;
+  rootProject?: boolean;
+  bundler?: 'webpack' | 'vite';
+  minimal?: boolean;
+}
+
+export interface NormalizedSchema<T extends Schema = Schema> extends T {
+  projectName: string;
+  appProjectRoot: string;
+  e2eProjectName: string;
+  parsedTags: string[];
+  fileName: string;
+  styledModule: null | SupportedStyles;
+  hasStyles: boolean;
+  unitTestRunner: 'jest' | 'vitest' | 'none';
+}

package/src/generators/application/schema.json

@@ -0,0 +1,196 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactApp",
+  "title": "Create a React Application",
+  "description": "Create a React application for Nx.",
+  "examples": [
+    {
+      "command": "nx g app myapp --directory=myorg",
+      "description": "Generate `apps/myorg/myapp` and `apps/myorg/myapp-e2e`"
+    },
+    {
+      "command": "nx g app myapp --classComponent",
+      "description": "Use class components instead of functional components"
+    },
+    {
+      "command": "nx g app myapp --routing",
+      "description": "Set up React Router"
+    }
+  ],
+  "type": "object",
+  "properties": {
+    "name": {
+      "description": "The name of the application.",
+      "type": "string",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What name would you like to use for the application?",
+      "pattern": "^[a-zA-Z].*$",
+      "x-priority": "important"
+    },
+    "directory": {
+      "description": "The directory of the new application.",
+      "type": "string",
+      "alias": "dir",
+      "x-priority": "important"
+    },
+    "style": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "default": "css",
+      "alias": "s",
+      "x-prompt": {
+        "message": "Which stylesheet format would you like to use?",
+        "type": "list",
+        "items": [
+          {
+            "value": "css",
+            "label": "CSS"
+          },
+          {
+            "value": "scss",
+            "label": "SASS(.scss)       [ http://sass-lang.com                     ]"
+          },
+          {
+            "value": "less",
+            "label": "LESS              [ http://lesscss.org                       ]"
+          },
+          {
+            "value": "styled-components",
+            "label": "styled-components [ https://styled-components.com            ]"
+          },
+          {
+            "value": "@emotion/styled",
+            "label": "emotion           [ https://emotion.sh                       ]"
+          },
+          {
+            "value": "styled-jsx",
+            "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
+          },
+          {
+            "value": "none",
+            "label": "None"
+          },
+          {
+            "value": "styl",
+            "label": "Stylus(.styl)     [ http://stylus-lang.com                   ] (DEPRECATED)"
+          }
+        ]
+      }
+    },
+    "linter": {
+      "description": "The tool to use for running lint checks.",
+      "type": "string",
+      "enum": ["eslint", "none"],
+      "default": "eslint"
+    },
+    "routing": {
+      "type": "boolean",
+      "description": "Generate application with routes.",
+      "x-prompt": "Would you like to add React Router to this application?",
+      "default": false
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "skipWorkspaceJson": {
+      "description": "Skip updating `workspace.json` with default options based on values provided to this app (e.g. babel, style).",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "unitTestRunner": {
+      "type": "string",
+      "enum": ["jest", "vitest", "none"],
+      "description": "Test runner to use for unit tests.",
+      "default": "jest"
+    },
+    "inSourceTests": {
+      "type": "boolean",
+      "default": false,
+      "description": "When using Vitest, separate spec files will not be generated and instead will be included within the source files. Read more on the Vitest docs site: https://vitest.dev/guide/in-source.html"
+    },
+    "e2eTestRunner": {
+      "type": "string",
+      "enum": ["cypress", "none"],
+      "description": "Test runner to use for end to end (E2E) tests.",
+      "default": "cypress"
+    },
+    "tags": {
+      "type": "string",
+      "description": "Add tags to the application (used for linting).",
+      "alias": "t"
+    },
+    "pascalCaseFiles": {
+      "type": "boolean",
+      "description": "Use pascal case component file name (e.g. `App.tsx`).",
+      "alias": "P",
+      "default": false
+    },
+    "classComponent": {
+      "type": "boolean",
+      "description": "Use class components instead of functional component.",
+      "alias": "C",
+      "default": false
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate JavaScript files rather than TypeScript files.",
+      "default": false
+    },
+    "globalCss": {
+      "type": "boolean",
+      "description": "Default is `false`. When `true`, the component is generated with `*.css`/`*.scss` instead of `*.module.css`/`*.module.scss`.",
+      "default": false
+    },
+    "strict": {
+      "type": "boolean",
+      "description": "Creates an application with strict mode and strict type checking.",
+      "default": true
+    },
+    "setParserOptionsProject": {
+      "type": "boolean",
+      "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
+      "default": false
+    },
+    "compiler": {
+      "type": "string",
+      "description": "The compiler to use.",
+      "enum": ["babel", "swc"],
+      "default": "babel"
+    },
+    "skipPackageJson": {
+      "description": "Do not add dependencies to `package.json`.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "rootProject": {
+      "description": "Create a application at the root of the workspace",
+      "type": "boolean",
+      "default": false,
+      "hidden": true
+    },
+    "bundler": {
+      "description": "The bundler to use.",
+      "type": "string",
+      "enum": ["vite", "webpack"],
+      "x-prompt": "Which bundler do you want to use to build the application?",
+      "default": "webpack",
+      "x-priority": "important"
+    },
+    "minimal": {
+      "description": "Generate a React app with a minimal setup, no separate test files.",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [],
+  "examplesFile": "../../../docs/application-examples.md"
+}

package/src/generators/component/component.d.ts

@@ -0,0 +1,5 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { Schema } from './schema';
+export declare function componentGenerator(host: Tree, schema: Schema): Promise<GeneratorCallback>;
+export default componentGenerator;
+export declare const componentSchematic: (generatorOptions: Schema) => (tree: any, context: any) => Promise<any>;

package/src/generators/component/component.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentSchematic = exports.componentGenerator = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const add_styled_dependencies_1 = require("../../rules/add-styled-dependencies");
+const assertion_1 = require("../../utils/assertion");
+const ast_utils_1 = require("../../utils/ast-utils");
+const get_in_source_vitest_tests_template_1 = require("../../utils/get-in-source-vitest-tests-template");
+const versions_1 = require("../../utils/versions");
+const get_component_tests_1 = require("./get-component-tests");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+function componentGenerator(host, schema) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const options = yield normalizeOptions(host, schema);
+        createComponentFiles(host, options);
+        const tasks = [];
+        const styledTask = (0, add_styled_dependencies_1.addStyledModuleDependencies)(host, options.styledModule);
+        tasks.push(styledTask);
+        addExportsToBarrel(host, options);
+        if (options.routing) {
+            const routingTask = (0, devkit_1.addDependenciesToPackageJson)(host, { 'react-router-dom': versions_1.reactRouterDomVersion }, { '@types/react-router-dom': versions_1.typesReactRouterDomVersion });
+            tasks.push(routingTask);
+        }
+        if (!options.skipFormat) {
+            yield (0, devkit_1.formatFiles)(host);
+        }
+        return (0, devkit_1.runTasksInSerial)(...tasks);
+    });
+}
+exports.componentGenerator = componentGenerator;
+function createComponentFiles(host, options) {
+    const componentDir = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.directory);
+    const componentTests = (0, get_component_tests_1.getComponentTests)(options);
+    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, './files'), componentDir, Object.assign(Object.assign({}, options), { componentTests, inSourceVitestTests: (0, get_in_source_vitest_tests_template_1.getInSourceVitestTestsTemplate)(componentTests), tmpl: '' }));
+    for (const c of host.listChanges()) {
+        let deleteFile = false;
+        if ((options.skipTests || options.inSourceTests) &&
+            /.*spec.tsx/.test(c.path)) {
+            deleteFile = true;
+        }
+        if ((options.styledModule || !options.hasStyles) &&
+            c.path.endsWith(`.${options.style}`)) {
+            deleteFile = true;
+        }
+        if (options.globalCss && c.path.endsWith(`.module.${options.style}`)) {
+            deleteFile = true;
+        }
+        if (!options.globalCss &&
+            c.path.endsWith(`${options.fileName}.${options.style}`)) {
+            deleteFile = true;
+        }
+        if (deleteFile) {
+            host.delete(c.path);
+        }
+    }
+    if (options.js) {
+        (0, devkit_1.toJS)(host);
+    }
+}
+let tsModule;
+function addExportsToBarrel(host, options) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    const workspace = (0, devkit_1.getProjects)(host);
+    const isApp = workspace.get(options.project).projectType === 'application';
+    if (options.export && !isApp) {
+        const indexFilePath = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.js ? 'index.js' : 'index.ts');
+        const indexSource = host.read(indexFilePath, 'utf-8');
+        if (indexSource !== null) {
+            const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);
+            const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, ast_utils_1.addImport)(indexSourceFile, `export * from './${options.directory}/${options.fileName}';`));
+            host.write(indexFilePath, changes);
+        }
+    }
+}
+function normalizeOptions(host, options) {
+    var _a, _b, _c, _d, _e;
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        assertValidOptions(options);
+        const { className, fileName } = (0, devkit_1.names)(options.name);
+        const componentFileName = (_a = options.fileName) !== null && _a !== void 0 ? _a : (options.pascalCaseFiles ? className : fileName);
+        const project = (0, devkit_1.getProjects)(host).get(options.project);
+        if (!project) {
+            devkit_1.logger.error(`Cannot find the ${options.project} project. Please double check the project name.`);
+            throw new Error();
+        }
+        const { sourceRoot: projectSourceRoot, projectType } = project;
+        const directory = yield getDirectory(host, options);
+        const styledModule = /^(css|scss|less|styl|none)$/.test(options.style)
+            ? null
+            : options.style;
+        if (options.export && projectType === 'application') {
+            devkit_1.logger.warn(`The "--export" option should not be used with applications and will do nothing.`);
+        }
+        options.classComponent = (_b = options.classComponent) !== null && _b !== void 0 ? _b : false;
+        options.routing = (_c = options.routing) !== null && _c !== void 0 ? _c : false;
+        options.globalCss = (_d = options.globalCss) !== null && _d !== void 0 ? _d : false;
+        options.inSourceTests = (_e = options.inSourceTests) !== null && _e !== void 0 ? _e : false;
+        return Object.assign(Object.assign({}, options), { directory,
+            styledModule, hasStyles: options.style !== 'none', className, fileName: componentFileName, projectSourceRoot });
+    });
+}
+function getDirectory(host, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const genNames = (0, devkit_1.names)(options.name);
+        const fileName = options.pascalCaseDirectory === true
+            ? genNames.className
+            : genNames.fileName;
+        const workspace = (0, devkit_1.getProjects)(host);
+        let baseDir;
+        if (options.directory) {
+            baseDir = options.directory;
+        }
+        else {
+            baseDir =
+                workspace.get(options.project).projectType === 'application'
+                    ? 'app'
+                    : 'lib';
+        }
+        return options.flat ? baseDir : (0, devkit_1.joinPathFragments)(baseDir, fileName);
+    });
+}
+function assertValidOptions(options) {
+    (0, assertion_1.assertValidStyle)(options.style);
+    const slashes = ['/', '\\'];
+    slashes.forEach((s) => {
+        if (options.name.indexOf(s) !== -1) {
+            const [name, ...rest] = options.name.split(s).reverse();
+            let suggestion = rest.map((x) => x.toLowerCase()).join(s);
+            if (options.directory) {
+                suggestion = `${options.directory}${s}${suggestion}`;
+            }
+            throw new Error(`Found "${s}" in the component name. Did you mean to use the --directory option (e.g. \`nx g c ${name} --directory ${suggestion}\`)?`);
+        }
+    });
+}
+exports.default = componentGenerator;
+exports.componentSchematic = (0, devkit_1.convertNxGenerator)(componentGenerator);
+//# sourceMappingURL=component.js.map

package/src/generators/component/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/component/component.ts"],"names":[],"mappings":"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"}

package/src/generators/component/files/__fileName__.module.__style__

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

package/src/generators/component/files/__fileName__.spec.tsx__tmpl__

@@ -0,0 +1,7 @@
+import { render } from '@testing-library/react';
+
+import <%= className %> from './<%= fileName %>';
+
+describe('<%= className %>', () => {
+  <%- componentTests %>
+});

package/src/generators/component/files/__fileName__.tsx__tmpl__

@@ -0,0 +1,71 @@
+<% if (classComponent) { %>
+import { Component } from 'react';
+<% } %>
+
+<% if (routing) { %>
+import { Route, Link } from 'react-router-dom';
+<% } %>
+
+<% if (hasStyles) {
+   if (styledModule && styledModule !== 'styled-jsx') {
+    var wrapper = 'Styled' + className;
+    var extras = '';
+  %>
+  import styled from '<%= styledModule %>';
+  <% } else {
+    var wrapper = 'div';
+    var extras = globalCss || styledModule === 'styled-jsx' ? '' : " className={styles['container']}";
+  %>
+  <%- style !== 'styled-jsx' ? globalCss ? `import './${fileName}.${style}';` : `import styles from './${fileName}.module.${style}';`: '' %>
+  <% }
+} else {
+    var wrapper = 'div';
+    var extras = '';
+} %>
+
+/* eslint-disable-next-line */
+export interface <%= className %>Props {
+}
+
+<% if (styledModule && styledModule !== 'styled-jsx') { %>
+const Styled<%= className %> = styled.div`
+  color: pink;
+`;
+<% }%>
+<% if (classComponent) { %>
+export class <%= className %> extends Component<<%= className %>Props> {
+  override render() {
+    return (
+      <<%= wrapper %><%- extras %>>
+        <%= styledModule === 'styled-jsx' ? `<style jsx>{\`div { color: pink; }\`}</style>` : `` %>
+        <p>Welcome to <%= className %>!</p>
+        <% if (routing) { %>
+          <ul>
+            <li><Link to="/"><%= name %> root</Link></li>
+          </ul>
+          <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
+        <% } %>
+      </<%= wrapper %>>
+    );
+  }
+}
+<% } else { %>
+export function <%= className %>(props: <%= className %>Props) {
+  return (
+    <<%= wrapper %><%- extras %>>
+      <% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>
+      <h1>Welcome to <%= className %>!</h1>
+      <% if (routing) { %>
+        <ul>
+          <li><Link to="/"><%= name %> root</Link></li>
+        </ul>
+        <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
+      <% } %>
+    </<%= wrapper %>>
+  );
+};
+<% } %>
+
+export default <%= className %>;
+
+<% if (inSourceTests === true) { %> <%- inSourceVitestTests %> <% } %>

package/src/generators/component/get-component-tests.d.ts

@@ -0,0 +1,2 @@
+import { NormalizedSchema } from './noramlized-schema';
+export declare function getComponentTests(schema: NormalizedSchema): string;

package/src/generators/component/get-component-tests.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComponentTests = void 0;
+function getComponentTests(schema) {
+    return `
+  it('should render successfully', () => {
+    const { baseElement } = render(<${schema.className} />);
+    expect(baseElement).toBeTruthy();
+  });
+  `;
+}
+exports.getComponentTests = getComponentTests;
+//# sourceMappingURL=get-component-tests.js.map

package/src/generators/component/get-component-tests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-component-tests.js","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/component/get-component-tests.ts"],"names":[],"mappings":";;;AAEA,SAAgB,iBAAiB,CAAC,MAAwB;IACxD,OAAO;;sCAE6B,MAAM,CAAC,SAAS;;;GAGnD,CAAC;AACJ,CAAC;AAPD,8CAOC"}

package/src/generators/component/noramlized-schema.d.ts

@@ -0,0 +1,8 @@
+import { Schema } from './schema';
+export interface NormalizedSchema extends Schema {
+    projectSourceRoot: string;
+    fileName: string;
+    className: string;
+    styledModule: null | string;
+    hasStyles: boolean;
+}

package/src/generators/component/noramlized-schema.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=noramlized-schema.js.map

package/src/generators/component/noramlized-schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"noramlized-schema.js","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/component/noramlized-schema.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,20 @@
+import { SupportedStyles } from '../../../typings/style';
+
+export interface Schema {
+  name: string;
+  project: string;
+  style: SupportedStyles;
+  skipTests?: boolean;
+  directory?: string;
+  export?: boolean;
+  pascalCaseFiles?: boolean;
+  pascalCaseDirectory?: boolean;
+  classComponent?: boolean;
+  routing?: boolean;
+  js?: boolean;
+  flat?: boolean;
+  globalCss?: boolean;
+  fileName?: string;
+  inSourceTests?: boolean;
+  skipFormat?: boolean;
+}