ssr with twind working
This commit is contained in:
parent
11f896f12b
commit
326a78acfe
2
app.tsx
2
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>;
|
||||
@ -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"]
|
||||
}
|
||||
}
|
||||
11
deno.lock
11
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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 TWPreAuto from "https://esm.sh/v126/@twind/preset-autoprefix@1.0.7/es2022/preset-autoprefix.mjs";
|
||||
import TWPreTail from "@twind/preset-tailwind";
|
||||
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);
|
||||
if(React.render)
|
||||
{
|
||||
React.render(app, dom);
|
||||
const app = React.createElement(()=> React.createElement(App.default, null), null);
|
||||
React.hydrate(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;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -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);
|
||||
if(shell)
|
||||
let markup = "";
|
||||
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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user