ssr with twind working

app.tsx

@@ -1,7 +1,5 @@
 import * as ISO from ">able/iso-elements.tsx";
 
-console.log(ISO)
-
 export default ()=><div>
     <h1 class="p-4 bg-red-500 text-white">App</h1>
 </div>;

deno.jsonc

@@ -7,7 +7,7 @@
 		"react/": "https://esm.sh/preact@10.20.2/compat/",
 		"@preact/signals": "https://esm.sh/@preact/signals@1.2.3?deps=preact@10.20.2",
 		"signals-original": "https://esm.sh/@preact/signals@1.2.3?deps=preact@10.20.2",
-		"@twind/core": "https://esm.sh/v126/@twind/core@1.1.3/es2022/core.mjs",
+		"@twind/": "https://esm.sh/v126/@twind/",
 
 		">other/": "https://esm.sh/",
 		">able/": "./",
@@ -23,6 +23,7 @@
 	},
 	"compilerOptions": {
 		"jsx": "react-jsx",
+		"jsxImportSource": "react",
 		"lib": ["deno.window", "dom", "dom.iterable", "dom.asynciterable"]
 	}
 }

deno.lock

@@ -1,5 +1,11 @@
 {
   "version": "3",
+  "redirects": {
+    "https://esm.sh/preact-render-to-string": "https://esm.sh/preact-render-to-string@6.4.2",
+    "https://esm.sh/v126/@twind/core": "https://esm.sh/v126/@twind/core@1.1.3",
+    "https://esm.sh/v126/@twind/preset-autoprefix": "https://esm.sh/v126/@twind/preset-autoprefix@1.0.7",
+    "https://esm.sh/v126/@twind/preset-tailwind": "https://esm.sh/v126/@twind/preset-tailwind@1.1.4"
+  },
   "remote": {
     "https://deno.land/std@0.180.0/media_types/_db.ts": "7606d83e31f23ce1a7968cbaee852810c2cf477903a095696cdc62eaab7ce570",
     "https://deno.land/std@0.180.0/media_types/_util.ts": "916efbd30b6148a716f110e67a4db29d6949bf4048997b754415dd7e42c52378",
@@ -21,12 +27,15 @@
     "https://deno.land/x/jsonct@v0.1.0/src/_util/asserts.ts": "178dfc49a464aee693a7e285567b3d0b555dc805ff490505a8aae34f9cfb1462",
     "https://deno.land/x/jsonct@v0.1.0/src/parse.ts": "a3a016822446b0584b40bae9098df480db5590a9915c9e3c623ba2801cf1b8df",
     "https://esm.sh/@swc/wasm-web@1.3.62": "b43fb5cde95beb7736182fa62250235dfa6b71717b9d38aa4e6077f05ec90e5e",
+    "https://esm.sh/preact-render-to-string@6.4.2": "338303f2113fea192cfa518fc46d2f8a1702d9b89843c64ed30fba99b23eb6a3",
+    "https://esm.sh/preact@10.20.2/compat": "042516b90993ba4b3348398faca2a3f0d6f5097854174c00d403940834a787b1",
     "https://esm.sh/preact@10.20.2/compat/jsx-runtime": "e3942a5ffd734d5eaf0790ada3ed4ad81c0c0c2ff56a8e4740247de259f7fb65",
     "https://esm.sh/stable/preact@10.20.2/denonext/compat.js": "2e0564fd10e09b587503f9ecd4407ac8726c79beae80026ac89034a47b270c68",
     "https://esm.sh/stable/preact@10.20.2/denonext/compat/jsx-runtime.js": "fbbbceb98af95d1c73181f9e5043fad6cdae30ef9e5fcf90d44ffd6fa6055c02",
     "https://esm.sh/stable/preact@10.20.2/denonext/hooks.js": "91d64a217b2f2c9f724042d0ed1b87bf3edf721261e86358aa6fd55501ee915f",
     "https://esm.sh/stable/preact@10.20.2/denonext/jsx-runtime.js": "2a5b981955e92e3ff86906ac0e5955ec0e6e5ca71032f3f063912cb85ae9a7f1",
     "https://esm.sh/stable/preact@10.20.2/denonext/preact.mjs": "f418bc70c24b785703afb9d4dea8cdc1e315e43c8df620a0c52fd27ad9bd70eb",
-    "https://esm.sh/v135/@swc/wasm-web@1.3.62/denonext/wasm-web.mjs": "57046d46c9ef1398a294ba7447034f5966e48866a05c309cccec4bb4d6e7c61b"
+    "https://esm.sh/v135/@swc/wasm-web@1.3.62/denonext/wasm-web.mjs": "57046d46c9ef1398a294ba7447034f5966e48866a05c309cccec4bb4d6e7c61b",
+    "https://esm.sh/v135/preact-render-to-string@6.4.2/denonext/preact-render-to-string.mjs": "912b3613479fb420eda357ac21d3cf970753cb8f486563f9df5c222bf1ced149"
   }
 }

