uikit 3.16.10 → 3.16.11-dev.55a0fc5b5

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.16.10",
+  "version": "3.16.11-dev.55a0fc5b5",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/api/computed.js

@@ -12,7 +12,13 @@ export function initComputed(instance) {
     }
 }
 
-function registerComputed(instance, key, cb) {
+export function resetComputed(instance) {
+    const values = { ...instance._computed };
+    instance._computed = {};
+    return values;
+}
+
+export function registerComputed(instance, key, cb) {
     Object.defineProperty(instance, key, {
         enumerable: true,
 

package/src/js/api/hooks.js

@@ -1,8 +1,9 @@
 import { log } from './log';
-import { callUpdate, initUpdateObserver } from './update';
+import { initWatches } from './watch';
+import { callUpdate, initUpdates } from './update';
 import { initEvents, unbindEvents } from './events';
 import { initProps, initPropsObserver } from './props';
-import { disconnectObservers, initObservers } from './observer';
+import { disconnectObservers, initObservers, initWatchObserver } from './observer';
 
 export function callHook(instance, hook) {
     LOG && log(instance, hook);
@@ -23,10 +24,12 @@ export function callConnected(instance) {
     instance._connected = true;
 
     initEvents(instance);
-
+    initUpdates(instance);
+    initWatches(instance);
     initObservers(instance);
+
     initPropsObserver(instance);
-    initUpdateObserver(instance);
+    initWatchObserver(instance);
 
     callHook(instance, 'connected');
     callUpdate(instance);

package/src/js/api/observer.js

@@ -1,22 +1,15 @@
-import {
-    hasOwn,
-    includes,
-    isArray,
-    isEqual,
-    isFunction,
-    isPlainObject,
-    isString,
-} from 'uikit-util';
+import { registerComputed } from './computed';
+import { callWatches, registerWatch } from './watch';
+import { hasOwn, includes, isArray, isFunction, isString } from 'uikit-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);
+            for (const observable of observer) {
+                registerObservable(instance, observable);
             }
         }
     }
@@ -28,57 +21,65 @@ export function registerObserver(instance, ...observer) {
 
 export function disconnectObservers(instance) {
     for (const observer of instance._observers) {
-        observer?.disconnect();
-        instance._observerUpdates.delete(observer);
+        observer.disconnect();
     }
 }
 
-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 };
+function registerObservable(instance, observable) {
+    let { observe, target = instance.$el, handler, options, filter, args } = observable;
 
     if (filter && !filter.call(instance, instance)) {
         return;
     }
 
-    const targets = isFunction(target) ? target.call(instance, instance) : target;
+    const key = `_observe${instance._observers.length}`;
+    if (isFunction(target) && !(key in instance)) {
+        registerComputed(instance, key, () => target.call(instance, instance));
+        target = instance[key];
+    }
+
     handler = isString(handler) ? instance[handler] : handler.bind(instance);
 
     if (isFunction(options)) {
         options = options.call(instance, instance);
     }
 
-    const observer = observe(targets, handler, options, args);
+    const observer = observe(target, handler, options, args);
+
+    if (isFunction(target) && isArray(instance[key]) && observer.unobserve) {
+        registerWatch(
+            instance,
+            {
+                handler(targets, prev) {
+                    for (const target of prev) {
+                        !includes(targets, target) && observer.unobserve(target);
+                    }
 
-    if (isFunction(target) && isArray(targets) && observer.unobserve) {
-        instance._observerUpdates.set(observer, watchChange(instance, target, targets));
+                    for (const target of targets) {
+                        !includes(prev, target) && observer.observe(target);
+                    }
+                },
+                immediate: false,
+            },
+            key
+        );
     }
 
     registerObserver(instance, observer);
 }
 
-function watchChange(instance, targetFn, targets) {
-    return (observer) => {
-        const newTargets = targetFn.call(instance, instance);
+export function initWatchObserver(instance) {
+    let { el, computed } = instance.$options;
 
-        if (isEqual(targets, newTargets)) {
-            return;
-        }
+    if (!computed && !instance._watches) {
+        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);
-    };
+    const observer = new MutationObserver(() => callWatches(instance));
+    observer.observe(instance._observeTarget || el, {
+        childList: true,
+        subtree: true,
+    });
+
+    registerObserver(instance, observer);
 }

package/src/js/api/options.js

@@ -15,6 +15,7 @@ import {
 const strats = {};
 
 strats.events =
+    strats.watch =
     strats.observe =
     strats.created =
     strats.beforeConnect =

package/src/js/api/update.js

@@ -1,35 +1,37 @@
-import { registerObserver } from './observer';
-import { callWatches } from './watch';
-import { assign, fastdom, isFunction, isPlainObject } from 'uikit-util';
+import { assign, fastdom, isPlainObject } from 'uikit-util';
+
+export function initUpdates(instance) {
+    instance._updates = [...(instance.$options.update || [])];
+}
+
+export function prependUpdate(instance, update) {
+    instance._updates.unshift(update);
+}
 
 export function callUpdate(instance, e = 'update') {
     if (!instance._connected) {
         return;
     }
 
-    if (e === 'update' || e === 'resize') {
-        callWatches(instance);
-    }
-
     if (!instance.$options.update) {
         return;
     }
 
-    if (!instance._updates) {
-        instance._updates = new Set();
+    if (!instance._queued) {
+        instance._queued = new Set();
         fastdom.read(() => {
             if (instance._connected) {
-                runUpdates(instance, instance._updates);
+                runUpdates(instance, instance._queued);
             }
-            delete instance._updates;
+            delete instance._queued;
         });
     }
 
-    instance._updates.add(e.type || e);
+    instance._queued.add(e.type || e);
 }
 
 function runUpdates(instance, types) {
-    for (const { read, write, events = [] } of instance.$options.update) {
+    for (const { read, write, events = [] } of instance._updates) {
         if (!types.has('update') && !events.some((type) => types.has(type))) {
             continue;
         }
@@ -52,26 +54,3 @@ function runUpdates(instance, types) {
         }
     }
 }
-
-export function initUpdateObserver(instance) {
-    let { el, computed, observe } = instance.$options;
-
-    if (!computed && !observe?.some((options) => isFunction(options.target))) {
-        return;
-    }
-
-    for (const key in computed || {}) {
-        if (computed[key].document) {
-            el = el.ownerDocument;
-            break;
-        }
-    }
-
-    const observer = new MutationObserver(() => callWatches(instance));
-    observer.observe(el, {
-        childList: true,
-        subtree: true,
-    });
-
-    registerObserver(instance, observer);
-}

package/src/js/api/watch.js

@@ -1,34 +1,47 @@
-import { fastdom, hasOwn, isEqual } from 'uikit-util';
-import { callObserverUpdates } from './observer';
+import { resetComputed } from './computed';
+import { prependUpdate } from './update';
+import { hasOwn, isEqual, isPlainObject } from 'uikit-util';
+
+export function initWatches(instance) {
+    instance._watches = [];
+    for (const watches of instance.$options.watch || []) {
+        for (const [name, watch] of Object.entries(watches)) {
+            registerWatch(instance, watch, name);
+        }
+    }
+    instance._initial = true;
+    prependUpdate(instance, { read: () => callWatches(instance), events: ['resize'] });
+}
+
+export function registerWatch(instance, watch, name) {
+    instance._watches.push({
+        name,
+        ...(isPlainObject(watch) ? watch : { handler: watch }),
+    });
+
+    if (watch.document) {
+        instance._observeTarget = instance.$options.el.ownerDocumentocument;
+    }
+}
 
 export function callWatches(instance) {
-    if (instance._watch) {
+    if (!instance._connected) {
         return;
     }
 
-    const initial = !hasOwn(instance, '_watch');
-
-    instance._watch = fastdom.read(() => {
-        if (instance._connected) {
-            runWatches(instance, initial);
-        }
-        instance._watch = null;
-    }, true);
+    runWatches(instance, instance._initial);
+    instance._initial = false;
 }
 
 function runWatches(instance, initial) {
-    const values = { ...instance._computed };
-    instance._computed = {};
+    const values = resetComputed(instance);
 
-    for (const [key, { watch, immediate }] of Object.entries(instance.$options.computed || {})) {
+    for (const { name, handler, immediate = true } of instance._watches) {
         if (
-            watch &&
-            ((initial && immediate) ||
-                (hasOwn(values, key) && !isEqual(values[key], instance[key])))
+            (initial && immediate) ||
+            (hasOwn(values, name) && !isEqual(values[name], instance[name]))
         ) {
-            watch.call(instance, instance[key], initial ? undefined : values[key]);
+            handler.call(instance, instance[name], initial ? undefined : values[name]);
         }
     }
-
-    callObserverUpdates(instance);
 }

package/src/js/components/filter.js

@@ -42,41 +42,35 @@ export default {
     },
 
     computed: {
-        toggles: {
-            get({ attrItem }, $el) {
-                return $$(`[${attrItem}],[data-${attrItem}]`, $el);
-            },
-
-            watch(toggles) {
-                this.updateState();
-
-                const actives = $$(this.selActive, this.$el);
-                for (const toggle of toggles) {
-                    if (this.selActive !== false) {
-                        toggleClass(toggle, this.cls, includes(actives, toggle));
-                    }
-                    const button = findButton(toggle);
-                    if (isTag(button, 'a')) {
-                        attr(button, 'role', 'button');
-                    }
-                }
-            },
+        toggles({ attrItem }, $el) {
+            return $$(`[${attrItem}],[data-${attrItem}]`, $el);
+        },
 
-            immediate: true,
+        children({ target }, $el) {
+            return $$(`${target} > *`, $el);
         },
+    },
 
-        children: {
-            get({ target }, $el) {
-                return $$(`${target} > *`, $el);
-            },
+    watch: {
+        toggles(toggles) {
+            this.updateState();
 
-            watch(list, prev) {
-                if (prev) {
-                    this.updateState();
+            const actives = $$(this.selActive, this.$el);
+            for (const toggle of toggles) {
+                if (this.selActive !== false) {
+                    toggleClass(toggle, this.cls, includes(actives, toggle));
                 }
-            },
+                const button = findButton(toggle);
+                if (isTag(button, 'a')) {
+                    attr(button, 'role', 'button');
+                }
+            }
+        },
 
-            immediate: true,
+        children(list, prev) {
+            if (prev) {
+                this.updateState();
+            }
         },
     },
 

package/src/js/components/lightbox.js

@@ -10,21 +10,19 @@ export default {
     data: { toggle: 'a' },
 
     computed: {
-        toggles: {
-            get({ toggle }, $el) {
-                return $$(toggle, $el);
-            },
-
-            watch(toggles) {
-                this.hide();
-                for (const toggle of toggles) {
-                    if (isTag(toggle, 'a')) {
-                        attr(toggle, 'role', 'button');
-                    }
-                }
-            },
+        toggles({ toggle }, $el) {
+            return $$(toggle, $el);
+        },
+    },
 
-            immediate: true,
+    watch: {
+        toggles(toggles) {
+            this.hide();
+            for (const toggle of toggles) {
+                if (isTag(toggle, 'a')) {
+                    attr(toggle, 'role', 'button');
+                }
+            }
         },
     },
 

package/src/js/components/sortable.js

@@ -92,29 +92,23 @@ export default {
             return children(this.target);
         },
 
-        isEmpty: {
-            get() {
-                return isEmpty(this.items);
-            },
-
-            watch(empty) {
-                toggleClass(this.target, this.clsEmpty, empty);
-            },
-
-            immediate: true,
+        isEmpty() {
+            return isEmpty(this.items);
         },
 
-        handles: {
-            get({ handle }, el) {
-                return handle ? $$(handle, el) : this.items;
-            },
+        handles({ handle }, el) {
+            return handle ? $$(handle, el) : this.items;
+        },
+    },
 
-            watch(handles, prev) {
-                css(prev, { touchAction: '', userSelect: '' });
-                css(handles, { touchAction: hasTouch ? 'none' : '', userSelect: 'none' }); // touchAction set to 'none' causes a performance drop in Chrome 80
-            },
+    watch: {
+        isEmpty(empty) {
+            toggleClass(this.target, this.clsEmpty, empty);
+        },
 
-            immediate: true,
+        handles(handles, prev) {
+            css(prev, { touchAction: '', userSelect: '' });
+            css(handles, { touchAction: hasTouch ? 'none' : '', userSelect: 'none' }); // touchAction set to 'none' causes a performance drop in Chrome 80
         },
     },
 

package/src/js/core/accordion.js

@@ -53,61 +53,48 @@ export default {
     },
 
     computed: {
-        items: {
-            get({ targets }, $el) {
-                return $$(targets, $el);
-            },
-
-            watch(items, prev) {
-                if (prev || hasClass(items, this.clsOpen)) {
-                    return;
-                }
-
-                const active =
-                    (this.active !== false && items[Number(this.active)]) ||
-                    (!this.collapsible && items[0]);
+        items({ targets }, $el) {
+            return $$(targets, $el);
+        },
 
-                if (active) {
-                    this.toggle(active, false);
-                }
-            },
+        toggles({ toggle }) {
+            return this.items.map((item) => $(toggle, item));
+        },
 
-            immediate: true,
+        contents({ content }) {
+            return this.items.map((item) => item._wrapper?.firstElementChild || $(content, item));
         },
+    },
 
-        toggles: {
-            get({ toggle }) {
-                return this.items.map((item) => $(toggle, item));
-            },
+    watch: {
+        items(items, prev) {
+            if (prev || hasClass(items, this.clsOpen)) {
+                return;
+            }
 
-            watch() {
-                this.$emit();
-            },
+            const active =
+                (this.active !== false && items[Number(this.active)]) ||
+                (!this.collapsible && items[0]);
 
-            immediate: true,
+            if (active) {
+                this.toggle(active, false);
+            }
         },
 
-        contents: {
-            get({ content }) {
-                return this.items.map(
-                    (item) => item._wrapper?.firstElementChild || $(content, item)
-                );
-            },
+        toggles() {
+            this.$emit();
+        },
 
-            watch(items) {
-                for (const el of items) {
-                    hide(
-                        el,
-                        !hasClass(
-                            this.items.find((item) => within(el, item)),
-                            this.clsOpen
-                        )
-                    );
-                }
-                this.$emit();
-            },
+        contents(items) {
+            for (const el of items) {
+                const isOpen = hasClass(
+                    this.items.find((item) => within(el, item)),
+                    this.clsOpen
+                );
 
-            immediate: true,
+                hide(el, !isOpen);
+            }
+            this.$emit();
         },
     },