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;
+}