run-browser.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import * as TW from   "@twind/core";
-import TWPreTail from "https://esm.sh/v126/@twind/preset-tailwind@1.1.3/es2022/preset-tailwind.mjs";
+import TWPreTail from "@twind/preset-tailwind";
-import TWPreAuto from "https://esm.sh/v126/@twind/preset-autoprefix@1.0.7/es2022/preset-autoprefix.mjs";
+import TWPreAuto from "@twind/preset-autoprefix";
+import * as App from ">able/app.tsx";
 
 const Configure =
 {
@@ -10,7 +11,19 @@ const Configure =
   hash: false
 } as TW.TwindUserConfig;
 
-export const Shadow =(inElement:HTMLElement, inConfig:TW.TwindUserConfig)=>
+let TwindInst:TW.Twind<TW.BaseTheme, unknown>;
+const TwindConfig = {...Configure, ...(App?.CSS || {})};
+export const CustomTwindExtractor =(inMarkup:string)=> {
+  if(!TwindInst)
+  {
+    TwindInst = TW.install(TwindConfig);
+  }
+  return TW.extract(inMarkup, TwindInst);
+}
+
+export const CustomApp = App.default;
+
+const Shadow =(inElement:HTMLElement)=>
 {
     const ShadowDOM = inElement.attachShadow({ mode: "open" });
     const ShadowDiv = document.createElement("div");
@@ -18,16 +31,12 @@ export const Shadow =(inElement:HTMLElement, inConfig:TW.TwindUserConfig)=>
 
     ShadowDOM.append(ShadowCSS);
     ShadowDOM.append(ShadowDiv);
-    TW.observe(TW.twind(inConfig, TW.cssom(ShadowCSS)), ShadowDiv);
+    TW.observe(TW.twind(TwindConfig, TW.cssom(ShadowCSS)), ShadowDiv);
     return ShadowDiv;
 };
 
-export default async(inSelector:string, inModulePath:string, inMemberApp="default", inMemberCSS="CSS", inShadow=false):Promise<(()=>void)|false>=>
+export default async(inSelector:string, inShadow=false):Promise<(()=>void)|false>=>
 {
-  if(!inModulePath)
-  {
-    return false;
-  }
 
   let dom = document.querySelector(inSelector);
   if(!dom)
@@ -36,30 +45,17 @@ export default async(inSelector:string, inModulePath:string, inMemberApp="defaul
     return false;
   }
 
-  const module = await import(inModulePath);
-
-  const merge = inMemberCSS ? {...Configure, ...module[inMemberCSS]} : Configure;
-
   if(inShadow)
   {
-    dom = Shadow(dom as HTMLElement, merge);
+    dom = Shadow(dom as HTMLElement);
   }
   else
   {
-    TW.install(merge);
+    TW.install(TwindConfig);
   }
 
-  const app = React.createElement(()=> React.createElement(module[inMemberApp], null), null);
+  const app = React.createElement(()=> React.createElement(App.default, null), null);
-  if(React.render)
+  React.hydrate(app, dom);
-  {
+  return ()=>dom && React.unmountComponentAtNode(dom);
-    React.render(app, dom);
+
-    return ()=>dom && React.unmountComponentAtNode(dom);
-  }
-  else
-  {
-    const reactDom = await import(`https://esm.sh/react-dom@${React.version}/client`);
-    const root = reactDom.createRoot(dom);
-    root.render(app);
-    return root.unmount;        
-  }
 };

