miolo-react 3.0.0-beta.23 → 3.0.0-beta.231

package/src/ssr/useSsrDataOrReload.mjs

@@ -1,43 +1,400 @@
-import {useState, useCallback, useEffect} from 'react'
-import getSsrDataFromContext from './getSsrDataFromContext.mjs'
-
-const useSsrDataOrReload = (context, miolo, name, defval, loader, modifier) => {
-  
-  const _maybeModify = useCallback((value) => {
-    return modifier==undefined ? value : modifier(value)
-  }, [modifier])
-
-  const ssrDataFromContext = getSsrDataFromContext(context, name)
-  const [ssrData, setSsrData] = useState(_maybeModify(
-    ssrDataFromContext != undefined 
-    ? ssrDataFromContext : defval))
-  const [needToRefresh, setNeedToRefresh] = useState(ssrDataFromContext == undefined)
-
-  const refreshSsrData = useCallback(() => {
-    if (loader == undefined) {
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import getSsrDataFromContext from "./getSsrDataFromContext.mjs"
+import patchHistory from "./patchHistory.mjs"
+import useIndexedDb from "./useIndexedDb.mjs"
+import useOnWindowFocus from "./useOnWindowFocus.mjs"
+import usePropsCheck from "./usePropsCheck.mjs"
+
+/**
+ * @typedef {import('miolo-model').MioloModel} MioloModel
+ * @typedef {import('miolo-model').MioloArray} MioloArray
+ *
+ *
+ *
+ * @typedef {Object} MioloSSRDataOptions
+ * @property {any} [defval] - The default value for the data.
+ * @property {Function} [loader] - A function that loads the data remotely. You need either {@link loader} or {@link url}.
+ * @property {string} [url] - The URL to load the data from. You need either {@link loader} or {@link url}.
+ * @property {Object} [params] - The parameters to pass to the {@link loader}.
+ * @property {new (...args: any[]) => MioloModel} [model] - A MioloModel class for the data.
+ * @property {Function} [modifier] - A function that modifies the data (after ssr'ed or loaded, and after instantiated {@link model} if any).
+ * @property {Function|boolean} [effect] - A function that is called when the data is loaded. The {@link effect} function should return true if the data needs to be reloaded.
+ * @property {boolean} [cache] - Whether to cache the data.
+ * @property {number} [ttl] - The time to live for the cached data in seconds.
+ * @property {boolean} [autoRefresh] - Whether to automatically refresh the data on cache expiration.
+ *
+ *
+ * @typedef {Object} MioloSSRData
+ * @property {MioloModel | MioloArray | any} data - The data state. Generaly defined by {@link model} and/or {@link modifier} options.
+ * @property {Function} setData - Set the data state directly.
+ * @property {Function} refresh - If needed, remotely reload data (by calling {@link loader} or {@link url}).
+ * @property {Function} invalidate - Invalidate the data cache (requires {@link cache} to be true).
+ * @property {string|undefined} error - The error message if any.
+ *
+ * @property {boolean} ok - Status of SSR data, true if everything was ssr'ed or remotely loaded ok.
+ * @property {boolean} ready - true when {@link data} is loaded (either ssr'ed or remotely).
+ */
+
+const globalSocketState = {
+  rooms: new Map(),
+  unsubscribeTimers: new Map(),
+  lastSubscribeEmitted: new Map(),
+  versionsRequestedAt: 0
+}
+
+/**
+ * Hook to get some ssr data or reload it if needed.
+ *
+ * @param {Object} context - The miolo context's state object.
+ * @param {Object} miolo - The miolo client object, that is:
+ *   - @prop {Object} fetcher - The fetcher object.
+ *   - @prop {Object} socket - The socket object.
+ *   - @prop {Object} logger - The logger object.
+ * @param {string} name - The name of the data.
+ * @param {MioloSSRDataOptions} options - The options object:
+ * @returns {MioloSSRData}
+ */
+const useSsrDataOrReload = (context, miolo, name, options) => {
+  const { fetcher, socket, logger } = miolo
+  const {
+    defval = [],
+    loader = undefined,
+    url = undefined,
+    params = undefined,
+    modifier = undefined,
+    effect = undefined,
+    model = undefined,
+    cache = false,
+    autoRefresh = true,
+    ttl = undefined
+  } = options
+
+  usePropsCheck(loader, effect, modifier, name)
+
+  const parseData = useCallback(
+    (value) => {
+      let parsed = value
+      if (model !== undefined) {
+        parsed = new model(parsed)
+      }
+      if (modifier !== undefined) {
+        parsed = modifier(parsed)
+      }
+      return parsed
+    },
+    [modifier, model]
+  )
+
+  const ssrDataFromContext = useMemo(() => {
+    return getSsrDataFromContext(context, name)
+  }, [context, name])
+
+  const [ssrData, setSsrData] = useState(
+    parseData(ssrDataFromContext !== undefined ? ssrDataFromContext : defval)
+  )
+  const [status, setStatus] = useState(ssrDataFromContext !== undefined ? "loaded" : "idle")
+  const [error, setError] = useState(undefined)
+  const pendingLazyRefreshRef = useRef(false)
+
+  const { cacheInvalidate, cacheSet, cacheGet } = useIndexedDb(name, logger, cache, ttl)
+
+  const updateSsrData = useCallback(
+    (data) => {
+      pendingLazyRefreshRef.current = false
+      setStatus("loading")
+      setSsrData(parseData(data))
+      setError(undefined)
+      setStatus("loaded")
+      /*await*/ cacheSet(data)
+    },
+    [parseData, cacheSet]
+  )
+
+  const refreshSsrData = useCallback(async () => {
+    if (status === "loading") {
       return
     }
 
-    const {fetcher} = miolo
+    pendingLazyRefreshRef.current = false
+    setStatus("loading")
+    setError(undefined)
+
+    logger.verbose(`[miolo-react][ssr][${name}] refreshing ssr data`)
+
+    let newData
+
+    if (loader !== undefined) {
+      newData = await loader(context, fetcher)
+    } else {
+      if (!url) {
+        setError(`No url provided for ${name}`)
+      } else {
+        const resp = await fetcher.get(url, params)
+        if (resp.ok) {
+          newData = resp?.data
+        } else {
+          setError(resp?.error || "Unknown error")
+        }
+      }
+    }
+
+    if (newData !== undefined) {
+      setSsrData(parseData(newData))
+      /*await*/ cacheSet(newData)
+    }
+
+    setStatus("loaded")
+  }, [status, context, fetcher, loader, url, params, parseData, name, cacheSet, logger])
 
-    async function fetchData() {
-      let nSsrData = await loader(context, fetcher)
-      setSsrData(_maybeModify(nSsrData))
+  const cacheVersionsCheck = useCallback(
+    async (versions) => {
+      logger.verbose(
+        `[miolo-react][ssr][${name}] Backend versions received: ${JSON.stringify(versions)}`
+      )
+
+      const ssrVersions = versions || {}
+      if (ssrVersions[name]) {
+        const backendVersion = ssrVersions[name]
+        logger.verbose(
+          `[miolo-react][ssr][${name}] Backend version for ${name} is ${backendVersion}`
+        )
+
+        const [cached, expired, ts] = await cacheGet()
+        if (cached) {
+          if (expired || ts < backendVersion) {
+            logger.info(
+              `[miolo-react][ssr][${name}] ssr-versions mismatch for ${name}, invalidating`
+            )
+            await cacheInvalidate()
+            if (autoRefresh === true) {
+              await refreshSsrData()
+            }
+          } else {
+            logger.verbose(`[miolo-react][ssr][${name}] ssr-versions match for ${name}`)
+          }
+        } else {
+          logger.warn(`[miolo-react][ssr][${name}] No cached data found for ${name}`)
+        }
+      }
+    },
+    [name, logger, cacheGet, cacheInvalidate, refreshSsrData, autoRefresh]
+  )
+
+  useEffect(() => {
+    let mounted = true
+
+    const loadData = async () => {
+      if (!mounted) return
+
+      try {
+        if (status === "idle") {
+          logger.verbose(`[miolo-react][ssr][${name}] getting data for ${name}...`)
+
+          const changed =
+            effect === undefined ||
+            (typeof effect === "function" && effect() === true) ||
+            effect === true
+
+          if (changed === true) {
+            const [cached, expired, _ts] = await cacheGet()
+
+            if (cached) {
+              logger.verbose(`[miolo-react][ssr][${name}] read data for ${name} from cache`)
+              setSsrData(parseData(cached))
+
+              if (expired) {
+                logger.verbose(`[miolo-react][ssr][${name}] expired cache for ${name}, refreshing`)
+                await refreshSsrData()
+              } else {
+                setStatus("loaded")
+              }
+            } else {
+              logger.verbose(`[miolo-react][ssr][${name}] no cached data for ${name}, refreshing`)
+              await refreshSsrData()
+            }
+          }
+        }
+      } catch (_) {}
+    }
+
+    loadData()
+
+    return () => {
+      mounted = false
+    }
+  }, [status, refreshSsrData, effect, name, parseData, cacheGet, logger])
+
+  useEffect(() => {
+    if (ssrDataFromContext !== undefined) {
+      /*await*/ cacheSet(ssrDataFromContext)
+    }
+  }, [ssrDataFromContext, cacheSet])
+
+  const handlersRef = useRef(/** @type {any} */ ({}))
+
+  useEffect(() => {
+    handlersRef.current = {
+      cacheVersionsCheck,
+      cacheInvalidate,
+      refreshSsrData,
+      refreshSsrDataLazy: () => {
+        pendingLazyRefreshRef.current = true
+      }
     }
+  })
 
-    fetchData()
-  }, [context, miolo, loader, _maybeModify]) 
-  
   useEffect(() => {
-    try {
-      if (needToRefresh) {
-        setNeedToRefresh(false)
+    if (cache === true) {
+      patchHistory()
+    }
+
+    const onNav = () => {
+      if (pendingLazyRefreshRef.current) {
+        logger.verbose(
+          `[miolo-react][ssr][${name}] navigation detected, doing pending lazy refresh`
+        )
+        pendingLazyRefreshRef.current = false
         refreshSsrData()
       }
-    } catch(e) {}
-  }, [needToRefresh, refreshSsrData]) 
+    }
+    window.addEventListener("miolo-navigation", onNav)
+    return () => {
+      window.removeEventListener("miolo-navigation", onNav)
+    }
+  }, [cache, name, logger, refreshSsrData])
+
+  useEffect(() => {
+    if (!socket || cache !== true) {
+      return
+    }
+
+    const currentCount = globalSocketState.rooms.get(name) || 0
+    globalSocketState.rooms.set(name, currentCount + 1)
+
+    const pendingTimer = globalSocketState.unsubscribeTimers.get(name)
+    if (pendingTimer) {
+      clearTimeout(pendingTimer)
+      globalSocketState.unsubscribeTimers.delete(name)
+    }
+
+    const requestSubscribeAndVersions = () => {
+      const now = Date.now()
+      const lastSub = globalSocketState.lastSubscribeEmitted.get(name) || 0
+
+      if (now - lastSub > 100) {
+        globalSocketState.lastSubscribeEmitted.set(name, now)
+        logger.verbose(`[miolo-react][ssr][${name}] Socket connected, subscribing`)
+        socket.emit("ssr-subscribe", name)
+      }
+
+      if (now - globalSocketState.versionsRequestedAt > 500) {
+        globalSocketState.versionsRequestedAt = now
+        logger.verbose(`[miolo-react][ssr][${name}] Asking for ssr-versions`)
+        socket.emit("ssr-versions")
+      }
+    }
+
+    const onRefresh = async (data) => {
+      if (data.name !== name) return
+
+      logger.verbose(
+        `[miolo-react][ssr][${name}] ssr-refresh ${JSON.stringify(data)} - my socket id: ${socket.id}`
+      )
+      if (data.exclude_socket_id && data.exclude_socket_id === socket.id) {
+        logger.verbose(
+          `[miolo-react][ssr][${name}] ssr-refresh ${data.name} ignored for socketid ${socket.id}`
+        )
+        return
+      }
+      if (data.only_socket_id && data.only_socket_id !== socket.id) {
+        logger.verbose(
+          `[miolo-react][ssr][${name}] ssr-refresh ${data.name} ignored for socketid ${socket.id} (only_socket_id mismatch)`
+        )
+        return
+      }
+
+      logger.info(
+        `[miolo-react][ssr][${name}] ssr-refresh ${data.name}${data.lazy ? " (lazy)" : ""}`
+      )
+      await handlersRef.current.cacheInvalidate()
+
+      if (!data.lazy) {
+        await handlersRef.current.refreshSsrData()
+      } else {
+        if (handlersRef.current.refreshSsrDataLazy) {
+          handlersRef.current.refreshSsrDataLazy()
+        }
+      }
+    }
+
+    const onVersions = (versions) => {
+      if (handlersRef.current.cacheVersionsCheck) {
+        handlersRef.current.cacheVersionsCheck(versions)
+      }
+    }
+
+    logger.verbose(`[miolo-react][ssr][${name}] Attaching ssr/cache socket handlers`)
+
+    if (socket.connected) {
+      requestSubscribeAndVersions()
+    }
+
+    socket.on("connect", requestSubscribeAndVersions)
+    socket.on("ssr-versions", onVersions)
+    socket.on("ssr-refresh", onRefresh)
+
+    return () => {
+      logger.verbose(`[miolo-react][ssr][${name}] Detaching ssr/cache socket handlers`)
+
+      const count = globalSocketState.rooms.get(name) || 0
+      if (count > 0) {
+        globalSocketState.rooms.set(name, count - 1)
+        if (count - 1 === 0) {
+          const timer = setTimeout(() => {
+            if ((globalSocketState.rooms.get(name) || 0) === 0) {
+              socket.emit("ssr-unsubscribe", name)
+              globalSocketState.lastSubscribeEmitted.set(name, 0)
+            }
+            globalSocketState.unsubscribeTimers.delete(name)
+          }, 100)
+          globalSocketState.unsubscribeTimers.set(name, timer)
+        }
+      }
+
+      socket.off("connect", requestSubscribeAndVersions)
+      socket.off("ssr-versions", onVersions)
+      socket.off("ssr-refresh", onRefresh)
+    }
+  }, [name, cache, socket, logger])
+
+  useOnWindowFocus(
+    useCallback(() => {
+      if (cache !== true) {
+        return
+      }
+      if (socket === undefined) {
+        return
+      }
+      logger.verbose(
+        `[miolo-react][ssr][${name}] Window focused, checking versions (socket id is ${socket.id})`
+      )
+      const now = Date.now()
+      if (now - globalSocketState.versionsRequestedAt > 500) {
+        globalSocketState.versionsRequestedAt = now
+        socket.emit("ssr-versions")
+      }
+    }, [name, cache, logger, socket])
+  )
 
-  return [ssrData, (data) => setSsrData(_maybeModify(data)), refreshSsrData]
+  return {
+    data: ssrData,
+    setData: updateSsrData,
+    refresh: refreshSsrData,
+    invalidate: cacheInvalidate,
+    error,
+    ok: error === undefined,
+    ready: status === "loaded"
+  }
 }
 
-export {useSsrDataOrReload}
+export { useSsrDataOrReload }

package/dist/miolo-react.mjs

@@ -1,265 +0,0 @@
-/**
- * miolo-react v3.0.0-beta.23
- *
- * https://www.afialapis.com/os/miolo
- *
- * Copyright (c) Donato Lorenzo <donato@afialapis.com>
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-/* eslint-disable */ 
-import React, { useContext, useCallback, useState, useEffect } from 'react';
-import { miolo_client } from 'miolo-cli';
-
-var MioloContext = /*#__PURE__*/React.createContext();
-
-/* eslint react/display-name:0 */
-var withMioloContext = BaseComponent => props => {
-  var context = useContext(MioloContext);
-  return /*#__PURE__*/React.createElement(BaseComponent, Object.assign({}, props, context));
-};
-
-var useMioloContext = () => useContext(MioloContext);
-
-function asyncGeneratorStep(n, t, e, r, o, a, c) {
-  try {
-    var i = n[a](c),
-      u = i.value;
-  } catch (n) {
-    return void e(n);
-  }
-  i.done ? t(u) : Promise.resolve(u).then(r, o);
-}
-function _asyncToGenerator(n) {
-  return function () {
-    var t = this,
-      e = arguments;
-    return new Promise(function (r, o) {
-      var a = n.apply(t, e);
-      function _next(n) {
-        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
-      }
-      function _throw(n) {
-        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
-      }
-      _next(void 0);
-    });
-  };
-}
-function _defineProperty(e, r, t) {
-  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-    value: t,
-    enumerable: true,
-    configurable: true,
-    writable: true
-  }) : e[r] = t, e;
-}
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function (r) {
-      return Object.getOwnPropertyDescriptor(e, r).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread2(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
-      _defineProperty(e, r, t[r]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
-      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
-    });
-  }
-  return e;
-}
-function _toPrimitive(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r);
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-
-var _getDataFromWindow = name => {
-  try {
-    if (window != undefined) {
-      var ssr_data = window.__CONTEXT.ssr_data;
-      if (ssr_data != undefined) {
-        if (ssr_data[name] != undefined) {
-          return ssr_data[name];
-        }
-      }
-    }
-  } catch (e) {}
-  return undefined;
-};
-var getSsrDataFromContext = (context, name) => {
-  var data = undefined;
-  if ((context === null || context === void 0 ? void 0 : context.ssr_data) != undefined && (context === null || context === void 0 ? void 0 : context.ssr_data[name]) != undefined) {
-    data = context.ssr_data[name];
-  } else {
-    var wdata = _getDataFromWindow(name);
-    if (wdata != undefined) {
-      data = wdata;
-    }
-  }
-  return data;
-};
-
-var useSsrDataOrReload = (context, miolo, name, defval, loader, modifier) => {
-  var _maybeModify = useCallback(value => {
-    return modifier == undefined ? value : modifier(value);
-  }, [modifier]);
-  var ssrDataFromContext = getSsrDataFromContext(context, name);
-  var [ssrData, setSsrData] = useState(_maybeModify(ssrDataFromContext != undefined ? ssrDataFromContext : defval));
-  var [needToRefresh, setNeedToRefresh] = useState(ssrDataFromContext == undefined);
-  var refreshSsrData = useCallback(() => {
-    if (loader == undefined) {
-      return;
-    }
-    var {
-      fetcher
-    } = miolo;
-    function fetchData() {
-      return _fetchData.apply(this, arguments);
-    }
-    function _fetchData() {
-      _fetchData = _asyncToGenerator(function* () {
-        var nSsrData = yield loader(context, fetcher);
-        setSsrData(_maybeModify(nSsrData));
-      });
-      return _fetchData.apply(this, arguments);
-    }
-    fetchData();
-  }, [context, miolo, loader, _maybeModify]);
-  useEffect(() => {
-    try {
-      if (needToRefresh) {
-        setNeedToRefresh(false);
-        refreshSsrData();
-      }
-    } catch (e) {}
-  }, [needToRefresh, refreshSsrData]);
-  return [ssrData, data => setSsrData(_maybeModify(data)), refreshSsrData];
-};
-
-var MioloContextProvider = _ref => {
-  var {
-    context,
-    children
-  } = _ref;
-  var [innerContext, setInnerContext] = useState(context);
-  var [mioloObj, setMioloObj] = useState(miolo_client(context));
-  useEffect(() => {
-    setInnerContext(context);
-    setMioloObj(miolo_client(context));
-  }, [context]);
-  var login = useCallback(/*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(function* (credentials) {
-      var {
-        fetcher
-      } = mioloObj;
-      var {
-        config
-      } = innerContext;
-      var url = config.login_url || '/login';
-      var resp = yield fetcher.login(url, credentials);
-      if (resp !== null && resp !== void 0 && resp.data) {
-        var _resp$data;
-        if (resp !== null && resp !== void 0 && (_resp$data = resp.data) !== null && _resp$data !== void 0 && _resp$data.authenticated) {
-          setInnerContext(current => {
-            return _objectSpread2(_objectSpread2({}, current), resp === null || resp === void 0 ? void 0 : resp.data);
-          });
-        }
-        return resp === null || resp === void 0 ? void 0 : resp.data;
-      }
-      return {};
-    });
-    return function (_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }(), [innerContext, mioloObj]);
-  var logout = useCallback(/*#__PURE__*/_asyncToGenerator(function* () {
-    var {
-      fetcher
-    } = mioloObj;
-    var {
-      config
-    } = innerContext;
-    var url = config.logout_url || '/logout';
-    yield fetcher.logout(url);
-    // resp.redirected= true
-
-    setInnerContext(current => {
-      return _objectSpread2(_objectSpread2({}, current), {}, {
-        user: undefined,
-        authenticated: false
-      });
-    });
-    return {
-      user: undefined,
-      authenticated: false
-    };
-  }), [innerContext, mioloObj]);
-  var updateUser = useCallback(user => {
-    setInnerContext(current => {
-      return _objectSpread2(_objectSpread2({}, current), {}, {
-        user
-      });
-    });
-  }, []);
-  var useSsrData = (name, defval, loader, modifier) => {
-    return useSsrDataOrReload(innerContext, mioloObj, name, defval, loader, modifier);
-  };
-  return /*#__PURE__*/React.createElement(MioloContext.Provider, {
-    value: {
-      //context: innerContext, 
-      //setContext: setInnerContext,
-      //miolo: mioloObj,
-      user: innerContext.user,
-      updateUser,
-      authenticated: innerContext.authenticated,
-      fetcher: mioloObj.fetcher,
-      //socket: mioloObj.socket,
-      login,
-      logout,
-      useSsrData
-    }
-  }, children);
-};
-
-var AppBrowser = _ref => {
-  var {
-    children
-  } = _ref;
-  var context = typeof window !== 'undefined' && window.__CONTEXT ? window.__CONTEXT : {};
-  return /*#__PURE__*/React.createElement(MioloContextProvider, {
-    context: context
-  }, children);
-};
-
-var AppServer = _ref => {
-  var {
-    context,
-    children
-  } = _ref;
-  return /*#__PURE__*/React.createElement(MioloContextProvider, {
-    context: context || {}
-  }, children);
-};
-
-export { AppBrowser, AppServer, useMioloContext, withMioloContext };
-//# sourceMappingURL=miolo-react.mjs.map