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 * 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>
|
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>;
|
</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/"] = `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["@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}`;
|
importMap[">able/"] = `${RootHost}`;
|
||||||
if(!importMap[">able/app.tsx"])
|
if(!importMap[">able/app.tsx"])
|
||||||
{
|
{
|
||||||
@ -200,8 +199,7 @@ export async function Check()
|
|||||||
const optionsRequired =
|
const optionsRequired =
|
||||||
{
|
{
|
||||||
"lib": ["deno.window", "dom", "dom.iterable", "dom.asynciterable"],
|
"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 optionsCurrent = config.json.compilerOptions as Record<string, string|string[]> || {};
|
||||||
//const compLib:string[] = compOpts.lib as string[] || [];
|
//const compLib:string[] = compOpts.lib as string[] || [];
|
||||||
|
15
deno.jsonc
15
deno.jsonc
@ -1,11 +1,15 @@
|
|||||||
{
|
{
|
||||||
"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/": "./",
|
||||||
">able/app.tsx": "./app.tsx"
|
">able/app.tsx": "./app.tsx"
|
||||||
},
|
},
|
||||||
@ -19,7 +23,6 @@
|
|||||||
},
|
},
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"jsx": "react-jsx",
|
"jsx": "react-jsx",
|
||||||
"jsxImportSource": "react",
|
|
||||||
"lib": ["deno.window", "dom", "dom.iterable", "dom.asynciterable"]
|
"lib": ["deno.window", "dom", "dom.iterable", "dom.asynciterable"]
|
||||||
}
|
}
|
||||||
}
|
}
|
11
deno.lock
11
deno.lock
@ -1,11 +1,5 @@
|
|||||||
{
|
{
|
||||||
"version": "3",
|
"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": {
|
"remote": {
|
||||||
"https://deno.land/std@0.180.0/media_types/_db.ts": "7606d83e31f23ce1a7968cbaee852810c2cf477903a095696cdc62eaab7ce570",
|
"https://deno.land/std@0.180.0/media_types/_db.ts": "7606d83e31f23ce1a7968cbaee852810c2cf477903a095696cdc62eaab7ce570",
|
||||||
"https://deno.land/std@0.180.0/media_types/_util.ts": "916efbd30b6148a716f110e67a4db29d6949bf4048997b754415dd7e42c52378",
|
"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/_util/asserts.ts": "178dfc49a464aee693a7e285567b3d0b555dc805ff490505a8aae34f9cfb1462",
|
||||||
"https://deno.land/x/jsonct@v0.1.0/src/parse.ts": "a3a016822446b0584b40bae9098df480db5590a9915c9e3c623ba2801cf1b8df",
|
"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/@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/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.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/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/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/jsx-runtime.js": "2a5b981955e92e3ff86906ac0e5955ec0e6e5ca71032f3f063912cb85ae9a7f1",
|
||||||
"https://esm.sh/stable/preact@10.20.2/denonext/preact.mjs": "f418bc70c24b785703afb9d4dea8cdc1e315e43c8df620a0c52fd27ad9bd70eb",
|
"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"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -172,5 +172,5 @@ const ProxyReducer =(inReducer:(inState:Storelike, inAction:string)=>Storelike,
|
|||||||
};
|
};
|
||||||
|
|
||||||
export * from "react-original";
|
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};
|
@ -1,28 +1,16 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import * as TW from "@twind/core";
|
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 =
|
const Configure =
|
||||||
{
|
{
|
||||||
theme: {},
|
theme: {},
|
||||||
presets: [Pre.presetAutoprefix(), Pre.presetTailwind()],
|
presets: [TWPreTail(), TWPreAuto()],
|
||||||
hash: false
|
hash: false
|
||||||
} as TW.TwindUserConfig;
|
} 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 ShadowDOM = inElement.attachShadow({ mode: "open" });
|
||||||
const ShadowDiv = document.createElement("div");
|
const ShadowDiv = document.createElement("div");
|
||||||
@ -30,12 +18,16 @@ const Shadow =(inElement:HTMLElement)=>
|
|||||||
|
|
||||||
ShadowDOM.append(ShadowCSS);
|
ShadowDOM.append(ShadowCSS);
|
||||||
ShadowDOM.append(ShadowDiv);
|
ShadowDOM.append(ShadowDiv);
|
||||||
TW.observe(TW.twind(TwindConfig, TW.cssom(ShadowCSS)), ShadowDiv);
|
TW.observe(TW.twind(inConfig, TW.cssom(ShadowCSS)), ShadowDiv);
|
||||||
return 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);
|
let dom = document.querySelector(inSelector);
|
||||||
if(!dom)
|
if(!dom)
|
||||||
@ -44,18 +36,30 @@ export default async(inSelector:string, inShadow?:boolean):Promise<(()=>void)|fa
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const module = await import(inModulePath);
|
||||||
|
|
||||||
|
const merge = inMemberCSS ? {...Configure, ...module[inMemberCSS]} : Configure;
|
||||||
|
|
||||||
if(inShadow)
|
if(inShadow)
|
||||||
{
|
{
|
||||||
console.log("init shadow root!", inShadow);
|
dom = Shadow(dom as HTMLElement, merge);
|
||||||
dom = Shadow(dom as HTMLElement);
|
|
||||||
}
|
}
|
||||||
else
|
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)
|
||||||
|
{
|
||||||
|
React.render(app, dom);
|
||||||
return ()=>dom && React.unmountComponentAtNode(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-original"] = inImports["react"];
|
||||||
inImports["react"] = `/>able/hmr-react.tsx`;
|
inImports["react"] = `/>able/hmr-react.tsx`;
|
||||||
inImports["react/jsx-runtime"] = `/>able/hmr-react.tsx`;
|
|
||||||
|
|
||||||
inImports["signals-original"] = inImports["@preact/signals"];
|
inImports["signals-original"] = inImports["@preact/signals"];
|
||||||
inImports["@preact/signals"] = `/>able/hmr-signal.tsx`;
|
inImports["@preact/signals"] = `/>able/hmr-signal.tsx`;
|
||||||
@ -37,7 +36,7 @@ Configure({
|
|||||||
},
|
},
|
||||||
async Extra(inReq, inURL, inExt, inMap, inConfig)
|
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"))
|
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 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 * 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 { HuntConfig, Root } from "./checker.tsx";
|
||||||
import CustomServe from ">able/api.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 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 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>;
|
export type ConfigurationArgs = Partial<Configuration>;
|
||||||
let Configuration:Configuration =
|
let Configuration:Configuration =
|
||||||
{
|
{
|
||||||
@ -48,6 +47,25 @@ let Configuration:Configuration =
|
|||||||
{
|
{
|
||||||
return inImports;
|
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:
|
SWCOp:
|
||||||
{
|
{
|
||||||
sourceMaps: false,
|
sourceMaps: false,
|
||||||
@ -177,7 +195,7 @@ export default async()=>
|
|||||||
}
|
}
|
||||||
|
|
||||||
// transpileable files
|
// transpileable files
|
||||||
if(Transpile.Check(ext) && !url.pathname.startsWith("/bundled/"))
|
if(Transpile.Check(ext))
|
||||||
{
|
{
|
||||||
const code = await Transpile.Fetch(proxy, url.pathname);
|
const code = await Transpile.Fetch(proxy, url.pathname);
|
||||||
if(code)
|
if(code)
|
||||||
@ -189,38 +207,11 @@ export default async()=>
|
|||||||
// custom page html
|
// custom page html
|
||||||
if(!ext)
|
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
|
// cache-reset route
|
||||||
|
Loading…
Reference in New Issue
Block a user