feat: fix panel persist over server rendering, etc

server/api/preview/index.ts

@@ -1,16 +1,12 @@
+import { type Request, type Response, Router } from "express";
 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);
+import { getMimeType } from "~/server/lib/mime";
+import { postcss } from "./postcss";
 
 const get = async (req: Request, res: Response) => {
   const { slug, ...pathParams } = req.params as any;
@@ -35,10 +31,11 @@ const get = async (req: Request, res: Response) => {
     content = await serveJs(fileData);
   }
 
-  res.setHeader(
-    "Content-Type",
-    mime.getType(fileData.filename) || "application/octet-stream"
-  );
+  if (["css"].includes(ext)) {
+    content = await postcss(fileData);
+  }
+
+  res.setHeader("Content-Type", getMimeType(fileData.filename));
   res.setHeader("Access-Control-Allow-Origin", "*");
   res.setHeader("Access-Control-Allow-Methods", "GET");
   res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");

server/api/preview/postcss.ts

@@ -0,0 +1,34 @@
+import postcssPlugin from "postcss";
+import tailwindcss from "tailwindcss";
+import cssnano from "cssnano";
+import { fileExists, getProjectDir } from "~/server/lib/utils";
+import { FileSchema } from "~/server/db/schema/file";
+import { unpackProject } from "~/server/lib/unpack-project";
+
+export const postcss = async (fileData: FileSchema) => {
+  const content = fileData.content || "";
+
+  const projectDir = getProjectDir();
+  if (!fileExists(projectDir)) {
+    return content;
+  }
+
+  try {
+    await unpackProject({ ext: "ts,tsx,js,jsx,html" });
+
+    const result = await postcssPlugin([
+      tailwindcss({
+        content: [projectDir + "/**/*.{ts,tsx,js,jsx,html}"],
+      }),
+      cssnano({
+        preset: ["default", { discardComments: { removeAll: true } }],
+      }),
+    ]).process(content, {
+      from: undefined,
+    });
+
+    return result.css;
+  } catch (err) {
+    return content;
+  }
+};

server/api/preview/serve-html.ts

@@ -2,6 +2,8 @@ import db from "~/server/db";
 import { FileSchema, file } from "~/server/db/schema/file";
 import { and, eq, isNull } from "drizzle-orm";
 
+const preventHtmlDirectAccess = `<script>if (window === window.parent) {window.location.href = '/';}</script>`;
+
 export const serveHtml = async (fileData: FileSchema) => {
   const layout = await db.query.file.findFirst({
     where: and(
@@ -14,15 +16,16 @@ export const serveHtml = async (fileData: FileSchema) => {
   });
 
   let content = fileData.content || "";
-  if (!layout?.content) {
-    return content;
+  if (layout?.content != null) {
+    content = layout.content.replace("{CONTENT}", 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 injectScripts = [
+    '<script src="/js/hook-console.js"></script>',
+    preventHtmlDirectAccess,
+  ];
 
   const importMaps = [
     { name: "react", url: "https://esm.sh/[email protected]" },
@@ -45,7 +48,5 @@ export const serveHtml = async (fileData: FileSchema) => {
       content.substring(firstScriptTagIdx);
   }
 
-  // content = content.replace(/ {2}|\r\n|\n|\r/gm, "");
-
   return content;
 };

server/api/trpc/context.ts

@@ -1,9 +1,6 @@
-import { CreateExpressContextOptions } from "@trpc/server/adapters/express";
+import { Request } from "express";
 
-export const createContext = async ({
-  req,
-  res,
-}: CreateExpressContextOptions) => {
+export const createContext = async ({ req }: { req: Request }) => {
   return {};
 };
 

server/api/trpc/trpc.ts

@@ -1,7 +1,12 @@
 import { createContext } from "./context";
 import { appRouter } from "../../routers/_app";
 import { createCallerFactory } from ".";
+import { PageContext } from "vike/types";
 
-const trpcServer = createCallerFactory(appRouter)(createContext);
+const trpcServer = async (ctx: PageContext) => {
+  const createCaller = createCallerFactory(appRouter);
+  const context = await createContext({ req: ctx.req });
+  return createCaller(context);
+};
 
 export default trpcServer;