able-baker/_lib_/mount.tsx

53 lines
1.6 KiB
TypeScript
Raw Permalink Normal View History

2023-06-20 09:50:14 -04:00
import React from "react";
2023-06-20 06:51:38 -04:00
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";
2023-06-20 09:50:14 -04:00
const Configure =
{
2023-06-20 06:51:38 -04:00
theme: {},
presets: [TWPreTail(), TWPreAuto()],
hash: false
2023-06-20 06:51:38 -04:00
} as TW.TwindUserConfig;
2023-06-20 09:50:14 -04:00
export const Shadow =(inElement:HTMLElement, inConfig?:TW.TwindUserConfig)=>
2023-06-20 06:51:38 -04:00
{
2023-06-20 09:50:14 -04:00
const merge = inConfig ? {...Configure, ...inConfig} : Configure;
2023-06-20 06:51:38 -04:00
const ShadowDOM = inElement.attachShadow({ mode: "open" });
const ShadowDiv = document.createElement("div");
const ShadowCSS = document.createElement("style");
2023-06-20 09:50:14 -04:00
2023-06-20 06:51:38 -04:00
ShadowDOM.append(ShadowCSS);
ShadowDOM.append(ShadowDiv);
TW.observe(TW.twind(merge, TW.cssom(ShadowCSS)), ShadowDiv);
return ShadowDiv;
2023-06-20 09:50:14 -04:00
};
export default async(inSelector:string, inModulePath:string, inMemberApp="default", inMemberCSS="CSS"):Promise<(()=>void)|false>=>
2023-06-20 09:50:14 -04:00
{
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])
2023-06-20 09:50:14 -04:00
const app = React.createElement(()=> React.createElement(module[inMemberApp], null), null);
2023-06-20 09:50:14 -04:00
if(React.render)
{
React.render(app, dom);
return ()=>dom && React.unmountComponentAtNode(dom);
2023-06-20 09:50:14 -04:00
}
else
{
const reactDom = await import(`https://esm.sh/react-dom@${React.version}/client`);
const root = reactDom.createRoot(dom);
root.render(app);
2023-06-20 09:50:14 -04:00
return root.unmount;
}
};