_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);
+    React.render(app, dom);
-    return ()=>React.unmountComponentAtNode(inElement);
+    return ()=>dom && React.unmountComponentAtNode(dom);
   }
   else
   {
     const reactDom = await import(`https://esm.sh/react-dom@${React.version}/client`);
-    const root = reactDom.createRoot(inElement);
+    const root = reactDom.createRoot(dom);
-    root.render(wrapped);
+    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;
 };

example/app.tsx

@@ -4,7 +4,7 @@ const CTXString = React.createContext("lol");
 
 type StateBinding<T> = [get:T, set:React.StateUpdater<T>];
 const CTXState = React.createContext(null) as React.Context<StateBinding<number>|null>;
-const Outer =(props:{children:Preact.VNode})=>
+const Outer =(props:{children:React.JSX.Element})=>
 {
     const binding = React.useState(11);
     return <CTXState.Provider value={binding}>
@@ -35,8 +35,8 @@ export default ()=>
     
     const [Store, Dispatch] = React.useReducer(reducer, {name:"seth", age:24} as Store, builder)
     return <CTXString.Provider value="intradestink">
-        <div class="my-4">
+        <div class="my-4 font-sans">
-            <h1>Title</h1>
+            <h1 class="font-black text-xl">Title!!!!</h1>
             <h2>subtitle!</h2>
             <p>
                 <button onClick={e=>Dispatch(1)}>{Store.name}|{Store.age}?</button>