miolo-react 3.0.0-beta.216 → 3.0.0-beta.219

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "miolo-react",
-  "version": "3.0.0-beta.216",
+  "version": "3.0.0-beta.219",
   "description": "React utils for miolo",
   "author": "Donato Lorenzo <donato@afialapis.com>",
   "contributors": [
@@ -30,7 +30,7 @@
     "prepublishOnly": "npm run lint"
   },
   "dependencies": {
-    "idb-keyval": "^6.2.5",
+    "idb-keyval": "^6.2.6",
     "miolo-cli": "../miolo-cli"
   },
   "peerDependencies": {

package/src/context/MioloContextProvider.jsx

@@ -1,11 +1,11 @@
 import { miolo_client } from "miolo-cli"
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, /*useEffect,*/ useState } from "react"
 import { useSsrDataOrReload } from "../ssr/useSsrDataOrReload.mjs"
 import Context from "./MioloContext.mjs"
 
 const MioloContextProvider = ({ context, children }) => {
   const [innerContext, setInnerContext] = useState(context)
-  const [mioloObj, setMioloObj] = useState(miolo_client(context))
+  const [mioloObj, _setMioloObj] = useState(miolo_client(context))
 
   /*useEffect(() => {
     setInnerContext(context)

package/src/ssr/useSsrDataOrReload.mjs

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import getSsrDataFromContext from "./getSsrDataFromContext.mjs"
 import useOnWindowFocus from "./useOnWindowFocus.mjs"
 import usePropsCheck from "./usePropsCheck.mjs"
@@ -11,6 +11,38 @@ const _makeSerializable = (obj) => {
   }
 }
 
+let _historyPatched = false
+const patchHistory = () => {
+  if (typeof window === "undefined" || _historyPatched) return
+
+  const originalPushState = window.history.pushState
+  window.history.pushState = function (...args) {
+    const ret = originalPushState.apply(this, args)
+    window.dispatchEvent(new Event("miolo-navigation"))
+    return ret
+  }
+
+  const originalReplaceState = window.history.replaceState
+  window.history.replaceState = function (...args) {
+    const ret = originalReplaceState.apply(this, args)
+    window.dispatchEvent(new Event("miolo-navigation"))
+    return ret
+  }
+
+  window.addEventListener("popstate", () => {
+    window.dispatchEvent(new Event("miolo-navigation"))
+  })
+
+  _historyPatched = true
+}
+
+const globalSocketState = {
+  rooms: new Map(),
+  unsubscribeTimers: new Map(),
+  lastSubscribeEmitted: new Map(),
+  versionsRequestedAt: 0
+}
+
 const useSsrDataOrReload = (context, miolo, name, options) => {
   const { fetcher, socket, logger } = miolo
   const {
@@ -51,6 +83,7 @@ const useSsrDataOrReload = (context, miolo, name, options) => {
   )
   const [status, setStatus] = useState(ssrDataFromContext !== undefined ? "loaded" : "idle")
   const [error, setError] = useState(undefined)
+  const pendingLazyRefreshRef = useRef(false)
 
   const cacheInvalidate = useCallback(async () => {
     if (typeof window !== "undefined") {
@@ -95,6 +128,7 @@ const useSsrDataOrReload = (context, miolo, name, options) => {
 
   const updateSsrData = useCallback(
     (data) => {
+      pendingLazyRefreshRef.current = false
       setStatus("loading")
       setSsrData(parseData(data))
       setError(undefined)
@@ -109,6 +143,7 @@ const useSsrDataOrReload = (context, miolo, name, options) => {
       return
     }
 
+    pendingLazyRefreshRef.current = false
     setStatus("loading")
     setError(undefined)
 
@@ -139,7 +174,7 @@ const useSsrDataOrReload = (context, miolo, name, options) => {
     setStatus("loaded")
   }, [status, context, fetcher, loader, url, params, parseData, name, cacheSet, logger])
 
-  const checkCacheVersions = useCallback(
+  const cacheVersionsCheck = useCallback(
     async (versions) => {
       logger.verbose(
         `[miolo-react][ssr][${name}] Backend versions received: ${JSON.stringify(versions)}`
@@ -223,30 +258,68 @@ const useSsrDataOrReload = (context, miolo, name, options) => {
     }
   }, [ssrDataFromContext, cacheSet])
 
+  const handlersRef = useRef({})
+
+  useEffect(() => {
+    handlersRef.current = {
+      cacheVersionsCheck,
+      cacheInvalidate,
+      refreshSsrData,
+      refreshSsrDataLazy: () => {
+        pendingLazyRefreshRef.current = true
+      }
+    }
+  })
+
+  useEffect(() => {
+    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()
+      }
+    }
+    window.addEventListener("miolo-navigation", onNav)
+    return () => {
+      window.removeEventListener("miolo-navigation", onNav)
+    }
+  }, [cache, name, logger, refreshSsrData])
+
   useEffect(() => {
     if (!socket || cache !== true) {
       return
     }
 
-    const onConnect = () => {
-      logger.verbose(`[miolo-react][ssr][${name}] Socket connected, subscribing`)
-      socket.emit("ssr-subscribe", name)
-      logger.verbose(`[miolo-react][ssr][${name}] Asking for ssr-versions`)
-      socket.emit("ssr-versions")
+    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 onInvalidate = async (data) => {
-      if (data.name !== name) return
+    const requestSubscribeAndVersions = () => {
+      const now = Date.now()
+      const lastSub = globalSocketState.lastSubscribeEmitted.get(name) || 0
 
-      logger.verbose(`[miolo-react][ssr][${name}] ssr-invalidate ${JSON.stringify(data)}`)
-      if (data.exclude_socket_id && data.exclude_socket_id === socket.id) {
-        logger.verbose(
-          `[miolo-react][ssr][${name}] ssr-invalidate ${data.name} ignored for socketid ${socket.id}`
-        )
-        return
+      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")
       }
-      logger.info(`[miolo-react][ssr][${name}] ssr-invalidate ${data.name}`)
-      await cacheInvalidate()
     }
 
     const onRefresh = async (data) => {
@@ -261,31 +334,66 @@ const useSsrDataOrReload = (context, miolo, name, options) => {
         )
         return
       }
-      logger.info(`[miolo-react][ssr][${name}] ssr-refresh ${data.name}`)
-      await cacheInvalidate()
-      refreshSsrData()
+      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) {
+        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) {
-      onConnect()
+      requestSubscribeAndVersions()
     }
 
-    socket.on("connect", onConnect)
-    socket.on("ssr-versions", checkCacheVersions)
-    socket.on("ssr-invalidate", onInvalidate)
+    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`)
-      socket.emit("ssr-unsubscribe", name)
-      socket.off("connect", onConnect)
-      socket.off("ssr-versions", checkCacheVersions)
-      socket.off("ssr-invalidate", onInvalidate)
+
+      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, checkCacheVersions, logger, cacheInvalidate, refreshSsrData])
+  }, [name, cache, socket, logger])
 
   useOnWindowFocus(() => {
     if (cache !== true) {
@@ -297,7 +405,11 @@ const useSsrDataOrReload = (context, miolo, name, options) => {
     logger.verbose(
       `[miolo-react][ssr][${name}] Window focused, checking versions (socket id is ${socket.id})`
     )
-    socket.emit("ssr-versions")
+    const now = Date.now()
+    if (now - globalSocketState.versionsRequestedAt > 500) {
+      globalSocketState.versionsRequestedAt = now
+      socket.emit("ssr-versions")
+    }
   }, [name, cache, logger, socket])
 
   return {