@devwareng/vanilla-ts 1.0.1 → 1.0.3

package/dist/index.js

@@ -0,0 +1,458 @@
+// 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
+};