@devwareng/vanilla-ts 1.0.4 → 1.0.5

package/dist/index.d.cts

@@ -1,2 +1,116 @@
+import { Config } from 'dompurify';
 
-export {  }
+// --- Core Types ---
+
+type TSCollection = (
+    collections: string[],
+    DOM: HTMLElement,
+    elements: Function[],
+    params?: any
+) => void;
+
+type TSInitialDOM = (
+    id: string,
+    mount: (el: HTMLElement) => void
+) => void;
+
+type TSVerify = (
+    DOM: HTMLElement | void,
+    authUrl: string,
+    loginUrl: string
+) => string | null;
+
+type TSAuth = (
+    Component: HTMLElement | void,
+    loginUrl: string
+) => HTMLElement | null;
+
+type FetchFunction<T> = () => Promise<T>;
+
+type FetchResult<T> = {
+    data: T | null;
+    isLoading: boolean;
+    error: Error | null;
+};
+
+type SanitizeInput = (input: string) => string;
+
+type AnchorSingle = (
+    element: HTMLElement,
+    href: string,
+    ariaLabel: string,
+    className?: string,
+    childElement?: HTMLElement | null
+) => void;
+
+type TSURLState = () => Record<string, string>;
+
+type TSComponent = (
+    id: string,
+    DOM: HTMLElement,
+    element: Function,
+    params?: any,
+    params2?: any
+) => void;
+
+type TSEvent = <
+    K extends keyof HTMLElementEventMap = keyof HTMLElementEventMap
+>(
+    id: string,
+    eventType: K,
+    handler: (event: HTMLElementEventMap[K]) => void
+) => void;
+
+type TSSelect = <T extends Element = HTMLElement>(
+    selector: string
+) => T | null;
+
+type TSPurifier = (
+    input: string | HTMLElement,
+    config?: Config
+) => string;
+
+// --- SEO & CSP ---
+
+type SEOConfig = {
+    name?: string;
+    description?: string;
+    author?: string;
+};
+
+type SEOHandler = {
+    setName: (name: string) => void;
+    setDescription: (description: string) => void;
+    setAuthor: (author: string) => void;
+    getName: () => string;
+    getDescription: () => string;
+    getAuthor: () => string;
+    getAllMetaData: () => SEOConfig;
+    appendMetaTagsToHead: () => void;
+};
+
+type CSPConfig = {
+    scriptSrc?: string;
+    styleSrc?: string;
+    objectSrc?: string;
+    connectSrc?: string[];
+    reportOnly?: boolean;
+};
+
+// --- Input & Events ---
+
+type InputElementType = "input" | "select" | "textarea" | "form";
+
+type TSInput = (
+    id: string,
+    elementType: InputElementType,
+    form?: HTMLFormElement
+) => string;
+
+type TSElementEach = (
+    elements: NodeListOf<HTMLElement> | HTMLElement[],
+    events: (keyof HTMLElementEventMap)[],
+    callback: (element: HTMLElement, event: Event) => void
+) => void;
+
+export type { AnchorSingle, CSPConfig, FetchFunction, FetchResult, InputElementType, SEOConfig, SEOHandler, SanitizeInput, TSAuth, TSCollection, TSComponent, TSElementEach, TSEvent, TSInitialDOM, TSInput, TSPurifier, TSSelect, TSURLState, TSVerify };

package/dist/index.d.ts

@@ -1,74 +1,116 @@
-import { Config } from "dompurify";
+import { Config } from 'dompurify';
 
