feat(platform): add initial Nx plugin support (#308)

Fixes #293

.eslintrc.json

@@ -30,6 +30,11 @@
       "files": ["*.js", "*.jsx"],
       "extends": ["plugin:@nrwl/nx/javascript"],
       "rules": {}
+    },
+    {
+      "files": "*.json",
+      "parser": "jsonc-eslint-parser",
+      "rules": {}
     }
   ]
 }

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "eslint.validate": ["json"]
+}

apps/nx-plugin-e2e/jest.config.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+export default {
+  displayName: 'nx-plugin-e2e',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]s$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+};

apps/nx-plugin-e2e/project.json

@@ -0,0 +1,18 @@
+{
+  "name": "nx-plugin-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/nx-plugin-e2e/src",
+  "targets": {
+    "e2e": {
+      "executor": "@nrwl/nx-plugin:e2e",
+      "options": {
+        "target": "nx-plugin:build",
+        "jestConfig": "apps/nx-plugin-e2e/jest.config.ts",
+        "coverageDirectory": "../../coverage/apps/nx-plugin-e2e"
+      }
+    }
+  },
+  "tags": [],
+  "implicitDependencies": ["nx-plugin"]
+}

apps/nx-plugin-e2e/tests/nx-plugin.spec.ts

@@ -0,0 +1,57 @@
+import {
+  checkFilesExist,
+  ensureNxProject,
+  readJson,
+  runNxCommandAsync,
+  uniq,
+} from '@nrwl/nx-plugin/testing';
+
+describe('nx-plugin e2e', () => {
+  // Setting up individual workspaces per
+  // test can cause e2e runs to take a long time.
+  // For this reason, we recommend each suite only
+  // consumes 1 workspace. The tests should each operate
+  // on a unique project in the workspace, such that they
+  // are not dependent on one another.
+  beforeAll(() => {
+    ensureNxProject('@analogjs/nx', 'dist/packages/nx-plugin');
+  });
+
+  afterAll(() => {
+    // `nx reset` kills the daemon, and performs
+    // some work which can help clean up e2e leftovers
+    runNxCommandAsync('reset');
+  });
+
+  it('should create hello-world', async () => {
+    const project = uniq('hello-world');
+    await runNxCommandAsync(`generate @analogjs/nx:app ${project}`);
+    const result = await runNxCommandAsync(`build ${project}`);
+    expect(result.stdout).toContain(
+      'Successfully ran target build for project'
+    );
+  }, 120000);
+
+  describe('--directory', () => {
+    it('should create src in the specified directory', async () => {
+      const project = uniq('hello-world');
+      await runNxCommandAsync(
+        `generate @analogjs/nx:app ${project} --directory subdir`
+      );
+      expect(() =>
+        checkFilesExist(`apps/subdir/${project}/index.html`)
+      ).not.toThrow();
+    }, 120000);
+  });
+
+  describe('--tags', () => {
+    it('should add tags to the project', async () => {
+      const projectName = uniq('hello-world');
+      await runNxCommandAsync(
+        `generate @analogjs/nx:app ${projectName} --tags e2etag,e2ePackage`
+      );
+      const project = readJson(`apps/${projectName}/project.json`);
+      expect(project.tags).toEqual(['e2etag', 'e2ePackage']);
+    }, 120000);
+  });
+});

apps/nx-plugin-e2e/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

apps/nx-plugin-e2e/tsconfig.spec.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

commitlint.config.js

@@ -13,6 +13,7 @@ module.exports = {
         'router',
         'platform',
         'content',
+        'nx-plugin',
       ],
     ],
   },

package.json

@@ -74,14 +74,20 @@
     "@ngtools/webpack": "~15.1.3",
     "@nrwl/cli": "15.7.0",
     "@nrwl/cypress": "15.7.0",
+    "@nrwl/devkit": "15.7.0",
     "@nrwl/eslint-plugin-nx": "15.7.0",
     "@nrwl/jest": "15.7.0",
+    "@nrwl/js": "15.7.0",
     "@nrwl/linter": "15.7.0",
+    "@nrwl/nx-plugin": "15.7.0",
     "@nrwl/vite": "15.7.0",
     "@nrwl/web": "15.7.0",
     "@nrwl/workspace": "15.7.0",
     "@nx-plus/docusaurus": "15.0.0-rc.0",
     "@schematics/angular": "~15.1.3",
