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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "miolo-react",
-  "version": "3.0.0-beta.23",
+  "version": "3.0.0-beta.230",
   "description": "React utils for miolo",
   "author": "Donato Lorenzo <donato@afialapis.com>",
   "contributors": [
@@ -17,28 +17,26 @@
   "license": "MIT",
   "type": "module",
   "exports": {
-    ".": {
-      "development": "./src/index.mjs",
-      "import": "./dist/miolo-react.mjs",
-      "default": "./dist/miolo-react.umd.js"
-    }
+    ".": "./src/index.mjs"
   },
   "files": [
-    "dist",
-    "src"
+    "src",
+    "package.json"
   ],
   "scripts": {
-    "reset": "rm -fr package-lock.json npm-lock.yaml dist/* && npm i",
-    "clean": "rm -fr ./dist/* ",
-    "bundle": "npx xeira bundle --target=browser --source_index=./src/index.mjs --bundle_folder=./dist --bundle_name=miolo-react --bundle_node_polyfill=true --bundle_extension=umd,mjs",
-    "dist": "npm run clean && npm run bundle"
+    "reset": "rm -fr package-lock.json npm-lock.yaml node_modules && npm i",
+    "lint": "biome check ./src --reporter=github",
+    "lint:fix": "biome check --write ./src --reporter=github",
+    "lint:types": "tsc -p jsconfig.json --noEmit",
+    "prepublishOnly": "npm run lint"
   },
   "dependencies": {
+    "idb-keyval": "^6.3.0",
     "miolo-cli": "../miolo-cli"
-  },  
+  },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -48,12 +46,7 @@
       "optional": true
     }
   },
-  "devDependencies": {
-    "xeira": "^1.2.3"
-  },
-  "eslintConfig": {
-    "extends": [
-      "../../node_modules/xeira/configs/eslint.react.mjs"
-    ]
+  "engines": {
+    "node": ">=24"
   }
-}
+}

package/src/AppBrowser.jsx

@@ -1,14 +1,9 @@
-import React from 'react'
-import MioloContextProvider from './context/MioloContextProvider.jsx'
+import MioloContextProvider from "./context/MioloContextProvider.jsx"
 
 const AppBrowser = ({ children }) => {
-  const context = typeof window !== 'undefined' && window.__CONTEXT ? window.__CONTEXT : {};
+  const context = typeof window !== "undefined" && window.__CONTEXT ? window.__CONTEXT : {}
 
-  return (
-    <MioloContextProvider context={context}>
-      {children}
-    </MioloContextProvider>
-  )  
+  return <MioloContextProvider context={context}>{children}</MioloContextProvider>
 }
 
 export default AppBrowser

package/src/AppServer.jsx

@@ -1,17 +1,7 @@
+import MioloContextProvider from "./context/MioloContextProvider.jsx"
 
