implementado typescript 7

dist-front/tipagemRotas.js

@@ -0,0 +1,104 @@
+/** Gerar  uma  classe que  facilita a gestão de  rotas com  a tipagem das  querys
+ *
+ * Definições:
+ *
+ * caminho = "/aplicacao/funcionalidade"
+ *
+ * endereco = "http://localhost:3000/aplicacao/funcionalidade"
+ *
+ * parametros = {nome:"José"}
+ */
+export class TipagemRotas {
+    /** Ao criar novo obijeto de tipagem de rota é necessário passar o caminho parcial
+     ** export const mCaminho = new TipagemRotas<{q:string}>("aplicacao","funcionalidade")
+     */
+    constructor({ caminho, acaoIr, rotulo, }) {
+        this._partesCaminho = [];
+        this._acaoIr = acaoIr;
+        this._partesCaminho = (Array.isArray(caminho) ? caminho : [caminho])
+            .filter(Boolean)
+            .map((a) => String(a))
+            .flatMap((a) => a.split("/"))
+            .filter(Boolean);
+        this.rotulo = rotulo;
+    }
+    /** Retorna o caminho completo da rota
+     ** console.log(mCaminho.caminho)
+     ** "/caminho"
+     */
+    get caminho() {
+        const ret = `/${this._partesCaminho.join("/")}`;
+        return ret;
+    }
+    /** Define o caminho completo da rota
+     ** mCaminho.caminho = "/novoCaminho"
+     ** console.log(mCaminho.caminho)
+     ** "/novoCaminho"
+     ** */
+    set caminho(caminhoParcial) {
+        this._partesCaminho = caminhoParcial.split("/").filter((parte) => parte);
+    }
+    /** Retorna o caminho completo da rota com a query
+     ** console.log(mCaminho.resolve({q:"query"}))
+     ** "http://localhost:3000/caminho?q=query"
+     */
+    endereco(query, usarComoHash) {
+        const win = (typeof globalThis !== "undefined" && globalThis.window) || undefined;
+        const url = new URL(win ? win.location.href : "http://localhost");
+        url.pathname = this.caminho;
+        url.search = "";
+        const queryKeys = Object.entries(query);
+        for (const [key, value] of queryKeys) {
+            url.searchParams.set(String(key), JSON.stringify(value));
+        }
+        url.hash = "";
+        if (usarComoHash) {
+            url.hash = `#${url.search}`;
+            url.search = "";
+        }
+        return url.href;
+    }
+    /** Vai para a url
+     ** mCaminho.ir({q:"query"})
+     ** window.location.href = "http://localhost:3000/caminho?q=query"
+     */
+    ir(query) {
+        if (this._acaoIr) {
+            this._acaoIr(this.endereco({ ...query }));
+        }
+        else {
+            const win = (typeof globalThis !== "undefined" && globalThis.window) || undefined;
+            if (win) {
+                win.location.href = this.endereco({ ...query });
+            }
+        }
+    }
+    /** Retorna os parametros da url
+     ** console.log(mCaminho.parametros())
+     ** {q:"query"}
+     */
+    parametros(urlEntrada) {
+        const url = urlEntrada
+            ? new URL(urlEntrada)
+            : new URL(typeof globalThis !== "undefined" && globalThis.window
+                ? globalThis.window.location.href
+                : "http://localhost");
+        const query = url.searchParams;
+        let queryObj = Object.fromEntries(query.entries());
+        // pegar hash
+        const hash = url.hash;
+        if (hash) {
+            const hashObj = Object.fromEntries(new URLSearchParams(hash.slice(1)).entries());
+            queryObj = { ...queryObj, ...hashObj };
+        }
+        for (const chave in queryObj) {
+            try {
+                queryObj[chave] = JSON.parse(queryObj[chave]);
+            }
+            catch {
+                console.log(`[${chave}|${queryObj[chave]}] não é um json válido.`);
+            }
+        }
+        return queryObj;
+    }
+}