@rpcbase/client 0.51.0 → 0.53.0

package/AppProvider/debug.js

@@ -0,0 +1,4 @@
+/* @flow */
+import {DEBUG} from "env"
+
+localStorage.debug = DEBUG

package/AppProvider/index.js

@@ -0,0 +1,35 @@
+/* @flow */
+import "./debug"
+
+import {PostHogProvider} from "posthog-js/react"
+
+import {HashStateProvider} from "../hashState"
+
+// TODO: flags here should be optional
+import {flagValues} from "config/flags"
+
+import {POSTHOG_KEY} from "env"
+
+const AppProvider = ({children, ...props}) => {
+
+
+  return (
+    <PostHogProvider
+      apiKey={POSTHOG_KEY}
+      options={{
+        api_host: "https://eu.posthog.com",
+        // TODO: this doesn't work
+        bootstrap: {
+          featureFlags: flagValues,
+        },
+      }}
+    >
+      <HashStateProvider>
+        {children}
+      </HashStateProvider>
+    </PostHogProvider>
+  )
+
+}
+
+export default AppProvider

package/hashState.js

@@ -0,0 +1,141 @@
+/* @flow */
+import {useState, useEffect, createContext, useContext, useCallback} from "react"
+import LZString from "lz-string"
+import _isNil from "lodash/isNil"
+import _omitBy from "lodash/omitBy"
+import isEqual from "fast-deep-equal"
+
+import {PAGE_NAVIGATION} from "config/events"
+
+
+const EMPTY_STATE_TOKEN = "N4XyA" // lz-string encoded empty state ''
+
+// WARNING: this assumes hash_str starts with "#"
+const parse_hash_str = (hash_str = window.location.hash) => {
+  if (hash_str.length < 1) {
+    return {}
+  }
+  const current_state_str = hash_str.slice(1)
+  let parsed
+  try {
+    const decoded = LZString.decompressFromEncodedURIComponent(current_state_str)
+    parsed = JSON.parse(decoded)
+  } catch (e) {
+    console.error(e)
+  }
+
+  return parsed || {}
+}
+
+// On first load, retrieve hashState from URL
+const __initial_state = _omitBy(parse_hash_str(), _isNil)
+
+export const encode_payload = (payload) =>
+  LZString.compressToEncodedURIComponent(JSON.stringify(payload))
+
+// add payload to window hash
+const apply_hash_state = (payload) => {
+  const str = encode_payload(payload)
+
+  if (str === EMPTY_STATE_TOKEN) {
+    history.replaceState(null, null, window.location.pathname)
+  } else {
+    history.replaceState(null, null, `${window.location.pathname}#${encode_payload(payload)}`)
+  }
+}
+
+export const HashContext = createContext({
+  hashState: {},
+  serializeHashState: () => null,
+  encodeHashLink: () => null,
+})
+
+export const useHashState = () => {
+  return useContext(HashContext)
+}
+
+export const withHashState = (Component) => {
+  const WrappedComp = ({children, ...props}) => {
+    const hashCtx = useContext(HashContext)
+
+    return (
+      <Component
+        {...props}
+        hashState={hashCtx.hashState}
+        serializeHashState={hashCtx.serializeHashState}
+        encodeHashLink={hashCtx.encodeHashLink}
+      />
+    )
+  }
+
+  WrappedComp.displayName = `withHashState(${Component.displayName})`
+
+  return WrappedComp
+}
+
+export const HashStateProvider = ({children}) => {
+  const [hashState, setHashState] = useState(__initial_state)
+
+  useEffect(() => {
+    const onChange = (ev) => {
+      const newHashStr = ev.detail.context?.hash
+      if (!newHashStr) return
+      // WARNING: page.js strips the "#" we add it back
+      const parsed = _omitBy(parse_hash_str(`#${newHashStr}`), _isNil)
+      const newState = {
+        ...hashState,
+        ...parsed,
+      }
+      // apply only if changed
+      if (!isEqual(hashState, newState)) {
+        setHashState(newState)
+      }
+    }
+    document.body.addEventListener(PAGE_NAVIGATION, onChange)
+
+    return () => document.body.removeEventListener(PAGE_NAVIGATION, onChange)
+  }, [hashState, setHashState])
+
+  useEffect(() => {
+    apply_hash_state(hashState)
+    window.__PRIVATE_HASH_STATE_DO_NOT_USE = hashState
+  }, [hashState])
+
+  const serializeHashState = useCallback((payload) => {
+    setHashState((current) => {
+      // clone and remove nil values
+      const newState = _omitBy(
+        {
+          ...current,
+          ...payload,
+        },
+        _isNil,
+      )
+      return newState
+    })
+  }, [])
+
+  const encodeHashLink = useCallback((payload) => {
+    const newState = _omitBy(
+      {
+        ...hashState,
+        ...payload,
+      },
+      _isNil,
+    )
+
+    return encode_payload(newState)
+  }, [])
+
+  return (
+    <HashContext.Provider
+      value={{
+        hashState,
+        serializeHashState,
+        encodeHashLink,
+      }}
+    >
+      {children}
+    </HashContext.Provider>
+  )
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.51.0",
+  "version": "0.53.0",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 0"
   },
@@ -13,6 +13,7 @@
     "pouchdb-adapter-indexeddb": "8.0.1",
     "pouchdb-core": "8.0.1",
     "pouchdb-find": "8.0.1",
+    "posthog-js": "1.70.0",
     "react-i18next": "13.0.1",
     "socket.io-client": "4.7.1"
   }

package/AppProvider/index.web.js

@@ -1,8 +0,0 @@
-/* @flow */
-
-
-const AppProvider = () => {
-
-}
-
-export default AppProvider