10437783933

Committed 18 Aug 2024 04:24AM UTC coverage: 73.905% (-10.0%) from 83.921%

Build # 10437783933

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #425 from fastrodev/dev

Dev

Run Details

86 of 113 branches covered (76.11%)

Branch coverage included in aggregate %.

35 of 38 new or added lines in 4 files covered. (92.11%)

1 existing line in 1 file now uncovered.

758 of 1029 relevant lines covered (73.66%)

21.49 hits per line

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

96.38

/http/server/render.ts

// deno-lint-ignore-file no-explicit-any
import {
  ComponentChild,
  h,
  JSX,
  renderToString,
  renderToStringAsync,
  VNode,
} from "./deps.ts";
import { Fastro, FunctionComponent, Page } from "./types.ts";
import { BUILD_ID, getDevelopment } from "./mod.ts";

export class Render {
  #server: Fastro;
  constructor(server: Fastro) {
    this.#server = server;
    if (getDevelopment()) {
      this.#handleDevelopment();
      this.#addRefreshEndPoint();
    }
  }

  renderJsx = (jsx: JSX.Element) => {
    const html = renderToString(jsx);
    const headers = new Headers({
      "content-type": "text/html",
      "x-request-id": new Date().getTime().toString(),
      "Content-Security-Policy":
        `"default-src 'self'; script-src 'self' 'strict-dynamic'; style-src 'self'; font-src 'self'; img-src 'self'; frame-src 'self'"`,
    });
    return new Response(html, {
      headers,
    });
  };

  #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();
  };
};`;
  };
  #loadJs = (name: string, nonce: string) => {
    return `function fetchWithRetry(t){fetch(t).then(t=>t.text()).then(t=>{if("Not Found"===t)return setTimeout(()=>{location.reload()},500);const e=document.createElement("script");e.defer = true;e.type = "module";e.nonce = '${nonce}';e.textContent=t,document.body.appendChild(e)})};const origin=new URL(window.location.origin),url=origin+"js/${name}.${this.#server.getNonce()}.js";fetchWithRetry(url);`;
  };

  #handleDevelopment = () => {
    this.#server.add(
      "GET",
      "/js/refresh.js",
      () =>
        new Response(this.#refreshJs(`/___refresh___`, BUILD_ID), {
          headers: {
            "Content-Type": "application/javascript",
          },
        }),
    );
  };

  #addRefreshEndPoint = () => {
    const refreshStream = (_req: Request) => {
      let timerId: number | undefined = undefined;
      const body = new ReadableStream({
        start(controller) {
          controller.enqueue(`data: ${BUILD_ID}\nretry: 100\n\n`);
          timerId = setInterval(() => {
            controller.enqueue(`data: ${BUILD_ID}\n\n`);
          }, 500);
        },
        cancel() {
          if (timerId !== undefined) {
            clearInterval(timerId);
          }
        },
      });
      return new Response(body.pipeThrough(new TextEncoderStream()), {
        headers: {
          "content-type": "text/event-stream",
        },
      });
    };
    const refreshPath = `/___refresh___`;
    this.#server.add("GET", refreshPath, refreshStream);
  };

  #mutate = (
    layout: VNode,
    component: FunctionComponent,
    script = "",
    nonce: string,
  ) => {
    const customScript = this.#loadJs(component.name.toLowerCase(), nonce) +
      script;
    const children = layout.props.children as ComponentChild[];
    children.push(
      h("script", {
        defer: true,
        type: "module",
        dangerouslySetInnerHTML: {
          __html: customScript,
        },
        nonce,
      }),
    );
    if (getDevelopment()) {
      children.push(
        h("script", {
          src: `/js/refresh.js`,
          async: true,
        }),
      );
    }
    return layout;
  };

  render = async <T = any>(
    key: string,
    p: Page,
    data: T,
    nonce: string,
    hdr?: Headers,
  ) => {
    this.#server.serverOptions[key] = data;
    const headers = hdr ? hdr : new Headers({
      "content-type": "text/html",
      "x-request-id": new Date().getTime().toString(),
      "Content-Security-Policy":
        `default-src 'self'; script-src 'self' 'nonce-${nonce}'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self'; frame-src 'self'`,
    });
    const children = typeof p.component == "function"
      ? h(p.component as FunctionComponent, { data, nonce })
      : p.component;
    let app = h(p.layout as FunctionComponent, {
      children,
      data,
      nonce,
    }) as any;
    if (app.props.children && typeof p.component == "function") {
      app = this.#mutate(
        p.layout({ children, data, nonce }),
        p.component,
        p.script,
        nonce,
      );
    }
    const html = "<!DOCTYPE html>" + await renderToStringAsync(app);
    return new Response(html, {
      headers,
    });
  };
}