-type TSCollection = (collections: string[], DOM: HTMLElement, elements: Function[], params?: any) => void;
-type TSInitialDOM = (id: string, mount: (el: HTMLElement) => void) => void;
-type TSVerify = (DOM: HTMLElement | void, authUrl: string, loginUrl: string) => string | null;
-type TSAuth = (Component: HTMLElement | void, loginUrl: string) => HTMLElement | null;
-type FetchFunction<T> = () => Promise<T>;
-type FetchResult<T> = {
-    data: T | null;
-    isLoading: boolean;
-    error: Error | null;
-}
-type SanitizeInput = (input: string) => string;
-type AnchorSingle = (
-    element: HTMLElement,
-    href: string,
-    ariaLabel: string,
-    className?: string,
-    childElement?: HTMLElement | null
+// --- Core Types ---
+
+type TSCollection = (
+    collections: string[],
+    DOM: HTMLElement,
+    elements: Function[],
+    params?: any
+) => void;
+
+type TSInitialDOM = (
+    id: string,
+    mount: (el: HTMLElement) => void
+) => void;
+
+type TSVerify = (
+    DOM: HTMLElement | void,
+    authUrl: string,
+    loginUrl: string
+) => string | null;
+
+type TSAuth = (
+    Component: HTMLElement | void,
+    loginUrl: string
+) => HTMLElement | null;
+
+type FetchFunction<T> = () => Promise<T>;
+
+type FetchResult<T> = {
+    data: T | null;
+    isLoading: boolean;
+    error: Error | null;
+};
+
+type SanitizeInput = (input: string) => string;
+
+type AnchorSingle = (
+    element: HTMLElement,
+    href: string,
+    ariaLabel: string,
+    className?: string,
+    childElement?: HTMLElement | null
+) => void;
+
+type TSURLState = () => Record<string, string>;
+
+type TSComponent = (
+    id: string,
+    DOM: HTMLElement,
+    element: Function,
+    params?: any,
+    params2?: any
+) => void;
+
+type TSEvent = <
+    K extends keyof HTMLElementEventMap = keyof HTMLElementEventMap
+>(
+    id: string,
+    eventType: K,
+    handler: (event: HTMLElementEventMap[K]) => void
+) => void;
+
+type TSSelect = <T extends Element = HTMLElement>(
+    selector: string
+) => T | null;
+
+type TSPurifier = (
+    input: string | HTMLElement,
+    config?: Config
+) => string;
+
+// --- SEO & CSP ---
+
+type SEOConfig = {
+    name?: string;
+    description?: string;
+    author?: string;
+};
+
+type SEOHandler = {
+    setName: (name: string) => void;
+    setDescription: (description: string) => void;
+    setAuthor: (author: string) => void;
+    getName: () => string;
+    getDescription: () => string;
+    getAuthor: () => string;
+    getAllMetaData: () => SEOConfig;
+    appendMetaTagsToHead: () => void;
+};
+
+type CSPConfig = {
+    scriptSrc?: string;
+    styleSrc?: string;
+    objectSrc?: string;
+    connectSrc?: string[];
+    reportOnly?: boolean;
+};
+
+// --- Input & Events ---
+
+type InputElementType = "input" | "select" | "textarea" | "form";
+
+type TSInput = (
+    id: string,
+    elementType: InputElementType,
+    form?: HTMLFormElement
+) => string;
+
+type TSElementEach = (
+    elements: NodeListOf<HTMLElement> | HTMLElement[],
+    events: (keyof HTMLElementEventMap)[],
+    callback: (element: HTMLElement, event: Event) => void
 ) => void;
 
-type TSURLState = () => Record<string, string>;
-
-type TSComponent = (
-    id: string,
-    DOM: HTMLElement,
-    element: Function,
-    params?: any,
-    params2?: any
-) => void;
-
-type TSEvent = (
-    id: string,
-    eventType: keyof HTMLElementEventMap,
-    handler: (event: HTMLElementEventMap[keyof HTMLElementEventMap]) => void
-) => void;
-
-type TSSelect = <T extends Element = HTMLElement>(selector: string) => T | null;
-type TSPurifier = (input: string | HTMLElement, config?: Config) => string;
-
-type SEOConfig = {
-    name?: string;
-    description?: string;
-    author?: string;
-}
-
-type CSPConfig = {
-    scriptSrc?: string;
-    styleSrc?: string;
-    objectSrc?: string;
-    connectSrc?: string[];
-    reportOnly?: boolean;
-}
-
-type SEOHandler = {
-    setName: (name: string) => void;
-    setDescription: (description: string) => void;
-    setAuthor: (author: string) => void;
-    getName: () => string;
-    getDescription: () => string;
-    getAuthor: () => string;
-    getAllMetaData: () => SEOConfig;
-    appendMetaTagsToHead: () => void;
-}
-
-type InputElementType = "input" | "select" | "textarea" | "form";
-
-type TSInput = (id: string, elementType: InputElementType, form?: HTMLFormElement) => string;
-
-type TSElementEach = (
-    elements: NodeListOf<HTMLElement> | HTMLElement[],
-    events: (keyof HTMLElementEventMap)[],
-    callback: (element: HTMLElement, event: Event) => void
-) => void;
+export type { AnchorSingle, CSPConfig, FetchFunction, FetchResult, InputElementType, SEOConfig, SEOHandler, SanitizeInput, TSAuth, TSCollection, TSComponent, TSElementEach, TSEvent, TSInitialDOM, TSInput, TSPurifier, TSSelect, TSURLState, TSVerify };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devwareng/vanilla-ts",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Framework-less TypeScript hooks for SPA development.",
   "author": "Waren Arapoc Gador",
   "license": "MIT",
@@ -42,4 +42,4 @@
     "@types/lodash": "^4.17.20",
     "tsup": "^8.5.0"
   }
