diff --git a/_lib_/mount.tsx b/_lib_/boot-browser.tsx similarity index 55% rename from _lib_/mount.tsx rename to _lib_/boot-browser.tsx index ab5e1ca..4c13939 100644 --- a/_lib_/mount.tsx +++ b/_lib_/boot-browser.tsx @@ -1,7 +1,7 @@ import React from "react"; -import * as TW from "https://esm.sh/@twind/core@1.0.1"; -import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1"; -import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1"; +import * as TW from "https://esm.sh/v126/@twind/core@1.1.3/es2022/core.mjs"; +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 = { @@ -24,42 +24,6 @@ export const Shadow =(inElement:HTMLElement, inConfig?:TW.TwindUserConfig)=> return ShadowDiv; }; -let booted = false; -export const Boot =async(inSettings:{App:()=>React.JSX.Element, CSS?:TW.TwindUserConfig, DOM?:string})=> -{ - if(booted){return;} - booted = true; - - const settings = {CSS:{...Configure, ...inSettings.CSS||{} }, DOM:inSettings.DOM||"#app", App:inSettings.App}; - - console.log("Clinet boot called") - - let dom = document.querySelector(settings.DOM); - if(!dom) - { - console.log(`element "${settings.DOM}" not found.`); - return false; - } - - dom = Shadow(dom as HTMLElement, settings.CSS) - - const app = React.createElement(()=> React.createElement(settings.App, 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; - } - -}; - - export default async(inSelector:string, inModulePath:string, inMemberApp="default", inMemberCSS="CSS"):Promise<(()=>void)|false>=> { let dom = document.querySelector(inSelector); diff --git a/_lib_/boot.tsx b/_lib_/boot-server.tsx similarity index 100% rename from _lib_/boot.tsx rename to _lib_/boot-server.tsx diff --git a/_lib_/hmr.tsx b/_lib_/hmr-listen.tsx similarity index 97% rename from _lib_/hmr.tsx rename to _lib_/hmr-listen.tsx index 3abd95f..aad4269 100644 --- a/_lib_/hmr.tsx +++ b/_lib_/hmr-listen.tsx @@ -1,5 +1,4 @@ -import { type StateCapture } from "./react.tsx"; - +import { type StateCapture } from "./hmr-react.tsx"; const FileListeners = new Map() as Mapvoid>>; export const FileListen =(inPath:string, inHandler:()=>void)=> @@ -21,7 +20,6 @@ Socket.addEventListener('message', async(event:{data:string})=> Socket.addEventListener("error", ()=>{clearInterval(SocketTimer); console.log("HMR socket lost")}) const SocketTimer = setInterval(()=>{Socket.send("ping")}, 5000); - /* Each custom component is secretly modified to have an extra state and id. @@ -46,10 +44,8 @@ When there is an HMR update: - statesNew is moved into *statesOld* - statesNew is cleared. - */ - const HMR = { reloads:1, diff --git a/_lib_/react.tsx b/_lib_/hmr-react.tsx similarity index 98% rename from _lib_/react.tsx rename to _lib_/hmr-react.tsx index 11bb7fe..a978c26 100644 --- a/_lib_/react.tsx +++ b/_lib_/hmr-react.tsx @@ -1,5 +1,5 @@ import * as ReactParts from "react-original"; -import { HMR } from "./hmr.tsx"; +import { HMR } from "./hmr-listen.tsx"; export type StateType = boolean|number|string|Record export type StateCapture = {state:StateType, set:ReactParts.StateUpdater, reload:number}; diff --git a/example/app.tsx b/example/app.tsx index 40e1139..add001e 100644 --- a/example/app.tsx +++ b/example/app.tsx @@ -1,4 +1,4 @@ -import "@able/boot.tsx"; +import "@able/boot-server.tsx"; import React from "react"; const CTXString = React.createContext("lol"); diff --git a/local.tsx b/local.tsx index 60d17d2..e9c7dcd 100644 --- a/local.tsx +++ b/local.tsx @@ -21,7 +21,7 @@ Configure({ Remap: (inImports)=> { inImports["react-original"] = inImports["react"]; - inImports["react"] = "/_lib_/react.tsx"; + inImports["react"] = "/_lib_/hmr-react.tsx"; return inImports; }, async Serve(inReq, inURL, inExt, inMap, inProxy) @@ -33,7 +33,7 @@ Configure({ for( const key in imp ) { members.push(key); } const code =` -import {FileListen} from "/_lib_/hmr.tsx"; +import {FileListen} from "/_lib_/hmr-listen.tsx"; import * as Import from "${inURL.pathname}?reload=0"; ${ members.map(m=>`let proxy_${m} = Import.${m}; export { proxy_${m} as ${m} };`).join("\n") } FileListen("${inURL.pathname}", (updatedModule)=> diff --git a/serve.tsx b/serve.tsx index 821c281..3f3dde2 100644 --- a/serve.tsx +++ b/serve.tsx @@ -74,12 +74,14 @@ let Configuration:Configuration = ` + +
@@ -192,9 +194,9 @@ HTTP.serve(async(req: Request)=> let path; if(url.pathname.startsWith("/_lib_/")) { - if(url.pathname.endsWith("boot.tsx")) + if(url.pathname.startsWith("/_lib_/boot")) { - path = import.meta.url+"/../_lib_/mount.tsx"; + path = import.meta.url+"/../_lib_/boot-browser.tsx"; } else {