feat(astro-angular): update Astro integration with Angular v14.2 APIs

CONTRIBUTING.md

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

angular.json

@@ -5,7 +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",
+    "astro-angular": "packages/astro-angular",
     "create-analog": "packages/create-analog",
     "docs-app": "apps/docs-app",
     "vite-plugin-angular": "packages/vite-plugin-angular"

commitlint.config.js

@@ -6,7 +6,7 @@ module.exports = {
     'scope-enum': [
       2,
       'always',
-      ['vite-plugin-angular', 'create-analog', 'astro-integration-angular'],
+      ['vite-plugin-angular', 'create-analog', 'astro-angular'],
     ],
   },
 };

package.json

@@ -33,39 +33,39 @@
     "apps/docs-app"
   ],
   "dependencies": {
-    "@angular/animations": "~14.0.0",
-    "@angular/common": "~14.0.0",
-    "@angular/compiler": "~14.0.0",
-    "@angular/core": "~14.0.0",
-    "@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",
+    "@angular/animations": "14.2.0",
+    "@angular/common": "14.2.0",
+    "@angular/compiler": "14.2.0",
+    "@angular/core": "14.2.0",
+    "@angular/forms": "14.2.0",
+    "@angular/platform-browser": "14.2.0",
+    "@angular/platform-browser-dynamic": "14.2.0",
+    "@angular/platform-server": "14.2.0",
+    "@angular/router": "14.2.0",
+    "@nrwl/angular": "14.5.10",
+    "astro": "^1.1.0",
+    "rxjs": "7.5.6",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~14.0.0",
+    "@angular-devkit/build-angular": "14.2.1",
     "@angular-eslint/eslint-plugin": "~14.0.0",
     "@angular-eslint/eslint-plugin-template": "~14.0.0",
     "@angular-eslint/template-parser": "~14.0.0",
-    "@angular/cli": "~14.0.0",
-    "@angular/compiler-cli": "~14.0.0",
-    "@angular/language-service": "~14.0.0",
+    "@angular/cli": "~14.2.1",
+    "@angular/compiler-cli": "14.2.0",
+    "@angular/language-service": "14.2.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",
+    "@nrwl/cli": "14.5.10",
+    "@nrwl/cypress": "14.5.10",
+    "@nrwl/eslint-plugin-nx": "14.5.10",
+    "@nrwl/jest": "14.5.10",
+    "@nrwl/linter": "14.5.10",
+    "@nrwl/workspace": "14.5.10",
     "@nx-plus/docusaurus": "14.1.0",
     "@types/jest": "27.4.1",
     "playwright": "^1.25.0",
@@ -84,13 +84,13 @@
     "kolorist": "^1.5.1",
     "lint-staged": "^13.0.3",
     "minimist": "^1.2.6",
-    "nx": "14.4.2",
+    "nx": "14.5.10",
     "prettier": "^2.6.2",
     "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",
+    "ts-node": "10.9.1",
     "typescript": "~4.7.2",
     "vite": "^3.0.4",
     "vitest": "^0.21.0",

packages/astro-integration-angular/README.md → packages/astro-angular/README.md

@@ -1,4 +1,4 @@
-# @analogjs/astro-integration-angular
+# @analogjs/astro-angular
 
 An Angular integration for Astro
 
@@ -7,14 +7,14 @@ An Angular integration for Astro
 Install dependencies
 
 ```sh
-yarn add @analogjs/astro-integration-angular --dev
+yarn add @analogjs/astro-angular --dev
 ```
 
 Add Angular to `integrations` array and enable `experimental.integrations`
 
 ```js
 import { defineConfig } from 'astro/config';
-import angular from '@analogjs/astro-integration-angular';
+import angular from '@analogjs/astro-angular';
 
 export default defineConfig({
   integrations: [angular()],

packages/astro-angular/jest.config.json

@@ -0,0 +1,14 @@
+{
+  "displayName": "astro-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-angular"
+}

packages/astro-integration-angular/package.json → packages/astro-angular/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@analogjs/astro-integration-angular",
-  "version": "0.0.1",
+  "name": "@analogjs/astro-angular",
+  "version": "0.1.0-beta.0",
   "description": "An Angular integration for Astro",
   "type": "module",
   "author": "Brandon Roberts <robertsbt@gmail.com>",
@@ -10,11 +10,6 @@
     "./server.js": "./src/server.js",
     "./package.json": "./package.json"
   },
-  "files": [
-    "index.js",
-    "client.js",
-    "server.js"
-  ],
   "keywords": [
     "angular",
     "astro",
@@ -26,7 +21,7 @@
   "bugs": {
     "url": "https://github.com/analogjs/analog/issues"
   },
-  "homepage": "https://github.com/analogjs/analog#readme",
+  "homepage": "https://analogjs.org",
   "repository": {
     "type": "git",
     "url": "https://github.com/analogjs/analog.git"
@@ -35,6 +30,19 @@
     "@analogjs/vite-plugin-angular": "latest"
   },
   "peerDependencies": {
-    "@angular-devkit/build-angular": "^14.0.0"
+    "@angular-devkit/build-angular": "^14.0.0",
+    "@angular/animations": "^14.0.0",
+    "@angular/common": "^14.0.0",
+    "@angular/compiler-cli": "^14.0.0",
+    "@angular/compiler": "^14.0.0",
+    "@angular/core": "^14.0.0",
+    "@angular/language-service": "^14.0.0",
+    "@angular/forms": "^14.0.0",
+    "@angular/platform-browser": "^14.0.0",
+    "@angular/platform-browser-dynamic": "^14.0.0",
+    "@angular/platform-server": "^14.0.0",
+    "rxjs": "^7.5.0",
+    "zone.js": "~0.11.4",
+    "tslib": "^2.0.0"
   }
 }

packages/astro-angular/project.json

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

packages/astro-angular/src/client.ts

@@ -0,0 +1,23 @@
+import 'zone.js/dist/zone.js';
+import { createApplication } from '@angular/platform-browser';
+import { ApplicationRef, NgZone, createComponent } from '@angular/core';
+import type { ɵComponentType } from '@angular/core';
+
+export default (element: HTMLElement) => {
+  return (
+    Component: ɵComponentType<unknown>,
+    _props?: unknown,
+    _childHTML?: unknown
+  ) => {
+    createApplication().then((appRef: ApplicationRef) => {
+      const zone = appRef.injector.get(NgZone);
+      zone.run(() => {
+        const componentRef = createComponent(Component, {
+          environmentInjector: appRef.injector,
+          hostElement: element,
+        });
+        appRef.attachView(componentRef.hostView);
+      });
+    });
+  };
+};

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

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

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

@@ -3,17 +3,24 @@ 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',
+    name: '@analogjs/astro-angular',
+    clientEntrypoint: '@analogjs/astro-angular/client.js',
+    serverEntrypoint: '@analogjs/astro-angular/server.js',
   };
 }
 
 function getViteConfiguration() {
   return {
     optimizeDeps: {
-      include: ['@analogjs/astro-integration-angular/client.js'],
-      exclude: ['@analogjs/astro-integration-angular/server.js'],
+      include: [
+        '@angular/platform-browser',
+        '@angular/core',
+        '@analogjs/astro-angular/client.js',
+      ],
+      exclude: [
+        '@angular/platform-server',
+        '@analogjs/astro-angular/server.js',
+      ],
     },
     /**
      *
@@ -32,7 +39,7 @@ function getViteConfiguration() {
 
 export default function (): AstroIntegration {
   return {
-    name: '@analogjs/astro-integration-angular',
+    name: '@analogjs/astro-angular',
     hooks: {
       'astro:config:setup': ({ addRenderer, updateConfig }) => {
         addRenderer(getRenderer());