hmr #1

Merged
SethTrowbridge merged 9 commits from hmr into master 2023-04-01 11:13:22 -04:00
2 changed files with 203 additions and 34 deletions
Showing only changes of commit 08ecdfa6f0 - Show all commits

132
hmr/react.tsx Normal file
View File

@ -0,0 +1,132 @@
import * as ReactParts from "react-original";
const H = ReactParts.createElement;
const HMR = {
registered: new Map(),
states: new Map(),
statesOld: new Map(),
reloads: 0,
wireframe: false
};
HMR.onChange =(key, value)=>
{
HMR.registered.set(key, value);
};
HMR.update =()=>
{
HMR.reloads++;
const keys = [];
for(const [key, value] of HMR.registered){ keys.push(key); }
HMR.registered.clear();
HMR.statesOld = HMR.states;
HMR.states = new Map();
keys.forEach(k=>k());
HMR.echoState();
};
HMR.echoState =()=>
{
let output = [];
for(const[key, val] of HMR.statesOld)
{
output[key] = val.state+"--"+val.reload;
}
console.log(output);
output = [];
for(const[key, val] of HMR.states)
{
output[key] = val.state+"--"+val.reload;
}
console.log(output);
};
HMR.wipe =()=>
{
HMR.statesOld = new Map();
};
const MapAt =(inMap, inIndex)=>
{
let index = 0;
for(const kvp of inMap)
{
if(index == inIndex)
{
return kvp;
}
index++;
}
return false;
}
window.HMR = HMR;
const ProxyElement = (props)=>
{
const [stateGet, stateSet] = ReactParts.useState(0);
ReactParts.useEffect(()=>HMR.onChange( ()=>stateSet(stateGet+1), "ProxyElement" ));
const child = H(...props.__args);
if(HMR.wireframe)
{
return H("div", {style:{padding:"10px", border:"2px solid red"}},
H("p", null, stateGet),
child
);
}
else
{
return child;
}
};
const ProxyCreate =(...args)=>
{
return typeof args[0] != "string" ? H(ProxyElement, {__args:args, ...args[1]}) : H(...args);
};
const ProxyState =(arg)=>
{
const id = ReactParts.useId();
const trueArg = arg;
// does statesOld have an entry for this state? use that instead of the passed arg
const check = MapAt(HMR.statesOld, HMR.states.size);
if(check)
{
arg = check[1].state;
console.info(`BOOTING with ${arg}`);
}
const lastKnowReloads = HMR.reloads;
const [stateGet, stateSet] = ReactParts.useState(arg);
ReactParts.useEffect(()=>{
return ()=>{
if(HMR.reloads == lastKnowReloads)
{
// this is a switch/ui change, not a HMR reload change
const oldState = MapAt(HMR.statesOld, HMR.states.size-1);
HMR.statesOld.set(oldState[0], {...oldState[1], state:trueArg});
}
HMR.states.delete(id);
}
}, []);
if(!HMR.states.has(id))
{
HMR.states.set(id, {state:arg, set:stateSet, reload:HMR.reloads});
}
function proxySetter (arg)
{
//console.log("state spy update", id, arg);
HMR.states.set(id, {state:arg, set:stateSet, reload:HMR.reloads});
return stateSet(arg);
}
return [stateGet, proxySetter];
};
export * from "react-alias";
export { ProxyCreate as createElement, ProxyState as useState };
export default {...ReactParts.default, createElement:ProxyCreate, useState:ProxyState};

View File

