fix: blank screen

fastrodev · Dec 1, 2024 · fa2740c · fa2740c
1 parent b81c342
commit fa2740c
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 20 deletions.
diff --git 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 <T = any>(
-    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,19 +150,21 @@ 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(
         p.layout({ children, data, nonce }),
         p.component,
         p.script,
         nonce,
+        id,
       );
     }
     const html = "<!DOCTYPE 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
@@ -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<string, string | undefined> | undefined = undefined;
@@ -401,8 +407,8 @@ if (root) fetchProps(root);
     ctx.stores = this.stores;
     ctx.render = async <T>(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 = <T>(data: T, status = 200, headers?: Headers) => {
@@ -495,10 +501,10 @@ if (root) fetchProps(root);
     info: Deno.ServeHandlerInfo,
     url: URL,
     options: Record<string, any>,
-    page?: boolean,
+    _page?: boolean,
   ) => {
     const ctx = options as Context;
-    const r = new Render(this);
+    const _r = new Render(this);
     // if (!page) {
     //   ctx.render = <T>(jsx: T) => {
     //     return r.renderJsx(jsx as JSX.Element);

diff --git 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
@@ -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
@@ -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;