Compare commits
No commits in common. "ssr" and "master" have entirely different histories.
9
app.tsx
9
app.tsx
@ -1,12 +1,7 @@
|
||||
import * as ISO from ">able/iso-elements.tsx";
|
||||
import React from "react";
|
||||
|
||||
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>;
|
||||
}
|
||||
console.log(ISO)
|
||||
|
||||
export default ()=><div>
|
||||
<h1 class="p-4 bg-blue-500 text-white">App</h1>
|
||||
<Custom/>
|
||||
<h1 class="p-4 bg-red-500 text-white">App</h1>
|
||||
</div>;
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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)
|
||||
File diff suppressed because one or more lines are too long
209
bundled/twind/presets.d.ts
vendored
209
bundled/twind/presets.d.ts
vendored
@ -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 };
|
||||
File diff suppressed because one or more lines are too long
@ -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",
|
||||
"jsxImportSource": "react"
|
||||
"jsx": "react-jsx"
|
||||
}
|
||||
const optionsCurrent = config.json.compilerOptions as Record<string, string|string[]> || {};
|
||||
//const compLib:string[] = compOpts.lib as string[] || [];
|
||||
|
||||
49
deno.jsonc
49
deno.jsonc
@ -1,25 +1,28 @@
|
||||
{
|
||||
"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",
|
||||
"imports": {
|
||||
|
||||
">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"]
|
||||
}
|
||||
}
|
||||
"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"]
|
||||
}
|
||||
}
|
||||
11
deno.lock
11
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/preact-render-to-string@6.4.2/denonext/preact-render-to-string.mjs": "912b3613479fb420eda357ac21d3cf970753cb8f486563f9df5c222bf1ced149"
|
||||
"https://esm.sh/v135/@swc/wasm-web@1.3.62/denonext/wasm-web.mjs": "57046d46c9ef1398a294ba7447034f5966e48866a05c309cccec4bb4d6e7c61b"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 default {...ReactParts, createElement:ProxyCreate, useState:ProxyState, useReducer:ProxyReducer };
|
||||
export {ProxyCreate as createElement, ProxyState as useState, ProxyReducer as useReducer };
|
||||
export default {...ReactParts, createElement:ProxyCreate, useState:ProxyState, useReducer:ProxyReducer};
|
||||
@ -1,28 +1,16 @@
|
||||
import React from "react";
|
||||
import * as TW from "@twind/core";
|
||||
import * as Pre from "@twind/presets";
|
||||
import * as App from ">able/app.tsx";
|
||||
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";
|
||||
|
||||
const Configure =
|
||||
{
|
||||
theme: {},
|
||||
presets: [Pre.presetAutoprefix(), Pre.presetTailwind()],
|
||||
presets: [TWPreTail(), TWPreAuto()],
|
||||
hash: false
|
||||
} as 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)=>
|
||||
export const Shadow =(inElement:HTMLElement, inConfig:TW.TwindUserConfig)=>
|
||||
{
|
||||
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);
|
||||
dom = Shadow(dom as HTMLElement, merge);
|
||||
}
|
||||
else
|
||||
{
|
||||
TW.install(TwindConfig);
|
||||
TW.install(merge);
|
||||
}
|
||||
|
||||
const app = React.createElement(()=> React.createElement(App.default, null), null);
|
||||
React.hydrate(app, dom);
|
||||
return ()=>dom && React.unmountComponentAtNode(dom);
|
||||
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
||||
@ -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"))
|
||||
{
|
||||
|
||||
@ -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 = "";
|
||||
let styles = "";
|
||||
try
|
||||
const shell = await Configuration.Shell(req, url, ext, ImportMap, Configuration);
|
||||
if(shell)
|
||||
{
|
||||
const User = await import("./run-browser.tsx");
|
||||
markup = SSR(<User.CustomApp/>);
|
||||
const {css, html} = User.CustomTwindExtractor(markup);
|
||||
markup = html;
|
||||
styles = css;
|
||||
return shell;
|
||||
}
|
||||
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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user