npm - @nx/remix - Versions diffs - 20.0.10 → 20.1.0-beta.1 - Mend

@nx/remix 20.0.10 → 20.1.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

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

@@ -1,86 +1,5 @@
 // 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 = () => [
-  {
-    title: 'New Remix App',
-  },
-];
-export default function App() {
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <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';
@@ -99,26 +18,32 @@ export default {
 `;
 exports[`setup-tailwind generator should add a tailwind config to an application correctly 2`] = `
+"export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+"
+`;
+exports[`setup-tailwind generator should add a tailwind config to an application correctly 3`] = `
 "@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 {
+exports[`setup-tailwind generator should add a tailwind config to an application correctly 4`] = `
+"import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
 } from '@remix-run/react';
+import type { MetaFunction, LinksFunction } from '@remix-run/node';
 import twStyles from './tailwind.css';
-export const links: LinksFunction = () => [
-  { rel: 'stylesheet', href: twStyles },
-];
 export const meta: MetaFunction = () => [
   {
@@ -126,7 +51,21 @@ export const meta: MetaFunction = () => [
   },
 ];
-export default function App() {
+export const links: LinksFunction = () => [
+  { rel: 'stylesheet', href: twStyles },
+  { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+  {
+    rel: 'preconnect',
+    href: 'https://fonts.gstatic.com',
+    crossOrigin: 'anonymous',
+  },
+  {
+    rel: 'stylesheet',
+    href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+  },
+];
+export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -136,35 +75,16 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Outlet />
+        {children}
         <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),
-};
+export default function App() {
+  return <Outlet />;
+}
 "
 `;

package/src/generators/setup-tailwind/files/postcss.config.js__tpl__ ADDED Viewed

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

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

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

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

@@ -20,11 +20,6 @@
       "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",

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

@@ -4,27 +4,21 @@ exports.default = setupTailwind;
 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,
+        postcss: versions_1.postcssVersion,
+        autoprefixer: versions_1.autoprefixerVersion,
     }, {});
-    if (options.js) {
-        (0, devkit_1.toJS)(tree);
-    }
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }

package/src/generators/utils/update-dependencies.js CHANGED Viewed

@@ -15,5 +15,7 @@ function updateDependencies(tree) {
         '@types/react-dom': versions_1.typesReactDomVersion,
         eslint: versions_1.eslintVersion,
         typescript: versions_1.typescriptVersion,
+        vite: versions_1.viteVersion,
+        '@nx/vite': versions_1.nxVersion,
     });
 }

package/src/plugins/plugin.js CHANGED Viewed

@@ -180,13 +180,15 @@ async function getBuildPaths(configFilePath, projectRoot, workspaceRoot, remixCo
             // do nothing
         }
         const { resolveConfig } = await (0, executor_utils_1.loadViteDynamicImport)();
-        const viteBuildConfig = await resolveConfig({
+        const viteBuildConfig = (await resolveConfig({
             configFile: configPath,
             mode: 'development',
-        }, 'build');
+        }, 'build'));
         return {
             buildDirectory: viteBuildConfig.build?.outDir ?? 'build',
-            serverBuildPath: viteBuildConfig.build?.outDir ?? 'build',
+            serverBuildPath: viteBuildConfig.build?.outDir
+                ? (0, path_1.join)((0, path_1.dirname)(viteBuildConfig.build?.outDir), `server/${viteBuildConfig.__remixPluginContext?.remixConfig.serverBuildFile}`)
+                : 'build',
             assetsBuildDirectory: 'build/client',
         };
     }

package/src/utils/remix-config.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { Tree } from '@nx/devkit';
 import type { AppConfig } from '@remix-run/dev';
+export declare function getRemixConfigPathDetails(tree: Tree, projectName: string): string[];
 export declare function getRemixConfigPath(tree: Tree, projectName: string): string;
 export declare function getRemixConfigPathFromProjectRoot(tree: Tree, projectRoot: string): string;
 export declare function getRemixConfigValues(tree: Tree, projectName: string): Promise<AppConfig>;

package/src/utils/remix-config.js CHANGED Viewed

