@nx/remix 16.8.2 → 17.2.5

package/src/generators/route/__snapshots__/route.impl.spec.ts.snap

@@ -1,14 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`route should add route component 1`] = `
-"import type {
-  ActionArgs,
-  LinksFunction,
-  LoaderArgs,
+exports[`route --nameAndDirectoryFormat=as-provided should add route component 1`] = `
+"import { useLoaderData, useActionData } from '@remix-run/react';
+import { json } from '@remix-run/node';
+import type {
+  LoaderFunctionArgs,
   MetaFunction,
+  ActionFunctionArgs,
+  LinksFunction,
 } from '@remix-run/node';
+
+import stylesUrl from '../../../styles/path/to/example.css';
+
+export const links: LinksFunction = () => {
+  return [{ rel: 'stylesheet', href: stylesUrl }];
+};
+
+export const action = async ({ request }: ActionFunctionArgs) => {
+  let formData = await request.formData();
+
+  return json({ message: formData.toString() }, { status: 200 });
+};
+
+export const meta: MetaFunction = () => {
+  return [{ title: 'Example Route' }];
+};
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  return json({
+    message: 'Hello, world!',
+  });
+};
+
+export default function Example() {
+  const actionMessage = useActionData<typeof action>();
+  const data = useLoaderData<typeof loader>();
+
+  return <p>Message: {data.message}</p>;
+}
+"
+`;
+
+exports[`route --nameAndDirectoryFormat=as-provided should error if it detects a possible missing route param because of un-escaped dollar sign 1`] = `[Error: Your route path has an indicator of an un-escaped dollar sign for a route param. If this was intended, include the --skipChecks flag.]`;
+
+exports[`route --nameAndDirectoryFormat=as-provided should error if it detects a possible missing route param because of un-escaped dollar sign 2`] = `[Error: Your route path has an indicator of an un-escaped dollar sign for a route param. If this was intended, include the --skipChecks flag.]`;
+
+exports[`route --nameAndDirectoryFormat=as-provided should error if it detects a possible missing route param because of un-escaped dollar sign 3`] = `[Error: Your route path has an indicator of an un-escaped dollar sign for a route param. If this was intended, include the --skipChecks flag.]`;
+
+exports[`route --nameAndDirectoryFormat=derived should add route component 1`] = `
+"import { useLoaderData, useActionData } from '@remix-run/react';
 import { json } from '@remix-run/node';
-import { useActionData, useLoaderData } from '@remix-run/react';
+import type {
+  LoaderFunctionArgs,
+  MetaFunction,
+  ActionFunctionArgs,
+  LinksFunction,
+} from '@remix-run/node';
 
 import stylesUrl from '../../../styles/path/to/example.css';
 
@@ -16,17 +63,17 @@ export const links: LinksFunction = () => {
   return [{ rel: 'stylesheet', href: stylesUrl }];
 };
 
