mount fixes
strange issue with createElement
This commit is contained in:
parent
ac280aa28b
commit
e64ce9a144
@ -2,17 +2,16 @@ 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 =
|
||||
{
|
||||
theme: {},
|
||||
presets:[TWPreTail(), TWPreAuto()]
|
||||
presets: [TWPreTail(), TWPreAuto()],
|
||||
hash: false
|
||||
} as TW.TwindUserConfig;
|
||||
|
||||
export const Shadow =(inElement:HTMLElement, inConfig?:TW.TwindUserConfig)=>
|
||||
{
|
||||
/*
|
||||
const merge = inConfig ? {...Configure, ...inConfig} : Configure;
|
||||
|
||||
const ShadowDOM = inElement.attachShadow({ mode: "open" });
|
||||
@ -23,33 +22,32 @@ export const Shadow =(inElement:HTMLElement, inConfig?:TW.TwindUserConfig)=>
|
||||
ShadowDOM.append(ShadowDiv);
|
||||
TW.observe(TW.twind(merge, TW.cssom(ShadowCSS)), ShadowDiv);
|
||||
return ShadowDiv;
|
||||
*/
|
||||
|
||||
return inElement;
|
||||
|
||||
|
||||
};
|
||||
export const Render =async(inElement:HTMLElement, inApp:()=>React.JSX.Element)=>
|
||||
{
|
||||
const wrapped = React.createElement(()=> React.createElement(inApp, null), null);
|
||||
|
||||
export default async(inSelector:string, inModulePath:string, inMemberApp="default", inMemberCSS="CSS"):Promise<(()=>void)|false>=>
|
||||
{
|
||||
let dom = document.querySelector(inSelector);
|
||||
if(!dom)
|
||||
{
|
||||
console.log(`element "${inSelector}" not found.`);
|
||||
return false;
|
||||
}
|
||||
|
||||
const module = await import(inModulePath);
|
||||
dom = Shadow(dom as HTMLElement, module[inMemberCSS])
|
||||
|
||||
const app = React.createElement(()=> React.createElement(module[inMemberApp], null), null);
|
||||
if(React.render)
|
||||
{
|
||||
React.render(wrapped, inElement);
|
||||
return ()=>React.unmountComponentAtNode(inElement);
|
||||
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(inElement);
|
||||
root.render(wrapped);
|
||||
const root = reactDom.createRoot(dom);
|
||||
root.render(app);
|
||||
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;
|
||||
};
|
@ -4,7 +4,7 @@ const CTXString = React.createContext("lol");
|
||||
|
||||
type StateBinding<T> = [get:T, set:React.StateUpdater<T>];
|
||||
const CTXState = React.createContext(null) as React.Context<StateBinding<number>|null>;
|
||||
const Outer =(props:{children:Preact.VNode})=>
|
||||
const Outer =(props:{children:React.JSX.Element})=>
|
||||
{
|
||||
const binding = React.useState(11);
|
||||
return <CTXState.Provider value={binding}>
|
||||
@ -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 class="my-4">
|
||||
<h1>Title</h1>
|
||||
<div class="my-4 font-sans">
|
||||
<h1 class="font-black text-xl">Title!!!!</h1>
|
||||
<h2>subtitle!</h2>
|
||||
<p>
|
||||
<button onClick={e=>Dispatch(1)}>{Store.name}|{Store.age}?</button>
|
||||
|
@ -62,8 +62,8 @@ let Configuration:Configuration =
|
||||
<div id="app"></div>
|
||||
<script type="importmap">${JSON.stringify(inMap)}</script>
|
||||
<script type="module">
|
||||
import Mount from "/_lib_/mount.tsx";
|
||||
Mount("#app", "@app");
|
||||
import Mount from "/_lib_/mount.tsx";
|
||||
Mount("#app", "@app");
|
||||
</script>
|
||||
</body>
|
||||
</html>`, {status:200, headers:{"content-type":"text/html"}});
|
||||
|
Loading…
Reference in New Issue
Block a user