@analogjs/astro-angular 3.0.0-alpha.8 → 3.0.0-alpha.9
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 +4 -7
- package/src/client.js +41 -50
- package/src/client.js.map +1 -1
- package/src/index.js +57 -74
- package/src/index.js.map +1 -1
- package/src/server.js +51 -56
- package/src/server.js.map +1 -1
- package/src/utils.js +17 -10
- package/src/utils.js.map +1 -1
- package/README.md +0 -359
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@analogjs/astro-angular",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.9",
|
|
4
4
|
"description": "Use Angular components within Astro",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Brandon Roberts <robertsbt@gmail.com>",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"url": "https://github.com/sponsors/brandonroberts"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@analogjs/vite-plugin-angular": "^3.0.0-alpha.
|
|
35
|
+
"@analogjs/vite-plugin-angular": "^3.0.0-alpha.9"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"@angular/build": ">=20.0.0",
|
|
@@ -63,8 +63,5 @@
|
|
|
63
63
|
"publishConfig": {
|
|
64
64
|
"access": "public",
|
|
65
65
|
"provenance": true
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
"module": "./src/index.js",
|
|
69
|
-
"main": "./src/index.js"
|
|
70
|
-
}
|
|
66
|
+
}
|
|
67
|
+
}
|
package/src/client.js
CHANGED
|
@@ -1,52 +1,43 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
});
|
|
40
|
-
element.dispatchEvent(event);
|
|
41
|
-
});
|
|
42
|
-
});
|
|
43
|
-
appRef.onDestroy(() => {
|
|
44
|
-
destroySubject.next();
|
|
45
|
-
destroySubject.complete();
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
appRef.attachView(componentRef.hostView);
|
|
49
|
-
});
|
|
50
|
-
};
|
|
1
|
+
import { createComponent, provideZonelessChangeDetection, reflectComponentType } from "@angular/core";
|
|
2
|
+
import { createApplication } from "@angular/platform-browser";
|
|
3
|
+
import { Subject, takeUntil } from "rxjs";
|
|
4
|
+
//#region packages/astro-angular/src/client.ts
|
|
5
|
+
var client_default = (element) => {
|
|
6
|
+
return (Component, props, _childHTML) => {
|
|
7
|
+
createApplication({ providers: [provideZonelessChangeDetection(), ...Component.clientProviders || []] }).then((appRef) => {
|
|
8
|
+
const componentRef = createComponent(Component, {
|
|
9
|
+
environmentInjector: appRef.injector,
|
|
10
|
+
hostElement: element
|
|
11
|
+
});
|
|
12
|
+
const mirror = reflectComponentType(Component);
|
|
13
|
+
if (props && mirror) {
|
|
14
|
+
for (const [key, value] of Object.entries(props)) if (mirror.inputs.some(({ templateName, propName }) => templateName === key || propName === key)) componentRef.setInput(key, value);
|
|
15
|
+
}
|
|
16
|
+
if (mirror?.outputs.length && props?.["data-analog-id"]) {
|
|
17
|
+
const destroySubject = new Subject();
|
|
18
|
+
element.setAttribute("data-analog-id", props["data-analog-id"]);
|
|
19
|
+
mirror.outputs.forEach(({ templateName, propName }) => {
|
|
20
|
+
const outputName = templateName || propName;
|
|
21
|
+
componentRef.instance[outputName].pipe(takeUntil(destroySubject)).subscribe((detail) => {
|
|
22
|
+
const event = new CustomEvent(outputName, {
|
|
23
|
+
bubbles: true,
|
|
24
|
+
cancelable: true,
|
|
25
|
+
composed: true,
|
|
26
|
+
detail
|
|
27
|
+
});
|
|
28
|
+
element.dispatchEvent(event);
|
|
29
|
+
});
|
|
30
|
+
});
|
|
31
|
+
appRef.onDestroy(() => {
|
|
32
|
+
destroySubject.next();
|
|
33
|
+
destroySubject.complete();
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
appRef.attachView(componentRef.hostView);
|
|
37
|
+
});
|
|
38
|
+
};
|
|
51
39
|
};
|
|
40
|
+
//#endregion
|
|
41
|
+
export { client_default as default };
|
|
42
|
+
|
|
52
43
|
//# sourceMappingURL=client.js.map
|
package/src/client.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"client.js","
|
|
1
|
+
{"version":3,"file":"client.js","names":[],"sources":["../../../../packages/astro-angular/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 { Observable, Subject, takeUntil } from 'rxjs';\n\nexport default (\n element: HTMLElement,\n): ((\n Component: ComponentType<unknown> & {\n clientProviders?: (Provider | EnvironmentProviders)[];\n },\n props?: Record<string, unknown>,\n _childHTML?: unknown,\n) => void) => {\n return (\n Component: ComponentType<unknown> & {\n clientProviders?: (Provider | EnvironmentProviders)[];\n },\n props?: Record<string, unknown>,\n _childHTML?: unknown,\n ): void => {\n createApplication({\n providers: [\n provideZonelessChangeDetection(),\n ...(Component.clientProviders || []),\n ],\n }).then((appRef: ApplicationRef) => {\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"],"mappings":";;;;AAWA,IAAA,kBACE,YAOY;AACZ,SACE,WAGA,OACA,eACS;AACT,oBAAkB,EAChB,WAAW,CACT,gCAAgC,EAChC,GAAI,UAAU,mBAAmB,EAAE,CACpC,EACF,CAAC,CAAC,MAAM,WAA2B;GAClC,MAAM,eAAe,gBAAgB,WAAW;IAC9C,qBAAqB,OAAO;IAC5B,aAAa;IACd,CAAC;GAEF,MAAM,SAAS,qBAAqB,UAAU;AAC9C,OAAI,SAAS;SACN,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,CAC9C,KACE,OAAO,OAAO,MACX,EAAE,cAAc,eACf,iBAAiB,OAAO,aAAa,IACxC,CAED,cAAa,SAAS,KAAK,MAAM;;AAKvC,OAAI,QAAQ,QAAQ,UAAU,QAAQ,mBAAmB;IACvD,MAAM,iBAAiB,IAAI,SAAe;AAC1C,YAAQ,aACN,kBACA,MAAM,kBACP;AAED,WAAO,QAAQ,SAAS,EAAE,cAAc,eAAe;KACrD,MAAM,aAAa,gBAAgB;AACjB,kBAAa,SAIrB,YACP,KAAK,UAAU,eAAe,CAAC,CAC/B,WAAW,WAAW;MACrB,MAAM,QAAQ,IAAI,YAAY,YAAY;OACxC,SAAS;OACT,YAAY;OACZ,UAAU;OACV;OACD,CAAC;AACF,cAAQ,cAAc,MAAM;OAC5B;MACJ;AAEF,WAAO,gBAAgB;AACrB,oBAAe,MAAM;AACrB,oBAAe,UAAU;MACzB;;AAGJ,UAAO,WAAW,aAAa,SAAS;IACxC"}
|
package/src/index.js
CHANGED
|
@@ -1,80 +1,63 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import * as vite from
|
|
1
|
+
import { enableProdMode } from "@angular/core";
|
|
2
|
+
import viteAngular from "@analogjs/vite-plugin-angular";
|
|
3
|
+
import * as vite from "vite";
|
|
4
|
+
//#region packages/astro-angular/src/index.ts
|
|
4
5
|
function getRenderer() {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
return {
|
|
7
|
+
name: "@analogjs/astro-angular",
|
|
8
|
+
clientEntrypoint: "@analogjs/astro-angular/client.js",
|
|
9
|
+
serverEntrypoint: "@analogjs/astro-angular/server.js"
|
|
10
|
+
};
|
|
10
11
|
}
|
|
11
12
|
function getViteConfiguration(pluginOptions) {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
name: 'analogjs-astro-client-ngservermode',
|
|
44
|
-
configEnvironment(name) {
|
|
45
|
-
if (name === 'client') {
|
|
46
|
-
return {
|
|
47
|
-
define: {
|
|
48
|
-
ngServerMode: 'false',
|
|
49
|
-
},
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
return undefined;
|
|
53
|
-
},
|
|
54
|
-
},
|
|
55
|
-
],
|
|
56
|
-
ssr: {
|
|
57
|
-
noExternal: ['@angular/**', '@analogjs/**'],
|
|
58
|
-
},
|
|
59
|
-
};
|
|
13
|
+
const isRolldown = !!vite.rolldownVersion;
|
|
14
|
+
return {
|
|
15
|
+
[isRolldown ? "oxc" : "esbuild"]: { ...isRolldown ? { jsx: { development: true } } : { jsxDev: true } },
|
|
16
|
+
optimizeDeps: {
|
|
17
|
+
include: [
|
|
18
|
+
"@angular/platform-browser",
|
|
19
|
+
"@angular/core",
|
|
20
|
+
"@analogjs/astro-angular/client.js"
|
|
21
|
+
],
|
|
22
|
+
exclude: ["@angular/platform-server", "@analogjs/astro-angular/server.js"]
|
|
23
|
+
},
|
|
24
|
+
plugins: [
|
|
25
|
+
viteAngular(pluginOptions),
|
|
26
|
+
{
|
|
27
|
+
name: "@analogjs/astro-angular-platform-server",
|
|
28
|
+
transform(code, id) {
|
|
29
|
+
if (id.includes("platform-server")) {
|
|
30
|
+
code = code.replace(/global\./g, "globalThis.");
|
|
31
|
+
return { code: code.replace("new xhr2.XMLHttpRequest", "new (xhr2.default.XMLHttpRequest || xhr2.default)") };
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
name: "analogjs-astro-client-ngservermode",
|
|
37
|
+
configEnvironment(name) {
|
|
38
|
+
if (name === "client") return { define: { ngServerMode: "false" } };
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
],
|
|
42
|
+
ssr: { noExternal: ["@angular/**", "@analogjs/**"] }
|
|
43
|
+
};
|
|
60
44
|
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}
|
|
76
|
-
},
|
|
77
|
-
},
|
|
78
|
-
};
|
|
45
|
+
function src_default(options) {
|
|
46
|
+
process.env["ANALOG_ASTRO"] = "true";
|
|
47
|
+
return {
|
|
48
|
+
name: "@analogjs/astro-angular",
|
|
49
|
+
hooks: {
|
|
50
|
+
"astro:config:setup": ({ addRenderer, updateConfig }) => {
|
|
51
|
+
addRenderer(getRenderer());
|
|
52
|
+
updateConfig({ vite: getViteConfiguration(options?.vite) });
|
|
53
|
+
},
|
|
54
|
+
"astro:config:done": () => {
|
|
55
|
+
if (process.env.NODE_ENV === "production") enableProdMode();
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
};
|
|
79
59
|
}
|
|
60
|
+
//#endregion
|
|
61
|
+
export { src_default as default };
|
|
62
|
+
|
|
80
63
|
//# sourceMappingURL=index.js.map
|
package/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../packages/astro-angular/src/index.ts"],"sourcesContent":["import viteAngular, { PluginOptions } from '@analogjs/vite-plugin-angular';\nimport { enableProdMode } from '@angular/core';\nimport type { AstroIntegration, AstroRenderer, ViteUserConfig } from 'astro';\nimport * as vite from 'vite';\n\ninterface AngularOptions {\n vite?: PluginOptions;\n}\n\nfunction getRenderer(): AstroRenderer {\n return {\n name: '@analogjs/astro-angular',\n clientEntrypoint: '@analogjs/astro-angular/client.js',\n serverEntrypoint: '@analogjs/astro-angular/server.js',\n };\n}\n\nfunction getViteConfiguration(pluginOptions?: PluginOptions) {\n const isRolldown = !!vite.rolldownVersion;\n return {\n [isRolldown ? 'oxc' : 'esbuild']: {\n ...(isRolldown ? { jsx: { development: true } } : { jsxDev: true }),\n },\n optimizeDeps: {\n include: [\n '@angular/platform-browser',\n '@angular/core',\n '@analogjs/astro-angular/client.js',\n ],\n exclude: [\n '@angular/platform-server',\n '@analogjs/astro-angular/server.js',\n ],\n },\n\n plugins: [\n viteAngular(pluginOptions),\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 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 }) => {\n addRenderer(getRenderer());\n updateConfig({\n vite: getViteConfiguration(\n options?.vite,\n ) as unknown as ViteUserConfig,\n });\n },\n 'astro:config:done': () => {\n if (process.env['NODE_ENV'] === 'production') {\n enableProdMode();\n }\n },\n },\n };\n}\n"],"mappings":";;;;AASA,SAAS,cAA6B;AACpC,QAAO;EACL,MAAM;EACN,kBAAkB;EAClB,kBAAkB;EACnB;;AAGH,SAAS,qBAAqB,eAA+B;CAC3D,MAAM,aAAa,CAAC,CAAC,KAAK;AAC1B,QAAO;GACJ,aAAa,QAAQ,YAAY,EAChC,GAAI,aAAa,EAAE,KAAK,EAAE,aAAa,MAAM,EAAE,GAAG,EAAE,QAAQ,MAAM,EACnE;EACD,cAAc;GACZ,SAAS;IACP;IACA;IACA;IACD;GACD,SAAS,CACP,4BACA,oCACD;GACF;EAED,SAAS;GACP,YAAY,cAAc;GAC1B;IACE,MAAM;IACN,UAAU,MAAc,IAAY;AAClC,SAAI,GAAG,SAAS,kBAAkB,EAAE;AAClC,aAAO,KAAK,QAAQ,aAAa,cAAc;AAE/C,aAAO,EACL,MAAM,KAAK,QACT,2BACA,oDACD,EACF;;;IAKN;GACD;IACE,MAAM;IACN,kBAAkB,MAAc;AAC9B,SAAI,SAAS,SACX,QAAO,EACL,QAAQ,EACN,cAAc,SACf,EACF;;IAKN;GACF;EACD,KAAK,EACH,YAAY,CAAC,eAAe,eAAe,EAC5C;EACF;;AAGH,SAAA,YAAyB,SAA4C;AACnE,SAAQ,IAAI,kBAAkB;AAE9B,QAAO;EACL,MAAM;EACN,OAAO;GACL,uBAAuB,EAAE,aAAa,mBAAmB;AACvD,gBAAY,aAAa,CAAC;AAC1B,iBAAa,EACX,MAAM,qBACJ,SAAS,KACV,EACF,CAAC;;GAEJ,2BAA2B;AACzB,QAAA,QAAA,IAAA,aAAgC,aAC9B,iBAAgB;;GAGrB;EACF"}
|
package/src/server.js
CHANGED
|
@@ -1,63 +1,58 @@
|
|
|
1
|
-
import { ApplicationRef, InjectionToken,
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
1
|
+
import { ApplicationRef, InjectionToken, provideZonelessChangeDetection, reflectComponentType } from "@angular/core";
|
|
2
|
+
import { bootstrapApplication } from "@angular/platform-browser";
|
|
3
|
+
import { BEFORE_APP_SERIALIZED, provideServerRendering, renderApplication, ɵSERVER_CONTEXT } from "@angular/platform-server";
|
|
4
|
+
//#region packages/astro-angular/src/server.ts
|
|
5
|
+
var ANALOG_ASTRO_STATIC_PROPS = new InjectionToken("@analogjs/astro-angular: Static Props w/ Mirror Provider", { factory() {
|
|
6
|
+
return {
|
|
7
|
+
props: {},
|
|
8
|
+
mirror: {}
|
|
9
|
+
};
|
|
10
|
+
} });
|
|
9
11
|
function check(Component, _props, _children) {
|
|
10
|
-
|
|
12
|
+
return !!reflectComponentType(Component);
|
|
11
13
|
}
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
mirror.inputs.some(({ templateName, propName }) => templateName === key || propName === key)) {
|
|
26
|
-
compRef.setInput(key, value);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
compRef.changeDetectorRef.detectChanges();
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
},
|
|
33
|
-
deps: [ApplicationRef, ANALOG_ASTRO_STATIC_PROPS],
|
|
34
|
-
multi: true,
|
|
14
|
+
var STATIC_PROPS_HOOK_PROVIDER = {
|
|
15
|
+
provide: BEFORE_APP_SERIALIZED,
|
|
16
|
+
useFactory: (appRef, { props, mirror }) => {
|
|
17
|
+
return () => {
|
|
18
|
+
const compRef = appRef.components[0];
|
|
19
|
+
if (compRef && props && mirror) {
|
|
20
|
+
for (const [key, value] of Object.entries(props)) if (mirror.inputs.some(({ templateName, propName }) => templateName === key || propName === key)) compRef.setInput(key, value);
|
|
21
|
+
compRef.changeDetectorRef.detectChanges();
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
},
|
|
25
|
+
deps: [ApplicationRef, ANALOG_ASTRO_STATIC_PROPS],
|
|
26
|
+
multi: true
|
|
35
27
|
};
|
|
36
28
|
async function renderToStaticMarkup(Component, props, _children) {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
29
|
+
const mirror = reflectComponentType(Component);
|
|
30
|
+
const appId = mirror?.selector.split(",")[0] || Component.name.toString().toLowerCase();
|
|
31
|
+
const document = `<${appId}></${appId}>`;
|
|
32
|
+
const bootstrap = (context) => bootstrapApplication(Component, { providers: [
|
|
33
|
+
{
|
|
34
|
+
provide: ANALOG_ASTRO_STATIC_PROPS,
|
|
35
|
+
useValue: {
|
|
36
|
+
props,
|
|
37
|
+
mirror
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
STATIC_PROPS_HOOK_PROVIDER,
|
|
41
|
+
provideServerRendering(),
|
|
42
|
+
{
|
|
43
|
+
provide: ɵSERVER_CONTEXT,
|
|
44
|
+
useValue: "analog"
|
|
45
|
+
},
|
|
46
|
+
provideZonelessChangeDetection(),
|
|
47
|
+
...Component.renderProviders || []
|
|
48
|
+
] }, context);
|
|
49
|
+
return { html: await renderApplication(bootstrap, { document }) };
|
|
57
50
|
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
51
|
+
var renderer = {
|
|
52
|
+
check,
|
|
53
|
+
renderToStaticMarkup
|
|
61
54
|
};
|
|
62
|
-
|
|
55
|
+
//#endregion
|
|
56
|
+
export { renderer as default };
|
|
57
|
+
|
|
63
58
|
//# sourceMappingURL=server.js.map
|
package/src/server.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"server.js","
|
|
1
|
+
{"version":3,"file":"server.js","names":[],"sources":["../../../../packages/astro-angular/src/server.ts"],"sourcesContent":["import type {\n ComponentMirror,\n EnvironmentProviders,\n Provider,\n ɵComponentType as ComponentType,\n} from '@angular/core';\nimport {\n ApplicationRef,\n InjectionToken,\n reflectComponentType,\n provideZonelessChangeDetection,\n} from '@angular/core';\nimport {\n BEFORE_APP_SERIALIZED,\n provideServerRendering,\n renderApplication,\n ɵSERVER_CONTEXT,\n} from '@angular/platform-server';\nimport {\n bootstrapApplication,\n type BootstrapContext,\n} 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): boolean {\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): Promise<{ html: string }> {\n const mirror = reflectComponentType(Component);\n const appId =\n mirror?.selector.split(',')[0] || Component.name.toString().toLowerCase();\n const document = `<${appId}></${appId}>`;\n const bootstrap = (context?: BootstrapContext) =>\n bootstrapApplication(\n Component,\n {\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 provideZonelessChangeDetection(),\n ...(Component.renderProviders || []),\n ],\n },\n context,\n );\n\n const html = await renderApplication(bootstrap, {\n document,\n });\n\n return { html };\n}\n\nconst renderer: {\n check: typeof check;\n renderToStaticMarkup: typeof renderToStaticMarkup;\n} = {\n check: check,\n renderToStaticMarkup: renderToStaticMarkup,\n};\nexport default renderer;\n"],"mappings":";;;;AAuBA,IAAM,4BAA4B,IAAI,eAGnC,4DAA4D,EAC7D,UAAU;AACR,QAAO;EAAE,OAAO,EAAE;EAAE,QAAQ,EAAE;EAA8B;GAE/D,CAAC;AAEF,SAAS,MACP,WACA,QACA,WACS;AACT,QAAO,CAAC,CAAC,qBAAqB,UAAU;;AAK1C,IAAM,6BAAuC;CAC3C,SAAS;CACT,aACE,QACA,EACE,OACA,aAKC;AACH,eAAa;GACX,MAAM,UAAU,OAAO,WAAW;AAClC,OAAI,WAAW,SAAS,QAAQ;AAC9B,SAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,CAC9C,KAIE,OAAO,OAAO,MACX,EAAE,cAAc,eACf,iBAAiB,OAAO,aAAa,IACxC,CAED,SAAQ,SAAS,KAAK,MAAM;AAGhC,YAAQ,kBAAkB,eAAe;;;;CAI/C,MAAM,CAAC,gBAAgB,0BAA0B;CACjD,OAAO;CACR;AAED,eAAe,qBACb,WAGA,OACA,WAC2B;CAC3B,MAAM,SAAS,qBAAqB,UAAU;CAC9C,MAAM,QACJ,QAAQ,SAAS,MAAM,IAAI,CAAC,MAAM,UAAU,KAAK,UAAU,CAAC,aAAa;CAC3E,MAAM,WAAW,IAAI,MAAM,KAAK,MAAM;CACtC,MAAM,aAAa,YACjB,qBACE,WACA,EACE,WAAW;EACT;GACE,SAAS;GACT,UAAU;IAAE;IAAO;IAAQ;GAC5B;EACD;EACA,wBAAwB;EACxB;GAAE,SAAS;GAAiB,UAAU;GAAU;EAChD,gCAAgC;EAChC,GAAI,UAAU,mBAAmB,EAAE;EACpC,EACF,EACD,QACD;AAMH,QAAO,EAAE,MAJI,MAAM,kBAAkB,WAAW,EAC9C,UACD,CAAC,EAEa;;AAGjB,IAAM,WAGF;CACK;CACe;CACvB"}
|
package/src/utils.js
CHANGED
|
@@ -1,12 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
//#region packages/astro-angular/src/utils.ts
|
|
2
|
+
function addOutputListener(analogId, outputName, callback, eventListenerOptions = {}) {
|
|
3
|
+
const observer = new MutationObserver((mutations) => {
|
|
4
|
+
const foundTarget = mutations.find((mutation) => mutation.target.dataset?.["analogId"] === analogId)?.target;
|
|
5
|
+
if (foundTarget) {
|
|
6
|
+
foundTarget.addEventListener(outputName, callback, eventListenerOptions);
|
|
7
|
+
observer.disconnect();
|
|
8
|
+
}
|
|
9
|
+
});
|
|
10
|
+
observer.observe(document.body, {
|
|
11
|
+
attributes: true,
|
|
12
|
+
subtree: true
|
|
13
|
+
});
|
|
14
|
+
return () => observer.disconnect();
|
|
11
15
|
}
|
|
16
|
+
//#endregion
|
|
17
|
+
export { addOutputListener };
|
|
18
|
+
|
|
12
19
|
//# sourceMappingURL=utils.js.map
|
package/src/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","
|
|
1
|
+
{"version":3,"file":"utils.js","names":[],"sources":["../../../../packages/astro-angular/src/utils.ts"],"sourcesContent":["export function addOutputListener(\n analogId: string,\n outputName: string,\n callback: (...args: unknown[]) => unknown,\n eventListenerOptions: EventListenerOptions = {},\n): () => void {\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 (): void => observer.disconnect();\n}\n"],"mappings":";AAAA,SAAgB,kBACd,UACA,YACA,UACA,uBAA6C,EAAE,EACnC;CACZ,MAAM,WAAW,IAAI,kBAAkB,cAAc;EACnD,MAAM,cAAc,UAAU,MAC3B,aACE,SAAS,OAAuB,UAAU,gBAAgB,SAC9D,EAAE;AAEH,MAAI,aAAa;AACf,eAAY,iBAAiB,YAAY,UAAU,qBAAqB;AACxE,YAAS,YAAY;;GAEvB;AACF,UAAS,QAAQ,SAAS,MAAM;EAAE,YAAY;EAAM,SAAS;EAAM,CAAC;AAEpE,cAAmB,SAAS,YAAY"}
|
package/README.md
DELETED
|
@@ -1,359 +0,0 @@
|
|
|
1
|
-
# @analogjs/astro-angular
|
|
2
|
-
|
|
3
|
-
[Astro](https://astro.build) is a modern web framework designed for building fast, content-focused websites, compatible with all major frontend frameworks. Though primarily a static site generation (SSG) tool, it can also integrate dynamic components called "islands", which support partial hydration.
|
|
4
|
-
|
|
5
|
-
This package allows rendering [Angular](https://angular.dev) components as islands in Astro.
|
|
6
|
-
|
|
7
|
-
## Setup
|
|
8
|
-
|
|
9
|
-
### Using the Astro CLI
|
|
10
|
-
|
|
11
|
-
Use the `astro add` command to install the integration
|
|
12
|
-
|
|
13
|
-
Using npm:
|
|
14
|
-
|
|
15
|
-
```sh
|
|
16
|
-
npx astro add @analogjs/astro-angular
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
Using pnpm:
|
|
20
|
-
|
|
21
|
-
```sh
|
|
22
|
-
pnpm astro add @analogjs/astro-angular
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
Using yarn:
|
|
26
|
-
|
|
27
|
-
```sh
|
|
28
|
-
yarn astro add @analogjs/astro-angular
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
This command:
|
|
32
|
-
|
|
33
|
-
- Installs the `@analogjs/astro-angular` package.
|
|
34
|
-
- Adds the `@analogjs/astro-angular` integration to the `astro.config.mjs` file.
|
|
35
|
-
- Installs the necessary dependencies to render Angular components on the server and client, and common Angular dependencies, such as `@angular/common`.
|
|
36
|
-
|
|
37
|
-
### Setting up the TypeScript config
|
|
38
|
-
|
|
39
|
-
The integration needs a `tsconfig.app.json` at the root of the project for compilation.
|
|
40
|
-
|
|
41
|
-
Create a `tsconfig.app.json` in the root of the project.
|
|
42
|
-
|
|
43
|
-
```json
|
|
44
|
-
{
|
|
45
|
-
"extends": "./tsconfig.json",
|
|
46
|
-
"compileOnSave": false,
|
|
47
|
-
"compilerOptions": {
|
|
48
|
-
"baseUrl": "./",
|
|
49
|
-
"outDir": "./dist/out-tsc",
|
|
50
|
-
"forceConsistentCasingInFileNames": true,
|
|
51
|
-
"strict": true,
|
|
52
|
-
"noImplicitOverride": true,
|
|
53
|
-
"noPropertyAccessFromIndexSignature": true,
|
|
54
|
-
"noImplicitReturns": true,
|
|
55
|
-
"noFallthroughCasesInSwitch": true,
|
|
56
|
-
"sourceMap": true,
|
|
57
|
-
"declaration": false,
|
|
58
|
-
"downlevelIteration": true,
|
|
59
|
-
"experimentalDecorators": true,
|
|
60
|
-
"moduleResolution": "node",
|
|
61
|
-
"importHelpers": true,
|
|
62
|
-
"noEmit": false,
|
|
63
|
-
"target": "es2020",
|
|
64
|
-
"module": "es2020",
|
|
65
|
-
"lib": ["es2020", "dom"],
|
|
66
|
-
"skipLibCheck": true
|
|
67
|
-
},
|
|
68
|
-
"angularCompilerOptions": {
|
|
69
|
-
"enableI18nLegacyMessageIdFormat": false,
|
|
70
|
-
"strictInjectionParameters": true,
|
|
71
|
-
"strictInputAccessModifiers": true,
|
|
72
|
-
"strictTemplates": true,
|
|
73
|
-
"allowJs": false
|
|
74
|
-
},
|
|
75
|
-
"files": [],
|
|
76
|
-
"include": ["src/**/*.ts", "src/**/*.tsx"]
|
|
77
|
-
}
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
Go to [Defining A Component](#defining-a-component) to set up an Angular component
|
|
81
|
-
to use in an Astro component.
|
|
82
|
-
|
|
83
|
-
## Manual Installation
|
|
84
|
-
|
|
85
|
-
The integration can also be installed manually
|
|
86
|
-
|
|
87
|
-
### Install the Astro Integration
|
|
88
|
-
|
|
89
|
-
```sh
|
|
90
|
-
yarn add @analogjs/astro-angular
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
### Install the necessary Angular dependencies
|
|
94
|
-
|
|
95
|
-
```sh
|
|
96
|
-
npm install @angular/build @angular/{animations,common,compiler-cli,compiler,core,language-service,forms,platform-browser,platform-server} rxjs tslib --save
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
### Adding the integration
|
|
100
|
-
|
|
101
|
-
Add the integration to the `astro.config.mjs`
|
|
102
|
-
|
|
103
|
-
```js
|
|
104
|
-
import { defineConfig } from 'astro/config';
|
|
105
|
-
import angular from '@analogjs/astro-angular';
|
|
106
|
-
|
|
107
|
-
export default defineConfig({
|
|
108
|
-
integrations: [angular()],
|
|
109
|
-
});
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
Go to [Defining A Component](#defining-a-component)
|
|
113
|
-
|
|
114
|
-
## Configuration
|
|
115
|
-
|
|
116
|
-
### Configure Vite Angular Plugin
|
|
117
|
-
|
|
118
|
-
Provide an option object to configure the `@analogjs/vite-plugin-angular` powering this plugin.
|
|
119
|
-
|
|
120
|
-
```js
|
|
121
|
-
import { defineConfig } from 'astro/config';
|
|
122
|
-
import angular from '@analogjs/astro-angular';
|
|
123
|
-
|
|
124
|
-
export default defineConfig({
|
|
125
|
-
integrations: [
|
|
126
|
-
angular({
|
|
127
|
-
vite: {
|
|
128
|
-
inlineStylesExtension: 'scss|sass|less',
|
|
129
|
-
},
|
|
130
|
-
}),
|
|
131
|
-
],
|
|
132
|
-
});
|
|
133
|
-
```
|
|
134
|
-
|
|
135
|
-
### Filtering File Transforms
|
|
136
|
-
|
|
137
|
-
For better compatibility when integrating with other plugins such as [Starlight](https://starlight.astro.build), put the Angular components in a specific folder and use the `transformFilter` callback function to only transform those files.
|
|
138
|
-
|
|
139
|
-
```js
|
|
140
|
-
import { defineConfig } from 'astro/config';
|
|
141
|
-
import angular from '@analogjs/astro-angular';
|
|
142
|
-
|
|
143
|
-
export default defineConfig({
|
|
144
|
-
integrations: [
|
|
145
|
-
angular({
|
|
146
|
-
vite: {
|
|
147
|
-
transformFilter: (_code, id) => {
|
|
148
|
-
return id.includes('src/components'); // <- only transform Angular TypeScript files
|
|
149
|
-
},
|
|
150
|
-
},
|
|
151
|
-
}),
|
|
152
|
-
],
|
|
153
|
-
});
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
### Transforming Packages for SSR Compatibility
|
|
157
|
-
|
|
158
|
-
To ensure Angular libraries are transformed during Astro's SSR process, add them to the `ssr.noExternal` array in the Vite config.
|
|
159
|
-
|
|
160
|
-
```js
|
|
161
|
-
import { defineConfig } from 'astro/config';
|
|
162
|
-
|
|
163
|
-
import angular from '@analogjs/astro-angular';
|
|
164
|
-
|
|
165
|
-
export default defineConfig({
|
|
166
|
-
integrations: [angular()],
|
|
167
|
-
vite: {
|
|
168
|
-
ssr: {
|
|
169
|
-
// transform these packages during SSR. Globs supported
|
|
170
|
-
noExternal: ['@rx-angular/**'],
|
|
171
|
-
},
|
|
172
|
-
},
|
|
173
|
-
});
|
|
174
|
-
```
|
|
175
|
-
|
|
176
|
-
## Defining A Component
|
|
177
|
-
|
|
178
|
-
The Astro Angular integration **only** supports rendering standalone components:
|
|
179
|
-
|
|
180
|
-
```ts
|
|
181
|
-
import { Component, Input } from '@angular/core';
|
|
182
|
-
|
|
183
|
-
@Component({
|
|
184
|
-
selector: 'app-hello',
|
|
185
|
-
template: `
|
|
186
|
-
<p>Hello from Angular!!</p>
|
|
187
|
-
|
|
188
|
-
@if (show()) {
|
|
189
|
-
<p>{{ helpText() }}</p>
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
<button (click)="toggle()">Toggle</button>
|
|
193
|
-
`,
|
|
194
|
-
})
|
|
195
|
-
export class HelloComponent {
|
|
196
|
-
helpText = input('help');
|
|
197
|
-
|
|
198
|
-
show = signal(false);
|
|
199
|
-
|
|
200
|
-
toggle() {
|
|
201
|
-
this.show.update((show) => !show);
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
```
|
|
205
|
-
|
|
206
|
-
Add the Angular component to the Astro component template. This only renders the HTML from the Angular component.
|
|
207
|
-
|
|
208
|
-
```tsx
|
|
209
|
-
---
|
|
210
|
-
import { HelloComponent } from '../components/hello.component';
|
|
211
|
-
|
|
212
|
-
const helpText = "Helping binding";
|
|
213
|
-
---
|
|
214
|
-
|
|
215
|
-
<HelloComponent />
|
|
216
|
-
<HelloComponent helpText="Helping" />
|
|
217
|
-
<HelloComponent helpText={helpText} />
|
|
218
|
-
```
|
|
219
|
-
|
|
220
|
-
To hydrate the component on the client, use one of the Astro [client directives](https://docs.astro.build/en/reference/directives-reference/#client-directives):
|
|
221
|
-
|
|
222
|
-
```tsx
|
|
223
|
-
---
|
|
224
|
-
import { HelloComponent } from '../components/hello.component';
|
|
225
|
-
---
|
|
226
|
-
|
|
227
|
-
<HelloComponent client:visible />
|
|
228
|
-
```
|
|
229
|
-
|
|
230
|
-
Find more information about [Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) in the Astro documentation.
|
|
231
|
-
|
|
232
|
-
### Listening to Component Outputs
|
|
233
|
-
|
|
234
|
-
Outputs can be emitted by the Angular component are forwarded as HTML events to the Astro island.
|
|
235
|
-
To enable this feature, add a client directive and a unique `[data-analog-id]` property to each Angular component:
|
|
236
|
-
|
|
237
|
-
```tsx
|
|
238
|
-
---
|
|
239
|
-
import { HelloComponent } from '../components/hello.component';
|
|
240
|
-
---
|
|
241
|
-
|
|
242
|
-
<HelloComponent client:visible data-analog-id="hello-component-1" />
|
|
243
|
-
```
|
|
244
|
-
|
|
245
|
-
Then, listen to the event in the Astro component using the `addOutputListener` function:
|
|
246
|
-
|
|
247
|
-
```tsx
|
|
248
|
-
---
|
|
249
|
-
import { HelloComponent } from '../components/hello.component';
|
|
250
|
-
---
|
|
251
|
-
|
|
252
|
-
<HelloComponent client:visible data-analog-id="hello-component-1" />
|
|
253
|
-
|
|
254
|
-
<script>
|
|
255
|
-
import { addOutputListener } from '@analogjs/astro-angular/utils';
|
|
256
|
-
|
|
257
|
-
addOutputListener('hello-component-1', 'outputName', (event) => {
|
|
258
|
-
console.log(event.detail);
|
|
259
|
-
});
|
|
260
|
-
</script>
|
|
261
|
-
```
|
|
262
|
-
|
|
263
|
-
## Adding Component Providers
|
|
264
|
-
|
|
265
|
-
Additional providers can be added to a component for static rendering and client hydration.
|
|
266
|
-
|
|
267
|
-
These are `renderProviders` and `clientProviders` respectively. These providers are defined as static arrays on the Component class, and are registered when the component is rendered, and hydrated on the client.
|
|
268
|
-
|
|
269
|
-
```ts
|
|
270
|
-
import { Component, OnInit, inject } from '@angular/core';
|
|
271
|
-
import { provideHttpClient, HttpClient } from '@angular/common/http';
|
|
272
|
-
|
|
273
|
-
interface Todo {
|
|
274
|
-
id: number;
|
|
275
|
-
title: string;
|
|
276
|
-
completed: boolean;
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
@Component({
|
|
280
|
-
selector: 'app-todos',
|
|
281
|
-
template: `
|
|
282
|
-
<h2>Todos</h2>
|
|
283
|
-
|
|
284
|
-
<ul>
|
|
285
|
-
@for (todo of todos(); track todo.id) {
|
|
286
|
-
<li>
|
|
287
|
-
{{ todo.title }}
|
|
288
|
-
</li>
|
|
289
|
-
}
|
|
290
|
-
</ul>
|
|
291
|
-
`,
|
|
292
|
-
})
|
|
293
|
-
export class TodosComponent implements OnInit {
|
|
294
|
-
static clientProviders = [provideHttpClient()];
|
|
295
|
-
static renderProviders = [TodosComponent.clientProviders];
|
|
296
|
-
|
|
297
|
-
http = inject(HttpClient);
|
|
298
|
-
todos = signal<Todo[]>([]);
|
|
299
|
-
|
|
300
|
-
ngOnInit() {
|
|
301
|
-
this.http
|
|
302
|
-
.get<Todo[]>('https://jsonplaceholder.typicode.com/todos')
|
|
303
|
-
.subscribe((todos) => this.todos.set(todos));
|
|
304
|
-
}
|
|
305
|
-
}
|
|
306
|
-
```
|
|
307
|
-
|
|
308
|
-
## Using Components in MDX pages
|
|
309
|
-
|
|
310
|
-
To use components with MDX pages, you must install and configure MDX support by following the Astro integration of [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/mdx/). Your `astro.config.mjs` should now include the `@astrojs/mdx` integration.
|
|
311
|
-
|
|
312
|
-
```js
|
|
313
|
-
import { defineConfig } from 'astro/config';
|
|
314
|
-
import mdx from '@astrojs/mdx';
|
|
315
|
-
import angular from '@analogjs/astro-angular';
|
|
316
|
-
|
|
317
|
-
export default defineConfig({
|
|
318
|
-
integrations: [mdx(), angular()],
|
|
319
|
-
});
|
|
320
|
-
```
|
|
321
|
-
|
|
322
|
-
Create an `.mdx` file inside the `src/pages` directory and add the Angular component import below the frontmatter.
|
|
323
|
-
|
|
324
|
-
```md
|
|
325
|
-
---
|
|
326
|
-
layout: '../../layouts/BlogPost.astro'
|
|
327
|
-
title: 'Using Angular in MDX'
|
|
328
|
-
description: 'Lorem ipsum dolor sit amet'
|
|
329
|
-
pubDate: 'Sep 22 2022'
|
|
330
|
-
---
|
|
331
|
-
|
|
332
|
-
import { HelloComponent } from "../../components/hello.component.ts";
|
|
333
|
-
|
|
334
|
-
<HelloComponent />
|
|
335
|
-
<HelloComponent helpText="Helping" />
|
|
336
|
-
```
|
|
337
|
-
|
|
338
|
-
To hydrate the component on the client, use one of the Astro [client directives](https://docs.astro.build/en/reference/directives-reference/#client-directives):
|
|
339
|
-
|
|
340
|
-
```md
|
|
341
|
-
---
|
|
342
|
-
layout: '../../layouts/BlogPost.astro'
|
|
343
|
-
title: 'Using Angular in MDX'
|
|
344
|
-
description: 'Lorem ipsum dolor sit amet'
|
|
345
|
-
pubDate: 'Sep 22 2022'
|
|
346
|
-
---
|
|
347
|
-
|
|
348
|
-
import { HelloComponent } from "../../components/hello.component.ts";
|
|
349
|
-
|
|
350
|
-
<HelloComponent client:load />
|
|
351
|
-
<HelloComponent client:visible helpText="Helping" />
|
|
352
|
-
```
|
|
353
|
-
|
|
354
|
-
> Important: In `.mdx` files the component import must end with the `.ts` suffix. Otherwise the dynamic import of the component will fail and the component won't be hydrated.
|
|
355
|
-
|
|
356
|
-
## Current Limitations
|
|
357
|
-
|
|
358
|
-
- Only standalone Angular components in version v14.2+ are supported
|
|
359
|
-
- Content projection to island components is not supported
|