6801091975

Committed 08 Nov 2023 04:23PM UTC coverage: 82.426% (-2.4%) from 84.837%

Build # 6801091975

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #296 from fastrodev/react

feat: add custom layout

Run Details

129 of 165 branches covered (0.0%)

Branch coverage included in aggregate %.

21 of 64 new or added lines in 1 file covered. (32.81%)

1 existing line in 1 file now uncovered.

992 of 1195 relevant lines covered (83.01%)

22.27 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

65.34

/http/render.tsx

// deno-lint-ignore-file
import react from "react";
import { createElement, renderToReadableStream } from "./deps.ts";
import {
  BUILD_ID,
  checkReferer,
  Component,
  Fastro,
  FunctionComponent,
  isPageComponent,
  PageComponent,
  RenderOptions,
} from "./server.ts";
import {
  clean,
  extractOriginalString,
  importCryptoKey,
  keyType,
  keyUsages,
  reverseString,
} from "../crypto/key.ts";
import { encryptData } from "../crypto/encrypt.ts";

function isJSX(res: JSX.Element) {
  return res && res.props != undefined && res.type != undefined;
}

export async function createInitScript(server: Fastro, props?: any) {
  let exportedKeyString = server.record["exportedKeyString"] as string;
  exportedKeyString = clean(exportedKeyString);
  exportedKeyString = reverseString(exportedKeyString);
  exportedKeyString = extractOriginalString(
    exportedKeyString,
    server.record["salt"],
  ) as string;
  exportedKeyString = atob(exportedKeyString);
  const importedKey = await importCryptoKey(
    exportedKeyString,
    keyType,
    keyUsages,
  );

  const env = Deno.env.get("ENV") === undefined
    ? ""
    : `window.__ENV__ = "DEVELOPMENT";`;

  const plaintext = JSON.stringify(props);
  const encryptedData = await encryptData(importedKey, plaintext);
  return `${env}window.__INITIAL_DATA__ = "${encryptedData}";`;
}

export class Render {
  #options: RenderOptions;
  #element: Component;
  #nest: Record<string, any>;
  #development: boolean;
  #server: Fastro;
  #staticPath: string;
  #reqUrl?: string;

  constructor(
    element: Component,
    options: RenderOptions,
    nest: Record<string, any>,
    server: Fastro,
    request?: Request,
  ) {
    this.#options = this.#initOptions(options);
    this.#element = element;
    this.#nest = nest;
    this.#development = server.getDevelopmentStatus();
    this.#server = server;
    this.#staticPath = `${this.#server.getStaticPath()}/js`;
    this.#reqUrl = request?.url;
  }

  #initOptions = (opt: RenderOptions) => {
    opt.status = opt.status ?? 200;
    opt.pageFolder = opt.pageFolder ?? "pages";
    opt.cache = opt.cache ?? true;
    opt.development = opt.development ?? true;
    opt.html = opt.html ?? {};
    opt.html.head = opt.html.head ?? {
      meta: [],
      script: [],
      link: [],
    };

    const meta = [{ charset: "utf-8" }, {
      name: "viewport",
      content: "width=device-width, initial-scale=1.0",
    }];
    if (opt.html.head.descriptions) {
      meta.push({
        name: "description",
        content: opt.html.head.descriptions,
      });
    }
    opt.html.head.meta = opt.html.head.meta ?? meta;
    opt.html.head.script = opt.html.head.script ?? [];

    opt.html.body = opt.html.body ?? {
      script: [],
      root: {},
    };