@ -34,13 +34,13 @@ export const Transpile =async(inPath:string, inKey:string):Promise<string>=>
}; };
type ImportMap = {imports?:Record<string, string>, importMap?:string};
let ImportString = ``; let ImportString = ``;
let ImportObject = {}; let ImportObject:ImportMap = {};
try try
{ {
const confDeno = await Deno.readTextFile(Deno.cwd()+"/deno.json"); const confDeno = await Deno.readTextFile(Deno.cwd()+"/deno.json");
const confDenoParsed:{importMap?:string, imports?:string} = JSON.parse(confDeno); const confDenoParsed:ImportMap = JSON.parse(confDeno);
if(confDenoParsed.importMap) if(confDenoParsed.importMap)
{ {
try try
@ -53,12 +53,12 @@ try
} }
catch(e) catch(e)
{ {
console.log(`importMap "${confDenoParsed.importMap}" contains invalid JSON`); console.log(`"importMap" "${confDenoParsed.importMap}" contains invalid JSON`);
} }
} }
catch(e) catch(e)
{ {
console.log(`importMap "${confDenoParsed.importMap}" cannot be found`); console.log(`"importMap" "${confDenoParsed.importMap}" cannot be found`);
} }
} }
else if(confDenoParsed.imports) else if(confDenoParsed.imports)
@ -66,11 +66,33 @@ try
ImportObject = {imports:confDenoParsed.imports}; ImportObject = {imports:confDenoParsed.imports};
ImportString = JSON.stringify(ImportObject); ImportString = JSON.stringify(ImportObject);
} }
if(ImportObject.imports)
{
const importReact = ImportObject.imports?.["react"];
if(importReact)
{
ImportObject.imports["react-original"] = importReact;
ImportObject.imports["react"] = "/hmr/react.tsx";
ImportString = JSON.stringify(ImportObject);
}
else
{
console.log(`"imports" configuration does not alias "react"`);
}
}
else
{
console.log(`No "imports" found in configuration`);
}
} }
catch(e) catch(e)
{ {
console.log(`deno.json not found`); console.log(`deno.json not found`);
} }
const Index = ` const Index = `
<!doctype html> <!doctype html>
<html> <html>
@ -130,6 +152,9 @@ window.HMR = (path, handler)=>
</html> </html>
`; `;
const path = import.meta.resolve(`./hmr/react.sx`);
console.log("meta path", path);
Deno.serve({ port: 3000 }, async(_req:Request) => Deno.serve({ port: 3000 }, async(_req:Request) =>
{ {
const url:URL = new URL(_req.url); const url:URL = new URL(_req.url);
@ -168,38 +193,50 @@ Deno.serve({ port: 3000 }, async(_req:Request) =>
let type = `text/html`; let type = `text/html`;
let body:BodyInit = Index; let body:BodyInit = Index;
// serve .tsx .jsx .ts .js if(url.pathname.startsWith("/hmr/"))
if(Transpileable(url.pathname))
{ {
type = `application/javascript`; const path = import.meta.resolve(`.${url.pathname}`);
if(!url.searchParams.get("reload")) console.log("import path", path);
{ const resp = await fetch(path);
const path = `file://${Deno.cwd().replaceAll("\\", "/")+url.pathname}`; body = await resp.text();
console.log(path); //body = Transpiled.get(url.pathname) || await Transpile("."+url.pathname, url.pathname);
const imp = await import(path);
const members = [];
for( const key in imp ) { members.push(key); }
body =
`import * as Import from "${url.pathname}?reload=0";
${ members.map(m=>`let proxy_${m} = Import.${m}; export { proxy_${m} as ${m} };`).join(" ") }
const reloadHandler = (updatedModule)=>
{
${ members.map(m=>`proxy_${m} = updatedModule.${m};`).join("\n") }
};
window.HMR("${url.pathname}", reloadHandler);`;
}
else
{
body = Transpiled.get(url.pathname) || await Transpile(fsPath, url.pathname);
}
} }
// serve static media else
else if( url.pathname.endsWith("/") === false)
{ {
body = await Deno.readFile(fsPath); // serve .tsx .jsx .ts .js
type = MIME.typeByExtension(url.pathname.substring(url.pathname.lastIndexOf("."))) || "text/html"; if(Transpileable(url.pathname))
{
type = `application/javascript`;
if(!url.searchParams.get("reload"))
{
const path = `file://${Deno.cwd().replaceAll("\\", "/")+url.pathname}`;
console.log(path);
const imp = await import(path);
const members = [];
for( const key in imp ) { members.push(key); }
body =
`import * as Import from "${url.pathname}?reload=0";
${ members.map(m=>`let proxy_${m} = Import.${m}; export { proxy_${m} as ${m} };`).join(" ") }
const reloadHandler = (updatedModule)=>
{
${ members.map(m=>`proxy_${m} = updatedModule.${m};`).join("\n") }
};
window.HMR("${url.pathname}", reloadHandler);`;
}
else
{
body = Transpiled.get(url.pathname) || await Transpile(fsPath, url.pathname);
}
}
// serve static media
else if( url.pathname.endsWith("/") === false)
{
body = await Deno.readFile(fsPath);
type = MIME.typeByExtension(url.pathname.substring(url.pathname.lastIndexOf("."))) || "text/html";
}
} }
return new Response(body, {headers:{"content-type":type as string}}); return new Response(body, {headers:{"content-type":type as string}});