Merge pull request 'hmr' (#1) from hmr into master

Reviewed-on: #1

deno.json

@@ -1,6 +1,14 @@
 {
+    "compilerOptions": {"lib": [
+        "deno.window", "DOM"
+    ]},
+    "imports": {
+        "react-original": "https://esm.sh/react@18.2.0"
+    },
     "tasks":
     {
-        "install": "deno install -f -A --unstable --no-lock -n tsx server.tsx"
+        "install": "deno install -f -A --unstable --no-lock -n eno server.tsx",
+        "run": "deno run -A --unstable --no-lock server.tsx",
+        "host": "deno run -A --unstable https://deno.land/std@0.181.0/http/file_server.ts"
     }
 }

deno.lock

@@ -1,10 +0,0 @@
-{
-  "version": "2",
-  "remote": {
-    "https://deno.land/std@0.151.0/async/debounce.ts": "564273ef242bcfcda19a439132f940db8694173abffc159ea34f07d18fc42620",
-    "https://deno.land/x/denoflate@1.2.1/mod.ts": "f5628e44b80b3d80ed525afa2ba0f12408e3849db817d47a883b801f9ce69dd6",
-    "https://deno.land/x/denoflate@1.2.1/pkg/denoflate.js": "b9f9ad9457d3f12f28b1fb35c555f57443427f74decb403113d67364e4f2caf4",
-    "https://deno.land/x/denoflate@1.2.1/pkg/denoflate_bg.wasm.js": "d581956245407a2115a3d7e8d85a9641c032940a8e810acbd59ca86afd34d44d",
-    "https://deno.land/x/esbuild@v0.14.45/mod.js": "ab18347f6a57e56f776a9997a5b726f7f6c8d1f008f08e41e7273be8c31e12f4"
-  }
-}

lib/hmr.tsx

@@ -0,0 +1,74 @@
+
+let reloads = 0;
+const listeners = new Map() as Map<string, Array<(module:unknown)=>void>>;
+new WebSocket("ws://"+document.location.host).addEventListener('message', (event) =>
+{
+    let handlers = listeners.get(event.data)??[];
+    reloads++;
+    Promise.all(
+        handlers.map(handler=>
+        {
+            return import(event.data+"?reload="+reloads)
+            .then(updatedModule=>handler(updatedModule));
+        })
+    ).then(()=>HMR.update());
+});
+
+export const FileListen =(inPath:string, inHandler:()=>void)=>
+{
+    const members = listeners.get(inPath)??[];
+    members.push(inHandler);
+    listeners.set(inPath, members);
+};
+
+const HMR = {
+    reloads:0,
+    registered: new Map() as Map<string, ()=>void>,
+    states: new Map(),
+    statesOld: new Map(),
+    wireframe: false,
+    onChange(key:string, value:()=>void):void
+    {
+        this.registered.set(key, value);
+    },
+    update()
+    {
+        this.reloads++;
+        this.registered.forEach(handler=>handler());
+        this.registered.clear();
+        this.statesOld = this.states;
+        this.states = new Map();
+        this.echoState();
+    },
+    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);
+    }
+};
+
+export {HMR};
+
+export const MapAt =(inMap, inIndex)=>
+{
+    let index = 0;
+    for(const kvp of inMap)
+    {
+        if(index == inIndex)
+        {
+            return kvp;
+        }
+        index++;
+    }
+    return false;
+};

lib/react.tsx

