_lib_/mount.tsx

@@ -1,27 +1,55 @@
+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 = {
+const Configure =
+{
   theme: {},
   presets:[TWPreTail(), TWPreAuto()]
 } as TW.TwindUserConfig;
 
-export default (inElement:HTMLElement, inConfig?:TW.TwindUserConfig)=>
+export const Shadow =(inElement:HTMLElement, inConfig?:TW.TwindUserConfig)=>
 {
+      /*
+    const merge = inConfig ? {...Configure, ...inConfig} : Configure;
+
     const ShadowDOM = inElement.attachShadow({ mode: "open" });
     const ShadowDiv = document.createElement("div");
     const ShadowCSS = document.createElement("style");
+
     ShadowDOM.append(ShadowCSS);
     ShadowDOM.append(ShadowDiv);
-
-    const merge = inConfig ? {...Configure, ...inConfig} : Configure;
     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);
+
+  if(React.render)
+  {
+    React.render(wrapped, inElement);
+    return ()=>React.unmountComponentAtNode(inElement);
   }
+  else
+  {
+    const reactDom = await import(`https://esm.sh/react-dom@${React.version}/client`);
+    const root = reactDom.createRoot(inElement);
+    root.render(wrapped);
+    return root.unmount;        
+  }
+};
 
-
+export default async(inSelector:string, inModulePath:string, inMemberApp="default", inMemberCSS="CSS"):Promise<()=>void|false>=>
-import * as App from "app";
+{
-import React from "react";
+  const members = await import(inModulePath);
-const Wrapper =()=> React.createElement(App.default, null, null);
+  const element = document.querySelector(inSelector);
-React.render(React.createElement(Wrapper, null, null), document.querySelector("#app"));
+  return element ? await Render(Shadow(element as HTMLElement, members.CSS), members.default) : false;
+};

deno.json

@@ -7,7 +7,7 @@
     {
         "react":"https://esm.sh/preact@10.15.1/compat",
         "react-original":"https://esm.sh/preact@10.15.1/compat",
-        "app": "./app.tsx"
+        "@app": "./app.tsx"
     },
     "tasks":
     {

deno.lock

@@ -0,0 +1,23 @@
+{
+  "version": "2",
+  "remote": {
+    "https://esm.sh/preact@10.15.1": "2b79349676a4942fbcf835c4efa909791c2f0aeca195225bf22bac9866e94b4e",
+    "https://esm.sh/preact@10.15.1/compat": "07273e22b1c335b8acc9f33c5e78165319c59bd8e2d0f3e5a2b4e028329424d9",
+    "https://esm.sh/react@18.2.0": "742d8246041966ba1137ec8c60888c35882a9d2478bce63583875f86c1e3687c",
+    "https://esm.sh/stable/preact@10.15.1/denonext/compat.js": "bad6b5b4d4fdfa5975b7a8d30410bd6877247f058e4952799fab39f66a94b8cf",
+    "https://esm.sh/stable/preact@10.15.1/denonext/hooks.js": "5c989ad368cf4f2cb3a5d7d1801843d9348c599fe3e7731d04728f7b845d724e",
+    "https://esm.sh/stable/preact@10.15.1/denonext/preact.mjs": "30710ac1d5ff3711ae0c04eddbeb706f34f82d97489f61aaf09897bc75d2a628",
+    "https://esm.sh/stable/react@18.2.0/deno/react.mjs": "a5a73ee24acca4744ee22c51d9357f31968d1f684ce253bde222b4e26d09f49f",
+    "https://esm.sh/v118/@types/prop-types@15.7.5/index.d.ts": "6a386ff939f180ae8ef064699d8b7b6e62bc2731a62d7fbf5e02589383838dea",
+    "https://esm.sh/v118/@types/react@18.2.0/global.d.ts": "549df62b64a71004aee17685b445a8289013daf96246ce4d9b087d13d7a27a61",
+    "https://esm.sh/v118/@types/react@18.2.0/index.d.ts": "b091747b1f503f434d3cac4217a13858baba87b421a7054ffdfd797da7737678",
+    "https://esm.sh/v118/@types/scheduler@0.16.3/tracing.d.ts": "f5a8b384f182b3851cec3596ccc96cb7464f8d3469f48c74bf2befb782a19de5",
+    "https://esm.sh/v118/csstype@3.1.2/index.d.ts": "4c68749a564a6facdf675416d75789ee5a557afda8960e0803cf6711fa569288",
+    "https://esm.sh/v118/preact@10.15.1/compat/src/index.d.ts": "9ec63be9612a10ff72fd4183179cde7d551ce43b3a0c2f549d8f788910d8263d",
+    "https://esm.sh/v118/preact@10.15.1/compat/src/suspense-list.d.ts": "b8e274324392157ce476ef3a48ae215c9f7003b08525d140645f19eab20d1948",
+    "https://esm.sh/v118/preact@10.15.1/compat/src/suspense.d.ts": "81f5266e0977a94347505d11b8103024211f2b4f3b2eb2aa276a10d8fd169e65",
+    "https://esm.sh/v118/preact@10.15.1/hooks/src/index.d.ts": "933eab6436614f8cd8e9b7c9b8bd54c6f3f14c3f065ba42c8c87a42d93de6595",
+    "https://esm.sh/v118/preact@10.15.1/src/index.d.ts": "fa83186a4b6caca36d52ca2d49b481c3ca5460988d4a8388d44dadc28987fb27",
+    "https://esm.sh/v118/preact@10.15.1/src/jsx.d.ts": "a6e4b7e4af3b959f8cfd41a0f475c547807ebcec8524d9605ab5c6de79f302fa"
+  }
+}

example/app.tsx

@@ -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>
+        <div class="my-4">
-            <h1>Title!</h1>
+            <h1>Title</h1>
             <h2>subtitle!</h2>
             <p>
                 <button onClick={e=>Dispatch(1)}>{Store.name}|{Store.age}?</button>

example/deno.json

@@ -3,7 +3,7 @@
     "imports":
     {
         "react":"https://esm.sh/preact@10.15.1/compat",
-        "app": "./app.tsx"
+        "@app": "./app.tsx"
     },
     "tasks":
     {

serve.tsx

@@ -62,10 +62,8 @@ let Configuration:Configuration =
                     <div id="app"></div>
                     <script type="importmap">${JSON.stringify(inMap)}</script>
                     <script type="module">
-                        import App from "app";
+                        import Mount from "/_lib_/mount.tsx";
-                        import React from "react";
+                        Mount("#app", "@app");
-                        const Wrapper =(props)=> React.createElement(App);
-                        React.render(React.createElement(Wrapper), document.querySelector("#app"))
                     </script>
                 </body>
             </html>`, {status:200, headers:{"content-type":"text/html"}});
@@ -76,7 +74,7 @@ let Configuration:Configuration =
         minify: true,
         jsc:
         {
-            target:"es2017",
+            target:"es2022",
             minify:
             {
                 compress: { unused: true },