app.tsx

@@ -1,12 +1,7 @@
 import * as ISO from ">able/iso-elements.tsx";
-import React from "react";
 
-const Custom =()=>{
+console.log(ISO)
-    const [countGet, countSet] = React.useState(5)
-    return <h1 class="p-4 bg-emerald-400 font-black" onClick={_=>countSet(countGet+1)}>CUSTOM {countGet}</h1>;
-}
 
 export default ()=><div>
-    <h1 class="p-4 bg-blue-500 text-white">App</h1>
+    <h1 class="p-4 bg-red-500 text-white">App</h1>
-    <Custom/>
 </div>;

bundled/test.tsx

@@ -1,16 +0,0 @@
-import * as TW from "./twind/core.js";
-import {presetAutoprefix, presetTailwind} from "./twind/presets.js"
-const Configure =
-{
-  theme: {},
-  presets: [presetAutoprefix(), presetTailwind()],
-  hash: false
-} as TW.TwindUserConfig;
-
-//console.log(TW.install(Configure));
-
-
-
-import * as LOL from "react";
-
-console.log(LOL.jsx)

bundled/twind/presets.d.ts

@@ -1,209 +0,0 @@
-
-import { MaybeArray, BaseTheme, CSSProperties, Preset } from 'https://esm.sh/v135/@twind/core@1.1.3/core.d.ts';
-
-declare function presetAutoprefix(): Preset;
-export { presetAutoprefix };
-
-
-
-declare module 'https://esm.sh/v135/@twind/core@1.1.3/core.d.ts' {
-    interface CustomProperties {
-        '--tw-backdrop-blur'?: string;
-        '--tw-backdrop-brightness'?: string;
-        '--tw-backdrop-contrast'?: string;
-        '--tw-backdrop-grayscale'?: string;
-        '--tw-backdrop-hue-rotate'?: string;
-        '--tw-backdrop-invert'?: string;
-        '--tw-backdrop-opacity'?: string;
-        '--tw-backdrop-saturate'?: string;
-        '--tw-backdrop-sepia'?: string;
-        '--tw-bg-opacity'?: string | number;
-        '--tw-blur'?: string;
-        '--tw-border-opacity'?: string | number;
-        '--tw-border-spacing-x'?: string | number;
-        '--tw-border-spacing-y'?: string | number;
-        '--tw-brightness'?: string;
-        '--tw-contrast'?: string;
-        '--tw-divide-opacity'?: string | number;
-        '--tw-divide-x-reverse'?: string | number;
-        '--tw-divide-y-reverse'?: string | number;
-        '--tw-drop-shadow'?: string;
-        '--tw-gradient-from'?: string;
-        '--tw-gradient-stops'?: string;
-        '--tw-gradient-to'?: string;
-        '--tw-gradient-via'?: string;
-        '--tw-grayscale'?: string;
-        '--tw-hue-rotate'?: string;
-        '--tw-invert'?: string;
-        '--tw-numeric-figure'?: string;
-        '--tw-numeric-fraction'?: string;
-        '--tw-numeric-spacing'?: string;
-        '--tw-opacity'?: string | number;
-        '--tw-ordinal'?: string;
-        '--tw-placeholder-opacity'?: string;
-        '--tw-ring-color'?: string;
-        '--tw-ring-inset'?: string;
-        '--tw-ring-offset-color'?: string;
-        '--tw-ring-offset-shadow'?: string;
-        '--tw-ring-offset-width'?: string;
-        '--tw-ring-opacity'?: string | number;
-        '--tw-ring-shadow'?: string;
-        '--tw-rotate'?: string;
-        '--tw-saturate'?: string;
-        '--tw-scale-x'?: string;
-        '--tw-scale-y'?: string;
-        '--tw-sepia'?: string;
-        '--tw-shadow'?: string;
-        '--tw-shadow-color'?: string;
-        '--tw-shadow-colored'?: string;
-        '--tw-skew-x'?: string;
-        '--tw-skew-y'?: string;
-        '--tw-slashed-zero'?: string;
-        '--tw-scroll-snap-strictness'?: string;
-        '--tw-text-opacity'?: string;
-        '--tw-pan-x'?: string;
-        '--tw-pan-y'?: string;
-        '--tw-pinch-zoom'?: string;
-        '--tw-touch-action'?: string;
-        '--tw-transform'?: string;
-        '--tw-translate-x'?: string;
-        '--tw-translate-y'?: string;
-    }
-}
-declare type FontSizeValue = string | [size: string, lineHeight: string] | [size: string, options: {
-    lineHeight?: string;
-    letterSpacing?: string;
-    fontWeight?: string;
-}];
-declare type FontFamilyValue = MaybeArray<string> | [fontFamily: MaybeArray<string>, configuration: {
-    fontFeatureSettings?: string;
-}];
-interface Container {
-    screens?: BaseTheme['screens'];
-    center?: boolean;
-    padding?: string | Record<string, string>;
-}
-interface TailwindTheme extends BaseTheme {
-    columns: Record<string, string>;
-    spacing: Record<string, string>;
-    durations: Record<string, MaybeArray<string>>;
-    accentColor: BaseTheme['colors'];
-    animation: Record<string, MaybeArray<string>>;
-    aria: Record<string, string>;
-    aspectRatio: Record<string, string>;
-    backdropBlur: Record<string, string>;
-    backdropBrightness: Record<string, string>;
-    backdropContrast: Record<string, string>;
-    backdropGrayscale: Record<string, string>;
-    backdropHueRotate: Record<string, string>;
-    backdropInvert: Record<string, string>;
-    backdropOpacity: Record<string, string>;
-    backdropSaturate: Record<string, string>;
-    backdropSepia: Record<string, string>;
-    backgroundColor: BaseTheme['colors'];
-    backgroundImage: Record<string, MaybeArray<string>>;
-    backgroundOpacity: Record<string, string>;
-    backgroundPosition: Record<string, string>;
-    backgroundSize: Record<string, MaybeArray<string>>;
-    blur: Record<string, string>;
-    borderColor: BaseTheme['colors'];
-    borderOpacity: Record<string, string>;
-    borderRadius: Record<string, string>;
-    borderSpacing: Record<string, string>;
-    borderWidth: Record<string, string>;
-    boxShadow: Record<string, MaybeArray<string>>;
-    boxShadowColor: BaseTheme['colors'];
-    brightness: Record<string, string>;
-    caretColor: BaseTheme['colors'];
-    container: Container;
-    content: Record<string, string>;
-    contrast: Record<string, string>;
-    cursor: Record<string, MaybeArray<string>>;
-    data: Record<string, string>;
-    divideColor: BaseTheme['colors'];
-    divideOpacity: Record<string, string>;
-    divideWidth: Record<string, string>;
-    dropShadow: Record<string, MaybeArray<string>>;
-    fill: BaseTheme['colors'];
-    flex: Record<string, string>;
-    flexBasis: Record<string, string>;
-    flexGrow: Record<string, number | string>;
-    flexShrink: Record<string, number | string>;
-    fontFamily: Record<string, FontFamilyValue>;
-    fontSize: Record<string, FontSizeValue>;
-    fontWeight: Record<string, string>;
-    gap: Record<string, string>;
-    gradientColorStops: BaseTheme['colors'];
-    grayscale: Record<string, string>;
-    gridAutoColumns: Record<string, string>;
-    gridAutoRows: Record<string, string>;
-    gridColumn: Record<string, string>;
-    gridColumnEnd: Record<string, string>;
-    gridColumnStart: Record<string, string>;
-    gridRow: Record<string, string>;
-    gridRowEnd: Record<string, string>;
-    gridRowStart: Record<string, string>;
-    gridTemplateColumns: Record<string, string>;
-    gridTemplateRows: Record<string, string>;
-    height: Record<string, string>;
-    hueRotate: Record<string, string>;
-    inset: Record<string, string>;
-    invert: Record<string, string>;
-    keyframes: Record<string, Record<string, CSSProperties>>;
-    letterSpacing: Record<string, string>;
-    lineHeight: Record<string, string>;
-    listStyleType: Record<string, string>;
-    margin: Record<string, string>;
-    maxHeight: Record<string, string>;
-    maxWidth: Record<string, string>;
-    minHeight: Record<string, string>;
-    minWidth: Record<string, string>;
-    objectPosition: Record<string, string>;
-    opacity: Record<string, string>;
-    order: Record<string, string>;
-    outlineColor: BaseTheme['colors'];
-    outlineOffset: Record<string, string>;
-    outlineWidth: Record<string, string>;
-    padding: Record<string, string>;
-    placeholderColor: BaseTheme['colors'];
-    placeholderOpacity: Record<string, string>;
-    ringColor: BaseTheme['colors'];
-    ringOffsetColor: BaseTheme['colors'];
-    ringOffsetWidth: Record<string, string>;
-    ringOpacity: Record<string, string>;
-    ringWidth: Record<string, string>;
-    rotate: Record<string, string>;
-    saturate: Record<string, string>;
-    scale: Record<string, string>;
-    scrollMargin: Record<string, string>;
-    scrollPadding: Record<string, string>;
-    sepia: Record<string, string>;
-    skew: Record<string, string>;
-    space: Record<string, string>;
-    stroke: BaseTheme['colors'];
-    strokeWidth: Record<string, string>;
-    supports: Record<string, string>;
-    textColor: BaseTheme['colors'];
-    textDecorationColor: BaseTheme['colors'];
-    textDecorationThickness: Record<string, string>;
-    textIndent: Record<string, string>;
-    textOpacity: Record<string, string>;
-    textUnderlineOffset: Record<string, string>;
-    transformOrigin: Record<string, string>;
-    transitionDelay: Record<string, MaybeArray<string>>;
-    transitionDuration: Record<string, MaybeArray<string>>;
-    transitionProperty: Record<string, MaybeArray<string>>;
-    transitionTimingFunction: Record<string, MaybeArray<string>>;
-    translate: Record<string, string>;
-    width: Record<string, string>;
-    willChange: Record<string, string>;
-    zIndex: Record<string, string>;
-}
-
-interface TailwindPresetOptions {
-    /** Allows to disable to tailwind preflight (default: `false` eg include the tailwind preflight ) */
-    disablePreflight?: boolean | undefined;
-}
-declare function presetTailwind({ disablePreflight, }?: TailwindPresetOptions): Preset<TailwindTheme>;
-
-export { Container, FontFamilyValue, FontSizeValue, TailwindPresetOptions, TailwindTheme, presetTailwind };

