@analogjs/astro-angular 3.0.0-alpha.4 → 3.0.0-alpha.41
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/_virtual/_rolldown/runtime.js +33 -0
- package/package.json +35 -12
- package/src/client-ngh.d.ts +2 -0
- package/src/client-ngh.js +45 -0
- package/src/client-ngh.js.map +1 -0
- package/src/client.d.ts +2 -3
- package/src/client.js +41 -50
- package/src/client.js.map +1 -1
- package/src/context.d.ts +11 -0
- package/src/context.js +23 -0
- package/src/context.js.map +1 -0
- package/src/create-component.d.ts +5 -0
- package/src/create-component.js +31 -0
- package/src/create-component.js.map +1 -0
- package/src/id.d.ts +4 -0
- package/src/id.js +9 -0
- package/src/id.js.map +1 -0
- package/src/index.d.ts +15 -6
- package/src/index.js +67 -61
- package/src/index.js.map +1 -1
- package/src/middleware.d.ts +2 -0
- package/src/middleware.js +48 -0
- package/src/middleware.js.map +1 -0
- package/src/server-ngh.d.ts +2 -0
- package/src/server-ngh.js +64 -0
- package/src/server-ngh.js.map +1 -0
- package/src/server-providers.d.ts +8 -0
- package/src/server-providers.js +23 -0
- package/src/server-providers.js.map +1 -0
- package/src/server.d.ts +5 -6
- package/src/server.js +61 -56
- package/src/server.js.map +1 -1
- package/src/ssr-integrity.d.ts +1 -0
- package/src/ssr-integrity.js +10 -0
- package/src/ssr-integrity.js.map +1 -0
- package/src/test-setup.d.ts +3 -0
- package/src/utils.d.ts +1 -2
- package/src/utils.js +17 -10
- package/src/utils.js.map +1 -1
- package/src/vite-env.d.ts +1 -0
- package/README.md +0 -359
- package/src/client.d.ts.map +0 -1
- package/src/index.d.ts.map +0 -1
- package/src/server.d.ts.map +0 -1
- package/src/utils.d.ts.map +0 -1
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { rehype } from "../node_modules/.pnpm/rehype@13.0.2/node_modules/rehype/index.js";
|
|
2
|
+
//#region packages/astro-angular/src/middleware.ts
|
|
3
|
+
var processor = rehype();
|
|
4
|
+
var onRequest = async (_ctx, next) => {
|
|
5
|
+
const response = await next();
|
|
6
|
+
if (response.headers.get("content-type")?.includes("text/html") !== true) return response;
|
|
7
|
+
const responseBody = await response.text();
|
|
8
|
+
const tree = processor.parse(responseBody);
|
|
9
|
+
const stack = [tree];
|
|
10
|
+
const styleTags = [];
|
|
11
|
+
let head = null;
|
|
12
|
+
while (stack.length) {
|
|
13
|
+
const top = stack.pop();
|
|
14
|
+
if (top.type === "element" && top.tagName === "template") continue;
|
|
15
|
+
if (top.type === "element" && top.tagName === "style") {
|
|
16
|
+
if ("ng-app-id" in top.properties) styleTags.push(top);
|
|
17
|
+
continue;
|
|
18
|
+
}
|
|
19
|
+
if (top.type === "element" && top.tagName === "head" && !head) {
|
|
20
|
+
head = top;
|
|
21
|
+
continue;
|
|
22
|
+
}
|
|
23
|
+
if (top.type !== "root" && top.type !== "element") continue;
|
|
24
|
+
for (let index = top.children.length - 1; index >= 0; index--) {
|
|
25
|
+
const child = top.children[index];
|
|
26
|
+
stack.push(child);
|
|
27
|
+
if (child.type === "element" && child.tagName === "style" && "ng-app-id" in child.properties) top.children.splice(index, 1);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
if (head) head.children.push(...styleTags);
|
|
31
|
+
else {
|
|
32
|
+
const head = {
|
|
33
|
+
type: "element",
|
|
34
|
+
children: styleTags,
|
|
35
|
+
properties: {},
|
|
36
|
+
tagName: "head"
|
|
37
|
+
};
|
|
38
|
+
tree.children.unshift(head);
|
|
39
|
+
}
|
|
40
|
+
const newBody = processor.stringify(tree);
|
|
41
|
+
const newResponse = new Response(newBody, response);
|
|
42
|
+
newResponse.headers.set("content-length", Buffer.byteLength(newBody).toFixed(0));
|
|
43
|
+
return newResponse;
|
|
44
|
+
};
|
|
45
|
+
//#endregion
|
|
46
|
+
export { onRequest };
|
|
47
|
+
|
|
48
|
+
//# sourceMappingURL=middleware.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"middleware.js","names":[],"sources":["../../src/middleware.ts"],"sourcesContent":["import type { MiddlewareHandler } from 'astro';\nimport type { Root, RootContent, Element } from 'hast';\nimport { rehype } from 'rehype';\n\nconst processor = rehype();\n\nexport const onRequest: MiddlewareHandler = async (_ctx, next) => {\n const response = await next();\n if (response.headers.get('content-type')?.includes('text/html') !== true) {\n return response;\n }\n\n // Find all <style ng-app-id=\"...\"> tags in the body and move them to the head\n\n const responseBody = await response.text();\n\n const tree = processor.parse(responseBody);\n\n const stack: (Root | RootContent)[] = [tree];\n\n const styleTags: Element[] = [];\n let head: Element | null = null;\n\n while (stack.length) {\n const top = stack.pop()!;\n\n if (top.type === 'element' && top.tagName === 'template') {\n // Templates create a shadow-root, so styles should not be moved outside.\n continue;\n }\n\n if (top.type === 'element' && top.tagName === 'style') {\n if ('ng-app-id' in top.properties) {\n styleTags.push(top);\n }\n continue;\n }\n\n if (top.type === 'element' && top.tagName === 'head' && !head) {\n head = top;\n continue;\n }\n\n if (top.type !== 'root' && top.type !== 'element') {\n continue;\n }\n\n for (let index = top.children.length - 1; index >= 0; index--) {\n const child = top.children[index];\n\n stack.push(child);\n\n if (\n child.type === 'element' &&\n child.tagName === 'style' &&\n 'ng-app-id' in child.properties\n ) {\n top.children.splice(index, 1);\n }\n }\n }\n\n if (head) {\n head.children.push(...styleTags);\n } else {\n const head: Element = {\n type: 'element',\n children: styleTags,\n properties: {},\n tagName: 'head',\n };\n\n tree.children.unshift(head);\n }\n\n const newBody = processor.stringify(tree);\n\n const newResponse = new Response(newBody, response);\n newResponse.headers.set(\n 'content-length',\n Buffer.byteLength(newBody).toFixed(0),\n );\n\n return newResponse;\n};\n"],"mappings":";;AAIA,IAAM,YAAY,QAAQ;AAE1B,IAAa,YAA+B,OAAO,MAAM,SAAS;CAChE,MAAM,WAAW,MAAM,MAAM;AAC7B,KAAI,SAAS,QAAQ,IAAI,eAAe,EAAE,SAAS,YAAY,KAAK,KAClE,QAAO;CAKT,MAAM,eAAe,MAAM,SAAS,MAAM;CAE1C,MAAM,OAAO,UAAU,MAAM,aAAa;CAE1C,MAAM,QAAgC,CAAC,KAAK;CAE5C,MAAM,YAAuB,EAAE;CAC/B,IAAI,OAAuB;AAE3B,QAAO,MAAM,QAAQ;EACnB,MAAM,MAAM,MAAM,KAAK;AAEvB,MAAI,IAAI,SAAS,aAAa,IAAI,YAAY,WAE5C;AAGF,MAAI,IAAI,SAAS,aAAa,IAAI,YAAY,SAAS;AACrD,OAAI,eAAe,IAAI,WACrB,WAAU,KAAK,IAAI;AAErB;;AAGF,MAAI,IAAI,SAAS,aAAa,IAAI,YAAY,UAAU,CAAC,MAAM;AAC7D,UAAO;AACP;;AAGF,MAAI,IAAI,SAAS,UAAU,IAAI,SAAS,UACtC;AAGF,OAAK,IAAI,QAAQ,IAAI,SAAS,SAAS,GAAG,SAAS,GAAG,SAAS;GAC7D,MAAM,QAAQ,IAAI,SAAS;AAE3B,SAAM,KAAK,MAAM;AAEjB,OACE,MAAM,SAAS,aACf,MAAM,YAAY,WAClB,eAAe,MAAM,WAErB,KAAI,SAAS,OAAO,OAAO,EAAE;;;AAKnC,KAAI,KACF,MAAK,SAAS,KAAK,GAAG,UAAU;MAC3B;EACL,MAAM,OAAgB;GACpB,MAAM;GACN,UAAU;GACV,YAAY,EAAE;GACd,SAAS;GACV;AAED,OAAK,SAAS,QAAQ,KAAK;;CAG7B,MAAM,UAAU,UAAU,UAAU,KAAK;CAEzC,MAAM,cAAc,IAAI,SAAS,SAAS,SAAS;AACnD,aAAY,QAAQ,IAClB,kBACA,OAAO,WAAW,QAAQ,CAAC,QAAQ,EAAE,CACtC;AAED,QAAO"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { ID_PROP_NAME } from "./id.js";
|
|
2
|
+
import { getComponentElementTag } from "./create-component.js";
|
|
3
|
+
import { getContext, incrementId } from "./context.js";
|
|
4
|
+
import { provideBootstrapListener } from "./server-providers.js";
|
|
5
|
+
import { APP_ID, DOCUMENT, provideZonelessChangeDetection, reflectComponentType } from "@angular/core";
|
|
6
|
+
import { bootstrapApplication, provideClientHydration } from "@angular/platform-browser";
|
|
7
|
+
import { platformServer, provideServerRendering, renderApplication, ɵSERVER_CONTEXT } from "@angular/platform-server";
|
|
8
|
+
import { readFileSync } from "node:fs";
|
|
9
|
+
import { createRequire } from "node:module";
|
|
10
|
+
//#region packages/astro-angular/src/server-ngh.ts
|
|
11
|
+
var require = createRequire(import.meta.url);
|
|
12
|
+
var jsActionContractScript = void 0;
|
|
13
|
+
var HYDRATION_SCRIPT_ID = "ng-event-dispatch-contract";
|
|
14
|
+
function getHydrationScript() {
|
|
15
|
+
jsActionContractScript ??= `<script type="text/javascript" id="${HYDRATION_SCRIPT_ID}">` + readFileSync(require.resolve("@angular/core/event-dispatch-contract.min.js"), "utf-8") + "<\/script>";
|
|
16
|
+
return jsActionContractScript;
|
|
17
|
+
}
|
|
18
|
+
async function check(Component) {
|
|
19
|
+
return !!reflectComponentType(Component);
|
|
20
|
+
}
|
|
21
|
+
async function renderToStaticMarkup(Component, props, _children, metadata) {
|
|
22
|
+
const mirror = reflectComponentType(Component);
|
|
23
|
+
if (!mirror) throw new Error((metadata?.displayName || "<unknown component>") + " is not an Angular component");
|
|
24
|
+
const elementTag = getComponentElementTag(mirror);
|
|
25
|
+
const ngAppId = props?.["data-analog-id"] || incrementId(getContext(this.result));
|
|
26
|
+
globalThis.ngServerMode = true;
|
|
27
|
+
const platformRef = platformServer();
|
|
28
|
+
const document = platformRef.injector.get(DOCUMENT);
|
|
29
|
+
document.body.innerHTML = `${getHydrationScript()}<${elementTag} ${ID_PROP_NAME}="${ngAppId}"></${elementTag}>`;
|
|
30
|
+
const bootstrap = (context) => bootstrapApplication(Component, { providers: [
|
|
31
|
+
provideBootstrapListener(mirror, props),
|
|
32
|
+
provideServerRendering(),
|
|
33
|
+
{
|
|
34
|
+
provide: ɵSERVER_CONTEXT,
|
|
35
|
+
useValue: "analog"
|
|
36
|
+
},
|
|
37
|
+
provideZonelessChangeDetection(),
|
|
38
|
+
metadata?.hydrate ? provideClientHydration(...Component.hydrationFeatures?.() || []) : [],
|
|
39
|
+
{
|
|
40
|
+
provide: APP_ID,
|
|
41
|
+
useValue: ngAppId
|
|
42
|
+
},
|
|
43
|
+
...Component.renderProviders || []
|
|
44
|
+
] }, context);
|
|
45
|
+
const html = await renderApplication(bootstrap, { document });
|
|
46
|
+
document.documentElement.innerHTML = html;
|
|
47
|
+
let styleTags = "";
|
|
48
|
+
document.head.childNodes.forEach((node) => {
|
|
49
|
+
if (node.nodeName === "STYLE") styleTags += node.outerHTML;
|
|
50
|
+
});
|
|
51
|
+
document.getElementById(HYDRATION_SCRIPT_ID)?.remove();
|
|
52
|
+
const correctedHtml = styleTags + document.body.innerHTML;
|
|
53
|
+
platformRef.destroy();
|
|
54
|
+
return { html: correctedHtml };
|
|
55
|
+
}
|
|
56
|
+
var server_ngh_default = {
|
|
57
|
+
check,
|
|
58
|
+
renderToStaticMarkup,
|
|
59
|
+
renderHydrationScript: () => getHydrationScript()
|
|
60
|
+
};
|
|
61
|
+
//#endregion
|
|
62
|
+
export { server_ngh_default as default };
|
|
63
|
+
|
|
64
|
+
//# sourceMappingURL=server-ngh.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"server-ngh.js","names":[],"sources":["../../src/server-ngh.ts"],"sourcesContent":["import { readFileSync } from 'node:fs';\nimport { createRequire } from 'node:module';\n\nimport type { EnvironmentProviders, Provider, Type } from '@angular/core';\nimport {\n reflectComponentType,\n provideZonelessChangeDetection,\n DOCUMENT,\n APP_ID,\n} from '@angular/core';\nimport {\n provideServerRendering,\n renderApplication,\n ɵSERVER_CONTEXT,\n platformServer,\n} from '@angular/platform-server';\nimport {\n bootstrapApplication,\n type HydrationFeature,\n type HydrationFeatureKind,\n provideClientHydration,\n type BootstrapContext,\n} from '@angular/platform-browser';\nimport type { AstroComponentMetadata, SSRLoadedRendererValue } from 'astro';\nimport { getContext, incrementId, type RendererContext } from './context.ts';\nimport { provideBootstrapListener } from './server-providers.ts';\nimport { ID_PROP_NAME } from './id.ts';\nimport { getComponentElementTag } from './create-component.ts';\n\nconst require = createRequire(import.meta.url);\nlet jsActionContractScript: string | undefined = undefined;\n\nconst HYDRATION_SCRIPT_ID = 'ng-event-dispatch-contract';\n\nfunction getHydrationScript(): string {\n jsActionContractScript ??=\n `<script type=\"text/javascript\" id=\"${HYDRATION_SCRIPT_ID}\">` +\n readFileSync(\n require.resolve('@angular/core/event-dispatch-contract.min.js'),\n 'utf-8',\n ) +\n '</script>';\n return jsActionContractScript;\n}\n\nasync function check(Component: Type<unknown>) {\n return !!reflectComponentType(Component);\n}\n\nasync function renderToStaticMarkup(\n this: RendererContext,\n Component: Type<unknown> & {\n renderProviders?: (Provider | EnvironmentProviders)[];\n hydrationFeatures?: () => HydrationFeature<HydrationFeatureKind>[];\n },\n props: Record<string, unknown>,\n _children: unknown,\n metadata?: AstroComponentMetadata,\n) {\n const mirror = reflectComponentType(Component);\n\n if (!mirror) {\n // This should be unreachable: the `check` function verifies that Component is an Angular component.\n throw new Error(\n (metadata?.displayName || '<unknown component>') +\n ' is not an Angular component',\n );\n }\n\n const elementTag = getComponentElementTag(mirror);\n const ngAppId = props?.[ID_PROP_NAME] || incrementId(getContext(this.result));\n\n // When the platform ref is destroyed, it will reset ngServerMode back to `undefined` if it was not defined when it is\n // created. See https://github.com/angular/angular/blob/2ce0e98f79a02ddc550d00580e8e232cfed3bfb2/packages/platform-server/src/server.ts#L138\n globalThis.ngServerMode = true;\n\n const platformRef = platformServer();\n const document = platformRef.injector.get(DOCUMENT);\n\n // Incremental hydration requires the event dispatch script to be present.\n document.body.innerHTML = `${getHydrationScript()}<${elementTag} ${ID_PROP_NAME}=\"${ngAppId}\"></${elementTag}>`;\n\n const bootstrap = (context?: BootstrapContext) =>\n bootstrapApplication(\n Component,\n {\n providers: [\n provideBootstrapListener(mirror, props),\n provideServerRendering(),\n { provide: ɵSERVER_CONTEXT, useValue: 'analog' },\n provideZonelessChangeDetection(),\n metadata?.hydrate\n ? provideClientHydration(...(Component.hydrationFeatures?.() || []))\n : [],\n {\n provide: APP_ID,\n useValue: ngAppId,\n },\n ...(Component.renderProviders || []),\n ],\n },\n context,\n );\n\n const html = await renderApplication(bootstrap, {\n document,\n });\n\n document.documentElement.innerHTML = html;\n let styleTags = '';\n\n document.head.childNodes.forEach((node) => {\n if (node.nodeName === 'STYLE') {\n styleTags += (node as HTMLElement).outerHTML;\n }\n });\n\n // Remove the hydration script, so only one is present on the page.\n document.getElementById(HYDRATION_SCRIPT_ID)?.remove();\n\n const correctedHtml = styleTags + document.body.innerHTML;\n\n platformRef.destroy();\n\n return { html: correctedHtml };\n}\n\nexport default {\n check,\n renderToStaticMarkup,\n renderHydrationScript: () => getHydrationScript(),\n} satisfies SSRLoadedRendererValue;\n"],"mappings":";;;;;;;;;;AA6BA,IAAM,UAAU,cAAc,OAAO,KAAK,IAAI;AAC9C,IAAI,yBAA6C,KAAA;AAEjD,IAAM,sBAAsB;AAE5B,SAAS,qBAA6B;AACpC,4BACE,sCAAsC,oBAAoB,MAC1D,aACE,QAAQ,QAAQ,+CAA+C,EAC/D,QACD,GACD;AACF,QAAO;;AAGT,eAAe,MAAM,WAA0B;AAC7C,QAAO,CAAC,CAAC,qBAAqB,UAAU;;AAG1C,eAAe,qBAEb,WAIA,OACA,WACA,UACA;CACA,MAAM,SAAS,qBAAqB,UAAU;AAE9C,KAAI,CAAC,OAEH,OAAM,IAAI,OACP,UAAU,eAAe,yBACxB,+BACH;CAGH,MAAM,aAAa,uBAAuB,OAAO;CACjD,MAAM,UAAU,QAAA,qBAAyB,YAAY,WAAW,KAAK,OAAO,CAAC;AAI7E,YAAW,eAAe;CAE1B,MAAM,cAAc,gBAAgB;CACpC,MAAM,WAAW,YAAY,SAAS,IAAI,SAAS;AAGnD,UAAS,KAAK,YAAY,GAAG,oBAAoB,CAAC,GAAG,WAAW,GAAG,aAAa,IAAI,QAAQ,MAAM,WAAW;CAE7G,MAAM,aAAa,YACjB,qBACE,WACA,EACE,WAAW;EACT,yBAAyB,QAAQ,MAAM;EACvC,wBAAwB;EACxB;GAAE,SAAS;GAAiB,UAAU;GAAU;EAChD,gCAAgC;EAChC,UAAU,UACN,uBAAuB,GAAI,UAAU,qBAAqB,IAAI,EAAE,CAAE,GAClE,EAAE;EACN;GACE,SAAS;GACT,UAAU;GACX;EACD,GAAI,UAAU,mBAAmB,EAAE;EACpC,EACF,EACD,QACD;CAEH,MAAM,OAAO,MAAM,kBAAkB,WAAW,EAC9C,UACD,CAAC;AAEF,UAAS,gBAAgB,YAAY;CACrC,IAAI,YAAY;AAEhB,UAAS,KAAK,WAAW,SAAS,SAAS;AACzC,MAAI,KAAK,aAAa,QACpB,cAAc,KAAqB;GAErC;AAGF,UAAS,eAAe,oBAAoB,EAAE,QAAQ;CAEtD,MAAM,gBAAgB,YAAY,SAAS,KAAK;AAEhD,aAAY,SAAS;AAErB,QAAO,EAAE,MAAM,eAAe;;AAGhC,IAAA,qBAAe;CACb;CACA;CACA,6BAA6B,oBAAoB;CAClD"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type ComponentMirror, type Provider } from "@angular/core";
|
|
2
|
+
/**
|
|
3
|
+
* Provide bootstrap listeners to ensure the rendered state matches the settled component state after applying component inputs.
|
|
4
|
+
* @param mirror The component mirror, to detect component inputs
|
|
5
|
+
* @param props Properties applied to the component in the Astro file
|
|
6
|
+
* @returns A providers array for the server renderer
|
|
7
|
+
*/
|
|
8
|
+
export declare function provideBootstrapListener(mirror: ComponentMirror<unknown>, props: Record<string, unknown>): Provider[];
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { APP_BOOTSTRAP_LISTENER } from "@angular/core";
|
|
2
|
+
//#region packages/astro-angular/src/server-providers.ts
|
|
3
|
+
/**
|
|
4
|
+
* Provide bootstrap listeners to ensure the rendered state matches the settled component state after applying component inputs.
|
|
5
|
+
* @param mirror The component mirror, to detect component inputs
|
|
6
|
+
* @param props Properties applied to the component in the Astro file
|
|
7
|
+
* @returns A providers array for the server renderer
|
|
8
|
+
*/
|
|
9
|
+
function provideBootstrapListener(mirror, props) {
|
|
10
|
+
return [{
|
|
11
|
+
provide: APP_BOOTSTRAP_LISTENER,
|
|
12
|
+
useValue: (compRef) => {
|
|
13
|
+
if (props) {
|
|
14
|
+
for (const [key, value] of Object.entries(props)) if (mirror.inputs.some(({ templateName }) => templateName === key)) compRef.setInput(key, value);
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
multi: true
|
|
18
|
+
}];
|
|
19
|
+
}
|
|
20
|
+
//#endregion
|
|
21
|
+
export { provideBootstrapListener };
|
|
22
|
+
|
|
23
|
+
//# sourceMappingURL=server-providers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"server-providers.js","names":[],"sources":["../../src/server-providers.ts"],"sourcesContent":["import {\n APP_BOOTSTRAP_LISTENER,\n type ComponentMirror,\n type ComponentRef,\n type Provider,\n} from '@angular/core';\n\n/**\n * Provide bootstrap listeners to ensure the rendered state matches the settled component state after applying component inputs.\n * @param mirror The component mirror, to detect component inputs\n * @param props Properties applied to the component in the Astro file\n * @returns A providers array for the server renderer\n */\nexport function provideBootstrapListener(\n mirror: ComponentMirror<unknown>,\n props: Record<string, unknown>,\n): Provider[] {\n return [\n {\n provide: APP_BOOTSTRAP_LISTENER,\n useValue: (compRef: ComponentRef<unknown>) => {\n if (props) {\n for (const [key, value] of Object.entries(props)) {\n if (\n mirror.inputs.some(({ templateName }) => templateName === key)\n ) {\n compRef.setInput(key, value);\n }\n }\n }\n },\n multi: true,\n },\n ];\n}\n"],"mappings":";;;;;;;;AAaA,SAAgB,yBACd,QACA,OACY;AACZ,QAAO,CACL;EACE,SAAS;EACT,WAAW,YAAmC;AAC5C,OAAI;SACG,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,CAC9C,KACE,OAAO,OAAO,MAAM,EAAE,mBAAmB,iBAAiB,IAAI,CAE9D,SAAQ,SAAS,KAAK,MAAM;;;EAKpC,OAAO;EACR,CACF"}
|
package/src/server.d.ts
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
import type { EnvironmentProviders, Provider, ɵComponentType as ComponentType } from
|
|
1
|
+
import type { EnvironmentProviders, Provider, ɵComponentType as ComponentType } from "@angular/core";
|
|
2
2
|
declare function check(Component: ComponentType<unknown>, _props: Record<string, unknown>, _children: unknown): boolean;
|
|
3
3
|
declare function renderToStaticMarkup(Component: ComponentType<unknown> & {
|
|
4
|
-
|
|
4
|
+
renderProviders: (Provider | EnvironmentProviders)[];
|
|
5
5
|
}, props: Record<string, unknown>, _children: unknown): Promise<{
|
|
6
|
-
|
|
6
|
+
html: string;
|
|
7
7
|
}>;
|
|
8
8
|
declare const renderer: {
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
check: typeof check;
|
|
10
|
+
renderToStaticMarkup: typeof renderToStaticMarkup;
|
|
11
11
|
};
|
|
12
12
|
export default renderer;
|
|
13
|
-
//# sourceMappingURL=server.d.ts.map
|
package/src/server.js
CHANGED
|
@@ -1,63 +1,68 @@
|
|
|
1
|
-
import { ApplicationRef,
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
1
|
+
import { ApplicationRef, DOCUMENT, InjectionToken, provideZonelessChangeDetection, reflectComponentType } from "@angular/core";
|
|
2
|
+
import { bootstrapApplication } from "@angular/platform-browser";
|
|
3
|
+
import { BEFORE_APP_SERIALIZED, platformServer, 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 platformRef = platformServer();
|
|
32
|
+
const document = platformRef.injector.get(DOCUMENT);
|
|
33
|
+
document.body.innerHTML = `<${appId}></${appId}>`;
|
|
34
|
+
const bootstrap = (context) => bootstrapApplication(Component, { providers: [
|
|
35
|
+
{
|
|
36
|
+
provide: ANALOG_ASTRO_STATIC_PROPS,
|
|
37
|
+
useValue: {
|
|
38
|
+
props,
|
|
39
|
+
mirror
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
STATIC_PROPS_HOOK_PROVIDER,
|
|
43
|
+
provideServerRendering(),
|
|
44
|
+
{
|
|
45
|
+
provide: ɵSERVER_CONTEXT,
|
|
46
|
+
useValue: "analog"
|
|
47
|
+
},
|
|
48
|
+
provideZonelessChangeDetection(),
|
|
49
|
+
...Component.renderProviders || []
|
|
50
|
+
] }, context);
|
|
51
|
+
const html = await renderApplication(bootstrap, { document });
|
|
52
|
+
document.documentElement.innerHTML = html;
|
|
53
|
+
let styleTags = "";
|
|
54
|
+
document.head.childNodes.forEach((node) => {
|
|
55
|
+
if (node.nodeName === "STYLE") styleTags += node.outerHTML;
|
|
56
|
+
});
|
|
57
|
+
const correctedHtml = styleTags + document.body.innerHTML;
|
|
58
|
+
platformRef.destroy();
|
|
59
|
+
return { html: correctedHtml };
|
|
57
60
|
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
+
var renderer = {
|
|
62
|
+
check,
|
|
63
|
+
renderToStaticMarkup
|
|
61
64
|
};
|
|
62
|
-
|
|
65
|
+
//#endregion
|
|
66
|
+
export { renderer as default };
|
|
67
|
+
|
|
63
68
|
//# 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":["../../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 DOCUMENT,\n} from '@angular/core';\nimport {\n BEFORE_APP_SERIALIZED,\n provideServerRendering,\n renderApplication,\n ɵSERVER_CONTEXT,\n platformServer,\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\n const platformRef = platformServer();\n const document = platformRef.injector.get(DOCUMENT);\n document.body.innerHTML = `<${appId}></${appId}>`;\n\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 document.documentElement.innerHTML = html;\n let styleTags = '';\n\n document.head.childNodes.forEach((node) => {\n if (node.nodeName === 'STYLE') {\n styleTags += (node as HTMLElement).outerHTML;\n }\n });\n\n const correctedHtml = styleTags + document.body.innerHTML;\n\n platformRef.destroy();\n\n return { html: correctedHtml };\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":";;;;AAyBA,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;CAE3E,MAAM,cAAc,gBAAgB;CACpC,MAAM,WAAW,YAAY,SAAS,IAAI,SAAS;AACnD,UAAS,KAAK,YAAY,IAAI,MAAM,KAAK,MAAM;CAE/C,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;CAEH,MAAM,OAAO,MAAM,kBAAkB,WAAW,EAC9C,UACD,CAAC;AAEF,UAAS,gBAAgB,YAAY;CACrC,IAAI,YAAY;AAEhB,UAAS,KAAK,WAAW,SAAS,SAAS;AACzC,MAAI,KAAK,aAAa,QACpB,cAAc,KAAqB;GAErC;CAEF,MAAM,gBAAgB,YAAY,SAAS,KAAK;AAEhD,aAAY,SAAS;AAErB,QAAO,EAAE,MAAM,eAAe;;AAGhC,IAAM,WAGF;CACK;CACe;CACvB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function ensureSsrIntegrityMarker(): void;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ɵCLIENT_RENDER_MODE_FLAG, ɵSSR_CONTENT_INTEGRITY_MARKER } from "@angular/core";
|
|
2
|
+
//#region packages/astro-angular/src/ssr-integrity.ts
|
|
3
|
+
function ensureSsrIntegrityMarker() {
|
|
4
|
+
if (document.body.firstChild?.nodeType !== Node.COMMENT_NODE || document.body.firstChild.textContent !== ɵSSR_CONTENT_INTEGRITY_MARKER) document.body.prepend(document.createComment(ɵSSR_CONTENT_INTEGRITY_MARKER));
|
|
5
|
+
if (!document.body.hasAttribute(ɵCLIENT_RENDER_MODE_FLAG)) document.body.setAttribute(ɵCLIENT_RENDER_MODE_FLAG, "");
|
|
6
|
+
}
|
|
7
|
+
//#endregion
|
|
8
|
+
export { ensureSsrIntegrityMarker };
|
|
9
|
+
|
|
10
|
+
//# sourceMappingURL=ssr-integrity.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ssr-integrity.js","names":[],"sources":["../../src/ssr-integrity.ts"],"sourcesContent":["import {\n ɵCLIENT_RENDER_MODE_FLAG,\n ɵSSR_CONTENT_INTEGRITY_MARKER,\n} from '@angular/core';\n\nexport function ensureSsrIntegrityMarker(): void {\n // Insert Angular client hydration marker\n // See https://github.com/angular/angular/issues/67785\n if (\n document.body.firstChild?.nodeType !== Node.COMMENT_NODE ||\n document.body.firstChild.textContent !== ɵSSR_CONTENT_INTEGRITY_MARKER\n ) {\n document.body.prepend(\n document.createComment(ɵSSR_CONTENT_INTEGRITY_MARKER),\n );\n }\n\n if (!document.body.hasAttribute(ɵCLIENT_RENDER_MODE_FLAG)) {\n document.body.setAttribute(ɵCLIENT_RENDER_MODE_FLAG, '');\n }\n}\n"],"mappings":";;AAKA,SAAgB,2BAAiC;AAG/C,KACE,SAAS,KAAK,YAAY,aAAa,KAAK,gBAC5C,SAAS,KAAK,WAAW,gBAAgB,8BAEzC,UAAS,KAAK,QACZ,SAAS,cAAc,8BAA8B,CACtD;AAGH,KAAI,CAAC,SAAS,KAAK,aAAa,yBAAyB,CACvD,UAAS,KAAK,aAAa,0BAA0B,GAAG"}
|
package/src/utils.d.ts
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export declare function addOutputListener(analogId: string, outputName: string, callback: (...args:
|
|
2
|
-
//# sourceMappingURL=utils.d.ts.map
|
|
1
|
+
export declare function addOutputListener(analogId: string, outputName: string, callback: (...args: unknown[]) => unknown, eventListenerOptions?: EventListenerOptions): () => void;
|
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":["../../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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/// <reference types="vite/client" />
|