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

mount fixes

Browse Source 
strange issue with createElement
This commit is contained in:
Seth Trowbridge 2023-06-20 10:49:47 -04:00
parent ac280aa28b
commit e64ce9a144
3 changed files with 24 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
_lib_/mount.tsx
View File

@ -2,17 +2,16 @@ import React from "react";
import * as TW from "https://esm.sh/@twind/core@1.0.1"; 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 TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@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: {}, theme: {},
presets:[TWPreTail(), TWPreAuto()] presets: [TWPreTail(), TWPreAuto()],
hash: false
} as TW.TwindUserConfig; } as TW.TwindUserConfig;
export const Shadow =(inElement:HTMLElement, inConfig?:TW.TwindUserConfig)=> export const Shadow =(inElement:HTMLElement, inConfig?:TW.TwindUserConfig)=>
{ {
/*
const merge = inConfig ? {...Configure, ...inConfig} : Configure; const merge = inConfig ? {...Configure, ...inConfig} : Configure;
const ShadowDOM = inElement.attachShadow({ mode: "open" }); const ShadowDOM = inElement.attachShadow({ mode: "open" });
@ -23,33 +22,32 @@ export const Shadow =(inElement:HTMLElement, inConfig?:TW.TwindUserConfig)=>
ShadowDOM.append(ShadowDiv); ShadowDOM.append(ShadowDiv);
TW.observe(TW.twind(merge, TW.cssom(ShadowCSS)), ShadowDiv); TW.observe(TW.twind(merge, TW.cssom(ShadowCSS)), ShadowDiv);
return 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) if(React.render)
{ {
React.render(wrapped, inElement); React.render(app, dom);
return ()=>React.unmountComponentAtNode(inElement); return ()=>dom && React.unmountComponentAtNode(dom);
} }
else else
{ {
const reactDom = await import(`https://esm.sh/react-dom@${React.version}/client`); const reactDom = await import(`https://esm.sh/react-dom@${React.version}/client`);
const root = reactDom.createRoot(inElement); const root = reactDom.createRoot(dom);
root.render(wrapped); root.render(app);
return root.unmount; 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;
}; };

6
example/app.tsx
View File

@ -4,7 +4,7 @@ const CTXString = React.createContext("lol");
type StateBinding<T> = [get:T, set:React.StateUpdater<T>]; type StateBinding<T> = [get:T, set:React.StateUpdater<T>];
const CTXState = React.createContext(null) as React.Context<StateBinding<number>|null>; 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); const binding = React.useState(11);
return <CTXState.Provider value={binding}> return <CTXState.Provider value={binding}>
@ -35,8 +35,8 @@ export default ()=>
const [Store, Dispatch] = React.useReducer(reducer, {name:"seth", age:24} as Store, builder) const [Store, Dispatch] = React.useReducer(reducer, {name:"seth", age:24} as Store, builder)
return <CTXString.Provider value="intradestink"> return <CTXString.Provider value="intradestink">
<div class="my-4"> <div class="my-4 font-sans">
<h1>Title</h1> <h1 class="font-black text-xl">Title!!!!</h1>
<h2>subtitle!</h2> <h2>subtitle!</h2>
<p> <p>
<button onClick={e=>Dispatch(1)}>{Store.name}|{Store.age}?</button> <button onClick={e=>Dispatch(1)}>{Store.name}|{Store.age}?</button>