able-baker/run-browser.tsx

63 lines
1.6 KiB
TypeScript
Raw Normal View History

2023-06-20 09:50:14 -04:00
import React from "react";
2024-05-14 22:52:52 -04:00
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";
2024-05-14 10:40:52 -04:00
import * as App from ">able/app.tsx";
2023-06-20 06:51:38 -04:00
2023-06-20 09:50:14 -04:00
const Configure =
{
2023-06-20 06:51:38 -04:00
theme: {},
2024-05-14 22:52:52 -04:00
presets: [PreAutoprefix(), PreTailwind()],
hash: false
2023-06-20 06:51:38 -04:00
} as TW.TwindUserConfig;
2024-05-14 10:40:52 -04:00
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)=>
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);
2024-05-14 10:40:52 -04:00
TW.observe(TW.twind(TwindConfig, TW.cssom(ShadowCSS)), ShadowDiv);
2023-06-20 06:51:38 -04:00
return ShadowDiv;
2023-06-20 09:50:14 -04:00
};
2024-05-15 09:19:10 -04:00
export default async(inSelector:string, inShadow?:boolean):Promise<(()=>void)|false>=>
2023-06-20 09:50:14 -04:00
{
2023-07-30 09:16:17 -04:00
let dom = document.querySelector(inSelector);
if(!dom)
{
console.log(`element "${inSelector}" not found.`);
return false;
}
2023-10-31 09:14:22 -04:00
if(inShadow)
{
2024-05-15 09:19:10 -04:00
console.log("init shadow root!", inShadow);
2024-05-14 10:40:52 -04:00
dom = Shadow(dom as HTMLElement);
2023-10-31 09:14:22 -04:00
}
else
{
2024-05-14 10:40:52 -04:00
TW.install(TwindConfig);
2023-10-31 09:14:22 -04:00
}
2023-06-20 09:50:14 -04:00
2024-05-14 10:40:52 -04:00
const app = React.createElement(()=> React.createElement(App.default, null), null);
React.hydrate(app, dom);
return ()=>dom && React.unmountComponentAtNode(dom);
2023-06-20 21:40:49 -04:00
};