diff --git a/_lib_/mount.tsx b/boot-browser.tsx similarity index 55% rename from _lib_/mount.tsx rename to boot-browser.tsx index ab5e1ca..4c13939 100644 --- a/_lib_/mount.tsx +++ b/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/boot-server.tsx similarity index 75% rename from _lib_/boot.tsx rename to boot-server.tsx index c510a00..459f706 100644 --- a/_lib_/boot.tsx +++ b/boot-server.tsx @@ -1,4 +1,4 @@ -import "../serve.tsx"; +import "./run-serve.tsx"; Deno.args.forEach(arg=> { @@ -11,5 +11,5 @@ Deno.args.forEach(arg=> if(Deno.env.get("dev")) { - await import("../local.tsx"); + await import("./run-local.tsx"); } \ No newline at end of file diff --git a/deno.json b/deno.json index b3f0c20..1379bdc 100644 --- a/deno.json +++ b/deno.json @@ -7,7 +7,7 @@ { "react":"https://esm.sh/preact@10.15.1/compat", "react-original":"https://esm.sh/preact@10.15.1/compat", - "@able/": "./_lib_/" + "@able/": "./" }, "tasks": { 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/example/deno.json b/example/deno.json index 9ef9dc0..314726a 100644 --- a/example/deno.json +++ b/example/deno.json @@ -3,7 +3,7 @@ "imports": { "react":"https://esm.sh/preact@10.15.1/compat", - "@able/":"http://localhost:4507/_lib_/" + "@able/":"http://localhost:4507/" }, "tasks": { diff --git a/_lib_/hmr.tsx b/hmr-listen.tsx similarity index 97% rename from _lib_/hmr.tsx rename to hmr-listen.tsx index 3abd95f..aad4269 100644 --- a/_lib_/hmr.tsx +++ b/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/hmr-react.tsx similarity index 96% rename from _lib_/react.tsx rename to hmr-react.tsx index 11bb7fe..b47bb8a 100644 --- a/_lib_/react.tsx +++ b/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}; @@ -68,7 +68,6 @@ const ProxyState =(argNew:StateType)=> // this is a switch/ui change, not a HMR reload change const oldState = MapIndex(HMR.statesOld, HMR.statesNew.size-1); oldState && HMR.statesOld.set(oldState[0], {...oldState[1], state:argNew}); - console.log("check: ui-invoked") } HMR.statesNew.delete(id); @@ -112,7 +111,6 @@ const ProxyReducer =(inReducer:(inState:Storelike, inAction:string)=>Storelike, const capture = inReducer(inInterceptState, inInterceptAction); const stateUser = {state:capture, set:()=>{}, reload:HMR.reloads}; HMR.statesNew.set(id, stateUser); - console.log("interepted reducer", stateUser); return capture; }; diff --git a/local.tsx b/run-local.tsx similarity index 84% rename from local.tsx rename to run-local.tsx index 60d17d2..665788b 100644 --- a/local.tsx +++ b/run-local.tsx @@ -1,7 +1,7 @@ -import {Configure, Transpile, Extension} from "./serve.tsx"; +import {Configure, Transpile, Extension} from "./run-serve.tsx"; const SocketsLive:Set = new Set(); -const SocketsSend =(inData:string)=>{ console.log(inData); for (const socket of SocketsLive){ socket.send(inData); } } +const SocketsSend =(inData:string)=>{ for (const socket of SocketsLive){ socket.send(inData); } } Configure({ SWCOp: @@ -18,22 +18,22 @@ Configure({ } } }, - Remap: (inImports)=> + Remap: (inImports, inConfig)=> { inImports["react-original"] = inImports["react"]; - inImports["react"] = "/_lib_/react.tsx"; + inImports["react"] = `${inConfig.Spoof}/hmr-react.tsx`; return inImports; }, - async Serve(inReq, inURL, inExt, inMap, inProxy) + async Serve(inReq, inURL, inExt, inMap, inConfig) { - if(Transpile.Check(inExt) && !inURL.searchParams.get("reload") && !inURL.pathname.startsWith("/_lib_/")) + if(Transpile.Check(inExt) && !inURL.searchParams.get("reload") && !inURL.pathname.startsWith(inConfig.Spoof+"/")) { - const imp = await import(inProxy+inURL.pathname); + const imp = await import(inConfig.Proxy+inURL.pathname); const members = []; for( const key in imp ) { members.push(key); } const code =` -import {FileListen} from "/_lib_/hmr.tsx"; +import {FileListen} from "${inConfig.Spoof}/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)=> @@ -97,4 +97,4 @@ const Watcher =async()=> } } -Watcher().then(()=>console.log("done watching")); \ No newline at end of file +Watcher(); \ No newline at end of file diff --git a/serve.tsx b/run-serve.tsx similarity index 76% rename from serve.tsx rename to run-serve.tsx index 821c281..f67320a 100644 --- a/serve.tsx +++ b/run-serve.tsx @@ -28,32 +28,35 @@ const ImportMapReload =async()=> json.imports[key] = value.substring(1); } }); - if(!json.imports["@able/"]) + + const mapKey = (Configuration.Spoof.startsWith("/") ? Configuration.Spoof.substring(1) : Configuration.Spoof)+"/"; + if(!json.imports[mapKey]) { - console.log(`"@able/" specifier not defined in import map`); + console.log(`"${mapKey}" specifier not defined in import map`); } - json.imports["@able/"] = "/_lib_/"; + json.imports[mapKey] = Configuration.Spoof+"/"; if(!json.imports["react"]) { console.log(`"react" specifier not defined in import map`); } - ImportMap.imports = Configuration.Remap(json.imports); + ImportMap.imports = Configuration.Remap(json.imports, Configuration); console.log(ImportMap.imports); }; -type CustomHTTPHandler = (inReq:Request, inURL:URL, inExt:string|false, inMap:{imports:Record}, inProxy:string)=>void|false|Response|Promise; -type CustomRemapper = (inImports:Record)=>Record; -type Configuration = {Proxy:string, Allow:string, Reset:string, SWCOp:SWCW.Options, Serve:CustomHTTPHandler, Shell:CustomHTTPHandler, Remap:CustomRemapper}; -type ConfigurationArgs = {Proxy?:string, Allow?:string, Reset?:string, SWCOp?:SWCW.Options, Serve?:CustomHTTPHandler, Shell?:CustomHTTPHandler, Remap?:CustomRemapper}; +type CustomHTTPHandler = (inReq:Request, inURL:URL, inExt:string|false, inMap:{imports:Record}, inConfig:Configuration)=>void|false|Response|Promise; +type CustomRemapper = (inImports:Record, inConfig:Configuration)=>Record; +type Configuration = {Proxy:string, Spoof:string, Allow:string, Reset:string, SWCOp:SWCW.Options, Serve:CustomHTTPHandler, Shell:CustomHTTPHandler, Remap:CustomRemapper}; +type ConfigurationArgs = {Proxy?:string, Spoof?:string, Allow?:string, Reset?:string, SWCOp?:SWCW.Options, Serve?:CustomHTTPHandler, Shell?:CustomHTTPHandler, Remap?:CustomRemapper}; let Configuration:Configuration = { Proxy: new URL(`file://${Deno.cwd().replaceAll("\\", "/")}`).toString(), Allow: "*", Reset: "/clear-cache", - Serve(inReq, inURL, inExt, inMap, inProxy){}, - Remap: (inImports)=> + Spoof: "/@able", + Serve(inReq, inURL, inExt, inMap, inConfig){}, + Remap: (inImports, inConfig)=> { const reactURL = inImports["react"]; const setting = Configuration.SWCOp?.jsc?.transform?.react; @@ -63,23 +66,22 @@ let Configuration:Configuration = } return inImports; }, - Shell(inReq, inURL, inExt, inMap, inProxy) + Shell(inReq, inURL, inExt, inMap, inConfig) { - console.log("Start app:", Deno.mainModule, "start dir", inProxy); - console.log("Split:", Deno.mainModule.split(inProxy) ); - - const parts = Deno.mainModule.split(inProxy); + const parts = Deno.mainModule.split(inConfig.Proxy); return new Response( ` + +
@@ -179,7 +181,7 @@ HTTP.serve(async(req: Request)=> } // allow for custom handler - const custom = await Configuration.Serve(req, url, ext, ImportMap, Configuration.Proxy); + const custom = await Configuration.Serve(req, url, ext, ImportMap, Configuration); if(custom) { return custom; @@ -190,15 +192,17 @@ HTTP.serve(async(req: Request)=> { let code; let path; - if(url.pathname.startsWith("/_lib_/")) + if(url.pathname.startsWith(Configuration.Spoof+"/")) { - if(url.pathname.endsWith("boot.tsx")) + const clipRoot = import.meta.url.substring(0, import.meta.url.lastIndexOf("/")); + const clipPath = url.pathname.substring(url.pathname.indexOf("/", 1)); + if(clipPath.startsWith("/boot-")) { - path = import.meta.url+"/../_lib_/mount.tsx"; + path = clipRoot+"/boot-browser.tsx"; } else { - path = import.meta.url+"/.."+url.pathname; + path = clipRoot + clipPath; } code = await Transpile.Fetch(path, url.pathname, true); } @@ -217,7 +221,7 @@ HTTP.serve(async(req: Request)=> // custom page html if(!ext) { - const shell = await Configuration.Shell(req, url, ext, ImportMap, Configuration.Proxy); + const shell = await Configuration.Shell(req, url, ext, ImportMap, Configuration); if(shell) { return shell;