hmr/react.tsx

@@ -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};

server.tsx

@@ -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 ImportObject = {};
+let ImportObject:ImportMap = {};
 try
 {
-    
     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)
     {
         try
@@ -53,12 +53,12 @@ try
             }
             catch(e)
             {
-                console.log(`importMap "${confDenoParsed.importMap}" contains invalid JSON`);
+                console.log(`"importMap" "${confDenoParsed.importMap}" contains invalid JSON`);
             }
         }
         catch(e)
         {
-            console.log(`importMap "${confDenoParsed.importMap}" cannot be found`);
+            console.log(`"importMap" "${confDenoParsed.importMap}" cannot be found`);
         }
     }
     else if(confDenoParsed.imports)
@@ -66,11 +66,33 @@ try
         ImportObject = {imports:confDenoParsed.imports};
         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)
 {
     console.log(`deno.json not found`);
 }
+
+
 const Index = `
 <!doctype html>
 <html>
@@ -130,6 +152,9 @@ window.HMR = (path, handler)=>
 </html>
 `;
 
+const path = import.meta.resolve(`./hmr/react.sx`);
+console.log("meta path", path);
+
 Deno.serve({ port: 3000 }, async(_req:Request) =>
 {
     const url:URL = new URL(_req.url);
@@ -168,6 +193,16 @@ Deno.serve({ port: 3000 }, async(_req:Request) =>
         let type = `text/html`;
         let body:BodyInit = Index;
 
+        if(url.pathname.startsWith("/hmr/"))
+        {
+            const path = import.meta.resolve(`.${url.pathname}`);
+            console.log("import path", path);
+            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))
             {
@@ -181,13 +216,13 @@ Deno.serve({ port: 3000 }, async(_req:Request) =>
                     const members = [];
                     for( const key in imp ) { members.push(key); }
                     body =
-`import * as Import from "${url.pathname}?reload=0";
+    `import * as Import from "${url.pathname}?reload=0";
-${ members.map(m=>`let proxy_${m} = Import.${m}; export { proxy_${m} as ${m} };`).join(" ") }
+    ${ members.map(m=>`let proxy_${m} = Import.${m}; export { proxy_${m} as ${m} };`).join(" ") }
-const reloadHandler = (updatedModule)=>
+    const reloadHandler = (updatedModule)=>
-{
+    {
         ${ members.map(m=>`proxy_${m} = updatedModule.${m};`).join("\n") }
-};
+    };
-window.HMR("${url.pathname}", reloadHandler);`;
+    window.HMR("${url.pathname}", reloadHandler);`;
 
                 }
                 else
@@ -202,6 +237,8 @@ window.HMR("${url.pathname}", reloadHandler);`;
                 type = MIME.typeByExtension(url.pathname.substring(url.pathname.lastIndexOf("."))) || "text/html";
             }
 
+        }
+
         return new Response(body, {headers:{"content-type":type as string}});
     }
     catch(error)