miolo-react 3.0.0-beta.207 → 3.0.0-beta.209

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "miolo-react",
-  "version": "3.0.0-beta.207",
+  "version": "3.0.0-beta.209",
   "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.4",
+    "idb-keyval": "^6.2.5",
     "miolo-cli": "../miolo-cli"
   },
   "peerDependencies": {

package/src/ssr/useSsrDataOrReload.mjs

@@ -11,7 +11,7 @@ const makeSerializable = (obj) => {
 }
 
 const useSsrDataOrReload = (context, miolo, name, options) => {
-  const { fetcher } = miolo
+  const { fetcher, socket, logger } = miolo
   const {
     defval = [],
     loader = undefined,
@@ -47,9 +47,9 @@ const useSsrDataOrReload = (context, miolo, name, options) => {
   const [ssrData, setSsrData] = useState(
     parseData(ssrDataFromContext !== undefined ? ssrDataFromContext : defval)
   )
-
   const [status, setStatus] = useState(ssrDataFromContext !== undefined ? "loaded" : "idle")
   const [error, setError] = useState(undefined)
+  const [socketInited, setSocketInited] = useState(false)
 
   const updateSsrData = useCallback(
     (data) => {
@@ -112,6 +112,20 @@ const useSsrDataOrReload = (context, miolo, name, options) => {
     setStatus("loaded")
   }, [status, context, fetcher, loader, url, params, parseData, name, cache])
 
+  const invalidateCache = useCallback((tName, callback = undefined) => {
+    if (typeof window !== "undefined") {
+      import("idb-keyval").then(({ del }) => {
+        del(`ssr-cache-${tName}`)
+          .catch(() => {})
+          .then(() => {
+            if (callback) {
+              callback()
+            }
+          })
+      })
+    }
+  }, [])
+
   useEffect(() => {
     let mounted = true
 
@@ -174,19 +188,38 @@ const useSsrDataOrReload = (context, miolo, name, options) => {
     }
   }, [ssrDataFromContext, name, cache])
 
-  const invalidate = useCallback(() => {
-    if (typeof window !== "undefined") {
-      import("idb-keyval").then(({ del }) => {
-        del(`ssr-cache-${name}`).catch(() => {})
-      })
+  useEffect(() => {
+    if (socket === undefined) {
+      return
+    }
+
+    if (socketInited) {
+      return
     }
-  }, [name])
+    setSocketInited(true)
+
+    socket.on("connect", () => {
+      logger.verbose("[ssr] Socket connected")
+    })
+
+    socket.on("ssr-invalidate", (data) => {
+      logger.info(`[ssr] ssr-invalidate ${data.name}`)
+      invalidateCache(data.name)
+    })
+
+    socket.on("ssr-refresh", (data) => {
+      logger.info(`[ssr] ssr-refresh ${data.name}`)
+      invalidateCache(data.name, () => {
+        refreshSsrData()
+      })
+    })
+  }, [socket, socketInited, logger, invalidateCache, refreshSsrData])
 
   return {
     data: ssrData,
     setData: updateSsrData,
     refresh: refreshSsrData,
-    invalidate,
+    invalidate: (callback) => invalidateCache(name, callback),
     error,
     ok: error === undefined,
     ready: status === "loaded"