@based/react 0.7.1 → 2.2.0

package/package.json

@@ -1,20 +1,28 @@
 {
   "name": "@based/react",
-  "version": "0.7.1",
+  "version": "2.2.0",
+  "license": "MIT",
   "source": "src/index.tsx",
   "main": "dist/index.js",
   "scripts": {
-    "build": "npx tsc",
-    "watch": "npm run build -- --watch"
+    "buildBundle": "node ./build/index.js",
+    "build": "npx tsc && npm run buildBundle",
+    "watch": "npm run build -- --watch",
+    "clean": "rimraf {.turbo,dist,node_modules}"
   },
   "sideEffects": false,
   "peerDependencies": {
-    "@based/client": "^1.1.0",
     "react": "^17.0.2"
   },
+  "dependencies": {
+    "@based/client": "*",
+    "@saulx/hash": "^1.1.0"
+  },
   "devDependencies": {
     "@types/react": "^17.0.14",
+    "esbuild": "^0.14.29",
     "ts-node": "^10.1.0",
-    "typescript": "^4.3.5"
+    "typescript": "^4.3.5",
+    "rimraf": "^3.0.2"
   }
 }

package/src/clients.ts

@@ -0,0 +1,160 @@
+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 (
+      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/genOptsId.ts

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,214 @@
+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() {}