    const options = { ...opt };
    return this.#options = options;
  };

  #initHtml = async (element: Component, html?: any) => {
    const el = isJSX(element as JSX.Element)
      ? element as JSX.Element
      : createElement(
        element as FunctionComponent,
        this.#options.props,
      );
    if (!html) return el;

    const RootElement = () => {
      if (this.#options.theme && this.#options.themeColor === "auto") {
        return (
          <div
            id="root"
            className={this.#options.html?.body?.root.class}
            style={this.#options.html?.body?.root.style}
            data-color-mode="auto"
            data-light-theme="light"
            data-dark-theme="dark"
          >
            {el}
          </div>
        );
      }

      if (this.#options.theme && this.#options.themeColor === "dark") {
        return (
          <div
            id="root"
            className={this.#options.html?.body?.root.class}
            style={this.#options.html?.body?.root.style}
            data-dark-theme="dark"
          >
            {el}
          </div>
        );
      }

      if (this.#options.theme && this.#options.themeColor === "light") {
        return (
          <div
            id="root"
            className={this.#options.html?.body?.root.class}
            style={this.#options.html?.body?.root.style}
            data-dark-theme="light"
          >
            {el}
          </div>
        );
      }

      return (
        <div
          id="root"
          className={this.#options.html?.body?.root.class}
          style={this.#options.html?.body?.root.style}
        >
          {el}
        </div>
      );
    };

    return (
      <html
        lang={this.#options.html?.lang}
        className={this.#options.html?.class}
        style={this.#options.html?.style}
      >
        <head>
          {this.#options.html?.head?.title && (
            <title>{this.#options.html?.head?.title}</title>
          )}
          {this.#options.html?.head?.meta &&
            this.#options.html?.head?.meta.map((m) => (
              <meta
                property={m.property}
                name={m.name}
                content={m.content}
                itemProp={m.itemprop}
                charSet={m.charset}
              />
            ))}
          {this.#options.html?.head?.link &&
            this.#options.html?.head?.link.map((l) => (
              <link
                href={l.href}
                integrity={l.integrity}
                rel={l.rel}
                as={l.as}
                onLoad={l.onload}
                media={l.media}
                crossOrigin={l.crossorigin}
              >
              </link>
            ))}

          {this.#options.html?.head?.noScriptLink &&
            (
              <noscript>
                <link
                  rel={this.#options.html?.head?.noScriptLink.rel}
                  href={this.#options.html?.head?.noScriptLink.href}
                >
                </link>
              </noscript>
            )}

          {this.#options.html?.head?.headStyle &&
            (
              <style>
                {this.#options.html?.head?.headStyle}
              </style>
            )}
          {this.#options.html?.head?.script &&
            this.#options.html?.head?.script.map((s) => (
              <script
                src={s.src}
                type={s.type}
                crossOrigin={s.crossorigin}
                nonce={s.nonce}
                integrity={s.integrity}
              />
            ))}

          {this.#options.html?.head?.headScript &&
            (
              <script>
                {this.#options.html?.head?.headScript}
              </script>
            )}
        </head>
        {this.#options.theme
          ? (
            <body
              data-bs-theme={this.#options.html?.body?.theme ?? "dark"}
              className={this.#options.html?.body?.class}
              style={this.#options.html?.body?.style}
            >
              <RootElement />
              {this.#options.props && (
                <script
                  dangerouslySetInnerHTML={{
                    __html: await createInitScript(
                      this.#server,
                      this.#options.props,
                    ),
                  }}
                />
              )}
              {this.#options.html?.body?.script &&
                this.#options.html?.body?.script.map((s) => (
                  <script
                    src={s.src}
                    type={s.type}
                    crossOrigin={s.crossorigin}
                    nonce={s.nonce}
                  />
                ))}
            </body>
          )
          : (
            <body
              className={this.#options.html?.body?.class}
              style={this.#options.html?.body?.style}
            >
              <RootElement />
              {this.#options.props && (
                <script
                  dangerouslySetInnerHTML={{
                    __html: await createInitScript(
                      this.#server,
                      this.#options.props,
                    ),
                  }}
                />
              )}
              {this.#options.html?.body?.script &&
                this.#options.html?.body?.script.map((s) => (
                  <script
                    src={s.src}
                    type={s.type}
                    crossOrigin={s.crossorigin}
                    nonce={s.nonce}
                  />
                ))}
            </body>
          )}
      </html>
    );
  };

  #refreshJs = (refreshUrl: string, buildId: string) => {
    return `const es = new EventSource('${refreshUrl}');
window.addEventListener("beforeunload", (event) => {
  es.close();
});
es.onmessage = function(e) {
  if (e.data !== "${buildId}") {
    location.reload();
  };
};`;
  };

  #handleComponentLayout = async (c: FunctionComponent, hydrate = true) => {
    const init = await createInitScript(this.#server, this.#options.props);
    const refreshPath = `${this.#staticPath}/refresh.js`;

    if (!hydrate) return <></>;
    return (
      <>
        {this.#development ? <script src={refreshPath} /> : ""}
        <script
          dangerouslySetInnerHTML={{
            __html: init,
          }}
        />
        <script src={`${this.#staticPath}/${c.name.toLocaleLowerCase()}.js`} />
      </>
    );
  };

  async #handleLayout(element: Component) {
    if (this.#options.layout) {
      const el = isJSX(element as JSX.Element)
        ? element as JSX.Element
        : createElement(
          element as FunctionComponent,
          this.#options.props,
        );

      const hydrateScript = await this.#handleComponentLayout(
        element as FunctionComponent,
        this.#options.hydrate,
      );

      const root = (
        <>
          <div id="root">
            {el}
          </div>
          {hydrateScript}
        </>
      );

      const props = { children: root };
      return this.#options.layout(props);
    }
  }

  #createHTML = async (component: Component, cached?: boolean) => {
    let compID = "";
    this.#handleDevelopment();
    if (isJSX(component as JSX.Element)) {
      return this.#handleJSXElement(compID, component, cached);
    }

    const is = isPageComponent(component as PageComponent);
    const pc = component as PageComponent;
    const c = is ? pc.component : component as FunctionComponent;
    const e = is ? pc.component : this.#element;

    if (isJSX(c as JSX.Element)) {
      return this.#handleJSXElement(compID, c, cached);
    }
    const fc = c as FunctionComponent;
    compID = `${fc.name}${this.#reqUrl}`;
    if (cached && this.#nest[compID]) return this.#nest[compID];
    if (this.#options.layout) {
      const htmlLayout = this.#handleLayout(component);
      return this.#nest[compID] = htmlLayout;
    }

    await this.#handleComponent(fc, this.#options.hydrate);
    const html = await this.#initHtml(e, this.#options.html);
    return this.#nest[compID] = html;
  };

  #handleJSXElement = async (
    compID: string,
    component: Component,
    cached?: boolean,
  ) => {
    compID = `default${this.#reqUrl}`;
    if (cached && this.#nest[compID]) return this.#nest[compID];
    let html = await this.#initHtml(component, this.#options.html);
    return this.#nest[compID] = html;
  };

  #handleComponent = async (c: FunctionComponent, hydrate = true) => {
    if (!this.#options.html?.body) return;
    if (hydrate) {
      this.#options.html?.body.script?.push({
        src: `${this.#staticPath}/${c.name.toLocaleLowerCase()}.js`,
      });
    }
  };

  #handleDevelopment = () => {
    if (!this.#development) return;
    const refreshPath = `${this.#staticPath}/refresh.js`;
    this.#server.push(
      "GET",
      refreshPath,
      () =>
        new Response(this.#refreshJs(`/___refresh___`, BUILD_ID), {
          headers: {
            "Content-Type": "application/javascript",
          },
        }),
    );

    if (this.#options.html?.head?.script) {
      this.#options.html?.head.script?.push({
        src: refreshPath,
      });
    }
  };

  render = async () => {
    const html = await this.#createHTML(
      this.#element,
      this.#options.cache,
    );

    const defaultOnError = (error: unknown) => {
      console.error(error);
    };

    const onError = this.#options.onError ?? defaultOnError;
    const signal = this.#options.abortController?.signal;
    const stream: ReadableStream = await renderToReadableStream(html, {
      signal,
      onError,
    });

    return new Response(
      stream,
      {
        status: this.#options.status,
        headers: {
          "content-type": "text/html",
        },
      },
    );
  };
}

