uikit 3.16.4-dev.fd2458e3b → 3.16.5-dev.dda1f1b31

package/src/js/api/hooks.js

@@ -1,126 +1,47 @@
-import { assign, fastdom, hasOwn, isEqual, isPlainObject } from 'uikit-util';
-
-export default function (UIkit) {
-    UIkit.prototype._callHook = function (hook) {
-        this.$options[hook]?.forEach((handler) => handler.call(this));
-    };
-
-    UIkit.prototype._callConnected = function () {
-        if (this._connected) {
-            return;
-        }
-
-        this._data = {};
-        this._computed = {};
-
-        this._initProps();
-
-        this._callHook('beforeConnect');
-        this._connected = true;
-
-        this._initEvents();
-        this._initObservers();
-
-        this._callHook('connected');
-        this._callUpdate();
-    };
-
-    UIkit.prototype._callDisconnected = function () {
-        if (!this._connected) {
-            return;
-        }
-
-        this._callHook('beforeDisconnect');
-        this._disconnectObservers();
-        this._unbindEvents();
-        this._callHook('disconnected');
-
-        this._connected = false;
-        delete this._watch;
-    };
-
-    UIkit.prototype._callUpdate = function (e = 'update') {
-        if (!this._connected) {
-            return;
-        }
-
-        if (e === 'update' || e === 'resize') {
-            this._callWatches();
-        }
-
-        if (!this.$options.update) {
-            return;
-        }
-
-        if (!this._updates) {
-            this._updates = new Set();
-            fastdom.read(() => {
-                if (this._connected) {
-                    runUpdates.call(this, this._updates);
-                }
-                delete this._updates;
-            });
-        }
+import { log } from './log';
+import { callUpdate, initUpdateObserver } from './update';
+import { initEvents, unbindEvents } from './events';
+import { initProps, initPropsObserver } from './props';
+import { disconnectObservers, initObservers } from './observer';
+
+export function callHook(instance, hook) {
+    DEBUG && log(instance, hook);
+    instance.$options[hook]?.forEach((handler) => handler.call(instance));
+}
 
-        this._updates.add(e.type || e);
-    };
+export function callConnected(instance) {
+    if (instance._connected) {
+        return;
+    }
 
-    UIkit.prototype._callWatches = function () {
-        if (this._watch) {
-            return;
-        }
+    instance._data = {};
+    instance._computed = {};
 
-        const initial = !hasOwn(this, '_watch');
+    initProps(instance);
 
-        this._watch = fastdom.read(() => {
-            if (this._connected) {
-                runWatches.call(this, initial);
-            }
-            this._watch = null;
-        });
-    };
+    callHook(instance, 'beforeConnect');
+    instance._connected = true;
 
-    function runUpdates(types) {
-        for (const { read, write, events = [] } of this.$options.update) {
-            if (!types.has('update') && !events.some((type) => types.has(type))) {
-                continue;
-            }
+    initEvents(instance);
 
-            let result;
-            if (read) {
-                result = read.call(this, this._data, types);
+    initObservers(instance);
+    initPropsObserver(instance);
+    initUpdateObserver(instance);
 
-                if (result && isPlainObject(result)) {
-                    assign(this._data, result);
-                }
-            }
+    callHook(instance, 'connected');
+    callUpdate(instance);
+}
 
-            if (write && result !== false) {
-                fastdom.write(() => {
-                    if (this._connected) {
-                        write.call(this, this._data, types);
-                    }
-                });
-            }
-        }
+export function callDisconnected(instance) {
+    if (!instance._connected) {
+        return;
     }
 
-    function runWatches(initial) {
-        const {
-            $options: { computed },
-        } = this;
-        const values = { ...this._computed };
-        this._computed = {};
+    callHook(instance, 'beforeDisconnect');
+    disconnectObservers(instance);
+    unbindEvents(instance);
+    callHook(instance, 'disconnected');
 
-        for (const key in computed) {
-            const { watch, immediate } = computed[key];
-            if (
-                watch &&
-                ((initial && immediate) ||
-                    (hasOwn(values, key) && !isEqual(values[key], this[key])))
-            ) {
-                watch.call(this, this[key], values[key]);
-            }
-        }
-    }
+    instance._connected = false;
+    delete instance._watch;
 }

package/src/js/api/index.js

@@ -1,24 +1,8 @@
-import globalAPI from './global';
-import hooksAPI from './hooks';
-import stateAPI from './state';
-import instanceAPI from './instance';
-import componentAPI from './component';
-import * as util from 'uikit-util';
-
-const UIkit = function (options) {
-    this._init(options);
-};
-
-UIkit.util = util;
-UIkit.data = '__uikit__';
-UIkit.prefix = 'uk-';
-UIkit.options = {};
-UIkit.version = VERSION;
-
-globalAPI(UIkit);
-hooksAPI(UIkit);
-stateAPI(UIkit);
-componentAPI(UIkit);
-instanceAPI(UIkit);
-
-export default UIkit;
+import App from './app';
+import './component';
+import './global';
+import './hooks';
+import './state';
+import './instance';
+
+export default App;

package/src/js/api/instance.js

@@ -1,74 +1,74 @@
-import { isEmpty, remove, within } from 'uikit-util';
+import App from './app';
+import { update } from './global';
+import { callUpdate } from './update';
+import { $, remove, within } from '../util';
+import { callConnected, callDisconnected, callHook } from './hooks';
+import { attachToElement, createComponent, detachFromElement, getComponent } from './component';
 
-export default function (UIkit) {
-    const DATA = UIkit.data;
+App.prototype.$mount = function (el) {
+    const instance = this;
+    attachToElement(el, instance);
 
-    UIkit.prototype.$create = function (component, element, data) {
-        return UIkit[component](element, data);
-    };
+    instance.$options.el = el;
 
-    UIkit.prototype.$mount = function (el) {
-        const { name } = this.$options;
+    if (within(el, document)) {
+        callConnected(instance);
+    }
+};
 
-        if (!el[DATA]) {
-            el[DATA] = {};
-        }
+App.prototype.$destroy = function (removeEl = false) {
+    const instance = this;
+    const { el } = instance.$options;
 
-        if (el[DATA][name]) {
-            return;
-        }
+    if (el) {
+        callDisconnected(instance);
+    }
 
-        el[DATA][name] = this;
+    callHook(instance, 'destroy');
 
-        this.$el = this.$options.el = this.$options.el || el;
+    detachFromElement(el, instance);
 
-        if (within(el, document)) {
-            this._callConnected();
-        }
-    };
+    if (removeEl) {
+        remove(instance.$el);
+    }
+};
 
-    UIkit.prototype.$reset = function () {
-        this._callDisconnected();
-        this._callConnected();
-    };
+App.prototype.$create = createComponent;
+App.prototype.$emit = function (e) {
+    callUpdate(this, e);
+};
 
-    UIkit.prototype.$destroy = function (removeEl = false) {
-        const { el, name } = this.$options;
+App.prototype.$update = function (element = this.$el, e) {
+    update(element, e);
+};
 
-        if (el) {
-            this._callDisconnected();
-        }
+App.prototype.$reset = function () {
+    callDisconnected(this);
+    callConnected(this);
+};
 
-        this._callHook('destroy');
+App.prototype.$getComponent = getComponent;
 
-        if (!el?.[DATA]) {
-            return;
-        }
+Object.defineProperties(App.prototype, {
+    $el: {
+        get() {
+            return this.$options.el;
+        },
+    },
 
-        delete el[DATA][name];
+    $container: Object.getOwnPropertyDescriptor(App, 'container'),
+});
 
-        if (!isEmpty(el[DATA])) {
-            delete el[DATA];
-        }
+export function generateId(instance, el = instance.$el, postfix = '') {
+    if (el.id) {
+        return el.id;
+    }
 
-        if (removeEl) {
-            remove(this.$el);
-        }
-    };
+    let id = `${instance.$options.id}-${instance._uid}${postfix}`;
 
-    UIkit.prototype.$emit = function (e) {
-        this._callUpdate(e);
-    };
+    if ($(`#${id}`)) {
+        id = generateId(instance, el, `${postfix}-2`);
+    }
 
-    UIkit.prototype.$update = function (element = this.$el, e) {
-        UIkit.update(element, e);
-    };
-
-    UIkit.prototype.$getComponent = UIkit.getComponent;
-
-    Object.defineProperty(
-        UIkit.prototype,
-        '$container',
-        Object.getOwnPropertyDescriptor(UIkit, 'container')
-    );
+    return id;
 }

package/src/js/api/log.js

@@ -0,0 +1,10 @@
+export function log(instance, eventName, eventData) {
+    console.log(
+        `🔔 %s:%d %c%s`,
+        instance.$options.name,
+        instance._uid,
+        'font-weight:bold;',
+        eventName,
+        [...(eventData ?? []), instance, instance.$el]
+    );
+}

package/src/js/api/observables.js

@@ -0,0 +1,125 @@
+import {
+    $$,
+    getEventPos,
+    isFunction,
+    isTouch,
+    noop,
+    observeIntersection,
+    observeMutation,
+    observeResize,
+    on,
+    once,
+    parent,
+    pointerCancel,
+    pointerDown,
+    pointerUp,
+    removeAttr,
+    toNodes,
+    trigger,
+} from '../util';
+
+export function resize(options) {
+    return observe(observeResize, options, 'resize');
+}
+
+export function intersection(options) {
+    return observe(observeIntersection, options);
+}
+
+export function mutation(options) {
+    return observe(observeMutation, options);
+}
+
+export function lazyload(options = {}) {
+    return intersection({
+        handler: function (entries, observer) {
+            const { targets = this.$el, preload = 5 } = options;
+            for (const el of toNodes(isFunction(targets) ? targets(this) : targets)) {
+                $$('[loading="lazy"]', el)
+                    .slice(0, preload - 1)
+                    .forEach((el) => removeAttr(el, 'loading'));
+            }
+
+            for (const el of entries
+                .filter(({ isIntersecting }) => isIntersecting)
+                .map(({ target }) => target)) {
+                observer.unobserve(el);
+            }
+        },
+        ...options,
+    });
+}
+
+export function scroll(options) {
+    return observe(
+        function (target, handler) {
+            return {
+                disconnect: on(target, 'scroll', handler, {
+                    passive: true,
+                    capture: true,
+                }),
+            };
+        },
+        {
+            target: window,
+            ...options,
+        },
+        'scroll'
+    );
+}
+
+export function swipe(options) {
+    return {
+        observe(target, handler) {
+            return {
+                observe: noop,
+                unobserve: noop,
+                disconnect: on(target, pointerDown, handler, { passive: true }),
+            };
+        },
+        handler(e) {
+            if (!isTouch(e)) {
+                return;
+            }
+
+            // Handle Swipe Gesture
+            const pos = getEventPos(e);
+            const target = 'tagName' in e.target ? e.target : parent(e.target);
+            once(document, `${pointerUp} ${pointerCancel} scroll`, (e) => {
+                const { x, y } = getEventPos(e);
+
+                // swipe
+                if (
+                    (e.type !== 'scroll' && target && x && Math.abs(pos.x - x) > 100) ||
+                    (y && Math.abs(pos.y - y) > 100)
+                ) {
+                    setTimeout(() => {
+                        trigger(target, 'swipe');
+                        trigger(target, `swipe${swipeDirection(pos.x, pos.y, x, y)}`);
+                    });
+                }
+            });
+        },
+        ...options,
+    };
+}
+
+function observe(observe, options, emit) {
+    return {
+        observe,
+        handler() {
+            this.$emit(emit);
+        },
+        ...options,
+    };
+}
+
+function swipeDirection(x1, y1, x2, y2) {
+    return Math.abs(x1 - x2) >= Math.abs(y1 - y2)
+        ? x1 - x2 > 0
+            ? 'Left'
+            : 'Right'
+        : y1 - y2 > 0
+        ? 'Up'
+        : 'Down';
+}

package/src/js/api/observer.js

@@ -0,0 +1,76 @@
+import { hasOwn, includes, isArray, isEqual, isFunction, isPlainObject, isString } from '../util';
+
+export function initObservers(instance) {
+    instance._observers = [];
+    instance._observerUpdates = new Map();
+    for (const observer of instance.$options.observe || []) {
+        if (hasOwn(observer, 'handler')) {
+            registerObservable(instance, observer);
+        } else {
+            for (const key in observer) {
+                registerObservable(instance, observer[key], key);
+            }
+        }
+    }
+}
+
+export function registerObserver(instance, ...observer) {
+    instance._observers.push(...observer);
+}
+
+export function disconnectObservers(instance) {
+    for (const observer of instance._observers) {
+        observer?.disconnect();
+        instance._observerUpdates.delete(observer);
+    }
+}
+
+export function callObserverUpdates(instance) {
+    for (const [observer, update] of instance._observerUpdates) {
+        update(observer);
+    }
+}
+
+function registerObservable(instance, observable, key) {
+    let {
+        observe,
+        target = instance.$el,
+        handler,
+        options,
+        filter,
+        args,
+    } = isPlainObject(observable) ? observable : { type: key, handler: observable };
+
+    if (filter && !filter.call(instance, instance)) {
+        return;
+    }
+
+    const targets = isFunction(target) ? target.call(instance, instance) : target;
+    handler = isString(handler) ? instance[handler] : handler.bind(instance);
+
+    if (isFunction(options)) {
+        options = options.call(instance, instance);
+    }
+
+    const observer = observe(targets, handler, options, args);
+
+    if (isFunction(target) && isArray(targets) && observer.unobserve) {
+        instance._observerUpdates.set(observer, watchChange(instance, target, targets));
+    }
+
+    registerObserver(instance, observer);
+}
+
+function watchChange(instance, targetFn, targets) {
+    return (observer) => {
+        const newTargets = targetFn.call(instance, instance);
+
+        if (isEqual(targets, newTargets)) {
+            return;
+        }
+
+        targets.forEach((target) => !includes(newTargets, target) && observer.unobserve(target));
+        newTargets.forEach((target) => !includes(targets, target) && observer.observe(target));
+        targets.splice(0, targets.length, ...newTargets);
+    };
+}

package/src/js/{util → api}/options.js

@@ -1,8 +1,21 @@
-import { hasOwn, includes, isArray, isFunction, isUndefined, sortBy, startsWith } from './lang';
+import {
+    hasOwn,
+    includes,
+    isArray,
+    isFunction,
+    isNumeric,
+    isString,
+    isUndefined,
+    sortBy,
+    startsWith,
+    toBoolean,
+    toNumber,
+} from '../util';
 
 const strats = {};
 
 strats.events =
+    strats.observe =
     strats.created =
     strats.beforeConnect =
     strats.connected =
@@ -139,3 +152,27 @@ export function parseOptions(options, args = []) {
         return {};
     }
 }
+
+export function coerce(type, value) {
+    if (type === Boolean) {
+        return toBoolean(value);
+    } else if (type === Number) {
+        return toNumber(value);
+    } else if (type === 'list') {
+        return toList(value);
+    } else if (type === Object && isString(value)) {
+        return parseOptions(value);
+    }
+
+    return type ? type(value) : value;
+}
+
+function toList(value) {
+    return isArray(value)
+        ? value
+        : isString(value)
+        ? value
+              .split(/,(?![^(]*\))/)
+              .map((value) => (isNumeric(value) ? toNumber(value) : toBoolean(value.trim())))
+        : [value];
+}

package/src/js/api/props.js

@@ -0,0 +1,102 @@
+import { registerObserver } from './observer';
+import { coerce, parseOptions } from './options';
+import {
+    camelize,
+    data as getData,
+    hasOwn,
+    hyphenate,
+    isArray,
+    isUndefined,
+    startsWith,
+} from '../util';
+
+export function initProps(instance) {
+    const props = getProps(instance.$options);
+
+    for (let key in props) {
+        if (!isUndefined(props[key])) {
+            instance.$props[key] = props[key];
+        }
+    }
+
+    const exclude = [instance.$options.computed, instance.$options.methods];
+    for (let key in instance.$props) {
+        if (key in props && notIn(exclude, key)) {
+            instance[key] = instance.$props[key];
+        }
+    }
+}
+
+export function getProps(opts) {
+    const data = {};
+    const { args = [], props = {}, el, id } = opts;
+
+    if (!props) {
+        return data;
+    }
+
+    for (const key in props) {
+        const prop = hyphenate(key);
+        let value = getData(el, prop);
+
+        if (isUndefined(value)) {
+            continue;
+        }
+
+        value = props[key] === Boolean && value === '' ? true : coerce(props[key], value);
+
+        if (prop === 'target' && startsWith(value, '_')) {
+            continue;
+        }
+
+        data[key] = value;
+    }
+
+    const options = parseOptions(getData(el, id), args);
+
+    for (const key in options) {
+        const prop = camelize(key);
+        if (!isUndefined(props[prop])) {
+            data[prop] = coerce(props[prop], options[key]);
+        }
+    }
+
+    return data;
+}
+
+function notIn(options, key) {
+    return options.every((arr) => !arr || !hasOwn(arr, key));
+}
+
+export function initPropsObserver(instance) {
+    const { $options, $props } = instance;
+    const { id, attrs, props, el } = $options;
+
+    if (!props || attrs === false) {
+        return;
+    }
+
+    const attributes = isArray(attrs) ? attrs : Object.keys(props);
+    const filter = attributes.map((key) => hyphenate(key)).concat(id);
+
+    const observer = new MutationObserver((records) => {
+        const data = getProps($options);
+        if (
+            records.some(({ attributeName }) => {
+                const prop = attributeName.replace('data-', '');
+                return (prop === id ? attributes : [camelize(prop), camelize(attributeName)]).some(
+                    (prop) => !isUndefined(data[prop]) && data[prop] !== $props[prop]
+                );
+            })
+        ) {
+            instance.$reset();
+        }
+    });
+
+    observer.observe(el, {
+        attributes: true,
+        attributeFilter: filter.concat(filter.map((key) => `data-${key}`)),
+    });
+
+    registerObserver(instance, observer);
+}