-}
+}

package/dist/index.d.mts

@@ -1,2 +0,0 @@
-
-export {  }

package/dist/index.mjs

@@ -1,458 +0,0 @@
-// src/define/html.ts
-function html(strings, ...values) {
-  return strings.reduce((result, str, i) => {
-    return result + str + (values[i] || "");
-  }, "");
-}
-
-// src/hooks/useTSPurifier.ts
-import DOMPurify from "dompurify";
-var useTSPurifier = (input, config) => {
-  const defaultConfig = {
-    ADD_TAGS: ["my-custom-tag"]
-  };
-  const mergedConfig = { ...defaultConfig, ...config };
-  if (typeof input === "string") {
-    return DOMPurify.sanitize(input, mergedConfig);
-  } else {
-    return DOMPurify.sanitize(input.innerHTML, mergedConfig);
-  }
-};
-
-// src/hooks/useTSEvent.ts
-var useTSEvent = (id, eventType, handler) => {
-  const element = document.querySelector(`#${id}`);
-  if (element) {
-    element.addEventListener(
-      eventType,
-      handler
-    );
-  } else {
-    console.warn(`Element with id '${id}' not found.`);
-  }
-};
-
-// src/hooks/useTSParams.ts
-import { createStore } from "zustand/vanilla";
-import DOMPurify2 from "dompurify";
-function extractPatternParams(pattern, path) {
-  const paramNames = [];
-  const regexPattern = pattern.replace(/:[^/]+/g, (match2) => {
-    paramNames.push(match2.slice(1));
-    return "([^/]+)";
-  });
-  const regex = new RegExp(`^${regexPattern}$`);
-  const match = path.match(regex);
-  const result = {};
-  if (match) {
-    paramNames.forEach((name, i) => {
-      result[name] = DOMPurify2.sanitize(match[i + 1] ?? "");
-    });
-  }
-  return result;
-}
-function extractQueryParams(search) {
-  const result = {};
-  const urlSearchParams = new URLSearchParams(search);
-  for (const [key, value] of urlSearchParams.entries()) {
-    result[key] = DOMPurify2.sanitize(value);
-  }
-  return result;
-}
-var useTSParams = createStore((set, get) => ({
-  params: {},
-  query: {},
-  setFromPattern: (pattern) => {
-    const path = window.location.pathname;
-    const params = extractPatternParams(pattern, path);
-    const query = extractQueryParams(window.location.search);
-    set({ params, query });
-  },
-  getParam: (key) => get().params[key],
-  getQuery: (key) => get().query[key]
-}));
-
-// src/hooks/useTSExtract.ts
-function useTSExtractParams(pattern) {
-  const store = useTSParams.getState();
-  store.setFromPattern(pattern);
-  const params = store.params;
-  const query = store.query;
-  return { ...params, ...query };
-}
-
-// src/hooks/useTSAllElements.ts
-var useTSEventAll = (selector, eventType, handler) => {
-  const elements = document.querySelectorAll(selector);
-  elements.forEach((element) => {
-    element.addEventListener(eventType, handler);
-  });
-  return () => {
-    elements.forEach((element) => {
-      element.removeEventListener(eventType, handler);
-    });
-  };
-};
-
-// src/hooks/useTSElements.ts
-import DOMPurify3 from "dompurify";
-var useTSElements = (htmlElement, element, config) => {
-  const defaultConfig = {
-    ALLOWED_TAGS: ["main", "div", "h1", "p", "button", "span", "a", "img", "input"],
-    ALLOWED_ATTR: ["class", "id", "href", "style", "src", "alt"],
-    ...config
-    // allow user overrides
-  };
-  const sanitizedContent = DOMPurify3.sanitize(
-    /*html*/
-    element,
-    defaultConfig
-  );
-  if (htmlElement.innerHTML !== String(sanitizedContent)) {
-    return htmlElement.innerHTML = String(sanitizedContent);
-  }
-};
-
-// src/hooks/useIntialDOM.ts
-import DOMPurify4 from "dompurify";
-var previousHTML = null;
-var useInitialDOM = (id, mount) => {
-  if (typeof document === "undefined") return;
-  const targetElement = document.getElementById(id);
-  if (!targetElement) return;
-  const currentHTML = targetElement.innerHTML;
-  const sanitizedHTML = DOMPurify4.sanitize(currentHTML);
-  if (previousHTML !== null && sanitizedHTML !== previousHTML) {
-    const fallbackEl = document.createElement("div");
-    mount(fallbackEl);
-    targetElement.innerHTML = previousHTML;
-  } else {
-    previousHTML = sanitizedHTML;
-    mount(targetElement);
-  }
-};
-
-// src/hooks/useTSAnchorSingle.ts
-var sanitizeInput = (input) => {
-  const element = document.createElement("div");
-  element.innerText = input;
-  return element.innerHTML;
-};
-var useAnchorSingle = (element, href, ariaLabel, className = "", childElement = null) => {
-  if (!element) return;
-  const sanitizedHref = sanitizeInput(href);
-  const sanitizedAriaLabel = sanitizeInput(ariaLabel);
-  const sanitizedClassName = className ? sanitizeInput(className) : void 0;
-  element.setAttribute("href", sanitizedHref);
-  element.setAttribute("aria-label", sanitizedAriaLabel);
-  if (sanitizedClassName) {
-    element.className = sanitizedClassName;
-  }
-  if (childElement) {
-    element.innerHTML = "";
-    element.appendChild(childElement);
-  }
-  element.addEventListener("click", (e) => {
-    e.preventDefault();
-    const target = e.currentTarget;
-    const href2 = target.getAttribute("href");
-    if (href2) {
-      const scrollPosition = window.scrollY;
-      window.scrollTo(0, 0);
-      window.history.pushState({ scrollPosition }, "", href2);
-      const navEvent = new PopStateEvent("popstate");
-      dispatchEvent(navEvent);
-    }
-  });
-  window.addEventListener("popstate", (e) => {
-    const state = e.state;
-    if (state && state.scrollPosition !== void 0) {
-      window.scrollTo(0, state.scrollPosition);
-    }
-  });
-};
-
-// src/hooks/useTSAnchor.ts
-import debounce from "lodash";
-var sanitizeInput2 = (input) => input;
-if (typeof window !== "undefined" && typeof document !== "undefined") {
-  sanitizeInput2 = (input) => {
-    const element = document.createElement("div");
-    element.innerText = input;
-    return element.innerHTML;
-  };
-}
-var useAnchor = typeof window !== "undefined" ? debounce((anchors) => {
-  anchors.forEach((anchor) => {
-    if (!anchor) return;
-    const originalHref = anchor.getAttribute("href") || "#";
-    const originalClassName = anchor.getAttribute("class") || "";
-    const sanitizedHref = sanitizeInput2(originalHref);
-    const sanitizedClassName = anchor.getAttribute("class") ? sanitizeInput2(anchor.getAttribute("class")) : originalClassName;
-    anchor.setAttribute("href", sanitizedHref);
-    anchor.setAttribute("class", sanitizedClassName);
-    if (anchor.getAttribute("aria-label")) {
-      anchor.setAttribute(
-        "aria-label",
-        sanitizeInput2(anchor.getAttribute("aria-label"))
-      );
-    }
-    const childElement = anchor.querySelector(":scope > *");
-    if (childElement) {
-      anchor.innerHTML = "";
-      anchor.appendChild(childElement);
-    }
-    anchor.addEventListener("click", (e) => {
-      const target = e.currentTarget;
-      const href = target.getAttribute("href");
-      try {
-        const url = new URL(href, window.location.href);
-        if (url.origin !== window.location.origin) return;
-      } catch (error) {
-        console.error("Invalid URL:", error);
-        return;
-      }
-      e.preventDefault();
-      window.history.pushState({}, "", href);
-      const navEvent = new PopStateEvent("popstate");
-      window.dispatchEvent(navEvent);
-    });
-  });
-}) : () => {
-};
-
-// src/hooks/useTSMetaData.ts
-import DOMPurify5 from "dompurify";
-
-// src/hooks/useTSComponent.ts
-import DOMPurify6 from "dompurify";
-var useTSComponent = (id, DOM, element, params, params2) => {
-  DOMPurify6.sanitize(DOM);
-  element(DOM.querySelector(`#${id}`), params, params2);
-};
-
-// src/hooks/useTSSelect.ts
-var useTSSelect = (selector) => {
-  const element = document.querySelector(selector);
-  if (!element) {
-    console.warn(`[useTSSelect] No element found for selector: '${selector}'`);
-    return null;
-  }
-  return element;
-};
-
-// src/hooks/useTSAuth.ts
-import { jwtDecode } from "jwt-decode";
-var useTSAuth = (_Component, loginUrl) => {
-  const token = localStorage.getItem("token");
-  if (!token) {
-    window.location.href = loginUrl;
-    return null;
-  }
-  try {
-    const decodedToken = jwtDecode(token);
-    const currentTime = Date.now() / 1e3;
-    if (decodedToken.exp && decodedToken.exp < currentTime) {
-      console.error("Token has expired");
-      window.localStorage.removeItem("token");
-      window.location.href = loginUrl;
-      return null;
-    }
-    return null;
-  } catch (error) {
-    console.error("Invalid token:", error);
-    window.location.href = loginUrl;
-    return null;
-  }
-};
-
-// src/hooks/useTSForEach.ts
-var useTSElementEach = (elements, events, callback) => {
-  elements.forEach((element) => {
-    events.forEach((eventType) => {
-      element.addEventListener(eventType, (event) => {
-        callback(element, event);
-      });
-    });
-  });
-};
-
-// src/routes/class/Router.class.ts
-import DOMPurify8 from "dompurify";
-
-// src/store/useTSParam.store.ts
-import { createStore as createStore2 } from "zustand/vanilla";
-import DOMPurify7 from "dompurify";
-var tsParamsStore = createStore2((set) => ({
-  params: {},
-  query: {},
-  setParams: (params) => set(() => ({
-    params: sanitize(params)
-  })),
-  setQuery: (query) => set(() => ({
-    query: sanitize(query)
-  }))
-}));
-function sanitize(obj) {
-  const output = {};
-  for (const key in obj) {
-    output[key] = DOMPurify7.sanitize(obj[key]);
-  }
-  return output;
-}
-
-// src/routes/class/Router.class.ts
-var TSRouter = class {
-  constructor(routes, expectedParams) {
-    this.routes = [];
-    this.routes = routes;
-    this.expectedParams = new Set(expectedParams);
-    window.addEventListener("popstate", this.handlePopState.bind(this));
-    this.handlePopState();
-  }
-  handlePopState() {
-    const currentPath = window.location.pathname;
-    const currentSearch = window.location.search;
-    const queryParams = this.parseQueryParams(currentSearch);
-    const matchingRoute = this.findMatchingRoute(currentPath, this.routes);
-    if (matchingRoute) {
-      if (matchingRoute.routeto) {
-        this.navigate(matchingRoute.routeto);
-        return;
-      }
-      const sanitizedParams = this.filterAndSanitizeParams(matchingRoute.params);
-      tsParamsStore.getState().setParams(sanitizedParams);
-      tsParamsStore.getState().setQuery(queryParams);
-      const errorElement = document.createElement("div");
-      matchingRoute.element?.(errorElement, sanitizedParams, queryParams);
-      if (matchingRoute.children) {
-        const nestedPath = currentPath.slice(matchingRoute.path.length);
-        const childElement = errorElement.querySelector("#child");
-        if (childElement) {
-          this.renderChildren(
-            matchingRoute.children,
-            nestedPath,
-            childElement,
-            sanitizedParams,
-            queryParams
-          );
-        }
-      }
-    } else {
-      const notFoundRoute = this.findMatchingRoute("*", this.routes);
-      if (notFoundRoute) {
-        const fallbackParams = this.filterAndSanitizeParams(notFoundRoute.params);
-        tsParamsStore.getState().setParams(fallbackParams);
-        tsParamsStore.getState().setQuery(queryParams);
-        const errorElement = document.createElement("div");
-        notFoundRoute.element?.(errorElement, fallbackParams, queryParams);
-      }
-    }
-  }
-  renderChildren(children, nestedPath, parentElement, parentParams, queryParams) {
-    if (!children || children.length === 0) {
-      const childElement = parentElement.querySelector("#child");
-      if (childElement) childElement.remove();
-      return;
-    }
-    const matchingChild = this.findMatchingRoute(nestedPath, children);
-    if (matchingChild) {
-      const childElement = document.createElement("div");
-      childElement.id = "child";
-      const mergedParams = { ...parentParams, ...matchingChild.params };
-      const sanitizedParams = this.filterAndSanitizeParams(mergedParams);
-      tsParamsStore.getState().setParams(sanitizedParams);
-      tsParamsStore.getState().setQuery(queryParams);
-      matchingChild.element?.(childElement, sanitizedParams, queryParams);
-      parentElement.appendChild(childElement);
-      if (matchingChild.children) {
-        const nextNestedPath = nestedPath.slice(matchingChild.path.length);
-        this.renderChildren(
-          matchingChild.children,
-          nextNestedPath,
-          childElement,
-          sanitizedParams,
-          queryParams
-        );
-      }
-    }
-  }
-  parseQueryParams(search) {
-    const queryParams = {};
-    const urlSearchParams = new URLSearchParams(search);
-    for (const [key, value] of urlSearchParams.entries()) {
-      if (this.expectedParams.has(key)) {
-        queryParams[key] = DOMPurify8.sanitize(value);
-      }
-    }
-    return queryParams;
-  }
-  findMatchingRoute(path, routes, inheritedParams = {}) {
-    for (const route of routes) {
-      const routePath = route.path;
-      const isDefaultRoute = routePath === "*";
-      if (!isDefaultRoute) {
-        const paramNames = [];
-        const regexPattern = routePath.replace(/:[^\s/]+/g, (match2) => {
-          paramNames.push(match2.substring(1));
-          return "([^\\s/]+)";
-        });
-        const regex = new RegExp(`^${regexPattern}(?:/|$)`);
-        const match = path.match(regex);
-        if (match) {
-          const params = { ...inheritedParams };
-          paramNames.forEach((name, index) => {
-            params[name] = match[index + 1] ?? "";
-          });
-          if (route.children) {
-            const nestedPath = path.slice(match[0].length);
-            const matchingChild = this.findMatchingRoute(
-              nestedPath,
-              route.children,
-              params
-            );
-            if (matchingChild) return matchingChild;
-          }
-          return { ...route, params };
-        }
-      } else {
-        return route;
-      }
-    }
-    return void 0;
-  }
-  filterAndSanitizeParams(params) {
-    if (!params) return {};
-    const sanitizedParams = {};
-    for (const key in params) {
-      if (this.expectedParams.has(key)) {
-        sanitizedParams[key] = DOMPurify8.sanitize(params[key] ?? "");
-      }
-    }
-    return sanitizedParams;
-  }
-  navigate(path) {
-    history.pushState(null, "", path);
-    this.handlePopState();
-  }
-  addRoute(route) {
-    this.routes.push(route);
-  }
-};
-export {
-  TSRouter,
-  html,
-  useAnchor,
-  useAnchorSingle,
-  useInitialDOM,
-  useTSAuth,
-  useTSComponent,
-  useTSElementEach,
-  useTSElements,
-  useTSEvent,
-  useTSEventAll,
-  useTSExtractParams,
-  useTSParams,
-  useTSPurifier,
-  useTSSelect
-};