@nx/remix 0.0.0-pr-22179-271588f

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

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+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>)`}
+    }
+  `);
+    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,
+            nameAndDirectoryFormat: 'as-provided',
+        });
+    }
+    await (0, devkit_1.formatFiles)(tree);
+}
+exports.default = default_1;

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

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

package/src/generators/route/schema.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "NxRemixRoute",
+  "title": "Create a Route",
+  "description": "Generate a route.",
+  "type": "object",
+  "examples": [
+    {
+      "command": "g route 'path/to/page'",
+      "description": "Generate route at /path/to/page"
+    }
+  ],
+  "properties": {
+    "path": {
+      "type": "string",
+      "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. '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",
+      "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."
+    },
+    "style": {
+      "type": "string",
+      "description": "Generate a stylesheet",
+      "enum": ["none", "css"],
+      "default": "css"
+    },
+    "meta": {
+      "type": "boolean",
+      "description": "Generate a meta function",
+      "default": false
+    },
+    "action": {
+      "type": "boolean",
+      "description": "Generate an action function",
+      "default": false
+    },
+    "loader": {
+      "type": "boolean",
+      "description": "Generate a loader function",
+      "default": false
+    },
+    "skipChecks": {
+      "type": "boolean",
+      "description": "Skip route error detection",
+      "default": false
+    }
+  },
+  "required": ["path"]
+}

package/src/generators/setup/schema.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "NxRemixSetup",
+  "title": "",
+  "type": "object",
+  "description": "Generate initial files required for Remix to work within the workspace.",
+  "properties": {
+    "packageManager": {
+      "type": "string",
+      "description": "The package manager to setup for",
+      "enum": ["yarn", "npm", "pnpm"]
+    }
+  }
+}

package/src/generators/setup/setup.impl.d.ts

@@ -0,0 +1,2 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+export default function (tree: Tree): Promise<GeneratorCallback>;

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
+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);
+    (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;

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

@@ -0,0 +1,170 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`setup-tailwind generator should add a js tailwind config to an application correctly 1`] = `
+"import { createGlobPatternsForDependencies } from '@nx/react/tailwind';
+export default {
+  content: [
+    './app/**/*.{js,jsx,ts,tsx}',
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+"
+`;
+
+exports[`setup-tailwind generator should add a js tailwind config to an application correctly 2`] = `
+"@tailwind base;
+@tailwind components;
+@tailwind utilities;
+"
+`;
+
+exports[`setup-tailwind generator should add a js tailwind config to an application correctly 3`] = `
+"import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from '@remix-run/react';
+import twStyles from './tailwind.css';
+export const links = () => [{ rel: 'stylesheet', href: twStyles }];
+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">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
+"
+`;
+
+exports[`setup-tailwind generator should add a js tailwind config to an application correctly 4`] = `
+"import { createWatchPaths } from '@nx/remix';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+/**
+ * @type {import('@remix-run/dev').AppConfig}
+ */
+export default {
+  tailwind: true,
+  ignoredRouteFiles: ['**/.*'],
+  // appDirectory: "app",
+  // assetsBuildDirectory: "public/build",
+  // serverBuildPath: "build/index.js",
+  // publicPath: "/build/",
+  watchPaths: () => createWatchPaths(__dirname),
+};
+"
+`;
+
+exports[`setup-tailwind generator should add a tailwind config to an application correctly 1`] = `
+"import type { Config } from "tailwindcss";
+import { createGlobPatternsForDependencies } from '@nx/react/tailwind';
+
+export default {
+  content: [
+    "./app/**/*.{js,jsx,ts,tsx}",
+    ...createGlobPatternsForDependencies(__dirname)
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config;
+"
+`;
+
+exports[`setup-tailwind generator should add a tailwind config to an application correctly 2`] = `
+"@tailwind base;
+@tailwind components;
+@tailwind utilities;
+"
+`;
+
+exports[`setup-tailwind generator should add a tailwind config to an application correctly 3`] = `
+"import type { MetaFunction, LinksFunction } from '@remix-run/node';
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from '@remix-run/react';
+import twStyles from './tailwind.css';
+export const links: LinksFunction = () => [
+  { rel: 'stylesheet', href: twStyles },
+];
+
+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">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
+"
+`;
+
+exports[`setup-tailwind generator should add a tailwind config to an application correctly 4`] = `
+"import { createWatchPaths } from '@nx/remix';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+/**
+ * @type {import('@remix-run/dev').AppConfig}
+ */
+export default {
+  tailwind: true,
+  ignoredRouteFiles: ['**/.*'],
+  // appDirectory: "app",
+  // assetsBuildDirectory: "public/build",
+  // serverBuildPath: "build/index.js",
+  // publicPath: "/build/",
+  watchPaths: () => createWatchPaths(__dirname),
+};
+"
+`;

package/src/generators/setup-tailwind/files/app/tailwind.css__tpl__

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/generators/setup-tailwind/files/tailwind.config.ts__tpl__

