@vettvangur/framework 0.0.13 → 0.0.15

package/dist/browser-events.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @module framework
+ */
 /**
  * Run a callback when the DOM is fully parsed (no need to wait for images/CSS).
  *

package/dist/browser-events.js

@@ -1,3 +1,6 @@
+/**
+ * @module framework
+ */
 /**
  * Run a callback when the DOM is fully parsed (no need to wait for images/CSS).
  *
@@ -11,9 +14,7 @@
  *   initApp()
  * })
  */
-export const onDOMContentLoaded = (fn) => document.readyState === 'loading'
-    ? document.addEventListener('DOMContentLoaded', fn, { once: true })
-    : fn();
+export const onDOMContentLoaded = (fn) => document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', fn, { once: true }) : fn();
 /**
  * Subscribe to browser history changes triggered by `history.pushState`,
  * `history.replaceState`, or user navigation (back/forward).

package/dist/dom.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @module framework
+ */
 /**
  * Query all elements matching a selector within a given root and return them as a plain array.
  *

package/dist/dom.js

@@ -1,3 +1,6 @@
+/**
+ * @module framework
+ */
 /**
  * Query all elements matching a selector within a given root and return them as a plain array.
  *

package/dist/enable-zoom.d.ts

@@ -0,0 +1 @@
+export declare function enableZoom(): void;

package/dist/enable-zoom.js

@@ -0,0 +1,22 @@
+export function enableZoom() {
+    const getProperty = (property) => getComputedStyle(document.documentElement).getPropertyValue(property).trim();
+    const setProperty = (property, value) => {
+        document.documentElement.style.setProperty(property, value);
+    };
+    const ddw = '--breakpoint-desktop-design-width';
+    const tdw = '--breakpoint-tablet-design-width';
+    const mdw = '--breakpoint-mobile-design-width';
+    const initialScale = window.devicePixelRatio;
+    const desktopDesignWidth = getProperty(ddw);
+    const tabletDesignWidth = getProperty(tdw);
+    const mobileDesignWidth = getProperty(mdw);
+    const observer = new ResizeObserver(() => {
+        const currentScale = window.devicePixelRatio;
+        setProperty(ddw, (Number(desktopDesignWidth) * (initialScale / currentScale)).toString());
+        setProperty(tdw, (Number(tabletDesignWidth) * (initialScale / currentScale)).toString());
+        setProperty(mdw, (Number(mobileDesignWidth) * (initialScale / currentScale)).toString());
+    });
+    if (document.body) {
+        observer.observe(document.body);
+    }
+}

package/dist/events.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @module framework
+ */
 import type { Handler } from './types';
 /**
  * Create a tiny event bus backed by `EventTarget`.
@@ -22,26 +25,21 @@ import type { Handler } from './types';
  * bus.emit('READY')
  * ```
  *
- * @returns {{
- *   on(type: string, handler: Handler): () => void;
- *   once(type: string, handler: Handler): void;
- *   emit(type: string, payload?: any): void;
- * }}
- * An object with `on`, `once`, and `emit` methods.
+ * @returns {object} An object with `on`, `once`, and `emit` methods.
  */
 export declare function createEventBus(): {
     /**
      * Subscribe to an event type.
      * @param {string} type - Event name.
-     * @param {Handler} handler - Called with `payload` passed to {@link emit}.
-     * @returns {() => void} Unsubscribe function to remove this handler.
+     * @param {function(*=): void} handler - Called with `payload` passed to {@link emit}.
+     * @returns {function(): void} Unsubscribe function to remove this handler.
      */
     on(type: string, handler: Handler): () => void;
     /**
      * Subscribe to a single occurrence of an event type.
      * Automatically unsubscribes after the first call.
      * @param {string} type - Event name.
-     * @param {Handler} handler - Called once with the emitted `payload`.
+     * @param {function(*=): void} handler - Called once with the emitted `payload`.
      */
     once(type: string, handler: Handler): void;
     /**
@@ -67,15 +65,15 @@ export declare const events: {
     /**
      * Subscribe to an event type.
      * @param {string} type - Event name.
-     * @param {Handler} handler - Called with `payload` passed to {@link emit}.
-     * @returns {() => void} Unsubscribe function to remove this handler.
+     * @param {function(*=): void} handler - Called with `payload` passed to {@link emit}.
+     * @returns {function(): void} Unsubscribe function to remove this handler.
      */
     on(type: string, handler: Handler): () => void;
     /**
      * Subscribe to a single occurrence of an event type.
      * Automatically unsubscribes after the first call.
      * @param {string} type - Event name.
-     * @param {Handler} handler - Called once with the emitted `payload`.
+     * @param {function(*=): void} handler - Called once with the emitted `payload`.
      */
     once(type: string, handler: Handler): void;
     /**

package/dist/events.js

@@ -21,12 +21,7 @@
  * bus.emit('READY')
  * ```
  *
- * @returns {{
- *   on(type: string, handler: Handler): () => void;
- *   once(type: string, handler: Handler): void;
- *   emit(type: string, payload?: any): void;
- * }}
- * An object with `on`, `once`, and `emit` methods.
+ * @returns {object} An object with `on`, `once`, and `emit` methods.
  */
 export function createEventBus() {
     const target = new EventTarget();
@@ -34,8 +29,8 @@ export function createEventBus() {
         /**
          * Subscribe to an event type.
          * @param {string} type - Event name.
-         * @param {Handler} handler - Called with `payload` passed to {@link emit}.
-         * @returns {() => void} Unsubscribe function to remove this handler.
+         * @param {function(*=): void} handler - Called with `payload` passed to {@link emit}.
+         * @returns {function(): void} Unsubscribe function to remove this handler.
          */
         on(type, handler) {
             const wrapped = (e) => handler(e.detail);
@@ -46,7 +41,7 @@ export function createEventBus() {
          * Subscribe to a single occurrence of an event type.
          * Automatically unsubscribes after the first call.
          * @param {string} type - Event name.
-         * @param {Handler} handler - Called once with the emitted `payload`.
+         * @param {function(*=): void} handler - Called once with the emitted `payload`.
          */
         once(type, handler) {
             const wrapped = (e) => handler(e.detail);

package/dist/index.d.ts

@@ -1,4 +1,11 @@
+/**
+ *
+ * Lightweight runtime for mounting “features” on DOM nodes.
+ * @module framework
+ */
 export type { FeatureProps, FeatureInstance, Feature, Loader } from './types';
 export { vettvangur } from './vettvangur';
 export { onDOMContentLoaded } from './browser-events';
 export { preloadTimeout } from './preload-timeout';
+export { enableZoom } from './enable-zoom';
+export { verticalResizeCheck, isVerticalResize } from './vertical-resize';

package/dist/index.js

@@ -1,3 +1,10 @@
+/**
+ *
+ * Lightweight runtime for mounting “features” on DOM nodes.
+ * @module framework
+ */
 export { vettvangur } from './vettvangur';
 export { onDOMContentLoaded } from './browser-events';
 export { preloadTimeout } from './preload-timeout';
+export { enableZoom } from './enable-zoom';
+export { verticalResizeCheck, isVerticalResize } from './vertical-resize';

package/dist/preload-timeout.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @module framework
+ */
 /**
  * Apply staged preload classes to the document body to prevent e.g. transitions from running and font swapping to be visible.
  *

package/dist/preload-timeout.js

@@ -1,3 +1,6 @@
+/**
+ * @module framework
+ */
 /**
  * Apply staged preload classes to the document body to prevent e.g. transitions from running and font swapping to be visible.
  *

package/dist/types.d.ts

@@ -1,8 +1,28 @@
+/**
+ *
+ * Public types for the feature-loader runtime.
+ * @module framework
+ */
+/**
+ * Key/value props passed into a feature factory.
+ */
 export type FeatureProps = Record<string, unknown>;
+/**
+ * Runtime instance returned by a feature factory.
+ */
 export interface FeatureInstance {
     mount(): void;
     unmount(): void;
 }
+/**
+ * Feature factory function.
+ */
 export type Feature = (root: HTMLElement, props?: FeatureProps) => FeatureInstance;
+/**
+ * Dynamic import function used to load a feature module.
+ */
 export type Loader = () => Promise<any>;
+/**
+ * Event bus handler.
+ */
 export type Handler = (payload?: any) => void;

package/dist/types.js

@@ -1 +1,6 @@
+/**
+ *
+ * Public types for the feature-loader runtime.
+ * @module framework
+ */
 export {};

package/dist/vertical-resize.d.ts

@@ -0,0 +1,2 @@
+export declare let isVerticalResize: boolean;
+export declare function verticalResizeCheck(): void;

package/dist/vertical-resize.js

@@ -0,0 +1,12 @@
+export let isVerticalResize = false;
+export function verticalResizeCheck() {
+    let lastWindowHeight = window.innerHeight;
+    let lastWindowWidth = window.innerWidth;
+    window.addEventListener('resize', () => {
+        const currentHeight = window.innerHeight;
+        const currentWidth = window.innerWidth;
+        isVerticalResize = currentHeight !== lastWindowHeight && currentWidth === lastWindowWidth;
+        lastWindowHeight = currentHeight;
+        lastWindowWidth = currentWidth;
+    });
+}

package/dist/vettvangur.js

@@ -1,3 +1,6 @@
+/**
+ * @module framework
+ */
 import { $$, inViewport } from './dom';
 /** @internal Symbolic key stored on mounted HTMLElements to cache their FeatureInstance. */
 const INST = '__feature_instance__';
@@ -19,11 +22,16 @@ const loaderCache = new WeakMap();
  */
 async function mount(el, load) {
     // Already mounted? bail.
-    if (el[INST])
+    if (el[INST]) {
         return;
+    }
     try {
         // Reuse an in-flight or completed import for this loader.
-        const promise = loaderCache.get(load) ?? (loaderCache.set(load, load()), loaderCache.get(load));
+        let promise = loaderCache.get(load);
+        if (!promise) {
+            promise = load();
+            loaderCache.set(load, promise);
+        }
         const mod = await promise;
         const exp = mod.default ?? mod;
         let instance;
@@ -112,12 +120,14 @@ export function vettvangur(root = document, moduleMap) {
     /** Lazily mount elements as they approach the viewport. */
     const io = new IntersectionObserver((entries) => {
         entries.forEach((e) => {
-            if (!e.isIntersecting)
+            if (!e.isIntersecting) {
                 return;
+            }
             const el = e.target;
             const loader = resolveLoader(el, moduleMap);
-            if (!loader)
+            if (!loader) {
                 return io.unobserve(el);
+            }
             mount(el, loader).finally(() => io.unobserve(el));
         });
     }, { root: null, threshold: 0, rootMargin: '200px 0px' });
@@ -130,8 +140,9 @@ export function vettvangur(root = document, moduleMap) {
             .map((s) => s.trim())
             .filter(Boolean);
         sels.forEach((sel) => $$(root, sel).forEach((el) => {
-            if (seen.has(el))
+            if (seen.has(el)) {
                 return;
+            }
             seen.add(el);
             if (inViewport(el)) {
                 // Eager mount if already visible
@@ -152,8 +163,9 @@ export function vettvangur(root = document, moduleMap) {
         for (const m of muts) {
             // Added nodes → try to mount
             m.addedNodes.forEach((n) => {
-                if (!(n instanceof HTMLElement))
+                if (!(n instanceof HTMLElement)) {
                     return;
+                }
                 // If the added node itself matches a selector
                 const loader = resolveLoader(n, moduleMap);
                 if (loader) {
@@ -166,18 +178,21 @@ export function vettvangur(root = document, moduleMap) {
                         .map((s) => s.trim())
                         .filter(Boolean);
                     sels.forEach((sel) => n.querySelectorAll(sel).forEach((el) => {
-                        if (el[INST])
+                        if (el[INST]) {
                             return;
+                        }
                         inViewport(el) ? mount(el, moduleMap[key]) : io.observe(el);
                     }));
                 }
             });
             // Removed nodes → unmount if needed
             m.removedNodes.forEach((n) => {
-                if (!(n instanceof HTMLElement))
+                if (!(n instanceof HTMLElement)) {
                     return;
-                if (n[INST])
+                }
+                if (n[INST]) {
                     unmount(n);
+                }
                 n.querySelectorAll('*').forEach((el) => el[INST] && unmount(el));
             });
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vettvangur/framework",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "type": "module",
   "access": "public",
   "author": "Vettvangur",