checker.tsx

@@ -169,9 +169,8 @@ export async function Check()
 
             importMap["react"] = `https://esm.sh/preact@10.20.2/compat`;
             importMap["react/"] = `https://esm.sh/preact@10.20.2/compat/`;
-            importMap["react/jsx-runtime"] = "https://esm.sh/stable/preact@10.20.2/es2022/jsx-runtime.js",
             importMap["@preact/signals"] = `https://esm.sh/@preact/signals@1.2.3?deps=preact@10.20.2`;
-            importMap["@twind/core"] = `https://esm.sh/v126/@twind/core@1.1.3`;
+            importMap["@twind/core"] = `https://esm.sh/v126/@twind/core@1.1.3/es2022/core.mjs`;
             importMap[">able/"] = `${RootHost}`;
             if(!importMap[">able/app.tsx"])
             {
@@ -200,8 +199,7 @@ export async function Check()
             const optionsRequired = 
             {
                 "lib": ["deno.window", "dom", "dom.iterable", "dom.asynciterable"],
-                "jsx": "react-jsx",
+                "jsx": "react-jsx"
-                "jsxImportSource": "react"
             }
             const optionsCurrent = config.json.compilerOptions as Record<string, string|string[]> || {};
             //const compLib:string[] = compOpts.lib as string[] || [];

deno.jsonc

@@ -1,25 +1,28 @@
 {
-  "imports": {
+	"imports": {
-    "react": "./bundled/preact/compat.js",
-    "react/jsx-runtime": "./bundled/preact/compat.js",
-    "@preact/signals": "./bundled/preact/signals.js",
-    "@twind/core": "./bundled/twind/core.js",
-	"@twind/presets": "./bundled/twind/presets.js",
 
-    ">able/": "./",
+		"react": "https://esm.sh/preact@10.20.2/compat",
-    ">able/app.tsx": "./app.tsx"
+		"react-original": "https://esm.sh/preact@10.20.2/compat",
-  },
+		"react-original/": "https://esm.sh/preact@10.20.2/compat/",
-  "tasks": {
+		"react/": "https://esm.sh/preact@10.20.2/compat/",
-    "check": "deno run -A --no-lock ./cli.tsx check",
+		"@preact/signals": "https://esm.sh/@preact/signals@1.2.3?deps=preact@10.20.2",
-    "local": "deno run -A --no-lock ./cli.tsx local",
+		"signals-original": "https://esm.sh/@preact/signals@1.2.3?deps=preact@10.20.2",
-    "debug": "deno run -A --no-lock ./cli.tsx debug",
+		"@twind/core": "https://esm.sh/v126/@twind/core@1.1.3/es2022/core.mjs",
-    "serve": "deno run -A --no-lock ./cli.tsx serve",
+
-    "cloud": "deno run -A --no-lock ./cli.tsx cloud",
+		">other/": "https://esm.sh/",
-    "install": "deno install -A -r -f -n able ./cli.tsx"
+		">able/": "./",
-  },
+		">able/app.tsx": "./app.tsx"
-  "compilerOptions": {
+	},
-    "jsx": "react-jsx",
+	"tasks": {
-    "jsxImportSource": "react",
+		"check": "deno run -A --no-lock ./cli.tsx check",
-    "lib": ["deno.window", "dom", "dom.iterable", "dom.asynciterable"]
+		"local": "deno run -A --no-lock ./cli.tsx local",
-  }
+		"debug": "deno run -A --no-lock ./cli.tsx debug",
-}
+		"serve": "deno run -A --no-lock ./cli.tsx serve",
+		"cloud": "deno run -A --no-lock ./cli.tsx cloud",
+		"install": "deno install -A -r -f -n able ./cli.tsx"
+	},
+	"compilerOptions": {
+		"jsx": "react-jsx",
+		"lib": ["deno.window", "dom", "dom.iterable", "dom.asynciterable"]
+	}
+}

