@analogjs/astro-angular 0.1.0-beta.0

package/README.md

@@ -0,0 +1,151 @@
+# @analogjs/astro-angular
+
+An [Angular](https://angular.io) integration for rendering components in [Astro](https://astro.build)
+
+## Setup
+
+### Using the Astro CLI
+
+Use the `astro add` command to install the integration
+
+```sh
+astro add @analogjs/astro-angular
+```
+
+This command:
+
+- Installs the `@analogjs/astro-angular` package.
+- Adds the `@analogjs/astro-angular` integration to the `astro.config.mjs` file.
+- Installs the necessary dependencies to render Angular components on the server and client, and common Angular dependencies, such as `@angular/common` and `@angular/forms`.
+
+### Setting up the TypeScript config
+
+The integration needs a `tsconfig.app.json` at the root of the project for compilation.
+
+Create a `tsconfig.app.json` in the root of the project.
+
+```json
+{
+  "extends": "./tsconfig.json",
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "noEmit": false,
+    "target": "es2020",
+    "module": "es2020",
+    "lib": ["es2020", "dom"]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "include": ["src/**/*.ts"]
+}
+```
+
+Go to [Defining A Component](#defining-a-component) to set up an Angular component
+to use in an Astro component.
+
+## Manual Installation
+
+The integration can also be installed manually
+
+### Install the Astro Integration
+
+```sh
+yarn add @analogjs/astro-angular --dev
+```
+
+### Install the necessary Angular dependencies
+
+```sh
+yarn add @angular-devkit/build-angular, @angular/animations, @angular/common, @angular/compiler-cli, @angular/compiler, @angular/core, @angular/language-service, @angular/forms, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/platform-server, rxjs, zone.js, tslib --dev
+```
+
+### Adding the integration
+
+Add the integration to the `astro.config.mjs`
+
+```js
+import { defineConfig } from 'astro/config';
+import angular from '@analogjs/astro-angular';
+
+export default defineConfig({
+  integrations: [angular()],
+});
+```
+
+Go to [Defining A Component](#defining-a-component)
+
+## Defining A Component
+
+The Astro Angular integration **only** supports rendering 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;
+  }
+}
+```
+
+Add the Angular component to the Astro component template. This only renders the HTML from the Angular component.
+
+```ts
+---
+import { HelloComponent } from '../components/hello.component.ts';
+---
+
+<HelloComponent />
+```
+
+To hydrate the component on the client, use one of the Astro directives:
+
+```ts
+---
+import { HelloComponent } from '../components/hello.component.ts';
+---
+
+<HelloComponent client:visible />
+```
+
+Find more information about [Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) in the Astro documentation.
+
+## Current Limitations
+
+- Only standalone Angular components in version v14.2+ are supported
+- Component Props/Inputs are not supported
+- Component Outputs are not supported

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@analogjs/astro-angular",
+  "version": "0.1.0-beta.0",
+  "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"
+  },
+  "keywords": [
+    "angular",
+    "astro",
+    "astro-integration",
+    "astro-component",
+    "renderer"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/analogjs/analog/issues"
+  },
+  "homepage": "https://analogjs.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/analogjs/analog.git"
+  },
+  "dependencies": {
+    "@analogjs/vite-plugin-angular": "latest"
+  },
+  "peerDependencies": {
+    "@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"
+  },
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts"
+}

package/src/client.d.ts

@@ -0,0 +1,4 @@
+import 'zone.js/dist/zone.js';
+import type { ɵComponentType } from '@angular/core';
+declare const _default: (element: HTMLElement) => (Component: ɵComponentType<unknown>, _props?: unknown, _childHTML?: unknown) => void;
+export default _default;

package/src/client.js

@@ -0,0 +1,18 @@
+import 'zone.js/dist/zone.js';
+import { createApplication } from '@angular/platform-browser';
+import { NgZone, createComponent } from '@angular/core';
+export default (element) => {
+    return (Component, _props, _childHTML) => {
+        createApplication().then((appRef) => {
+            const zone = appRef.injector.get(NgZone);
+            zone.run(() => {
+                const componentRef = createComponent(Component, {
+                    environmentInjector: appRef.injector,
+                    hostElement: element,
+                });
+                appRef.attachView(componentRef.hostView);
+            });
+        });
+    };
+};
+//# sourceMappingURL=client.js.map

package/src/client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/client.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAkB,MAAM,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGxE,eAAe,CAAC,OAAoB,EAAE,EAAE;IACtC,OAAO,CACL,SAAkC,EAClC,MAAgB,EAChB,UAAoB,EACpB,EAAE;QACF,iBAAiB,EAAE,CAAC,IAAI,CAAC,CAAC,MAAsB,EAAE,EAAE;YAClD,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YACzC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE;gBACZ,MAAM,YAAY,GAAG,eAAe,CAAC,SAAS,EAAE;oBAC9C,mBAAmB,EAAE,MAAM,CAAC,QAAQ;oBACpC,WAAW,EAAE,OAAO;iBACrB,CAAC,CAAC;gBACH,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;YAC3C,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC,CAAC"}

package/src/index.d.ts

@@ -0,0 +1,2 @@
+import { AstroIntegration } from 'astro';
+export default function (): AstroIntegration;

package/src/index.js

@@ -0,0 +1,47 @@
+import viteAngular from '@analogjs/vite-plugin-angular';
+function getRenderer() {
+    return {
+        name: '@analogjs/astro-angular',
+        clientEntrypoint: '@analogjs/astro-angular/client.js',
+        serverEntrypoint: '@analogjs/astro-angular/server.js',
+    };
+}
+function getViteConfiguration() {
+    return {
+        optimizeDeps: {
+            include: [
+                '@angular/platform-browser',
+                '@angular/core',
+                '@analogjs/astro-angular/client.js',
+            ],
+            exclude: [
+                '@angular/platform-server',
+                '@analogjs/astro-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.default()],
+    };
+}
+export default function () {
+    return {
+        name: '@analogjs/astro-angular',
+        hooks: {
+            'astro:config:setup': ({ addRenderer, updateConfig }) => {
+                addRenderer(getRenderer());
+                updateConfig({ vite: getViteConfiguration() });
+            },
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAGxD,SAAS,WAAW;IAClB,OAAO;QACL,IAAI,EAAE,yBAAyB;QAC/B,gBAAgB,EAAE,mCAAmC;QACrD,gBAAgB,EAAE,mCAAmC;KACtD,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB;IAC3B,OAAO;QACL,YAAY,EAAE;YACZ,OAAO,EAAE;gBACP,2BAA2B;gBAC3B,eAAe;gBACf,mCAAmC;aACpC;YACD,OAAO,EAAE;gBACP,0BAA0B;gBAC1B,mCAAmC;aACpC;SACF;QACD;;;;;;;;;;WAUG;QACH,OAAO,EAAE,CAAE,WAAmB,CAAC,OAAO,EAAE,CAAC;KAC1C,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO;IACZ,OAAO;QACL,IAAI,EAAE,yBAAyB;QAC/B,KAAK,EAAE;YACL,oBAAoB,EAAE,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,EAAE,EAAE;gBACtD,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC;gBAC3B,YAAY,CAAC,EAAE,IAAI,EAAE,oBAAoB,EAAE,EAAE,CAAC,CAAC;YACjD,CAAC;SACF;KACF,CAAC;AACJ,CAAC"}

package/src/server.d.ts

@@ -0,0 +1,11 @@
+import 'zone.js/dist/zone.js';
+import type { ɵComponentType } from '@angular/core';
+declare function check(Component: ɵComponentType<unknown>, _props: Record<string, unknown>, _children: unknown): boolean;
+declare function renderToStaticMarkup(Component: ɵComponentType<unknown>, _props: Record<string, unknown>, _children: unknown): Promise<{
+    html: string;
+}>;
+declare const _default: {
+    check: typeof check;
+    renderToStaticMarkup: typeof renderToStaticMarkup;
+};
+export default _default;

package/src/server.js

@@ -0,0 +1,25 @@
+import { __awaiter } from "tslib";
+import 'zone.js/dist/zone.js';
+import { renderApplication } from '@angular/platform-server';
+function check(Component, _props, _children) {
+    return !!Component['ɵcmp'];
+}
+function renderToStaticMarkup(Component, _props, _children) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const appId = getSelector(Component);
+        const document = `<${appId}></${appId}>`;
+        const html = yield renderApplication(Component, {
+            appId,
+            document,
+        });
+        return { html };
+    });
+}
+function getSelector(cmp) {
+    return cmp['ɵcmp'].selectors[0][0];
+}
+export default {
+    check,
+    renderToStaticMarkup,
+};
+//# sourceMappingURL=server.js.map

package/src/server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/server.ts"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAG7D,SAAS,KAAK,CACZ,SAAkC,EAClC,MAA+B,EAC/B,SAAkB;IAElB,OAAO,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;AAC7B,CAAC;AAED,SAAe,oBAAoB,CACjC,SAAkC,EAClC,MAA+B,EAC/B,SAAkB;;QAElB,MAAM,KAAK,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;QACrC,MAAM,QAAQ,GAAG,IAAI,KAAK,MAAM,KAAK,GAAG,CAAC;QAEzC,MAAM,IAAI,GAAG,MAAM,iBAAiB,CAAC,SAAS,EAAE;YAC9C,KAAK;YACL,QAAQ;SACT,CAAC,CAAC;QAEH,OAAO,EAAE,IAAI,EAAE,CAAC;IAClB,CAAC;CAAA;AAED,SAAS,WAAW,CAAC,GAAwB;IAC3C,OAAQ,GAAG,CAAC,MAAM,CAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9C,CAAC;AAED,eAAe;IACb,KAAK;IACL,oBAAoB;CACrB,CAAC"}