From ac280aa28b03205d30e563166933994d445d651e Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Tue, 20 Jun 2023 09:50:14 -0400 Subject: [PATCH] mount added --- _lib_/mount.tsx | 46 +++++++++++++++++++++++++++++++++++++--------- deno.json | 2 +- deno.lock | 23 +++++++++++++++++++++++ example/app.tsx | 4 ++-- example/deno.json | 2 +- serve.tsx | 8 +++----- 6 files changed, 67 insertions(+), 18 deletions(-) create mode 100644 deno.lock diff --git a/_lib_/mount.tsx b/_lib_/mount.tsx index da350c5..3eaeac1 100644 --- a/_lib_/mount.tsx +++ b/_lib_/mount.tsx @@ -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; +}; \ No newline at end of file diff --git a/deno.json b/deno.json index a542f8e..8350e18 100644 --- a/deno.json +++ b/deno.json @@ -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": { diff --git a/deno.lock b/deno.lock new file mode 100644 index 0000000..6c863c0 --- /dev/null +++ b/deno.lock @@ -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" + } +} diff --git a/example/app.tsx b/example/app.tsx index 3d5d8ba..de7a991 100644 --- a/example/app.tsx +++ b/example/app.tsx @@ -35,8 +35,8 @@ export default ()=> const [Store, Dispatch] = React.useReducer(reducer, {name:"seth", age:24} as Store, builder) return -
-

Title!

+
+

Title

subtitle!

diff --git a/example/deno.json b/example/deno.json index 9f0718b..cef02df 100644 --- a/example/deno.json +++ b/example/deno.json @@ -3,7 +3,7 @@ "imports": { "react":"https://esm.sh/preact@10.15.1/compat", - "app": "./app.tsx" + "@app": "./app.tsx" }, "tasks": { diff --git a/serve.tsx b/serve.tsx index e224a03..132d72d 100644 --- a/serve.tsx +++ b/serve.tsx @@ -62,10 +62,8 @@ let Configuration:Configuration =

`, {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 },