SethTrowbridge/able-baker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 8 Wiki Activity

naming #2

Merged
SethTrowbridge merged 5 commits from naming into master 2023-06-30 10:23:59 -04:00
Conversation 0 Commits 5 Files Changed 9 +45 -83
9 changed files with 45 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
_lib_/mount.tsx → boot-browser.tsx
View File

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import * as TW from "https://esm.sh/@twind/core@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/@twind/preset-tailwind@1.0.1"; import TWPreTail from "https://esm.sh/v126/@twind/preset-tailwind@1.1.3/es2022/preset-tailwind.mjs";
import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1"; import TWPreAuto from "https://esm.sh/v126/@twind/preset-autoprefix@1.0.7/es2022/preset-autoprefix.mjs";
const Configure = const Configure =
{ {
@ -24,42 +24,6 @@ export const Shadow =(inElement:HTMLElement, inConfig?:TW.TwindUserConfig)=>
return ShadowDiv; 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>=> export default async(inSelector:string, inModulePath:string, inMemberApp="default", inMemberCSS="CSS"):Promise<(()=>void)|false>=>
{ {
let dom = document.querySelector(inSelector); let dom = document.querySelector(inSelector);

4
_lib_/boot.tsx → boot-server.tsx
View File

@ -1,4 +1,4 @@
import "../serve.tsx"; import "./run-serve.tsx";
Deno.args.forEach(arg=> Deno.args.forEach(arg=>
{ {
@ -11,5 +11,5 @@ Deno.args.forEach(arg=>
if(Deno.env.get("dev")) if(Deno.env.get("dev"))
{ {
await import("../local.tsx"); await import("./run-local.tsx");
} }

2
deno.json
View File

@ -7,7 +7,7 @@
{ {
"react":"https://esm.sh/preact@10.15.1/compat", "react":"https://esm.sh/preact@10.15.1/compat",
"react-original":"https://esm.sh/preact@10.15.1/compat", "react-original":"https://esm.sh/preact@10.15.1/compat",
"@able/": "./_lib_/" "@able/": "./"
}, },
"tasks": "tasks":
{ {

2
example/app.tsx
View File

@ -1,4 +1,4 @@
import "@able/boot.tsx"; import "@able/boot-server.tsx";
import React from "react"; import React from "react";
const CTXString = React.createContext("lol"); const CTXString = React.createContext("lol");

2
example/deno.json
View File

@ -3,7 +3,7 @@
"imports": "imports":
{ {
"react":"https://esm.sh/preact@10.15.1/compat", "react":"https://esm.sh/preact@10.15.1/compat",
"@able/":"http://localhost:4507/_lib_/" "@able/":"http://localhost:4507/"
}, },
"tasks": "tasks":
{ {

6
_lib_/hmr.tsx → hmr-listen.tsx
View File

@ -1,5 +1,4 @@
import { type StateCapture } from "./react.tsx"; import { type StateCapture } from "./hmr-react.tsx";
const FileListeners = new Map() as Map<string, Array<(module:unknown)=>void>>; const FileListeners = new Map() as Map<string, Array<(module:unknown)=>void>>;
export const FileListen =(inPath:string, inHandler:()=>void)=> 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")}) Socket.addEventListener("error", ()=>{clearInterval(SocketTimer); console.log("HMR socket lost")})
const SocketTimer = setInterval(()=>{Socket.send("ping")}, 5000); const SocketTimer = setInterval(()=>{Socket.send("ping")}, 5000);
/* /*
Each custom component is secretly modified to have an extra state and id. 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 moved into *statesOld*
- statesNew is cleared. - statesNew is cleared.
*/ */
const HMR = const HMR =
{ {
reloads:1, reloads:1,

4
_lib_/react.tsx → hmr-react.tsx
View File

@ -1,5 +1,5 @@
import * as ReactParts from "react-original"; import * as ReactParts from "react-original";
import { HMR } from "./hmr.tsx"; import { HMR } from "./hmr-listen.tsx";
export type StateType = boolean|number|string|Record<string, string> export type StateType = boolean|number|string|Record<string, string>
export type StateCapture = {state:StateType, set:ReactParts.StateUpdater<StateType>, reload:number}; export type StateCapture = {state:StateType, set:ReactParts.StateUpdater<StateType>, reload:number};
@ -68,7 +68,6 @@ const ProxyState =(argNew:StateType)=>
// this is a switch/ui change, not a HMR reload change // this is a switch/ui change, not a HMR reload change
const oldState = MapIndex(HMR.statesOld, HMR.statesNew.size-1); const oldState = MapIndex(HMR.statesOld, HMR.statesNew.size-1);
oldState && HMR.statesOld.set(oldState[0], {...oldState[1], state:argNew}); oldState && HMR.statesOld.set(oldState[0], {...oldState[1], state:argNew});
console.log("check: ui-invoked")
} }
HMR.statesNew.delete(id); HMR.statesNew.delete(id);
@ -112,7 +111,6 @@ const ProxyReducer =(inReducer:(inState:Storelike, inAction:string)=>Storelike,
const capture = inReducer(inInterceptState, inInterceptAction); const capture = inReducer(inInterceptState, inInterceptAction);
const stateUser = {state:capture, set:()=>{}, reload:HMR.reloads}; const stateUser = {state:capture, set:()=>{}, reload:HMR.reloads};
HMR.statesNew.set(id, stateUser); HMR.statesNew.set(id, stateUser);
console.log("interepted reducer", stateUser);
return capture; return capture;
}; };

18
local.tsx → run-local.tsx
View File

@ -1,7 +1,7 @@
import {Configure, Transpile, Extension} from "./serve.tsx"; import {Configure, Transpile, Extension} from "./run-serve.tsx";
const SocketsLive:Set<WebSocket> = new Set(); const SocketsLive:Set<WebSocket> = 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({ Configure({
SWCOp: SWCOp:
@ -18,22 +18,22 @@ Configure({
} }
} }
}, },
Remap: (inImports)=> Remap: (inImports, inConfig)=>
{ {
inImports["react-original"] = inImports["react"]; inImports["react-original"] = inImports["react"];
inImports["react"] = "/_lib_/react.tsx"; inImports["react"] = `${inConfig.Spoof}/hmr-react.tsx`;
return inImports; 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 = []; const members = [];
for( const key in imp ) { members.push(key); } for( const key in imp ) { members.push(key); }
const code =` const code =`
import {FileListen} from "/_lib_/hmr.tsx"; import {FileListen} from "${inConfig.Spoof}/hmr-listen.tsx";
import * as Import from "${inURL.pathname}?reload=0"; import * as Import from "${inURL.pathname}?reload=0";
${ members.map(m=>`let proxy_${m} = Import.${m}; export { proxy_${m} as ${m} };`).join("\n") } ${ members.map(m=>`let proxy_${m} = Import.${m}; export { proxy_${m} as ${m} };`).join("\n") }
FileListen("${inURL.pathname}", (updatedModule)=> FileListen("${inURL.pathname}", (updatedModule)=>
@ -97,4 +97,4 @@ const Watcher =async()=>
} }
} }
Watcher().then(()=>console.log("done watching")); Watcher();

48
serve.tsx → run-serve.tsx
View File

@ -28,32 +28,35 @@ const ImportMapReload =async()=>
json.imports[key] = value.substring(1); 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"]) if(!json.imports["react"])
{ {
console.log(`"react" specifier not defined in import map`); 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); console.log(ImportMap.imports);
}; };
type CustomHTTPHandler = (inReq:Request, inURL:URL, inExt:string|false, inMap:{imports:Record<string, string>}, inProxy:string)=>void|false|Response|Promise<Response|void|false>; type CustomHTTPHandler = (inReq:Request, inURL:URL, inExt:string|false, inMap:{imports:Record<string, string>}, inConfig:Configuration)=>void|false|Response|Promise<Response|void|false>;
type CustomRemapper = (inImports:Record<string, string>)=>Record<string, string>; type CustomRemapper = (inImports:Record<string, string>, inConfig:Configuration)=>Record<string, string>;
type Configuration = {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, 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 = let Configuration:Configuration =
{ {
Proxy: new URL(`file://${Deno.cwd().replaceAll("\\", "/")}`).toString(), Proxy: new URL(`file://${Deno.cwd().replaceAll("\\", "/")}`).toString(),
Allow: "*", Allow: "*",
Reset: "/clear-cache", Reset: "/clear-cache",
Serve(inReq, inURL, inExt, inMap, inProxy){}, Spoof: "/@able",
Remap: (inImports)=> Serve(inReq, inURL, inExt, inMap, inConfig){},
Remap: (inImports, inConfig)=>
{ {
const reactURL = inImports["react"]; const reactURL = inImports["react"];
const setting = Configuration.SWCOp?.jsc?.transform?.react; const setting = Configuration.SWCOp?.jsc?.transform?.react;
@ -63,23 +66,22 @@ let Configuration:Configuration =
} }
return inImports; return inImports;
}, },
Shell(inReq, inURL, inExt, inMap, inProxy) Shell(inReq, inURL, inExt, inMap, inConfig)
{ {
console.log("Start app:", Deno.mainModule, "start dir", inProxy); const parts = Deno.mainModule.split(inConfig.Proxy);
console.log("Split:", Deno.mainModule.split(inProxy) );
const parts = Deno.mainModule.split(inProxy);
return new Response( return new Response(
`<!doctype html> `<!doctype html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8"/>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="importmap">${JSON.stringify(inMap)}</script> <script type="importmap">${JSON.stringify(inMap)}</script>
<script type="module"> <script type="module">
import Mount from "/_lib_/mount.tsx"; import Mount from "${inConfig.Spoof}/boot-browser.tsx";
Mount("#app", "${parts[1]??"/app.tsx"}"); Mount("#app", "${parts[1]??"/app.tsx"}");
</script> </script>
</body> </body>
@ -179,7 +181,7 @@ HTTP.serve(async(req: Request)=>
} }
// allow for custom handler // 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) if(custom)
{ {
return custom; return custom;
@ -190,15 +192,17 @@ HTTP.serve(async(req: Request)=>
{ {
let code; let code;
let path; 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 else
{ {
path = import.meta.url+"/.."+url.pathname; path = clipRoot + clipPath;
} }
code = await Transpile.Fetch(path, url.pathname, true); code = await Transpile.Fetch(path, url.pathname, true);
} }
@ -217,7 +221,7 @@ HTTP.serve(async(req: Request)=>
// custom page html // custom page html
if(!ext) 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) if(shell)
{ {
return shell; return shell;