@regojs/erp-sdk 1.1.4 → 1.1.5

package/package.json

@@ -44,7 +44,7 @@
         "test": "bun --hot run __test/index.ts"
     },
     "types": "./dist/index.d.ts",
-    "version": "1.1.4",
+    "version": "1.1.5",
     "exports": {
         ".": {
             "import": "./dist/index.js",

package/src/browser/vanilla/providers/regoProvider.ts

@@ -1,4 +1,4 @@
-import type { IRegoProvider } from "../types";
+import type { IRegoProvider, TMedataKeys } from "../types";
 
 import { Enums } from "../constants";
 import {
@@ -14,8 +14,10 @@ export class RegoProvider implements IRegoProvider {
     #staticDatas: Map<string, IRegoProvider["staticData"]> = new Map();
     #datas: Map<string, IRegoProvider["data"]> = new Map();
     #metadatas: Map<string, IRegoProvider["metadata"]> = new Map();
+    #metadataElements: Map<TMedataKeys, Element> = new Map();
 
     constructor(private readonly window: Window) {
+        this.#findMetadataElements();
         this.#parseRoutes();
         this.#parseMetadata();
         this.#parseStaticData();
@@ -129,6 +131,148 @@ export class RegoProvider implements IRegoProvider {
         }
     }
 
+    #findMetadataElements() {
+        const titleElement = this.window.document.head.querySelector("title"),
+            descriptionElement = this.window.document.head.querySelector(
+                'meta[name="description"]'
+            ),
+            keywordsElement = this.window.document.head.querySelector(
+                'meta[name="keywords"]'
+            ),
+            canonicalElement = this.window.document.head.querySelector(
+                'link[rel="canonical"]'
+            ),
+            ogTypeElement = this.window.document.head.querySelector(
+                'meta[property="og:type"]'
+            ),
+            ogTitleElement = this.window.document.head.querySelector(
+                'meta[property="og:title"]'
+            ),
+            ogDescriptionElement = this.window.document.head.querySelector(
+                'meta[property="og:description"]'
+            ),
+            ogImageElement = this.window.document.head.querySelector(
+                'meta[property="og:image"]'
+            ),
+            ogUrlElement = this.window.document.head.querySelector(
+                'meta[property="og:url"]'
+            );
+
+        if (titleElement) this.#metadataElements.set("title", titleElement);
+        if (descriptionElement)
+            this.#metadataElements.set("description", descriptionElement);
+        if (keywordsElement)
+            this.#metadataElements.set("keywords", keywordsElement);
+        if (canonicalElement)
+            this.#metadataElements.set("canonical", canonicalElement);
+        if (ogTypeElement) this.#metadataElements.set("ogType", ogTypeElement);
+        if (ogTitleElement)
+            this.#metadataElements.set("ogTitle", ogTitleElement);
+        if (ogDescriptionElement)
+            this.#metadataElements.set("ogDescription", ogDescriptionElement);
+        if (ogImageElement)
+            this.#metadataElements.set("ogImage", ogImageElement);
+        if (ogUrlElement) this.#metadataElements.set("ogUrl", ogUrlElement);
+    }
+
+    setMetadataToElement(
+        ...[key, value]: Parameters<IRegoProvider["setMetadataToElement"]>
+    ) {
+        switch (key) {
+            case "title": {
+                const titleElement = this.#metadataElements.get(key);
+
+                (titleElement &&
+                    "innerText" in titleElement &&
+                    (titleElement.innerText = value?.trim())) ||
+                    "";
+                return;
+            }
+
+            case "description": {
+                this.#metadataElements
+                    .get(key)
+                    ?.setAttribute("content", value?.trim() || "");
+                return;
+            }
+
+            case "keywords": {
+                this.#metadataElements
+                    .get(key)
+                    ?.setAttribute("content", value?.trim() || "");
+                return;
+            }
+
+            case "canonical": {
+                this.#metadataElements
+                    .get(key)
+                    ?.setAttribute("href", value?.trim() || "");
+                return;
+            }
+
+            case "ogType": {
+                this.#metadataElements
+                    .get(key)
+                    ?.setAttribute("content", value?.trim() || "");
+                return;
+            }
+
+            case "ogDescription": {
+                this.#metadataElements
+                    .get(key)
+                    ?.setAttribute("content", value?.trim() || "");
+                return;
+            }
+
+            case "ogImage": {
+                this.#metadataElements
+                    .get(key)
+                    ?.setAttribute("content", value?.trim() || "");
+                return;
+            }
+
+            case "ogUrl": {
+                this.#metadataElements
+                    .get(key)
+                    ?.setAttribute("content", value?.trim() || "");
+                return;
+            }
+        }
+    }
+
+    inferMetadata(payload: Parameters<IRegoProvider["inferMetadata"]>[number]) {
+        for (const [key, value] of Object.entries(payload)) {
+            switch (key) {
+                case "title": {
+                    this.setMetadataToElement("title", value);
+                    this.setMetadataToElement("ogTitle", value);
+                    break;
+                }
+                case "description": {
+                    this.setMetadataToElement("description", value);
+                    this.setMetadataToElement("ogDescription", value);
+                    break;
+                }
+                case "image": {
+                    this.setMetadataToElement("ogImage", value);
+                    break;
+                }
+                case "canonical": {
+                    this.setMetadataToElement("canonical", value);
+                    break;
+                }
+                case "url": {
+                    this.setMetadataToElement("ogUrl", value);
+                    break;
+                }
+                case "type": {
+                    this.setMetadataToElement("ogType", value);
+                    break;
+                }
+            }
+        }
+    }
+
     async fetchRoute({
         cache,
         ...payload
@@ -146,6 +290,10 @@ export class RegoProvider implements IRegoProvider {
                 staticData = this.#staticDatas.get(uri);
 
             if (data && metadata && staticData) {
+                if (metadata) {
+                    this.inferMetadata(metadata);
+                }
+
                 return Object.freeze({
                     data,
                     metadata,
@@ -180,6 +328,10 @@ export class RegoProvider implements IRegoProvider {
             this.#metadatas.set(uri, validation.data.metadata);
             this.#staticDatas.set(uri, validation.data.staticData);
 
+            if (validation.data.metadata) {
+                this.inferMetadata(validation.data.metadata);
+            }
+
             return Object.freeze(validation.data);
         } catch (error) {
             console.error("Error on fetch full route data:", error);

package/src/browser/vanilla/types/regoProvider.ts

@@ -6,6 +6,17 @@ import type {
     TStaticData
 } from "../validators";
 
+export type TMedataKeys =
+    | "title"
+    | "description"
+    | "keywords"
+    | "canonical"
+    | "ogType"
+    | "ogTitle"
+    | "ogDescription"
+    | "ogImage"
+    | "ogUrl";
+
 export interface IRegoProvider {
     routes: Array<TRoute> | undefined;
     staticData: TStaticData;
@@ -25,4 +36,9 @@ export interface IRegoProvider {
                   cache?: boolean;
               }
     ): Promise<Readonly<TFullData> | undefined>;
+    setMetadataToElement(
+        key: TMedataKeys,
+        value: string | null | undefined
+    ): void;
+    inferMetadata(payload: Record<string, string | null | undefined>): void;
 }