hmr #1
29
server.tsx
29
server.tsx
@ -3,10 +3,7 @@ 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";
|
||||||
|
|
||||||
const Transpiled = new Map();
|
const Transpiled = new Map();
|
||||||
/**
|
const Transpileable =(inFilePath:string):boolean=>
|
||||||
* checks for (.tsx | .jsx | .ts | .js) extensions
|
|
||||||
*/
|
|
||||||
export const Transpileable =(inFilePath:string):boolean=>
|
|
||||||
{
|
{
|
||||||
let dotIndex = inFilePath.length-4;
|
let dotIndex = inFilePath.length-4;
|
||||||
if(inFilePath[dotIndex] !== ".")
|
if(inFilePath[dotIndex] !== ".")
|
||||||
@ -25,14 +22,14 @@ export const Transpileable =(inFilePath:string):boolean=>
|
|||||||
|
|
||||||
return false;
|
return false;
|
||||||
};
|
};
|
||||||
export const Transpile =async(inCode:string, inKey:string):Promise<string>=>
|
const Transpile =async(inCode:string, inKey:string):Promise<string>=>
|
||||||
{
|
{
|
||||||
const transpile = await ESBuild.transform(inCode, { loader: "tsx", sourcemap: "inline", minify:true });
|
const transpile = await ESBuild.transform(inCode, { 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>;
|
type Transpiler = (inPath:string, inKey:string, inCheck?:boolean)=>Promise<string>;
|
||||||
export const TranspileFS:Transpiler =async(inPath, inKey, inCheck)=>
|
const TranspileFS:Transpiler =async(inPath, inKey, inCheck)=>
|
||||||
{
|
{
|
||||||
if(inCheck)
|
if(inCheck)
|
||||||
{
|
{
|
||||||
@ -45,7 +42,7 @@ export const TranspileFS:Transpiler =async(inPath, inKey, inCheck)=>
|
|||||||
const body = await Deno.readTextFile(inPath);
|
const body = await Deno.readTextFile(inPath);
|
||||||
return Transpile(body, inKey);
|
return Transpile(body, inKey);
|
||||||
};
|
};
|
||||||
export const TranspileURL:Transpiler =async(inPath, inKey, inCheck)=>
|
const TranspileURL:Transpiler =async(inPath, inKey, inCheck)=>
|
||||||
{
|
{
|
||||||
if(inCheck)
|
if(inCheck)
|
||||||
{
|
{
|
||||||
@ -62,7 +59,7 @@ export const TranspileURL:Transpiler =async(inPath, inKey, inCheck)=>
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const LibPath = "lib";
|
||||||
type ImportMap = {imports?:Record<string, string>, importMap?:string};
|
type ImportMap = {imports?:Record<string, string>, importMap?:string};
|
||||||
let ImportString = ``;
|
let ImportString = ``;
|
||||||
let ImportObject:ImportMap = {};
|
let ImportObject:ImportMap = {};
|
||||||
@ -102,8 +99,7 @@ try
|
|||||||
if(importReact)
|
if(importReact)
|
||||||
{
|
{
|
||||||
ImportObject.imports["react-original"] = importReact;
|
ImportObject.imports["react-original"] = importReact;
|
||||||
ImportObject.imports["react"] = "/lib/react.tsx";
|
ImportObject.imports["react"] = `./${LibPath}/react.tsx`;
|
||||||
ImportObject.imports["hmr"] = "/lib/hmr.tsx";
|
|
||||||
ImportString = JSON.stringify(ImportObject);
|
ImportString = JSON.stringify(ImportObject);
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
@ -121,21 +117,16 @@ catch(e)
|
|||||||
{
|
{
|
||||||
console.log(`deno.json not found`);
|
console.log(`deno.json not found`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const Index = `
|
const Index = `
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">Loading</div>
|
<div id="app">Loading</div>
|
||||||
<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 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";
|
||||||
import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
|
import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
|
||||||
@ -197,7 +188,7 @@ Deno.serve({ port: 3000 }, async(_req:Request) =>
|
|||||||
let type = `text/html`;
|
let type = `text/html`;
|
||||||
let body:BodyInit = Index;
|
let body:BodyInit = Index;
|
||||||
|
|
||||||
const isLib = url.pathname.startsWith("/lib/")
|
const isLib = url.pathname.startsWith(`/${LibPath}/`)
|
||||||
|
|
||||||
// serve .tsx .jsx .ts .js
|
// serve .tsx .jsx .ts .js
|
||||||
if(Transpileable(url.pathname))
|
if(Transpileable(url.pathname))
|
||||||
@ -217,7 +208,7 @@ Deno.serve({ port: 3000 }, async(_req:Request) =>
|
|||||||
for( const key in imp ) { members.push(key); }
|
for( const key in imp ) { members.push(key); }
|
||||||
body =
|
body =
|
||||||
`
|
`
|
||||||
import {FileListen} from "hmr";
|
import {FileListen} from "/${LibPath}/hmr.tsx";
|
||||||
import * as Import from "${url.pathname}?reload=0";
|
import * as Import from "${url.pathname}?reload=0";
|
||||||
${ members.map(m=>`let proxy_${m} = Import.${m};
|
${ members.map(m=>`let proxy_${m} = Import.${m};
|
||||||
export { proxy_${m} as ${m} };
|
export { proxy_${m} as ${m} };
|
||||||
|
Loading…
Reference in New Issue
Block a user