@frankenstyle/uikit 0.0.1

package/src/js/api/observables.js

@@ -0,0 +1,132 @@
+import {
+    $$,
+    getEventPos,
+    isFunction,
+    isTouch,
+    noop,
+    observeIntersection,
+    observeMutation,
+    observeResize,
+    observeViewportResize,
+    on,
+    once,
+    parent,
+    pointerCancel,
+    pointerDown,
+    pointerUp,
+    removeAttr,
+    scrollParent,
+    toNodes,
+    trigger,
+} from 'uikit-util';
+import { callUpdate } from './update';
+
+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 viewport(options) {
+    return observe((target, handler) => observeViewportResize(handler), options, 'resize');
+}
+
+export function scroll(options) {
+    return observe(
+        (target, handler) => ({
+            disconnect: on(toScrollTargets(target), 'scroll', handler, { passive: true }),
+        }),
+        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() {
+            callUpdate(this, 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';
+}
+
+function toScrollTargets(elements) {
+    return toNodes(elements).map((node) => {
+        const { ownerDocument } = node;
+        const parent = scrollParent(node, true);
+        return parent === ownerDocument.scrollingElement ? ownerDocument : parent;
+    });
+}

package/src/js/api/observer.js

@@ -0,0 +1,64 @@
+import { hasOwn, includes, isArray, isFunction, isString, toNodes } from 'uikit-util';
+import { registerComputed } from './computed';
+import { registerWatch } from './watch';
+
+export function initObservers(instance) {
+    for (const observer of instance.$options.observe || []) {
+        registerObservable(instance, observer);
+    }
+}
+
+function registerObservable(instance, observable) {
+    let { observe, target = instance.$el, handler, options, filter, args } = observable;
+
+    if (filter && !filter.call(instance, instance)) {
+        return;
+    }
+
+    const key = `_observe${instance._disconnect.length}`;
+    if (isFunction(target) && !hasOwn(instance, key)) {
+        registerComputed(instance, key, () => {
+            const targets = target.call(instance, instance);
+            return isArray(targets) ? toNodes(targets) : targets;
+        });
+    }
+
+    handler = isString(handler) ? instance[handler] : handler.bind(instance);
+
+    if (isFunction(options)) {
+        options = options.call(instance, instance);
+    }
+
+    const targets = hasOwn(instance, key) ? instance[key] : target;
+    const observer = observe(targets, handler, options, args);
+
+    if (isFunction(target) && isArray(instance[key])) {
+        registerWatch(
+            instance,
+            { handler: updateTargets(observer, options), immediate: false },
+            key,
+        );
+    }
+
+    instance._disconnect.push(() => observer.disconnect());
+}
+
+function updateTargets(observer, options) {
+    return (targets, prev) => {
+        for (const target of prev) {
+            if (!includes(targets, target)) {
+                if (observer.unobserve) {
+                    observer.unobserve(target);
+                } else if (observer.observe) {
+                    observer.disconnect();
+                }
+            }
+        }
+
+        for (const target of targets) {
+            if (!includes(prev, target) || !observer.unobserve) {
+                observer.observe(target, options);
+            }
+        }
+    };
+}

package/src/js/api/options.js

@@ -0,0 +1,180 @@
+import {
+    hasOwn,
+    includes,
+    isArray,
+    isFunction,
+    isNumeric,
+    isString,
+    isUndefined,
+    sortBy,
+    startsWith,
+    toBoolean,
+    toNumber,
+} from 'uikit-util';
+
+const strats = {};
+
+strats.events =
+    strats.watch =
+    strats.observe =
+    strats.created =
+    strats.beforeConnect =
+    strats.connected =
+    strats.beforeDisconnect =
+    strats.disconnected =
+    strats.destroy =
+        concatStrat;
+
+// args strategy
+strats.args = function (parentVal, childVal) {
+    return childVal !== false && concatStrat(childVal || parentVal);
+};
+
+// update strategy
+strats.update = function (parentVal, childVal) {
+    return sortBy(
+        concatStrat(parentVal, isFunction(childVal) ? { read: childVal } : childVal),
+        'order',
+    );
+};
+
+// property strategy
+strats.props = function (parentVal, childVal) {
+    if (isArray(childVal)) {
+        const value = {};
+        for (const key of childVal) {
+            value[key] = String;
+        }
+        childVal = value;
+    }
+
+    return strats.methods(parentVal, childVal);
+};
+
+// extend strategy
+strats.computed = strats.methods = function (parentVal, childVal) {
+    return childVal ? (parentVal ? { ...parentVal, ...childVal } : childVal) : parentVal;
+};
+
+// data strategy
+strats.i18n = strats.data = function (parentVal, childVal, vm) {
+    if (!vm) {
+        if (!childVal) {
+            return parentVal;
+        }
+
+        if (!parentVal) {
+            return childVal;
+        }
+
+        return function (vm) {
+            return mergeFnData(parentVal, childVal, vm);
+        };
+    }
+
+    return mergeFnData(parentVal, childVal, vm);
+};
+
+function mergeFnData(parentVal, childVal, vm) {
+    return strats.computed(
+        isFunction(parentVal) ? parentVal.call(vm, vm) : parentVal,
+        isFunction(childVal) ? childVal.call(vm, vm) : childVal,
+    );
+}
+
+// concat strategy
+function concatStrat(parentVal, childVal) {
+    parentVal = parentVal && !isArray(parentVal) ? [parentVal] : parentVal;
+
+    return childVal
+        ? parentVal
+            ? parentVal.concat(childVal)
+            : isArray(childVal)
+              ? childVal
+              : [childVal]
+        : parentVal;
+}
+
+// default strategy
+function defaultStrat(parentVal, childVal) {
+    return isUndefined(childVal) ? parentVal : childVal;
+}
+
+export function mergeOptions(parent, child, vm) {
+    const options = {};
+
+    if (isFunction(child)) {
+        child = child.options;
+    }
+
+    if (child.extends) {
+        parent = mergeOptions(parent, child.extends, vm);
+    }
+
+    if (child.mixins) {
+        for (const mixin of child.mixins) {
+            parent = mergeOptions(parent, mixin, vm);
+        }
+    }
+
+    for (const key in parent) {
+        mergeKey(key);
+    }
+
+    for (const key in child) {
+        if (!hasOwn(parent, key)) {
+            mergeKey(key);
+        }
+    }
+
+    function mergeKey(key) {
+        options[key] = (strats[key] || defaultStrat)(parent[key], child[key], vm);
+    }
+
+    return options;
+}
+
+export function parseOptions(options, args = []) {
+    try {
+        return options
+            ? startsWith(options, '{')
+                ? JSON.parse(options)
+                : args.length && !includes(options, ':')
+                  ? { [args[0]]: options }
+                  : options.split(';').reduce((options, option) => {
+                        const [key, value] = option.split(/:(.*)/);
+                        if (key && !isUndefined(value)) {
+                            options[key.trim()] = value.trim();
+                        }
+                        return options;
+                    }, {})
+            : {};
+    } catch {
+        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;
+}
+
+const listRe = /,(?![^(]*\))/;
+function toList(value) {
+    return isArray(value)
+        ? value
+        : isString(value)
+          ? value
+                .split(listRe)
+                .map((value) => (isNumeric(value) ? toNumber(value) : toBoolean(value.trim())))
+          : [value];
+}

package/src/js/api/props.js

@@ -0,0 +1,107 @@
+import {
+    assign,
+    camelize,
+    data as getData,
+    hasOwn,
+    hyphenate,
+    isUndefined,
+    memoize,
+    startsWith,
+} from 'uikit-util';
+import { coerce, parseOptions } from './options';
+
+export function initProps(instance) {
+    const { $options, $props } = instance;
+    const props = getProps($options);
+
+    assign($props, props);
+
+    const { computed, methods } = $options;
+    for (let key in $props) {
+        if (
+            key in props &&
+            (!computed || !hasOwn(computed, key)) &&
+            (!methods || !hasOwn(methods, key))
+        ) {
+            instance[key] = $props[key];
+        }
+    }
+}
+
+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;
+}
+
+const getAttributes = memoize((id, props) => {
+    const attributes = Object.keys(props);
+    const filter = attributes
+        .concat(id)
+        .map((key) => [hyphenate(key), `data-${hyphenate(key)}`])
+        .flat();
+    return { attributes, filter };
+});
+
+export function initPropsObserver(instance) {
+    const { $options, $props } = instance;
+    const { id, props, el } = $options;
+
+    if (!props) {
+        return;
+    }
+
+    const { attributes, filter } = getAttributes(id, props);
+
+    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,
+    });
+
+    instance._disconnect.push(() => observer.disconnect());
+}

package/src/js/api/state.js

@@ -0,0 +1,65 @@
+import { assign, isArray, isPlainObject, isUndefined } from 'uikit-util';
+import { initComputed } from './computed';
+import { callHook } from './hooks';
+import { coerce, mergeOptions } from './options';
+
+let uid = 0;
+
+export function init(instance, options = {}) {
+    options.data = normalizeData(options, instance.constructor.options);
+
+    instance.$options = mergeOptions(instance.constructor.options, options, instance);
+
+    instance.$props = {};
+
+    instance._uid = uid++;
+    initData(instance);
+    initMethods(instance);
+    initComputed(instance);
+    callHook(instance, 'created');
+
+    if (options.el) {
+        instance.$mount(options.el);
+    }
+}
+
+function initData(instance) {
+    const { data = {} } = instance.$options;
+
+    for (const key in data) {
+        instance.$props[key] = instance[key] = data[key];
+    }
+}
+
+function initMethods(instance) {
+    const { methods } = instance.$options;
+
+    if (methods) {
+        for (const key in methods) {
+            instance[key] = methods[key].bind(instance);
+        }
+    }
+}
+
+function normalizeData({ data = {} }, { args = [], props = {} }) {
+    if (isArray(data)) {
+        data = data.slice(0, args.length).reduce((data, value, index) => {
+            if (isPlainObject(value)) {
+                assign(data, value);
+            } else {
+                data[args[index]] = value;
+            }
+            return data;
+        }, {});
+    }
+
+    for (const key in data) {
+        if (isUndefined(data[key])) {
+            delete data[key];
+        } else if (props[key]) {
+            data[key] = coerce(props[key], data[key]);
+        }
+    }
+
+    return data;
+}

package/src/js/api/update.js

@@ -0,0 +1,66 @@
+import { assign, fastdom, isPlainObject } from 'uikit-util';
+
+export function initUpdates(instance) {
+    instance._data = {};
+    instance._updates = [...(instance.$options.update || [])];
+
+    instance._disconnect.push(() => (instance._updates = instance._data = null));
+}
+
+export function prependUpdate(instance, update) {
+    instance._updates.unshift(update);
+}
+
+export function callUpdate(instance, e = 'update') {
+    if (!instance._connected) {
+        return;
+    }
+
+    if (!instance._updates.length) {
+        return;
+    }
+
+    if (!instance._updateCount) {
+        instance._updateCount = 0;
+        requestAnimationFrame(() => (instance._updateCount = 0));
+    }
+
+    if (!instance._queued) {
+        instance._queued = new Set();
+        fastdom.read(() => {
+            if (instance._connected) {
+                runUpdates(instance, instance._queued);
+            }
+            instance._queued = null;
+        });
+    }
+
+    if (instance._updateCount++ < 20) {
+        instance._queued.add(e.type || e);
+    }
+}
+
+function runUpdates(instance, types) {
+    for (const { read, write, events = [] } of instance._updates) {
+        if (!types.has('update') && !events.some((type) => types.has(type))) {
+            continue;
+        }
+
+        let result;
+        if (read) {
+            result = read.call(instance, instance._data, types);
+
+            if (result && isPlainObject(result)) {
+                assign(instance._data, result);
+            }
+        }
+
+        if (write && result !== false) {
+            fastdom.write(() => {
+                if (instance._connected) {
+                    write.call(instance, instance._data, types);
+                }
+            });
+        }
+    }
+}

package/src/js/api/watch.js

@@ -0,0 +1,30 @@
+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;
+}
+
+export function registerWatch(instance, watch, name) {
+    instance._watches.push({
+        name,
+        ...(isPlainObject(watch) ? watch : { handler: watch }),
+    });
+}
+
+export function runWatches(instance, values) {
+    for (const { name, handler, immediate = true } of instance._watches) {
+        if (
+            (instance._initial && immediate) ||
+            (hasOwn(values, name) && !isEqual(values[name], instance[name]))
+        ) {
+            handler.call(instance, instance[name], values[name]);
+        }
+    }
+    instance._initial = false;
+}