4 changed files with 31 additions and 31 deletions
--- a/deno.json
+++ b/deno.json
@ -3,10 +3,9 @@
        "deno.window", "DOM"
    ]},
    "imports": {
-        "react": "https://esm.sh/preact@10.13.2/compat",
-        
        "react-original": "https://esm.sh/preact@10.13.2/compat",
-        "@eno/app": "./example/app.tsx"
+        "react": "https://esm.sh/preact@10.13.2/compat",
+        "@eno/app": "./dummy-app.tsx"
    },
    "tasks":
    {
--- a/dummy-app.tsx
+++ b/dummy-app.tsx
@ -0,0 +1,3 @@
+import React from "react";
+
+export default ()=> <div>dummy app</div>
--- a/example/app.tsx
+++ b/example/app.tsx
@ -1,10 +1,7 @@
-import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.1.4";
-import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.7";
 import React from "react";
 import Component from "./deep/component.tsx";

-export default ()=>
-{
+export default ()=>{
    const [countGet, countSet] = React.useState(1);   
 return <div class="p-4 font-sans">
    <h1 class="my-2 font(bold serif) text(2xl)">Title!!</h1>
@ -12,8 +9,3 @@ export default ()=>
    <Component/>
 </div>;
 };
-
-export const CSS = {
-    presets: [TWPreTail(), TWPreAuto()],
-    hash:false
-};
--- a/server.tsx
+++ b/server.tsx
@ -1,7 +1,7 @@
 import * as ESBuild from 'https://deno.land/x/esbuild@v0.14.45/mod.js';
 import * as MIME from "https://deno.land/std@0.180.0/media_types/mod.ts";
 import { debounce } from "https://deno.land/std@0.151.0/async/debounce.ts";
-import SSR from "https://esm.sh/v113/preact-render-to-string@6.0.2";
+import SSR from "https://esm.sh/v113/preact-render-to-string@6.0.2/deno/preact-render-to-string.mjs";
 import React, {createElement as h} from "react";

 const Transpiled = new Map();
@ -127,10 +127,7 @@ catch(e)
    console.log(`deno.json not found`);
 }

-import {default as App, CSS} from "@eno/app";
-import * as Twind from "https://esm.sh/@twind/core@1.1.3";
-const TwindInst = Twind.install(CSS);
-
+const App = await import("@eno/app");

 Deno.serve({ port: 3000 }, async(_req:Request) =>
 {
@ -223,25 +220,34 @@ FileListen("${url.pathname}", reloadHandler);`;
        }
        else
        {
-            const results = Twind.extract(SSR(<App/>), TwindInst);
-
            type = `text/html`;
            body = `<!doctype html>
 <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <style data-twind>${results.css}</style>
        <script type="importmap">${JSON.stringify(ImportObject)}</script>
        <script async src="https://ga.jspm.io/npm:es-module-shims@1.5.1/dist/es-module-shims.js" crossorigin="anonymous"></script>
    </head>
    <body>
-        <div id="app">${results.html}</div>
+        <div id="app">${SSR(<App.default/>)}</div>
        <script type="module">
+            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";
+            
+            const Configure = {presets: [TWPreTail(), TWPreAuto()]};
+            const ShadowDOM = document.querySelector("#app").attachShadow({mode: "open"});
+            const ShadowDiv = document.createElement("div");
+            const ShadowCSS = document.createElement("style");
+            ShadowDOM.append(ShadowCSS);
+            ShadowDOM.append(ShadowDiv);
+
+            TW.observe(TW.twind(Configure, TW.cssom(ShadowCSS)), ShadowDiv);
+
+            import App from "@eno/app";
            import {render, createElement as H} from "react";
-            import * as Twind from "https://esm.sh/@twind/core@1.1.3";
-            import {default as App, CSS} from "@eno/app";
-            Twind.install(CSS);
-            render(H(()=>H(App)), document.querySelector("#app"));
+            render(H(()=>H(App)), ShadowDiv);
+
        </script>
    </body>
 </html>`;