able-baker/run-browser.tsx
2024-05-14 22:52:52 -04:00

62 lines
1.6 KiB
TypeScript

import React from "react";
import * as TW from "@twind/core";
import PreTailwind from "https://esm.sh/v135/@twind/preset-tailwind@1.1.3/es2022/preset-tailwind.mjs";
import PreAutoprefix from "https://esm.sh/v135/@twind/preset-autoprefix@1.0.7/es2022/preset-autoprefix.mjs";
import * as App from ">able/app.tsx";
const Configure =
{
theme: {},
presets: [PreAutoprefix(), PreTailwind()],
hash: false
} as TW.TwindUserConfig;
let TwindInst:TW.Twind<TW.BaseTheme, unknown>;
const TwindConfig = {...Configure, ...(App?.CSS || {})};
export const CustomTwindExtractor =(inMarkup:string)=> {
if(!TwindInst)
{
TwindInst = TW.install(TwindConfig);
}
return TW.extract(inMarkup, TwindInst);
}
export const CustomApp = App.default;
const Shadow =(inElement:HTMLElement)=>
{
const ShadowDOM = inElement.attachShadow({ mode: "open" });
const ShadowDiv = document.createElement("div");
const ShadowCSS = document.createElement("style");
ShadowDOM.append(ShadowCSS);
ShadowDOM.append(ShadowDiv);
TW.observe(TW.twind(TwindConfig, TW.cssom(ShadowCSS)), ShadowDiv);
return ShadowDiv;
};
export default async(inSelector:string, inShadow=false):Promise<(()=>void)|false>=>
{
let dom = document.querySelector(inSelector);
if(!dom)
{
console.log(`element "${inSelector}" not found.`);
return false;
}
if(inShadow)
{
dom = Shadow(dom as HTMLElement);
}
else
{
TW.install(TwindConfig);
}
const app = React.createElement(()=> React.createElement(App.default, null), null);
React.hydrate(app, dom);
return ()=>dom && React.unmountComponentAtNode(dom);
};