@analogjs/astro-angular 0.1.0-beta.0 → 0.1.0-beta.1

package/README.md

@@ -46,7 +46,8 @@ Create a `tsconfig.app.json` in the root of the project.
     "noEmit": false,
     "target": "es2020",
     "module": "es2020",
-    "lib": ["es2020", "dom"]
+    "lib": ["es2020", "dom"],
+    "skipLibCheck": true
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
@@ -98,22 +99,24 @@ Go to [Defining A Component](#defining-a-component)
 The Astro Angular integration **only** supports rendering standalone components:
 
 ```ts
-import { CommonModule } from '@angular/common';
+import { NgIf } from '@angular/common';
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-hello',
   standalone: true,
-  imports: [CommonModule],
+  imports: [NgIf],
   template: `
     <p>Hello from Angular!!</p>
 
-    <p *ngIf="show">help</p>
+    <p *ngIf="show">{{ helpText }}</p>
 
     <button (click)="toggle()">Toggle</button>
   `,
 })
 export class HelloComponent {
+  @Input() helpText = 'help';
+
   show = false;
 
   toggle() {
@@ -127,9 +130,13 @@ Add the Angular component to the Astro component template. This only renders the
 ```ts
 ---
 import { HelloComponent } from '../components/hello.component.ts';
+
+const helpText = "Helping binding";
 ---
 
 <HelloComponent />
+<HelloComponent helpText="Helping" />
+<HelloComponent helpText={helpText} />
 ```
 
 To hydrate the component on the client, use one of the Astro directives:
@@ -147,5 +154,4 @@ Find more information about [Client Directives](https://docs.astro.build/en/refe
 ## 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

@@ -1,6 +1,6 @@
 {
   "name": "@analogjs/astro-angular",
-  "version": "0.1.0-beta.0",
+  "version": "0.1.0-beta.1",
   "description": "An Angular integration for Astro",
   "type": "module",
   "author": "Brandon Roberts <robertsbt@gmail.com>",
@@ -37,7 +37,6 @@
     "@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",

package/src/client.d.ts

@@ -1,4 +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;
+import type { ɵComponentType as ComponentType } from '@angular/core';
+declare const _default: (element: HTMLElement) => (Component: ComponentType<unknown>, props?: Record<string, unknown>, _childHTML?: unknown) => void;
 export default _default;

package/src/client.js

@@ -1,8 +1,8 @@
 import 'zone.js/dist/zone.js';
-import { createApplication } from '@angular/platform-browser';
 import { NgZone, createComponent } from '@angular/core';
+import { createApplication } from '@angular/platform-browser';
 export default (element) => {
-    return (Component, _props, _childHTML) => {
+    return (Component, props, _childHTML) => {
         createApplication().then((appRef) => {
             const zone = appRef.injector.get(NgZone);
             zone.run(() => {
@@ -10,6 +10,11 @@ export default (element) => {
                     environmentInjector: appRef.injector,
                     hostElement: element,
                 });
+                if (props) {
+                    for (const [key, value] of Object.entries(props)) {
+                        componentRef.setInput(key, value);
+                    }
+                }
                 appRef.attachView(componentRef.hostView);
             });
         });

package/src/client.js.map

@@ -1 +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"}
+{"version":3,"file":"client.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/client.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAkB,MAAM,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,eAAe,CAAC,OAAoB,EAAE,EAAE;IACtC,OAAO,CACL,SAAiC,EACjC,KAA+B,EAC/B,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;gBAEH,IAAI,KAAK,EAAE;oBACT,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;wBAChD,YAAY,CAAC,QAAQ,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;qBACnC;iBACF;gBAED,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.js

@@ -1,4 +1,5 @@
 import viteAngular from '@analogjs/vite-plugin-angular';
+import { enableProdMode } from '@angular/core';
 function getRenderer() {
     return {
         name: '@analogjs/astro-angular',
@@ -24,7 +25,7 @@ function getViteConfiguration() {
          * 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
+         * integration is shipped using ESM and if you call 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.
@@ -41,6 +42,9 @@ export default function () {
                 addRenderer(getRenderer());
                 updateConfig({ vite: getViteConfiguration() });
             },
+            'astro:build:setup': () => {
+                enableProdMode();
+            },
         },
     };
 }

package/src/index.js.map

@@ -1 +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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,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;YACD,mBAAmB,EAAE,GAAG,EAAE;gBACxB,cAAc,EAAE,CAAC;YACnB,CAAC;SACF;KACF,CAAC;AACJ,CAAC"}

package/src/server.d.ts

@@ -1,7 +1,7 @@
 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<{
+import type { ɵComponentType as 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: {

package/src/server.js

@@ -1,23 +1,58 @@
 import { __awaiter } from "tslib";
 import 'zone.js/dist/zone.js';
-import { renderApplication } from '@angular/platform-server';
+import { ApplicationRef, InjectionToken, reflectComponentType, } from '@angular/core';
+import { BEFORE_APP_SERIALIZED, renderApplication, } from '@angular/platform-server';
+const ANALOG_ASTRO_STATIC_PROPS = new InjectionToken('@analogjs/astro-angular: Static Props w/ Mirror Provider', {
+    factory() {
+        return { props: {}, mirror: {} };
+    },
+});
 function check(Component, _props, _children) {
-    return !!Component['ɵcmp'];
+    return !!reflectComponentType(Component);
 }
-function renderToStaticMarkup(Component, _props, _children) {
+// Run beforeAppInitialized hook to set Input on the ComponentRef
+// before the platform renders to string
+const STATIC_PROPS_HOOK_PROVIDER = {
+    provide: BEFORE_APP_SERIALIZED,
+    useFactory: (appRef, { props, mirror, }) => {
+        return () => {
+            const compRef = appRef.components[0];
+            if (compRef && props && mirror) {
+                for (const [key, value] of Object.entries(props)) {
+                    if (
+                    // we double-check inputs on ComponentMirror
+                    // because Astro might add additional props
+                    // that aren't actually Input defined on the Component
+                    mirror.inputs.some(({ templateName, propName }) => templateName === key || propName === key)) {
+                        compRef.setInput(key, value);
+                    }
+                }
+                compRef.changeDetectorRef.detectChanges();
+            }
+        };
+    },
+    deps: [ApplicationRef, ANALOG_ASTRO_STATIC_PROPS],
+    multi: true,
+};
+function renderToStaticMarkup(Component, props, _children) {
     return __awaiter(this, void 0, void 0, function* () {
-        const appId = getSelector(Component);
+        const mirror = reflectComponentType(Component);
+        const appId = (mirror === null || mirror === void 0 ? void 0 : mirror.selector) || Component.name.toString().toLowerCase();
         const document = `<${appId}></${appId}>`;
         const html = yield renderApplication(Component, {
             appId,
             document,
+            providers: [
+                {
+                    provide: ANALOG_ASTRO_STATIC_PROPS,
+                    useValue: { props, mirror },
+                },
+                STATIC_PROPS_HOOK_PROVIDER,
+            ],
         });
         return { html };
     });
 }
-function getSelector(cmp) {
-    return cmp['ɵcmp'].selectors[0][0];
-}
 export default {
     check,
     renderToStaticMarkup,

package/src/server.js.map

@@ -1 +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"}
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/server.ts"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAC;AAM9B,OAAO,EACL,cAAc,EACd,cAAc,EACd,oBAAoB,GACrB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,qBAAqB,EACrB,iBAAiB,GAClB,MAAM,0BAA0B,CAAC;AAElC,MAAM,yBAAyB,GAAG,IAAI,cAAc,CAGjD,0DAA0D,EAAE;IAC7D,OAAO;QACL,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAA8B,EAAE,CAAC;IAC/D,CAAC;CACF,CAAC,CAAC;AAEH,SAAS,KAAK,CACZ,SAAiC,EACjC,MAA+B,EAC/B,SAAkB;IAElB,OAAO,CAAC,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC;AAC3C,CAAC;AAED,iEAAiE;AACjE,wCAAwC;AACxC,MAAM,0BAA0B,GAAa;IAC3C,OAAO,EAAE,qBAAqB;IAC9B,UAAU,EAAE,CACV,MAAsB,EACtB,EACE,KAAK,EACL,MAAM,GAIP,EACD,EAAE;QACF,OAAO,GAAG,EAAE;YACV,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;YACrC,IAAI,OAAO,IAAI,KAAK,IAAI,MAAM,EAAE;gBAC9B,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;oBAChD;oBACE,4CAA4C;oBAC5C,2CAA2C;oBAC3C,sDAAsD;oBACtD,MAAM,CAAC,MAAM,CAAC,IAAI,CAChB,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC7B,YAAY,KAAK,GAAG,IAAI,QAAQ,KAAK,GAAG,CAC3C,EACD;wBACA,OAAO,CAAC,QAAQ,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;qBAC9B;iBACF;gBACD,OAAO,CAAC,iBAAiB,CAAC,aAAa,EAAE,CAAC;aAC3C;QACH,CAAC,CAAC;IACJ,CAAC;IACD,IAAI,EAAE,CAAC,cAAc,EAAE,yBAAyB,CAAC;IACjD,KAAK,EAAE,IAAI;CACZ,CAAC;AAEF,SAAe,oBAAoB,CACjC,SAAiC,EACjC,KAA8B,EAC9B,SAAkB;;QAElB,MAAM,MAAM,GAAG,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAC/C,MAAM,KAAK,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,KAAI,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,WAAW,EAAE,CAAC;QAC1E,MAAM,QAAQ,GAAG,IAAI,KAAK,MAAM,KAAK,GAAG,CAAC;QAEzC,MAAM,IAAI,GAAG,MAAM,iBAAiB,CAAC,SAAS,EAAE;YAC9C,KAAK;YACL,QAAQ;YACR,SAAS,EAAE;gBACT;oBACE,OAAO,EAAE,yBAAyB;oBAClC,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;iBAC5B;gBACD,0BAA0B;aAC3B;SACF,CAAC,CAAC;QAEH,OAAO,EAAE,IAAI,EAAE,CAAC;IAClB,CAAC;CAAA;AAED,eAAe;IACb,KAAK;IACL,oBAAoB;CACrB,CAAC"}

package/src/test-setup.d.ts

@@ -0,0 +1 @@
+import '@analogjs/vite-plugin-angular/setup-vitest';

package/src/test-setup.js

@@ -0,0 +1,2 @@
+import '@analogjs/vite-plugin-angular/setup-vitest';
+//# sourceMappingURL=test-setup.js.map

package/src/test-setup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-setup.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/test-setup.ts"],"names":[],"mappings":"AAAA,OAAO,4CAA4C,CAAC"}

package/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfigExport;
+export default _default;

package/vite.config.js

@@ -0,0 +1,34 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import { offsetFromRoot } from '@nrwl/devkit';
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+    return {
+        root: 'src',
+        server: {
+            port: 3000,
+        },
+        build: {
+            outDir: `${offsetFromRoot('packages/astro-angular/src')}/dist/packages/astro-angular`,
+            emptyOutDir: true,
+            target: 'es2020',
+        },
+        resolve: {
+            mainFields: ['module'],
+        },
+        plugins: [],
+        test: {
+            globals: true,
+            environment: 'jsdom',
+            setupFiles: ['test-setup.ts'],
+            include: ['**/*.spec.ts'],
+            cache: {
+                dir: `${offsetFromRoot('packages/astro-angular/src')}/node_modules/.vitest`,
+            },
+        },
+        define: {
+            'import.meta.vitest': mode !== 'production',
+        },
+    };
+});
+//# sourceMappingURL=vite.config.js.map

package/vite.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.config.js","sourceRoot":"","sources":["../../../packages/astro-angular/vite.config.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,6BAA6B;AAC7B,eAAe,YAAY,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACvC,OAAO;QACL,IAAI,EAAE,KAAK;QACX,MAAM,EAAE;YACN,IAAI,EAAE,IAAI;SACX;QACD,KAAK,EAAE;YACL,MAAM,EAAE,GAAG,cAAc,CACvB,4BAA4B,CAC7B,8BAA8B;YAC/B,WAAW,EAAE,IAAI;YACjB,MAAM,EAAE,QAAQ;SACjB;QACD,OAAO,EAAE;YACP,UAAU,EAAE,CAAC,QAAQ,CAAC;SACvB;QACD,OAAO,EAAE,EAAE;QACX,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,WAAW,EAAE,OAAO;YACpB,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,OAAO,EAAE,CAAC,cAAc,CAAC;YACzB,KAAK,EAAE;gBACL,GAAG,EAAE,GAAG,cAAc,CACpB,4BAA4B,CAC7B,uBAAuB;aACzB;SACF;QACD,MAAM,EAAE;YACN,oBAAoB,EAAE,IAAI,KAAK,YAAY;SAC5C;KACF,CAAC;AACJ,CAAC,CAAC,CAAC"}