@@ -0,0 +1,13 @@
+import type { Config } from "tailwindcss";
+import { createGlobPatternsForDependencies } from '@nx/react/tailwind';
+
+export default {
+  content: [
+    "./app/**/*.{js,jsx,ts,tsx}",
+    ...createGlobPatternsForDependencies(__dirname)
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config;

package/src/generators/setup-tailwind/lib/index.d.ts

@@ -0,0 +1 @@
+export * from './update-remix-config';

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./update-remix-config"), exports);

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

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export declare function updateRemixConfig(tree: Tree, projectRoot: string): void;

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateRemixConfig = void 0;
+const tsquery_1 = require("@phenomnomnominal/tsquery");
+const remix_config_1 = require("../../../utils/remix-config");
+function updateRemixConfig(tree, projectRoot) {
+    const pathToRemixConfig = (0, remix_config_1.getRemixConfigPathFromProjectRoot)(tree, projectRoot);
+    const fileContents = tree.read(pathToRemixConfig, 'utf-8');
+    const REMIX_CONFIG_OBJECT_SELECTOR = 'ObjectLiteralExpression';
+    const ast = tsquery_1.tsquery.ast(fileContents);
+    const nodes = (0, tsquery_1.tsquery)(ast, REMIX_CONFIG_OBJECT_SELECTOR, {
+        visitAllChildren: true,
+    });
+    if (nodes.length === 0) {
+        throw new Error(`Remix Config is not valid, unable to update the file.`);
+    }
+    const configObjectNode = nodes[0];
+    const propertyNodes = (0, tsquery_1.tsquery)(configObjectNode, 'PropertyAssignment', {
+        visitAllChildren: true,
+    });
+    for (const propertyNode of propertyNodes) {
+        const nodeText = propertyNode.getText();
+        if (nodeText.includes('tailwind') && nodeText.includes('true')) {
+            return;
+        }
+        else if (nodeText.includes('tailwind') && nodeText.includes('false')) {
+            const updatedFileContents = `${fileContents.slice(0, propertyNode.getStart())}tailwind: true${fileContents.slice(propertyNode.getEnd())}`;
+            tree.write(pathToRemixConfig, updatedFileContents);
+            return;
+        }
+    }
+    const updatedFileContents = `${fileContents.slice(0, configObjectNode.getStart() + 1)}\ntailwind: true,${fileContents.slice(configObjectNode.getStart() + 1)}`;
+    tree.write(pathToRemixConfig, updatedFileContents);
+}
+exports.updateRemixConfig = updateRemixConfig;

package/src/generators/setup-tailwind/schema.d.ts

@@ -0,0 +1,5 @@
+export interface SetupTailwindSchema {
+  project: string;
+  js?: boolean;
+  skipFormat?: boolean;
+}

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

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "NxRemixTailwind",
+  "title": "Add TailwindCSS to a Remix App",
+  "description": "Setup tailwindcss for a given project.",
+  "type": "object",
+  "examples": [
+    {
+      "command": "g setup-tailwind --project=myapp",
+      "description": "Generate a TailwindCSS config for your Remix app"
+    }
+  ],
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add tailwind to",
+      "$default": {
+        "$source": "projectName"
+      },
+      "x-prompt": "What project would you like to add Tailwind to?",
+      "pattern": "^[a-zA-Z].*$"
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate a JavaScript config file instead of a TypeScript config file",
+      "default": false
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Skip formatting files after generator runs",
+      "default": false,
+      "x-priority": "internal"
+    }
+  },
+  "required": ["project"]
+}

package/src/generators/setup-tailwind/setup-tailwind.impl.d.ts

@@ -0,0 +1,3 @@
+import { type Tree } from '@nx/devkit';
+import type { SetupTailwindSchema } from './schema';
+export default function setupTailwind(tree: Tree, options: SetupTailwindSchema): Promise<() => void>;

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+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, 'twStyles', './tailwind.css', `{ rel: "stylesheet", href: twStyles }`);
+    (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;

package/src/generators/storybook-configuration/__snapshots__/storybook-configuration.impl.spec.ts.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storybook Configuration it should create a storybook configuration and use react-vite framework with testing framework jest 1`] = `
+"import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: 'vite.config.ts',
+      },
+    },
+  },
+};
+
+export default config;
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs
+"
+`;
+
+exports[`Storybook Configuration it should create a storybook configuration and use react-vite framework with testing framework none 1`] = `
+"import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: 'vite.config.ts',
+      },
+    },
+  },
+};
+
+export default config;
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs
+"
+`;
+
+exports[`Storybook Configuration it should create a storybook configuration and use react-vite framework with testing framework vitest 1`] = `
+"import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: 'vite.config.ts',
+      },
+    },
+  },
+};
+
+export default config;
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs
+"
+`;

package/src/generators/storybook-configuration/files/vite.config.ts__tpl__

@@ -0,0 +1,15 @@
+/// <reference types="vitest" />
+import {defineConfig} from 'vite';
+import react from '@vitejs/plugin-react';
+import viteTsConfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig({
+  cacheDir: '../../../node_modules/.vite/storybook-generator-test',
+
+  plugins: [
+    react(),
+    viteTsConfigPaths({
+      root: '../../../',
+    }),
+  ],
+})

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

@@ -0,0 +1,16 @@
+import { Linter } from '@nx/eslint';
+
+export interface StorybookConfigurationSchema {
+  project: string;
+  configureCypress: boolean;
+  generateStories?: boolean;
+  generateCypressSpecs?: boolean;
+  js?: boolean;
+  tsConfiguration?: boolean;
+  linter?: Linter;
+  cypressDirectory?: string;
+  ignorePaths?: string[];
+  configureTestRunner?: boolean;
+  configureStaticServe?: boolean;
+  addPlugin?: boolean;
+}