feat: rebuild app using vike

server/api/preview/index.ts

@@ -0,0 +1,51 @@
+import { getFileExt } from "~/lib/utils";
+import db from "~/server/db";
+import { file } from "~/server/db/schema/file";
+import { and, eq, isNull } from "drizzle-orm";
+import { serveHtml } from "./serve-html";
+import { Mime } from "mime/lite";
+import standardTypes from "mime/types/standard.js";
+import otherTypes from "mime/types/other.js";
+import { serveJs } from "./serve-js";
+import { type Request, type Response, Router } from "express";
+
+const mime = new Mime(standardTypes, otherTypes);
+mime.define({ "text/javascript": ["jsx", "tsx"] }, true);
+
+const get = async (req: Request, res: Response) => {
+  const { slug, ...pathParams } = req.params as any;
+  const path = pathParams[0];
+
+  const fileData = await db.query.file.findFirst({
+    where: and(eq(file.path, path), isNull(file.deletedAt)),
+  });
+
+  if (!fileData) {
+    return res.status(404).send("File not found!");
+  }
+
+  const ext = getFileExt(fileData.filename);
+  let content = fileData.content || "";
+
+  if (["html", "htm"].includes(ext)) {
+    content = await serveHtml(fileData);
+  }
+
+  if (["js", "ts", "jsx", "tsx"].includes(ext)) {
+    content = await serveJs(fileData);
+  }
+
+  res.setHeader(
+    "Content-Type",
+    mime.getType(fileData.filename) || "application/octet-stream"
+  );
+  res.setHeader("Access-Control-Allow-Origin", "*");
+  res.setHeader("Access-Control-Allow-Methods", "GET");
+  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
+  res.send(content);
+};
+
+const router = Router();
+router.get("/:slug/*", get);
+
+export default router;

server/api/preview/serve-html.ts

@@ -0,0 +1,51 @@
+import db from "~/server/db";
+import { FileSchema, file } from "~/server/db/schema/file";
+import { and, eq, isNull } from "drizzle-orm";
+
+export const serveHtml = async (fileData: FileSchema) => {
+  const layout = await db.query.file.findFirst({
+    where: and(
+      eq(file.filename, "_layout.html"),
+      fileData.parentId
+        ? eq(file.parentId, fileData.parentId)
+        : isNull(file.parentId),
+      isNull(file.deletedAt)
+    ),
+  });
+
+  let content = fileData.content || "";
+  if (!layout?.content) {
+    return content;
+  }
+
+  content = layout.content.replace("{CONTENT}", content);
+
+  const bodyOpeningTagIdx = content.indexOf("<body");
+  const firstScriptTagIdx = content.indexOf("<script", bodyOpeningTagIdx);
+  const injectScripts = ['<script src="/js/hook-console.js"></script>'];
+
+  const importMaps = [
+    { name: "react", url: "https://esm.sh/[email protected]" },
+    { name: "react-dom/client", url: "https://esm.sh/[email protected]/client" },
+  ];
+
+  if (importMaps.length > 0) {
+    const imports = importMaps.reduce((a: any, b) => {
+      a[b.name] = b.url;
+      return a;
+    }, {});
+    const json = JSON.stringify({ imports });
+    injectScripts.unshift(`<script type="importmap">${json}</script>`);
+  }
+
+  if (firstScriptTagIdx >= 0 && injectScripts.length > 0) {
+    content =
+      content.substring(0, firstScriptTagIdx) +
+      injectScripts.filter((i) => !!i).join("") +
+      content.substring(firstScriptTagIdx);
+  }
+
+  // content = content.replace(/ {2}|\r\n|\n|\r/gm, "");
+
+  return content;
+};

server/api/preview/serve-js.ts

@@ -0,0 +1,11 @@
+import { FileSchema } from "~/server/db/schema/file";
+import { transformJs } from "~/server/lib/transform-js";
+
+export const serveJs = async (file: FileSchema) => {
+  let content = file.content || "";
+
+  // transform js
+  content = await transformJs(content);
+
+  return content;
+};