Compare commits

...

8 Commits
master ... ssr

Author SHA1 Message Date
21f233e6b3 twind bundles added 2024-05-15 09:33:06 -04:00
1ecc3fc5bd add preact items back in 2024-05-15 09:19:10 -04:00
b81a96d91a revert to esm.sh 2024-05-14 22:52:52 -04:00
ee5881bcaa more preact tweaks 2024-05-14 20:34:18 -04:00
b2b868d62f change to add preact 2024-05-14 17:17:10 -04:00
9bc6ae00bc finish twind "bundle" 2024-05-14 15:34:18 -04:00
c8cb92e2d8 start pre-compiled twind
merge files for less browser requests
2024-05-14 12:19:01 -04:00
326a78acfe ssr with twind working 2024-05-14 10:40:52 -04:00
15 changed files with 385 additions and 87 deletions

View File

@ -1,7 +1,12 @@
import * as ISO from ">able/iso-elements.tsx";
import React from "react";
console.log(ISO)
const Custom =()=>{
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-red-500 text-white">App</h1>
<h1 class="p-4 bg-blue-500 text-white">App</h1>
<Custom/>
</div>;

2
bundled/preact/compat.js Normal file

File diff suppressed because one or more lines are too long

15
bundled/preact/signals.js Normal file

File diff suppressed because one or more lines are too long

9
bundled/preact/ssr.mjs Normal file

File diff suppressed because one or more lines are too long

16
bundled/test.tsx Normal file
View File

@ -0,0 +1,16 @@
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)

4
bundled/twind/core.js Normal file

File diff suppressed because one or more lines are too long

209
bundled/twind/presets.d.ts vendored Normal file
View File

@ -0,0 +1,209 @@
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 };

24
bundled/twind/presets.js Normal file

File diff suppressed because one or more lines are too long

View File

@ -169,8 +169,9 @@ 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/es2022/core.mjs`;
importMap["@twind/core"] = `https://esm.sh/v126/@twind/core@1.1.3`;
importMap[">able/"] = `${RootHost}`;
if(!importMap[">able/app.tsx"])
{
@ -199,7 +200,8 @@ 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[] || [];

View File

@ -1,28 +1,25 @@
{
"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",
"react": "https://esm.sh/preact@10.20.2/compat",
"react-original": "https://esm.sh/preact@10.20.2/compat",
"react-original/": "https://esm.sh/preact@10.20.2/compat/",
"react/": "https://esm.sh/preact@10.20.2/compat/",
"@preact/signals": "https://esm.sh/@preact/signals@1.2.3?deps=preact@10.20.2",
"signals-original": "https://esm.sh/@preact/signals@1.2.3?deps=preact@10.20.2",
"@twind/core": "https://esm.sh/v126/@twind/core@1.1.3/es2022/core.mjs",
">other/": "https://esm.sh/",
">able/": "./",
">able/app.tsx": "./app.tsx"
},
"tasks": {
"check": "deno run -A --no-lock ./cli.tsx check",
"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"]
}
}
">able/": "./",
">able/app.tsx": "./app.tsx"
},
"tasks": {
"check": "deno run -A --no-lock ./cli.tsx check",
"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",
"jsxImportSource": "react",
"lib": ["deno.window", "dom", "dom.iterable", "dom.asynciterable"]
}
}

View File

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

View File

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

View File

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

View File

@ -28,6 +28,7 @@ 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`;
@ -36,7 +37,7 @@ Configure({
},
async Extra(inReq, inURL, inExt, inMap, inConfig)
{
if(!inURL.pathname.startsWith(encodeURI("/>")))
if(!inURL.pathname.startsWith(encodeURI("/>")) && !inURL.pathname.startsWith("/bundled/") )
{
if(Transpile.Check(inExt) && !inURL.searchParams.get("reload"))
{

View File

@ -1,5 +1,6 @@
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";
@ -34,7 +35,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, Shell:CustomHTTPHandler, Remap:CustomRemapper};
export type Configuration = {Start:string, Allow:string, Reset:string, SWCOp:SWCW.Options, Serve:CustomHTTPHandler, Extra:CustomHTTPHandler, Remap:CustomRemapper};
export type ConfigurationArgs = Partial<Configuration>;
let Configuration:Configuration =
{
@ -47,25 +48,6 @@ 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,
@ -195,7 +177,7 @@ export default async()=>
}
// transpileable files
if(Transpile.Check(ext))
if(Transpile.Check(ext) && !url.pathname.startsWith("/bundled/"))
{
const code = await Transpile.Fetch(proxy, url.pathname);
if(code)
@ -207,11 +189,38 @@ export default async()=>
// custom page html
if(!ext)
{
const shell = await Configuration.Shell(req, url, ext, ImportMap, Configuration);
if(shell)
let markup = "";
let styles = "";
try
{
return shell;
const User = await import("./run-browser.tsx");
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