62 lines
1.6 KiB
TypeScript
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);
|
|
|
|
};
|