hmr #1

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

View File

@ -127,6 +127,6 @@ const ProxyState =(arg)=>
}; };
export * from "react-alias"; export * from "react-original";
export { ProxyCreate as createElement, ProxyState as useState }; export { ProxyCreate as createElement, ProxyState as useState };
export default {...ReactParts.default, createElement:ProxyCreate, useState:ProxyState}; export default {...ReactParts.default, createElement:ProxyCreate, useState:ProxyState};

View File

@ -25,13 +25,42 @@ export const Transpileable =(inFilePath:string):boolean=>
return false; return false;
}; };
export const Transpile =async(inPath:string, inKey:string):Promise<string>=> export const Transpile =async(inCode:string, inKey:string):Promise<string>=>
{ {
const body = await Deno.readTextFile(inPath); const transpile = await ESBuild.transform(inCode, { loader: "tsx", sourcemap: "inline", minify:true });
const transpile = await ESBuild.transform(body, { loader: "tsx", sourcemap: "inline", minify:true });
Transpiled.set(inKey, transpile.code); Transpiled.set(inKey, transpile.code);
return transpile.code; return transpile.code;
}; };
type Transpiler = (inPath:string, inKey:string, inCheck?:boolean)=>Promise<string>;
export const TranspileFS:Transpiler =async(inPath, inKey, inCheck)=>
{
if(inCheck)
{
const cached = Transpiled.get(inKey);
if(cached)
{
return cached;
}
}
const body = await Deno.readTextFile(inPath);
return Transpile(body, inKey);
};
export const TranspileURL:Transpiler =async(inPath, inKey, inCheck)=>
{
if(inCheck)
{
const cached = Transpiled.get(inKey);
if(cached)
{
return cached;
}
}
const path = import.meta.resolve(`.${inPath}`);
let body = await fetch(path);
let text = await body.text();
return Transpile(text, inKey);
};
type ImportMap = {imports?:Record<string, string>, importMap?:string}; type ImportMap = {imports?:Record<string, string>, importMap?:string};
@ -152,9 +181,6 @@ 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);
@ -193,50 +219,52 @@ Deno.serve({ port: 3000 }, async(_req:Request) =>
let type = `text/html`; let type = `text/html`;
let body:BodyInit = Index; let body:BodyInit = Index;
if(url.pathname.startsWith("/hmr/")) const isLib = url.pathname.startsWith("/lib/")
// serve .tsx .jsx .ts .js
if(Transpileable(url.pathname))
{ {
const path = import.meta.resolve(`.${url.pathname}`); type = `application/javascript`;
console.log("import path", path); if(isLib)
const resp = await fetch(path);
body = await resp.text();
//body = Transpiled.get(url.pathname) || await Transpile("."+url.pathname, url.pathname);
}
else
{
// serve .tsx .jsx .ts .js
if(Transpileable(url.pathname))
{ {
type = `application/javascript`; body = await TranspileURL(url.pathname, url.pathname, true);
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.searchParams.get("reload"))
else if( url.pathname.endsWith("/") === false) {
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 = await TranspileFS(fsPath, url.pathname, true);
}
}
// serve static media
else if( url.pathname.endsWith("/") === false)
{
type = MIME.typeByExtension(url.pathname.substring(url.pathname.lastIndexOf("."))) || "text/html";
if(isLib)
{
const _fetch = await fetch(import.meta.resolve(`.${url.pathname}`));
body = await _fetch.text();
}
else
{ {
body = await Deno.readFile(fsPath); 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}});
@ -264,7 +292,7 @@ const ProcessFiles =debounce(async()=>
{ {
if(action !== "remove") if(action !== "remove")
{ {
await Transpile(file, pathname); await TranspileFS(file, pathname, false);
console.log(` ...cached "${pathname}"`); console.log(` ...cached "${pathname}"`);
SocketsBroadcast(pathname); SocketsBroadcast(pathname);
} }