@@ -0,0 +1,76 @@
+import * as ReactParts from "react-original";
+import { HMR, MapAt } from "./hmr.tsx";
+
+const H = ReactParts.createElement;
+
+const ProxyElement = (props)=>
+{
+    const id = ReactParts.useId();
+    const [stateGet, stateSet] = ReactParts.useState(0);
+    ReactParts.useEffect(()=>HMR.onChange(id, ()=>stateSet(stateGet+1)));
+
+    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-original";
+export { ProxyCreate as createElement, ProxyState as useState };
+export default {...ReactParts.default, createElement:ProxyCreate, useState:ProxyState};

runner.tsx

@@ -1,7 +0,0 @@
-import * as FS from "https://deno.land/std@0.144.0/fs/mod.ts";
-
-console.log(Deno.args, import.meta.url);
-/*
-await Deno.mkdir("deep");
-await Deno.create(`deep/file.txt`, "sup");
-*/

server.tsx

@@ -1,118 +1,132 @@
 import * as ESBuild from 'https://deno.land/x/esbuild@v0.14.45/mod.js';
+import * as MIME from "https://deno.land/std@0.180.0/media_types/mod.ts";
 import { debounce } from "https://deno.land/std@0.151.0/async/debounce.ts";
-console.log(`Serving files from "${Deno.cwd()}"`);
-
-const MIME:Record<string, string> = {
-    ".aac": "audio/aac",
-    ".abw": "application/x-abiword",
-    ".arc": "application/x-freearc",
-    ".avif": "image/avif",
-    ".avi": "video/x-msvideo",
-    ".azw": "application/vnd.amazon.ebook",
-    ".bin": "application/octet-stream",
-    ".bmp": "image/bmp",
-    ".bz": "application/x-bzip",
-    ".bz2": "application/x-bzip2",
-    ".cda": "application/x-cdf",
-    ".csh": "application/x-csh",
-    ".css": "text/css",
-    ".csv": "text/csv",
-    ".doc": "application/msword",
-    ".docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-    ".eot": "application/vnd.ms-fontobject",
-    ".epub": "application/epub+zip",
-    ".gz": "application/gzip",
-    ".gif": "image/gif",
-    ".htm": "text/html",
-    ".html": "text/html",
-    ".ico": "image/x-icon",
-    ".ics": "text/calendar",
-    ".jar": "application/java-archive",
-    ".jpeg": "image/jpeg",
-    ".jpg": "image/jpeg",
-    ".js": "application/javascript",
-    ".jsx": "application/javascript",
-    ".json": "application/json",
-    ".jsonld": "application/ld+json",
-    ".mid": "audio/midi",
-    ".midi": "audio/midi",
-    ".mjs": "text/javascript",
-    ".mp3": "audio/mpeg",
-    ".mp4": "video/mp4",
-    ".mpeg": "video/mpeg",
-    ".mpkg": "application/vnd.apple.installer+xml",
-    ".odp": "application/vnd.oasis.opendocument.presentation",
-    ".ods": "application/vnd.oasis.opendocument.spreadsheet",
-    ".odt": "application/vnd.oasis.opendocument.text",
-    ".oga": "audio/ogg",
-    ".ogv": "video/ogg",
-    ".ogx": "application/ogg",
-    ".opus": "audio/opus",
-    ".otf": "font/otf",
-    ".png": "image/png",
-    ".pdf": "application/pdf",
-    ".php": "application/x-httpd-php",
-    ".ppt": "application/vnd.ms-powerpoint",
-    ".pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
-    ".rar": "application/vnd.rar",
-    ".rtf": "application/rtf",
-    ".sh": "application/x-sh",
-    ".svg": "image/svg+xml",
-    ".swf": "application/x-shockwave-flash",
-    ".tar": "application/x-tar",
-    ".tif": "image/tiff",
-    ".tiff": "image/tiff",
-    ".ts": "application/javascript",
-    ".tsx": "application/javascript",
-    ".ttf": "font/ttf",
-    ".txt": "text/plain",
-    ".vsd": "application/vnd.visio",
-    ".wav": "audio/wav",
-    ".weba": "audio/webm",
-    ".webm": "video/webm",
-    ".webp": "image/webp",
-    ".woff": "font/woff",
-    ".woff2": "font/woff2",
-    ".xhtml": "application/xhtml+xml",
-    ".xls": "application/vnd.ms-excel",
-    ".xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-    ".xml": "application/xml",
-    ".xul": "application/vnd.mozilla.xul+xml",
-    ".zip": "application/zip",
-    ".3gp": "video/3gpp",
-    ".3g2": "video/3gpp2",
-    ".7z": "application/x-7z-compressed"
-};
-const Type =(inPath:string):string|undefined=>
-{
-    const dot:number = inPath.lastIndexOf(".");
-    const ext = dot > -1 ? inPath.substring(dot) : ".html";
-    return MIME[ext];
-};
 
 const Transpiled = new Map();
-const Transpile =async(inPath:string, inKey:string):Promise<string>=>
+const Transpileable =(inFilePath:string):boolean=>
 {
-    const body = await Deno.readTextFile(inPath);
+    let dotIndex = inFilePath.length-4;
-    const transpile = await ESBuild.transform(body, { loader: "tsx", sourcemap: "inline" });
+    if(inFilePath[dotIndex] !== ".")
+    {
+        if(inFilePath[++dotIndex] !== ".")
+        {
+            return false;
+        }
+    }
+
+    if(inFilePath[dotIndex+2] == "s")
+    {
+        const first = inFilePath[dotIndex+1];
+        return (first == "t" || first == "j");
+    }
+
+    return false;
+};
+const Transpile =async(inCode:string, inKey:string):Promise<string>=>
+{
+    const transpile = await ESBuild.transform(inCode, { loader: "tsx", sourcemap: "inline", minify:true });
     Transpiled.set(inKey, transpile.code);
     return transpile.code;
 };
+type Transpiler = (inPath:string, inKey:string, inCheck?:boolean)=>Promise<string>;
+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);
+};
+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);
+};
 