deno.lock

@@ -1,11 +1,5 @@
 {
   "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",
@@ -27,15 +21,12 @@
     "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"
   }
 }

hmr-react.tsx

@@ -172,5 +172,5 @@ const ProxyReducer =(inReducer:(inState:Storelike, inAction:string)=>Storelike,
 };
 
 export * from "react-original";
-export {ProxyCreate as createElement, ProxyCreate as jsxs, ProxyCreate as jsx, ProxyState as useState, ProxyReducer as useReducer };
+export {ProxyCreate as createElement, ProxyState as useState, ProxyReducer as useReducer };
-export default {...ReactParts, createElement:ProxyCreate, useState:ProxyState, useReducer:ProxyReducer };
+export default {...ReactParts, createElement:ProxyCreate, useState:ProxyState, useReducer:ProxyReducer};

run-browser.tsx

@@ -1,28 +1,16 @@
 import React from "react";
 import * as TW from   "@twind/core";
-import * as Pre from "@twind/presets";
+import TWPreTail from "https://esm.sh/v126/@twind/preset-tailwind@1.1.3/es2022/preset-tailwind.mjs";
-import * as App from ">able/app.tsx";
+import TWPreAuto from "https://esm.sh/v126/@twind/preset-autoprefix@1.0.7/es2022/preset-autoprefix.mjs";
 
 const Configure =
 {
   theme: {},
-  presets: [Pre.presetAutoprefix(), Pre.presetTailwind()],
+  presets: [TWPreTail(), TWPreAuto()],
   hash: false
 } as TW.TwindUserConfig;
 
