vue-composable - npm Package Compare versions

Comparing version 1.0.0-dev.4 to 1.0.0-dev.6

dist/vue-composable.global.js

@@ -23,2 +23,3 @@ var vueComposable = (function (exports, compositionApi) {
     const NO_OP = () => { };
+    const FALSE_OP = () => false;
     function promisedTimeout(timeout) {
@@ -442,74 +443,2 @@ return new Promise(res => {
 
-    function useMatchMedia(query) {
-        const mediaQueryList = compositionApi.ref(matchMedia(query));
-        const matches = compositionApi.ref(mediaQueryList.value.matches);
-        const process = (e) => {
-            matches.value = e.matches;
-        };
-        mediaQueryList.value.addEventListener("change", process, { passive: true });
-        const remove = () => mediaQueryList.value.removeEventListener("change", process);
-        compositionApi.onUnmounted(remove);
-        return {
-            mediaQueryList,
-            remove,
-            matches
-        };
-    }
-
-    function useBreakpoint(breakpoints) {
-        const result = {};
-        const map = new Map();
-        const current = compositionApi.ref();
-        let sorted = [];
-        const removeMedia = [];
-        for (const key in breakpoints) {
-            const bp = breakpoints[key];
-            if (isNumber(bp)) {
-                const r = compositionApi.ref(false);
-                result[key] = r;
-                map.set(bp, {
-                    name: key,
-                    valid: r
-                });
-                sorted.push(bp);
-            }
-            else {
-                const { matches, remove } = useMatchMedia(bp);
-                result[key] = matches;
-                removeMedia.push(remove);
-            }
-        }
-        sorted = sorted.sort((a, b) => b - a);
-        const resize = () => {
-            const width = window.innerWidth;
-            let c = undefined;
-            for (let i = 0; i < sorted.length; i++) {
-                const bp = sorted[i];
-                const r = map.get(bp);
-                r.valid.value = width >= bp;
-                if (width >= bp && c === undefined) {
-                    c = r.name;
-                }
-            }
-            current.value = c;
-        };
-        const processResize = useDebounce(resize, 10);
-        const remove = () => window.removeEventListener("resize", processResize);
-        compositionApi.onMounted(() => {
-            resize();
-            window.addEventListener("resize", processResize, {
-                passive: true
-            });
-        });
-        compositionApi.onUnmounted(() => {
-            remove();
-            removeMedia.forEach(x => x());
-        });
-        return {
-            ...result,
-            remove,
-            current
-        };
-    }
-
     function useFetch(options) {
@@ -697,11 +626,10 @@ const json = compositionApi.ref(null);
             };
-            remove = () => {
-                connection.removeEventListener("change", handler);
-            };
-            connection.addEventListener("change", handler, { passive: true });
+            remove = useEvent(connection, "change", handler, { passive: true });
             handler();
-            compositionApi.onUnmounted(remove);
         }
         else {
-            console.warn("[navigator.connection] not found, networkInformation not available.");
+            /* istanbul ignore else */
+            {
+                console.warn("[navigator.connection] not found, networkInformation not available.");
+            }
         }
@@ -720,62 +648,375 @@ return {
 
-    // used to store all the instances of weakMap
-    const keyedMap = new Map();
-    const weakMap = new WeakMap();
-    function useLocalStorage(key, defaultValue) {
-        let lazy = false;
-        let k = keyedMap.get(key);
-        const json = localStorage.getItem(key);
-        const storage = (k && weakMap.get(k)) ||
-            (!!defaultValue && wrap(defaultValue)) ||
-            compositionApi.ref(null);
-        if (json && !k) {
-            try {
-                storage.value = JSON.parse(json);
-                lazy = false;
+    let online = undefined;
+    function useOnline() {
+        const supported = "onLine" in navigator;
+        // not sure how to test this :/
+        if (!supported) {
+            online = compositionApi.ref(false);
+        }
+        if (!online) {
+            online = compositionApi.ref(navigator.onLine);
+            window.addEventListener("offline", () => (online.value = false), {
+                passive: true
+            });
+            window.addEventListener("online", () => (online.value = true), {
+                passive: true
+            });
+        }
+        return {
+            supported,
+            online
+        };
+    }
+
+    let visibility = undefined;
+    let hidden = undefined;
+    function usePageVisibility() {
+        if (!hidden) {
+            hidden = compositionApi.ref(document.hidden);
+        }
+        if (!visibility) {
+            visibility = compositionApi.ref(document.visibilityState);
+            document.addEventListener("visibilitychange", () => {
+                visibility.value = document.visibilityState;
+                hidden.value = document.hidden;
+            }, { passive: true }
+            // true
+            );
+        }
+        return {
+            visibility,
+            hidden
+        };
+    }
+
+    let language = undefined;
+    let languages = undefined;
+    function useLanguage() {
+        if (!language) {
+            language = compositionApi.ref(navigator.language);
+        }
+        if (!languages) {
+            languages = compositionApi.ref(navigator.languages);
+            const change = () => {
+                language.value = navigator.language;
+                languages.value = navigator.languages;
+            };
+            window.addEventListener('languagechange', change, { passive: true });
+        }
+        return {
+            language,
+            languages
+        };
+    }
+
+    function useMatchMedia(query) {
+        const mediaQueryList = compositionApi.ref(matchMedia(query));
+        const matches = compositionApi.ref(mediaQueryList.value.matches);
+        const process = (e) => {
+            matches.value = e.matches;
+        };
+        mediaQueryList.value.addEventListener("change", process, { passive: true });
+        const remove = () => mediaQueryList.value.removeEventListener("change", process);
+        compositionApi.onUnmounted(remove);
+        return {
+            mediaQueryList,
+            remove,
+            matches
+        };
+    }
+
+    function useBreakpoint(breakpoints) {
+        const result = {};
+        const map = new Map();
+        const current = compositionApi.ref();
+        let sorted = [];
+        const removeMedia = [];
+        for (const key in breakpoints) {
+            const bp = breakpoints[key];
+            if (isNumber(bp)) {
+                const r = compositionApi.ref(false);
+                result[key] = r;
+                map.set(bp, {
+                    name: key,
+                    valid: r
+                });
+                sorted.push(bp);
             }
-            catch (e) {
-                /* istanbul ignore next */
-                console.warn("[useLocalStorage] error parsing value from localStorage", key, e);
+            else {
+                const { matches, remove } = useMatchMedia(bp);
+                result[key] = matches;
+                removeMedia.push(remove);
             }
         }
-        // do not watch if we already created the instance
-        if (!k) {
-            k = {};
-            keyedMap.set(key, k);
-            weakMap.set(k, storage);
-            compositionApi.watch(storage, storage => {
-                if (storage === undefined) {
-                    localStorage.removeItem(key);
-                    return;
+        sorted = sorted.sort((a, b) => b - a);
+        const resize = () => {
+            const width = window.innerWidth;
+            let c = undefined;
+            for (let i = 0; i < sorted.length; i++) {
+                const bp = sorted[i];
+                const r = map.get(bp);
+                r.valid.value = width >= bp;
+                if (width >= bp && c === undefined) {
+                    c = r.name;
                 }
-                // do not overflow localStorage with updates nor keep doing stringify
-                debounce(() => localStorage.setItem(key, JSON.stringify(storage)), 100)();
-            }, {
-                deep: true,
-                lazy
+            }
+            current.value = c;
+        };
+        const processResize = useDebounce(resize, 10);
+        const remove = () => window.removeEventListener("resize", processResize);
+        compositionApi.onMounted(() => {
+            resize();
+            window.addEventListener("resize", processResize, {
+                passive: true
             });
+        });
+        compositionApi.onUnmounted(() => {
+            remove();
+            removeMedia.forEach(x => x());
+        });
+        return {
+            ...result,
+            remove,
+            current
+        };
+    }
+
+    /* istanbul ignore next */
+    function isQuotaExceededError(e, storage) {
+        return e instanceof DOMException && (
+        // everything except Firefox
+        e.code === 22 ||
+            // Firefox
+            e.code === 1014 ||
+            // test name field too, because code might not be present
+            // everything except Firefox
+            e.name === 'QuotaExceededError' ||
+            // Firefox
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+            // acknowledge QuotaExceededError only if there's something already stored
+            (storage && storage.length !== 0);
+    }
+    // based on https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
+    function storageAvailable(storage) {
+        try {
+            const x = '__storage_test__';
+            storage.setItem(x, x);
+            storage.removeItem(x);
+            return true;
         }
-        const clear = () => {
-            keyedMap.forEach((v) => {
-                const obj = weakMap.get(v);
-                /* istanbul ignore else */
-                if (obj) {
-                    obj.value = undefined;
+        catch (e) {
+            return isQuotaExceededError(e, storage);
+        }
+    }
+    function safeParse(serializer, value) {
+        try {
+            return serializer.parse(value);
+        }
+        catch {
+            return value;
+        }
+    }
+    let storageMap = undefined;
+    function useWebStorage(type, serializer = JSON, ms = 10) {
+        const storage = window[type];
+        const supported = storageAvailable(storage);
+        const remove = () => storageMap.delete(type);
+        if (!storageMap) {
+            storageMap = new Map();
+            window.addEventListener('storage', (e) => {
+                if (e.newValue === e.oldValue) {
+                    return;
                 }
-                weakMap.delete(v);
+                let webStore = storageMap.get('localStorage');
+                if (e.storageArea === window.localStorage) {
+                    webStore = storageMap.get('localStorage');
+                }
+                else {
+                    webStore = storageMap.get('sessionStorage');
+                }
+                if (webStore && Object.keys(webStore.$syncKeys).length > 0) {
+                    if (e.key === null) {
+                        webStore.clear();
+                    }
+                    else if (webStore.$syncKeys[e.key]) {
+                        if (e.newValue === null) {
+                            webStore.removeItem(e.key);
+                        }
+                        else {
+                            webStore.updateItem(e.key, e.newValue);
+                        }
+                    }
+                }
             });
-            keyedMap.clear();
+        }
+        let store = storageMap.get(type);
+        let quotaError;
+        if (supported) {
+            if (!store) {
+                quotaError = compositionApi.ref(false);
+                store = {
+                    $refMap: new Map(),
+                    $watchHandlers: new Map(),
+                    $syncKeys: {},
+                    $quotaError: quotaError,
+                    key: storage.key,
+                    length: storage.length,
+                    setSync(key, sync) {
+                        if (sync) {
+                            this.$syncKeys[key] = true;
+                        }
+                        else {
+                            delete this.$syncKeys[key];
+                        }
+                    },
+                    clear() {
+                        this.$refMap.forEach((_, k) => this.removeItem(k));
+                    },
+                    removeItem(k) {
+                        const item = this.$refMap.get(k);
+                        // remove the object value if item deleted
+                        if (item) {
+                            item.value = undefined;
+                        }
+                        // clear the watch
+                        const stop = this.$watchHandlers.get(k);
+                        if (stop) {
+                            stop();
+                        }
+                        delete this.$syncKeys[k];
+                        this.$refMap.delete(k);
+                        storage.removeItem(k);
+                    },
+                    getItem(k) {
+                        let r = this.$refMap.get(k);
+                        if (r) {
+                            return r;
+                        }
+                        const data = storage.getItem(k);
+                        if (!data) {
+                            return null;
+                        }
+                        return this.setItem(k, safeParse(serializer, data));
+                    },
+                    setItem(k, v) {
+                        const reference = wrap(v);
+                        this.$refMap.set(k, reference);
+                        const save = (key, value) => {
+                            try {
+                                const data = isString(value) ? value : serializer.stringify(value);
+                                storage.setItem(key, data);
+                            }
+                            catch (e) {
+                                quotaError.value = isQuotaExceededError(e, storage);
+                            }
+                        };
+                        save(k, v);
+                        const stop = compositionApi.watch(reference, debounce((r) => {
+                            save(k, r);
+                        }, ms), {
+                            lazy: true,
+                            deep: true
+                        });
+                        this.$watchHandlers.set(k, stop);
+                        return reference;
+                    },
+                    updateItem(k, data) {
+                        let r = this.$refMap.get(k);
+                        if (r) {
+                            r.value = safeParse(serializer, data);
+                        }
+                    }
+                };
+                storageMap.set(type, store);
+            }
+            else {
+                quotaError = store.$quotaError;
+            }
+        }
+        else {
+            quotaError = compositionApi.ref(false);
+            store = {};
+        }
+        return {
+            supported,
+            quotaError,
+            store,
+            remove
         };
-        const remove = () => {
-            keyedMap.delete(key);
-            weakMap.delete(k);
-            storage.value = undefined;
+    }
+
+    function useLocalStorage(key, defaultValue) {
+        const { supported, store } = useWebStorage('localStorage');
+        let remove = NO_OP;
+        let clear = NO_OP;
+        let setSync = NO_OP;
+        let storage = undefined;
+        if (supported && store) {
+            setSync = (s) => store.setSync(key, s);
+            remove = () => store.removeItem(key);
+            clear = () => store.clear();
+            storage = store.getItem(key);
+            if (!storage) {
+                storage = store.setItem(key, defaultValue);
+            }
+        }
+        else {
+            /* istanbul ignore else */
+            {
+                console.warn('[localStorage] is not available');
+            }
+        }
+        return {
+            supported,
+            storage,
+            clear,
+            remove,
+            setSync,
         };
+    }
+
+    function useSessionStorage(key, defaultValue) {
+        const { supported, store } = useWebStorage('sessionStorage');
+        let remove = NO_OP;
+        let clear = NO_OP;
+        let setSync = FALSE_OP;
+        let storage = undefined;
+        if (supported && store) {
+            /* istanbul ignore else */
+            {
+                setSync = () => console.warn('sync is not supported, please `useLocalStorage` instead');
+            }
+            remove = () => store.removeItem(key);
+            clear = () => store.clear();
+            storage = store.getItem(key);
+            if (!storage) {
+                storage = store.setItem(key, defaultValue);
+            }
+        }
+        else {
+            /* istanbul ignore else */
+            {
+                console.warn('[sessionStorage] is not available');
+            }
+        }
         return {
+            supported,
             storage,
             clear,
-            remove
+            remove,
+            setSync
         };
     }
 
+    let canUseLocalStorage = undefined;
+    function useStorage(key, defaultValue) {
+        if (canUseLocalStorage === undefined) {
+            canUseLocalStorage = useWebStorage('localStorage').supported;
+        }
+        return canUseLocalStorage
+            ? useLocalStorage(key, defaultValue)
+            : useSessionStorage(key, defaultValue);
+    }
+
+    exports.FALSE_OP = FALSE_OP;
     exports.NO_OP = NO_OP;
@@ -797,2 +1038,3 @@ exports.debounce = debounce;
     exports.promisedTimeout = promisedTimeout;
+    exports.storageAvailable = storageAvailable;
     exports.unwrap = unwrap;
@@ -806,2 +1048,3 @@ exports.useArrayPagination = useArrayPagination;
     exports.useIntersectionObserver = useIntersectionObserver;
+    exports.useLanguage = useLanguage;
     exports.useLocalStorage = useLocalStorage;
@@ -813,6 +1056,11 @@ exports.useMatchMedia = useMatchMedia;
     exports.useOnScroll = useOnScroll;
+    exports.useOnline = useOnline;
+    exports.usePageVisibility = usePageVisibility;
     exports.usePagination = usePagination;
     exports.usePromise = usePromise;
     exports.useRetry = useRetry;
+    exports.useSessionStorage = useSessionStorage;
+    exports.useStorage = useStorage;
     exports.useWebSocket = useWebSocket;
+    exports.useWebStorage = useWebStorage;
     exports.wrap = wrap;
@@ -819,0 +1067,0 @@

dist/vue-composable.global.prod.js

@@ -1,1 +0,1 @@
-var vueComposable=function(e,t){"use strict";function n(e){return t.isRef(e)?e.value:e}function r(e){return t.isRef(e)?e:t.ref(e)}const o=Array.isArray,a=e=>"function"==typeof e,u=e=>"boolean"==typeof e,l=e=>i(e)&&a(e.getTime),s=e=>"number"==typeof e,i=e=>null!==e&&"object"==typeof e,v=e=>i(e)&&!!e.tagName;function c(e){return i(e)&&a(e.then)&&a(e.catch)}const f=()=>{};function d(e){return new Promise(t=>{setTimeout(t,e)})}function m(e,t,n){return e<t?t:e>n?n:e}function p(e,n=!1){if(!e)throw new Error(`[usePromise] argument can't be '${e}'`);if("function"!=typeof e)throw new Error(`[usePromise] expects function, but received ${typeof e}`);const r=t.ref(!1),o=t.ref(null),a=t.ref(null),l=t.ref();return{exec:async(...t)=>{r.value=!0,o.value=null,a.value=null;let s=t&&e.length!==t.length&&t.length>0&&u(t[t.length-1])?t[t.length-1]:n;const i=l.value=e(...t);try{const e=await i;return l.value===i&&(a.value=e),e}catch(e){return l.value===i&&(o.value=e,a.value=null),s?i:void 0}finally{l.value===i&&(r.value=!1)}},result:a,promise:l,loading:r,error:o}}const y=Symbol("RetryId"),g=Symbol("CancellationToken"),h=async(e,t,n,r)=>{const o=t[y].value;let a=-1;const u=e.maxRetries||9001,i=e.retryDelay||w;t.retryErrors.value=[],t.isRetrying.value=!1,t.nextRetry.value=void 0;let v=void 0;do{let e=!1,f=null;try{if(++a,f=r?n(...r):n(),c(f)&&(f=await f),t[g].value)return null;e=!0}catch(e){f=null,t.retryErrors.value.push(e)}if(o!==t[y].value)return f;if(e)return t.isRetrying.value=!1,t.nextRetry.value=void 0,f;if(a>=u)return t.isRetrying.value=!1,t.nextRetry.value=void 0,Promise.reject(new Error(`[useRetry] max retries reached ${u}`));t.isRetrying.value=!0;const m=Date.now(),p=i(a),h=c(p)?await p:p;if(!c(p)||h){if(s(h))v=h;else{if(!l(h))throw new Error(`[useRetry] invalid value received from options.retryDelay '${typeof h}'`);v=h.getTime()}v<m?t.nextRetry.value=m+v:(t.nextRetry.value=v,v-=m),v>0&&await d(v)}if(t[g].value)return null;if(o!==t[y].value)return f}while(a<9e3);return null};const w=()=>0;function b(e,t,n){return E(e,t,n)}function E(e,t=50,n={isImmediate:!1}){let r;return function(...o){const a=this,u=n.isImmediate&&void 0===r;void 0!==r&&clearTimeout(r),r=setTimeout((function(){r=void 0,n.isImmediate||e.apply(a,o)}),t),u&&e.apply(a,o)}}function R(e){const n=r(e.currentPage),o=r(e.pageSize),a=t.ref(0),u=r(e.total),l=t.computed({get:()=>a.value,set(e){"number"==typeof e?a.value=Math.min(e,u.value):console.warn(`[offset] expected number but got: '${typeof e}' value: '${e}'`)}}),s=t.computed({get:()=>n.value,set(e){"number"==typeof e?(n.value=m(e,1,v.value),l.value=(n.value-1)*i.value):console.warn(`[currentPage] expected number but got: '${typeof e}' value: '${e}'`)}}),i=t.computed({get:()=>o.value,set(e){"number"==typeof e?o.value=e:console.warn(`[pageSize] expected number but got: '${typeof e}' value: '${e}'`)}}),v=t.computed(()=>Math.ceil(u.value/i.value));s.value=n.value;return t.watch([u,i],()=>{s.value>v.value&&(s.value=v.value)},{lazy:!0}),{pageSize:i,total:u,currentPage:s,offset:l,lastPage:v,next:()=>++s.value,prev:()=>--s.value,first:()=>s.value=1,last:()=>s.value=v.value}}function x(e,n,o,a){const u=r(e),l=()=>u.value.removeEventListener(n,o);return t.onMounted(()=>u.value.addEventListener(n,o,a)),t.onUnmounted(l),l}function S(e){const n=t.ref(matchMedia(e)),r=t.ref(n.value.matches),o=e=>{r.value=e.matches};n.value.addEventListener("change",o,{passive:!0});const a=()=>n.value.removeEventListener("change",o);return t.onUnmounted(a),{mediaQueryList:n,remove:a,matches:r}}const M=new Map,L=new WeakMap;return e.NO_OP=f,e.debounce=E,e.exponentialDelay=e=>{const t=100*Math.pow(2,e);return t+.2*t*Math.random()},e.isArray=o,e.isBoolean=u,e.isDate=l,e.isElement=v,e.isFunction=a,e.isNumber=s,e.isObject=i,e.isPromise=c,e.isString=e=>"string"==typeof e,e.isSymbol=e=>"symbol"==typeof e,e.minMax=m,e.noDelay=w,e.promisedTimeout=d,e.unwrap=n,e.useArrayPagination=function(e,n){const o=r(e),a=R({currentPage:1,pageSize:10,...n,total:t.computed(()=>o.value.length)}),u=t.computed(()=>{const e=o.value;return Array.isArray(e)?e.slice(a.offset.value,a.offset.value+a.pageSize.value):[]});return{...a,result:u}},e.useBreakpoint=function(e){const n={},r=new Map,o=t.ref();let a=[];const u=[];for(const o in e){const l=e[o];if(s(l)){const e=t.ref(!1);n[o]=e,r.set(l,{name:o,valid:e}),a.push(l)}else{const{matches:e,remove:t}=S(l);n[o]=e,u.push(t)}}a=a.sort((e,t)=>t-e);const l=()=>{const e=window.innerWidth;let t=void 0;for(let n=0;n<a.length;n++){const o=a[n],u=r.get(o);u.valid.value=e>=o,e>=o&&void 0===t&&(t=u.name)}o.value=t},i=b(l,10),v=()=>window.removeEventListener("resize",i);return t.onMounted(()=>{l(),window.addEventListener("resize",i,{passive:!0})}),t.onUnmounted(()=>{v(),u.forEach(e=>e())}),{...n,remove:v,current:o}},e.useCancellablePromise=function(e,n=!1){const r=t.ref(!1);let o=void 0;return{...p((...t)=>(e=>new Promise((t,n)=>{o=e=>{r.value=!0,n(e)},e.then(t).catch(n)}))(e(...t)),n),cancel:e=>o(e),cancelled:r}},e.useDebounce=b,e.useEvent=x,e.useFetch=function(e){const n=t.ref(null),r=t.ref(null),o=!e||!1!==e.isJson,a=!e||!1!==e.parseImmediate,u=p(async(e,t)=>{const u=await fetch(e,t);if(o){const e=u.json().then(e=>n.value=e).catch(e=>{n.value=null,r.value=e});a&&await e}return u}),l=t.computed(()=>u.result.value&&u.result.value.status||null),s=t.computed(()=>u.result.value&&u.result.value.statusText||null);return{...u,json:n,jsonError:r,status:l,statusText:s}},e.useIntersectionObserver=function(e,o){const a=e?r(e):void 0,u=!a||!v(a.value)&&a.value?void 0:a,l=t.computed(()=>o?n(o):u?void 0:n(e)),s=t.ref(u&&u.value?[u.value]:[]),i=t.computed(()=>s.value.length>0&&s.value.every(e=>e.isIntersecting)),c=e=>{s.value=e};let f=t.ref();t.watch(l,e=>{f.value&&f.value.disconnect();const t=e&&e&&{root:n(e.root),rootMargin:n(e.rootMargin),threshold:n(e.threshold)}||void 0;f.value=new IntersectionObserver(c,t),s.value.map(e=>e.target).forEach(f.value.observe)},{deep:!0});const d=e=>{const t=n(e);f.value.observe(t)},m=()=>f.value.disconnect();return u&&(u.value||t.onMounted(()=>{u.value&&d(u)}),t.onUnmounted(()=>{m()})),{elements:s,observe:d,unobserve:e=>{const t=n(e);f.value.unobserve(t)},disconnect:m,isIntersecting:i}},e.useLocalStorage=function(e,n){let o=!1,a=M.get(e);const u=localStorage.getItem(e),l=a&&L.get(a)||!!n&&r(n)||t.ref(null);if(u&&!a)try{l.value=JSON.parse(u),o=!1}catch(t){console.warn("[useLocalStorage] error parsing value from localStorage",e,t)}return a||(a={},M.set(e,a),L.set(a,l),t.watch(l,t=>{void 0!==t?E(()=>localStorage.setItem(e,JSON.stringify(t)),100)():localStorage.removeItem(e)},{deep:!0,lazy:o})),{storage:l,clear:()=>{M.forEach(e=>{const t=L.get(e);t&&(t.value=void 0),L.delete(e)}),M.clear()},remove:()=>{M.delete(e),L.delete(a),l.value=void 0}}},e.useMatchMedia=S,e.useNetworkInformation=function(){const e=navigator.connection||navigator.mozConnection||navigator.webkitConnection,n=t.computed(()=>!!e),r=t.ref(0),o=t.ref(0),a=t.ref("unknown"),u=t.ref(0),l=t.ref(!1),s=t.ref("none");let i=f,v=f;return e?(i=()=>{r.value=e.downlink,o.value=e.downlinkMax,a.value=e.effectiveType,u.value=e.rtt,l.value=e.saveData,s.value=e.type},v=()=>{e.removeEventListener("change",i)},e.addEventListener("change",i,{passive:!0}),i(),t.onUnmounted(v)):console.warn("[navigator.connection] not found, networkInformation not available."),{supported:n,downlink:r,downlinkMax:o,effectiveType:a,rtt:u,saveData:l,type:s,remove:v}},e.useOnMouseMove=function(e,n,r){const o=t.ref(0),a=t.ref(0);let u=e=>{o.value=e.x,a.value=e.y};const l="number"==typeof n?void 0:n;("number"==typeof n?n:r)&&(u=b(u,r));const s=x(e,"mousemove",u,l);return{mouseX:o,mouseY:a,remove:s}},e.useOnResize=function(e,n,o){const a=r(e),u=t.ref(a.value&&a.value.clientHeight),l=t.ref(a.value&&a.value.clientWidth);let s=()=>{u.value=a.value.clientHeight,l.value=a.value.clientWidth};const i="number"==typeof n?void 0:n;("number"==typeof n?n:o)&&(s=b(s,o));const v=x(window,"resize",s,i||{passive:!0});return{height:u,width:l,remove:v}},e.useOnScroll=function(e,n,o){const a=r(e),u=t.ref(a.value&&a.value.scrollTop),l=t.ref(a.value&&a.value.scrollLeft);let s=e=>{u.value=a.value.scrollTop,l.value=a.value.scrollLeft};const i="number"==typeof n?void 0:n;("number"==typeof n?n:o)&&(s=b(s,o));const v=x(a,"scroll",s,i);return{scrollTop:u,scrollLeft:l,remove:v}},e.usePagination=R,e.usePromise=p,e.useRetry=function(e,n){const r=!e||a(e)?{}:e,o=a(e)?e:n;if(!a(e)&&!i(e))throw new Error("[useRetry] options needs to be 'object'");if(o&&!a(o))throw new Error("[useRetry] factory needs to be 'function'");const u=t.ref(!1),l=t.ref(),s=t.ref([]),v={value:!1},c={isRetrying:u,retryCount:t.computed(()=>s.value.length),nextRetry:l,retryErrors:s,[y]:{value:0},[g]:v},f=o?(...e)=>(++c[y].value,h(r,c,o,e)):e=>(++c[y].value,h(r,c,e,void 0));return{...c,cancel:()=>{c.isRetrying.value=!1,c.retryErrors.value.push(new Error("[useRetry] cancelled")),c.nextRetry.value=void 0,v.value=!0},exec:f}},e.useWebSocket=function(e,n){const r=new WebSocket(e,n),o=t.ref(null),a=t.ref(),u=t.ref(null),l=t.ref(!1),s=t.ref(!1),i=t.ref(!1);let v=Date.now()||void 0;return r.addEventListener("message",e=>{o.value=e,u.value=e.data,Date.now()-v<2&&console.warn('[useWebSocket] message rate is too high, if you are using "data" or "messageEvent" you might not get updated of all the messages. Use "ws..addEventListener("message", handler)" instead'),v=Date.now()}),r.addEventListener("error",e=>{a.value=e,i.value=!0}),r.addEventListener("close",()=>{l.value=!1,s.value=!0}),r.addEventListener("open",()=>{l.value=!0,s.value=!1}),{ws:r,send:e=>r.send(e),close:(e,t)=>{r.close(e,t)},messageEvent:o,errorEvent:a,data:u,isOpen:l,isClosed:s,errored:i}},e.wrap=r,e}({},vueCompositionApi);
+var vueComposable=function(e,t){"use strict";function n(e){return t.isRef(e)?e.value:e}function r(e){return t.isRef(e)?e:t.ref(e)}const o=Array.isArray,a=e=>"function"==typeof e,u=e=>"string"==typeof e,s=e=>"boolean"==typeof e,l=e=>c(e)&&a(e.getTime),i=e=>"number"==typeof e,c=e=>null!==e&&"object"==typeof e,v=e=>c(e)&&!!e.tagName;function d(e){return c(e)&&a(e.then)&&a(e.catch)}const f=()=>{},m=()=>!1;function g(e){return new Promise(t=>{setTimeout(t,e)})}function p(e,t,n){return e<t?t:e>n?n:e}function y(e,n=!1){if(!e)throw new Error(`[usePromise] argument can't be '${e}'`);if("function"!=typeof e)throw new Error(`[usePromise] expects function, but received ${typeof e}`);const r=t.ref(!1),o=t.ref(null),a=t.ref(null),u=t.ref();return{exec:async(...t)=>{r.value=!0,o.value=null,a.value=null;let l=t&&e.length!==t.length&&t.length>0&&s(t[t.length-1])?t[t.length-1]:n;const i=u.value=e(...t);try{const e=await i;return u.value===i&&(a.value=e),e}catch(e){return u.value===i&&(o.value=e,a.value=null),l?i:void 0}finally{u.value===i&&(r.value=!1)}},result:a,promise:u,loading:r,error:o}}const h=Symbol("RetryId"),w=Symbol("CancellationToken"),b=async(e,t,n,r)=>{const o=t[h].value;let a=-1;const u=e.maxRetries||9001,s=e.retryDelay||E;t.retryErrors.value=[],t.isRetrying.value=!1,t.nextRetry.value=void 0;let c=void 0;do{let e=!1,v=null;try{if(++a,v=r?n(...r):n(),d(v)&&(v=await v),t[w].value)return null;e=!0}catch(e){v=null,t.retryErrors.value.push(e)}if(o!==t[h].value)return v;if(e)return t.isRetrying.value=!1,t.nextRetry.value=void 0,v;if(a>=u)return t.isRetrying.value=!1,t.nextRetry.value=void 0,Promise.reject(new Error(`[useRetry] max retries reached ${u}`));t.isRetrying.value=!0;const f=Date.now(),m=s(a),p=d(m)?await m:m;if(!d(m)||p){if(i(p))c=p;else{if(!l(p))throw new Error(`[useRetry] invalid value received from options.retryDelay '${typeof p}'`);c=p.getTime()}c<f?t.nextRetry.value=f+c:(t.nextRetry.value=c,c-=f),c>0&&await g(c)}if(t[w].value)return null;if(o!==t[h].value)return v}while(a<9e3);return null};const E=()=>0;function S(e,t,n){return I(e,t,n)}function I(e,t=50,n={isImmediate:!1}){let r;return function(...o){const a=this,u=n.isImmediate&&void 0===r;void 0!==r&&clearTimeout(r),r=setTimeout((function(){r=void 0,n.isImmediate||e.apply(a,o)}),t),u&&e.apply(a,o)}}function M(e){const n=r(e.currentPage),o=r(e.pageSize),a=t.ref(0),u=r(e.total),s=t.computed({get:()=>a.value,set(e){"number"==typeof e?a.value=Math.min(e,u.value):console.warn(`[offset] expected number but got: '${typeof e}' value: '${e}'`)}}),l=t.computed({get:()=>n.value,set(e){"number"==typeof e?(n.value=p(e,1,c.value),s.value=(n.value-1)*i.value):console.warn(`[currentPage] expected number but got: '${typeof e}' value: '${e}'`)}}),i=t.computed({get:()=>o.value,set(e){"number"==typeof e?o.value=e:console.warn(`[pageSize] expected number but got: '${typeof e}' value: '${e}'`)}}),c=t.computed(()=>Math.ceil(u.value/i.value));l.value=n.value;return t.watch([u,i],()=>{l.value>c.value&&(l.value=c.value)},{lazy:!0}),{pageSize:i,total:u,currentPage:l,offset:s,lastPage:c,next:()=>++l.value,prev:()=>--l.value,first:()=>l.value=1,last:()=>l.value=c.value}}function R(e,n,o,a){const u=r(e),s=()=>u.value.removeEventListener(n,o);return t.onMounted(()=>u.value.addEventListener(n,o,a)),t.onUnmounted(s),s}let $=void 0;let L=void 0,x=void 0;let k=void 0,P=void 0;function O(e){const n=t.ref(matchMedia(e)),r=t.ref(n.value.matches),o=e=>{r.value=e.matches};n.value.addEventListener("change",o,{passive:!0});const a=()=>n.value.removeEventListener("change",o);return t.onUnmounted(a),{mediaQueryList:n,remove:a,matches:r}}function D(e,t){return e instanceof DOMException&&(22===e.code||1014===e.code||"QuotaExceededError"===e.name||"NS_ERROR_DOM_QUOTA_REACHED"===e.name)&&t&&0!==t.length}function T(e){try{const t="__storage_test__";return e.setItem(t,t),e.removeItem(t),!0}catch(t){return D(t,e)}}function z(e,t){try{return e.parse(t)}catch{return t}}let A=void 0;function _(e,n=JSON,o=10){const a=window[e],s=T(a);A||(A=new Map,window.addEventListener("storage",e=>{if(e.newValue===e.oldValue)return;let t=A.get("localStorage");t=e.storageArea===window.localStorage?A.get("localStorage"):A.get("sessionStorage"),t&&Object.keys(t.$syncKeys).length>0&&(null===e.key?t.clear():t.$syncKeys[e.key]&&(null===e.newValue?t.removeItem(e.key):t.updateItem(e.key,e.newValue)))}));let l,i=A.get(e);return s?i?l=i.$quotaError:(l=t.ref(!1),i={$refMap:new Map,$watchHandlers:new Map,$syncKeys:{},$quotaError:l,key:a.key,length:a.length,setSync(e,t){t?this.$syncKeys[e]=!0:delete this.$syncKeys[e]},clear(){this.$refMap.forEach((e,t)=>this.removeItem(t))},removeItem(e){const t=this.$refMap.get(e);t&&(t.value=void 0);const n=this.$watchHandlers.get(e);n&&n(),delete this.$syncKeys[e],this.$refMap.delete(e),a.removeItem(e)},getItem(e){let t=this.$refMap.get(e);if(t)return t;const r=a.getItem(e);return r?this.setItem(e,z(n,r)):null},setItem(e,s){const i=r(s);this.$refMap.set(e,i);const c=(e,t)=>{try{const r=u(t)?t:n.stringify(t);a.setItem(e,r)}catch(e){l.value=D(e,a)}};c(e,s);const v=t.watch(i,I(t=>{c(e,t)},o),{lazy:!0,deep:!0});return this.$watchHandlers.set(e,v),i},updateItem(e,t){let r=this.$refMap.get(e);r&&(r.value=z(n,t))}},A.set(e,i)):(l=t.ref(!1),i={}),{supported:s,quotaError:l,store:i,remove:()=>A.delete(e)}}function C(e,t){const{supported:n,store:r}=_("localStorage");let o=f,a=f,u=f,s=void 0;return n&&r?(u=t=>r.setSync(e,t),o=()=>r.removeItem(e),a=()=>r.clear(),s=r.getItem(e),s||(s=r.setItem(e,t))):console.warn("[localStorage] is not available"),{supported:n,storage:s,clear:a,remove:o,setSync:u}}function j(e,t){const{supported:n,store:r}=_("sessionStorage");let o=f,a=f,u=m,s=void 0;return n&&r?(u=()=>console.warn("sync is not supported, please `useLocalStorage` instead"),o=()=>r.removeItem(e),a=()=>r.clear(),s=r.getItem(e),s||(s=r.setItem(e,t))):console.warn("[sessionStorage] is not available"),{supported:n,storage:s,clear:a,remove:o,setSync:u}}let W=void 0;return e.FALSE_OP=m,e.NO_OP=f,e.debounce=I,e.exponentialDelay=e=>{const t=100*Math.pow(2,e);return t+.2*t*Math.random()},e.isArray=o,e.isBoolean=s,e.isDate=l,e.isElement=v,e.isFunction=a,e.isNumber=i,e.isObject=c,e.isPromise=d,e.isString=u,e.isSymbol=e=>"symbol"==typeof e,e.minMax=p,e.noDelay=E,e.promisedTimeout=g,e.storageAvailable=T,e.unwrap=n,e.useArrayPagination=function(e,n){const o=r(e),a=M({currentPage:1,pageSize:10,...n,total:t.computed(()=>o.value.length)}),u=t.computed(()=>{const e=o.value;return Array.isArray(e)?e.slice(a.offset.value,a.offset.value+a.pageSize.value):[]});return{...a,result:u}},e.useBreakpoint=function(e){const n={},r=new Map,o=t.ref();let a=[];const u=[];for(const o in e){const s=e[o];if(i(s)){const e=t.ref(!1);n[o]=e,r.set(s,{name:o,valid:e}),a.push(s)}else{const{matches:e,remove:t}=O(s);n[o]=e,u.push(t)}}a=a.sort((e,t)=>t-e);const s=()=>{const e=window.innerWidth;let t=void 0;for(let n=0;n<a.length;n++){const o=a[n],u=r.get(o);u.valid.value=e>=o,e>=o&&void 0===t&&(t=u.name)}o.value=t},l=S(s,10),c=()=>window.removeEventListener("resize",l);return t.onMounted(()=>{s(),window.addEventListener("resize",l,{passive:!0})}),t.onUnmounted(()=>{c(),u.forEach(e=>e())}),{...n,remove:c,current:o}},e.useCancellablePromise=function(e,n=!1){const r=t.ref(!1);let o=void 0;return{...y((...t)=>{return n=e(...t),new Promise((e,t)=>{o=e=>{r.value=!0,t(e)},n.then(e).catch(t)});var n},n),cancel:e=>o(e),cancelled:r}},e.useDebounce=S,e.useEvent=R,e.useFetch=function(e){const n=t.ref(null),r=t.ref(null),o=!e||!1!==e.isJson,a=!e||!1!==e.parseImmediate,u=y(async(e,t)=>{const u=await fetch(e,t);if(o){const e=u.json().then(e=>n.value=e).catch(e=>{n.value=null,r.value=e});a&&await e}return u}),s=t.computed(()=>u.result.value&&u.result.value.status||null),l=t.computed(()=>u.result.value&&u.result.value.statusText||null);return{...u,json:n,jsonError:r,status:s,statusText:l}},e.useIntersectionObserver=function(e,o){const a=e?r(e):void 0,u=!a||!v(a.value)&&a.value?void 0:a,s=t.computed(()=>o?n(o):u?void 0:n(e)),l=t.ref(u&&u.value?[u.value]:[]),i=t.computed(()=>l.value.length>0&&l.value.every(e=>e.isIntersecting)),c=e=>{l.value=e};let d=t.ref();t.watch(s,e=>{d.value&&d.value.disconnect();const t=e&&e&&{root:n(e.root),rootMargin:n(e.rootMargin),threshold:n(e.threshold)}||void 0;d.value=new IntersectionObserver(c,t),l.value.map(e=>e.target).forEach(d.value.observe)},{deep:!0});const f=e=>{const t=n(e);d.value.observe(t)},m=()=>d.value.disconnect();return u&&(u.value||t.onMounted(()=>{u.value&&f(u)}),t.onUnmounted(()=>{m()})),{elements:l,observe:f,unobserve:e=>{const t=n(e);d.value.unobserve(t)},disconnect:m,isIntersecting:i}},e.useLanguage=function(){if(k||(k=t.ref(navigator.language)),!P){P=t.ref(navigator.languages);const e=()=>{k.value=navigator.language,P.value=navigator.languages};window.addEventListener("languagechange",e,{passive:!0})}return{language:k,languages:P}},e.useLocalStorage=C,e.useMatchMedia=O,e.useNetworkInformation=function(){const e=navigator.connection||navigator.mozConnection||navigator.webkitConnection,n=t.computed(()=>!!e),r=t.ref(0),o=t.ref(0),a=t.ref("unknown"),u=t.ref(0),s=t.ref(!1),l=t.ref("none");let i=f,c=f;return e?(i=()=>{r.value=e.downlink,o.value=e.downlinkMax,a.value=e.effectiveType,u.value=e.rtt,s.value=e.saveData,l.value=e.type},c=R(e,"change",i,{passive:!0}),i()):console.warn("[navigator.connection] not found, networkInformation not available."),{supported:n,downlink:r,downlinkMax:o,effectiveType:a,rtt:u,saveData:s,type:l,remove:c}},e.useOnMouseMove=function(e,n,r){const o=t.ref(0),a=t.ref(0);let u=e=>{o.value=e.x,a.value=e.y};const s="number"==typeof n?void 0:n;("number"==typeof n?n:r)&&(u=S(u,r));const l=R(e,"mousemove",u,s);return{mouseX:o,mouseY:a,remove:l}},e.useOnResize=function(e,n,o){const a=r(e),u=t.ref(a.value&&a.value.clientHeight),s=t.ref(a.value&&a.value.clientWidth);let l=()=>{u.value=a.value.clientHeight,s.value=a.value.clientWidth};const i="number"==typeof n?void 0:n;("number"==typeof n?n:o)&&(l=S(l,o));const c=R(window,"resize",l,i||{passive:!0});return{height:u,width:s,remove:c}},e.useOnScroll=function(e,n,o){const a=r(e),u=t.ref(a.value&&a.value.scrollTop),s=t.ref(a.value&&a.value.scrollLeft);let l=e=>{u.value=a.value.scrollTop,s.value=a.value.scrollLeft};const i="number"==typeof n?void 0:n;("number"==typeof n?n:o)&&(l=S(l,o));const c=R(a,"scroll",l,i);return{scrollTop:u,scrollLeft:s,remove:c}},e.useOnline=function(){const e="onLine"in navigator;return e||($=t.ref(!1)),$||($=t.ref(navigator.onLine),window.addEventListener("offline",()=>$.value=!1,{passive:!0}),window.addEventListener("online",()=>$.value=!0,{passive:!0})),{supported:e,online:$}},e.usePageVisibility=function(){return x||(x=t.ref(document.hidden)),L||(L=t.ref(document.visibilityState),document.addEventListener("visibilitychange",()=>{L.value=document.visibilityState,x.value=document.hidden},{passive:!0})),{visibility:L,hidden:x}},e.usePagination=M,e.usePromise=y,e.useRetry=function(e,n){const r=!e||a(e)?{}:e,o=a(e)?e:n;if(!a(e)&&!c(e))throw new Error("[useRetry] options needs to be 'object'");if(o&&!a(o))throw new Error("[useRetry] factory needs to be 'function'");const u=t.ref(!1),s=t.ref(),l=t.ref([]),i={value:!1},v={isRetrying:u,retryCount:t.computed(()=>l.value.length),nextRetry:s,retryErrors:l,[h]:{value:0},[w]:i},d=o?(...e)=>(++v[h].value,b(r,v,o,e)):e=>(++v[h].value,b(r,v,e,void 0));return{...v,cancel:()=>{v.isRetrying.value=!1,v.retryErrors.value.push(new Error("[useRetry] cancelled")),v.nextRetry.value=void 0,i.value=!0},exec:d}},e.useSessionStorage=j,e.useStorage=function(e,t){return void 0===W&&(W=_("localStorage").supported),W?C(e,t):j(e,t)},e.useWebSocket=function(e,n){const r=new WebSocket(e,n),o=t.ref(null),a=t.ref(),u=t.ref(null),s=t.ref(!1),l=t.ref(!1),i=t.ref(!1);let c=Date.now()||void 0;return r.addEventListener("message",e=>{o.value=e,u.value=e.data,Date.now()-c<2&&console.warn('[useWebSocket] message rate is too high, if you are using "data" or "messageEvent" you might not get updated of all the messages. Use "ws..addEventListener("message", handler)" instead'),c=Date.now()}),r.addEventListener("error",e=>{a.value=e,i.value=!0}),r.addEventListener("close",()=>{s.value=!1,l.value=!0}),r.addEventListener("open",()=>{s.value=!0,l.value=!1}),{ws:r,send:e=>r.send(e),close:(e,t)=>{r.close(e,t)},messageEvent:o,errorEvent:a,data:u,isOpen:s,isClosed:l,errored:i}},e.useWebStorage=_,e.wrap=r,e}({},vueCompositionApi);

index.js

@@ -0,0 +0,0 @@ 'use strict'

package.json

 {
   "name": "vue-composable",
-  "version": "1.0.0-dev.4",
+  "version": "1.0.0-dev.6",
   "description": "vue-composable",
@@ -19,4 +19,3 @@ "main": "index.js",
       "cjs",
-      "global",
-      "esm"
+      "global"
     ]
@@ -41,4 +40,4 @@ },
   "dependencies": {
-    "@vue-composable/core": "1.0.0-dev.4",
-    "@vue-composable/web": "1.0.0-dev.4",
+    "@vue-composable/core": "1.0.0-dev.6",
+    "@vue-composable/web": "1.0.0-dev.6",
     "@vue/composition-api": "^0.3.4",
@@ -45,0 +44,0 @@ "vue": "^2.6.10"

README.md

@@ -7,4 +7,4 @@ # vue-composable
 
+# vue-next
 
-# vue-next
 > For [vue-next](https://github.com/vuejs/vue-next) support please check [@next](https://www.npmjs.com/package/vue-composable/v/next)
@@ -18,2 +18,9 @@
 
+This library aim is to be one stop shop for many real-world composable functions, with aggressive tree-shaking to keep it light on your end code ([12kb gzip](https://app.circleci.com/jobs/github/pikax/vue-composable/318/parallel-runs/0/steps/0-105)).
+
+[vue-composable](https://www.npmjs.com/package/vue-composable) is composed by two package [@vue-composable/core](./packages/core) and [@vue-composable/web](./packages/web).
+
+- [@vue-composable/core](./packages/core): contains helpers composables, such as Promise and Pagination.
+- [@vue-composable/web](./packages/web): contains [Web API](https://developer.mozilla.org/en-US/docs/Web/API) implementations
+
 ## Installing
@@ -63,2 +70,5 @@
 - [NetworkInformation](https://pikax.me/vue-composable/composable/web/networkInformation) - reactive `NetworkInformation` wrapper
+- [Online](<[composable/web](https://pikax.me/vue-composable/composable/web)/online>) - reactive `navigator.onLine` wrapper
+- [PageVisibility](https://pikax.me/vue-composable/composable/web/pageVisibility) - reactive `Page Visibility API`
+- [Language](https://pikax.me/vue-composable/composable/web/language) - reactive `NavigatorLanguage`
 
@@ -122,2 +132,12 @@ ### External
 
+You can contribute raising issues and by helping out with code.
+
+Tests and Documentation are the most important things for me, because good documentation is really useful!
+
+I really appreciate some tweaks or changes on how the documentation is displayed and how to make it easier to read.
+
+> I really need an logo for this project, if you have a good idea for a logo, please enter in contact with me, you can find me on the `Vue discord : @pikax`
+
+### New composable
+
 1. Fork it!
@@ -124,0 +144,0 @@ 2. Create your feature branch: `git checkout -b feat/new-composable`

No alert changes

Improved metrics

Number of lines in readme file

148

increased by15.63%

Number of medium supply chain risk alerts

2

decreased by-50%

Worsened metrics

Total package byte prevSize

59448

decreased by-26.15%

Number of package files

9

decreased by-18.18%

Lines of code

1115

decreased by-32.59%

Dependency changes

• + Added@vue-composable/core@1.0.0-dev.6(transitive)

• + Added@vue-composable/web@1.0.0-dev.6(transitive)

• - Removed@vue-composable/core@1.0.0-dev.4(transitive)

• - Removed@vue-composable/web@1.0.0-dev.4(transitive)

• Updated@vue-composable/core@1.0.0-dev.6

• Updated@vue-composable/web@1.0.0-dev.6