@nx/remix 16.8.2 → 17.0.4

package/src/generators/library/schema.json

@@ -1,7 +1,8 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "$id": "NxRemixLibrary",
   "title": "Create a Library",
+  "description": "Generate a Remix library to help structure workspace and application.",
   "type": "object",
   "examples": [
     {
@@ -26,6 +27,11 @@
       "alias": "dir",
       "x-priority": "important"
     },
+    "projectNameAndRootFormat": {
+      "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
+    },
     "tags": {
       "type": "string",
       "description": "Add tags to the library (used for linting)"

package/src/generators/loader/loader.impl.js

@@ -1,41 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const insert_import_1 = require("../../utils/insert-import");
 const insert_statement_after_imports_1 = require("../../utils/insert-statement-after-imports");
 const insert_statement_in_default_function_1 = require("../../utils/insert-statement-in-default-function");
 const remix_route_utils_1 = require("../../utils/remix-route-utils");
-function default_1(tree, schema) {
-    return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        const routeFilePath = (0, remix_route_utils_1.resolveRemixRouteFile)(tree, schema.path, schema.project);
-        if (!tree.exists(routeFilePath)) {
-            throw new Error(`Route path does not exist: ${routeFilePath}. Please generate a Remix route first.`);
-        }
-        (0, insert_import_1.insertImport)(tree, routeFilePath, 'useLoaderData', '@remix-run/react');
-        (0, insert_import_1.insertImport)(tree, routeFilePath, 'json', '@remix-run/node');
-        (0, insert_import_1.insertImport)(tree, routeFilePath, 'LoaderArgs', '@remix-run/node', {
-            typeOnly: true,
-        });
-        (0, insert_statement_after_imports_1.insertStatementAfterImports)(tree, routeFilePath, `
-    export const loader = async ({request}: LoaderArgs ) => {
+async function default_1(tree, schema) {
+    const routeFilePath = schema.nameAndDirectoryFormat === 'as-provided'
+        ? schema.path
+        : await (0, remix_route_utils_1.resolveRemixRouteFile)(tree, schema.path, schema.project);
+    if (!tree.exists(routeFilePath)) {
+        throw new Error(`Route path does not exist: ${routeFilePath}. Please generate a Remix route first.`);
+    }
+    (0, insert_import_1.insertImport)(tree, routeFilePath, 'useLoaderData', '@remix-run/react');
+    (0, insert_import_1.insertImport)(tree, routeFilePath, 'json', '@remix-run/node');
+    (0, insert_import_1.insertImport)(tree, routeFilePath, 'LoaderFunctionArgs', '@remix-run/node', {
+        typeOnly: true,
+    });
+    (0, insert_statement_after_imports_1.insertStatementAfterImports)(tree, routeFilePath, `
+    export const loader = async ({request}: LoaderFunctionArgs ) => {
       return json({
         message: 'Hello, world!',
       })
     };
 
     `);
-        const statement = `\nconst data = useLoaderData<typeof loader>();`;
-        try {
-            (0, insert_statement_in_default_function_1.insertStatementInDefaultFunction)(tree, routeFilePath, statement);
-            // eslint-disable-next-line no-empty
-        }
-        catch (err) {
-        }
-        finally {
-            yield (0, devkit_1.formatFiles)(tree);
-        }
-    });
+    const statement = `\nconst data = useLoaderData<typeof loader>();`;
+    try {
+        (0, insert_statement_in_default_function_1.insertStatementInDefaultFunction)(tree, routeFilePath, statement);
+        // eslint-disable-next-line no-empty
+    }
+    catch (err) {
+    }
+    finally {
+        await (0, devkit_1.formatFiles)(tree);
+    }
 }
 exports.default = default_1;
-//# sourceMappingURL=loader.impl.js.map

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

@@ -1,4 +1,10 @@
+import { NameAndDirectoryFormat } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
+
 export interface LoaderSchema {
-  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 v19.
+   */
+  project?: string;
 }

package/src/generators/loader/schema.json

@@ -1,7 +1,8 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "$id": "data-loader",
   "type": "object",
+  "description": "Generate an loader for a given route.",
   "properties": {
     "path": {
       "type": "string",
@@ -10,17 +11,19 @@
         "$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.tsx')"
+    },
+    "nameAndDirectoryFormat": {
+      "description": "Whether to generate the loader in the path as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
     },
     "project": {
       "type": "string",
       "description": "The name of the project.",
-      "$default": {
-        "$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 v19."
     }
   },
-  "required": ["path", "project"]
+  "required": ["path"]
 }

package/src/generators/meta/lib/v2.impl.js

@@ -1,30 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.v2MetaGenerator = void 0;
-const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const get_default_export_name_1 = require("../../../utils/get-default-export-name");
 const insert_import_1 = require("../../../utils/insert-import");
 const insert_statement_after_imports_1 = require("../../../utils/insert-statement-after-imports");
 const remix_route_utils_1 = require("../../../utils/remix-route-utils");
-function v2MetaGenerator(tree, schema) {
-    return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        const routeFilePath = (0, remix_route_utils_1.resolveRemixRouteFile)(tree, schema.path, schema.project);
-        if (!tree.exists(routeFilePath)) {
-            throw new Error(`Route path does not exist: ${routeFilePath}. Please generate a Remix route first.`);
-        }
-        (0, insert_import_1.insertImport)(tree, routeFilePath, 'V2_MetaFunction', '@remix-run/node', {
-            typeOnly: true,
-        });
-        const defaultExportName = (0, get_default_export_name_1.getDefaultExportName)(tree, routeFilePath);
-        (0, insert_statement_after_imports_1.insertStatementAfterImports)(tree, routeFilePath, `
-    export const meta: V2_MetaFunction = () =>{
+async function v2MetaGenerator(tree, schema) {
+    const routeFilePath = schema.nameAndDirectoryFormat === 'as-provided'
+        ? schema.path
+        : await (0, remix_route_utils_1.resolveRemixRouteFile)(tree, schema.path, schema.project);
+    if (!tree.exists(routeFilePath)) {
+        throw new Error(`Route path does not exist: ${routeFilePath}. Please generate a Remix route first.`);
+    }
+    (0, insert_import_1.insertImport)(tree, routeFilePath, 'MetaFunction', '@remix-run/node', {
+        typeOnly: true,
+    });
+    const defaultExportName = (0, get_default_export_name_1.getDefaultExportName)(tree, routeFilePath);
+    (0, insert_statement_after_imports_1.insertStatementAfterImports)(tree, routeFilePath, `
+    export const meta: MetaFunction = () => {
       return [{ title: '${defaultExportName} Route' }];
     };
 
     `);
-        yield (0, devkit_1.formatFiles)(tree);
-    });
+    await (0, devkit_1.formatFiles)(tree);
 }
 exports.v2MetaGenerator = v2MetaGenerator;
-//# sourceMappingURL=v2.impl.js.map

package/src/generators/meta/meta.impl.js

@@ -1,22 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const normalize_options_1 = require("./lib/normalize-options");
-const v1_impl_1 = require("./lib/v1.impl");
 const v2_impl_1 = require("./lib/v2.impl");
-function default_1(tree, schema) {
-    return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        const options = (0, normalize_options_1.normalizeOptions)(tree, schema);
-        if (options.version === '1') {
-            yield (0, v1_impl_1.v1MetaGenerator)(tree, options);
-        }
-        else if (options.version === '2') {
-            yield (0, v2_impl_1.v2MetaGenerator)(tree, options);
-        }
-        else {
-            throw new Error('Invalid version provided.');
-        }
-    });
+async function default_1(tree, schema) {
+    await (0, v2_impl_1.v2MetaGenerator)(tree, schema);
 }
 exports.default = default_1;
-//# sourceMappingURL=meta.impl.js.map

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

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

package/src/generators/meta/schema.json

@@ -1,7 +1,8 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "$id": "meta",
   "type": "object",
+  "description": "Generate a meta function for a given route.",
   "properties": {
     "path": {
       "type": "string",
@@ -10,21 +11,19 @@
         "$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.tsx')"
     },
-    "project": {
+    "nameAndDirectoryFormat": {
+      "description": "Whether to generate the meta function in the path as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
       "type": "string",
-      "description": "The name of the project.",
-      "$default": {
-        "$source": "projectName"
-      },
-      "x-prompt": "What project is this route for?",
-      "pattern": "^[a-zA-Z].*$"
+      "enum": ["as-provided", "derived"]
     },
-    "version": {
+    "project": {
       "type": "string",
-      "description": "The version of the meta convention to use"
+      "description": "The name of the project.",
+      "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 v19."
     }
   },
-  "required": ["path", "project"]
+  "required": ["path"]
 }

package/src/generators/preset/lib/normalize-options.js

@@ -10,9 +10,11 @@ function normalizeOptions(tree, options) {
     const parsedTags = options.tags
         ? options.tags.split(',').map((s) => s.trim())
         : [];
-    return Object.assign(Object.assign({}, options), { appName,
+    return {
+        ...options,
+        appName,
         projectRoot,
-        parsedTags });
+        parsedTags,
+    };
 }
 exports.normalizeOptions = normalizeOptions;
-//# sourceMappingURL=normalize-options.js.map

package/src/generators/preset/preset.impl.js

@@ -1,33 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const devkit_2 = require("@nx/devkit");
 const application_impl_1 = require("../application/application.impl");
 const setup_impl_1 = require("../setup/setup.impl");
 const normalize_options_1 = require("./lib/normalize-options");
-function default_1(tree, _options) {
-    var _a, _b, _c;
-    return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        const options = (0, normalize_options_1.normalizeOptions)(tree, _options);
-        const tasks = [];
-        const setupGenTask = yield (0, setup_impl_1.default)(tree);
-        tasks.push(setupGenTask);
-        const appGenTask = yield (0, application_impl_1.default)(tree, {
-            name: options.appName,
-            tags: options.tags,
-            skipFormat: true,
-            rootProject: true,
-            unitTestRunner: (_a = options.unitTestRunner) !== null && _a !== void 0 ? _a : 'vitest',
-            e2eTestRunner: (_b = options.e2eTestRunner) !== null && _b !== void 0 ? _b : 'cypress',
-            js: (_c = options.js) !== null && _c !== void 0 ? _c : false,
-        });
-        tasks.push(appGenTask);
-        tree.delete('apps');
-        tree.delete('libs');
-        yield (0, devkit_1.formatFiles)(tree);
-        return (0, devkit_2.runTasksInSerial)(...tasks);
+async function default_1(tree, _options) {
+    const options = (0, normalize_options_1.normalizeOptions)(tree, _options);
+    const tasks = [];
+    const setupGenTask = await (0, setup_impl_1.default)(tree);
+    tasks.push(setupGenTask);
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    const appGenTask = await (0, application_impl_1.default)(tree, {
+        name: options.appName,
+        tags: options.tags,
+        skipFormat: true,
+        rootProject: true,
+        unitTestRunner: options.unitTestRunner ?? 'vitest',
+        e2eTestRunner: options.e2eTestRunner ?? 'cypress',
+        js: options.js ?? false,
+        addPlugin: addPluginDefault,
     });
+    tasks.push(appGenTask);
+    tree.delete('apps');
+    tree.delete('libs');
+    await (0, devkit_1.formatFiles)(tree);
+    return (0, devkit_2.runTasksInSerial)(...tasks);
 }
 exports.default = default_1;
-//# sourceMappingURL=preset.impl.js.map

package/src/generators/preset/schema.json

@@ -1,8 +1,9 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "$id": "Remix",
   "title": "",
   "type": "object",
+  "description": "Generate a Remix application in a standalone workspace. Can be used with `create-nx-workspace --preset=@nx/remix`.",
   "properties": {
     "tags": {
       "type": "string",

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`resource 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[`resource 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[`resource route --nameAndDirectoryFormat=as-provided should error if it detects a possible missing route param because of un-escaped dollar sign 4`] = `[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[`resource route --nameAndDirectoryFormat=as-provided should error if it detects a possible missing route param because of un-escaped dollar sign 6`] = `[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[`resource 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[`resource 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.]`;
+
+exports[`resource route --nameAndDirectoryFormat=derived should error if it detects a possible missing route param because of un-escaped dollar sign 4`] = `[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[`resource route --nameAndDirectoryFormat=derived should error if it detects a possible missing route param because of un-escaped dollar sign 6`] = `[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[`resource route --nameAndDirectoryFormat=derived should error if it detects a possible missing route param because of un-escaped dollar sign 7`] = `[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[`resource route --nameAndDirectoryFormat=derived should error if it detects a possible missing route param because of un-escaped dollar sign 9`] = `[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/resource-route/resource-route.impl.js

@@ -1,35 +1,41 @@
 "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 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");
-function default_1(tree, options) {
-    return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        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, '.ts');
-        if (tree.exists(routeFilePath))
-            throw new Error(`Path already exists: ${options.path}`);
-        if (!options.loader && !options.action)
-            throw new Error('The resource route generator requires either `loader` or `action` to be true');
-        tree.write(routeFilePath, '');
-        if (options.loader) {
-            yield (0, loader_impl_1.default)(tree, {
-                project: options.project,
-                path: routeFilePath,
-            });
-        }
-        if (options.action) {
-            yield (0, action_impl_1.default)(tree, {
-                path: routeFilePath,
-                project: options.project,
-            });
-        }
-        yield (0, devkit_1.formatFiles)(tree);
+async function default_1(tree, options) {
+    const { artifactName: name, directory, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(tree, {
+        artifactType: 'resource-route',
+        callingGenerator: '@nx/remix:resource-route',
+        name: options.path.replace(/^\//, '').replace(/\/$/, ''),
+        nameAndDirectoryFormat: options.nameAndDirectoryFormat,
+        project: 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 = 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, '.ts');
+    if (tree.exists(routeFilePath))
+        throw new Error(`Path already exists: ${options.path}`);
+    if (!options.loader && !options.action)
+        throw new Error('The resource route generator requires either `loader` or `action` to be true');
+    tree.write(routeFilePath, '');
+    if (options.loader) {
+        await (0, loader_impl_1.default)(tree, {
+            path: routeFilePath,
+            nameAndDirectoryFormat: 'as-provided',
+        });
+    }
+    if (options.action) {
+        await (0, action_impl_1.default)(tree, {
+            path: routeFilePath,
+            nameAndDirectoryFormat: 'as-provided',
+        });
+    }
+    await (0, devkit_1.formatFiles)(tree);
 }
 exports.default = default_1;
-//# sourceMappingURL=resource-route.impl.js.map

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

@@ -1,7 +1,13 @@
+import { NameAndDirectoryFormat } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
+
 export interface RemixRouteSchema {
-  project: string;
   path: string;
+  nameAndDirectoryFormat?: NameAndDirectoryFormat;
   action: 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 v19.
+   */
+  project?: string;
 }

package/src/generators/resource-route/schema.json

@@ -1,8 +1,9 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "$id": "NxRemixResourceRoute",
   "title": "Create a Resource Route",
   "type": "object",
+  "description": "Generate a resource route.",
   "examples": [
     {
       "command": "g resource-route 'path/to/page'",
@@ -17,16 +18,18 @@
         "$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 styles in the path as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
     },
     "project": {
       "type": "string",
       "description": "The name of the project.",
-      "$default": {
-        "$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 v19."
     },
     "action": {
       "type": "boolean",
@@ -44,5 +47,5 @@
       "default": false
     }
   },
-  "required": ["project", "path"]
+  "required": ["path"]
 }

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.]`;