-export const action = async ({ request }: ActionArgs) => {
+export const action = async ({ request }: ActionFunctionArgs) => {
   let formData = await request.formData();
 
   return json({ message: formData.toString() }, { status: 200 });
 };
 
 export const meta: MetaFunction = () => {
-  return { title: 'PathToExample Route' };
+  return [{ title: 'PathToExample Route' }];
 };
 
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
   return json({
     message: 'Hello, world!',
   });
@@ -40,3 +87,9 @@ export default function PathToExample() {
 }
 "
 `;
+
+exports[`route --nameAndDirectoryFormat=derived should error if it detects a possible missing route param because of un-escaped dollar sign 1`] = `[Error: Your route path has an indicator of an un-escaped dollar sign for a route param. If this was intended, include the --skipChecks flag.]`;
+
+exports[`route --nameAndDirectoryFormat=derived should error if it detects a possible missing route param because of un-escaped dollar sign 2`] = `[Error: Your route path has an indicator of an un-escaped dollar sign for a route param. If this was intended, include the --skipChecks flag.]`;
+
+exports[`route --nameAndDirectoryFormat=derived should error if it detects a possible missing route param because of un-escaped dollar sign 3`] = `[Error: Your route path has an indicator of an un-escaped dollar sign for a route param. If this was intended, include the --skipChecks flag.]`;

package/src/generators/route/route.impl.js

@@ -1,65 +1,77 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
+const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
+const path_1 = require("path");
 const remix_route_utils_1 = require("../../utils/remix-route-utils");
 const action_impl_1 = require("../action/action.impl");
 const loader_impl_1 = require("../loader/loader.impl");
 const meta_impl_1 = require("../meta/meta.impl");
 const style_impl_1 = require("../style/style.impl");
-function default_1(tree, options) {
-    return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        const project = (0, devkit_1.readProjectConfiguration)(tree, options.project);
-        if (!project)
-            throw new Error(`Project does not exist: ${options.project}`);
-        if (!options.skipChecks && (0, remix_route_utils_1.checkRoutePathForErrors)(options.path)) {
-            throw new Error(`Your route path has an indicator of an un-escaped dollar sign for a route param. If this was intended, include the --skipChecks flag.`);
-        }
-        const routeFilePath = (0, remix_route_utils_1.resolveRemixRouteFile)(tree, options.path, options.project, '.tsx');
-        const { className: componentName } = (0, devkit_1.names)(options.path.replace(/^\//, '').replace(/\/$/, '').replace('.tsx', ''));
-        if (tree.exists(routeFilePath))
-            throw new Error(`Path already exists: ${routeFilePath}`);
-        tree.write(routeFilePath, (0, devkit_1.stripIndents) `
+async function default_1(tree, options) {
+    const { artifactName: name, directory, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(tree, {
+        artifactType: 'route',
+        callingGenerator: '@nx/remix:route',
+        name: options.path.replace(/^\//, '').replace(/\/$/, ''),
+        nameAndDirectoryFormat: options.nameAndDirectoryFormat,
+        project: options.project,
+    });
+    const project = (0, devkit_1.readProjectConfiguration)(tree, projectName);
+    if (!project)
+        throw new Error(`Project does not exist: ${projectName}`);
+    if (!options.skipChecks && (0, remix_route_utils_1.checkRoutePathForErrors)(options.path)) {
+        throw new Error(`Your route path has an indicator of an un-escaped dollar sign for a route param. If this was intended, include the --skipChecks flag.`);
+    }
+    const routeFilePath = await (0, remix_route_utils_1.resolveRemixRouteFile)(tree, options.nameAndDirectoryFormat === 'as-provided'
+        ? (0, devkit_1.joinPathFragments)(directory, name)
+        : options.path, options.nameAndDirectoryFormat === 'as-provided' ? undefined : projectName, '.tsx');
+    const nameToUseForComponent = options.nameAndDirectoryFormat === 'as-provided'
+        ? name.replace('.tsx', '')
+        : options.path.replace(/^\//, '').replace(/\/$/, '').replace('.tsx', '');
+    const { className: componentName } = (0, devkit_1.names)(nameToUseForComponent === '.' || nameToUseForComponent === ''
+        ? (0, path_1.basename)((0, path_1.dirname)(routeFilePath))
+        : nameToUseForComponent);
+    if (tree.exists(routeFilePath))
+        throw new Error(`Path already exists: ${routeFilePath}`);
+    tree.write(routeFilePath, (0, devkit_1.stripIndents) `
 
 
     export default function ${componentName}() {
     ${options.loader
-            ? `
+        ? `
       return (
         <p>
           Message: {data.message}
         </p>
       );
     `
-            : `return (<p>${componentName} works!</p>)`}
+        : `return (<p>${componentName} works!</p>)`}
     }
   `);
-        if (options.loader) {
-            yield (0, loader_impl_1.default)(tree, {
-                project: options.project,
-                path: routeFilePath,
-            });
-        }
-        if (options.meta) {
-            yield (0, meta_impl_1.default)(tree, {
-                path: routeFilePath,
-                project: options.project,
-            });
-        }
-        if (options.action) {
-            yield (0, action_impl_1.default)(tree, {
-                path: routeFilePath,
-                project: options.project,
-            });
-        }
-        if (options.style === 'css') {
-            yield (0, style_impl_1.default)(tree, {
-                project: options.project,
-                path: options.path,
-            });
-        }
-        yield (0, devkit_1.formatFiles)(tree);
-    });
+    if (options.loader) {
+        await (0, loader_impl_1.default)(tree, {
+            path: routeFilePath,
+            nameAndDirectoryFormat: 'as-provided',
+        });
+    }
+    if (options.meta) {
+        await (0, meta_impl_1.default)(tree, {
+            path: routeFilePath,
+            nameAndDirectoryFormat: 'as-provided',
+        });
+    }
+    if (options.action) {
+        await (0, action_impl_1.default)(tree, {
+            path: routeFilePath,
+            nameAndDirectoryFormat: 'as-provided',
+        });
+    }
+    if (options.style === 'css') {
+        await (0, style_impl_1.default)(tree, {
+            project: projectName,
+            path: routeFilePath,
+        });
+    }
+    await (0, devkit_1.formatFiles)(tree);
 }
 exports.default = default_1;
-//# sourceMappingURL=route.impl.js.map

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

@@ -1,9 +1,15 @@
+import { NameAndDirectoryFormat } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
+
 export interface RemixRouteSchema {
-  project: string;
   path: string;
+  nameAndDirectoryFormat?: NameAndDirectoryFormat;
   style: 'css' | 'none';
   action: boolean;
   meta: boolean;
   loader: boolean;
   skipChecks: boolean;
+  /**
+   * @deprecated Provide the `path` option instead. The project will be determined from the path provided. It will be removed in Nx v18.
+   */
+  project?: string;
 }

package/src/generators/route/schema.json

@@ -2,6 +2,7 @@
   "$schema": "http://json-schema.org/schema",
   "$id": "NxRemixRoute",
   "title": "Create a Route",
+  "description": "Generate a route.",
   "type": "object",
   "examples": [
     {
@@ -12,12 +13,17 @@
   "properties": {
     "path": {
       "type": "string",
-      "description": "The route path or path to the filename of the route.",
+      "description": "The route path or path to the filename of the route. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the workspace root.",
       "$default": {
         "$source": "argv",
         "index": 0
       },
-      "x-prompt": "What is the path of the route? (e.g. 'foo/bar')"
+      "x-prompt": "What is the path of the route? (e.g. 'apps/demo/app/routes/foo/bar')"
+    },
+    "nameAndDirectoryFormat": {
+      "description": "Whether to generate the route in the path as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and path relative to the workspace root (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
     },
     "project": {
       "type": "string",
@@ -26,7 +32,8 @@
         "$source": "projectName"
       },
       "x-prompt": "What project is this route for?",
-      "pattern": "^[a-zA-Z].*$"
+      "pattern": "^[a-zA-Z].*$",
+      "x-deprecated": "Provide the `path` option instead and use the `as-provided` format. The project will be determined from the path provided. It will be removed in Nx v18."
     },
     "style": {
       "type": "string",
@@ -55,5 +62,5 @@
       "default": false
     }
   },
-  "required": ["project", "path"]
+  "required": ["path"]
 }

package/src/generators/setup/schema.json

@@ -3,6 +3,7 @@
   "$id": "NxRemixSetup",
   "title": "",
   "type": "object",
+  "description": "Generate initial files required for Remix to work within the workspace.",
   "properties": {
     "packageManager": {
       "type": "string",

package/src/generators/setup/setup.impl.js

@@ -1,34 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
-function default_1(tree) {
-    return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        const tasks = [];
-        const jsInitTask = yield (0, js_1.initGenerator)(tree, {
-            skipFormat: true,
-        });
-        tasks.push(jsInitTask);
-        // Ignore nested project files
-        let ignoreFile = tree.read('.gitignore').toString();
-        if (ignoreFile.indexOf('/dist') !== -1) {
-            ignoreFile = ignoreFile.replace('/dist', 'dist');
-        }
-        if (ignoreFile.indexOf('/node_modules') !== -1) {
-            ignoreFile = ignoreFile.replace('/node_modules', 'node_modules');
-        }
-        if (ignoreFile.indexOf('# Remix files') === -1) {
-            ignoreFile = `${ignoreFile}
+async function default_1(tree) {
+    const tasks = [];
+    const jsInitTask = await (0, js_1.initGenerator)(tree, {
+        skipFormat: true,
+    });
+    tasks.push(jsInitTask);
+    // Ignore nested project files
+    let ignoreFile = tree.read('.gitignore').toString();
+    if (ignoreFile.indexOf('/dist') !== -1) {
+        ignoreFile = ignoreFile.replace('/dist', 'dist');
+    }
+    if (ignoreFile.indexOf('/node_modules') !== -1) {
+        ignoreFile = ignoreFile.replace('/node_modules', 'node_modules');
+    }
+    if (ignoreFile.indexOf('# Remix files') === -1) {
+        ignoreFile = `${ignoreFile}
 # Remix files
 apps/**/build
 apps/**/.cache
   `;
-        }
-        tree.write('.gitignore', ignoreFile);
-        yield (0, devkit_1.formatFiles)(tree);
-        return (0, devkit_1.runTasksInSerial)(...tasks);
+    }
+    tree.write('.gitignore', ignoreFile);
+    (0, devkit_1.updateJson)(tree, `package.json`, (json) => {
+        json.type = 'module';
+        return json;
     });
+    await (0, devkit_1.formatFiles)(tree);
+    return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.default = default_1;
-//# sourceMappingURL=setup.impl.js.map

package/src/generators/setup-tailwind/__snapshots__/setup-tailwind.impl.spec.ts.snap

@@ -33,14 +33,16 @@ exports[`setup-tailwind generator should add a js tailwind config to an applicat
 } from '@remix-run/react';
 import styles from './tailwind.css';
 export const links = () => [{ rel: 'stylesheet', href: styles }];
-export const meta = () => ({
-  charset: 'utf-8',
-  title: 'New Remix App',
-  viewport: 'width=device-width,initial-scale=1',
-});
+export const meta = () => [
+  {
+    charset: 'utf-8',
+    title: 'New Remix App',
+    viewport: 'width=device-width,initial-scale=1',
+  },
+];
 export default function App() {
   return (
-    <html lang=\\"en\\">
+    <html lang="en">
       <head>
         <Meta />
         <Links />
@@ -64,22 +66,22 @@ exports[`setup-tailwind generator should add a js tailwind config to an applicat
 module.exports = {
   tailwind: true,
   ignoredRouteFiles: ['**/.*'],
-  // appDirectory: \\"app\\",
-  // assetsBuildDirectory: \\"public/build\\",
-  // serverBuildPath: \\"build/index.js\\",
-  // publicPath: \\"/build/\\",
+  // appDirectory: "app",
+  // assetsBuildDirectory: "public/build",
+  // serverBuildPath: "build/index.js",
+  // publicPath: "/build/",
   watchPaths: () => require('@nx/remix').createWatchPaths(__dirname),
 };
 "
 `;
 
 exports[`setup-tailwind generator should add a tailwind config to an application correctly 1`] = `
-"import type { Config } from \\"tailwindcss\\";
+"import type { Config } from "tailwindcss";
 import { createGlobPatternsForDependencies } from '@nx/react/tailwind';
 
 export default {
   content: [
-    \\"./app/**/*.{js,jsx,ts,tsx}\\",
+    "./app/**/*.{js,jsx,ts,tsx}",
     ...createGlobPatternsForDependencies(__dirname)
   ],
   theme: {
@@ -98,7 +100,7 @@ exports[`setup-tailwind generator should add a tailwind config to an application
 `;
 
 exports[`setup-tailwind generator should add a tailwind config to an application correctly 3`] = `
-"import type { LinksFunction, MetaFunction } from '@remix-run/node';
+"import type { MetaFunction, LinksFunction } from '@remix-run/node';
 import {
   Links,
   LiveReload,
@@ -110,15 +112,17 @@ import {
 import styles from './tailwind.css';
 export const links: LinksFunction = () => [{ rel: 'stylesheet', href: styles }];
 
-export const meta: MetaFunction = () => ({
-  charset: 'utf-8',
-  title: 'New Remix App',
-  viewport: 'width=device-width,initial-scale=1',
-});
+export const meta: MetaFunction = () => [
+  {
+    charset: 'utf-8',
+    title: 'New Remix App',
+    viewport: 'width=device-width,initial-scale=1',
+  },
+];
 
 export default function App() {
   return (
-    <html lang=\\"en\\">
+    <html lang="en">
       <head>
         <Meta />
         <Links />
@@ -142,10 +146,10 @@ exports[`setup-tailwind generator should add a tailwind config to an application
 module.exports = {
   tailwind: true,
   ignoredRouteFiles: ['**/.*'],
-  // appDirectory: \\"app\\",
-  // assetsBuildDirectory: \\"public/build\\",
-  // serverBuildPath: \\"build/index.js\\",
-  // publicPath: \\"/build/\\",
+  // appDirectory: "app",
+  // assetsBuildDirectory: "public/build",
+  // serverBuildPath: "build/index.js",
+  // publicPath: "/build/",
   watchPaths: () => require('@nx/remix').createWatchPaths(__dirname),
 };
 "

package/src/generators/setup-tailwind/lib/index.js

@@ -2,4 +2,3 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./update-remix-config"), exports);
-//# sourceMappingURL=index.js.map

package/src/generators/setup-tailwind/lib/update-remix-config.js

@@ -4,9 +4,9 @@ exports.updateRemixConfig = void 0;
 const devkit_1 = require("@nx/devkit");
 const tsquery_1 = require("@phenomnomnominal/tsquery");
 function updateRemixConfig(tree, projectRoot) {
-    const pathToRemixConfig = (0, devkit_1.joinPathFragments)(projectRoot, 'remix.config.js');
+    const pathToRemixConfig = (0, devkit_1.joinPathFragments)(projectRoot, 'remix.config.cjs');
     if (!tree.exists(pathToRemixConfig)) {
-        throw new Error(`Could not find "${pathToRemixConfig}". Please ensure a "remix.config.js" exists at the root of your project.`);
+        throw new Error(`Could not find "${pathToRemixConfig}". Please ensure a "remix.config.cjs" exists at the root of your project.`);
     }
     const fileContents = tree.read(pathToRemixConfig, 'utf-8');
     const REMIX_CONFIG_OBJECT_SELECTOR = 'PropertyAccessExpression:has(Identifier[name=module], Identifier[name=exports])~ObjectLiteralExpression';
@@ -36,4 +36,3 @@ function updateRemixConfig(tree, projectRoot) {
     tree.write(pathToRemixConfig, updatedFileContents);
 }
 exports.updateRemixConfig = updateRemixConfig;
-//# sourceMappingURL=update-remix-config.js.map

package/src/generators/setup-tailwind/schema.json

@@ -2,6 +2,7 @@
   "$schema": "http://json-schema.org/schema",
   "$id": "NxRemixTailwind",
   "title": "Add TailwindCSS to a Remix App",
+  "description": "Setup tailwindcss for a given project.",
   "type": "object",
   "examples": [
     {

package/src/generators/setup-tailwind/setup-tailwind.impl.js

@@ -1,38 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const upsert_links_function_1 = require("../../utils/upsert-links-function");
 const versions_1 = require("../../utils/versions");
 const lib_1 = require("./lib");
-function setupTailwind(tree, options) {
-    return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        const project = (0, devkit_1.readProjectConfiguration)(tree, options.project);
-        if (project.projectType !== 'application') {
-            throw new Error(`Project "${options.project}" is not an application. Please ensure the project is an application.`);
-        }
-        (0, lib_1.updateRemixConfig)(tree, project.root);
-        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files'), project.root, {
-            tpl: '',
-        });
-        if (options.js) {
-            tree.rename((0, devkit_1.joinPathFragments)(project.root, 'app/root.js'), (0, devkit_1.joinPathFragments)(project.root, 'app/root.tsx'));
-        }
-        const pathToRoot = (0, devkit_1.joinPathFragments)(project.root, 'app/root.tsx');
-        (0, upsert_links_function_1.upsertLinksFunction)(tree, pathToRoot, 'styles', './tailwind.css', `{ rel: "stylesheet", href: styles }`);
-        (0, devkit_1.addDependenciesToPackageJson)(tree, {
-            tailwindcss: versions_1.tailwindVersion,
-        }, {});
-        if (options.js) {
-            (0, devkit_1.toJS)(tree);
-        }
-        if (!options.skipFormat) {
-            yield (0, devkit_1.formatFiles)(tree);
-        }
-        return () => {
-            (0, devkit_1.installPackagesTask)(tree);
-        };
+async function setupTailwind(tree, options) {
+    const project = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    if (project.projectType !== 'application') {
+        throw new Error(`Project "${options.project}" is not an application. Please ensure the project is an application.`);
+    }
+    (0, lib_1.updateRemixConfig)(tree, project.root);
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files'), project.root, {
+        tpl: '',
     });
+    if (options.js) {
+        tree.rename((0, devkit_1.joinPathFragments)(project.root, 'app/root.js'), (0, devkit_1.joinPathFragments)(project.root, 'app/root.tsx'));
+    }
+    const pathToRoot = (0, devkit_1.joinPathFragments)(project.root, 'app/root.tsx');
+    (0, upsert_links_function_1.upsertLinksFunction)(tree, pathToRoot, 'styles', './tailwind.css', `{ rel: "stylesheet", href: styles }`);
+    (0, devkit_1.addDependenciesToPackageJson)(tree, {
+        tailwindcss: versions_1.tailwindVersion,
+    }, {});
+    if (options.js) {
+        (0, devkit_1.toJS)(tree);
+    }
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+    return () => {
+        (0, devkit_1.installPackagesTask)(tree);
+    };
 }
 exports.default = setupTailwind;
-//# sourceMappingURL=setup-tailwind.impl.js.map

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

@@ -1,7 +1,7 @@
-import { Linter } from '@nx/linter';
+import { Linter } from '@nx/eslint';
 
 export interface StorybookConfigurationSchema {
-  name: string;
+  project: string;
   configureCypress: boolean;
   generateStories?: boolean;
   generateCypressSpecs?: boolean;

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

@@ -6,12 +6,9 @@
   "description": "Set up Storybook for a Remix 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",
@@ -66,9 +63,7 @@
     "linter": {
       "description": "The tool to use for running lint checks.",
       "type": "string",
-      "enum": [
-        "eslint"
-      ],
+      "enum": ["eslint"],
       "default": "eslint"
     },
     "ignorePaths": {
@@ -90,7 +85,5 @@
       "description": "Add a Storybook Test-Runner target."
     }
   },
-  "required": [
-    "name"
-  ]
+  "required": ["name"]
 }

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

@@ -1,19 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
-const versions_1 = require("../../utils/versions");
-function remixStorybookConfiguration(tree, schema) {
-    return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        const { root } = (0, devkit_1.readProjectConfiguration)(tree, schema.name);
-        if (!tree.exists((0, devkit_1.joinPathFragments)(root, 'vite.config.ts'))) {
-            (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files'), root, { tpl: '' });
-        }
-        const { storybookConfigurationGenerator } = (0, devkit_1.ensurePackage)('@nx/react', (0, versions_1.getPackageVersion)(tree, 'nx'));
-        const task = yield storybookConfigurationGenerator(tree, schema);
-        return task;
-    });
+const react_1 = require("@nx/react");
+async function remixStorybookConfiguration(tree, schema) {
+    const { root } = (0, devkit_1.readProjectConfiguration)(tree, schema.project);
+    if (!tree.exists((0, devkit_1.joinPathFragments)(root, 'vite.config.ts'))) {
+        (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files'), root, { tpl: '' });
+    }
+    const task = await (0, react_1.storybookConfigurationGenerator)(tree, schema);
+    return task;
 }
 exports.default = remixStorybookConfiguration;
-//# sourceMappingURL=storybook-configuration.impl.js.map

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

@@ -1,4 +1,10 @@
+import { NameAndDirectoryFormat } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
+
 export interface RemixStyleSchema {
-  project: string;
   path: string;
+  nameAndDirectoryFormat?: NameAndDirectoryFormat;
+  /**
+   * @deprecated Provide the `path` option instead. The project will be determined from the path provided. It will be removed in Nx v18.
+   */
+  project?: string;
 }