diff --git a/example/app.tsx b/example/app.tsx index 996f759..8a7cd9e 100644 --- a/example/app.tsx +++ b/example/app.tsx @@ -1,5 +1,3 @@ -import TWPreTail from "https://esm.sh/v115/@twind/preset-tailwind@1.1.4/es2022/preset-tailwind.mjs"; -import TWPreAuto from "https://esm.sh/v115/@twind/preset-autoprefix@1.0.7/es2022/preset-autoprefix.mjs"; import React from "react"; import * as Iso from "@eno/iso"; @@ -35,9 +33,4 @@ export default ()=>

404!

 ; -}; - -export const CSS = { - presets: [TWPreTail(), TWPreAuto()], - hash:false -}; +}; \ No newline at end of file diff --git a/example/deno.json b/example/deno.jsonc similarity index 55% rename from example/deno.json rename to example/deno.jsonc index ed849e6..2c2f6e0 100644 --- a/example/deno.json +++ b/example/deno.jsonc @@ -2,13 +2,13 @@ "compilerOptions": {"lib": ["deno.window", "dom"]}, "imports": { - "react": "https://esm.sh/preact@10.13.2/compat", + "react": "https://esm.sh/stable/preact@10.13.2/compat", + "preact": "https://esm.sh/stable/preact@10.13.2/", "@deep/": "./deep/", "@eno/app": "./app.tsx", "@eno/iso": "http://localhost:4507/lib/iso.tsx" }, "tasks": { - "host": "deno run -A --unstable https://deno.land/std@0.181.0/http/file_server.ts", - "dev": "deno run -A --unstable --reload=http://localhost:4507/ --no-lock --config=deno.json 'http://localhost:4507/server.tsx?reload=1'" + "dev": "deno run -A --unstable --reload=http://localhost:4507/ --no-lock app.tsx --dev" } } \ No newline at end of file diff --git a/lib/iso.tsx b/lib/iso.tsx index ade2f4e..42b621b 100644 --- a/lib/iso.tsx +++ b/lib/iso.tsx @@ -1,5 +1,17 @@ +import TWPreTail from "https://esm.sh/v115/@twind/preset-tailwind@1.1.4/es2022/preset-tailwind.mjs"; +import TWPreAuto from "https://esm.sh/v115/@twind/preset-autoprefix@1.0.7/es2022/preset-autoprefix.mjs"; import React from "react"; +export const CSS = { + presets: [TWPreTail(), TWPreAuto()], + hash:false +}; + +if(!window.innerWidth) +{ + import(import.meta.resolve("../../server.tsx")).then(()=>{console.log("...imported!");}); +} + type MetasInputs = { [Property in MetaKeys]?: string }; type MetasModeArgs = {concatListed?:boolean; dropUnlisted?:boolean}; type MetasStackItem = MetasModeArgs&MetasInputs&{id:string, depth:number} @@ -80,34 +92,6 @@ export const Meta = }); }, Object.keys(props).map( (key) => props[key as MetaKeys] )); - /* - React.useEffect(()=>{ - - metasSet((m)=> - { - const metas = {...m}; - - const additive = concatListed ? (key:MetaKeys, value:string)=> metas[key] += value : (key:MetaKeys, value:string)=> metas[key] = value; - const subtractive = dropUnlisted ? (key:MetaKeys)=> metas[key] = "" : (key:MetaKeys)=> {}; - - Object.keys(metas).forEach((key)=>{ - const metaKey = key as MetaKeys; - const propValue = props[metaKey]||""; - propValue ? additive(metaKey, propValue) : subtractive(metaKey); - }); - - Meta.Meta = metas; - console.log(Meta.Meta); - - if(window.innerWidth) - { - document.title = metas.title; - } - - return metas; - }); - }, [props]); - */ return null; } }; diff --git a/server.tsx b/server.tsx index af10b24..f912b27 100644 --- a/server.tsx +++ b/server.tsx @@ -1,335 +1,429 @@ -import * as ESBuild from 'https://deno.land/x/esbuild@v0.14.45/mod.js'; +import * as ESBuild from 'https://deno.land/x/esbuild@v0.17.4/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 { parse as JSONC} from "https://deno.land/std@0.185.0/jsonc/mod.ts"; import SSR from "https://esm.sh/v113/preact-render-to-string@6.0.2"; import Prepass from "https://esm.sh/preact-ssr-prepass@1.2.0"; import * as Twind from "https://esm.sh/@twind/core@1.1.3"; import React from "react"; import * as Iso from "@eno/iso"; -let hosted = import.meta.resolve("./"); -const Path = { - Hosted:hosted.substring(0, hosted.length-1), - Active:`file://${Deno.cwd().replaceAll("\\", "/")}` -}; -console.log(Path); +Deno.env.set("initialized", "true"); -const Transpiled = new Map(); -const Transpileable =(inFilePath:string):boolean=> +/** + * Setup a transpiler. + * @param inDevMode When true, starts a file-watcher + * @returns + */ +function Transpiler(inDevMode:boolean) { - let dotIndex = inFilePath.length-4; - if(inFilePath[dotIndex] !== ".") + const Transpiled = new Map(); + const Transpileable =(inFilePath:string):boolean=> { - if(inFilePath[++dotIndex] !== ".") + let dotIndex = inFilePath.length-4; + if(inFilePath[dotIndex] !== ".") { - return false; + 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=> -{ - const transpile = await ESBuild.transform(inCode, { loader: "tsx", sourcemap:"inline", minify:true, sourcefile:inKey}); - - Transpiled.set(inKey, transpile.code); - return transpile.code; -}; -type Transpiler = (inPath:string, inKey:string, inCheck?:boolean)=>Promise; -const TranspileURL:Transpiler =async(inPath, inKey, inCheck)=> -{ - if(inCheck) - { - const cached = Transpiled.get(inKey); - if(cached) + + if(inFilePath[dotIndex+2] == "s") { - return cached; + const first = inFilePath[dotIndex+1]; + return (first == "t" || first == "j"); } - } - let body = await fetch(inPath); - let text = await body.text(); - return Transpile(text, inKey); -}; - - -const LibPath = "lib"; -type ImportMap = {imports?:Record, importMap?:string}; -let ImportObject:ImportMap = {}; -try -{ - const confDeno = await fetch(`${Path.Active}/deno.json`); - const confDenoParsed:ImportMap = await confDeno.json(); - if(confDenoParsed.importMap) + + return false; + }; + const Transpile =async(inCode:string, inKey:string):Promise=> { - try + const transpile = await ESBuild.transform(inCode, inDevMode ? { loader: "tsx", sourcemap:"inline", minify: false, sourcefile:inKey} : + { loader: "tsx", + minify:true, + jsx:"automatic", + jsxImportSource:"https://esm.sh/preact@10.13.2"}); + + Transpiled.set(inKey, transpile.code); + return transpile.code; + }; + type Transpiler = (inPath:string, inKey:string, inCheck?:boolean)=>Promise; + const TranspileURL:Transpiler =async(inPath, inKey, inCheck)=> + { + if(inCheck) + { + const cached = Transpiled.get(inKey); + if(cached) + { + return cached; + } + } + let body = await fetch(inPath); + let text = await body.text(); + return Transpile(text, inKey); + }; + + const Sockets:Set = new Set(); + const SocketsBroadcast =(inData:string)=>{ for (const socket of Sockets){ socket.send(inData); } } + const SocketsHandler = inDevMode ? (_req:Request)=> + { + if(_req.headers.get("upgrade") == "websocket") { - const confImports = await Deno.readTextFile(confDenoParsed.importMap); try { - ImportObject = JSON.parse(confImports); + const { response, socket } = Deno.upgradeWebSocket(_req); + socket.onopen = () => Sockets.add(socket); + socket.onclose = () => Sockets.delete(socket); + socket.onmessage = (e) => {}; + socket.onerror = (e) => console.log("Socket errored:", e); + return response; } catch(e) { - console.log(`"importMap" "${confDenoParsed.importMap}" contains invalid JSON`); + // } } - catch(e) - { - console.log(`"importMap" "${confDenoParsed.importMap}" cannot be found`); - } + return false; } - else if(confDenoParsed.imports) + : + ()=>false; + + const watcher =async()=> { - ImportObject = {imports:confDenoParsed.imports}; - } - - if(ImportObject.imports) - { - const importReact = ImportObject.imports["react"]; - if(importReact) + const FilesChanged:Map = new Map(); + const ProcessFiles =debounce(async()=> { - ImportObject.imports["react-original"] = importReact; - ImportObject.imports["react"] = `/${LibPath}/react.tsx`; - } - else - { - console.log(`"imports" configuration does not alias "react"`); - } - - const importApp = ImportObject.imports["@eno/app"]; - if(importApp) - { - - } - else - { - console.log(`"imports" configuration does not alias an entry-point component with "@eno/app"`); - } - - const importIso = ImportObject.imports["@eno/iso"]; - if(importIso) - { - ImportObject.imports["@eno/iso"] = `/${LibPath}/iso.tsx`; - } - else - { - - } - Object.entries(ImportObject.imports).forEach(([key, value])=>{ - if(value.startsWith("./") && ImportObject.imports) + for await (const [path, action] of FilesChanged) { - ImportObject.imports[key] = value.substring(1); + const key = path.substring(Deno.cwd().length).replaceAll("\\", "/"); + if(action != "remove") + { + await TranspileURL(Path.Active+key, key, false); + SocketsBroadcast(key); + } + else + { + Transpiled.delete(key); + } } - }) - } - else - { - console.log(`No "imports" found in configuration`); - } -} -catch(e) -{ - console.log(`deno.json not found`); -} - - -Deno.serve({ port: Deno.args[0]||3000 }, async(_req:Request) => -{ - const url:URL = new URL(_req.url); - const pathParts = url.pathname.substring(1, url.pathname.endsWith("/") ? url.pathname.length-1 : url.pathname.length).split("/"); - const pathLast = pathParts.at(-1); - const pathExt:string|undefined = pathLast?.split(".")[1]; - - console.log(pathParts, pathLast, pathExt); - - console.log(`Request for "${url.pathname}"...`); - - if(_req.headers.get("upgrade") == "websocket") - { - try + FilesChanged.clear(); + }, 1000); + for await (const event of Deno.watchFs(Deno.cwd())) { - 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) - { - // + event.paths.forEach( path => + { + if(Transpileable(path)) + { + FilesChanged.set(path, event.kind); + } + }); + if(FilesChanged.size) + { + ProcessFiles(); + } } } + if(inDevMode) + { + watcher().then(()=>{console.log("done watching");}); + } + + return {TranspileURL, Transpileable, SocketsHandler}; + +} + +/** + * Extract all configuration info form a project's deno.jsonc file + * @param inDevMode When true, proxies react to an HMR-enabled version + * @param inLibPath + * @returns + */ +async function Configure(inDevMode:boolean, inLibPath:string) +{ + type ImportMap = {imports?:Record, importMap?:string}; + const output:{Imports?:ImportMap, App?:React.FunctionComponent, TwindInst?:Twind.Twind, Error?:string} = {}; + let ImportObject:ImportMap = {}; try { - // serve index by default - let type = `text/html`; - let body:BodyInit = ``; - - const isLib = url.pathname.startsWith(`/${LibPath}/`); - - if(Transpileable(url.pathname)) + const confDeno = await fetch(`${Path.Active}/deno.jsonc`); + const confText = await confDeno.text(); + const confDenoParsed = JSONC(confText) as ImportMap; + if(confDenoParsed.importMap) { - type = `application/javascript`; - if(isLib) + try { - body = await TranspileURL(Path.Hosted+url.pathname, url.pathname, true); + const confImports = await Deno.readTextFile(confDenoParsed.importMap); + try + { + output.Imports = JSON.parse(confImports); + } + catch(e) + { + output.Error = `"importMap" "${confDenoParsed.importMap}" contains invalid JSON`; + return output; + } } - else if(!url.searchParams.get("reload")) + catch(e) { - const imp = await import(Path.Active+url.pathname); - 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);`; - + output.Error = `"importMap" "${confDenoParsed.importMap}" cannot be found`; + return output; + } + } + else if(confDenoParsed.imports) + { + output.Imports = {imports:confDenoParsed.imports}; + } + + if(output.Imports?.imports) + { + if(inDevMode) + { + const importReact = output.Imports.imports["react"]; + if(importReact) + { + output.Imports.imports["react-original"] = importReact; + output.Imports.imports["react"] = `/${inLibPath}/react.tsx`; + } + else + { + output.Error = `"imports" configuration does not alias "react"`; + return output; + } + } + + const importIso = output.Imports.imports["@eno/iso"]; + if(importIso) + { + output.Imports.imports["@eno/iso"] = `/${inLibPath}/iso.tsx`; } else { - body = await TranspileURL(Path.Active+url.pathname, url.pathname, true); + output.Error = `"imports" configuration does not alias "@eno/iso"`; + return output; } - } - // serve static media - else if( pathExt ) - { - type = MIME.typeByExtension(pathExt) || "text/html"; - const _fetch = await fetch((isLib ? Path.Hosted : Path.Active)+url.pathname); - body = await _fetch.text(); + + const importApp = output.Imports.imports["@eno/app"]; + if(importApp) + { + let appImport + try + { + appImport = await import(Path.Active+importApp); + } + catch(e) + { + output.Error = `"@eno/app" entry-point (${importApp}) file not found`; + return output; + } + + if(typeof appImport.default == "function" ) + { + output.App = appImport.default; + } + else + { + output.Error = `"@eno/app" entry-point (${importApp}) needs to export a default function to use as the app root.`; + return output; + } + + let twindConfig = Iso.CSS; + if(typeof appImport.CSS == "object") + { + twindConfig = {...twindConfig, ...appImport.CSS}; + } + try + { + // @ts-ignore + output.TwindInst = Twind.install(twindConfig); + } + catch(e) + { + output.Error = `CSS configuration is malformed`; + return output; + } + } + else + { + output.Error = `"imports" configuration does not alias an entry-point file as "@eno/app"`; + return output; + } + + + Object.entries(output.Imports.imports).forEach(([key, value])=>{ + if(value.startsWith("./") && output.Imports?.imports) + { + output.Imports.imports[key] = value.substring(1); + } + }) } else { - Iso.Fetch.ServerBlocking = []; - Iso.Fetch.ServerTouched = new Set(); - Iso.Fetch.ServerRemove = new Set(); - let app = ; - await Prepass(app) - let bake = SSR(app); - while(Iso.Fetch.ServerBlocking.length) - { - await Promise.all(Iso.Fetch.ServerBlocking); - Iso.Fetch.ServerBlocking = []; - // at this point, anything that was requested that was not cached, has now been loaded and cached - // this next render will use cached resources. using a cached resource (if its "Seed" is true) adds it to the "touched" set. - app = ; - await Prepass(app) - bake = SSR(app); - } - - const seed:Iso.FetchRecord[] = []; - Iso.Fetch.ServerTouched.forEach((record)=>{ - const r:Iso.FetchRecord = {...record}; - delete r.Promise; - seed.push(r); - }); - Iso.Fetch.ServerTouched = false; - - const results = Twind.extract(bake, TwindInst); - - type = `text/html`; - body = -` - - - ${Iso.Meta.Meta.title} - - - - - - -
${results.html}
- - -`; + output.Error = `No "imports" found in configuration`; + return output; } - - return new Response(body, {headers:{"content-type":type as string, "Access-Control-Allow-Origin":"*", charset:"utf-8"}}); } - catch(error) + catch(e) { - console.log(error); - return new Response(error, {status:404}); + output.Error = `error during configuration: ${e}`; + return output; + } + return output; +} + +const Flags:Record = {}; +Deno.args.forEach(arg=> +{ + if(arg.startsWith("--")) + { + const kvp = arg.substring(2).split("="); + Flags[kvp[0]] = kvp[1] ? kvp[1] : true; } }); -import App, {CSS} from "@eno/app"; -const TwindInst = Twind.install(CSS); +let DevMode = Flags.dev ? true : false; +let hosted = import.meta.resolve("./"); +const Path = { + Hosted: hosted.substring(0, hosted.length-1), + Active: `file://${Deno.cwd().replaceAll("\\", "/")}`, + LibDir: "lib" +}; +console.log(Path); +console.log(`Dev Mode: ${DevMode}`); +console.log(`Args seen: `, Flags); -const Sockets:Set = new Set(); -const SocketsBroadcast =(inData:string)=>{ for (const socket of Sockets){ socket.send(inData); } } - -const FilesChanged:Map = new Map(); -const ProcessFiles =debounce(async()=> +const {Transpileable, TranspileURL, SocketsHandler} = Transpiler(DevMode); +const {Imports, App, TwindInst, Error} = await Configure(DevMode, Path.LibDir); +if(Error) { - console.log("Processing Files...", FilesChanged); - for await (const [path, action] of FilesChanged) - { - const key = path.substring(Deno.cwd().length).replaceAll("\\", "/"); - console.log(key, action); - - if(action != "remove") - { - await TranspileURL(Path.Active+key, key, false); - console.log(` ...cached "${key}"`); - SocketsBroadcast(key); - } - else - { - Transpiled.delete(key); - } - } - FilesChanged.clear(); -}, 1000); -for await (const event of Deno.watchFs(Deno.cwd())) + console.log(Error); +} +else if(App && TwindInst) { - event.paths.forEach( path => + Deno.serve({ port: Flags?.port||3000 }, async(_req:Request) => { - if(Transpileable(path)) + const url:URL = new URL(_req.url); + const pathParts = url.pathname.substring(1, url.pathname.endsWith("/") ? url.pathname.length-1 : url.pathname.length).split("/"); + const pathLast = pathParts.at(-1); + const pathExt:string|undefined = pathLast?.split(".")[1]; + + const resp = SocketsHandler(_req); + if(resp){ return resp; } + + try { - FilesChanged.set(path, event.kind); + // serve index by default + let type = `text/html`; + let body:BodyInit = ``; + + const isLib = url.pathname.startsWith(`/${Path.LibDir}/`); + + if(Transpileable(url.pathname)) + { + type = `application/javascript`; + if(isLib) + { + body = await TranspileURL(Path.Hosted+url.pathname, url.pathname, true); + } + else if(DevMode && !url.searchParams.get("reload")) + { + const imp = await import(Path.Active+url.pathname); + const members = []; + for( const key in imp ) { members.push(key); } + body = + ` + import {FileListen} from "/${Path.LibDir}/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 + { + body = await TranspileURL(Path.Active+url.pathname, url.pathname, true); + } + } + // serve static media + else if( pathExt ) + { + type = MIME.typeByExtension(pathExt) || "text/html"; + const _fetch = await fetch((Path.Active)+url.pathname); + body = await _fetch.text(); + } + else + { + Iso.Fetch.ServerBlocking = []; + Iso.Fetch.ServerTouched = new Set(); + Iso.Fetch.ServerRemove = new Set(); + let app = ; + await Prepass(app) + let bake = SSR(app); + while(Iso.Fetch.ServerBlocking.length) + { + await Promise.all(Iso.Fetch.ServerBlocking); + Iso.Fetch.ServerBlocking = []; + // at this point, anything that was requested that was not cached, has now been loaded and cached + // this next render will use cached resources. using a cached resource (if its "Seed" is true) adds it to the "touched" set. + app = ; + await Prepass(app) + bake = SSR(app); + } + + const seed:Iso.FetchRecord[] = []; + Iso.Fetch.ServerTouched.forEach((record)=>{ + const r:Iso.FetchRecord = {...record}; + delete r.Promise; + seed.push(r); + }); + Iso.Fetch.ServerTouched = false; + + const results = Twind.extract(bake, TwindInst); + + type = `text/html`; + body = + ` + + + ${Iso.Meta.Meta.title} + + + + + + +
${results.html}
+ + + `; + } + + return new Response(body, {headers:{"content-type":type as string, "Access-Control-Allow-Origin":"*", charset:"utf-8"}}); + } + catch(error) + { + console.log(error); + return new Response(error, {status:404}); } }); - if(FilesChanged.size) - { - ProcessFiles(); - } } \ No newline at end of file