SethTrowbridge/able-baker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 8 Wiki Activity

ssr with twind working

Browse Source
This commit is contained in:
Seth Trowbridge 2024-05-14 10:40:52 -04:00
parent 11f896f12b
commit 326a78acfe
5 changed files with 69 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.tsx
View File

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

3
deno.jsonc
View File

@ -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
View File

@ -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"
}
}

52
run-browser.tsx
View File

@ -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);
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;
}
const app = React.createElement(()=> React.createElement(App.default, null), null);
React.hydrate(app, dom);
return ()=>dom && React.unmountComponentAtNode(dom);
};

56
run-serve.tsx
View File

@ -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