hmr #1
@ -1,6 +1,7 @@
|
|||||||
{
|
{
|
||||||
"tasks":
|
"tasks":
|
||||||
{
|
{
|
||||||
"install": "deno install -f -A --unstable --no-lock -n tsx server.tsx"
|
"install": "deno install -f -A --unstable --no-lock -n tsx server.tsx",
|
||||||
|
"run": "deno run -A --unstable --no-lock server.tsx"
|
||||||
}
|
}
|
||||||
}
|
}
|
10
deno.lock
10
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"
|
|
||||||
}
|
|
||||||
}
|
|
242
server.tsx
242
server.tsx
@ -1,108 +1,77 @@
|
|||||||
import * as ESBuild from 'https://deno.land/x/esbuild@v0.14.45/mod.js';
|
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";
|
import { debounce } from "https://deno.land/std@0.151.0/async/debounce.ts";
|
||||||
|
|
||||||
console.log(`Serving files from "${Deno.cwd()}"`);
|
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 Transpiled = new Map();
|
||||||
const Transpile =async(inPath:string, inKey:string):Promise<string>=>
|
/**
|
||||||
|
* checks for (.tsx | .jsx | .ts | .js) extensions
|
||||||
|
*/
|
||||||
|
export const Transpileable =(inFilePath:string):boolean=>
|
||||||
|
{
|
||||||
|
let dotIndex = inFilePath.length-4;
|
||||||
|
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;
|
||||||
|
};
|
||||||
|
export const Transpile =async(inPath:string, inKey:string):Promise<string>=>
|
||||||
{
|
{
|
||||||
const body = await Deno.readTextFile(inPath);
|
const body = await Deno.readTextFile(inPath);
|
||||||
const transpile = await ESBuild.transform(body, { loader: "tsx", sourcemap: "inline" });
|
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;
|
||||||
};
|
};
|
||||||
|
|
||||||
const confDeno = await Deno.readTextFile(Deno.cwd()+"/deno.json");
|
|
||||||
const pathImport = JSON.parse(confDeno).importMap;
|
|
||||||
const confImports = await Deno.readTextFile(pathImport);
|
|
||||||
|
|
||||||
|
let ImportString = ``;
|
||||||
|
let ImportObject = {};
|
||||||
|
try
|
||||||
|
{
|
||||||
|
const confDeno = await Deno.readTextFile(Deno.cwd()+"/deno.json");
|
||||||
|
const confDenoParsed:{importMap?:string, imports?:string} = 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch(e)
|
||||||
|
{
|
||||||
|
console.log(`deno.json not found`);
|
||||||
|
}
|
||||||
const Index = `
|
const Index = `
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
@ -111,7 +80,7 @@ const Index = `
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">Loading</div>
|
<div id="app">Loading</div>
|
||||||
<script type="importmap">${confImports}</script>
|
<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>
|
<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">
|
<script type="module">
|
||||||
import * as TW from "https://esm.sh/@twind/core@1.0.1";
|
import * as TW from "https://esm.sh/@twind/core@1.0.1";
|
||||||
@ -136,43 +105,31 @@ const Index = `
|
|||||||
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);
|
||||||
const type = Type(url.pathname);
|
|
||||||
const fsPath = Deno.cwd()+url.pathname;
|
const fsPath = Deno.cwd()+url.pathname;
|
||||||
|
|
||||||
console.log(`Request for "${url.pathname}"...`);
|
console.log(`Request for "${url.pathname}"...`);
|
||||||
|
|
||||||
try
|
try
|
||||||
{
|
{
|
||||||
let body:BodyInit;
|
// serve index by default
|
||||||
if(type == "application/javascript")
|
let type = `text/html`;
|
||||||
|
let body:BodyInit = Index;
|
||||||
|
|
||||||
|
// serve .tsx .jsx .ts .js
|
||||||
|
if(Transpileable(url.pathname))
|
||||||
{
|
{
|
||||||
body = Transpiled.get(url.pathname);
|
body = Transpiled.get(url.pathname);
|
||||||
|
type = `application/javascript`;
|
||||||
if(!body)
|
if(!body)
|
||||||
{
|
{
|
||||||
body = await Transpile(fsPath, url.pathname);
|
body = await Transpile(fsPath, url.pathname);
|
||||||
console.log(` ...added to cache`);
|
|
||||||
}
|
}
|
||||||
else
|
}
|
||||||
|
// serve static media
|
||||||
|
else if( url.pathname.endsWith("/") === false)
|
||||||
{
|
{
|
||||||
console.log(` ...retrieved from cache`);
|
body = await Deno.readFile(fsPath);
|
||||||
}
|
type = MIME.typeByExtension(url.pathname.substring(url.pathname.lastIndexOf("."))) || "text/html";
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
if(url.pathname == "/")
|
|
||||||
{
|
|
||||||
body = Index;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
let file = fsPath;
|
|
||||||
if(url.pathname.endsWith("/"))
|
|
||||||
{
|
|
||||||
console.log(` ...implied index.html`);
|
|
||||||
file += "index.html";
|
|
||||||
}
|
|
||||||
body = await Deno.readFile(file);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return new Response(body, {headers:{"content-type":type as string}});
|
return new Response(body, {headers:{"content-type":type as string}});
|
||||||
@ -184,30 +141,59 @@ Deno.serve({ port: 3000 }, async(_req:Request) =>
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
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); } }
|
||||||
|
Deno.serve({ port: 3001 }, (_req:Request) =>
|
||||||
|
{
|
||||||
|
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)
|
||||||
|
{
|
||||||
|
//
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return new Response("Overwatch: Not a websocket request.");
|
||||||
|
});
|
||||||
|
const FilesChanged:Map<string, string> = new Map();
|
||||||
const ProcessFiles =debounce(async()=>
|
const ProcessFiles =debounce(async()=>
|
||||||
{
|
{
|
||||||
console.log("Files changed...")
|
console.log("Files changed...")
|
||||||
for await (const [file, action] of filesChanged)
|
for await (const [file, action] of FilesChanged)
|
||||||
{
|
{
|
||||||
const pathname = file.substring(Deno.cwd().length).replaceAll("\\", "/");
|
const pathname = file.substring(Deno.cwd().length).replaceAll("\\", "/");
|
||||||
const type = Type(pathname);
|
console.log(pathname, action);
|
||||||
console.log(pathname, type, action);
|
if(Transpileable(pathname))
|
||||||
if(type == "application/javascript")
|
|
||||||
{
|
{
|
||||||
if(action !== "remove")
|
if(action !== "remove")
|
||||||
{
|
{
|
||||||
await Transpile(file, pathname);
|
await Transpile(file, pathname);
|
||||||
console.log(` ...cached "${pathname}"`);
|
console.log(` ...cached "${pathname}"`);
|
||||||
|
SocketsBroadcast(pathname);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
filesChanged.clear();
|
FilesChanged.clear();
|
||||||
}, 1000);
|
}, 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 => FilesChanged.set(path, event.kind) );
|
||||||
ProcessFiles();
|
ProcessFiles();
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user