-const confDeno = await Deno.readTextFile(Deno.cwd()+"/deno.json");
-const pathImport = JSON.parse(confDeno).importMap;
-const confImports = await Deno.readTextFile(pathImport);
 
+const LibPath = "lib";
+type ImportMap = {imports?:Record<string, string>, importMap?:string};
+let ImportString = ``;
+let ImportObject:ImportMap = {};
+try
+{
+    const confDeno = await Deno.readTextFile(Deno.cwd()+"/deno.json");
+    const confDenoParsed:ImportMap = JSON.parse(confDeno);
+    if(confDenoParsed.importMap)
+    {
+        try
+        {
+            const confImports = await Deno.readTextFile(confDenoParsed.importMap);
+            try
+            {
+                ImportObject = JSON.parse(confImports);
+                ImportString = confImports;
+            }
+            catch(e)
+            {
+                console.log(`"importMap" "${confDenoParsed.importMap}" contains invalid JSON`);
+            }
+        }
+        catch(e)
+        {
+            console.log(`"importMap" "${confDenoParsed.importMap}" cannot be found`);
+        }
+    }
+    else if(confDenoParsed.imports)
+    {
+        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"] = `./${LibPath}/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>
     <head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script type="importmap">${ImportString}</script>
+        <script async src="https://ga.jspm.io/npm:es-module-shims@1.5.1/dist/es-module-shims.js" crossorigin="anonymous"></script>
     </head>
     <body>
         <div id="app">Loading</div>
-        <script type="importmap">${confImports}</script>
-        <script async src="https://ga.jspm.io/npm:es-module-shims@1.5.1/dist/es-module-shims.js" crossorigin="anonymous"></script>
         <script type="module">
             import * as TW   from "https://esm.sh/@twind/core@1.0.1";
             import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
@@ -125,9 +139,12 @@ const Index = `
             ShadowDOM.append(ShadowCSS);
             ShadowDOM.append(ShadowDiv);
 
-            import App from "./app.tsx";
-            App(ShadowDiv, Configure);
             TW.observe(TW.twind(Configure, TW.cssom(ShadowCSS)), ShadowDiv);
+
+            import App from "./app.tsx";
+            import {render, createElement as H} from "react";
+            render(H(()=>H(App)), ShadowDiv);
+
         </script>
     </body>
 </html>
@@ -136,42 +153,90 @@ const Index = `
 Deno.serve({ port: 3000 }, async(_req:Request) =>
 {
     const url:URL = new URL(_req.url);
-    const type = Type(url.pathname);
     const fsPath = Deno.cwd()+url.pathname;
 
     console.log(`Request for "${url.pathname}"...`);
 
+    if(_req.headers.get("upgrade") == "websocket")
+    {
+        try
+        {
+          const { response, socket } = Deno.upgradeWebSocket(_req);
+          socket.onopen = () =>
+          {
+              Sockets.add(socket);
+              console.log("Overwatch: Socket created");
+          };
+          socket.onclose = () =>
+          {
+              Sockets.delete(socket);
+              console.log("Overwatch: Socket deleted");
+          };
+          socket.onmessage = (e) => {};
+          socket.onerror = (e) => console.log("Overwatch: Socket errored:", e);
+          return response;
+        }
+        catch(e)
+        {
+            //
+        }
+    }
+
     try
     {
-        let body:BodyInit;
+        // serve index by default
-        if(type == "application/javascript")
+        let type = `text/html`;
+        let body:BodyInit = Index;
+
+        const isLib = url.pathname.startsWith(`/${LibPath}/`)
+
+        // serve .tsx .jsx .ts .js
+        if(Transpileable(url.pathname))
         {
-            body = Transpiled.get(url.pathname);
+            type = `application/javascript`;
-            if(!body)
+            if(isLib)
             {
-                body = await Transpile(fsPath, url.pathname);
+                body = await TranspileURL(url.pathname, url.pathname, true);
-                console.log(`  ...added to cache`);
+            }
+            else 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 {FileListen} from "/${LibPath}/hmr.tsx";
+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") }
+};
+FileListen("${url.pathname}", reloadHandler);`;
+
             }
             else
             {
-                console.log(`  ...retrieved from cache`);
+                body = await TranspileFS(fsPath, url.pathname, true);
             }
         }
-        else
+        // serve static media
+        else if( url.pathname.endsWith("/") === false)
         {
-            if(url.pathname == "/")
+            type = MIME.typeByExtension(url.pathname.substring(url.pathname.lastIndexOf("."))) || "text/html";
+            if(isLib)
             {
-                body = Index;
+                const _fetch = await fetch(import.meta.resolve(`.${url.pathname}`));
+                body = await _fetch.text();
             }
             else
             {
-                let file = fsPath;
+                body = await Deno.readFile(fsPath);
-                if(url.pathname.endsWith("/"))
-                {
-                    console.log(`  ...implied index.html`);
-                    file += "index.html";
-                }
-                body = await Deno.readFile(file);
             }
         }
 
@@ -179,35 +244,48 @@ Deno.serve({ port: 3000 }, async(_req:Request) =>
     }
     catch(error)
     {
-        console.log(`  ...404`);
+        console.log(error);
         return new Response(error, {status:404});
     }
 });
 
-const filesChanged:Map<string, string> = new Map();
+
+const Sockets:Set<WebSocket> = new Set();
+const SocketsBroadcast =(inData:string)=>{ for (const socket of Sockets){ socket.send(inData); } }
+
+const FilesChanged:Map<string, string> = new Map();
 const ProcessFiles =debounce(async()=>
 {
-    console.log("Files changed...")
+    console.log("Processing Files...", FilesChanged);
-    for await (const [file, action] of filesChanged)
+    for await (const [path, action] of FilesChanged)
     {
-        const pathname = file.substring(Deno.cwd().length).replaceAll("\\", "/");
+        const key = path.substring(Deno.cwd().length).replaceAll("\\", "/");
-        const type = Type(pathname);
+        console.log(key, action);
-        console.log(pathname, type, action);
+
-        if(type == "application/javascript")
+        if(action != "remove")
         {
-            if(action !== "remove")
+            await TranspileFS(path, key, false);
-            {
+            console.log(`  ...cached "${key}"`);
-                await Transpile(file, pathname);
+            SocketsBroadcast(key);
-                console.log(`  ...cached "${pathname}"`);
+        }
-            }
+        else
+        {
+            Transpiled.delete(key)
         }
     }
-    filesChanged.clear();
+    FilesChanged.clear();
 }, 1000);
-
+for await (const event of Deno.watchFs(Deno.cwd()))
-const watcher = Deno.watchFs(Deno.cwd());
-for await (const event of watcher)
 {
-    event.paths.forEach( path => filesChanged.set(path, event.kind) );
+    event.paths.forEach( path =>
-    ProcessFiles();
+    {
+        if(Transpileable(path))
+        {
+            FilesChanged.set(path, event.kind);
+        }
+    });
+    if(FilesChanged.size)
+    {
+        ProcessFiles();
+    }
 }