@analogjs/astro-angular 0.2.2 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -3
- package/package.json +3 -2
- package/src/client.d.ts +1 -1
- package/src/client.d.ts.map +1 -1
- package/src/client.js +25 -1
- package/src/client.js.map +1 -1
- package/src/server.d.ts +1 -1
- package/src/server.d.ts.map +1 -1
- package/src/server.js +1 -1
- package/src/server.js.map +1 -1
- package/src/utils.d.ts +2 -0
- package/src/utils.d.ts.map +1 -0
- package/src/utils.js +13 -0
- package/src/utils.js.map +1 -0
package/README.md
CHANGED
|
@@ -174,7 +174,7 @@ export class HelloComponent {
|
|
|
174
174
|
|
|
175
175
|
Add the Angular component to the Astro component template. This only renders the HTML from the Angular component.
|
|
176
176
|
|
|
177
|
-
```
|
|
177
|
+
```tsx
|
|
178
178
|
---
|
|
179
179
|
import { HelloComponent } from '../components/hello.component';
|
|
180
180
|
|
|
@@ -188,7 +188,7 @@ const helpText = "Helping binding";
|
|
|
188
188
|
|
|
189
189
|
To hydrate the component on the client, use one of the Astro [client directives](https://docs.astro.build/en/reference/directives-reference/#client-directives):
|
|
190
190
|
|
|
191
|
-
```
|
|
191
|
+
```tsx
|
|
192
192
|
---
|
|
193
193
|
import { HelloComponent } from '../components/hello.component';
|
|
194
194
|
---
|
|
@@ -198,6 +198,37 @@ import { HelloComponent } from '../components/hello.component';
|
|
|
198
198
|
|
|
199
199
|
Find more information about [Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) in the Astro documentation.
|
|
200
200
|
|
|
201
|
+
### Listening to Component Outputs
|
|
202
|
+
|
|
203
|
+
Outputs can be emitted by the Angular component are forwarded as HTML events to the Astro island.
|
|
204
|
+
To enable this feature, add a client directive and a unique `[data-analog-id]` property to each Angular component:
|
|
205
|
+
|
|
206
|
+
```tsx
|
|
207
|
+
---
|
|
208
|
+
import { HelloComponent } from '../components/hello.component';
|
|
209
|
+
---
|
|
210
|
+
|
|
211
|
+
<HelloComponent client:visible data-analog-id="hello-component-1" />
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
Then, listen to the event in the Astro component using the `addOutputListener` function:
|
|
215
|
+
|
|
216
|
+
```tsx
|
|
217
|
+
---
|
|
218
|
+
import { HelloComponent } from '../components/hello.component';
|
|
219
|
+
---
|
|
220
|
+
|
|
221
|
+
<HelloComponent client:visible data-analog-id="hello-component-1" />
|
|
222
|
+
|
|
223
|
+
<script>
|
|
224
|
+
import { addOutputListener } from '@analogjs/astro-angular/utils';
|
|
225
|
+
|
|
226
|
+
addOutputListener('hello-component-1', 'outputName', (event) => {
|
|
227
|
+
console.log(event.detail);
|
|
228
|
+
});
|
|
229
|
+
</script>
|
|
230
|
+
```
|
|
231
|
+
|
|
201
232
|
## Adding Component Providers
|
|
202
233
|
|
|
203
234
|
Additional providers can be added to a component for static rendering and client hydration.
|
|
@@ -295,4 +326,3 @@ import { HelloComponent } from "../../components/hello.component.ts";
|
|
|
295
326
|
## Current Limitations
|
|
296
327
|
|
|
297
328
|
- Only standalone Angular components in version v14.2+ are supported
|
|
298
|
-
- Component Outputs are not supported
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@analogjs/astro-angular",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.4",
|
|
4
4
|
"description": "Use Angular components within Astro",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Brandon Roberts <robertsbt@gmail.com>",
|
|
7
7
|
"exports": {
|
|
8
8
|
".": "./src/index.js",
|
|
9
|
+
"./utils": "./src/utils.js",
|
|
9
10
|
"./client.js": "./src/client.js",
|
|
10
11
|
"./server.js": "./src/server.js",
|
|
11
12
|
"./package.json": "./package.json"
|
|
@@ -27,7 +28,7 @@
|
|
|
27
28
|
"url": "https://github.com/analogjs/analog.git"
|
|
28
29
|
},
|
|
29
30
|
"dependencies": {
|
|
30
|
-
"@analogjs/vite-plugin-angular": "^0.2.
|
|
31
|
+
"@analogjs/vite-plugin-angular": "^0.2.4"
|
|
31
32
|
},
|
|
32
33
|
"peerDependencies": {
|
|
33
34
|
"@angular-devkit/build-angular": "^16.0.0",
|
package/src/client.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import 'zone.js
|
|
1
|
+
import 'zone.js';
|
|
2
2
|
import { EnvironmentProviders, Provider, ɵComponentType as ComponentType } from '@angular/core';
|
|
3
3
|
declare const _default: (element: HTMLElement) => (Component: ComponentType<unknown> & {
|
|
4
4
|
clientProviders?: (Provider | EnvironmentProviders)[];
|
package/src/client.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/client.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/client.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAC;AACjB,OAAO,EACL,oBAAoB,EACpB,QAAQ,EAER,cAAc,IAAI,aAAa,EAChC,MAAM,eAAe,CAAC;kCAKE,WAAW,iBAErB,cAAc,OAAO,CAAC,GAAG;IAClC,eAAe,CAAC,EAAE,CAAC,QAAQ,GAAG,oBAAoB,CAAC,EAAE,CAAC;CACvD,UACO,OAAO,MAAM,EAAE,OAAO,CAAC,eAClB,OAAO;AANxB,wBAoEE"}
|
package/src/client.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import 'zone.js
|
|
1
|
+
import 'zone.js';
|
|
2
2
|
import { reflectComponentType, } from '@angular/core';
|
|
3
3
|
import { NgZone, createComponent } from '@angular/core';
|
|
4
4
|
import { createApplication } from '@angular/platform-browser';
|
|
5
|
+
import { Subject, takeUntil } from 'rxjs';
|
|
5
6
|
export default (element) => {
|
|
6
7
|
return (Component, props, _childHTML) => {
|
|
7
8
|
createApplication({
|
|
@@ -21,6 +22,29 @@ export default (element) => {
|
|
|
21
22
|
}
|
|
22
23
|
}
|
|
23
24
|
}
|
|
25
|
+
if ((mirror === null || mirror === void 0 ? void 0 : mirror.outputs.length) && (props === null || props === void 0 ? void 0 : props['data-analog-id'])) {
|
|
26
|
+
const destroySubject = new Subject();
|
|
27
|
+
element.setAttribute('data-analog-id', props['data-analog-id']);
|
|
28
|
+
mirror.outputs.forEach(({ templateName, propName }) => {
|
|
29
|
+
const outputName = templateName || propName;
|
|
30
|
+
const component = componentRef.instance;
|
|
31
|
+
component[outputName]
|
|
32
|
+
.pipe(takeUntil(destroySubject))
|
|
33
|
+
.subscribe((detail) => {
|
|
34
|
+
const event = new CustomEvent(outputName, {
|
|
35
|
+
bubbles: true,
|
|
36
|
+
cancelable: true,
|
|
37
|
+
composed: true,
|
|
38
|
+
detail,
|
|
39
|
+
});
|
|
40
|
+
element.dispatchEvent(event);
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
appRef.onDestroy(() => {
|
|
44
|
+
destroySubject.next();
|
|
45
|
+
destroySubject.complete();
|
|
46
|
+
});
|
|
47
|
+
}
|
|
24
48
|
appRef.attachView(componentRef.hostView);
|
|
25
49
|
});
|
|
26
50
|
});
|
package/src/client.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"client.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/client.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"client.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/client.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAC;AACjB,OAAO,EAGL,oBAAoB,GAErB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAkB,MAAM,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAc,OAAO,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAEtD,eAAe,CAAC,OAAoB,EAAE,EAAE;IACtC,OAAO,CACL,SAEC,EACD,KAA+B,EAC/B,UAAoB,EACpB,EAAE;QACF,iBAAiB,CAAC;YAChB,SAAS,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC;SAClD,CAAC,CAAC,IAAI,CAAC,CAAC,MAAsB,EAAE,EAAE;YACjC,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,MAAM,MAAM,GAAG,oBAAoB,CAAC,SAAS,CAAC,CAAC;gBAC/C,IAAI,KAAK,IAAI,MAAM,EAAE;oBACnB,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;wBAChD,IACE,MAAM,CAAC,MAAM,CAAC,IAAI,CAChB,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC7B,YAAY,KAAK,GAAG,IAAI,QAAQ,KAAK,GAAG,CAC3C,EACD;4BACA,YAAY,CAAC,QAAQ,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;yBACnC;qBACF;iBACF;gBAED,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,MAAM,MAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAG,gBAAgB,CAAC,CAAA,EAAE;oBACvD,MAAM,cAAc,GAAG,IAAI,OAAO,EAAQ,CAAC;oBAC3C,OAAO,CAAC,YAAY,CAClB,gBAAgB,EAChB,KAAK,CAAC,gBAAgB,CAAW,CAClC,CAAC;oBAEF,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,EAAE;wBACpD,MAAM,UAAU,GAAG,YAAY,IAAI,QAAQ,CAAC;wBAC5C,MAAM,SAAS,GAAG,YAAY,CAAC,QAG9B,CAAC;wBACF,SAAS,CAAC,UAAU,CAAC;6BAClB,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;6BAC/B,SAAS,CAAC,CAAC,MAAM,EAAE,EAAE;4BACpB,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,UAAU,EAAE;gCACxC,OAAO,EAAE,IAAI;gCACb,UAAU,EAAE,IAAI;gCAChB,QAAQ,EAAE,IAAI;gCACd,MAAM;6BACP,CAAC,CAAC;4BACH,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;wBAC/B,CAAC,CAAC,CAAC;oBACP,CAAC,CAAC,CAAC;oBAEH,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE;wBACpB,cAAc,CAAC,IAAI,EAAE,CAAC;wBACtB,cAAc,CAAC,QAAQ,EAAE,CAAC;oBAC5B,CAAC,CAAC,CAAC;iBACJ;gBAED,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;YAC3C,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import 'zone.js';\nimport {\n EnvironmentProviders,\n Provider,\n reflectComponentType,\n ɵComponentType as ComponentType,\n} from '@angular/core';\nimport { ApplicationRef, NgZone, createComponent } from '@angular/core';\nimport { createApplication } from '@angular/platform-browser';\nimport { Observable, Subject, takeUntil } from 'rxjs';\n\nexport default (element: HTMLElement) => {\n return (\n Component: ComponentType<unknown> & {\n clientProviders?: (Provider | EnvironmentProviders)[];\n },\n props?: Record<string, unknown>,\n _childHTML?: unknown\n ) => {\n createApplication({\n providers: [...(Component.clientProviders || [])],\n }).then((appRef: ApplicationRef) => {\n const zone = appRef.injector.get(NgZone);\n zone.run(() => {\n const componentRef = createComponent(Component, {\n environmentInjector: appRef.injector,\n hostElement: element,\n });\n\n const mirror = reflectComponentType(Component);\n if (props && mirror) {\n for (const [key, value] of Object.entries(props)) {\n if (\n mirror.inputs.some(\n ({ templateName, propName }) =>\n templateName === key || propName === key\n )\n ) {\n componentRef.setInput(key, value);\n }\n }\n }\n\n if (mirror?.outputs.length && props?.['data-analog-id']) {\n const destroySubject = new Subject<void>();\n element.setAttribute(\n 'data-analog-id',\n props['data-analog-id'] as string\n );\n\n mirror.outputs.forEach(({ templateName, propName }) => {\n const outputName = templateName || propName;\n const component = componentRef.instance as Record<\n string,\n Observable<unknown>\n >;\n component[outputName]\n .pipe(takeUntil(destroySubject))\n .subscribe((detail) => {\n const event = new CustomEvent(outputName, {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail,\n });\n element.dispatchEvent(event);\n });\n });\n\n appRef.onDestroy(() => {\n destroySubject.next();\n destroySubject.complete();\n });\n }\n\n appRef.attachView(componentRef.hostView);\n });\n });\n };\n};\n"]}
|
package/src/server.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import 'zone.js/
|
|
1
|
+
import 'zone.js/node';
|
|
2
2
|
import type { EnvironmentProviders, Provider, ɵComponentType as ComponentType } from '@angular/core';
|
|
3
3
|
declare function check(Component: ComponentType<unknown>, _props: Record<string, unknown>, _children: unknown): boolean;
|
|
4
4
|
declare function renderToStaticMarkup(Component: ComponentType<unknown> & {
|
package/src/server.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/server.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/server.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAEV,oBAAoB,EACpB,QAAQ,EACR,cAAc,IAAI,aAAa,EAChC,MAAM,eAAe,CAAC;AAuBvB,iBAAS,KAAK,CACZ,SAAS,EAAE,aAAa,CAAC,OAAO,CAAC,EACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,SAAS,EAAE,OAAO,WAGnB;AAwCD,iBAAe,oBAAoB,CACjC,SAAS,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG;IAClC,eAAe,EAAE,CAAC,QAAQ,GAAG,oBAAoB,CAAC,EAAE,CAAC;CACtD,EACD,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,SAAS,EAAE,OAAO;;GAwBnB;;;;;AAED,wBAGE"}
|
package/src/server.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __awaiter } from "tslib";
|
|
2
|
-
import 'zone.js/
|
|
2
|
+
import 'zone.js/node';
|
|
3
3
|
import { ApplicationRef, InjectionToken, reflectComponentType, } from '@angular/core';
|
|
4
4
|
import { BEFORE_APP_SERIALIZED, provideServerRendering, renderApplication, ɵSERVER_CONTEXT, } from '@angular/platform-server';
|
|
5
5
|
import { bootstrapApplication } from '@angular/platform-browser';
|
package/src/server.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"server.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/server.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"server.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/server.ts"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AAOtB,OAAO,EACL,cAAc,EACd,cAAc,EACd,oBAAoB,GACrB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,qBAAqB,EACrB,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,GAChB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,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,SAEC,EACD,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;QACzC,MAAM,SAAS,GAAG,GAAG,EAAE,CACrB,oBAAoB,CAAC,SAAS,EAAE;YAC9B,SAAS,EAAE;gBACT;oBACE,OAAO,EAAE,yBAAyB;oBAClC,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;iBAC5B;gBACD,0BAA0B;gBAC1B,sBAAsB,EAAE;gBACxB,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAE;gBAChD,GAAG,CAAC,SAAS,CAAC,eAAe,IAAI,EAAE,CAAC;aACrC;SACF,CAAC,CAAC;QAEL,MAAM,IAAI,GAAG,MAAM,iBAAiB,CAAC,SAAS,EAAE;YAC9C,QAAQ;SACT,CAAC,CAAC;QAEH,OAAO,EAAE,IAAI,EAAE,CAAC;IAClB,CAAC;CAAA;AAED,eAAe;IACb,KAAK;IACL,oBAAoB;CACrB,CAAC","sourcesContent":["import 'zone.js/node';\nimport type {\n ComponentMirror,\n EnvironmentProviders,\n Provider,\n ɵComponentType as ComponentType,\n} from '@angular/core';\nimport {\n ApplicationRef,\n InjectionToken,\n reflectComponentType,\n} from '@angular/core';\nimport {\n BEFORE_APP_SERIALIZED,\n provideServerRendering,\n renderApplication,\n ɵSERVER_CONTEXT,\n} from '@angular/platform-server';\nimport { bootstrapApplication } from '@angular/platform-browser';\n\nconst ANALOG_ASTRO_STATIC_PROPS = new InjectionToken<{\n props: Record<string, unknown>;\n mirror: ComponentMirror<unknown>;\n}>('@analogjs/astro-angular: Static Props w/ Mirror Provider', {\n factory() {\n return { props: {}, mirror: {} as ComponentMirror<unknown> };\n },\n});\n\nfunction check(\n Component: ComponentType<unknown>,\n _props: Record<string, unknown>,\n _children: unknown\n) {\n return !!reflectComponentType(Component);\n}\n\n// Run beforeAppInitialized hook to set Input on the ComponentRef\n// before the platform renders to string\nconst STATIC_PROPS_HOOK_PROVIDER: Provider = {\n provide: BEFORE_APP_SERIALIZED,\n useFactory: (\n appRef: ApplicationRef,\n {\n props,\n mirror,\n }: {\n props: Record<string, unknown>;\n mirror: ComponentMirror<unknown>;\n }\n ) => {\n return () => {\n const compRef = appRef.components[0];\n if (compRef && props && mirror) {\n for (const [key, value] of Object.entries(props)) {\n if (\n // we double-check inputs on ComponentMirror\n // because Astro might add additional props\n // that aren't actually Input defined on the Component\n mirror.inputs.some(\n ({ templateName, propName }) =>\n templateName === key || propName === key\n )\n ) {\n compRef.setInput(key, value);\n }\n }\n compRef.changeDetectorRef.detectChanges();\n }\n };\n },\n deps: [ApplicationRef, ANALOG_ASTRO_STATIC_PROPS],\n multi: true,\n};\n\nasync function renderToStaticMarkup(\n Component: ComponentType<unknown> & {\n renderProviders: (Provider | EnvironmentProviders)[];\n },\n props: Record<string, unknown>,\n _children: unknown\n) {\n const mirror = reflectComponentType(Component);\n const appId = mirror?.selector || Component.name.toString().toLowerCase();\n const document = `<${appId}></${appId}>`;\n const bootstrap = () =>\n bootstrapApplication(Component, {\n providers: [\n {\n provide: ANALOG_ASTRO_STATIC_PROPS,\n useValue: { props, mirror },\n },\n STATIC_PROPS_HOOK_PROVIDER,\n provideServerRendering(),\n { provide: ɵSERVER_CONTEXT, useValue: 'analog' },\n ...(Component.renderProviders || []),\n ],\n });\n\n const html = await renderApplication(bootstrap, {\n document,\n });\n\n return { html };\n}\n\nexport default {\n check,\n renderToStaticMarkup,\n};\n"]}
|
package/src/utils.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,EACrC,oBAAoB,GAAE,oBAAyB,cAgBhD"}
|
package/src/utils.js
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export function addOutputListener(analogId, outputName, callback, eventListenerOptions = {}) {
|
|
2
|
+
const observer = new MutationObserver((mutations) => {
|
|
3
|
+
var _a;
|
|
4
|
+
const foundTarget = (_a = mutations.find((mutation) => { var _a; return ((_a = mutation.target.dataset) === null || _a === void 0 ? void 0 : _a['analogId']) === analogId; })) === null || _a === void 0 ? void 0 : _a.target;
|
|
5
|
+
if (foundTarget) {
|
|
6
|
+
foundTarget.addEventListener(outputName, callback, eventListenerOptions);
|
|
7
|
+
observer.disconnect();
|
|
8
|
+
}
|
|
9
|
+
});
|
|
10
|
+
observer.observe(document.body, { attributes: true, subtree: true });
|
|
11
|
+
return () => observer.disconnect();
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=utils.js.map
|
package/src/utils.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,iBAAiB,CAC/B,QAAgB,EAChB,UAAkB,EAClB,QAAqC,EACrC,uBAA6C,EAAE;IAE/C,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE;;QAClD,MAAM,WAAW,GAAG,MAAA,SAAS,CAAC,IAAI,CAChC,CAAC,QAAQ,EAAE,EAAE,WACX,OAAA,CAAA,MAAC,QAAQ,CAAC,MAAsB,CAAC,OAAO,0CAAG,UAAU,CAAC,MAAK,QAAQ,CAAA,EAAA,CACtE,0CAAE,MAAM,CAAC;QAEV,IAAI,WAAW,EAAE;YACf,WAAW,CAAC,gBAAgB,CAAC,UAAU,EAAE,QAAQ,EAAE,oBAAoB,CAAC,CAAC;YACzE,QAAQ,CAAC,UAAU,EAAE,CAAC;SACvB;IACH,CAAC,CAAC,CAAC;IACH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAErE,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;AACrC,CAAC","sourcesContent":["export function addOutputListener(\n analogId: string,\n outputName: string,\n callback: (...args: any[]) => unknown,\n eventListenerOptions: EventListenerOptions = {}\n) {\n const observer = new MutationObserver((mutations) => {\n const foundTarget = mutations.find(\n (mutation) =>\n (mutation.target as HTMLElement).dataset?.['analogId'] === analogId\n )?.target;\n\n if (foundTarget) {\n foundTarget.addEventListener(outputName, callback, eventListenerOptions);\n observer.disconnect();\n }\n });\n observer.observe(document.body, { attributes: true, subtree: true });\n\n return () => observer.disconnect();\n}\n"]}
|