50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import * as TW from "@twind/core";
|
|
import TWPreTail from "https://esm.sh/v126/@twind/preset-tailwind@1.1.3/es2022/preset-tailwind.mjs";
|
|
import TWPreAuto from "https://esm.sh/v126/@twind/preset-autoprefix@1.0.7/es2022/preset-autoprefix.mjs";
|
|
|
|
const Configure = { theme: {}, presets: [TWPreTail(), TWPreAuto()], hash: false} as TW.TwindUserConfig;
|
|
|
|
export default async(inSelector:string, inModulePath:string, inMemberApp="default", inMemberCSS="CSS", inShadow=false):Promise<(()=>void)|false>=>
|
|
{
|
|
let dom = document.querySelector(inSelector);
|
|
if(!dom)
|
|
{
|
|
console.log(`element "${inSelector}" not found.`);
|
|
return false;
|
|
}
|
|
|
|
const module = await import(inModulePath);
|
|
const merge = inMemberCSS ? {...Configure, ...module[inMemberCSS]} : Configure;
|
|
|
|
if(inShadow)
|
|
{
|
|
const ShadowDOM = dom.attachShadow({ mode: "open" });
|
|
const ShadowDiv = document.createElement("div");
|
|
const ShadowCSS = document.createElement("style");
|
|
|
|
ShadowDOM.append(ShadowCSS);
|
|
ShadowDOM.append(ShadowDiv);
|
|
TW.observe(TW.twind(merge, TW.cssom(ShadowCSS)), ShadowDiv);
|
|
dom = ShadowDiv;
|
|
}
|
|
else
|
|
{
|
|
TW.install(merge);
|
|
}
|
|
|
|
const app = React.createElement(()=> React.createElement(module[inMemberApp], null), null);
|
|
if(React.render)
|
|
{
|
|
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(dom);
|
|
root.render(app);
|
|
return root.unmount;
|
|
}
|
|
};
|