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

boot-function #1

Merged
SethTrowbridge merged 25 commits from boot-function into master 2023-06-21 07:53:14 -04:00
Conversation 0 Commits 25 Files Changed 10 +24 -26
3 changed files with 24 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e64ce9a144 - Show all commits

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

6
example/app.tsx
View File

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