Merge pull request '#12 issue/iso-components' (#13) from issue/iso-components into master

Reviewed-on: #13

deno.json

@@ -12,8 +12,7 @@
     "tasks":
     {
         "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",
-        "complete": "deno task host & cd example && pwd && deno task dev"
+        "example": "cd example && pwd && deno task dev"
     }
 }

example/app.tsx

@@ -9,6 +9,7 @@ export default ()=>
     console.log(Iso.Meta);
     const [countGet, countSet] = React.useState(1);   
     return <div class="p-4 font-sans">
+        <Iso.Metas title="Main Page!"/>
         <h1 class="my-2 font(bold serif) text(2xl)">Title!!</h1>
         <h2>subtitle</h2>
         <Component/>

example/deep/component.tsx

@@ -1,9 +1,11 @@
 import React from "react";
+import * as Iso from "@eno/iso";
 
 export default ()=>
 {
     const [countGet, countSet] = React.useState(1);   
     return <div class="p-4 text-red-500">
+        <Iso.Metas title="Component!"/>
         Component!!!
     </div>;
 };

example/deno.json

@@ -1,4 +1,5 @@
 {
+    "compilerOptions": {"lib": ["deno.window", "dom"]},
     "imports":
     {
         "react": "https://esm.sh/preact@10.13.2/compat",

lib/iso.tsx

@@ -1,10 +1,34 @@
 import React from "react";
 
-type Metas = {
-    Title?:string,
-    Description?:string
+
+type Meta = {title:string, description:string, keywords:string, image:string, canonical:string }
+type MetaKeys = keyof Meta;
+export const Meta:Meta = {
+    title:"",
+    description:"",
+    keywords:"",
+    image:"",
+    canonical:""
 };
 
-export const Meta:Metas = {
-    Title:"hey"
-};
+type MetasInputs = { [Property in MetaKeys]?: string };
+export const Metas =(props:{concatListed?:boolean; dropUnlisted?:boolean}&MetasInputs):null=>
+{
+    const    additive = props.concatListed ? (key:MetaKeys, value:string)=> Meta[key] += value : (key:MetaKeys, value:string)=> Meta[key] = value;
+    const subtractive = props.dropUnlisted ? (key:MetaKeys)=> Meta[key] = "" : (key:MetaKeys)=> {};
+
+    Object.keys(Meta).forEach((key)=>{
+        const metaKey = key as MetaKeys;
+        const propValue = props[metaKey]||"";
+        propValue ? additive(metaKey, propValue) : subtractive(metaKey);
+    })
+
+    console.log(`rendering metas`, Meta)
+
+    if(window.innerWidth)
+    {
+        document.title = Meta.title;
+    }
+
+    return null;
+}

server.tsx

@@ -4,6 +4,7 @@ import { debounce } from "https://deno.land/std@0.151.0/async/debounce.ts";
 import SSR from "https://esm.sh/v113/preact-render-to-string@6.0.2";
 import * as Twind from "https://esm.sh/@twind/core@1.1.3";
 import React, {JSX, createElement as h} from "react";
+import * as Iso from "@eno/iso";
 
 const Transpiled = new Map();
 const Transpileable =(inFilePath:string):boolean=>
@@ -99,7 +100,7 @@ try
         if(importReact)
         {
             ImportObject.imports["react-original"] = importReact;
-            ImportObject.imports["react"] = `./${LibPath}/react.tsx`;
+            ImportObject.imports["react"] = `/${LibPath}/react.tsx`;
         }
         else
         {
@@ -119,18 +120,23 @@ try
         const importIso = ImportObject.imports["@eno/iso"];
         if(importIso)
         {
-            ImportObject.imports["@eno/iso"] = `./${LibPath}/iso.tsx`;
+            ImportObject.imports["@eno/iso"] = `/${LibPath}/iso.tsx`;
         }
         else
         {
 
         }
+        Object.entries(ImportObject.imports).forEach(([key, value])=>{
+            if(value.startsWith("./") && ImportObject.imports)
+            {
+                ImportObject.imports[key] = value.substring(1);
+            }
+        })
     }
     else
     {
         console.log(`No "imports" found in configuration`);
     }
-
 }
 catch(e)
 {
@@ -142,6 +148,11 @@ Deno.serve({ port: Deno.args[0]||3000 }, async(_req:Request) =>
 {
     const url:URL = new URL(_req.url);
     const fsPath = Deno.cwd()+url.pathname;
+    const pathParts = url.pathname.substring(1, url.pathname.endsWith("/") ? url.pathname.length-1 : url.pathname.length).split("/");
+    const pathLast = pathParts[pathParts.length-1];
+    const pathExt:string|undefined = pathLast.split(".")[1];
+
+    console.log(pathParts, pathLast, pathExt);
 
     console.log(`Request for "${url.pathname}"...`);
 
@@ -176,10 +187,9 @@ Deno.serve({ port: Deno.args[0]||3000 }, async(_req:Request) =>
         let type = `text/html`;
         let body:BodyInit = ``;
 
-        const isLib = url.pathname.startsWith(`/${LibPath}/`)
+        const isLib = url.pathname.startsWith(`/${LibPath}/`);
 
-        // serve .tsx .jsx .ts .js
-        if(Transpileable(url.pathname))
+        if(Transpileable(pathLast))
         {
             type = `application/javascript`;
             if(isLib)
@@ -189,8 +199,6 @@ Deno.serve({ port: Deno.args[0]||3000 }, async(_req:Request) =>
             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); }
@@ -214,9 +222,9 @@ FileListen("${url.pathname}", reloadHandler);`;
             }
         }
         // serve static media
-        else if( url.pathname.endsWith("/") === false)
+        else if( pathExt )
         {
-            type = MIME.typeByExtension(url.pathname.substring(url.pathname.lastIndexOf("."))) || "text/html";
+            type = MIME.typeByExtension(pathExt) || "text/html";
             if(isLib)
             {
                 const _fetch = await fetch(import.meta.resolve(`.${url.pathname}`));
@@ -233,9 +241,11 @@ FileListen("${url.pathname}", reloadHandler);`;
 
             type = `text/html`;
             body = `<!doctype html>
-<html>
+<html lang="en">
     <head>
+        <title>${Iso.Meta.title}</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta charset="utf-8"/>
         <style data-twind>${results.css}</style>
         <script type="importmap">${JSON.stringify(ImportObject)}</script>
         <script async src="https://ga.jspm.io/npm:es-module-shims@1.5.1/dist/es-module-shims.js" crossorigin="anonymous"></script>
@@ -253,7 +263,7 @@ FileListen("${url.pathname}", reloadHandler);`;
 </html>`;
         }
 
-        return new Response(body, {headers:{"content-type":type as string, "Access-Control-Allow-Origin":"*"}});
+        return new Response(body, {headers:{"content-type":type as string, "Access-Control-Allow-Origin":"*", charset:"utf-8"}});
     }
     catch(error)
     {