feat(nx-plugin): add support for nx 18

packages/nx-plugin/src/generators/app/generator.spec.ts

@@ -14,7 +14,7 @@ import { AnalogNxApplicationGeneratorOptions } from './schema';
 describe('nx-plugin generator', () => {
   const setup = async (
     options: AnalogNxApplicationGeneratorOptions,
-    nxVersion = '17.0.0',
+    nxVersion = '18.0.0',
     standalone = false
   ) => {
     const tree = createTreeWithEmptyWorkspace(
@@ -120,6 +120,36 @@ describe('nx-plugin generator', () => {
     expect(devDependencies['vitest']).toBe('^0.32.2');
   };
 
+  const verifyCoreDependenciesNxV18_AngularV17_X = (
+    dependencies: Record<string, string>,
+    devDependencies: Record<string, string>
+  ) => {
+    expect(dependencies['@analogjs/content']).toBe('^0.2.0');
+    expect(dependencies['@analogjs/router']).toBe('^0.2.0');
+    expect(dependencies['@angular/platform-server']).toBe(
+      dependencies['@angular/core']
+    );
+    expect(dependencies['front-matter']).toBe('^4.0.2');
+    expect(dependencies['marked']).toBe('^5.0.2');
+    expect(dependencies['marked-gfm-heading-id']).toBe('^3.1.0');
+    expect(dependencies['marked-highlight']).toBe('^2.0.1');
+    expect(dependencies['mermaid']).toBe('^10.2.4');
+    expect(dependencies['prismjs']).toBe('^1.29.0');
+
+    expect(devDependencies['@nx/devkit']).toBe('^18.0.0');
+    expect(devDependencies['@nx/angular']).toBe('^18.0.0');
+    // we just check for truthy because @nx/eslint generator
+    // will install the correct version based on Nx version
+    expect(devDependencies['@nx/eslint']).toBeTruthy();
+    expect(devDependencies['@analogjs/platform']).toBe('^0.2.0');
+    expect(devDependencies['@analogjs/vite-plugin-angular']).toBe('^0.2.0');
+    expect(devDependencies['@nx/vite']).toBe('^18.0.0');
+    expect(devDependencies['jsdom']).toBe('^22.1.0');
+    expect(devDependencies['vite']).toBe('^4.4.8');
+    expect(devDependencies['vite-tsconfig-paths']).toBe('^4.2.0');
+    expect(devDependencies['vitest']).toBe('^0.32.2');
+  };
+
   const verifyConfig = (
     config: ProjectConfiguration,
     name: string,
@@ -235,13 +265,13 @@ describe('nx-plugin generator', () => {
     expect(injectsTrpcClient).toBeFalsy();
   };
 
-  describe('Nx 17.x, Angular 16.x', () => {
+  describe('Nx 18.x, Angular 17.x', () => {
     it('creates a default analogjs app in the source directory', async () => {
       const analogAppName = 'analog';
       const { config, tree } = await setup({ analogAppName });
       const { dependencies, devDependencies } = readJson(tree, 'package.json');
 
-      verifyCoreDependenciesNxV17_AngularV16_X(dependencies, devDependencies);
+      verifyCoreDependenciesNxV18_AngularV17_X(dependencies, devDependencies);
 
       verifyConfig(config, analogAppName);
 
@@ -252,10 +282,10 @@ describe('nx-plugin generator', () => {
 
     it('creates a default standalone analogjs app in the source directory', async () => {
       const analogAppName = 'analog';
-      const { config, tree } = await setup({ analogAppName }, '17.0.0', true);
+      const { config, tree } = await setup({ analogAppName }, '18.0.0', true);
       const { dependencies, devDependencies } = readJson(tree, 'package.json');
 
-      verifyCoreDependenciesNxV17_AngularV16_X(dependencies, devDependencies);
+      verifyCoreDependenciesNxV18_AngularV17_X(dependencies, devDependencies);
 
       verifyConfig(config, analogAppName, true);
 
@@ -272,7 +302,7 @@ describe('nx-plugin generator', () => {
       });
       const { dependencies, devDependencies } = readJson(tree, 'package.json');
 
-      verifyCoreDependenciesNxV17_AngularV16_X(dependencies, devDependencies);
+      verifyCoreDependenciesNxV18_AngularV17_X(dependencies, devDependencies);
 
       verifyConfig(config, analogAppName);
 
@@ -286,6 +316,72 @@ describe('nx-plugin generator', () => {
       const { config, tree } = await setup({ analogAppName, addTRPC: true });
       const { dependencies, devDependencies } = readJson(tree, 'package.json');
 
+      verifyCoreDependenciesNxV18_AngularV17_X(dependencies, devDependencies);
+
+      verifyConfig(config, analogAppName);
+
+      verifyHomePageExists(tree, analogAppName);
+      verifyTrpcIsSetUp(tree, dependencies);
+    });
+  });
+
+  describe('Nx 17.x, Angular 16.x', () => {
+    it('creates a default analogjs app in the source directory', async () => {
+      const analogAppName = 'analog';
+      const { config, tree } = await setup({ analogAppName }, '17.0.0');
+      const { dependencies, devDependencies } = readJson(tree, 'package.json');
+
+      verifyCoreDependenciesNxV17_AngularV16_X(dependencies, devDependencies);
+
+      verifyConfig(config, analogAppName);
+
+      verifyHomePageExists(tree, analogAppName);
+
+      verifyEslint(tree, config, devDependencies);
+    });
+
+    it('creates a default standalone analogjs app in the source directory', async () => {
+      const analogAppName = 'analog';
+      const { config, tree } = await setup({ analogAppName }, '17.0.0', true);
+      const { dependencies, devDependencies } = readJson(tree, 'package.json');
+
+      verifyCoreDependenciesNxV17_AngularV16_X(dependencies, devDependencies);
+
+      verifyConfig(config, analogAppName, true);
+
+      verifyHomePageExists(tree, analogAppName, true);
+
+      verifyEslint(tree, config, devDependencies);
+    });
+
+    it('creates an analogjs app in the source directory with tailwind set up', async () => {
+      const analogAppName = 'tailwind-app';
+      const { config, tree } = await setup(
+        {
+          analogAppName,
+          addTailwind: true,
+        },
+        '17.0.0'
+      );
+      const { dependencies, devDependencies } = readJson(tree, 'package.json');
+
+      verifyCoreDependenciesNxV17_AngularV16_X(dependencies, devDependencies);
+
+      verifyConfig(config, analogAppName);
+
+      verifyHomePageExists(tree, analogAppName);
+
+      verifyTailwindIsSetUp(tree, devDependencies);
+    });
+
+    it('creates an analogjs app in the source directory with trpc set up', async () => {
+      const analogAppName = 'trpc-app';
+      const { config, tree } = await setup(
+        { analogAppName, addTRPC: true },
+        '17.0.0'
+      );
+      const { dependencies, devDependencies } = readJson(tree, 'package.json');
+
       verifyCoreDependenciesNxV17_AngularV16_X(dependencies, devDependencies);
 
       verifyConfig(config, analogAppName);

packages/nx-plugin/src/generators/app/versions.ts

@@ -1,4 +1,17 @@
 export const MINIMUM_SUPPORTED_ANGULAR_VERSION = '15.0.0';
+// V17
+// dependencies
+export const V17_ANGULAR = '17.0.0';
+export const V17_NX_DEVKIT = '~18.0.0';
+export const V17_NX_ANGULAR = '~18.0.0';
+export const V17_ANALOG_JS_CONTENT = '0.2.0';
+export const V17_ANALOG_JS_ROUTER = '0.2.0';
+export const V17_ANALOG_JS_TRPC = '0.2.0';
+export const V17_TRPC_CLIENT = '^10.25.0';
+export const V17_TRPC_SERVER = '^10.25.0';
+export const V17_ISOMORPHIC_FETCH = '^3.0.0';
+export const V17_SUPERJSON = '^2.2.1';
+
 // V16
 // dependencies
 export const V16_ANGULAR = '16.0.0';

packages/nx-plugin/src/generators/app/versions/dependencies.ts

@@ -28,6 +28,16 @@ import {
   V17_X_MERMAID,
   V17_X_PRISMJS,
 } from './nx_17_X/versions';
+import {
+  V18_X_ANALOG_JS_CONTENT,
+  V18_X_ANALOG_JS_ROUTER,
+  V18_X_FRONT_MATTER,
+  V18_X_MARKED,
+  V18_X_MARKED_GFM_HEADING_ID,
+  V18_X_MARKED_HIGHLIGHT,
+  V18_X_MERMAID,
+  V18_X_PRISMJS,
+} from './nx_18_X/versions';
 
 const dependencyKeys15 = [
   '@analogjs/content',
@@ -95,16 +105,31 @@ export const getAnalogDependencies = (
     };
   }
 
-  // return latest 17.X deps for versions >= 17.0.0
+  // install 17.X deps for versions <18.0.0
+  if (lt(escapedNxVersion, '18.0.0')) {
+    return {
+      '@angular/platform-server': angularVersion,
+      '@analogjs/content': V17_X_ANALOG_JS_CONTENT,
+      '@analogjs/router': V17_X_ANALOG_JS_ROUTER,
+      'front-matter': V17_X_FRONT_MATTER,
+      marked: V17_X_MARKED,
+      'marked-gfm-heading-id': V17_X_MARKED_GFM_HEADING_ID,
+      'marked-highlight': V17_X_MARKED_HIGHLIGHT,
+      mermaid: V17_X_MERMAID,
+      prismjs: V17_X_PRISMJS,
+    };
+  }
+
+  // return latest 18.X deps for versions >= 18.0.0
   return {
     '@angular/platform-server': angularVersion,
-    '@analogjs/content': V17_X_ANALOG_JS_CONTENT,
-    '@analogjs/router': V17_X_ANALOG_JS_ROUTER,
-    'front-matter': V17_X_FRONT_MATTER,
-    marked: V17_X_MARKED,
-    'marked-gfm-heading-id': V17_X_MARKED_GFM_HEADING_ID,
-    'marked-highlight': V17_X_MARKED_HIGHLIGHT,
-    mermaid: V17_X_MERMAID,
-    prismjs: V17_X_PRISMJS,
+    '@analogjs/content': V18_X_ANALOG_JS_CONTENT,
+    '@analogjs/router': V18_X_ANALOG_JS_ROUTER,
+    'front-matter': V18_X_FRONT_MATTER,
+    marked: V18_X_MARKED,
+    'marked-gfm-heading-id': V18_X_MARKED_GFM_HEADING_ID,
+    'marked-highlight': V18_X_MARKED_HIGHLIGHT,
+    mermaid: V18_X_MERMAID,
+    prismjs: V18_X_PRISMJS,
   };
 };

packages/nx-plugin/src/generators/app/versions/dev-dependencies.ts

@@ -28,6 +28,15 @@ import {
   V17_X_VITE_TSCONFIG_PATHS,
   V17_X_VITEST,
 } from './nx_17_X/versions';
+import {
+  V18_X_NX_VITE,
+  V18_X_ANALOG_JS_PLATFORM,
+  V18_X_ANALOG_JS_VITE_PLUGIN_ANGULAR,
+  V18_X_JSDOM,
+  V18_X_VITE,
+  V18_X_VITE_TSCONFIG_PATHS,
+  V18_X_VITEST,
+} from './nx_18_X/versions';
 
 // TODO: @analogjs/vite-plugin-angular is being defined as we must pin
 // a supported version for Angular 15.x. This is not necessary for 16.x,
@@ -82,9 +91,16 @@ const getViteDependency = (escapedNxVersion: string) => {
     };
   }
 
-  // return latest deps for versions >= 16.4.0
+  // install 17.0 deps for versions =< 18.0.0
+  if (lt(escapedNxVersion, '18.0.0')) {
+    return {
+      '@nx/vite': V17_X_NX_VITE,
+    };
+  }
+
+  // return latest deps for versions >= 18.0.0
   return {
-    '@nx/vite': V17_X_NX_VITE,
+    '@nx/vite': V18_X_NX_VITE,
   };
 };
 
@@ -120,13 +136,25 @@ const getDevDependencies = (escapedNxVersion: string) => {
     };
   }
 
-  // return latest 17.x deps for versions >17.0.0
+  // install 17.x deps for versions <18.0.0
+  if (lt(escapedNxVersion, '18.0.0')) {
+    return {
+      '@analogjs/platform': V17_X_ANALOG_JS_PLATFORM,
+      '@analogjs/vite-plugin-angular': V17_X_ANALOG_JS_VITE_PLUGIN_ANGULAR,
+      jsdom: V17_X_JSDOM,
+      vite: V17_X_VITE,
+      'vite-tsconfig-paths': V17_X_VITE_TSCONFIG_PATHS,
+      vitest: V17_X_VITEST,
+    };
+  }
+
+  // return latest 18.x deps for versions >18.0.0
   return {
-    '@analogjs/platform': V17_X_ANALOG_JS_PLATFORM,
-    '@analogjs/vite-plugin-angular': V17_X_ANALOG_JS_VITE_PLUGIN_ANGULAR,
-    jsdom: V17_X_JSDOM,
-    vite: V17_X_VITE,
-    'vite-tsconfig-paths': V17_X_VITE_TSCONFIG_PATHS,
-    vitest: V17_X_VITEST,
+    '@analogjs/platform': V18_X_ANALOG_JS_PLATFORM,
+    '@analogjs/vite-plugin-angular': V18_X_ANALOG_JS_VITE_PLUGIN_ANGULAR,
+    jsdom: V18_X_JSDOM,
+    vite: V18_X_VITE,
+    'vite-tsconfig-paths': V18_X_VITE_TSCONFIG_PATHS,
+    vitest: V18_X_VITEST,
   };
 };

packages/nx-plugin/src/generators/app/versions/nx-dependencies.ts

@@ -18,6 +18,11 @@ import {
   V17_X_NX_DEVKIT,
   V17_X_NX_LINTER,
 } from './nx_17_X/versions';
+import {
+  V18_X_NX_ANGULAR,
+  V18_X_NX_DEVKIT,
+  V18_X_NX_LINTER,
+} from './nx_18_X/versions';
 
 const nrwlDependencyKeys = [
   '@nrwl/devkit',
@@ -84,10 +89,19 @@ export const getNxDependencies = (
     };
   }
 
-  // return latest for >= 17.0.0
+  // install 17.0 deps for versions =< 18.0.0
+  if (lt(escapedNxVersion, '18.0.0')) {
+    return {
+      '@nx/angular': V17_X_NX_ANGULAR,
+      '@nx/devkit': V17_X_NX_DEVKIT,
+      '@nx/eslint': V17_X_NX_LINTER,
+    };
+  }
+
+  // return latest for >= 18.0.0
   return {
-    '@nx/angular': V17_X_NX_ANGULAR,
-    '@nx/devkit': V17_X_NX_DEVKIT,
-    '@nx/eslint': V17_X_NX_LINTER,
+    '@nx/angular': V18_X_NX_ANGULAR,
+    '@nx/devkit': V18_X_NX_DEVKIT,
+    '@nx/eslint': V18_X_NX_LINTER,
   };
 };

packages/nx-plugin/src/generators/app/versions/nx_18_X/versions.ts

@@ -0,0 +1,28 @@
+// V18_X
+// dependencies
+export const V18_X_NX_DEVKIT = '^18.0.0';
+export const V18_X_NX_ANGULAR = '^18.0.0';
+export const V18_X_ANALOG_JS_CONTENT = '^0.2.0';
+export const V18_X_ANALOG_JS_ROUTER = '^0.2.0';
+export const V18_X_ANALOG_JS_TRPC = '^0.2.0';
+export const V18_X_ANALOG_JS_VITE_PLUGIN_ANGULAR = '^0.2.0';
+export const V18_X_TRPC_CLIENT = '^10.25.0';
+export const V18_X_TRPC_SERVER = '^10.25.0';
+export const V18_X_ISOMORPHIC_FETCH = '^3.0.0';
+export const V18_X_SUPERJSON = '^2.2.1';
+export const V18_X_FRONT_MATTER = '^4.0.2';
+export const V18_X_MARKED = '^5.0.2';
+export const V18_X_MARKED_GFM_HEADING_ID = '^3.1.0';
+export const V18_X_MARKED_HIGHLIGHT = '^2.0.1';
+export const V18_X_MERMAID = '^10.2.4';
+export const V18_X_PRISMJS = '^1.29.0';
+
+// devDependencies
+export const V18_X_ANALOG_JS_PLATFORM = '^0.2.0';
+export const V18_X_NX_VITE = '^18.0.0';
+export const V18_X_NX_LINTER = '^18.0.0';
+export const V18_X_JSDOM = '^22.1.0';
+export const V18_X_VITE = '^4.4.8';
+export const V18_X_VITE_TSCONFIG_PATHS = '^4.2.0';
+export const V18_X_VITEST = '^0.32.2';
+export const V18_X_ZOD = '^3.21.4';