1	// deno-lint-ignore-file no-explicit-any	1✔
2	import {	2✔
3	ComponentChild,
4	h,	2✔
5	JSX,
6	renderToString,	2✔
7	renderToStringAsync,	2✔
8	VNode,
9	} from "./deps.ts";	2✔
10	import { Fastro, FunctionComponent, Page } from "./types.ts";
11	import { BUILD_ID, getDevelopment } from "./mod.ts";	2✔
12
13	export class Render {	2✔
14	#server: Fastro;	67✔
15	constructor(server: Fastro) {	67✔
16	this.#server = server;	132✔
17	if (getDevelopment()) {	132✔
18	this.#handleDevelopment();	140✔
19	this.#addRefreshEndPoint();	140✔
20	}	140✔
21	}	132✔
22
23	renderJsx = (jsx: JSX.Element) => {	67✔
24	const html = renderToString(jsx);	68✔
25	const headers = new Headers({	68✔
26	"content-type": "text/html",	68✔
27	"x-request-id": new Date().getTime().toString(),	68✔
28	"Content-Security-Policy":	68✔
29	`"default-src 'self'; script-src 'self' 'strict-dynamic'; style-src 'self'; font-src 'self'; img-src 'self'; frame-src 'self'"`,	68✔
30	});	68✔
31	return new Response(html, {	68✔
32	headers,	68✔
33	});	68✔
34	};	67✔
35
36	#refreshJs = (refreshUrl: string, buildId: string) => {	67✔
37	return `const es = new EventSource('${refreshUrl}');	68✔
38	window.addEventListener("beforeunload", (event) => {
39	es.close();
40	});
41	es.onmessage = function(e) {
42	if (e.data !== "${buildId}") {	68✔
43	location.reload();
44	};
45	};`;	68✔
46	};	67✔
47	#loadJs = (name: string, nonce: string) => {	67✔
48	return `function fetchWithRetry(t){fetch(t).then(t=>t.text()).then(t=>{if("Not Found"===t)return setTimeout(()=>{location.reload()},500);const e=document.createElement("script");e.defer = true;e.type = "module";e.nonce = '${nonce}';e.textContent=t,document.body.appendChild(e)})};const origin=new URL(window.location.origin),url=origin+"js/${name}.${this.#server.getNonce()}.js";fetchWithRetry(url);`;	69✔
49	};	67✔
50
51	#handleDevelopment = () => {	67✔
52	this.#server.add(	75✔
53	"GET",	75✔
54	"/js/refresh.js",	75✔
55	() =>	75✔
56	new Response(this.#refreshJs(`/___refresh___`, BUILD_ID), {	75✔
57	headers: {	76✔
58	"Content-Type": "application/javascript",	76✔
59	},	76✔
60	}),	75✔
61	);
62	};	67✔
63
64	#addRefreshEndPoint = () => {	67✔
65	const refreshStream = (_req: Request) => {	75✔
66	let timerId: number \| undefined = undefined;	76✔
67	const body = new ReadableStream({	76✔
68	start(controller) {	76✔
69	controller.enqueue(`data: ${BUILD_ID}\nretry: 100\n\n`);	77✔
70	timerId = setInterval(() => {	×
71	controller.enqueue(`data: ${BUILD_ID}\n\n`);	×
72	}, 500);	×
73	},	76✔
74	cancel() {	76✔
75	if (timerId !== undefined) {	77✔
76	clearInterval(timerId);	77✔
77	}	77✔
78	},	77✔
79	});	76✔
80	return new Response(body.pipeThrough(new TextEncoderStream()), {	76✔
81	headers: {	76✔
82	"content-type": "text/event-stream",	76✔
83	},	76✔
84	});	76✔
85	};	75✔
86	const refreshPath = `/___refresh___`;	75✔
87	this.#server.add("GET", refreshPath, refreshStream);	75✔
88	};	67✔
89
90	#mutate = (	67✔
91	layout: VNode,	67✔
92	component: FunctionComponent,	67✔
93	script = "",	67✔
94	nonce: string,	67✔
95	) => {
96	const customScript = this.#loadJs(component.name.toLowerCase(), nonce) +	69✔
97	script;	69✔
98	const children = layout.props.children as ComponentChild[];	69✔
99	children.push(	69✔
100	h("script", {	69✔
101	defer: true,	69✔
102	type: "module",	69✔
103	dangerouslySetInnerHTML: {	69✔
104	__html: customScript,	69✔
105	},	69✔
106	nonce,	69✔
107	}),	69✔
108	);
109	if (getDevelopment()) {	69✔
110	children.push(	70✔
111	h("script", {	70✔
112	src: `/js/refresh.js`,	70✔
113	async: true,	70✔
114	}),	70✔
115	);
116	}	70✔
117	return layout;	69✔
118	};	67✔
119
120	render = async <T = any>(	67✔
121	key: string,	67✔
122	p: Page,	67✔
123	data: T,	67✔
124	nonce: string,	67✔
125	hdr?: Headers,	67✔
126	) => {
127	this.#server.serverOptions[key] = data;	70✔
NEW 128	const headers = hdr ? hdr : new Headers({	×
129	"content-type": "text/html",	70✔
130	"x-request-id": new Date().getTime().toString(),	70✔
131	"Content-Security-Policy":	70✔
132	`default-src 'self'; script-src 'self' 'nonce-${nonce}'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self'; frame-src 'self'`,	70✔
133	});	70✔
134	const children = typeof p.component == "function"	70✔
135	? h(p.component as FunctionComponent, { data, nonce })	284✔
136	: p.component;	70✔
137	let app = h(p.layout as FunctionComponent, {	70✔
138	children,	70✔
139	data,	70✔
140	nonce,	70✔
141	}) as any;	70✔
142	if (app.props.children && typeof p.component == "function") {	70✔
143	app = this.#mutate(	72✔
144	p.layout({ children, data, nonce }),	360✔
145	p.component,	72✔
146	p.script,	72✔
147	nonce,	72✔
148	);
149	}	72✔
150	const html = "<!DOCTYPE html>" + await renderToStringAsync(app);	70✔
151	return new Response(html, {	70✔
152	headers,	70✔
153	});	70✔
154	};	67✔
155	}	67✔

fastrodev / fastro / 10437783933

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