+    "@swc-node/register": "^1.4.2",
+    "@swc/cli": "~0.1.55",
+    "@swc/core": "^1.2.173",
     "@swc/helpers": "^0.4.14",
     "@types/jest": "29.4.0",
     "@types/marked": "^4.0.8",
@@ -99,7 +105,9 @@
     "eslint-config-prettier": "8.6.0",
     "eslint-plugin-cypress": "^2.12.1",
     "jest": "29.4.1",
+    "jest-environment-jsdom": "28.1.1",
     "jsdom": "^21.1.0",
+    "jsonc-eslint-parser": "^2.1.0",
     "kolorist": "^1.6.0",
     "lint-staged": "^13.1.0",
     "minimist": "^1.2.7",

packages/nx-plugin/.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@nrwl/js/babel",
+      {
+        "useBuiltIns": "usage"
+      }
+    ]
+  ]
+}

packages/nx-plugin/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["./package.json", "./generators.json", "./executors.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nrwl/nx/nx-plugin-checks": "error"
+      }
+    }
+  ]
+}

packages/nx-plugin/README.md

@@ -0,0 +1,23 @@
+# @analogjs/nx
+
+Official plugin to add AnalogJs to your Nx monorepo.
+
+## Supported Generators
+
+### app
+
+Creates a preconfigured Analog application.
+
+```sh
+nx g @analogjs/nx:app analog-app
+```
+
+## Development
+
+### Building
+
+Run `nx build nx-plugin` to build the library.
+
+### Running unit tests
+
+Run `nx test nx-plugin` to execute the unit tests via [Jest](https://jestjs.io).

packages/nx-plugin/generators.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "name": "nx-plugin",
+  "version": "0.0.1",
+  "generators": {
+    "app": {
+      "factory": "./src/generators/app/generator",
+      "schema": "./src/generators/app/schema.json",
+      "description": "Generates an AnalogJs application"
+    }
+  },
+  "schematics": {
+    "app": {
+      "factory": "./src/generators/app/generator",
+      "schema": "./src/generators/app/schema.json",
+      "description": "Add Angular Three with proper packages and config"
+    }
+  }
+}

packages/nx-plugin/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@analogjs/nx",
+  "version": "0.0.1-alpha.0",
+  "main": "src/index.js",
+  "generators": "./generators.json",
+  "schematics": "./generators.json"
+}

packages/nx-plugin/project.json

@@ -0,0 +1,50 @@
+{
+  "name": "nx-plugin",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/nx-plugin/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/nx-plugin",
+        "main": "packages/nx-plugin/src/index.ts",
+        "tsConfig": "packages/nx-plugin/tsconfig.lib.json",
+        "assets": [
+          "packages/nx-plugin/*.md",
+          {
+            "input": "./packages/nx-plugin/src",
+            "glob": "**/!(*.ts)",
+            "output": "./src"
+          },
+          {
+            "input": "./packages/nx-plugin/src",
+            "glob": "**/*.d.ts",
+            "output": "./src"
+          },
+          {
+            "input": "./packages/nx-plugin",
+            "glob": "generators.json",
+            "output": "."
+          }
+        ]
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "packages/nx-plugin/**/*.ts",
+          "packages/nx-plugin/generators.json",
+          "packages/nx-plugin/package.json"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/vite:test"
+    }
+  },
+  "tags": []
+}

packages/nx-plugin/src/generators/app/files/template-angular-v15/.eslintrc.json__template__

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "<%= className %>",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "<%= fileName %>",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

packages/nx-plugin/src/generators/app/files/template-angular-v15/index.html__template__

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>MyApp</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="/src/favicon.ico">
+  <link rel="stylesheet" href="/src/styles.css" />
+</head>
+<body>
+  <<%= fileName %>-root></<%= fileName %>-root>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+</html>

packages/nx-plugin/src/generators/app/files/template-angular-v15/src/app/app.component.spec.ts__template__

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RouterTestingModule, AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+});

packages/nx-plugin/src/generators/app/files/template-angular-v15/src/app/app.component.ts__template__

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: '<%= fileName %>-root',
+  standalone: true,
+  imports: [RouterOutlet],
+  template: ` <router-outlet></router-outlet> `,
+  styles: [
+    `
+      :host {
+        max-width: 1280px;
+        margin: 0 auto;
+        padding: 2rem;
+        text-align: center;
+      }
+    `,
+  ],
+})
+export class AppComponent {}