-let TwindInst:TW.Twind<TW.BaseTheme, unknown>;
+export const Shadow =(inElement:HTMLElement, inConfig:TW.TwindUserConfig)=>
-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");
@@ -30,12 +18,16 @@ const Shadow =(inElement:HTMLElement)=>
 
     ShadowDOM.append(ShadowCSS);
     ShadowDOM.append(ShadowDiv);
-    TW.observe(TW.twind(TwindConfig, TW.cssom(ShadowCSS)), ShadowDiv);
+    TW.observe(TW.twind(inConfig, TW.cssom(ShadowCSS)), ShadowDiv);
     return ShadowDiv;
 };
 
-export default async(inSelector:string, inShadow?:boolean):Promise<(()=>void)|false>=>
+export default async(inSelector:string, inModulePath:string, inMemberApp="default", inMemberCSS="CSS", inShadow=false):Promise<(()=>void)|false>=>
 {
+  if(!inModulePath)
+  {
+    return false;
+  }
 
   let dom = document.querySelector(inSelector);
   if(!dom)
@@ -44,18 +36,30 @@ export default async(inSelector:string, inShadow?:boolean):Promise<(()=>void)|fa
     return false;
   }
 
+  const module = await import(inModulePath);
+
+  const merge = inMemberCSS ? {...Configure, ...module[inMemberCSS]} : Configure;
+
   if(inShadow)
   {
-    console.log("init shadow root!", inShadow);
+    dom = Shadow(dom as HTMLElement, merge);
-    dom = Shadow(dom as HTMLElement);
   }
   else
   {
-    TW.install(TwindConfig);
+    TW.install(merge);
   }
 
-  const app = React.createElement(()=> React.createElement(App.default, null), null);
+  const app = React.createElement(()=> React.createElement(module[inMemberApp], null), null);
-  React.hydrate(app, dom);
+  if(React.render)
-  return ()=>dom && React.unmountComponentAtNode(dom);
+  {
-
+    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;        
+  }
 };

