From fa2740c7c4daf94541bcbe8c6c7e529d8f82368c Mon Sep 17 00:00:00 2001 From: ynwd <10122431+ynwd@users.noreply.github.com> Date: Mon, 2 Dec 2024 04:28:44 +0700 Subject: [PATCH] fix: blank screen --- core/render/render.ts | 29 +++++++++++++++++++++++------ core/server/mod.ts | 28 +++++++++++++++++----------- modules/index/index.handler.ts | 7 ++++--- utils/load.js | 1 + utils/session.ts | 4 ++++ 5 files changed, 49 insertions(+), 20 deletions(-) diff --git a/core/render/render.ts b/core/render/render.ts index c79009e77..c55353929 100644 --- a/core/render/render.ts +++ b/core/render/render.ts @@ -1,6 +1,5 @@ -// deno-lint-ignore-file no-explicit-any import { - ComponentChild, + // ComponentChild, h, JSX, renderToString, @@ -93,10 +92,24 @@ es.onmessage = function(e) { component: FunctionComponent, script = "", nonce: string, + id?: string, ) => { const customScript = this.#loadJs(component.name.toLowerCase(), nonce) + script; - const children = layout.props.children as ComponentChild[]; + // deno-lint-ignore no-explicit-any + const children = layout.props.children as any; + // deno-lint-ignore no-explicit-any + const head = children[0] as any; + if (head && head.type === "head") { + // deno-lint-ignore no-explicit-any + const c = head.props.children as any; + // @ts-ignore: ignore meta + c.push(h("meta", { + name: "x-request-id", + content: id, + })); + } + children.push( h("script", { defer: true, @@ -119,14 +132,16 @@ es.onmessage = function(e) { return layout; }; + // deno-lint-ignore no-explicit-any render = async ( - key: string, + _key: string, p: Page, data: T, nonce: string, hdr?: Headers, ) => { - this.#server.serverOptions[key] = data; + const id = Date.now().toString(); + this.#server.serverOptions[id] = data; const children = typeof p.component == "function" ? h(p.component as FunctionComponent, { data, nonce }) @@ -135,6 +150,7 @@ es.onmessage = function(e) { children, data, nonce, + // deno-lint-ignore no-explicit-any }) as any; if (app.props.children && typeof p.component == "function") { app = this.#mutate( @@ -142,12 +158,13 @@ es.onmessage = function(e) { p.component, p.script, nonce, + id, ); } const html = "" + await renderToStringAsync(app); const headers = hdr ? hdr : new Headers({ "content-type": "text/html", - "x-request-id": Date.now().toString(), + "x-request-id": id, "Content-Security-Policy": `script-src 'self' 'unsafe-inline' 'nonce-${nonce}' https: http: ; object-src 'none'; base-uri 'none';`, }); diff --git a/core/server/mod.ts b/core/server/mod.ts index 735d930cc..56cc94f60 100644 --- a/core/server/mod.ts +++ b/core/server/mod.ts @@ -3,7 +3,7 @@ import { contentType, encodeHex, extname, - JSX, + // JSX, STATUS_CODE, STATUS_TEXT, } from "./deps.ts"; @@ -260,12 +260,14 @@ export default class Server implements Fastro { `; const str = `${debug}import { h, hydrate } from "preact"; import app from "../${folder}${name}.page.tsx"; +function getXRequestId() { + const metaTag = document.querySelector('meta[name="x-request-id"]'); + return metaTag ? metaTag.content : null; +} async function fetchProps(root: HTMLElement) { try { const parsedUrl = new URL(window.location.href); - const key = parsedUrl.pathname === "/" ? "" : parsedUrl.pathname; - const url = "/__/props" + key; - const response = await fetch(url); + const response = await fetch("/__/" + getXRequestId()); const data = await response.json(); if (!data) throw new Error("undefined"); hydrate(h(app, { data }), root); @@ -359,12 +361,16 @@ if (root) fetchProps(root); }); }; + // TODO #addPropsEndpoint = () => { - const path = "/__/props/:key*"; + const path = "/__/:key*"; this.add("GET", path, (req, _ctx) => { const ref = checkReferer(req); if (!getDevelopment() && ref) return ref; - const data = this.serverOptions[req.url]; + const key = req.params?.key ? req.params?.key : ""; + const data = this.serverOptions[key]; + // console.log(req.params?.key); + // console.log(`data ${req.params?.key} ===>`, data); return new Response(JSON.stringify(data), { headers: new Headers({ "Content-Type": "application/json", @@ -381,7 +387,7 @@ if (root) fetchProps(root); info: Deno.ServeHandlerInfo, ) => { const url = new URL(req.url); - let key = url.pathname; + const key = url.pathname; let page: Page = this.#routePage[key]; if (!page) return []; let params: Record | undefined = undefined; @@ -401,8 +407,8 @@ if (root) fetchProps(root); ctx.stores = this.stores; ctx.render = async (data: T, headers?: Headers) => { const r = new Render(this); - key = key === "/" ? "" : key; - key = url.origin + "/__/props" + key; + // key = key === "/" ? "" : key; + // key = url.origin + "/__/props" + key; return await r.render(key, page, data, this.getNonce(), headers); }; ctx.send = (data: T, status = 200, headers?: Headers) => { @@ -495,10 +501,10 @@ if (root) fetchProps(root); info: Deno.ServeHandlerInfo, url: URL, options: Record, - page?: boolean, + _page?: boolean, ) => { const ctx = options as Context; - const r = new Render(this); + const _r = new Render(this); // if (!page) { // ctx.render = (jsx: T) => { // return r.renderJsx(jsx as JSX.Element); diff --git a/modules/index/index.handler.ts b/modules/index/index.handler.ts index 536e5eba6..1168ceeba 100644 --- a/modules/index/index.handler.ts +++ b/modules/index/index.handler.ts @@ -56,7 +56,8 @@ export const handler = async (req: HttpRequest, ctx: Context) => { destination: "blog/queue", }; - const x = await ctx.render(obj); - console.log("x", x.headers); - return x; + return await ctx.render(obj); + // console.log("x", x.headers); + // console.log("ses", ses); + // return x; }; diff --git a/utils/load.js b/utils/load.js index a277125e8..53deebbae 100644 --- a/utils/load.js +++ b/utils/load.js @@ -1,3 +1,4 @@ +// deno-lint-ignore-file function fetchWithRetry(url) { fetch(url) .then((response) => response.text()) diff --git a/utils/session.ts b/utils/session.ts index 1f9f0d68e..1d122e1a4 100644 --- a/utils/session.ts +++ b/utils/session.ts @@ -7,6 +7,10 @@ export async function getSession(req: HttpRequest, _ctx: Context) { if (!sessionId) return undefined; // deno-lint-ignore no-explicit-any const r = (await kv.get(["session", sessionId])).value as any; + // console.log("r", { + // sessionId, + // login: r.login, + // }); if (!r) return; const avatar_url = r.avatar_url; const html_url = r.html_url;