@fajarmaulana/komerce-lp-helper 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 fajarmaulana-dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,159 @@
+# komerce-lp-helper
+
+A collection of useful React hooks, utilities, and helper functions designed for Komerce Landing Page projects.
+
+## Installation
+
+```bash
+npm install komerce-lp-helper
+```
+
+## Features
+
+### HTTP Client & API Hooks
+
+#### `http`
+
+A wrapper around `fetch` with support for interceptors, caching, and retries.
+
+```typescript
+import { http } from "komerce-lp-helper";
+
+// GET request
+const users = await http.get("/users");
+
+// POST request with body
+await http.post("/users", { name: "John Doe" });
+
+// Using cache
+const cachedData = http.getCache("my-key");
+```
+
+#### `createApi`
+
+Creates a new API instance with built-in React hooks (`fetch`, `mutation`, `infinite`) for performing typed data fetching and mutations with progress tracking.
+
+```tsx
+import { createApi } from "komerce-lp-helper";
+
+const api = createApi({ baseURL: "/api" });
+
+// Fetch
+const { data, isLoading, refetch } = api.fetch<User[]>("/users");
+
+// Mutation (POST, PUT, DELETE)
+const { mutate, isLoading, progress } = api.mutation<User, FormData>("/users", { method: "POST" });
+
+// Infinite Fetch
+const { data, fetchNextPage } = api.infinite<User[]>("/users", {
+  initialOffset: 0,
+  setOffset: (lastItems, allItems, lastOffset) => (lastItems.length ? lastOffset + 1 : null),
+});
+```
+
+### Hooks
+
+#### `useDebounce`
+
+Returns a debounced version of a value. Useful for delaying expensive operations.
+
+```typescript
+import { useDebounce } from "komerce-lp-helper";
+const debouncedSearchTerm = useDebounce(searchTerm, 500);
+```
+
+#### `useDebounceFunc`
+
+Returns a debounced version of a callback function.
+
+```typescript
+import { useDebounceFunc } from "komerce-lp-helper";
+const debouncedSearch = useDebounceFunc((q) => fetchResults(q), 300);
+```
+
+#### `useConditionalDebounce`
+
+Conditionally executes a callback function after a specified debounce delay.
+
+#### `useRouter`
+
+A custom router API built on top of React Router DOM that provides easier navigation methods and state management.
+
+```typescript
+import { useRouter } from "komerce-lp-helper";
+
+const { push, replace, back, query, params } = useRouter();
+
+// Navigate with query params
+push({ pathname: "/dashboard", query: { tab: "settings" } });
+```
+
+#### `useQueryParams`
+
+A hook for reading and updating query parameters in the URL locally.
+
+```typescript
+import { useQueryParams } from "komerce-lp-helper";
+const [queryObj, updateQuery] = useQueryParams<{ page: string }>();
+```
+
+#### `useSlider`
+
+Manages logic for custom slider components, including touch/drag support and navigation.
+
+```typescript
+import { useSlider } from "komerce-lp-helper";
+const slider = useSlider({ data: items });
+```
+
+### Utilities
+
+#### Cookie
+
+Managed wrappers for `document.cookie`.
+
+- `setCookie({ key, value, maxAge })`: Sets a cookie.
+- `setCookies([ ... ])`: Sets multiple cookies.
+- `getCookie(key)`: Gets and parses a cookie value.
+- `getCookies([keys])`: Retrieves multiple cookies.
+- `removeCookie(key)`: Removes a cookie.
+- `removeCookies([keys])`: Removes multiple cookies.
+- `clearCookies()`: Clears all cookies.
+
+#### Local Storage
+
+Type-safe wrappers for `localStorage`.
+
+- `setLocal(key, value)`: Stores a value (JSON stringified).
+- `setLocals([ ... ])`: Stores multiple values.
+- `getLocal(key)`: Retrieves and parses a value.
+- `getLocals([keys])`: Retrieves multiple values.
+- `removeLocal(key)`: Removes an item.
+- `clearLocals()`: Clears local storage.
+
+#### File
+
+Helpers for file and blob manipulation.
+
+- `checkImage(url)`: Checks if an image URL is valid.
+- `convertBlob(blob)`: Converts a Blob to a Base64 string.
+- `extension(mimeType)`: Gets file extension from MIME type.
+- `filenameWithExtension(blob, prefix)`: Generates a filename.
+- `createDownloadAnchor(blob, options)`: Creates an anchor for downloading.
+- `downloadBlob(blob, filename)`: Triggers a file download.
+
+#### General
+
+Common DOM and string utilities.
+
+- `getById(id)`: Type-safe `document.getElementById`.
+- `getByAny(selector)`: Type-safe `document.querySelector`.
+- `clickById(id)`: Triggers a click on an element by ID.
+- `focusById(id)`: Focuses an element by ID.
+- `handleHashLink(hash, currentHash)`: Smooth scrolling for hash links.
+- `acronym(name)`: Generates a 2-letter acronym from a name.
+- `isNotPrimitive(value)`: Checks if a value is an object/array.
+
+## License
+
+MIT

