feat(astro-integration-angular): move astro integration to analog mon…

…orepo (analogjs#28)

Closes analogjs#24

CONTRIBUTING.md

@@ -206,6 +206,7 @@ The following is the list of supported scopes:
 
 - **vite-angular-plugin**
 - **create-analog**
+- **astro-integration-angular**
 
 ### Subject
 

angular.json

@@ -5,6 +5,7 @@
     "analog-app": "apps/analog-app",
     "analog-app-e2e-cypress": "apps/analog-app-e2e-cypress",
     "analog-app-e2e-playwright": "apps/analog-app-e2e-playwright",
+    "astro-integration-angular": "packages/astro-integration-angular",
     "create-analog": "packages/create-analog",
     "docs-app": "apps/docs-app",
     "vite-plugin-angular": "packages/vite-plugin-angular"

apps/analog-app/project.json

@@ -13,7 +13,7 @@
       }
     },
     "build-ng": {
-      "builder": "@angular-devkit/build-angular:browser",
+      "executor": "@angular-devkit/build-angular:browser",
       "options": {
         "outputPath": "dist/apps/analog-app-ng",
         "index": "apps/analog-app/src/index.html",
@@ -69,7 +69,7 @@
       }
     },
     "serve-ng": {
-      "builder": "@angular-devkit/build-angular:dev-server",
+      "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
           "browserTarget": "analog-app:build-ng:production"

commitlint.config.js

@@ -3,6 +3,10 @@ module.exports = {
   rules: {
     'body-leading-blank': [2, 'always'],
     'footer-leading-blank': [2, 'always'],
-    'scope-enum': [2, 'always', ['vite-angular-plugin', 'create-analog']],
+    'scope-enum': [
+      2,
+      'always',
+      ['vite-angular-plugin', 'create-analog', 'astro-integration-angular'],
+    ],
   },
 };

jest.config.ts

@@ -0,0 +1,5 @@
+import { getJestProjects } from '@nrwl/jest';
+
+export default {
+  projects: getJestProjects(),
+};

jest.preset.js

@@ -0,0 +1,3 @@
+const nxPreset = require('@nrwl/jest/preset').default;
+
+module.exports = { ...nxPreset };

package.json

@@ -40,8 +40,10 @@
     "@angular/forms": "~14.0.0",
     "@angular/platform-browser": "~14.0.0",
     "@angular/platform-browser-dynamic": "~14.0.0",
+    "@angular/platform-server": "^14.1.3",
     "@angular/router": "~14.0.0",
     "@nrwl/angular": "14.4.2",
+    "astro": "^1.0.6",
     "rxjs": "~7.4.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.4"
@@ -56,13 +58,16 @@
     "@angular/language-service": "~14.0.0",
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
+    "@astrojs/markdown-component": "^1.0.1",
     "@ngtools/webpack": "~14.0.0",
     "@nrwl/cli": "14.4.2",
     "@nrwl/cypress": "14.4.2",
     "@nrwl/eslint-plugin-nx": "14.4.2",
+    "@nrwl/jest": "14.4.2",
     "@nrwl/linter": "14.4.2",
     "@nrwl/workspace": "14.4.2",
     "@nx-plus/docusaurus": "14.1.0",
+    "@types/jest": "27.4.1",
     "playwright": "^1.25.0",
     "@types/node": "16.11.7",
     "@typescript-eslint/eslint-plugin": "^5.29.0",
@@ -75,6 +80,7 @@
     "eslint": "~8.15.0",
     "eslint-config-prettier": "8.1.0",
     "eslint-plugin-cypress": "^2.10.3",
+    "jest": "27.5.1",
     "kolorist": "^1.5.1",
     "lint-staged": "^13.0.3",
     "minimist": "^1.2.6",
@@ -83,8 +89,9 @@
     "prompts": "^2.4.2",
     "rollup-plugin-visualizer": "^5.7.1",
     "start-server-and-test": "^1.14.0",
+    "ts-jest": "27.1.4",
     "ts-node": "~10.8.0",
-    "typescript": "~4.7.4",
+    "typescript": "~4.7.2",
     "vite": "^3.0.4",
     "vitest": "^0.21.0",
     "webpack-bundle-analyzer": "^4.5.0"

packages/astro-integration-angular/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

packages/astro-integration-angular/README.md

@@ -0,0 +1,64 @@
+# @analogjs/astro-integration-angular
+
+An Angular integration for Astro
+
+## Setup
+
+Install dependencies
+
+```sh
+yarn add @analogjs/astro-integration-angular --dev
+```
+
+Add Angular to `integrations` array and enable `experimental.integrations`
+
+```js
+import { defineConfig } from 'astro/config';
+import angular from '@analogjs/astro-integration-angular';
+
+export default defineConfig({
+  integrations: [angular()],
+  experimental: {
+    integrations: true,
+  },
+});
+```
+
+## Defining A Component
+
+The Astro Angular integration **only** supports bootstrapping standalone components:
+
+```ts
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-hello',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <p>Hello from Angular!!</p>
+
+    <p *ngIf="show">help</p>
+
+    <button (click)="toggle()">Toggle</button>
+  `,
+})
+export class HelloComponent {
+  show = false;
+
+  toggle() {
+    this.show = !this.show;
+  }
+}
+```
+
+And add the Angular component to the Astro component:
+
+```ts
+---
+import { HelloComponent } from '../components/hello.component.ts';
+---
+
+<HelloComponent client:visible />
+```

packages/astro-integration-angular/jest.config.json

@@ -0,0 +1,19 @@
+{
+  "displayName": "astro-integration-angular",
+  "preset": "../../jest.preset.js",
+  "globals": {
+    "ts-jest": {
+      "tsconfig": "<rootDir>/tsconfig.spec.json"
+    }
+  },
+  "transform": {
+    "^.+\\.[tj]s$": "ts-jest"
+  },
+  "moduleFileExtensions": [
+    "ts",
+    "js",
+    "html",
+    "json"
+  ],
+  "coverageDirectory": "../../coverage/packages/astro-integration-angular"
+}

packages/astro-integration-angular/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@analogjs/astro-integration-angular",
+  "version": "0.0.1",
+  "description": "An Angular integration for Astro",
+  "type": "module",
+  "author": "Brandon Roberts <robertsbt@gmail.com>",
+  "exports": {
+    ".": "./src/index.js",
+    "./client.js": "./src/client.js",
+    "./server.js": "./src/server.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "index.js",
+    "client.js",
+    "server.js"
+  ],
+  "keywords": [
+    "angular",
+    "astro",
+    "astro-integration",
+    "astro-component",
+    "renderer"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/analogjs/analog/issues"
+  },
+  "homepage": "https://github.com/analogjs/analog#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/analogjs/analog.git"
+  },
+  "dependencies": {
+    "@analogjs/vite-plugin-angular": "latest"
+  },
+  "peerDependencies": {
+    "@angular-devkit/build-angular": "^14.0.0"
+  }
+}

packages/astro-integration-angular/project.json

@@ -0,0 +1,55 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/astro-integration-angular/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/js:tsc",
+      "outputs": [
+        "{options.outputPath}"
+      ],
+      "options": {
+        "outputPath": "dist/packages/astro-integration-angular",
+        "main": "packages/astro-integration-angular/src/index.ts",
+        "tsConfig": "packages/astro-integration-angular/tsconfig.lib.json",
+        "assets": [
+          "packages/astro-integration-angular/*.md"
+        ]
+      }
+    },
+    "publish": {
+      "executor": "@nrwl/workspace:run-commands",
+      "options": {
+        "command": "node tools/scripts/publish.mjs astro-integration-angular {args.ver} {args.tag}"
+      },
+      "dependsOn": [
+        {
+          "projects": "self",
+          "target": "build"
+        }
+      ]
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": [
+        "{options.outputFile}"
+      ],
+      "options": {
+        "lintFilePatterns": [
+          "packages/astro-integration-angular/**/*.ts"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": [
+        "coverage/packages/astro-integration-angular"
+      ],
+      "options": {
+        "jestConfig": "packages/astro-integration-angular/jest.config.json",
+        "passWithNoTests": true
+      }
+    }
+  },
+  "tags": []
+}

packages/astro-integration-angular/src/client.ts

@@ -0,0 +1,13 @@
+import 'zone.js/dist/zone.js';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { ɵComponentType } from '@angular/core';
+
+export default (_element?: HTMLElement) => {
+  return (
+    Component: ɵComponentType<unknown>,
+    _props?: unknown,
+    _childHTML?: unknown
+  ) => {
+    bootstrapApplication(Component);
+  };
+};

packages/astro-integration-angular/src/index.spec.ts

@@ -0,0 +1,10 @@
+import astroPlugin from './index';
+
+describe('angularVitePlugin', () => {
+  it('should return astro configurations', () => {
+    expect(astroPlugin().name).toEqual('@analogjs/astro-integration-angular');
+    expect(astroPlugin().hooks).toStrictEqual({
+      'astro:config:setup': expect.anything(),
+    });
+  });
+});

packages/astro-integration-angular/src/index.ts

@@ -0,0 +1,43 @@
+import viteAngular from '@analogjs/vite-plugin-angular';
+import { AstroIntegration, AstroRenderer } from 'astro';
+
+function getRenderer(): AstroRenderer {
+  return {
+    name: '@analogjs/astro-integration-angular',
+    clientEntrypoint: '@analogjs/astro-integration-angular/client.js',
+    serverEntrypoint: '@analogjs/astro-integration-angular/server.js',
+  };
+}
+
+function getViteConfiguration() {
+  return {
+    optimizeDeps: {
+      include: ['@analogjs/astro-integration-angular/client.js'],
+      exclude: ['@analogjs/astro-integration-angular/server.js'],
+    },
+    /**
+     *
+     * Why I am casting viteAngular as any
+     *
+     * The vite angular plugins is shipped as commonjs, while this astro
+     * integration is shipped using ESM and if you call the the default
+     * function, you get the following error: viteAngular is not a function.
+     * Attempt to use ESM for the angular vite plugin broke something, hence
+     * this workaround for now.
+     *
+     */
+    plugins: [(viteAngular as any).default()],
+  };
+}
+
+export default function (): AstroIntegration {
+  return {
+    name: '@analogjs/astro-integration-angular',
+    hooks: {
+      'astro:config:setup': ({ addRenderer, updateConfig }) => {
+        addRenderer(getRenderer());
+        updateConfig({ vite: getViteConfiguration() });
+      },
+    },
+  };
+}