diff --git a/app.tsx b/app.tsx index 787f4b5..66d619b 100644 --- a/app.tsx +++ b/app.tsx @@ -1,7 +1,5 @@ import * as ISO from ">able/iso-elements.tsx"; -console.log(ISO) - export default ()=>

App

; \ No newline at end of file diff --git a/deno.jsonc b/deno.jsonc index 472596d..7c7faf4 100644 --- a/deno.jsonc +++ b/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"] } } \ No newline at end of file diff --git a/deno.lock b/deno.lock index 3983028..f6ad20b 100644 --- a/deno.lock +++ b/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" } } diff --git a/run-browser.tsx b/run-browser.tsx index 76fbea3..9bc1769 100644 --- a/run-browser.tsx +++ b/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 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; +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); + }; diff --git a/run-serve.tsx b/run-serve.tsx index 2a34f58..be1bdf6 100644 --- a/run-serve.tsx +++ b/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}, inConfig:Configuration)=>void|false|Response|Promise; export type CustomRemapper = (inImports:Record, inConfig:Configuration)=>Record; -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; let Configuration:Configuration = { @@ -47,25 +48,6 @@ let Configuration:Configuration = { return inImports; }, - Shell(inReq, inURL, inExt, inMap, inConfig) - { - return new Response( - ` - - - - - - -
- - - - `, {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(); + 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( + ` + + + + + + + +
${markup}
+ + + + `, {status:200, headers:{"content-type":"text/html"}}); } // cache-reset route