-import React from 'react'
-import MioloContextProvider from './context/MioloContextProvider.jsx'
-
-
-const AppServer = ({context, children}) => {
-
-  return (
-    <MioloContextProvider 
-        context= {context || {}}>
-      {children}
-    </MioloContextProvider>
-  )
+const AppServer = ({ context, children }) => {
+  return <MioloContextProvider context={context || {}}>{children}</MioloContextProvider>
 }
 
 export default AppServer
-

package/src/context/MioloContext.mjs

@@ -1,5 +1,5 @@
-import React from 'react'
+import React from "react"
 
 const MioloContext = React.createContext()
 
-export default MioloContext
+export default MioloContext

package/src/context/MioloContextProvider.jsx

@@ -1,60 +1,91 @@
-import React , {useState, useEffect, useCallback} from 'react'
-import Context from './MioloContext.mjs'
-import { miolo_client } from 'miolo-cli'
-import { useSsrDataOrReload } from '../ssr/useSsrDataOrReload.mjs'
+import { miolo_client } from "miolo-cli"
+import { useCallback, /*useEffect,*/ useState } from "react"
+import { useSsrDataOrReload } from "../ssr/useSsrDataOrReload.mjs"
+import Context from "./MioloContext.mjs"
 
+/**
+ * @typedef {import('../ssr/useSsrDataOrReload.mjs').MioloSSRData} MioloSSRData
+ * @typedef {import('../ssr/useSsrDataOrReload.mjs').MioloSSRDataOptions} MioloSSRDataOptions
+ *
+ * @typedef {Object} MioloContextData
+ * @property {Object} user - session's data as in app.ctx
+ * @property {boolean} authenticated - authenticated flag as in app.ctx
+ * @property {Function} updateUser - function to update user
+ * @property {Function} googleLogin - function to login with google
+ * @property {Function} localLogin - function to login with local
+ * @property {Function} logout - function to logout
+ * @property {(name: string, options: MioloSSRDataOptions) => MioloSSRData} useSsrData - function to handle some ssr data
+ * @property {string} authMethod - authentication method
+ */
 
-const MioloContextProvider = ({context, children}) => {
-  const [innerContext, setInnerContext]= useState(context)
-  const [mioloObj, setMioloObj]= useState(miolo_client(context))
-    
-  useEffect(() => {
+/**
+ * @param {Object} context - Miolo's app.ctx object
+ * @param {React.ReactNode} children - React children
+ * @returns {React.ReactNode}
+ */
+const MioloContextProvider = ({ context, children }) => {
+  const [innerContext, setInnerContext] = useState(context)
+  const [mioloObj, _setMioloObj] = useState(miolo_client(context))
+
+  /*useEffect(() => {
     setInnerContext(context)
     setMioloObj(miolo_client(context))
-  }, [context])
-  
-  const login = useCallback(async (credentials) => {
-    const { fetcher } = mioloObj
-    const { config } = innerContext
+  }, [context])*/
+
+  const localLogin = useCallback(
+    async (params) => {
+      const { fetcher } = mioloObj
+      const { config } = innerContext
 
-    const url = config.login_url || '/login'
-    const resp = await fetcher.login(url, credentials)
-
-    if (resp?.data) {
-      if (resp?.data?.authenticated) {
-        setInnerContext(current => {
-          return {
-            ...current,
-            ...resp?.data,
-          }
-        })
+      const url = config.login_url || "/login"
+      const resp = await fetcher.post(url, params)
+
+      if (resp?.data) {
+        if (resp?.data?.authenticated) {
+          setInnerContext((current) => {
+            return {
+              ...current,
+              ...resp.data,
+              config: {
+                ...current.config,
+                ...(resp.data?.config || {})
+              }
+            }
+          })
+        }
+
+        return resp?.data
       }
 
-      return resp?.data
-    }
+      return {}
+    },
+    [innerContext, mioloObj]
+  )
 
-    return {}
-  }, [innerContext, mioloObj])
+  const googleLogin = useCallback((redirect = "/") => {
+    const url = `/auth/google?redirect=${encodeURIComponent(redirect)}`
+    window.location.href = url
+  }, [])
 
   const logout = useCallback(async () => {
     const { fetcher } = mioloObj
     const { config } = innerContext
 
-    const url = config.logout_url || '/logout'
-    const _resp = await fetcher.logout(url)
+    const url = config.logout_url || "/logout"
+    const _resp = await fetcher.post(url)
     // resp.redirected= true
 
-    setInnerContext(current => {
+    setInnerContext((current) => {
       return {
         ...current,
         user: undefined,
-        authenticated: false,
+        authenticated: false
       }
     })
 
     return {
       user: undefined,
-      authenticated: false,
+      authenticated: false
     }
   }, [innerContext, mioloObj])
 
@@ -62,34 +93,37 @@ const MioloContextProvider = ({context, children}) => {
     setInnerContext((current) => {
       return {
         ...current,
-        user,
+        user
       }
     })
   }, [])
 
-  const useSsrData = (name, defval, loader, modifier) => {
-    return useSsrDataOrReload(innerContext, mioloObj, name, defval, loader, modifier)
-  }  
-  
+  const useSsrData = (name, options) => {
+    return useSsrDataOrReload(innerContext, mioloObj, name, options)
+  }
+
   return (
-    <Context.Provider 
+    <Context.Provider
       value={{
-        //context: innerContext, 
+        //context: innerContext,
         //setContext: setInnerContext,
         //miolo: mioloObj,
         user: innerContext.user,
         updateUser,
         authenticated: innerContext.authenticated,
         fetcher: mioloObj.fetcher,
-        //socket: mioloObj.socket,
-        login,
+        socket: mioloObj.socket,
+        logger: mioloObj.logger,
+        googleLogin,
+        localLogin,
         logout,
-        useSsrData
-      }}>
+        useSsrData,
+        authMethod: innerContext?.config?.auth_method
+      }}
+    >
       {children}
     </Context.Provider>
   )
 }
 
-
 export default MioloContextProvider

package/src/context/useMioloContext.jsx

@@ -1,5 +1,5 @@
-import {useContext} from 'react'
-import MioloContext from './MioloContext.mjs'
+import { useContext } from "react"
+import MioloContext from "./MioloContext.mjs"
 
 const useMioloContext = () => useContext(MioloContext)
 

package/src/context/withMioloContext.jsx

@@ -1,15 +1,10 @@
-import React, {useContext} from 'react'
-import MioloContext from './MioloContext.mjs'
+import { useContext } from "react"
+import MioloContext from "./MioloContext.mjs"
 
-/* eslint react/display-name:0 */
 const withMioloContext = (BaseComponent) => (props) => {
   const context = useContext(MioloContext)
 
-  return (
-    <BaseComponent {...props}
-                   {...context}/>
-  );
+  return <BaseComponent {...props} {...context} />
 }
 
-
-export default withMioloContext
+export default withMioloContext

package/src/index.mjs

@@ -1,7 +1,6 @@
-import withMioloContext from './context/withMioloContext.jsx'
-import useMioloContext from './context/useMioloContext.jsx'
+import AppBrowser from "./AppBrowser.jsx"
+import AppServer from "./AppServer.jsx"
+import useMioloContext from "./context/useMioloContext.jsx"
+import withMioloContext from "./context/withMioloContext.jsx"
 
-import AppBrowser from './AppBrowser.jsx'
-import AppServer from './AppServer.jsx'
-
-export {withMioloContext, useMioloContext, AppBrowser, AppServer}
+export { AppBrowser, AppServer, useMioloContext, withMioloContext }

package/src/ssr/getSsrDataFromContext.mjs

@@ -1,32 +1,31 @@
-
 const _getDataFromWindow = (name) => {
   try {
-    if (window != undefined) {
-      const ssr_data= window.__CONTEXT.ssr_data
-      
-      if (ssr_data!=undefined) {
-        if (ssr_data[name]!=undefined) {
+    if (window !== undefined) {
+      const ssr_data = window.__CONTEXT.ssr_data
+
+      if (ssr_data !== undefined) {
+        if (ssr_data[name] !== undefined) {
           return ssr_data[name]
         }
       }
     }
-  } catch(e) {}
-    
+  } catch (_) {}
+
   return undefined
 }
 
 const getSsrDataFromContext = (context, name) => {
-  let data= undefined
+  let data
 
-  if (context?.ssr_data != undefined && context?.ssr_data[name]!=undefined) {
-    data= context.ssr_data[name]
+  if (context?.ssr_data !== undefined && context?.ssr_data[name] !== undefined) {
+    data = context.ssr_data[name]
   } else {
-    const wdata= _getDataFromWindow(name)
-    if (wdata != undefined) {
-      data= wdata
+    const wdata = _getDataFromWindow(name)
+    if (wdata !== undefined) {
+      data = wdata
     }
   }
-  
+
   return data
 }
 

package/src/ssr/patchHistory.mjs

@@ -0,0 +1,25 @@
+let _historyPatched = false
+
+export default function 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
+}

package/src/ssr/useIndexedDb.mjs

@@ -0,0 +1,58 @@
+import { useCallback } from "react"
+
+const _makeSerializable = (obj) => {
+  try {
+    return JSON.parse(JSON.stringify(obj))
+  } catch (_) {
+    return obj
+  }
+}
+
+export default function useIndexedDb(name, logger, cache, ttl) {
+  const cacheInvalidate = useCallback(async () => {
+    if (typeof window !== "undefined") {
+      const { del } = await import("idb-keyval")
+      await del(`ssr-cache-${name}`)
+    }
+  }, [name])
+
+  const cacheSet = useCallback(
+    async (data) => {
+      if (cache === true) {
+        if (typeof window !== "undefined") {
+          try {
+            const { set } = await import("idb-keyval")
+            await set(`ssr-cache-${name}`, { data: _makeSerializable(data), ts: Date.now() })
+          } catch (err) {
+            logger.error(`[miolo-react][ssr][${name}] error setting cache for ${name}: ${err}`)
+          }
+        }
+      }
+    },
+    [logger, cache, name]
+  )
+
+  const cacheGet = useCallback(async () => {
+    if (cache === true) {
+      if (typeof window !== "undefined") {
+        try {
+          const { get } = await import("idb-keyval")
+          const cached = await get(`ssr-cache-${name}`)
+          if (cached && cached.data !== undefined) {
+            const expired = ttl !== undefined && Date.now() - cached.ts > ttl * 1000
+            return [cached.data, expired, cached.ts]
+          }
+        } catch (err) {
+          logger.error(`[miolo-react][ssr][${name}] error getting cache for ${name}: ${err}`)
+        }
+      }
+    }
+    return [null, false]
+  }, [logger, cache, name, ttl])
+
+  return {
+    cacheInvalidate,
+    cacheSet,
+    cacheGet
+  }
+}

package/src/ssr/useOnWindowFocus.mjs

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from "react"
+
+export default function useOnWindowFocus(callback) {
+  // Usamos un ref para guardar el callback más reciente
+  // Esto evita problemas de re-renderizados si el callback cambia
+  const callbackRef = useRef(callback)
+
+  useEffect(() => {
+    callbackRef.current = callback
+  }, [callback])
+
+  useEffect(() => {
+    const handleFocus = () => {
+      // document.hidden es parte de la Page Visibility API
+      // Solo ejecutamos el callback si la pestaña realmente está visible
+      if (!document.hidden && callbackRef.current) {
+        callbackRef.current()
+      }
+    }
+
+    // Escuchamos cuando la pestaña se vuelve visible (Page Visibility API)
+    document.addEventListener("visibilitychange", handleFocus)
+
+    // Escuchamos cuando la ventana recupera el foco (Fallback)
+    window.addEventListener("focus", handleFocus)
+
+    // Limpieza de eventos al desmontar
+    return () => {
+      document.removeEventListener("visibilitychange", handleFocus)
+      window.removeEventListener("focus", handleFocus)
+    }
+  }, [])
+}

package/src/ssr/usePropsCheck.mjs

@@ -0,0 +1,69 @@
+import { useEffect, useRef } from "react"
+
+export default function usePropsCheck(loader, effect, modifier, desc) {
+  const prevLoader = useRef(loader)
+  const prevEffect = useRef(effect)
+  const prevModifier = useRef(modifier)
+  const loaderChangeCount = useRef(0)
+  const effectChangeCount = useRef(0)
+  const modifierChangeCount = useRef(0)
+  const loaderChangeTime = useRef(0)
+  const effectChangeTime = useRef(0)
+  const modifierChangeTime = useRef(0)
+
+  useEffect(() => {
+    if (prevLoader.current !== undefined && prevLoader.current !== loader) {
+      const now = Date.now()
+      // Si el cambio ocurrió rápido (<100ms desde el último cambio), sumamos al contador continuo
+      if (now - loaderChangeTime.current < 100) {
+        loaderChangeCount.current += 1
+        if (loaderChangeCount.current >= 4) {
+          console.warn(
+            `🚨 [miolo][useSsrDataOrReload]: 'options.loader' varies too frequently. Wrap it in a useCallback! ${desc}`
+          )
+        }
+      } else {
+        // Ha pasado suficiente tiempo como para ser un cambio humano/aislado
+        loaderChangeCount.current = 1
+      }
+      loaderChangeTime.current = now
+    }
+    prevLoader.current = loader
+  }) // Evalúa en cada render
+
+  useEffect(() => {
+    if (prevEffect.current !== undefined && prevEffect.current !== effect) {
+      const now = Date.now()
+      if (now - effectChangeTime.current < 100) {
+        effectChangeCount.current += 1
+        if (effectChangeCount.current >= 4) {
+          console.warn(
+            `🚨 [miolo][useSsrDataOrReload]: 'options.effect' varies too frequently. Wrap it in a useMemo or useCallback! ${desc}`
+          )
+        }
+      } else {
+        effectChangeCount.current = 1
+      }
+      effectChangeTime.current = now
+    }
+    prevEffect.current = effect
+  }) // Evalúa en cada render
+
+  useEffect(() => {
+    if (prevModifier.current !== undefined && prevModifier.current !== modifier) {
+      const now = Date.now()
+      if (now - modifierChangeTime.current < 100) {
+        modifierChangeCount.current += 1
+        if (modifierChangeCount.current >= 4) {
+          console.warn(
+            `🚨 [miolo][useSsrDataOrReload]: 'options.modifier' varies too frequently. Wrap it in a useCallback! ${desc}`
+          )
+        }
+      } else {
+        modifierChangeCount.current = 1
+      }
+      modifierChangeTime.current = now
+    }
+    prevModifier.current = modifier
+  }) // Evalúa en cada render
+}