package/dist/constants/index.d.ts

@@ -0,0 +1 @@
+export declare const MOBILE_BOUND = 640;

package/dist/constants/index.js

@@ -0,0 +1 @@
+export var MOBILE_BOUND = 640;

package/dist/hooks/debounce.d.ts

@@ -0,0 +1,40 @@
+/**
+ * useDebounce is a React hook that returns a debounced version of a value.
+ * It updates the returned value only after a specified delay has passed
+ * without any changes to the input value.
+ *
+ * Useful for delaying expensive operations such as API calls,
+ * especially while the user is typing.
+ *
+ * @param value - The input value to debounce.
+ * @param delay - The debounce delay in milliseconds.
+ * @returns The debounced value.
+ *
+ * @example
+ * const debouncedSearchTerm = useDebounce(searchTerm, 500);
+ */
+export declare function useDebounce<T>(value: T, delay?: number): T;
+/**
+ * useDebounceFunc returns a debounced version of a callback function.
+ * The function will only be executed after the specified delay has passed
+ * without being called again. This is helpful for limiting function execution
+ * in response to frequent user actions like typing or resizing.
+ *
+ * @param callback - The original function to debounce.
+ * @param delay - Delay in milliseconds before the callback is executed.
+ * @returns A debounced function that delays execution of the callback.
+ *
+ * @example
+ * const debouncedSearch = useDebounceFunc((q) => fetchResults(q), 300);
+ * debouncedSearch('hello'); // Will wait 300ms before calling fetchResults
+ */
+export declare function useDebounceFunc<T extends (...args: any[]) => void>(callback: T, delay: number): (...args: Parameters<T>) => void;
+/**
+ * A React hook that conditionally executes a callback function after a specified debounce delay.
+ *
+ * Unlike a standard debounce, `useConditionalDebounce` only triggers the callback if a given condition is `true`.
+ * It automatically clears any pending timeouts when the component unmounts or when the condition changes before the delay expires.
+ *
+ * @param {number} [delay=500] - The debounce delay in milliseconds before executing the callback.
+ */
+export declare function useConditionalDebounce(delay?: number): (condition: boolean, callback: () => void) => void;

package/dist/hooks/debounce.js

