miolo-react 3.0.0-beta.20 → 3.0.0-beta.201

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "miolo-react",
-  "version": "3.0.0-beta.20",
+  "version": "3.0.0-beta.201",
   "description": "React utils for miolo",
   "author": "Donato Lorenzo <donato@afialapis.com>",
   "contributors": [
@@ -17,28 +17,25 @@
   "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",
+    "prepublishOnly": "npm run lint"
   },
   "dependencies": {
+    "idb-keyval": "^6.2.2",
     "miolo-cli": "../miolo-cli"
-  },  
+  },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -48,12 +45,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,70 @@
-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"
 
+const MioloContextProvider = ({ context, children }) => {
+  const [innerContext, setInnerContext] = useState(context)
+  const [mioloObj, setMioloObj] = useState(miolo_client(context))
 
-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
 
-    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 localLogin = useCallback(
+    async (params) => {
+      const { fetcher } = mioloObj
+      const { config } = innerContext
+
+      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(() => {
+    window.location.href = "/auth/google"
+  }, [])
 
   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,19 +72,19 @@ 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,
@@ -82,14 +92,16 @@ const MioloContextProvider = ({context, children}) => {
         authenticated: innerContext.authenticated,
         fetcher: mioloObj.fetcher,
         //socket: mioloObj.socket,
-        login,
+        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/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
+}

package/src/ssr/useSsrDataOrReload.mjs

@@ -1,43 +1,196 @@
-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, useState } from "react"
+import getSsrDataFromContext from "./getSsrDataFromContext.mjs"
+import usePropsCheck from "./usePropsCheck.mjs"
+
+const makeSerializable = (obj) => {
+  try {
+    return JSON.parse(JSON.stringify(obj))
+  } catch (_) {
+    return obj
+  }
+}
+
+const useSsrDataOrReload = (context, miolo, name, options) => {
+  const { fetcher } = miolo
+  const {
+    defval = [],
+    loader = undefined,
+    url = undefined,
+    params = undefined,
+    modifier = undefined,
+    effect = undefined,
+    model = undefined,
+    cache = false,
+    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 updateSsrData = useCallback(
+    (data) => {
+      setStatus("loading")
+      setSsrData(parseData(data))
+      setStatus("loaded")
+      setError(undefined)
+      if (cache === true) {
+        if (typeof window !== "undefined") {
+          import("idb-keyval").then(({ set }) => {
+            set(`ssr-cache-${name}`, { data: makeSerializable(data), ts: Date.now() }).catch(
+              () => {}
+            )
+          })
+        }
+      }
+    },
+    [parseData, name, cache]
+  )
+
+  const refreshSsrData = useCallback(async () => {
+    if (status === "loading") {
       return
     }
 
-    const {fetcher} = miolo
+    setStatus("loading")
+    setError(undefined)
 
-    async function fetchData() {
-      let nSsrData = await loader(context, fetcher)
-      setSsrData(_maybeModify(nSsrData))
+    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")
+        }
+      }
     }
 
-    fetchData()
-  }, [context, miolo, loader, _maybeModify]) 
-  
+    if (newData !== undefined) {
+      if (cache === true) {
+        if (typeof window !== "undefined") {
+          try {
+            const { set } = await import("idb-keyval")
+            await set(`ssr-cache-${name}`, { data: makeSerializable(newData), ts: Date.now() })
+          } catch (err) {
+            console.error(err)
+          }
+        }
+      }
+      setSsrData(parseData(newData))
+    }
+
+    setStatus("loaded")
+  }, [status, context, fetcher, loader, url, params, parseData, name, cache])
+
+  useEffect(() => {
+    let mounted = true
+
+    const loadData = async () => {
+      if (!mounted) return
+
+      try {
+        if (status === "idle") {
+          const changed =
+            effect === undefined ||
+            (typeof effect === "function" && effect() === true) ||
+            effect === true
+
+          if (changed === true) {
+            let cached = null
+            if (cache === true) {
+              if (typeof window !== "undefined") {
+                try {
+                  const { get } = await import("idb-keyval")
+                  cached = await get(`ssr-cache-${name}`)
+                } catch (err) {
+                  console.error(err)
+                }
+              }
+            }
+
+            if (cached && cached.data !== undefined) {
+              setSsrData(parseData(cached.data))
+
+              if (ttl !== undefined && Date.now() - cached.ts > ttl * 1000) {
+                refreshSsrData()
+              } else {
+                setStatus("loaded")
+              }
+            } else {
+              refreshSsrData()
+            }
+          }
+        }
+      } catch (_) {}
+    }
+
+    loadData()
+
+    return () => {
+      mounted = false
+    }
+  }, [status, refreshSsrData, effect, name, ttl, parseData, cache])
+
   useEffect(() => {
-    try {
-      if (needToRefresh) {
-        setNeedToRefresh(false)
-        refreshSsrData()
+    if (cache === true) {
+      if (ssrDataFromContext !== undefined && typeof window !== "undefined") {
+        import("idb-keyval").then(({ set }) => {
+          set(`ssr-cache-${name}`, {
+            data: makeSerializable(ssrDataFromContext),
+            ts: Date.now()
+          }).catch(() => {})
+        })
       }
-    } catch(e) {}
-  }, [needToRefresh, refreshSsrData]) 
+    }
+  }, [ssrDataFromContext, name, cache])
+
+  const invalidate = useCallback(() => {
+    if (typeof window !== "undefined") {
+      import("idb-keyval").then(({ del }) => {
+        del(`ssr-cache-${name}`).catch(() => {})
+      })
+    }
+  }, [name])
 
-  return [ssrData, (data) => setSsrData(_maybeModify(data)), refreshSsrData]
+  return {
+    data: ssrData,
+    setData: updateSsrData,
+    refresh: refreshSsrData,
+    invalidate,
+    error,
+    ok: error === undefined,
+    ready: status === "loaded"
+  }
 }
 
-export {useSsrDataOrReload}
+export { useSsrDataOrReload }