Compare commits

..

No commits in common. "ssr" and "master" have entirely different histories.
ssr ... master

15 changed files with 87 additions and 385 deletions

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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[] || [];

View File

@ -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"]
}
}

View File

@ -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"
}
}

View File

@ -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};

View File

@ -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;
}
};

View File

@ -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"))
{

View File

@ -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