run-serve.tsx

@@ -1,5 +1,6 @@
 import * as MIME from "https://deno.land/std@0.180.0/media_types/mod.ts";
 import * as SWCW from "https://esm.sh/@swc/wasm-web@1.3.62";
+import SSR from "https://esm.sh/preact-render-to-string@6.4.2";
 import { HuntConfig, Root } from "./checker.tsx";
 import CustomServe from ">able/api.tsx"; 
 
@@ -34,7 +35,7 @@ const ImportMapReload =async()=>
 
 export type CustomHTTPHandler = (inReq:Request, inURL:URL, inExt:string|false, inMap:{imports:Record<string, string>}, inConfig:Configuration)=>void|false|Response|Promise<Response|void|false>;
 export type CustomRemapper = (inImports:Record<string, string>, inConfig:Configuration)=>Record<string, string>;
-export type Configuration     = {Start:string, Allow:string, Reset:string, SWCOp:SWCW.Options, Serve:CustomHTTPHandler, Extra:CustomHTTPHandler, Shell:CustomHTTPHandler, Remap:CustomRemapper};
+export type Configuration     = {Start:string, Allow:string, Reset:string, SWCOp:SWCW.Options, Serve:CustomHTTPHandler, Extra:CustomHTTPHandler, Remap:CustomRemapper};
 export type ConfigurationArgs = Partial<Configuration>;
 let Configuration:Configuration =
 {
@@ -47,25 +48,6 @@ let Configuration:Configuration =
     {
         return inImports;
     },
-    Shell(inReq, inURL, inExt, inMap, inConfig)
-    {
-        return new Response(
-            `<!doctype html>
-            <html>
-                <head>
-                    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-                    <meta charset="utf-8"/>
-                </head>
-                <body>
-                    <div id="app"></div>
-                    <script type="importmap">${JSON.stringify(inMap, null, " ")}</script>
-                    <script type="module">
-                        import Mount from ">able/run-browser.tsx";
-                        Mount("#app", "${inConfig.Start}");
-                    </script>
-                </body>
-            </html>`, {status:200, headers:{"content-type":"text/html"}});
-    },
     SWCOp:
     {
         sourceMaps: false,
@@ -207,11 +189,39 @@ export default async()=>
         // custom page html
         if(!ext)
         {
-            const shell = await Configuration.Shell(req, url, ext, ImportMap, Configuration);
+            let markup = "";
-            if(shell)
+            let styles = "";
+            try
             {
-                return shell;
+                const User = await import("./run-browser.tsx");
+                markup = SSR(<User.CustomApp/>);
+                const {css, html} = User.CustomTwindExtractor(markup);
+                console.log(css);
+                markup = html;
+                styles = css;
             }
+            catch(e)
+            {
+                console.log("SSR error:")
+                console.log(e);
+            }
+            return new Response(
+                `<!doctype html>
+                <html>
+                    <head>
+                        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+                        <meta charset="utf-8"/>
+                        <style>${styles}</style>
+                    </head>
+                    <body>
+                        <div id="app">${markup}</div>
+                        <script type="importmap">${JSON.stringify(ImportMap, null, " ")}</script>
+                        <script type="module">
+                            import Mount from ">able/run-browser.tsx";
+                            Mount("#app", ">able/app.tsx");
+                        </script>
+                    </body>
+                </html>`, {status:200, headers:{"content-type":"text/html"}});
         }
     
         // cache-reset route