@@ -0,0 +1,118 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useCallback, useEffect, useRef, useState } from 'react';
+/**
+ * useDebounce is a React hook that returns a debounced version of a value.
+ * It updates the returned value only after a specified delay has passed
+ * without any changes to the input value.
+ *
+ * Useful for delaying expensive operations such as API calls,
+ * especially while the user is typing.
+ *
+ * @param value - The input value to debounce.
+ * @param delay - The debounce delay in milliseconds.
+ * @returns The debounced value.
+ *
+ * @example
+ * const debouncedSearchTerm = useDebounce(searchTerm, 500);
+ */
+export function useDebounce(value, delay) {
+    if (delay === void 0) { delay = 500; }
+    var _a = __read(useState(value), 2), debouncedValue = _a[0], setDebouncedValue = _a[1];
+    useEffect(function () {
+        var handler = setTimeout(function () {
+            setDebouncedValue(value);
+        }, delay);
+        return function () {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}
+/**
+ * useDebounceFunc returns a debounced version of a callback function.
+ * The function will only be executed after the specified delay has passed
+ * without being called again. This is helpful for limiting function execution
+ * in response to frequent user actions like typing or resizing.
+ *
+ * @param callback - The original function to debounce.
+ * @param delay - Delay in milliseconds before the callback is executed.
+ * @returns A debounced function that delays execution of the callback.
+ *
+ * @example
+ * const debouncedSearch = useDebounceFunc((q) => fetchResults(q), 300);
+ * debouncedSearch('hello'); // Will wait 300ms before calling fetchResults
+ */
+export function useDebounceFunc(callback, delay) {
+    var timerRef = useRef(null);
+    var debouncedFunction = function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        timerRef.current = setTimeout(function () {
+            callback.apply(void 0, __spreadArray([], __read(args), false));
+        }, delay);
+    };
+    useEffect(function () {
+        return function () {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+        };
+    }, []);
+    return debouncedFunction;
+}
+/**
+ * A React hook that conditionally executes a callback function after a specified debounce delay.
+ *
+ * Unlike a standard debounce, `useConditionalDebounce` only triggers the callback if a given condition is `true`.
+ * It automatically clears any pending timeouts when the component unmounts or when the condition changes before the delay expires.
+ *
+ * @param {number} [delay=500] - The debounce delay in milliseconds before executing the callback.
+ */
+export function useConditionalDebounce(delay) {
+    if (delay === void 0) { delay = 500; }
+    var timeoutRef = useRef(null);
+    var run = useCallback(function (condition, callback) {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        if (!condition)
+            return;
+        timeoutRef.current = window.setTimeout(callback, delay);
+    }, [delay]);
+    useEffect(function () {
+        return function () {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, []);
+    return run;
+}

package/dist/hooks/router.d.ts

@@ -0,0 +1,111 @@
+import { type NavigateOptions } from 'react-router-dom';
+/**
+ * Represents the query string parameters of a URL.
+ *
+ * @example
+ * ```ts
+ * { page: "1", tags: ["react", "typescript"] }
+ * ```
+ */
+export type TRouterQuery = {
+    [key: string]: string | string[];
+};
+/**
+ * Represents the state of the router navigation.
+ */
+export type TRouterState = {
+    /** The target URL for navigation. */
+    url?: string;
+    /** The path shown in the browser as the navigation result. */
+    as?: string;
+    /** Navigation options passed to the router method (`replace`, `state`, etc.) */
+    options?: NavigateOptions;
+    /** Additional metadata that may be attached to the router state. */
+    [key: string]: unknown;
+};
+/**
+ * Type definition for a navigation function.
+ * It can accept either a string path directly, or
+ * an object containing `pathname`, `query`, and `hash`.
+ */
+export interface IRouterPush {
+    /**
+     * Navigate using a string path.
+     *
+     * @param url - Destination path, e.g. "/dashboard"
+     * @param options - Additional navigation options (`replace`, `state`, etc.)
+     */
+    (url: string | {
+        pathname: string;
+        query?: TRouterQuery;
+        hash?: string;
+    }, options?: NavigateOptions): void;
+    /**
+     * Navigate using an object with query parameters and hash.
+     *
+     * @param pathObj - Object containing `pathname`, `query`, and `hash`
+     * @param options - Additional navigation options
+     */
+    (pathObj: {
+        pathname: string;
+        query?: TRouterQuery;
+        hash?: string;
+    }, options?: NavigateOptions): void;
+}
+/**
+ * Custom router API built on top of React Router DOM.
+ */
+export type TUseRouter = {
+    /** Navigate to a new page */
+    push: IRouterPush;
+    /** Navigate to a new page with query parameters */
+    route: (pathname: string, query?: TRouterQuery, options?: NavigateOptions) => void;
+    /** Replace the current history entry with a new one */
+    replace: IRouterPush;
+    /** Go back to the previous page (history -1) */
+    back: () => void;
+    /** Go forward to the next page (history +1) */
+    next: () => void;
+    /** Jump to a specific history index */
+    go: (num: number) => void;
+    /** Reload the current page */
+    refresh: () => void;
+    /** The current pathname without query/hash */
+    path: string;
+    /** The hash portion of the current URL (e.g. "#section1") */
+    hash: string;
+    /** Full path including pathname, query, and hash */
+    fullpath: string;
+    /** The base URL */
+    origin: string;
+    /** Full URL including base URL, pathname, query, and hash */
+    href: string;
+    /** Parsed query parameters as an object */
+    query: TRouterQuery;
+    /** Current route parameters (from `useParams`) */
+    params: Record<string, string | undefined>;
+    /**
+     * Registers a callback to be executed before navigating back/forward.
+     * The callback can cancel navigation if it returns `false`.
+     *
+     * @param cb - Function to handle popstate events
+     */
+    beforePopState: (cb: (state: TRouterState) => boolean) => void;
+};
+/**
+ * Custom router API built on top of React Router DOM.
+ *
+ * @returns An object implementing the {@link TUseRouter} interface
+ */
+export declare function useRouter(): TUseRouter;
+/**
+ * A hook for reading and updating query parameters in the URL.
+ *
+ * @template T - Shape of the query parameters
+ * @param defaultValues - Optional default values for query parameters
+ *
+ * @returns A tuple:
+ *  - `queryObj`: The parsed query parameters as an object
+ *  - `updateQuery`: A function to update query parameters
+ */
+export declare function useQueryParams<T extends Record<string, string | string[]>>(defaultValues?: Partial<T>): [T, (updates: Partial<T>) => void];

package/dist/hooks/router.js

@@ -0,0 +1,182 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { useCallback, useMemo } from 'react';
+import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';
+/**
+ * Custom router API built on top of React Router DOM.
+ *
+ * @returns An object implementing the {@link TUseRouter} interface
+ */
+export function useRouter() {
+    var navigate = useNavigate();
+    var location = useLocation();
+    var params = useParams();
+    var _a = __read(useSearchParams(), 1), searchParams = _a[0];
+    var query = useMemo(function () {
+        var queryObj = {};
+        searchParams.forEach(function (value, key) {
+            if (queryObj[key]) {
+                queryObj[key] = Array.isArray(queryObj[key])
+                    ? __spreadArray(__spreadArray([], __read(queryObj[key]), false), [value], false) : [queryObj[key], value];
+            }
+            else {
+                queryObj[key] = value;
+            }
+        });
+        return queryObj;
+    }, [searchParams]);
+    var push = useCallback(function (url, options) {
+        if (typeof url === 'string') {
+            navigate(url, options);
+        }
+        else {
+            var queryString = url.query
+                ? '?' +
+                    new URLSearchParams(Object.entries(url.query).map(function (_a) {
+                        var _b = __read(_a, 2), k = _b[0], v = _b[1];
+                        return [k, Array.isArray(v) ? v.join(',') : v];
+                    })).toString()
+                : '';
+            var hash = url.hash ? (url.hash.startsWith('#') ? url.hash : "#".concat(url.hash)) : '';
+            navigate("".concat(url.pathname).concat(queryString).concat(hash), options);
+        }
+    }, [navigate]);
+    var route = useCallback(function (pathname, query, options) {
+        var searchParams = new URLSearchParams();
+        if (query) {
+            Object.entries(query).forEach(function (_a) {
+                var _b = __read(_a, 2), key = _b[0], value = _b[1];
+                if (Array.isArray(value)) {
+                    value.forEach(function (v) { return searchParams.append(key, v); });
+                }
+                else {
+                    searchParams.set(key, value);
+                }
+            });
+        }
+        var search = searchParams.toString();
+        var fullPath = search ? "".concat(pathname, "?").concat(search) : pathname;
+        navigate(fullPath, options);
+    }, [navigate]);
+    var replace = useCallback(function (url, options) {
+        var replaceOptions = __assign(__assign({}, options), { replace: true });
+        push(url, replaceOptions);
+    }, [push]);
+    var back = useCallback(function () {
+        navigate(-1);
+    }, [navigate]);
+    var next = useCallback(function () {
+        navigate(1);
+    }, [navigate]);
+    var go = useCallback(function (num) {
+        navigate(num);
+    }, [navigate]);
+    var refresh = useCallback(function () {
+        window.location.reload();
+    }, []);
+    var beforePopState = useCallback(function (cb) {
+        var handlePopState = function (event) {
+            if (!cb(event.state)) {
+                event.preventDefault();
+                window.history.pushState(location.state, '', location.pathname + location.search);
+            }
+        };
+        window.addEventListener('popstate', handlePopState);
+        return function () { return window.removeEventListener('popstate', handlePopState); };
+    }, [location]);
+    return {
+        push: push,
+        route: route,
+        replace: replace,
+        back: back,
+        next: next,
+        go: go,
+        refresh: refresh,
+        path: location.pathname,
+        hash: location.hash,
+        fullpath: "".concat(location.pathname).concat(location.search).concat(location.hash),
+        origin: window.location.origin,
+        href: window.location.href,
+        query: query,
+        params: params,
+        beforePopState: beforePopState,
+    };
+}
+/**
+ * A hook for reading and updating query parameters in the URL.
+ *
+ * @template T - Shape of the query parameters
+ * @param defaultValues - Optional default values for query parameters
+ *
+ * @returns A tuple:
+ *  - `queryObj`: The parsed query parameters as an object
+ *  - `updateQuery`: A function to update query parameters
+ */
+export function useQueryParams(defaultValues) {
+    var _a = __read(useSearchParams(), 2), searchParams = _a[0], setSearchParams = _a[1];
+    var queryObj = useMemo(function () {
+        var result = __assign({}, defaultValues);
+        searchParams.forEach(function (value, key) {
+            var allValues = searchParams.getAll(key);
+            if (allValues.length > 1) {
+                result[key] = allValues;
+            }
+            else {
+                result[key] = value;
+            }
+        });
+        return result;
+    }, [searchParams, defaultValues]);
+    var updateQuery = useCallback(function (updates) {
+        var newParams = new URLSearchParams(searchParams);
+        Object.entries(updates).forEach(function (_a) {
+            var _b = __read(_a, 2), key = _b[0], value = _b[1];
+            if (value === undefined || value === null) {
+                newParams.delete(key);
+            }
+            else if (Array.isArray(value)) {
+                newParams.delete(key);
+                value.forEach(function (v) { return newParams.append(key, v); });
+            }
+            else {
+                newParams.set(key, value);
+            }
+        });
+        setSearchParams(newParams);
+    }, [searchParams, setSearchParams]);
+    return [queryObj, updateQuery];
+}

package/dist/hooks/slider.d.ts

@@ -0,0 +1,50 @@
+import { type MouseEvent, type TouchEvent } from 'react';
+type TSlider = {
+    e: MouseEvent | TouchEvent;
+    mobile?: boolean;
+    axis: 'X' | 'Y';
+};
+type TSlide = {
+    data: any[];
+    mobileOnly?: boolean;
+    infiniteSlide?: boolean;
+    isLoading?: boolean;
+    mobileBound?: number;
+    onNext?: () => void;
+    onBack?: () => void;
+};
+/**
+ * Get slider position from an event, supports mobile touch events.
+ *
+ * @param e - The event object of MouseEvent or TouchEvent.
+ * @param mobile - Whether the event is from a mobile touch (default: false).
+ * @param axis - The axis to get position from, either 'X' or 'Y' (default: 'X').
+ * @returns The page X or Y coordinate from the event.
+ */
+export declare function slider({ e, mobile, axis }: TSlider): number;
+/**
+ * useSlider is a custom hook to manage the logic for the slider component.
+ *
+ * @param data - An array of data to display in the slider.
+ * @param mobileOnly - Boolean indicating whether the slider is showed on mobile only or not.
+ * @param infiniteSlide - Boolean indicating whether the slider can be slided infinitely or not.
+ * @param isLoading - Boolean indicating whether the data is still loading.
+ * @param mobileBound - Number as bound for mobile only mode
+ * @param onNext - Emited method to override the next function.
+ * @param onBack - Emited method to override the back function.
+ * @returns An object containing state values and handlers for slider control and interaction.
+ */
+export declare function useSlider({ data, mobileOnly, infiniteSlide, isLoading, mobileBound, onBack, onNext }: TSlide): {
+    currentSlide: number;
+    movement: number;
+    grab: boolean;
+    disableLeftArrow: boolean | undefined;
+    disableRightArrow: boolean | undefined;
+    setCurrentSlide: import("react").Dispatch<import("react").SetStateAction<number>>;
+    startSlide: (param: TSlider) => void;
+    moveSlide: (param: TSlider) => void;
+    endSlide: (param: TSlider) => void;
+    next: () => void;
+    back: () => void;
+};
+export {};