From 55b5bd28abefbf0dae4aac790f317e3f8e118aa7 Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Wed, 21 Jun 2023 17:21:36 -0400 Subject: [PATCH 1/5] prefixing --- _lib_/{mount.tsx => boot-browser.tsx} | 42 ++------------------------- _lib_/{boot.tsx => boot-server.tsx} | 0 _lib_/{hmr.tsx => hmr-listen.tsx} | 6 +--- _lib_/{react.tsx => hmr-react.tsx} | 2 +- example/app.tsx | 2 +- local.tsx | 4 +-- serve.tsx | 8 +++-- 7 files changed, 13 insertions(+), 51 deletions(-) rename _lib_/{mount.tsx => boot-browser.tsx} (55%) rename _lib_/{boot.tsx => boot-server.tsx} (100%) rename _lib_/{hmr.tsx => hmr-listen.tsx} (97%) rename _lib_/{react.tsx => hmr-react.tsx} (98%) 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 { From a9139c6cd33d08f794eb019ecb4d69cf9ad01985 Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Wed, 21 Jun 2023 17:32:10 -0400 Subject: [PATCH 2/5] flatten --- _lib_/boot-browser.tsx => boot-browser.tsx | 0 _lib_/boot-server.tsx => boot-server.tsx | 4 ++-- deno.json | 2 +- example/deno.json | 2 +- _lib_/hmr-listen.tsx => hmr-listen.tsx | 0 _lib_/hmr-react.tsx => hmr-react.tsx | 0 local.tsx => run-local.tsx | 2 +- serve.tsx => run-serve.tsx | 9 ++++++--- 8 files changed, 11 insertions(+), 8 deletions(-) rename _lib_/boot-browser.tsx => boot-browser.tsx (100%) rename _lib_/boot-server.tsx => boot-server.tsx (75%) rename _lib_/hmr-listen.tsx => hmr-listen.tsx (100%) rename _lib_/hmr-react.tsx => hmr-react.tsx (100%) rename local.tsx => run-local.tsx (96%) rename serve.tsx => run-serve.tsx (95%) diff --git a/_lib_/boot-browser.tsx b/boot-browser.tsx similarity index 100% rename from _lib_/boot-browser.tsx rename to boot-browser.tsx diff --git a/_lib_/boot-server.tsx b/boot-server.tsx similarity index 75% rename from _lib_/boot-server.tsx rename to boot-server.tsx index c510a00..459f706 100644 --- a/_lib_/boot-server.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/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-listen.tsx b/hmr-listen.tsx similarity index 100% rename from _lib_/hmr-listen.tsx rename to hmr-listen.tsx diff --git a/_lib_/hmr-react.tsx b/hmr-react.tsx similarity index 100% rename from _lib_/hmr-react.tsx rename to hmr-react.tsx diff --git a/local.tsx b/run-local.tsx similarity index 96% rename from local.tsx rename to run-local.tsx index e9c7dcd..42183d2 100644 --- a/local.tsx +++ b/run-local.tsx @@ -1,4 +1,4 @@ -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); } } diff --git a/serve.tsx b/run-serve.tsx similarity index 95% rename from serve.tsx rename to run-serve.tsx index 3f3dde2..b978583 100644 --- a/serve.tsx +++ b/run-serve.tsx @@ -194,14 +194,17 @@ HTTP.serve(async(req: Request)=> let path; if(url.pathname.startsWith("/_lib_/")) { - if(url.pathname.startsWith("/_lib_/boot")) + 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_/boot-browser.tsx"; + path = clipRoot+"/boot-browser.tsx"; } else { - path = import.meta.url+"/.."+url.pathname; + path = clipRoot + clipPath; } + console.log("transpiling", path); code = await Transpile.Fetch(path, url.pathname, true); } else From cc80a2725d696599b66b5aedfea67de6b73881bb Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Wed, 21 Jun 2023 21:20:24 -0400 Subject: [PATCH 3/5] pass config though handlers --- run-local.tsx | 6 +++--- run-serve.tsx | 20 ++++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/run-local.tsx b/run-local.tsx index 42183d2..43e5c1e 100644 --- a/run-local.tsx +++ b/run-local.tsx @@ -18,17 +18,17 @@ Configure({ } } }, - Remap: (inImports)=> + Remap: (inImports, inConfig)=> { inImports["react-original"] = inImports["react"]; inImports["react"] = "/_lib_/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_/")) { - 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); } diff --git a/run-serve.tsx b/run-serve.tsx index b978583..99a456b 100644 --- a/run-serve.tsx +++ b/run-serve.tsx @@ -39,12 +39,12 @@ const ImportMapReload =async()=> 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 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, 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}; let Configuration:Configuration = @@ -53,7 +53,7 @@ let Configuration:Configuration = Allow: "*", Reset: "/clear-cache", Serve(inReq, inURL, inExt, inMap, inProxy){}, - Remap: (inImports)=> + Remap: (inImports, inConfig)=> { const reactURL = inImports["react"]; const setting = Configuration.SWCOp?.jsc?.transform?.react; @@ -63,12 +63,12 @@ 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) ); + console.log("Start app:", Deno.mainModule, "start dir", inConfig.Proxy); + console.log("Split:", Deno.mainModule.split(inConfig.Proxy) ); - const parts = Deno.mainModule.split(inProxy); + const parts = Deno.mainModule.split(inConfig.Proxy); return new Response( ` @@ -181,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; @@ -222,7 +222,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; From f521ed23eb6426f82749ee41ab3d45985eca7e1a Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Wed, 21 Jun 2023 21:31:21 -0400 Subject: [PATCH 4/5] cleanup console logs --- hmr-react.tsx | 2 -- run-local.tsx | 4 ++-- run-serve.tsx | 6 +----- 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/hmr-react.tsx b/hmr-react.tsx index a978c26..b47bb8a 100644 --- a/hmr-react.tsx +++ b/hmr-react.tsx @@ -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/run-local.tsx b/run-local.tsx index 43e5c1e..abc92b8 100644 --- a/run-local.tsx +++ b/run-local.tsx @@ -1,7 +1,7 @@ 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: @@ -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/run-serve.tsx b/run-serve.tsx index 99a456b..ef71716 100644 --- a/run-serve.tsx +++ b/run-serve.tsx @@ -52,7 +52,7 @@ let Configuration:Configuration = Proxy: new URL(`file://${Deno.cwd().replaceAll("\\", "/")}`).toString(), Allow: "*", Reset: "/clear-cache", - Serve(inReq, inURL, inExt, inMap, inProxy){}, + Serve(inReq, inURL, inExt, inMap, inConfig){}, Remap: (inImports, inConfig)=> { const reactURL = inImports["react"]; @@ -65,9 +65,6 @@ let Configuration:Configuration = }, Shell(inReq, inURL, inExt, inMap, inConfig) { - console.log("Start app:", Deno.mainModule, "start dir", inConfig.Proxy); - console.log("Split:", Deno.mainModule.split(inConfig.Proxy) ); - const parts = Deno.mainModule.split(inConfig.Proxy); return new Response( @@ -204,7 +201,6 @@ HTTP.serve(async(req: Request)=> { path = clipRoot + clipPath; } - console.log("transpiling", path); code = await Transpile.Fetch(path, url.pathname, true); } else From d7a5350256d7cfea52c883ced0bb371930cba1f7 Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Wed, 21 Jun 2023 22:35:59 -0400 Subject: [PATCH 5/5] configurable lib folder --- run-local.tsx | 6 +++--- run-serve.tsx | 17 ++++++++++------- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/run-local.tsx b/run-local.tsx index abc92b8..665788b 100644 --- a/run-local.tsx +++ b/run-local.tsx @@ -21,19 +21,19 @@ Configure({ Remap: (inImports, inConfig)=> { inImports["react-original"] = inImports["react"]; - inImports["react"] = "/_lib_/hmr-react.tsx"; + inImports["react"] = `${inConfig.Spoof}/hmr-react.tsx`; return inImports; }, 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(inConfig.Proxy+inURL.pathname); const members = []; for( const key in imp ) { members.push(key); } const code =` -import {FileListen} from "/_lib_/hmr-listen.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)=> diff --git a/run-serve.tsx b/run-serve.tsx index ef71716..f67320a 100644 --- a/run-serve.tsx +++ b/run-serve.tsx @@ -28,11 +28,13 @@ 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"]) { @@ -45,13 +47,14 @@ const ImportMapReload =async()=> 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, 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 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", + Spoof: "/@able", Serve(inReq, inURL, inExt, inMap, inConfig){}, Remap: (inImports, inConfig)=> { @@ -78,7 +81,7 @@ let Configuration:Configuration =
@@ -189,7 +192,7 @@ HTTP.serve(async(req: Request)=> { let code; let path; - if(url.pathname.startsWith("/_lib_/")) + if(url.pathname.startsWith(Configuration.Spoof+"/")) { const clipRoot = import.meta.url.substring(0, import.meta.url.lastIndexOf("/")); const clipPath = url.pathname.substring(url.pathname.indexOf("/", 1));