@based/react 4.5.2 → 4.5.4

package/dist/useQuery.d.ts

@@ -7,7 +7,7 @@ export declare const useQueries: <T = any>(name?: string, payloads?: any[], opts
     error?: BasedError;
     checksum?: string;
 }[];
-export declare const useQuery: <N extends string | number>(name: N, payload?: QueryMap[N]["payload"], opts?: {
+export declare const useQuery: <N extends keyof QueryMap>(name: N, payload?: QueryMap[N]["payload"], opts?: {
     persistent: boolean;
 }) => {
     loading: boolean;

package/dist/useQuery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useQuery.d.ts","sourceRoot":"","sources":["../src/useQuery.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAIjE,eAAO,MAAM,UAAU,mBACd,MAAM,aACF,GAAG,EAAE,SACT;IACL,UAAU,EAAE,OAAO,CAAA;CACpB;aAEQ,OAAO;;YAER,UAAU;eACP,MAAM;GA4DlB,CAAA;AAED,eAAO,MAAM,QAAQ,gFAGZ;IACL,UAAU,EAAE,OAAO,CAAA;CACpB;aAEQ,OAAO;;YAER,UAAU;eACP,MAAM;CAsElB,CAAA"}
+{"version":3,"file":"useQuery.d.ts","sourceRoot":"","sources":["../src/useQuery.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAIjE,eAAO,MAAM,UAAU,mBACd,MAAM,aACF,GAAG,EAAE,SACT;IACL,UAAU,EAAE,OAAO,CAAA;CACpB;aAEQ,OAAO;;YAER,UAAU;eACP,MAAM;GA4DlB,CAAA;AAED,eAAO,MAAM,QAAQ,+EAGZ;IACL,UAAU,EAAE,OAAO,CAAA;CACpB;aAEQ,OAAO;;YAER,UAAU;eACP,MAAM;CAsElB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@based/react",
-  "version": "4.5.2",
+  "version": "4.5.4",
   "license": "MIT",
   "main": "dist/index.js",
   "scripts": {
@@ -17,7 +17,8 @@
     "ts-node": "10.9.1",
     "typescript": "^4.3.5",
     "react-dom": "^18.2.0",
-    "@saulx/aristotle": "^4.7.1"
+    "@saulx/aristotle": "^4.7.1",
+    "@based/client": "^4.8.10"
   },
   "peerDependencies": {
     "@based/client": "^4.8.10",

package/src/Ctx.ts

@@ -1,4 +0,0 @@
-import { createContext } from 'react'
-import { BasedClient } from '@based/client'
-
-export const Ctx = createContext<BasedClient>(null)

package/src/Provider.ts

@@ -1,10 +0,0 @@
-import { createElement, FC, ReactNode } from 'react'
-import { BasedClient } from '@based/client'
-import { Ctx } from './Ctx'
-
-export const Provider: FC<{
-  client: BasedClient
-  children: ReactNode
-}> = ({ client, children }) => {
-  return createElement(Ctx.Provider, { value: client }, children)
-}

package/src/index.ts

@@ -1,8 +0,0 @@
-export * from './Ctx'
-export * from './Provider'
-export * from './useAuthState'
-export * from './useClient'
-export * from './useConnected'
-export * from './useLoading'
-export * from './useQuery'
-export * from './useWindow'

package/src/useAuthState.ts

@@ -1,21 +0,0 @@
-import { useContext, useState, useEffect } from 'react'
-import { BasedClient, AuthState } from '@based/client'
-import { Ctx } from './Ctx'
-
-export const useAuthState = (): AuthState => {
-  const client: BasedClient = useContext(Ctx)
-  const [state, setState] = useState<AuthState>(client?.authState || {})
-
-  useEffect(() => {
-    if (client) {
-      setState(client.authState)
-      const listener = (authState) => {
-        setState(authState)
-      }
-      client.on('authstate-change', listener)
-      return () => client.off('authstate-change', listener)
-    }
-  }, [client])
-
-  return state
-}

package/src/useClient.ts

@@ -1,7 +0,0 @@
-import { useContext } from 'react'
-import { BasedClient } from '@based/client'
-import { Ctx } from './Ctx'
-
-export const useClient = (): BasedClient => {
-  return useContext(Ctx)
-}

package/src/useConnected.ts

@@ -1,27 +0,0 @@
-import { useContext, useState, useEffect } from 'react'
-import { BasedClient } from '@based/client'
-import { Ctx } from './Ctx'
-
-export const useConnected = () => {
-  const client: BasedClient = useContext(Ctx)
-  const [connected, setConnected] = useState(client.connected)
-
-  useEffect(() => {
-    if (client) {
-      setConnected(client.connected)
-      const listener = () => {
-        setConnected(client.connected)
-      }
-      client.on('disconnect', listener)
-      client.on('reconnect', listener)
-      client.on('connect', listener)
-      return () => {
-        client.off('disconnect', listener)
-        client.off('reconnect', listener)
-        client.off('connect', listener)
-      }
-    }
-  }, [client])
-
-  return { connected }
-}

package/src/useLoading.ts

@@ -1,14 +0,0 @@
-import { useState, useEffect } from 'react'
-
-export const useLoadingListeners: Set<Function> = new Set()
-export const hooksLoading: Set<number> = new Set()
-export const useLoading = () => {
-  const [isLoading, setLoading] = useState(hooksLoading.size > 0)
-  useEffect(() => {
-    useLoadingListeners.add(setLoading)
-    return () => {
-      useLoadingListeners.delete(setLoading)
-    }
-  }, [])
-  return isLoading
-}

package/src/useQuery.ts

@@ -1,158 +0,0 @@
-import { useContext, useState, useEffect } from 'react'
-import { BasedClient, BasedError, QueryMap } from '@based/client'
-import { Ctx } from './Ctx'
-import { hooksLoading, useLoadingListeners } from './useLoading'
-
-export const useQueries = <T = any>(
-  name?: string,
-  payloads?: any[],
-  opts?: {
-    persistent: boolean
-  }
-): {
-  loading: boolean
-  data?: T
-  error?: BasedError
-  checksum?: string
-}[] => {
-  // TODO add error handling
-  const client: BasedClient = useContext(Ctx)
-  let key = ''
-  let sum = ''
-
-  if (client && name) {
-    const queries = Array(payloads.length)
-    const result = payloads.map((payload, i) => {
-      // @ts-ignore
-      const q = client.query(name, payload, opts)
-      const { id, cache } = q
-      queries[i] = q
-      key += id
-
-      if (cache) {
-        sum += cache.checksum
-        return { loading: false, data: cache.value, checksum: cache.checksum }
-      }
-
-      return { loading: true }
-    })
-
-    const [, update] = useState(sum)
-
-    useEffect(() => {
-      let raf
-      const listener = () => {
-        if (!raf) {
-          raf = requestAnimationFrame(() => {
-            raf = null
-            update(
-              queries.reduce((sum, { cache }) => {
-                return cache ? sum + cache.checksum : sum
-              }, '')
-            )
-          })
-        }
-      }
-
-      const unsubs = queries.map((q) => {
-        return q.subscribe(listener)
-      })
-
-      return () => {
-        unsubs.forEach((unsubscribe) => unsubscribe())
-        if (raf) {
-          cancelAnimationFrame(raf)
-        }
-      }
-    }, [key])
-
-    return result
-  }
-
-  useState(sum)
-  useEffect(() => {}, [key])
-
-  return Array(payloads.length).fill({ loading: true })
-}
-
-export const useQuery = <N extends keyof QueryMap>(
-  name: N,
-  payload?: QueryMap[N]['payload'],
-  opts?: {
-    persistent: boolean
-  }
-): {
-  loading: boolean
-  data?: QueryMap[N]['result']
-  error?: BasedError
-  checksum?: number
-} => {
-  const client: BasedClient = useContext(Ctx)
-
-  if (client && name) {
-    // @ts-ignore
-    const q = client.query(name, payload, opts)
-    const { id, cache } = q
-    const [checksumOrError, update] = useState<number | BasedError>(
-      cache?.checksum
-    )
-
-    useEffect(() => {
-      const unsubscribe = q.subscribe(
-        (_, checksum) => {
-          update(checksum)
-        },
-        (err) => {
-          update(err)
-        }
-      )
-      return () => {
-        const isLoading = hooksLoading.size > 0
-        if (hooksLoading.delete(id) && !(hooksLoading.size > 0) && isLoading) {
-          useLoadingListeners.forEach((fn) => {
-            fn(false)
-          })
-        }
-        unsubscribe()
-        update(0)
-      }
-    }, [id])
-
-    if (checksumOrError) {
-      const isLoading = hooksLoading.size > 0
-      if (hooksLoading.delete(id)) {
-        if (!(hooksLoading.size > 0) && isLoading) {
-          useLoadingListeners.forEach((fn) => {
-            fn(false)
-          })
-        }
-      }
-
-      if (typeof checksumOrError === 'number') {
-        if (!cache) {
-          return { loading: true }
-        }
-
-        return { loading: false, data: cache.value, checksum: checksumOrError }
-      }
-
-      return { loading: false, error: checksumOrError }
-    }
-
-    const isLoading = hooksLoading.size > 0
-    if (hooksLoading.add(id)) {
-      if (!isLoading) {
-        useLoadingListeners.forEach((fn) => {
-          fn(true)
-        })
-      }
-    }
-
-    return { loading: true }
-  }
-
-  useState()
-  useEffect(() => {}, [null])
-
-  return { loading: true }
-}

package/src/useWindow.ts

@@ -1,151 +0,0 @@
-import { useState, useEffect, useContext, useRef } from 'react'
-import { Ctx } from './Ctx'
-import { BasedClient, BasedQuery } from '@based/client'
-import { hash } from '@saulx/hash'
-
-type UseWindowState = {
-  loading: boolean
-  items: any[]
-  checksum?: number
-}
-
-export const useWindow = (
-  name: string,
-  getPayload: ({ offset, limit }) => any,
-  opts: {
-    path: string[]
-    pages: number[]
-    size: number
-    persistent?: boolean
-  },
-  dependencies?: any
-): UseWindowState => {
-  const [checksum, setCheckum] = useState(0)
-  const cache = useRef<UseWindowState>()
-  const client: BasedClient = useContext(Ctx)
-  const queries = useRef<BasedQuery[]>()
-  const unsubs = useRef<{}>()
-  const raf = useRef<number>()
-  const currModifyHash = useRef<string>()
-  const currResetHash = useRef<number>()
-  const modifyHash = `${opts.size}.${opts.persistent}`
-
-  if (dependencies) {
-    // complete reset
-    const resetHash = hash(dependencies)
-    if (currResetHash.current !== resetHash) {
-      currResetHash.current = resetHash
-      currModifyHash.current = null
-      cache.current = null
-    }
-  }
-
-  if (currModifyHash.current !== modifyHash) {
-    // reset queries but keep cache
-    for (const n in unsubs.current) {
-      unsubs.current[n]()
-    }
-    if (raf.current) {
-      cancelAnimationFrame(raf.current)
-      raf.current = null
-    }
-    queries.current = []
-    unsubs.current = {}
-    currModifyHash.current = modifyHash
-
-    if (!cache.current) {
-      cache.current = { items: [], loading: true, checksum: 0 }
-    }
-  }
-
-  useEffect(() => {
-    return () => {
-      for (const n in unsubs.current) {
-        unsubs.current[n]()
-      }
-      if (raf.current) {
-        cancelAnimationFrame(raf.current)
-      }
-    }
-  }, [])
-
-  if (client && name) {
-    const { pages, size, persistent = false, path } = opts
-    const active = new Set()
-
-    // add new subs
-    pages.forEach((n) => {
-      // pages start at 1 => shift to 0
-      n -= 1
-      active.add(n)
-      if (!(n in queries.current)) {
-        const payload = getPayload({ offset: n * size, limit: size })
-        const q = client.query(name, payload, { persistent })
-        queries.current[n] = q
-      }
-      if (n in unsubs.current) return
-      unsubs.current[n] = queries.current[n].subscribe(() => {
-        if (raf.current) return
-        raf.current = requestAnimationFrame(() => {
-          raf.current = null
-          setCheckum(
-            queries.current.reduce((combined, { cache }) => {
-              const checksum = cache?.checksum
-              return checksum ? combined + checksum : combined
-            }, 0)
-          )
-        })
-      })
-    })
-
-    // remove inactive subs
-    queries.current.forEach((_, n) => {
-      if (n in unsubs.current && !active.has(n)) {
-        unsubs.current[n]()
-        delete unsubs.current[n]
-      }
-    })
-
-    if (cache.current.checksum === checksum) {
-      return cache.current
-    }
-
-    let l = queries.current.length
-    cache.current.items = []
-    cache.current.loading = false
-    cache.current.checksum = checksum
-
-    while (l--) {
-      let i = size * l
-      const q = queries.current[l]
-      const m = i + size
-
-      if (q) {
-        if (q.cache) {
-          let data = q.cache.value
-          for (const i of path) {
-            data = data?.[i]
-          }
-          if (data) {
-            for (let j = 0; i < m; i++) {
-              const item = data[j++]
-              if (!item) break
-              cache.current.items[i] = item
-            }
-          }
-        } else {
-          cache.current.loading = true
-        }
-      }
-
-      // // fill up empty items with null
-      // for (; i < m; i++) {
-      //   if (!(i in cache.current.items)) {
-      //     cache.current.items[i] = null
-      //   }
-      // }
-    }
-  }
-
-  return cache.current
-}

package/test/based-server.ts

@@ -1,58 +0,0 @@
-import { BasedServer } from '@based/server'
-import { BasedQueryFunction } from '@based/functions'
-
-const counter: BasedQueryFunction<{ speed: number }, { cnt: number }> = (
-  _based,
-  payload,
-  update
-) => {
-  let cnt = 0
-  // update({ cnt })
-  const int = setInterval(() => {
-    update({ cnt: ++cnt })
-  }, payload.speed ?? 1e3)
-  return () => {
-    clearInterval(int)
-  }
-}
-
-const fakeDb = (_based, { offset, limit }, update) => {
-  let i
-  let cnt = 0
-  const timer = setTimeout(() => {
-    const doit = () => {
-      cnt++
-      const things = Array.from(Array(limit)).map((_, i) => {
-        return {
-          id: `${i + offset} - ${cnt}`,
-        }
-      })
-      update({ things })
-    }
-
-    i = setInterval(doit, 1e3)
-    doit()
-  }, 100)
-  return () => {
-    clearTimeout(timer)
-    clearInterval(i)
-  }
-}
-
-const server = new BasedServer({
-  port: 8081,
-  functions: {
-    configs: {
-      'fake-db': {
-        type: 'query',
-        fn: fakeDb,
-      },
-      counter: {
-        type: 'query',
-        fn: counter,
-      },
-    },
-  },
-})
-
-server.start()

package/test/browser.tsx

@@ -1,137 +0,0 @@
-import React, { useState } from 'react'
-import based from '@based/client'
-import { createRoot } from 'react-dom/client'
-import { Provider, useQuery, useLoading, useWindow } from '../src'
-
-const client = based({
-  url: 'ws://localhost:8081',
-})
-
-const Tester = () => {
-  const somethingIsLoading = useLoading()
-
-  const [q, setP] = useState<any>({
-    name: 'counter',
-    payload: { bla: true },
-  })
-
-  // useQuery('')
-
-  const x = useQuery(q.name, q.payload)
-
-  const payloads = [
-    { name: 'counter', payload: { bla: false } },
-    { name: 'counter', payload: { bla: true } },
-    { name: 'gurt', payload: { bla: false } },
-    { name: null },
-  ]
-
-  return (
-    <div>
-      <div
-        style={{
-          display: 'flex',
-        }}
-      >
-        <div
-          style={{
-            width: 50,
-            height: 50,
-            background: somethingIsLoading ? 'red' : 'blue',
-          }}
-        />
-        {payloads.map((v, i) => {
-          return (
-            <div
-              key={i}
-              style={{
-                border: '1px solid green',
-                padding: 5,
-                cursor: 'pointer',
-              }}
-              onClick={() => setP(v)}
-            >
-              <pre>{JSON.stringify(v, null, 2)}</pre>
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-const UseWindowTester = () => {
-  const [pages, setPages] = useState([1, 2])
-  const [size, setSize] = useState(4)
-  const { items, loading } = useWindow(
-    'fake-db',
-    ({ offset, limit }) => {
-      return {
-        offset,
-        limit,
-      }
-    },
-    {
-      path: ['things'], // where are the items in the response?
-      pages, // array of page numbers - starts at 1
-      size, // amount of items per page
-    }
-  )
-
-  return (
-    <>
-      <div style={{ display: 'flex' }}>
-        <pre>{JSON.stringify({ loading, items }, null, 2)}</pre>
-        <div>
-          {items.map((item, index) => {
-            return <div key={index}>{item?.id || '-'}</div>
-          })}
-        </div>
-      </div>
-      <button
-        style={{
-          background: 'lightgrey',
-          padding: 16,
-        }}
-        onClick={() => {
-          setPages(
-            pages.map((n) => {
-              return n + 3
-            })
-          )
-        }}
-      >
-        Move ({pages.join(',')})
-      </button>
-      <button
-        style={{
-          background: 'lightgrey',
-          padding: 16,
-        }}
-        onClick={() => {
-          setSize(size + 1)
-        }}
-      >
-        Resize ({size})
-      </button>
-    </>
-  )
-}
-
-function App() {
-  return (
-    <div
-      style={{
-        padding: 100,
-      }}
-    >
-      <Provider client={client}>
-        <Tester />
-        <UseWindowTester />
-      </Provider>
-    </div>
-  )
-}
-
-const root = createRoot(document.body)
-root.render(<App />)

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "src",
-    "outDir": "dist"
-  },
-  "include": ["src/**/*", "src/**/*.json"],
-  "exclude": ["node_modules", "test", "dist", "tmp", "examples"]
-}