@@ -1,9 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRemixConfigPathDetails = getRemixConfigPathDetails;
 exports.getRemixConfigPath = getRemixConfigPath;
 exports.getRemixConfigPathFromProjectRoot = getRemixConfigPathFromProjectRoot;
 exports.getRemixConfigValues = getRemixConfigValues;
 const devkit_1 = require("@nx/devkit");
+const executor_utils_1 = require("./executor-utils");
+function getRemixConfigPathDetails(tree, projectName) {
+    const project = (0, devkit_1.readProjectConfiguration)(tree, projectName);
+    if (!project)
+        throw new Error(`Project does not exist: ${projectName}`);
+    for (const ext of ['.mjs', '.cjs', '.js', '.mts', '.cts', '.ts']) {
+        const configPath = (0, devkit_1.joinPathFragments)(project.root, `vite.config${ext}`);
+        if (tree.exists(configPath)) {
+            return [configPath, 'vite'];
+        }
+    }
+    for (const ext of ['.mjs', '.cjs', '.js']) {
+        const configPath = (0, devkit_1.joinPathFragments)(project.root, `remix.config${ext}`);
+        if (tree.exists(configPath)) {
+            return [configPath, 'classic'];
+        }
+    }
+}
 function getRemixConfigPath(tree, projectName) {
     const project = (0, devkit_1.readProjectConfiguration)(tree, projectName);
     if (!project)
@@ -27,16 +46,28 @@ function getRemixConfigPathFromProjectRoot(tree, projectRoot) {
 }
 const _remixConfigCache = {};
 async function getRemixConfigValues(tree, projectName) {
-    const remixConfigPath = (0, devkit_1.joinPathFragments)(devkit_1.workspaceRoot, getRemixConfigPath(tree, projectName));
+    const [configPath, configType] = getRemixConfigPathDetails(tree, projectName);
+    const remixConfigPath = (0, devkit_1.joinPathFragments)(devkit_1.workspaceRoot, configPath);
     const cacheKey = `${projectName}/${remixConfigPath}`;
     let appConfig = _remixConfigCache[cacheKey];
+    let resolvedConfig;
     if (!appConfig) {
-        try {
-            const importedConfig = await Function(`return import("${remixConfigPath}?t=${Date.now()}")`)();
-            appConfig = (importedConfig?.default || importedConfig);
+        if (configType === 'vite') {
+            const { resolveConfig } = await (0, executor_utils_1.loadViteDynamicImport)();
+            const viteBuildConfig = (await resolveConfig({
+                configFile: configPath,
+                mode: 'development',
+            }, 'build'));
+            appConfig = viteBuildConfig.__remixPluginContext?.remixConfig;
         }
-        catch {
-            appConfig = require(remixConfigPath);
+        else {
+            try {
+                const importedConfig = await Function(`return import("${remixConfigPath}?t=${Date.now()}")`)();
+                appConfig = (importedConfig?.default || importedConfig);
+            }
+            catch {
+                appConfig = require(remixConfigPath);
+            }
         }
         _remixConfigCache[cacheKey] = appConfig;
     }

package/src/utils/remix-route-utils.js CHANGED Viewed

@@ -6,6 +6,7 @@ exports.checkRoutePathForErrors = checkRoutePathForErrors;
 exports.resolveRemixAppDirectory = resolveRemixAppDirectory;
 const devkit_1 = require("@nx/devkit");
 const remix_config_1 = require("./remix-config");
+const path_1 = require("path");
 /**
  *
  * @param tree
@@ -65,5 +66,7 @@ function checkRoutePathForErrors(path) {
 async function resolveRemixAppDirectory(tree, projectName) {
     const project = (0, devkit_1.readProjectConfiguration)(tree, projectName);
     const remixConfig = await (0, remix_config_1.getRemixConfigValues)(tree, projectName);
-    return (0, devkit_1.joinPathFragments)(project.root, remixConfig.appDirectory ?? 'app');
+    return (0, devkit_1.joinPathFragments)(project.root, remixConfig.appDirectory
+        ? (0, path_1.relative)(project.root, remixConfig.appDirectory)
+        : 'app');
 }

package/src/utils/versions.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Tree } from '@nx/devkit';
 export declare const nxVersion: any;
-export declare const remixVersion = "^2.8.1";
+export declare const remixVersion = "^2.13.1";
 export declare const isbotVersion = "^4.4.0";
 export declare const reactVersion = "^18.2.0";
 export declare const reactDomVersion = "^18.2.0";
@@ -9,8 +9,11 @@ export declare const typesReactDomVersion = "^18.2.0";
 export declare const eslintVersion = "^8.56.0";
 export declare const typescriptVersion = "~5.5.2";
 export declare const tailwindVersion = "^3.3.0";
+export declare const postcssVersion = "^8.4.38";
+export declare const autoprefixerVersion = "^10.4.19";
 export declare const testingLibraryReactVersion = "^14.1.2";
 export declare const testingLibraryJestDomVersion = "6.4.2";
 export declare const testingLibraryUserEventsVersion = "^14.5.2";
+export declare const viteVersion = "^5.0.0";
 export declare function getRemixVersion(tree: Tree): string;
 export declare function getPackageVersion(tree: Tree, packageName: string): any;

package/src/utils/versions.js CHANGED Viewed

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.testingLibraryUserEventsVersion = exports.testingLibraryJestDomVersion = exports.testingLibraryReactVersion = exports.tailwindVersion = exports.typescriptVersion = exports.eslintVersion = exports.typesReactDomVersion = exports.typesReactVersion = exports.reactDomVersion = exports.reactVersion = exports.isbotVersion = exports.remixVersion = exports.nxVersion = void 0;
+exports.viteVersion = exports.testingLibraryUserEventsVersion = exports.testingLibraryJestDomVersion = exports.testingLibraryReactVersion = exports.autoprefixerVersion = exports.postcssVersion = exports.tailwindVersion = exports.typescriptVersion = exports.eslintVersion = exports.typesReactDomVersion = exports.typesReactVersion = exports.reactDomVersion = exports.reactVersion = exports.isbotVersion = exports.remixVersion = exports.nxVersion = void 0;
 exports.getRemixVersion = getRemixVersion;
 exports.getPackageVersion = getPackageVersion;
 const devkit_1 = require("@nx/devkit");
 exports.nxVersion = require('../../package.json').version;
-exports.remixVersion = '^2.8.1';
+exports.remixVersion = '^2.13.1';
 exports.isbotVersion = '^4.4.0';
 exports.reactVersion = '^18.2.0';
 exports.reactDomVersion = '^18.2.0';
@@ -14,10 +14,13 @@ exports.typesReactDomVersion = '^18.2.0';
 exports.eslintVersion = '^8.56.0';
 exports.typescriptVersion = '~5.5.2';
 exports.tailwindVersion = '^3.3.0';
+exports.postcssVersion = '^8.4.38';
+exports.autoprefixerVersion = '^10.4.19';
 exports.testingLibraryReactVersion = '^14.1.2';
 // TODO(colum): Unpin this when @testing-library/jest-dom pushes a fix
 exports.testingLibraryJestDomVersion = '6.4.2';
 exports.testingLibraryUserEventsVersion = '^14.5.2';
+exports.viteVersion = '^5.0.0';
 function getRemixVersion(tree) {
     return getPackageVersion(tree, '@remix-run/dev') ?? exports.remixVersion;
 }

package/src/generators/application/files/common/remix.config.js__tmpl__ DELETED Viewed

@@ -1,17 +0,0 @@
-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 {
-    ignoredRouteFiles: ["**/.*"],
-    // appDirectory: "app",
-    // assetsBuildDirectory: "public/build",
-    // serverBuildPath: "build/index.js",
-    // publicPath: "/build/",
-    watchPaths: () => createWatchPaths(__dirname),
-};

package/src/generators/application/files/common/remix.env.d.ts__tmpl__ DELETED Viewed

	@@ -1,2 +0,0 @@
1	- /// <reference types="@remix-run/dev" />
2	- /// <reference types="@remix-run/node" />

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

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

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

@@ -1,4 +0,0 @@
-"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 DELETED Viewed

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

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

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateRemixConfig = updateRemixConfig;
-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);
-}