Add form/file/visibility/path helpers.

Author: ZhukV

CHANGELOG.md

@@ -1,6 +1,12 @@
 CHANGELOG
 =========
 
+Next release
+------------
+
+* Add form control helpers.
+* Add file helpers.
+
 v1.0.4
 ------
 

eslint.config.js

@@ -27,7 +27,7 @@ export default [
             'semi': ['error', 'always'],
             'quotes': ['error', 'single'],
             'comma-dangle': ['error', 'always-multiline'],
-            'indent': ['error', 4],
+            'indent': ['error', 4, { SwitchCase: 1 }],
             'object-curly-spacing': ['error', 'always'],
             'arrow-parens': ['error', 'always'],
             'eqeqeq': ['error', 'always'],

package.json

@@ -6,13 +6,13 @@
     "description": "The helpers for easy manipulate with dom.",
     "license": "MIT",
     "exports": {
-        "./dom": {
-            "types": "./dist/dom/index.d.ts",
-            "import": "./dist/dom/index.js"
+        "./browser": {
+            "types": "./dist/browser/index.d.ts",
+            "import": "./dist/browser/index.js"
         },
-        "./dom/*": {
-            "types": "./dist/dom/*.d.ts",
-            "import": "./dist/dom/*.js"
+        "./browser/*": {
+            "types": "./dist/browser/*.d.ts",
+            "import": "./dist/browser/*.js"
         },
         "./behaviors": {
             "types": "./dist/behaviors/index.d.ts",
@@ -22,13 +22,21 @@
             "types": "./dist/behaviors/*.d.ts",
             "import": "./dist/behaviors/*.js"
         },
-        "./browser": {
-            "types": "./dist/browser/index.d.ts",
-            "import": "./dist/browser/index.js"
+        "./core": {
+            "types": "./dist/core/index.d.ts",
+            "import": "./dist/core/index.js"
         },
-        "./browser/*": {
-            "types": "./dist/browser/*.d.ts",
-            "import": "./dist/browser/*.js"
+        "./core/*": {
+            "types": "./dist/core/*.d.ts",
+            "import": "./dist/core/*.js"
+        },
+        "./dom": {
+            "types": "./dist/dom/index.d.ts",
+            "import": "./dist/dom/index.js"
+        },
+        "./dom/*": {
+            "types": "./dist/dom/*.d.ts",
+            "import": "./dist/dom/*.js"
         },
         "./observability": {
             "types": "./dist/observability/index.d.ts",

rollup.config.js

@@ -10,9 +10,10 @@ const externals = [
 export default [
     {
         input: [
-            './src/dom/index.ts',
             './src/behaviors/index.ts',
             './src/browser/index.ts',
+            './src/core/index.ts',
+            './src/dom/index.ts',
             './src/observability/index.ts',
             './src/ui/index.ts',
         ],

src/browser/file.ts

@@ -0,0 +1,10 @@
+export function readFileAsArrayBuffer(file: File): Promise<ArrayBuffer> {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+
+        reader.onload = () => resolve(reader.result as ArrayBuffer);
+        reader.onerror = () => reject(reader.error);
+
+        reader.readAsArrayBuffer(file);
+    });
+}

src/browser/index.ts

@@ -1,4 +1,6 @@
-export * from './network';
 export * from './clipboard';
+export * from './file';
+export * from './network';
 export * from './notifications';
 export * from './request';
+export * from './visibility';

src/browser/visibility.ts

@@ -0,0 +1,43 @@
+export type ElementVisibilityCallback<T extends Element = Element> = (element: T, visible: boolean) => void;
+
+type ObserverEntry = {
+    callback: ElementVisibilityCallback;
+    once: boolean;
+};
+
+type ObserveVisibilityOptions = {
+    readonly once?: boolean;
+}
+
+const observers = new Map<Element, ObserverEntry>();
+
+const intersectionObserver = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+        const observer = observers.get(entry.target);
+
+        if (!observer) {
+            continue;
+        }
+
+        observer.callback(entry.target, entry.isIntersecting);
+
+        if (observer.once && entry.isIntersecting) {
+            intersectionObserver.unobserve(entry.target);
+            observers.delete(entry.target);
+        }
+    }
+});
+
+export function observeElementVisibility<T extends Element = Element>(element: T, callback: ElementVisibilityCallback<T>, options?: ObserveVisibilityOptions): () => void {
+    observers.set(element, {
+        callback: callback as ElementVisibilityCallback,
+        once: options?.once ?? false,
+    });
+
+    intersectionObserver.observe(element);
+
+    return () => {
+        intersectionObserver.unobserve(element);
+        observers.delete(element);
+    };
+}

src/core/config.ts

@@ -0,0 +1,58 @@
+let store: Map<string, unknown> = new Map();
+let waiters: Map<string, [Promise<unknown>, (value: unknown) => void]> = new Map();
+
+export function setConfig(key: string, value: unknown): void {
+    store.set(key, value);
+
+    const waiterEntry = waiters.get(key);
+
+    if (waiterEntry) {
+        waiterEntry[1](value);
+        waiters.delete(key);
+    }
+}
+
+export async function getConfig<T = unknown>(key: string, timeout = 1000): Promise<T> {
+    if (store.has(key)) {
+        return store.get(key) as T;
+    }
+
+    const existence = waiters.get(key);
+
+    if (existence) {
+        return existence[0] as T;
+    }
+
+    let timer: ReturnType<typeof setTimeout> | undefined;
+
+    let wrappedResolve!: (value: unknown) => void;
+
+    const promise = new Promise<T>((resolve, reject) => {
+        timer = setTimeout(() => {
+            waiters.delete(key);
+            reject(new Error(`Failed to read config "${key}" during timeout (${timeout}ms).`));
+        }, timeout);
+
+        wrappedResolve = (value: unknown) => {
+            clearTimeout(timer);
+            resolve(value as T);
+        };
+    });
+
+    waiters.set(key, [promise as Promise<unknown>, wrappedResolve]);
+
+    return promise;
+}
+
+export function hasConfig(key: string): boolean {
+    return store.has(key);
+}
+
+export const __test__ = import.meta.env?.MODE === 'test'
+    ? {
+        reset: () => {
+            store = new Map();
+            waiters = new Map();
+        },
+    }
+    : undefined;

src/core/index.ts

@@ -0,0 +1,3 @@
+export * from './config';
+export * from './observable';
+export * from './path';

src/core/observable.ts

@@ -0,0 +1,17 @@
+export class Observable<T> {
+    private listeners = new Set<(data: T) => void>();
+
+    subscribe(callback: (data: T) => void): () => void {
+        this.listeners.add(callback);
+
+        return () => {
+            this.listeners.delete(callback);
+        };
+    }
+
+    emit(data: T): void {
+        for (const callback of this.listeners) {
+            callback(data);
+        }
+    }
+}