6903116920

Committed 17 Nov 2023 11:01AM UTC coverage: 90.856% (-0.1%) from 90.993%

Build # 6903116920

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #335 from fastrodev/react

fix: unit test

Run Details

129 of 153 branches covered (0.0%)

Branch coverage included in aggregate %.

1 of 1 new or added line in 1 file covered. (100.0%)

3 existing lines in 1 file now uncovered.

954 of 1039 relevant lines covered (91.82%)

21.42 hits per line

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

82.94

/http/render.tsx

// deno-lint-ignore-file
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.props ? opt.props.cache : true;
    opt.development = opt.development ?? true;

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

  #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) => {
    const init = await createInitScript(this.#server, this.#options.props);
    const refreshPath = `${this.#staticPath}/refresh.js`;
    return (
      <>
        {this.#development ? <script src={refreshPath} /> : ""}
        <script
          dangerouslySetInnerHTML={{
            __html: init,
          }}
        />
        <script src={`${this.#staticPath}/${c.name.toLocaleLowerCase()}.js`} />
      </>
    );
  };

  async #handleLayout(element: Component) {
    const jsx = isJSX(element as JSX.Element);
    const el = jsx ? element as JSX.Element : createElement(
      element as FunctionComponent,
      this.#options.props,
    );
    const hydrateScript = jsx ? "" : await this.#handleComponentLayout(
      element as FunctionComponent,
    );

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

    const defaultContainer = (
      <>
        {defaultRoot}
        {hydrateScript}
      </>
    );

    if (!this.#options.layout) {
      const defaultLayout = ({ children }: { children: React.ReactNode }) => {
        return (
          <html>
            <body>{children}</body>
          </html>
        );
      };
      return defaultLayout({ children: defaultContainer });
    }

    const root = this.#options.customRoot
      ? this.#options.customRoot(el)
      : defaultRoot;

    const rootContainer = (
      <>
        {root}
        {hydrateScript}
      </>
    );

    const props = { children: rootContainer, data: this.#options.props };
    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);
    }

    // handle a modular page
    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];
    const htmlLayout = this.#handleLayout(e);
    return this.#nest[compID] = htmlLayout;
  };

  #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.#handleLayout(component);
    return this.#nest[compID] = html;
  };

  #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",
          },
        }),
    );
  };

  render = async () => {
    console.log("this.#options.cache", this.#options.cache);
    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 { createElement, renderToReadableStream } from "./deps.ts";	1✔
3	import {	1✔
4	BUILD_ID,	1✔
5	checkReferer,
6	Component,
7	Fastro,
8	FunctionComponent,
9	isPageComponent,	1✔
10	PageComponent,
11	RenderOptions,
12	} from "./server.ts";	1✔
13	import {	1✔
14	clean,	1✔
15	extractOriginalString,	1✔
16	importCryptoKey,	1✔
17	keyType,	1✔
18	keyUsages,	1✔
19	reverseString,	1✔
20	} from "../crypto/key.ts";	1✔
21	import { encryptData } from "../crypto/encrypt.ts";	1✔
22
23	function isJSX(res: JSX.Element) {	21✔
24	return res && res.props != undefined && res.type != undefined;	21✔
25	}	21✔
26
27	export async function createInitScript(server: Fastro, props?: any) {	1✔
28	let exportedKeyString = server.record["exportedKeyString"] as string;	7✔
29	exportedKeyString = clean(exportedKeyString);	7✔
30	exportedKeyString = reverseString(exportedKeyString);	7✔
31	exportedKeyString = extractOriginalString(	7✔
32	exportedKeyString,	7✔
33	server.record["salt"],	7✔
34	) as string;
35	exportedKeyString = atob(exportedKeyString);	7✔
36	const importedKey = await importCryptoKey(	7✔
37	exportedKeyString,	7✔
38	keyType,	7✔
39	keyUsages,	7✔
40	);
41
42	const env = Deno.env.get("ENV") === undefined	×
43	? ""	×
44	: `window.__ENV__ = "DEVELOPMENT";`;	×
45
46	const plaintext = JSON.stringify(props);	7✔
47	const encryptedData = await encryptData(importedKey, plaintext);	7✔
48	return `${env}window.__INITIAL_DATA__ = "${encryptedData}";`;	7✔
49	}	7✔
50
51	export class Render {	1✔
52	#options: RenderOptions;	8✔
53	#element: Component;	8✔
54	#nest: Record<string, any>;	8✔
55	#development: boolean;	8✔
56	#server: Fastro;	8✔
57	#staticPath: string;	8✔
58	#reqUrl?: string;	8✔
59
60	constructor(	8✔
61	element: Component,	8✔
62	options: RenderOptions,	8✔
63	nest: Record<string, any>,	8✔
64	server: Fastro,	8✔
65	request?: Request,	8✔
66	) {	8✔
67	this.#options = this.#initOptions(options);	15✔
68	this.#element = element;	15✔
69	this.#nest = nest;	15✔
70	this.#development = server.getDevelopmentStatus();	15✔
71	this.#server = server;	15✔
72	this.#staticPath = `${this.#server.getStaticPath()}/js`;	15✔
73	this.#reqUrl = request?.url;	15✔
74	}	15✔
75
76	#initOptions = (opt: RenderOptions) => {	8✔
77	opt.status = opt.status ?? 200;	15✔
78	opt.pageFolder = opt.pageFolder ?? "pages";	15✔
79	opt.cache = opt.props ? opt.props.cache : true;	15✔
80	opt.development = opt.development ?? true;	15✔
81
82	const options = { ...opt };	45✔
83	return this.#options = options;	15✔
84	};	8✔
85
86	#refreshJs = (refreshUrl: string, buildId: string) => {	×
87	return `const es = new EventSource('${refreshUrl}');	×
88	window.addEventListener("beforeunload", (event) => {
89	es.close();
90	});
91	es.onmessage = function(e) {
92	if (e.data !== "${buildId}") {	×
93	location.reload();
94	};
95	};`;	×
96	};	×
97
98	#handleComponentLayout = async (c: FunctionComponent) => {	8✔
99	const init = await createInitScript(this.#server, this.#options.props);	14✔
100	const refreshPath = `${this.#staticPath}/refresh.js`;	14✔
101	return (	14✔
102	<>	14✔
103	{this.#development ? <script src={refreshPath} /> : ""}	28!
104	<script	14✔
105	dangerouslySetInnerHTML={{	14✔
106	__html: init,	14✔
107	}}	14✔
108	/>
109	<script src={`${this.#staticPath}/${c.name.toLocaleLowerCase()}.js`} />	28✔
110	</>
111	);
112	};	8✔
113
114	async #handleLayout(element: Component) {	8✔
115	const jsx = isJSX(element as JSX.Element);	15✔
116	const el = jsx ? element as JSX.Element : createElement(	15✔
117	element as FunctionComponent,	15✔
118	this.#options.props,	15✔
119	);
120	const hydrateScript = jsx ? "" : await this.#handleComponentLayout(	15✔
121	element as FunctionComponent,	15✔
122	);
123
124	const defaultRoot = (	21✔
125	<div id="root">	42✔
126	{el}	21✔
127	</div>
128	);
129
130	const defaultContainer = (	21✔
131	<>	21✔
132	{defaultRoot}	21✔
133	{hydrateScript}	21✔
134	</>
135	);
136
137	if (!this.#options.layout) {	21✔
138	const defaultLayout = ({ children }: { children: React.ReactNode }) => {	21✔
139	return (	27✔
140	<html>	27✔
141	<body>{children}</body>	54✔
142	</html>
143	);
144	};	21✔
145	return defaultLayout({ children: defaultContainer });	63✔
146	}	21✔
147
148	const root = this.#options.customRoot	×
149	? this.#options.customRoot(el)	×
150	: defaultRoot;	×
151
152	const rootContainer = (	15✔
153	<>	15✔
154	{root}	15✔
155	{hydrateScript}	15✔
156	</>
157	);
158
159	const props = { children: rootContainer, data: this.#options.props };	60✔
160	return this.#options.layout(props);	15✔
161	}	15✔
162
163	#createHTML = async (component: Component, cached?: boolean) => {	8✔
164	let compID = "";	15✔
165	this.#handleDevelopment();	15✔
166	if (isJSX(component as JSX.Element)) {	15✔
167	return this.#handleJSXElement(compID, component, cached);	16✔
168	}	16✔
169
170	// handle a modular page	21✔
171	const is = isPageComponent(component as PageComponent);	21✔
172	const pc = component as PageComponent;	21✔
173	const c = is ? pc.component : component as FunctionComponent;	15✔
174	const e = is ? pc.component : this.#element;	15✔
175
176	if (isJSX(c as JSX.Element)) {	×
177	return this.#handleJSXElement(compID, c, cached);	×
178	}	✔
179	const fc = c as FunctionComponent;	21✔
180	compID = `${fc.name}${this.#reqUrl}`;	21✔
UNCOV 181	if (cached && this.#nest[compID]) return this.#nest[compID];	×
182	const htmlLayout = this.#handleLayout(e);	21✔
183	return this.#nest[compID] = htmlLayout;	21✔
184	};	8✔
185
186	#handleJSXElement = async (	8✔
187	compID: string,	8✔
188	component: Component,	8✔
189	cached?: boolean,	8✔
190	) => {
191	compID = `default${this.#reqUrl}`;	9✔
192	if (cached && this.#nest[compID]) return this.#nest[compID];	×
193	let html = await this.#handleLayout(component);	9✔
194	return this.#nest[compID] = html;	9✔
195	};	8✔
196
197	#handleDevelopment = () => {	8✔
198	if (!this.#development) return;	15✔
199	const refreshPath = `${this.#staticPath}/refresh.js`;	21✔
200	this.#server.push(	×
201	"GET",	×
202	refreshPath,	×
203	() =>	×
204	new Response(this.#refreshJs(`/___refresh___`, BUILD_ID), {	×
205	headers: {	×
206	"Content-Type": "application/javascript",	×
207	},	×
208	}),	×
209	);
210	};	8✔
211
212	render = async () => {	8✔
213	console.log("this.#options.cache", this.#options.cache);	15✔
214	const html = await this.#createHTML(	15✔
215	this.#element,	15✔
216	this.#options.cache,	15✔
217	);
218
219	const defaultOnError = (error: unknown) => {	×
220	console.error(error);	×
UNCOV 221	};	×
222
223	const onError = this.#options.onError ?? defaultOnError;	15✔
UNCOV 224	const signal = this.#options.abortController?.signal;	×
225	const stream: ReadableStream = await renderToReadableStream(html, {	15✔
226	signal,	15✔
227	onError,	15✔
228	});	15✔
229
230	return new Response(	15✔
231	stream,	15✔
232	{	15✔
233	status: this.#options.status,	15✔
234	headers: {	15✔
235	"content-type": "text/html",	15✔
236	},	15✔
237	},	15✔
238	);
239	};	8✔
240	}	8✔

fastrodev / fastro / 6903116920

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