@data-fair/lib-vue 1.21.1 → 1.22.0

package/ui-notif.js

@@ -1,76 +1,93 @@
 // simple composable to display store a UI notification
 // this will be transmitted to frame parent if available (compatible with v-iframe uiNotification message type)
 // or can be displayed locally by @data-fair/lib-vuetify/ui-notif.vue
-import { shallowRef, inject } from 'vue'
-import inIframe from '@data-fair/lib-utils/in-iframe.js'
-export function getErrorCode (error) {
-  if (typeof error === 'string') { return 500 }
-  if (typeof error.statusCode === 'number') { return error.statusCode }
-  if (typeof error.response?.statusCode === 'number') { return error.response?.statusCode }
-  if (typeof error.code === 'number') { return error.code }
-  if (typeof error.response?.code === 'number') { return error.response?.code }
-  return 500
+import { shallowRef, inject } from 'vue';
+import inIframe from '@data-fair/lib-utils/in-iframe.js';
+export function getErrorCode(error) {
+    if (typeof error === 'string')
+        return 500;
+    if (typeof error.statusCode === 'number')
+        return error.statusCode;
+    if (typeof error.response?.statusCode === 'number')
+        return error.response?.statusCode;
+    if (typeof error.code === 'number')
+        return error.code;
+    if (typeof error.response?.code === 'number')
+        return error.response?.code;
+    return 500;
 }
-export function getErrorMsg (error) {
-  if (typeof error === 'string') { return error }
-  if (error.data && typeof error.data === 'string') { return error.data }
-  if (error.response?.data && typeof error.response.data === 'string') { return error.response.data }
-  if (error.statusText && typeof error.statusText === 'string') { return error.statusText }
-  if (error.response?.statusText && typeof error.response?.statusText === 'string') { return error.response?.statusText }
-  if (error.message) { return error.message }
-  return 'erreur inconnue'
+export function getErrorMsg(error) {
+    if (typeof error === 'string')
+        return error;
+    if (error.data && typeof error.data === 'string')
+        return error.data;
+    if (error.response?.data && typeof error.response.data === 'string')
+        return error.response.data;
+    if (error.statusText && typeof error.statusText === 'string')
+        return error.statusText;
+    if (error.response?.statusText && typeof error.response?.statusText === 'string')
+        return error.response?.statusText;
+    if (error.message)
+        return error.message;
+    return 'erreur inconnue';
 }
-export function getFullNotif (notif, defaultType = 'default') {
-  if (typeof notif === 'string') { return { msg: notif, type: defaultType } }
-  if (notif.error) {
-    const code = getErrorCode(notif.error)
-    return {
-      ...notif,
-      type: 'error',
-      errorMsg: getErrorMsg(notif.error),
-      clientError: code < 500
+export function getFullNotif(notif, defaultType = 'default') {
+    if (typeof notif === 'string')
+        return { msg: notif, type: defaultType };
+    if (notif.error) {
+        const code = getErrorCode(notif.error);
+        return {
+            ...notif,
+            type: 'error',
+            errorMsg: getErrorMsg(notif.error),
+            clientError: code < 500
+        };
     }
-  }
-  return {
-    ...notif,
-    type: notif.type ?? defaultType
-  }
+    return {
+        ...notif,
+        type: notif.type ?? defaultType
+    };
 }
 export const getUiNotif = () => {
-  const notification = shallowRef(null)
-  function sendUiNotif (partialNotif) {
-    const notif = notification.value = getFullNotif(partialNotif)
-    if (inIframe) {
-      if (notif.type === 'error') { delete notif.error }
-      window.top?.postMessage({ vIframe: true, uiNotification: notif }, '*')
-    } else {
-      console.log('iframe notification', notif)
+    const notification = shallowRef(null);
+    function sendUiNotif(partialNotif) {
+        const notif = notification.value = getFullNotif(partialNotif);
+        if (inIframe) {
+            if (notif.type === 'error')
+                delete notif.error;
+            window.top?.postMessage({ vIframe: true, uiNotification: notif }, '*');
+        }
+        else {
+            console.log('iframe notification', notif);
+        }
     }
-  }
-  return { notification, sendUiNotif }
-}
+    return { notification, sendUiNotif };
+};
 // uses pattern for SSR friendly plugin/composable, cf https://antfu.me/posts/composable-vue-vueday-2021#shared-state-ssr-friendly
-export const uiNotifKey = Symbol('uiNotif')
-export function createUiNotif () {
-  const uiNotif = getUiNotif()
-  return { install (app) { app.provide(uiNotifKey, uiNotif) } }
+export const uiNotifKey = Symbol('uiNotif');
+export function createUiNotif() {
+    const uiNotif = getUiNotif();
+    return { install(app) { app.provide(uiNotifKey, uiNotif); } };
 }
-export function useUiNotif () {
-  const uiNotif = inject(uiNotifKey)
-  if (!uiNotif) { throw new Error('useUiNotif requires using the plugin createUiNotif') }
-  return uiNotif
+export function useUiNotif() {
+    const uiNotif = inject(uiNotifKey);
+    if (!uiNotif)
+        throw new Error('useUiNotif requires using the plugin createUiNotif');
+    return uiNotif;
 }
-export default useUiNotif
-export function withUiNotif (fn, errorMsg, successNotif) {
-  const { sendUiNotif } = useUiNotif()
-  console.warn('withUiNotif is deprecated, use useAsyncAction instead')
-  return async function (...args) {
-    try {
-      const result = await fn(...args)
-      if (successNotif) { sendUiNotif(getFullNotif(successNotif, 'success')) }
-      return result
-    } catch (error) {
-      sendUiNotif({ msg: errorMsg ?? '', error })
-    }
-  }
+export default useUiNotif;
+export function withUiNotif(fn, errorMsg, successNotif) {
+    const { sendUiNotif } = useUiNotif();
+    console.warn('withUiNotif is deprecated, use useAsyncAction instead');
+    return async function (...args) {
+        try {
+            const result = await fn(...args);
+            if (successNotif)
+                sendUiNotif(getFullNotif(successNotif, 'success'));
+            return result;
+        }
+        catch (error) {
+            sendUiNotif({ msg: errorMsg ?? '', error });
+        }
+    };
 }

package/vite.d.ts

@@ -7,4 +7,5 @@ export declare const autoImports: (string | {
     '@data-fair/lib-vue/fetch.js': string[];
     '@data-fair/lib-vue/ws.js': string[];
     '@data-fair/lib-vue/async-action.js': string[];
+    '@data-fair/lib-vue/deep-diff.js': string[];
 })[];

package/vite.js

@@ -1,16 +1,17 @@
 // made for https://github.com/unplugin/unplugin-auto-import
 export const autoImports = [
-  'vue',
-  'vue-i18n',
-  'vue-router',
-  {
-    '@data-fair/lib-vue/session.js': ['useSession', 'useSessionAuthenticated'],
-    '@data-fair/lib-vue/reactive-search-params.js': ['useReactiveSearchParams', 'useStringSearchParam', 'useBooleanSearchParam', 'useNumberSearchParam', 'useStringsArraySearchParam'],
-    '@data-fair/lib-vue/locale-dayjs.js': ['useLocaleDayjs'],
-    '@data-fair/lib-vue/concept-filters.js': ['useConceptFilters'],
-    '@data-fair/lib-vue/ui-notif.js': ['useUiNotif', 'withUiNotif'],
-    '@data-fair/lib-vue/fetch.js': ['useFetch'],
-    '@data-fair/lib-vue/ws.js': ['useWS'],
-    '@data-fair/lib-vue/async-action.js': ['useAsyncAction'],
-  }
-]
+    'vue',
+    'vue-i18n',
+    'vue-router',
+    {
+        '@data-fair/lib-vue/session.js': ['useSession', 'useSessionAuthenticated'],
+        '@data-fair/lib-vue/reactive-search-params.js': ['useReactiveSearchParams', 'useStringSearchParam', 'useBooleanSearchParam', 'useNumberSearchParam', 'useStringsArraySearchParam'],
+        '@data-fair/lib-vue/locale-dayjs.js': ['useLocaleDayjs'],
+        '@data-fair/lib-vue/concept-filters.js': ['useConceptFilters'],
+        '@data-fair/lib-vue/ui-notif.js': ['useUiNotif', 'withUiNotif'],
+        '@data-fair/lib-vue/fetch.js': ['useFetch'],
+        '@data-fair/lib-vue/ws.js': ['useWS'],
+        '@data-fair/lib-vue/async-action.js': ['useAsyncAction'],
+        '@data-fair/lib-vue/deep-diff.js': ['computedDeepDiff', 'watchDeepDiff'],
+    }
+];

package/ws.js

@@ -1,62 +1,66 @@
-import reconnectingWebSocketModule from 'reconnecting-websocket'
-import { ref, reactive, onScopeDispose } from 'vue'
-const ReconnectingWebSocket = reconnectingWebSocketModule
+import reconnectingWebSocketModule from 'reconnecting-websocket';
+import { ref, reactive, onScopeDispose } from 'vue';
+const ReconnectingWebSocket = reconnectingWebSocketModule;
 const getWS = (path) => {
-  if (!window.WebSocket) { return }
-  // @ts-ignore
-  if (import.meta.env?.SSR) { return }
-  const url = (window.location.origin + path).replace('http:', 'ws:').replace('https:', 'wss:')
-  const ws = new ReconnectingWebSocket(url)
-  const subscriptions = reactive({})
-  const opened = ref(false)
-  ws.addEventListener('open', () => {
-    opened.value = true
-    for (const channel of Object.keys(subscriptions)) {
-      if (subscriptions[channel].length) {
-        ws.send(JSON.stringify({ type: 'subscribe', channel }))
-      } else {
-        ws.send(JSON.stringify({ type: 'unsubscribe', channel }))
-        delete subscriptions[channel]
-      }
-    }
-  })
-  ws.addEventListener('close', () => {
-    opened.value = false
-  })
-  ws.onmessage = (event) => {
-    const body = JSON.parse(event.data)
-    if (body.type === 'message') {
-      if (subscriptions[body.channel]?.length) {
-        for (const listener of subscriptions[body.channel]) {
-          listener(body.data)
+    if (!window.WebSocket)
+        return;
+    // @ts-ignore
+    if (import.meta.env?.SSR)
+        return;
+    const url = (window.location.origin + path).replace('http:', 'ws:').replace('https:', 'wss:');
+    const ws = new ReconnectingWebSocket(url);
+    const subscriptions = reactive({});
+    const opened = ref(false);
+    ws.addEventListener('open', () => {
+        opened.value = true;
+        for (const channel of Object.keys(subscriptions)) {
+            if (subscriptions[channel].length) {
+                ws.send(JSON.stringify({ type: 'subscribe', channel }));
+            }
+            else {
+                ws.send(JSON.stringify({ type: 'unsubscribe', channel }));
+                delete subscriptions[channel];
+            }
         }
-      }
-    }
-  }
-  function subscribe (channel, listener) {
-    if (!subscriptions[channel]) {
-      subscriptions[channel] = []
-      if (opened.value) { ws.send(JSON.stringify({ type: 'subscribe', channel })) }
-    }
-    subscriptions[channel].push(listener)
-    onScopeDispose(() => {
-      unsubscribe(channel, listener)
-    })
-  }
-  const unsubscribe = (channel, listener) => {
-    if (subscriptions[channel]) {
-      subscriptions[channel] = subscriptions[channel].filter(l => l !== listener)
-      if (subscriptions[channel].length === 0 && opened.value) {
-        ws.send(JSON.stringify({ type: 'unsubscribe', channel }))
-        delete subscriptions[channel]
-      }
+    });
+    ws.addEventListener('close', () => {
+        opened.value = false;
+    });
+    ws.onmessage = (event) => {
+        const body = JSON.parse(event.data);
+        if (body.type === 'message') {
+            if (subscriptions[body.channel]?.length) {
+                for (const listener of subscriptions[body.channel]) {
+                    listener(body.data);
+                }
+            }
+        }
+    };
+    function subscribe(channel, listener) {
+        if (!subscriptions[channel]) {
+            subscriptions[channel] = [];
+            if (opened.value)
+                ws.send(JSON.stringify({ type: 'subscribe', channel }));
+        }
+        subscriptions[channel].push(listener);
+        onScopeDispose(() => {
+            unsubscribe(channel, listener);
+        });
     }
-  }
-  return { opened, ws, subscribe, unsubscribe }
-}
-const sockets = {}
-export function useWS (path) {
-  sockets[path] = sockets[path] ?? getWS(path)
-  return sockets[path]
+    const unsubscribe = (channel, listener) => {
+        if (subscriptions[channel]) {
+            subscriptions[channel] = subscriptions[channel].filter(l => l !== listener);
+            if (subscriptions[channel].length === 0 && opened.value) {
+                ws.send(JSON.stringify({ type: 'unsubscribe', channel }));
+                delete subscriptions[channel];
+            }
+        }
+    };
+    return { opened, ws, subscribe, unsubscribe };
+};
+const sockets = {};
+export function useWS(path) {
+    sockets[path] = sockets[path] ?? getWS(path);
+    return sockets[path];
 }
-export default useWS
+export default useWS;