diff --git a/_lib_/mount.tsx b/_lib_/mount.tsx index 3eaeac1..0314212 100644 --- a/_lib_/mount.tsx +++ b/_lib_/mount.tsx @@ -2,17 +2,16 @@ import React from "react"; import * as TW from "https://esm.sh/@twind/core@1.0.1"; import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1"; import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1"; -import react from "./react.tsx"; const Configure = { theme: {}, - presets:[TWPreTail(), TWPreAuto()] + presets: [TWPreTail(), TWPreAuto()], + hash: false } as TW.TwindUserConfig; export const Shadow =(inElement:HTMLElement, inConfig?:TW.TwindUserConfig)=> { - /* const merge = inConfig ? {...Configure, ...inConfig} : Configure; const ShadowDOM = inElement.attachShadow({ mode: "open" }); @@ -23,33 +22,32 @@ export const Shadow =(inElement:HTMLElement, inConfig?:TW.TwindUserConfig)=> ShadowDOM.append(ShadowDiv); TW.observe(TW.twind(merge, TW.cssom(ShadowCSS)), ShadowDiv); return ShadowDiv; - */ - - return inElement; - - }; -export const Render =async(inElement:HTMLElement, inApp:()=>React.JSX.Element)=> -{ - const wrapped = React.createElement(()=> React.createElement(inApp, null), null); +export default async(inSelector:string, inModulePath:string, inMemberApp="default", inMemberCSS="CSS"):Promise<(()=>void)|false>=> +{ + let dom = document.querySelector(inSelector); + if(!dom) + { + console.log(`element "${inSelector}" not found.`); + return false; + } + + const module = await import(inModulePath); + dom = Shadow(dom as HTMLElement, module[inMemberCSS]) + + const app = React.createElement(()=> React.createElement(module[inMemberApp], null), null); if(React.render) { - React.render(wrapped, inElement); - return ()=>React.unmountComponentAtNode(inElement); + 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(inElement); - root.render(wrapped); + const root = reactDom.createRoot(dom); + root.render(app); return root.unmount; } -}; -export default async(inSelector:string, inModulePath:string, inMemberApp="default", inMemberCSS="CSS"):Promise<()=>void|false>=> -{ - const members = await import(inModulePath); - const element = document.querySelector(inSelector); - return element ? await Render(Shadow(element as HTMLElement, members.CSS), members.default) : false; }; \ No newline at end of file diff --git a/example/app.tsx b/example/app.tsx index de7a991..716c553 100644 --- a/example/app.tsx +++ b/example/app.tsx @@ -4,7 +4,7 @@ const CTXString = React.createContext("lol"); type StateBinding = [get:T, set:React.StateUpdater]; const CTXState = React.createContext(null) as React.Context|null>; -const Outer =(props:{children:Preact.VNode})=> +const Outer =(props:{children:React.JSX.Element})=> { const binding = React.useState(11); return @@ -35,8 +35,8 @@ export default ()=> const [Store, Dispatch] = React.useReducer(reducer, {name:"seth", age:24} as Store, builder) return -
-

Title

+
+

Title!!!!

subtitle!

diff --git a/serve.tsx b/serve.tsx index 132d72d..a0a7dd1 100644 --- a/serve.tsx +++ b/serve.tsx @@ -62,8 +62,8 @@ let Configuration:Configuration =

`, {status:200, headers:{"content-type":"text/html"}});