1	// deno-lint-ignore-file	1✔
2	import react from "react";
3	import { createElement, renderToReadableStream } from "./deps.ts";	1✔
4	import {	1✔
5	BUILD_ID,	1✔
6	checkReferer,
7	Component,
8	Fastro,
9	FunctionComponent,
10	isPageComponent,	1✔
11	PageComponent,
12	RenderOptions,
13	} from "./server.ts";	1✔
14	import {	1✔
15	clean,	1✔
16	extractOriginalString,	1✔
17	importCryptoKey,	1✔
18	keyType,	1✔
19	keyUsages,	1✔
20	reverseString,	1✔
21	} from "../crypto/key.ts";	1✔
22	import { encryptData } from "../crypto/encrypt.ts";	1✔
23
24	function isJSX(res: JSX.Element) {	34✔
25	return res && res.props != undefined && res.type != undefined;	34✔
26	}	34✔
27
28	export async function createInitScript(server: Fastro, props?: any) {	1✔
29	let exportedKeyString = server.record["exportedKeyString"] as string;	3✔
30	exportedKeyString = clean(exportedKeyString);	3✔
31	exportedKeyString = reverseString(exportedKeyString);	3✔
32	exportedKeyString = extractOriginalString(	3✔
33	exportedKeyString,	3✔
34	server.record["salt"],	3✔
35	) as string;
36	exportedKeyString = atob(exportedKeyString);	3✔
37	const importedKey = await importCryptoKey(	3✔
38	exportedKeyString,	3✔
39	keyType,	3✔
40	keyUsages,	3✔
41	);
42
NEW 43	const env = Deno.env.get("ENV") === undefined	×
NEW 44	? ""	×
NEW 45	: `window.__ENV__ = "DEVELOPMENT";`;	×
46
47	const plaintext = JSON.stringify(props);	3✔
48	const encryptedData = await encryptData(importedKey, plaintext);	3✔
49	return `${env}window.__INITIAL_DATA__ = "${encryptedData}";`;	3✔
50	}	3✔
51
52	export class Render {	1✔
53	#options: RenderOptions;	13✔
54	#element: Component;	13✔
55	#nest: Record<string, any>;	13✔
56	#development: boolean;	13✔
57	#server: Fastro;	13✔
58	#staticPath: string;	13✔
59	#reqUrl?: string;	13✔
60
61	constructor(	13✔
62	element: Component,	13✔
63	options: RenderOptions,	13✔
64	nest: Record<string, any>,	13✔
65	server: Fastro,	13✔
66	request?: Request,	13✔
67	) {	13✔
68	this.#options = this.#initOptions(options);	25✔
69	this.#element = element;	25✔
70	this.#nest = nest;	25✔
71	this.#development = server.getDevelopmentStatus();	25✔
72	this.#server = server;	25✔
73	this.#staticPath = `${this.#server.getStaticPath()}/js`;	25✔
74	this.#reqUrl = request?.url;	25✔
75	}	25✔
76
77	#initOptions = (opt: RenderOptions) => {	13✔
78	opt.status = opt.status ?? 200;	25✔
79	opt.pageFolder = opt.pageFolder ?? "pages";	25✔
80	opt.cache = opt.cache ?? true;	25✔
81	opt.development = opt.development ?? true;	25✔
82	opt.html = opt.html ?? {};	25✔
83	opt.html.head = opt.html.head ?? {	25✔
84	meta: [],	30✔
85	script: [],	30✔
86	link: [],	30✔
87	};	25✔
88
89	const meta = [{ charset: "utf-8" }, {	125✔
90	name: "viewport",	25✔
91	content: "width=device-width, initial-scale=1.0",	25✔
92	}];	50✔
93	if (opt.html.head.descriptions) {	25✔
94	meta.push({	26✔
95	name: "description",	26✔
96	content: opt.html.head.descriptions,	26✔
97	});	26✔
98	}	26✔
99	opt.html.head.meta = opt.html.head.meta ?? meta;	25✔
100	opt.html.head.script = opt.html.head.script ?? [];	25✔
101
102	opt.html.body = opt.html.body ?? {	25✔
103	script: [],	25✔
104	root: {},	25✔
105	};	25✔
106
107	const options = { ...opt };	75✔
108	return this.#options = options;	25✔
109	};	13✔
110
111	#initHtml = async (element: Component, html?: any) => {	13✔
112	const el = isJSX(element as JSX.Element)	23✔
113	? element as JSX.Element	23✔
114	: createElement(	23✔
115	element as FunctionComponent,	23✔
116	this.#options.props,	23✔
117	);
118	if (!html) return el;	×
119
120	const RootElement = () => {	23✔
121	if (this.#options.theme && this.#options.themeColor === "auto") {	×
122	return (	×
123	<div	×
124	id="root"	×
125	className={this.#options.html?.body?.root.class}	×
126	style={this.#options.html?.body?.root.style}	×
127	data-color-mode="auto"	×
128	data-light-theme="light"	×
129	data-dark-theme="dark"	×
130	>
131	{el}	×
132	</div>
133	);
134	}	×
135
136	if (this.#options.theme && this.#options.themeColor === "dark") {	×
137	return (	×
138	<div	×
139	id="root"	×
140	className={this.#options.html?.body?.root.class}	×
141	style={this.#options.html?.body?.root.style}	×
142	data-dark-theme="dark"	×
143	>
144	{el}	×
145	</div>
146	);
147	}	×
148
149	if (this.#options.theme && this.#options.themeColor === "light") {	×
150	return (	×
151	<div	×
152	id="root"	×
153	className={this.#options.html?.body?.root.class}	×
154	style={this.#options.html?.body?.root.style}	×
155	data-dark-theme="light"	×
156	>
157	{el}	×
158	</div>
159	);
160	}	×
161
162	return (	35✔
163	<div	35✔
164	id="root"	35✔
165	className={this.#options.html?.body?.root.class}	35✔
166	style={this.#options.html?.body?.root.style}	35✔
167	>
168	{el}	35✔
169	</div>
170	);
171	};	23✔
172
173	return (	23✔
174	<html	23✔
175	lang={this.#options.html?.lang}	23✔
176	className={this.#options.html?.class}	23✔
177	style={this.#options.html?.style}	23✔
178	>
179	<head>	23✔
180	{this.#options.html?.head?.title && (	23✔
181	<title>{this.#options.html?.head?.title}</title>	47✔
182	)}
183	{this.#options.html?.head?.meta &&	23✔
184	this.#options.html?.head?.meta.map((m) => (	23✔
185	<meta	23✔
186	property={m.property}	38✔
187	name={m.name}	38✔
188	content={m.content}	38✔
189	itemProp={m.itemprop}	38✔
190	charSet={m.charset}	38✔
191	/>
192	))}
193	{this.#options.html?.head?.link &&	23✔
194	this.#options.html?.head?.link.map((l) => (	23✔
195	<link	23✔
196	href={l.href}	28✔
197	integrity={l.integrity}	28✔
198	rel={l.rel}	28✔
199	as={l.as}	28✔
200	onLoad={l.onload}	28✔
201	media={l.media}	28✔
202	crossOrigin={l.crossorigin}	28✔
203	>
204	</link>
205	))}
206
207	{this.#options.html?.head?.noScriptLink &&	23✔
208	(
209	<noscript>	23✔
210	<link	24✔
211	rel={this.#options.html?.head?.noScriptLink.rel}	24✔
212	href={this.#options.html?.head?.noScriptLink.href}	24✔
213	>
214	</link>
215	</noscript>
216	)}
217
218	{this.#options.html?.head?.headStyle &&	23✔
219	(
220	<style>	23✔
221	{this.#options.html?.head?.headStyle}	24✔
222	</style>
223	)}
224	{this.#options.html?.head?.script &&	23✔
225	this.#options.html?.head?.script.map((s) => (	23✔
226	<script	23✔
227	src={s.src}	33✔
228	type={s.type}	33✔
229	crossOrigin={s.crossorigin}	33✔
230	nonce={s.nonce}	33✔
231	integrity={s.integrity}	33✔
232	/>
233	))}
234
235	{this.#options.html?.head?.headScript &&	23✔
236	(
237	<script>	23✔
238	{this.#options.html?.head?.headScript}	24✔
239	</script>
240	)}
241	</head>
242	{this.#options.theme	×
243	? (
244	<body	×
245	data-bs-theme={this.#options.html?.body?.theme ?? "dark"}	×
246	className={this.#options.html?.body?.class}	×
247	style={this.#options.html?.body?.style}	×
248	>
249	<RootElement />	×
250	{this.#options.props && (	×
NEW 251	<script	×
252	dangerouslySetInnerHTML={{	×
NEW 253	__html: await createInitScript(	×
NEW 254	this.#server,	×
NEW 255	this.#options.props,	×
256	),
UNCOV 257	}}	×
258	/>
259	)}
260	{this.#options.html?.body?.script &&	×
261	this.#options.html?.body?.script.map((s) => (	×
262	<script	×
263	src={s.src}	×
264	type={s.type}	×
265	crossOrigin={s.crossorigin}	×
266	nonce={s.nonce}	×
267	/>
268	))}
269	</body>
270	)
271	: (
272	<body	×
273	className={this.#options.html?.body?.class}	23✔
274	style={this.#options.html?.body?.style}	23✔
275	>
276	<RootElement />	23✔
277	{this.#options.props && (	23✔
278	<script	23✔
279	dangerouslySetInnerHTML={{	25✔
280	__html: await createInitScript(	25✔
281	this.#server,	25✔
282	this.#options.props,	25✔
283	),
284	}}	25✔
285	/>
286	)}
287	{this.#options.html?.body?.script &&	23✔
288	this.#options.html?.body?.script.map((s) => (	23✔
289	<script	23✔
290	src={s.src}	32✔
291	type={s.type}	32✔
292	crossOrigin={s.crossorigin}	32✔
293	nonce={s.nonce}	32✔
294	/>
295	))}
296	</body>
297	)}
298	</html>
299	);
300	};	13✔
301
302	#refreshJs = (refreshUrl: string, buildId: string) => {	×
303	return `const es = new EventSource('${refreshUrl}');	×
304	window.addEventListener("beforeunload", (event) => {
305	es.close();
306	});
307	es.onmessage = function(e) {
308	if (e.data !== "${buildId}") {	×
309	location.reload();
310	};
311	};`;	×
312	};	×
313
NEW 314	#handleComponentLayout = async (c: FunctionComponent, hydrate = true) => {	×
NEW 315	const init = await createInitScript(this.#server, this.#options.props);	×
NEW 316	const refreshPath = `${this.#staticPath}/refresh.js`;	×
317
NEW 318	if (!hydrate) return <></>;	×
NEW 319	return (	×
NEW 320	<>	×
NEW 321	{this.#development ? <script src={refreshPath} /> : ""}	×
NEW 322	<script	×
NEW 323	dangerouslySetInnerHTML={{	×
NEW 324	__html: init,	×
NEW 325	}}	×
326	/>
NEW 327	<script src={`${this.#staticPath}/${c.name.toLocaleLowerCase()}.js`} />	×
328	</>
329	);
NEW 330	};	×
331
NEW 332	async #handleLayout(element: Component) {	×
NEW 333	if (this.#options.layout) {	×
NEW 334	const el = isJSX(element as JSX.Element)	×
NEW 335	? element as JSX.Element	×
NEW 336	: createElement(	×
NEW 337	element as FunctionComponent,	×
NEW 338	this.#options.props,	×
339	);
340
NEW 341	const hydrateScript = await this.#handleComponentLayout(	×
NEW 342	element as FunctionComponent,	×
NEW 343	this.#options.hydrate,	×
344	);
345
NEW 346	const root = (	×
NEW 347	<>	×
NEW 348	<div id="root">	×
NEW 349	{el}	×
350	</div>
NEW 351	{hydrateScript}	×
352	</>
353	);
354
NEW 355	const props = { children: root };	×
NEW 356	return this.#options.layout(props);	×
NEW 357	}	×
NEW 358	}	×
359
360	#createHTML = async (component: Component, cached?: boolean) => {	13✔
361	let compID = "";	25✔
362	this.#handleDevelopment();	25✔
363	if (isJSX(component as JSX.Element)) {	25✔
364	return this.#handleJSXElement(compID, component, cached);	26✔
365	}	26✔
366
367	const is = isPageComponent(component as PageComponent);	36✔
368	const pc = component as PageComponent;	36✔
369	const c = is ? pc.component : component as FunctionComponent;	×
370	const e = is ? pc.component : this.#element;	×
371
372	if (isJSX(c as JSX.Element)) {	×
373	return this.#handleJSXElement(compID, c, cached);	×
374	}	✔
375	const fc = c as FunctionComponent;	36✔
376	compID = `${fc.name}${this.#reqUrl}`;	36✔
377	if (cached && this.#nest[compID]) return this.#nest[compID];	25✔
NEW 378	if (this.#options.layout) {	×
NEW 379	const htmlLayout = this.#handleLayout(component);	×
NEW 380	return this.#nest[compID] = htmlLayout;	×
NEW 381	}	✔
382
383	await this.#handleComponent(fc, this.#options.hydrate);	34✔
384	const html = await this.#initHtml(e, this.#options.html);	34✔
385	return this.#nest[compID] = html;	34✔
386	};	13✔
387
388	#handleJSXElement = async (	13✔
389	compID: string,	13✔
390	component: Component,	13✔
391	cached?: boolean,	13✔
392	) => {
393	compID = `default${this.#reqUrl}`;	14✔
394	if (cached && this.#nest[compID]) return this.#nest[compID];	×
395	let html = await this.#initHtml(component, this.#options.html);	14✔
396	return this.#nest[compID] = html;	14✔
397	};	13✔
398
399	#handleComponent = async (c: FunctionComponent, hydrate = true) => {	13✔
400	if (!this.#options.html?.body) return;	×
401	if (hydrate) {	22✔
402	this.#options.html?.body.script?.push({	22✔
403	src: `${this.#staticPath}/${c.name.toLocaleLowerCase()}.js`,	22✔
404	});	22✔
405	}	22✔
406	};	13✔
407
408	#handleDevelopment = () => {	13✔
409	if (!this.#development) return;	25✔
410	const refreshPath = `${this.#staticPath}/refresh.js`;	36✔
411	this.#server.push(	×
412	"GET",	×
413	refreshPath,	×
414	() =>	×
415	new Response(this.#refreshJs(`/___refresh___`, BUILD_ID), {	×
416	headers: {	×
417	"Content-Type": "application/javascript",	×
418	},	×
419	}),	×
420	);
421
422	if (this.#options.html?.head?.script) {	25✔
423	this.#options.html?.head.script?.push({	36✔
424	src: refreshPath,	36✔
425	});	36✔
426	}	36✔
427	};	13✔
428
429	render = async () => {	13✔
430	const html = await this.#createHTML(	25✔
431	this.#element,	25✔
432	this.#options.cache,	25✔
433	);
434
435	const defaultOnError = (error: unknown) => {	×
436	console.error(error);	×
437	};	×
438
439	const onError = this.#options.onError ?? defaultOnError;	25✔
440	const signal = this.#options.abortController?.signal;	×
441	const stream: ReadableStream = await renderToReadableStream(html, {	25✔
442	signal,	25✔
443	onError,	25✔
444	});	25✔
445
446	return new Response(	25✔
447	stream,	25✔
448	{	25✔
449	status: this.#options.status,	25✔
450	headers: {	25✔
451	"content-type": "text/html",	25✔
452	},	25✔
453	},	25✔
454	);
455	};	13✔
456	}	13✔

fastrodev / fastro / 6801091975

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous