able-baker/run-browser.tsx

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 const Shadow =(inElement:HTMLElement, inConfig?:TW.TwindUserConfig)=>
{
    const merge = inConfig ? {...Configure, ...inConfig} : Configure;

    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(merge, TW.cssom(ShadowCSS)), ShadowDiv);
    return ShadowDiv;
};

export default async(inSelector:string, inModulePath:string, inMemberApp="default", inMemberCSS="CSS"):Promise<(()=>void)|false>=>
{

  if(!inModulePath)
  {
    return false;
  }


  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])

  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;        
  }

};