@based/react 4.1.0 → 4.2.1

package/README.md

@@ -1,69 +0,0 @@
-# @based/react
-
-React hooks for the based data platform
-
-> [Example react project here](https://github.com/atelier-saulx/based-react-sample)
-
-> Read more about [based](https://github.com/atelier-saulx/based/blob/main/packages/client/README.md)
-
----
-
-```js
-import based from "@based/client"
-import { Provider, useData, useClient } from "@based/react"
-import React from "react"
-import ReactDom from "react-dom"
-
-const client = based({ env: "prod", project: "someproject", org: "a-org" })
-
-const Things = () => {
-  const client = useClient()
-
-  // automatically observes data when components get rendered
-  const { data, loading, error } = useData({
-    things: {
-      id: true,
-      name: true,
-      $list: true,
-    },
-  })
-
-  if (loading) {
-    return <div>loading...</div>
-  }
-
-  return (
-    <div>
-      {data.things.map((thing) => (
-        <div
-          key={thing.id}
-          onClick={(e) => {
-            client.set({ $id: thing.id, name: "Some random name!" })
-          }}
-        >
-          {thing.name}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-const App = () => {
-  return (
-    <Provider client={client}>
-      <Things />
-    </Provider>
-  )
-}
-
-ReactDom.render(<App />, document.body)
-```
-
-
----
-
-## License
-
-Licensed under the MIT License.
-
-See [LICENSE](./LICENSE) for more information.

package/build/index.js

@@ -1,32 +0,0 @@
-const { build } = require('esbuild')
-const { join } = require('path')
-
-const b = async () => {
-  // make a seperate build for stream for both node and the index
-
-  const makeAllPackagesExternalPlugin = {
-    name: 'make-all-packages-external',
-    setup(build) {
-      // eslint-disable-next-line
-      const filter = /(\.\/stream)|(^[^.\/]|^\.[^.\/]|^\.\.[^\/])/ // Must not start with "/" or "./" or "../"
-      build.onResolve({ filter }, (args) => {
-        return {
-          path: args.path,
-          external: true,
-        }
-      })
-    },
-  }
-
-  build({
-    outfile: join(__dirname, '../dist/index.js'),
-    bundle: true,
-    minify: true,
-    target: 'es2017',
-    platform: 'node',
-    entryPoints: [join(__dirname, '../src/index.ts')],
-    plugins: [makeAllPackagesExternalPlugin],
-  })
-}
-
-b()

package/src/clients.ts

@@ -1,161 +0,0 @@
-import React, {
-  createContext,
-  FunctionComponent,
-  ReactNode,
-  useContext,
-  useEffect,
-  useReducer,
-} from 'react'
-
-import based, { Based, BasedOpts } from '@based/client'
-
-import { genOptsId } from './genOptsId'
-
-export type CreateClient = (
-  selector: string | (BasedOpts & { key?: string })
-) => Based
-
-const newClientListeners: Set<() => void> = new Set()
-
-interface BasedContextType {
-  clients: { [key: string]: Based }
-  createClient?: CreateClient
-  removeClient: (
-    selector: string | (BasedOpts & { key?: string }) | Based
-  ) => void
-}
-
-export const BasedContext = createContext<BasedContextType>({
-  clients: {},
-  // eslint-disable-next-line
-  removeClient: (...args: any) => {},
-})
-
-export const defaultCreateClient: CreateClient = (selector) => {
-  if (typeof selector === 'object') {
-    if (
-      typeof process !== 'undefined' &&
-      process.env.CLUSTER &&
-      process.env.CLUSTER.startsWith('local') &&
-      !selector.cluster
-    ) {
-      selector.cluster = process.env.CLUSTER
-    }
-    return based(selector)
-  } else {
-    // default
-    console.error('Cannot create client from ' + selector)
-  }
-}
-
-export const Provider: FunctionComponent<{
-  client?: Based
-  clients?: { [key: string]: Based }
-  children: ReactNode
-  createClient?: CreateClient
-}> = ({ client, children, clients, createClient }) => {
-  if (!clients && client) {
-    clients = {
-      default: client,
-    }
-  } else if (clients && client) {
-    clients.default = client
-  }
-
-  const ctx = React.createElement(
-    BasedContext.Provider,
-    {
-      value: {
-        clients,
-        createClient: createClient || defaultCreateClient,
-        removeClient: (selector) => {
-          if (selector instanceof Based) {
-            for (const cl in clients) {
-              if (clients[cl] === selector) {
-                selector = cl
-                break
-              }
-            }
-            if (typeof selector !== 'string') {
-              console.error('Cannot find client to remove from ctx', selector)
-              return
-            }
-          } else if (typeof selector !== 'string') {
-            selector = genOptsId(selector)
-          }
-          // @ts-ignore
-          if (clients[selector]) {
-            // @ts-ignore
-            clients[selector].disconnect()
-            // @ts-ignore
-            delete clients[selector]
-            newClientListeners.forEach((fn) => fn())
-          }
-        },
-      },
-    },
-    children
-  )
-
-  return ctx
-}
-
-export const useBasedContext = () => {
-  return useContext(BasedContext)
-}
-
-function forceUpdate(state: number) {
-  return state + 1
-}
-
-export const useClients = (): Based[] => {
-  const ctx = useBasedContext()
-  const [, update] = useReducer(forceUpdate, 0)
-
-  useEffect(() => {
-    let timer
-    const fn = () => {
-      timer = setTimeout(update, 0)
-    }
-    newClientListeners.add(fn)
-    return () => {
-      newClientListeners.delete(fn)
-      clearTimeout(timer)
-    }
-  }, [])
-
-  return Object.values(ctx.clients)
-}
-
-export const useClient = (
-  selector: string | (BasedOpts & { key?: string }) = 'default'
-) => {
-  const basedCtx = useContext(BasedContext)
-
-  if (typeof selector === 'object') {
-    if (!(selector.env && selector.project && selector.org)) {
-      return
-    }
-  }
-
-  let key: string
-
-  if (typeof selector === 'string') {
-    key = selector
-  } else {
-    key = selector.key || genOptsId(selector)
-  }
-
-  let client: Based = basedCtx.clients[key]
-
-  if (!client && basedCtx.createClient) {
-    client = basedCtx.createClient(selector)
-
-    if (client) {
-      basedCtx.clients[key] = client
-      newClientListeners.forEach((fn) => fn())
-    }
-  }
-
-  return client
-}

package/src/components/InfiniteList/index.tsx

@@ -1,182 +0,0 @@
-import {
-  addSubscriber,
-  removeSubscriber,
-  generateSubscriptionId,
-} from '@based/client'
-import React, { useRef, useState, useEffect } from 'react'
-import { FixedSizeList as List } from 'react-window'
-import { useData, useClient } from '../..'
-
-const addScrollSub = (client, subId, payload, offset, current, setChecksum) => {
-  const [, subscriberId] = addSubscriber(
-    client.client,
-    payload,
-    ({ items }, checksum) => {
-      for (let i = 0; i < items.length; i++) {
-        current.items[i + offset] = items[i]
-      }
-      setChecksum(`${offset}-${checksum}`)
-    },
-    (err) => err && console.error(err),
-    console.error,
-    subId
-  )
-  return subscriberId
-}
-
-export function InfiniteList({
-  query,
-  delay = 100,
-  itemSize = 50,
-  height = 400,
-  limit = Math.ceil(height / itemSize),
-  treshold = 0,
-  target = 'root',
-  ...props
-}) {
-  const blockHeight = itemSize * limit
-  const client = useClient()
-  const [offset, setOffset] = useState(0)
-  const [blocks, setBlocks] = useState(() => {
-    let blocks = Math.ceil(height / blockHeight)
-    if (treshold) {
-      blocks += Math.ceil(
-        (height / itemSize + treshold - blocks * limit) / limit
-      )
-    }
-    return blocks
-  })
-
-  const [, setChecksum] = useState()
-  const { current } = useRef({
-    offset,
-    blocks,
-    scroll: 0,
-    items: [],
-    timer: null,
-    subs: {},
-  })
-  const {
-    data: { itemCount },
-  } = useData({
-    itemCount: {
-      $aggregate: {
-        $function: 'count',
-        ...query().$list.$find,
-      },
-    },
-  })
-
-  useEffect(() => {
-    if (client) {
-      return () => {
-        const { subs } = current
-        current.subs = {}
-        setTimeout(() => {
-          for (const subId in subs) {
-            const subscriberId = current.subs[subId]
-            removeSubscriber(client.client, Number(subId), subscriberId)
-          }
-        })
-      }
-    }
-  }, [client, current])
-
-  useEffect(() => {
-    if (client) {
-      const subs = {}
-      let i = blocks
-
-      while (i--) {
-        const start = offset + limit * i
-        const payload = {
-          $id: target,
-          items: query(start, limit),
-        }
-        const subId = generateSubscriptionId(payload)
-        subs[subId] =
-          current.subs[subId] ||
-          addScrollSub(client, subId, payload, start, current, setChecksum)
-      }
-
-      for (const subId in current.subs) {
-        if (!(subId in subs)) {
-          const subscriberId = current.subs[subId]
-          removeSubscriber(client.client, Number(subId), subscriberId)
-        }
-      }
-
-      current.subs = subs
-    }
-  }, [target, client, offset, blocks, query, current]) // dont include limit
-
-  useEffect(update, [
-    blockHeight,
-    delay,
-    height,
-    itemSize,
-    current,
-    limit,
-    treshold,
-  ])
-
-  if (!itemCount || !current.items.length) {
-    return null
-  }
-
-  return (
-    <List
-      {...props}
-      height={height}
-      itemSize={itemSize}
-      itemData={current.items}
-      itemCount={itemCount}
-      onScroll={({ scrollOffset }) => {
-        current.scroll = scrollOffset
-        update()
-      }}
-    />
-  )
-
-  function update() {
-    const start = Math.max(0, current.scroll / itemSize - treshold)
-    const end = (current.scroll + height) / itemSize
-    const newOffset = start - (start % limit)
-    let newBlocks = Math.ceil(
-      height / blockHeight + (current.scroll % blockHeight) / blockHeight
-    )
-
-    if (treshold) {
-      const newLength = newOffset + limit * newBlocks
-      newBlocks += Math.max(0, Math.ceil((end + treshold - newLength) / limit))
-    }
-
-    if (newOffset !== current.offset || newBlocks !== current.blocks) {
-      current.offset = newOffset
-      current.blocks = newBlocks
-
-      const set = () => {
-        setOffset(current.offset)
-        setBlocks(current.blocks)
-      }
-
-      if (current.timer) {
-        clearTimeout(current.timer)
-      } else {
-        set()
-      }
-
-      current.timer = setTimeout(() => {
-        current.timer = null
-        set()
-      }, delay)
-    } else if (current.timer) {
-      clearTimeout(current.timer)
-      current.timer = setTimeout(() => {
-        current.timer = null
-        setOffset(current.offset)
-        setBlocks(current.blocks)
-      }, delay)
-    }
-  }
-}

package/src/genOptsId.ts

@@ -1,13 +0,0 @@
-import { BasedOpts } from '@based/client'
-
-export const genOptsId = (opts: BasedOpts & { key?: string }): string => {
-  if (!opts) {
-    return
-  }
-  if (opts.key) {
-    return opts.key
-  }
-  return `${opts.env}_${opts.project}_${opts.org}_${opts.cluster || ''}_${
-    opts.name || ''
-  }`
-}

package/src/gql.ts

@@ -1,214 +0,0 @@
-import { useEffect, useMemo, useReducer, useRef, useState } from 'react'
-import {
-  addSubscriber,
-  removeSubscriber,
-  handleGraphqlVariables,
-  BasedGraphQL,
-  generateSubscriptionId,
-  BasedOpts,
-} from '@based/client'
-import { Loading, Data } from './types'
-import { resultReducer } from './reducer'
-import { useClient } from './clients'
-import { genOptsId } from './genOptsId'
-import { updateMeta } from './meta'
-import { hashObjectIgnoreKeyOrder } from '@saulx/hash'
-
-const schemaSubId = generateSubscriptionId({ $subscribe_schema: 'default' })
-
-// step one make 1 useEffect
-//  - and the nessecary if
-
-export function useQuery(
-  query?: string | BasedGraphQL,
-  variables: Record<string, any> = {},
-  clientSelector?: string | (BasedOpts & { key?: string })
-): {
-  data: Data
-  error?: Error
-  loading: Loading
-} {
-  const [result, dispatch] = useReducer(resultReducer, {
-    loading: true,
-    data: {},
-    checksum: 0,
-  })
-
-  const r = useRef({ checksum: 0, fns: {} })
-  const selector = clientSelector || 'default'
-  const client = useClient(selector)
-
-  if (query) {
-    const [configState, updateConfigState] = useState(0)
-
-    useEffect(() => {
-      const [, subscriberId] = addSubscriber(
-        client.client,
-        // FIXME dont want too many updates plz this has to become 1 use effect
-        { $subscribe_schema: 'default' },
-        (d, checksum) => {
-          if (!client.client.configuration) {
-            client.client.configuration = {
-              dbs: [],
-              schema: {},
-              functions: {},
-            } as any // TODO: FIX
-          }
-          client.client.configuration.schema.default = d
-          updateConfigState(checksum)
-        },
-        (err) => {
-          if (err) {
-            console.error(err)
-          }
-        },
-        (err) => {
-          console.error(err)
-        },
-        schemaSubId
-      )
-      return () => {
-        removeSubscriber(client.client, schemaSubId, subscriberId)
-      }
-      return () => {}
-    }, [])
-
-    if (configState) {
-      let op: BasedGraphQL
-      if (typeof query === 'string') {
-        op = client.gql(query)
-      } else {
-        op = query
-      }
-
-      op = handleGraphqlVariables(op, op, variables)
-
-      const fns: {
-        [key: string]: { name: string; payload: any; key: string }
-      } = {}
-      const queryObj: any = {}
-      for (const key in op.ops) {
-        if (op.ops[key].fnObserve) {
-          const { name, payload } = op.ops[key].fnObserve
-          fns[key] = { name: <string>name, payload, key }
-          continue
-        }
-        queryObj[key] = op.ops[key].get
-      }
-
-      const fnHash = useMemo(() => {
-        return hashObjectIgnoreKeyOrder(fns)
-      }, [fns])
-
-      const subId = useMemo(() => {
-        // fn?
-        return generateSubscriptionId(queryObj)
-      }, [queryObj])
-
-      const clientKey =
-        typeof selector === 'string' ? selector : genOptsId(selector)
-
-      if (client) {
-        const subKey = clientKey + subId
-
-        useEffect(() => {
-          const subs = []
-
-          for (const key in fns) {
-            subs.push(
-              addSubscriber(
-                client.client,
-                fns[key].payload,
-                (d, checksum) => {
-                  updateMeta(subKey, false, false)
-                  if (r.current.fns[key] !== checksum) {
-                    r.current.fns[key] = checksum
-                    dispatch({
-                      merge: { [key]: d },
-                      checksum: hashObjectIgnoreKeyOrder(r.current),
-                    })
-                  }
-                },
-                (err) => {
-                  if (err) {
-                    console.error(err)
-                    dispatch({ error: err, loading: false })
-                  }
-                },
-                (err) => {
-                  console.error(err)
-                  updateMeta(subKey, false, err)
-                  dispatch({ error: err })
-                },
-                undefined,
-                fns[key].name
-              )
-            )
-          }
-
-          return () => {
-            for (const [subId, subscriberId] of subs) {
-              removeSubscriber(client.client, subId, subscriberId)
-            }
-          }
-        }, [fnHash])
-
-        useEffect(() => {
-          if (!configState) {
-            return
-          }
-          updateMeta(subKey, true, false)
-          const [, subscriberId] = addSubscriber(
-            client.client,
-            queryObj,
-            (d, checksum) => {
-              updateMeta(subKey, false, false)
-              if (r.current.checksum !== checksum) {
-                r.current.checksum = checksum
-                dispatch({
-                  merge: d,
-                  checksum: hashObjectIgnoreKeyOrder(r.current),
-                })
-              }
-            },
-            (err) => {
-              if (err) {
-                console.error(err)
-                updateMeta(subKey, false, err)
-                dispatch({ error: err, loading: false })
-              }
-            },
-            (err) => {
-              console.error(err)
-              updateMeta(subKey, false, err)
-              dispatch({ error: err })
-            },
-            subId
-          )
-          return () => {
-            updateMeta(subKey, false, false)
-            removeSubscriber(client.client, subId, subscriberId)
-          }
-        }, [subId, clientKey, configState])
-      } else {
-        useEffect(stubFn, [null, null])
-      }
-    } else {
-      useMemo(stubFn, [null])
-      useMemo(stubFn, [null])
-      useEffect(stubFn, [null])
-      useEffect(stubFn, [null, null, null])
-    }
-  } else {
-    useState(null)
-    useEffect(stubFn, [null])
-    useMemo(stubFn, [null])
-    useMemo(stubFn, [null])
-    useEffect(stubFn, [null])
-    useEffect(stubFn, [null, null, null])
-  }
-
-  return result
-}
-
-function stubFn() {}