SethTrowbridge
/
able-baker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 8 Wiki Activity

mount added

This commit is contained in:
Seth Trowbridge 2023-06-20 09:50:14 -04:00
parent df16163e4b
commit ac280aa28b
6 changed files with 67 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
_lib_/mount.tsx
View File

@ -1,27 +1,55 @@
import React from "react";
import * as TW from "https://esm.sh/@twind/core@1.0.1";
import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
import react from "./react.tsx";
const Configure = {
const Configure =
{
theme: {},
presets:[TWPreTail(), TWPreAuto()]
} as TW.TwindUserConfig;
export default (inElement:HTMLElement, inConfig?:TW.TwindUserConfig)=>
export const Shadow =(inElement:HTMLElement, inConfig?:TW.TwindUserConfig)=>
{
/*
const merge = inConfig ? {...Configure, ...inConfig} : Configure;
const ShadowDOM = inElement.attachShadow({ mode: "open" });
const ShadowDiv = document.createElement("div");
const ShadowCSS = document.createElement("style");
ShadowDOM.append(ShadowCSS);
ShadowDOM.append(ShadowDiv);
const merge = inConfig ? {...Configure, ...inConfig} : Configure;
TW.observe(TW.twind(merge, TW.cssom(ShadowCSS)), ShadowDiv);
return ShadowDiv;
}
*/
return inElement;
import * as App from "app";
import React from "react";
const Wrapper =()=> React.createElement(App.default, null, null);
React.render(React.createElement(Wrapper, null, null), document.querySelector("#app"));
};
export const Render =async(inElement:HTMLElement, inApp:()=>React.JSX.Element)=>
{
const wrapped = React.createElement(()=> React.createElement(inApp, null), null);
if(React.render)
{
React.render(wrapped, inElement);
return ()=>React.unmountComponentAtNode(inElement);
}
else
{
const reactDom = await import(`https://esm.sh/react-dom@${React.version}/client`);
const root = reactDom.createRoot(inElement);
root.render(wrapped);
return root.unmount;
}
};
export default async(inSelector:string, inModulePath:string, inMemberApp="default", inMemberCSS="CSS"):Promise<()=>void|false>=>
{
const members = await import(inModulePath);
const element = document.querySelector(inSelector);
return element ? await Render(Shadow(element as HTMLElement, members.CSS), members.default) : false;
};

2
deno.json
View File

@ -7,7 +7,7 @@
{
"react":"https://esm.sh/preact@10.15.1/compat",
"react-original":"https://esm.sh/preact@10.15.1/compat",
"app": "./app.tsx"
"@app": "./app.tsx"
},
"tasks":
{

23
deno.lock Normal file
View File

@ -0,0 +1,23 @@
{
"version": "2",
"remote": {
"https://esm.sh/preact@10.15.1": "2b79349676a4942fbcf835c4efa909791c2f0aeca195225bf22bac9866e94b4e",
"https://esm.sh/preact@10.15.1/compat": "07273e22b1c335b8acc9f33c5e78165319c59bd8e2d0f3e5a2b4e028329424d9",
"https://esm.sh/react@18.2.0": "742d8246041966ba1137ec8c60888c35882a9d2478bce63583875f86c1e3687c",
"https://esm.sh/stable/preact@10.15.1/denonext/compat.js": "bad6b5b4d4fdfa5975b7a8d30410bd6877247f058e4952799fab39f66a94b8cf",
"https://esm.sh/stable/preact@10.15.1/denonext/hooks.js": "5c989ad368cf4f2cb3a5d7d1801843d9348c599fe3e7731d04728f7b845d724e",
"https://esm.sh/stable/preact@10.15.1/denonext/preact.mjs": "30710ac1d5ff3711ae0c04eddbeb706f34f82d97489f61aaf09897bc75d2a628",
"https://esm.sh/stable/react@18.2.0/deno/react.mjs": "a5a73ee24acca4744ee22c51d9357f31968d1f684ce253bde222b4e26d09f49f",
"https://esm.sh/v118/@types/prop-types@15.7.5/index.d.ts": "6a386ff939f180ae8ef064699d8b7b6e62bc2731a62d7fbf5e02589383838dea",
"https://esm.sh/v118/@types/react@18.2.0/global.d.ts": "549df62b64a71004aee17685b445a8289013daf96246ce4d9b087d13d7a27a61",
"https://esm.sh/v118/@types/react@18.2.0/index.d.ts": "b091747b1f503f434d3cac4217a13858baba87b421a7054ffdfd797da7737678",
"https://esm.sh/v118/@types/scheduler@0.16.3/tracing.d.ts": "f5a8b384f182b3851cec3596ccc96cb7464f8d3469f48c74bf2befb782a19de5",
"https://esm.sh/v118/csstype@3.1.2/index.d.ts": "4c68749a564a6facdf675416d75789ee5a557afda8960e0803cf6711fa569288",
"https://esm.sh/v118/preact@10.15.1/compat/src/index.d.ts": "9ec63be9612a10ff72fd4183179cde7d551ce43b3a0c2f549d8f788910d8263d",
"https://esm.sh/v118/preact@10.15.1/compat/src/suspense-list.d.ts": "b8e274324392157ce476ef3a48ae215c9f7003b08525d140645f19eab20d1948",
"https://esm.sh/v118/preact@10.15.1/compat/src/suspense.d.ts": "81f5266e0977a94347505d11b8103024211f2b4f3b2eb2aa276a10d8fd169e65",
"https://esm.sh/v118/preact@10.15.1/hooks/src/index.d.ts": "933eab6436614f8cd8e9b7c9b8bd54c6f3f14c3f065ba42c8c87a42d93de6595",
"https://esm.sh/v118/preact@10.15.1/src/index.d.ts": "fa83186a4b6caca36d52ca2d49b481c3ca5460988d4a8388d44dadc28987fb27",
"https://esm.sh/v118/preact@10.15.1/src/jsx.d.ts": "a6e4b7e4af3b959f8cfd41a0f475c547807ebcec8524d9605ab5c6de79f302fa"
}
}

4
example/app.tsx
View File

@ -35,8 +35,8 @@ export default ()=>
const [Store, Dispatch] = React.useReducer(reducer, {name:"seth", age:24} as Store, builder)
return <CTXString.Provider value="intradestink">
<div>
<h1>Title!</h1>
<div class="my-4">
<h1>Title</h1>
<h2>subtitle!</h2>
<p>
<button onClick={e=>Dispatch(1)}>{Store.name}|{Store.age}?</button>

2
example/deno.json
View File

@ -3,7 +3,7 @@
"imports":
{
"react":"https://esm.sh/preact@10.15.1/compat",
"app": "./app.tsx"
"@app": "./app.tsx"
},
"tasks":
{

8
serve.tsx
View File

@ -62,10 +62,8 @@ let Configuration:Configuration =
<div id="app"></div>
<script type="importmap">${JSON.stringify(inMap)}</script>
<script type="module">
import App from "app";
import React from "react";
const Wrapper =(props)=> React.createElement(App);
React.render(React.createElement(Wrapper), document.querySelector("#app"))
import Mount from "/_lib_/mount.tsx";
Mount("#app", "@app");
</script>
</body>
</html>`, {status:200, headers:{"content-type":"text/html"}});
@ -76,7 +74,7 @@ let Configuration:Configuration =
minify: true,
jsc:
{
target:"es2017",
target:"es2022",
minify:
{
compress: { unused: true },