run-local.tsx

@@ -28,7 +28,6 @@ Configure({
     {
         inImports["react-original"] = inImports["react"];
         inImports["react"] = `/>able/hmr-react.tsx`;
-        inImports["react/jsx-runtime"] = `/>able/hmr-react.tsx`;
 
         inImports["signals-original"] = inImports["@preact/signals"];
         inImports["@preact/signals"] = `/>able/hmr-signal.tsx`;
@@ -37,7 +36,7 @@ Configure({
     },
     async Extra(inReq, inURL, inExt, inMap, inConfig)
     {
-        if(!inURL.pathname.startsWith(encodeURI("/>")) && !inURL.pathname.startsWith("/bundled/") )
+        if(!inURL.pathname.startsWith(encodeURI("/>")))
         {
             if(Transpile.Check(inExt) && !inURL.searchParams.get("reload"))
             {

run-serve.tsx

@@ -1,6 +1,5 @@
 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 "./bundled/preact/ssr.mjs";
 import { HuntConfig, Root } from "./checker.tsx";
 import CustomServe from ">able/api.tsx"; 
 
@@ -35,7 +34,7 @@ const ImportMapReload =async()=>
 
 export type CustomHTTPHandler = (inReq:Request, inURL:URL, inExt:string|false, inMap:{imports:Record<string, string>}, inConfig:Configuration)=>void|false|Response|Promise<Response|void|false>;
 export type CustomRemapper = (inImports:Record<string, string>, inConfig:Configuration)=>Record<string, string>;
-export type Configuration     = {Start:string, Allow:string, Reset:string, SWCOp:SWCW.Options, Serve:CustomHTTPHandler, Extra:CustomHTTPHandler, Remap:CustomRemapper};
+export type Configuration     = {Start:string, Allow:string, Reset:string, SWCOp:SWCW.Options, Serve:CustomHTTPHandler, Extra:CustomHTTPHandler, Shell:CustomHTTPHandler, Remap:CustomRemapper};
 export type ConfigurationArgs = Partial<Configuration>;
 let Configuration:Configuration =
 {
@@ -48,6 +47,25 @@ let Configuration:Configuration =
     {
         return inImports;
     },
+    Shell(inReq, inURL, inExt, inMap, inConfig)
+    {
+        return new Response(
+            `<!doctype html>
+            <html>
+                <head>
+                    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+                    <meta charset="utf-8"/>
+                </head>
+                <body>
+                    <div id="app"></div>
+                    <script type="importmap">${JSON.stringify(inMap, null, " ")}</script>
+                    <script type="module">
+                        import Mount from ">able/run-browser.tsx";
+                        Mount("#app", "${inConfig.Start}");
+                    </script>
+                </body>
+            </html>`, {status:200, headers:{"content-type":"text/html"}});
+    },
     SWCOp:
     {
         sourceMaps: false,
@@ -177,7 +195,7 @@ export default async()=>
         }
     
         // transpileable files
-        if(Transpile.Check(ext) && !url.pathname.startsWith("/bundled/"))
+        if(Transpile.Check(ext))
         {
             const code = await Transpile.Fetch(proxy, url.pathname);    
             if(code)
@@ -189,38 +207,11 @@ export default async()=>
         // custom page html
         if(!ext)
         {
-            let markup = "";
+            const shell = await Configuration.Shell(req, url, ext, ImportMap, Configuration);
-            let styles = "";
+            if(shell)
-            try
             {
-                const User = await import("./run-browser.tsx");
+                return shell;
-                markup = SSR(<User.CustomApp/>);
-                const {css, html} = User.CustomTwindExtractor(markup);
-                markup = html;
-                styles = css;
             }
-            catch(e)
-            {
-                console.log("SSR error:")
-                console.log(e);
-            }
-            return new Response(
-                `<!doctype html>
-                <html>
-                    <head>
-                        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-                        <meta charset="utf-8"/>
-                        <style>${styles}</style>
-                    </head>
-                    <body>
-                        <div id="app">${markup}</div>
-                        <script type="importmap">${JSON.stringify(ImportMap, null, " ")}</script>
-                        <script type="module">
-                            import Mount from ">able/run-browser.tsx";
-                            Mount("#app");
-                        </script>
-                    </body>
-                </html>`, {status:200, headers:{"content-type":"text/html"}});
         }
     
         // cache-reset route