@analogjs/astro-angular 3.0.0-beta.10 → 3.0.0-beta.12
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/package.json +2 -2
- package/src/client-ngh.js +1 -1
- package/src/client.d.ts +2 -1
- package/src/client.js +10 -27
- package/src/client.js.map +1 -1
- package/src/index.js +0 -3
- package/src/index.js.map +1 -1
- package/src/server-ngh.js +1 -1
- package/src/server.js +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@analogjs/astro-angular",
|
|
3
|
-
"version": "3.0.0-beta.
|
|
3
|
+
"version": "3.0.0-beta.12",
|
|
4
4
|
"description": "Use Angular components within Astro",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Brandon Roberts <robertsbt@gmail.com>",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"url": "https://github.com/sponsors/brandonroberts"
|
|
57
57
|
},
|
|
58
58
|
"dependencies": {
|
|
59
|
-
"@analogjs/vite-plugin-angular": "3.0.0-beta.
|
|
59
|
+
"@analogjs/vite-plugin-angular": "3.0.0-beta.12",
|
|
60
60
|
"rehype": "^13.0.2"
|
|
61
61
|
},
|
|
62
62
|
"peerDependencies": {
|
package/src/client-ngh.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { buildProjectableNodes, collectProjectedNodes } from "./projection.js";
|
|
2
1
|
import { ID_PROP_NAME } from "./id.js";
|
|
3
2
|
import { createComponentBindings, getComponentElementTag, registerRootComponent } from "./create-component.js";
|
|
3
|
+
import { buildProjectableNodes, collectProjectedNodes } from "./projection.js";
|
|
4
4
|
import { ensureSsrIntegrityMarker } from "./ssr-integrity.js";
|
|
5
5
|
import { APP_ID, createComponent, provideZonelessChangeDetection, reflectComponentType } from "@angular/core";
|
|
6
6
|
import { createApplication, provideClientHydration } from "@angular/platform-browser";
|
package/src/client.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { EnvironmentProviders, Provider, ɵComponentType as ComponentType } from "@angular/core";
|
|
2
|
+
import { ApplicationRef } from "@angular/core";
|
|
2
3
|
declare const _default: (element: HTMLElement) => ((Component: ComponentType<unknown> & {
|
|
3
4
|
clientProviders?: (Provider | EnvironmentProviders)[];
|
|
4
|
-
}, props?: Record<string, unknown>, slots?: unknown) => void);
|
|
5
|
+
}, props?: Record<string, unknown>, slots?: unknown) => Promise<ApplicationRef | void> | undefined);
|
|
5
6
|
export default _default;
|
package/src/client.js
CHANGED
|
@@ -1,42 +1,25 @@
|
|
|
1
|
+
import { ID_PROP_NAME } from "./id.js";
|
|
2
|
+
import { createComponentBindings, registerRootComponent } from "./create-component.js";
|
|
1
3
|
import { buildProjectableNodes } from "./projection.js";
|
|
2
4
|
import { createComponent, provideZonelessChangeDetection, reflectComponentType } from "@angular/core";
|
|
3
5
|
import { createApplication } from "@angular/platform-browser";
|
|
4
|
-
import { Subject, takeUntil } from "rxjs";
|
|
5
6
|
//#region packages/astro-angular/src/client.ts
|
|
6
7
|
var client_default = (element) => {
|
|
7
8
|
return (Component, props, slots) => {
|
|
8
9
|
const mirror = reflectComponentType(Component);
|
|
9
10
|
if (!mirror) return;
|
|
10
|
-
|
|
11
|
+
if (mirror.outputs.length && props?.["data-analog-id"]) element.setAttribute(ID_PROP_NAME, props[ID_PROP_NAME]);
|
|
12
|
+
return createApplication({ providers: [provideZonelessChangeDetection(), ...Component.clientProviders || []] }).then((appRef) => {
|
|
11
13
|
const componentRef = createComponent(Component, {
|
|
12
14
|
environmentInjector: appRef.injector,
|
|
13
15
|
hostElement: element,
|
|
14
|
-
projectableNodes: buildProjectableNodes(mirror, slots, document)
|
|
16
|
+
projectableNodes: buildProjectableNodes(mirror, slots, document),
|
|
17
|
+
bindings: createComponentBindings(mirror, props, element)
|
|
15
18
|
});
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
const destroySubject = new Subject();
|
|
21
|
-
element.setAttribute("data-analog-id", props["data-analog-id"]);
|
|
22
|
-
mirror.outputs.forEach(({ templateName, propName }) => {
|
|
23
|
-
const outputName = templateName || propName;
|
|
24
|
-
componentRef.instance[outputName].pipe(takeUntil(destroySubject)).subscribe((detail) => {
|
|
25
|
-
const event = new CustomEvent(outputName, {
|
|
26
|
-
bubbles: true,
|
|
27
|
-
cancelable: true,
|
|
28
|
-
composed: true,
|
|
29
|
-
detail
|
|
30
|
-
});
|
|
31
|
-
element.dispatchEvent(event);
|
|
32
|
-
});
|
|
33
|
-
});
|
|
34
|
-
appRef.onDestroy(() => {
|
|
35
|
-
destroySubject.next();
|
|
36
|
-
destroySubject.complete();
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
appRef.attachView(componentRef.hostView);
|
|
19
|
+
registerRootComponent(appRef, componentRef);
|
|
20
|
+
return appRef;
|
|
21
|
+
}).catch((error) => {
|
|
22
|
+
console.error("Failed to bootstrap Angular component:", error);
|
|
40
23
|
});
|
|
41
24
|
};
|
|
42
25
|
};
|
package/src/client.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"client.js","names":[],"sources":["../../src/client.ts"],"sourcesContent":["import {\n EnvironmentProviders,\n Provider,\n reflectComponentType,\n ɵComponentType as ComponentType,\n provideZonelessChangeDetection,\n} from '@angular/core';\nimport { ApplicationRef, createComponent } from '@angular/core';\nimport { createApplication } from '@angular/platform-browser';\nimport {
|
|
1
|
+
{"version":3,"file":"client.js","names":[],"sources":["../../src/client.ts"],"sourcesContent":["import {\n EnvironmentProviders,\n Provider,\n reflectComponentType,\n ɵComponentType as ComponentType,\n provideZonelessChangeDetection,\n} from '@angular/core';\nimport { ApplicationRef, createComponent } from '@angular/core';\nimport { createApplication } from '@angular/platform-browser';\nimport {\n createComponentBindings,\n registerRootComponent,\n} from './create-component.ts';\nimport { ID_PROP_NAME } from './id.ts';\nimport { buildProjectableNodes } from './projection.ts';\n\nexport default (\n element: HTMLElement,\n): ((\n Component: ComponentType<unknown> & {\n clientProviders?: (Provider | EnvironmentProviders)[];\n },\n props?: Record<string, unknown>,\n slots?: unknown,\n) => Promise<ApplicationRef | void> | undefined) => {\n return (\n Component: ComponentType<unknown> & {\n clientProviders?: (Provider | EnvironmentProviders)[];\n },\n props?: Record<string, unknown>,\n slots?: unknown,\n ): Promise<ApplicationRef | void> | undefined => {\n const mirror = reflectComponentType(Component);\n\n if (!mirror) {\n // Not an Angular component\n return;\n }\n\n if (mirror.outputs.length && props?.[ID_PROP_NAME]) {\n // `addOutputListener` waits for this attribute to attach its listener.\n element.setAttribute(ID_PROP_NAME, props[ID_PROP_NAME] as string);\n }\n\n return createApplication({\n providers: [\n provideZonelessChangeDetection(),\n ...(Component.clientProviders || []),\n ],\n })\n .then((appRef: ApplicationRef) => {\n // Bindings go through `inputBinding`/`outputBinding`, which handle\n // aliases as well as signal `input()` and `output()`.\n const componentRef = createComponent(Component, {\n environmentInjector: appRef.injector,\n hostElement: element,\n projectableNodes: buildProjectableNodes(mirror, slots, document),\n bindings: createComponentBindings(mirror, props, element),\n });\n\n registerRootComponent(appRef, componentRef);\n\n return appRef;\n })\n .catch((error) => {\n console.error('Failed to bootstrap Angular component:', error);\n });\n };\n};\n"],"mappings":";;;;;;AAgBA,IAAA,kBACE,YAOkD;CAClD,QACE,WAGA,OACA,UAC+C;EAC/C,MAAM,SAAS,qBAAqB,SAAS;EAE7C,IAAI,CAAC,QAEH;EAGF,IAAI,OAAO,QAAQ,UAAU,QAAA,mBAE3B,QAAQ,aAAa,cAAc,MAAM,aAAuB;EAGlE,OAAO,kBAAkB,EACvB,WAAW,CACT,+BAA+B,GAC/B,GAAI,UAAU,mBAAmB,CAAC,CACpC,EACF,CAAC,CAAC,CACC,MAAM,WAA2B;GAGhC,MAAM,eAAe,gBAAgB,WAAW;IAC9C,qBAAqB,OAAO;IAC5B,aAAa;IACb,kBAAkB,sBAAsB,QAAQ,OAAO,QAAQ;IAC/D,UAAU,wBAAwB,QAAQ,OAAO,OAAO;GAC1D,CAAC;GAED,sBAAsB,QAAQ,YAAY;GAE1C,OAAO;EACT,CAAC,CAAC,CACD,OAAO,UAAU;GAChB,QAAQ,MAAM,0CAA0C,KAAK;EAC/D,CAAC;CACL;AACF"}
|
package/src/index.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import viteAngular from "@analogjs/vite-plugin-angular";
|
|
2
2
|
import { enableProdMode } from "@angular/core";
|
|
3
|
-
import * as vite from "vite";
|
|
4
3
|
//#region packages/astro-angular/src/index.ts
|
|
5
4
|
function getRenderer(ngHydration) {
|
|
6
5
|
return {
|
|
@@ -31,9 +30,7 @@ function transformFilterPlugin(filter) {
|
|
|
31
30
|
};
|
|
32
31
|
}
|
|
33
32
|
function getViteConfiguration(ngHydration, pluginOptions) {
|
|
34
|
-
const isRolldown = !!vite.rolldownVersion;
|
|
35
33
|
return {
|
|
36
|
-
[isRolldown ? "oxc" : "esbuild"]: { ...isRolldown ? { jsx: { development: true } } : { jsxDev: true } },
|
|
37
34
|
optimizeDeps: {
|
|
38
35
|
include: [
|
|
39
36
|
"@angular/platform-browser",
|
package/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import viteAngular from '@analogjs/vite-plugin-angular';\nimport type {\n AnalogIntegrationPlugin,\n PluginOptions,\n TransformFilter,\n} from '@analogjs/vite-plugin-angular';\nimport { enableProdMode } from '@angular/core';\nimport type { AstroIntegration, AstroRenderer, ViteUserConfig } from 'astro';\
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import viteAngular from '@analogjs/vite-plugin-angular';\nimport type {\n AnalogIntegrationPlugin,\n PluginOptions,\n TransformFilter,\n} from '@analogjs/vite-plugin-angular';\nimport { enableProdMode } from '@angular/core';\nimport type { AstroIntegration, AstroRenderer, ViteUserConfig } from 'astro';\n\ninterface AngularOptions {\n vite?: PluginOptions;\n /**\n * Restricts which modules Angular compiles. Return `false` to leave a\n * module to other Astro integrations. Registered with Angular through the\n * `analog.setup()` hook of an internal Vite plugin.\n */\n transformFilter?: TransformFilter;\n /**\n * Adds Angular style tags to the document head instead of next to the\n * component in the body. Defaults to `true`.\n *\n * This disables Astro's streaming under SSR. Set to `false` to keep streaming.\n */\n strictStylePlacement?: boolean;\n /**\n * Use Angular's `provideClientHydration` to hydrate components. Defaults to\n * `true`. Set to `false` to bootstrap components on the client instead.\n */\n useAngularHydration?: boolean;\n}\n\nfunction getRenderer(ngHydration: boolean): AstroRenderer {\n return {\n name: '@analogjs/astro-angular',\n clientEntrypoint: ngHydration\n ? '@analogjs/astro-angular/client-ngh.js'\n : '@analogjs/astro-angular/client.js',\n serverEntrypoint: ngHydration\n ? '@analogjs/astro-angular/server-ngh.js'\n : '@analogjs/astro-angular/server.js',\n };\n}\n\nconst SERVER_ENTRYPOINTS = [\n '@angular/platform-server',\n '@analogjs/astro-angular/server.js',\n '@analogjs/astro-angular/server-ngh.js',\n];\n\n/**\n * Modules the dependency optimizer must leave alone on the server.\n * `@angular/core` is excluded on top of the server entrypoints because\n * pre-bundling it produces a second copy of the Angular runtime, so components\n * render against a different runtime than the one they were registered in —\n * surfacing as empty SSR output plus `NG0912` component ID collisions.\n */\nconst SERVER_OPTIMIZE_DEPS_EXCLUDE = [...SERVER_ENTRYPOINTS, '@angular/core'];\n\nfunction transformFilterPlugin(\n filter: TransformFilter,\n): AnalogIntegrationPlugin {\n return {\n name: '@analogjs/astro-angular-transform-filter',\n analog: {\n setup(ctx) {\n ctx.registerTransformFilter(filter);\n },\n },\n };\n}\n\nfunction getViteConfiguration(\n ngHydration: boolean,\n pluginOptions?: AngularOptions,\n) {\n return {\n optimizeDeps: {\n include: [\n '@angular/platform-browser',\n '@angular/core',\n ngHydration\n ? '@analogjs/astro-angular/client-ngh.js'\n : '@analogjs/astro-angular/client.js',\n ],\n exclude: SERVER_ENTRYPOINTS,\n },\n\n plugins: [\n viteAngular(pluginOptions?.vite),\n ...(pluginOptions?.transformFilter\n ? [transformFilterPlugin(pluginOptions.transformFilter)]\n : []),\n {\n name: '@analogjs/astro-angular-platform-server',\n transform(code: string, id: string) {\n if (id.includes('platform-server')) {\n code = code.replace(/global\\./g, 'globalThis.');\n\n return {\n code: code.replace(\n 'new xhr2.XMLHttpRequest',\n 'new (xhr2.default.XMLHttpRequest || xhr2.default)',\n ),\n };\n }\n\n return;\n },\n },\n {\n name: 'analogjs-astro-client-ngservermode',\n configEnvironment(name: string) {\n if (name === 'client') {\n return {\n define: {\n ngServerMode: 'false',\n },\n };\n }\n\n return undefined;\n },\n },\n {\n // Top-level `optimizeDeps` only seeds the client environment. Adapters\n // that run SSR in their own environment — `@astrojs/cloudflare`, which\n // serves the `ssr` environment on `workerd` — get none of the excludes\n // above, so Angular's server entrypoints are pre-bundled there and the\n // renderer breaks. Re-declare them per server environment.\n name: 'analogjs-astro-server-optimize-deps',\n configEnvironment(name: string) {\n if (name === 'client') {\n return undefined;\n }\n\n return {\n optimizeDeps: {\n exclude: SERVER_OPTIMIZE_DEPS_EXCLUDE,\n },\n };\n },\n },\n ],\n ssr: {\n noExternal: ['@angular/**', '@analogjs/**'],\n },\n };\n}\n\nexport default function (options?: AngularOptions): AstroIntegration {\n process.env['ANALOG_ASTRO'] = 'true';\n\n return {\n name: '@analogjs/astro-angular',\n hooks: {\n 'astro:config:setup': ({ addRenderer, updateConfig, addMiddleware }) => {\n const ngHydration = options?.useAngularHydration !== false;\n addRenderer(getRenderer(ngHydration));\n updateConfig({\n vite: getViteConfiguration(ngHydration, options),\n });\n if (options?.strictStylePlacement !== false) {\n addMiddleware({\n order: 'pre',\n entrypoint: '@analogjs/astro-angular/middleware',\n });\n }\n },\n 'astro:config:done': () => {\n if (process.env['NODE_ENV'] === 'production') {\n enableProdMode();\n }\n },\n },\n };\n}\n"],"mappings":";;;AA+BA,SAAS,YAAY,aAAqC;CACxD,OAAO;EACL,MAAM;EACN,kBAAkB,cACd,0CACA;EACJ,kBAAkB,cACd,0CACA;CACN;AACF;AAEA,IAAM,qBAAqB;CACzB;CACA;CACA;AACF;;;;;;;;AASA,IAAM,+BAA+B,CAAC,GAAG,oBAAoB,eAAe;AAE5E,SAAS,sBACP,QACyB;CACzB,OAAO;EACL,MAAM;EACN,QAAQ,EACN,MAAM,KAAK;GACT,IAAI,wBAAwB,MAAM;EACpC,EACF;CACF;AACF;AAEA,SAAS,qBACP,aACA,eACA;CACA,OAAO;EACL,cAAc;GACZ,SAAS;IACP;IACA;IACA,cACI,0CACA;GACN;GACA,SAAS;EACX;EAEA,SAAS;GACP,YAAY,eAAe,IAAI;GAC/B,GAAI,eAAe,kBACf,CAAC,sBAAsB,cAAc,eAAe,CAAC,IACrD,CAAC;GACL;IACE,MAAM;IACN,UAAU,MAAc,IAAY;KAClC,IAAI,GAAG,SAAS,iBAAiB,GAAG;MAClC,OAAO,KAAK,QAAQ,aAAa,aAAa;MAE9C,OAAO,EACL,MAAM,KAAK,QACT,2BACA,mDACF,EACF;KACF;IAGF;GACF;GACA;IACE,MAAM;IACN,kBAAkB,MAAc;KAC9B,IAAI,SAAS,UACX,OAAO,EACL,QAAQ,EACN,cAAc,QAChB,EACF;IAIJ;GACF;GACA;IAME,MAAM;IACN,kBAAkB,MAAc;KAC9B,IAAI,SAAS,UACX;KAGF,OAAO,EACL,cAAc,EACZ,SAAS,6BACX,EACF;IACF;GACF;EACF;EACA,KAAK,EACH,YAAY,CAAC,eAAe,cAAc,EAC5C;CACF;AACF;AAEA,SAAA,YAAyB,SAA4C;CACnE,QAAQ,IAAI,kBAAkB;CAE9B,OAAO;EACL,MAAM;EACN,OAAO;GACL,uBAAuB,EAAE,aAAa,cAAc,oBAAoB;IACtE,MAAM,cAAc,SAAS,wBAAwB;IACrD,YAAY,YAAY,WAAW,CAAC;IACpC,aAAa,EACX,MAAM,qBAAqB,aAAa,OAAO,EACjD,CAAC;IACD,IAAI,SAAS,yBAAyB,OACpC,cAAc;KACZ,OAAO;KACP,YAAY;IACd,CAAC;GAEL;GACA,2BAA2B;IACzB,IAAA,QAAA,IAAA,aAAgC,cAC9B,eAAe;GAEnB;EACF;CACF;AACF"}
|
package/src/server-ngh.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { buildProjectableNodes, markProjectableNodes } from "./projection.js";
|
|
2
1
|
import { ID_PROP_NAME } from "./id.js";
|
|
3
2
|
import { createInputBindings, getComponentElementTag, registerRootComponent } from "./create-component.js";
|
|
3
|
+
import { buildProjectableNodes, markProjectableNodes } from "./projection.js";
|
|
4
4
|
import { getContext, incrementId } from "./context.js";
|
|
5
5
|
import { APP_ID, DOCUMENT, createComponent, provideZonelessChangeDetection, reflectComponentType } from "@angular/core";
|
|
6
6
|
import { createApplication, provideClientHydration } from "@angular/platform-browser";
|
package/src/server.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { buildProjectableNodes } from "./projection.js";
|
|
2
1
|
import { createInputBindings, getComponentElementTag, registerRootComponent } from "./create-component.js";
|
|
2
|
+
import { buildProjectableNodes } from "./projection.js";
|
|
3
3
|
import { DOCUMENT, createComponent, provideZonelessChangeDetection, reflectComponentType } from "@angular/core";
|
|
4
4
|
import { createApplication } from "@angular/platform-browser";
|
|
5
5
|
import { platformServer, provideServerRendering, renderApplication, ɵSERVER_CONTEXT } from "@angular/platform-server";
|