teamplay 0.1.11 → 0.1.13

package/orm/Doc.js

@@ -80,7 +80,9 @@ class Doc {
   }
 
   async unsubscribe () {
-    if (!this.subscribed) throw Error('trying to unsubscribe while not subscribed')
+    if (!this.subscribed) {
+      throw Error('trying to unsubscribe while not subscribed. Doc: ' + [this.collection, this.docId])
+    }
     this.subscribed = undefined
     // if we are still handling the subscription, just wait for it to finish and then unsubscribe
     if (this.subscribing) {
@@ -216,7 +218,8 @@ class DocSubscriptions {
     if (!doc) return
     this.subCount.delete(hash)
     this.initialized.delete(hash)
-    await doc.unsubscribe()
+    // If the document was initialized as part of query and wasn't directly subscribed to, we should not unsubscribe from it.
+    if (doc.subscribed) await doc.unsubscribe()
     if (doc.subscribed) return // if we subscribed again while waiting for unsubscribe, we don't delete the doc
     this.docs.delete(hash)
   }

package/orm/Query.js

@@ -87,7 +87,9 @@ class Query {
   }
 
   async unsubscribe () {
-    if (!this.subscribed) throw Error('trying to unsubscribe while not subscribed')
+    if (!this.subscribed) {
+      throw Error('trying to unsubscribe while not subscribed. Query: ' + [this.collection, this.params])
+    }
     this.subscribed = undefined
     // if we are still handling the subscription, just wait for it to finish and then unsubscribe
     if (this.subscribing) {
@@ -227,7 +229,7 @@ class QuerySubscriptions {
     let count = this.subCount.get(hash) || 0
     count -= 1
     if (count < 0) {
-      if (ERROR_ON_EXCESSIVE_UNSUBSCRIBES) throw ERRORS.notSubscribed($query)
+      if (ERROR_ON_EXCESSIVE_UNSUBSCRIBES) throw Error(ERRORS.notSubscribed($query))
       return
     }
     if (count > 0) {
@@ -275,5 +277,8 @@ export function getQuerySignal (segments, params, options) {
 }
 
 const ERRORS = {
-  notSubscribed: $doc => Error('trying to unsubscribe when not subscribed. Doc: ' + $doc.path())
+  notSubscribed: $query => `
+    trying to unsubscribe when not subscribed. Query:
+    ${[$query[SEGMENTS], $query[PARAMS]]}
+  `
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "teamplay",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Full-stack signals ORM with multiplayer",
   "type": "module",
   "main": "index.js",
@@ -23,12 +23,12 @@
   },
   "dependencies": {
     "@nx-js/observer-util": "^4.1.3",
-    "@teamplay/backend": "^0.1.11",
-    "@teamplay/cache": "^0.1.11",
-    "@teamplay/channel": "^0.1.11",
-    "@teamplay/debug": "^0.1.11",
-    "@teamplay/schema": "^0.1.11",
-    "@teamplay/utils": "^0.1.11",
+    "@teamplay/backend": "^0.1.13",
+    "@teamplay/cache": "^0.1.13",
+    "@teamplay/channel": "^0.1.13",
+    "@teamplay/debug": "^0.1.13",
+    "@teamplay/schema": "^0.1.13",
+    "@teamplay/utils": "^0.1.13",
     "diff-match-patch": "^1.0.5",
     "events": "^3.3.0",
     "json0-ot-diff": "^1.1.2",
@@ -63,5 +63,5 @@
     ]
   },
   "license": "MIT",
-  "gitHead": "1fbdde069e50c6cee18d8bb71c43ed5b06367cac"
+  "gitHead": "1abacbe2dd704f77dfa20d061edf89490ac65cee"
 }

package/react/convertToObserver.js

@@ -1,93 +1,126 @@
 // TODO: rewrite to use useSyncExternalStore like in mobx. This will also help with handling Suspense abandonment better
 //       to cleanup the observer() reaction when the component is unmounted or was abandoned and unmounts will never trigger.
 //       ref: https://github.com/mobxjs/mobx/blob/94bc4997c14152ff5aefcaac64d982d5c21ba51a/packages/mobx-react-lite/src/useObserver.ts
-import { createElement as el, forwardRef as _forwardRef, useCallback, useState, useMemo } from 'react'
-import _throttle from 'lodash/throttle.js'
+import { forwardRef as _forwardRef, useRef, useSyncExternalStore } from 'react'
 import { observe, unobserve } from '@nx-js/observer-util'
-import { pipeComponentMeta, useCache, useUnmount } from './helpers.js'
+import _throttle from 'lodash/throttle.js'
+import { createCaches, getDummyCache } from '@teamplay/cache'
+import { __increment, __decrement } from '@teamplay/debug'
+import executionContextTracker from './executionContextTracker.js'
+import { pipeComponentMeta, useUnmount, useId } from './helpers.js'
 import trapRender from './trapRender.js'
 
 const DEFAULT_THROTTLE_TIMEOUT = 100
 
-export default function convertToObserver (BaseComponent, options = {}) {
-  options = { ...DEFAULT_OPTIONS, ...options }
-  const { forwardRef } = options
+export default function convertToObserver (BaseComponent, {
+  forwardRef,
+  cache: enableCache = true,
+  throttle,
+  ...options
+} = {}) {
+  throttle = normalizeThrottle(throttle)
   // MAGIC. This fixes hot-reloading. TODO: figure out WHY it fixes it
-  const random = Math.random()
+  // const random = Math.random()
 
   // memo; we are not intested in deep updates
   // in props; we assume that if deep objects are changed,
   // this is in observables, which would have been tracked anyway
   let Component = (...args) => {
-    // forceUpdate 2.0
-    const forceUpdate = useForceUpdate(options.throttle)
-    const cache = useCache(options.cache != null ? options.cache : true)
+    const [cache, destroyCache] = useCreateCacheRef(enableCache)
+    const componentId = useId()
+
+    const admRef = useRef()
+    if (!admRef.current) {
+      const adm = {
+        stateVersion: Symbol(), // eslint-disable-line symbol-description
+        onStoreChange: undefined,
+        subscribe (onStoreChange) {
+          adm.onStoreChange = () => {
+            adm.stateVersion = Symbol() // eslint-disable-line symbol-description
+            onStoreChange()
+          }
+          return () => {
+            adm.onStoreChange = undefined
+          }
+        },
+        getSnapshot () {
+          return adm.stateVersion
+        }
+      }
+      admRef.current = adm
+    }
+    const adm = admRef.current
+
+    useSyncExternalStore(adm.subscribe, adm.getSnapshot, adm.getSnapshot)
 
     // wrap the BaseComponent into an observe decorator once.
     // This way it will track any observable changes and will trigger rerender
-    const reactionRef = useMemo(() => ({}), [])
-    const observedRender = useMemo(() => {
-      const blockUpdate = { value: false }
-      const update = () => {
-        // TODO: Decide whether the check for unmount is needed here
-        // Force update unless update is blocked. It's important to block
-        // updates caused by rendering
-        // (when the sync rendening is in progress)
-        if (!blockUpdate.value) forceUpdate()
+    const reactionRef = useRef()
+    const destroyRef = useRef()
+    if (!reactionRef.current) {
+      let update = () => {
+        // It's important to block updates caused by rendering itself
+        // (when the sync rendering is in progress).
+        if (!executionContextTracker.isActive()) adm.onStoreChange?.()
+      }
+      if (throttle) update = _throttle(update, throttle)
+      destroyRef.current = (where) => {
+        if (!reactionRef.current) throw Error(`NO REACTION REF - ${where}`)
+        unobserve(reactionRef.current)
+        reactionRef.current = undefined
+        destroyRef.current = undefined
+        destroyCache(where)
       }
-      const trappedRender = trapRender({ render: BaseComponent, blockUpdate, cache, reactionRef })
-      return observe(trappedRender, {
+      const trappedRender = trapRender({
+        render: BaseComponent,
+        cache,
+        destroy: destroyRef.current,
+        componentId
+      })
+      reactionRef.current = observe(trappedRender, {
         scheduler: update,
         lazy: true
       })
-    }, [random])
-
-    if (reactionRef.current !== observedRender) reactionRef.current = observedRender
+    }
 
     // clean up observer on unmount
     useUnmount(() => {
-      // TODO: this does not execute the same amount of times as observe() does,
-      //       probably because of throw's of the async hooks.
-      //       So there probably are memory leaks here. Research this.
-      if (observedRender.current) {
-        unobserve(observedRender.current)
-        observedRender.current = undefined
-      }
+      destroyRef.current('useUnmount()')
     })
 
-    return observedRender(...args)
+    return reactionRef.current(...args)
   }
 
   if (forwardRef) Component = _forwardRef(Component)
   pipeComponentMeta(BaseComponent, Component)
 
-  Component.__observerOptions = options
-
-  return Component
+  return { Component, forwardRef, ...options }
 }
 
-const DEFAULT_OPTIONS = {
-  forwardRef: false,
-  suspenseProps: {
-    fallback: el(NullComponent, null, null)
+function normalizeThrottle (throttle) {
+  if (typeof throttle === 'boolean') {
+    if (throttle) return DEFAULT_THROTTLE_TIMEOUT
+    else return undefined
   }
+  if (typeof throttle === 'number') return throttle
+  if (throttle == null) return undefined
+  throw Error('observer(): throttle can be either boolean or number (milliseconds)')
 }
 
-function NullComponent () {
-  return null
-}
-
-function useForceUpdate (throttle) {
-  const [, setTick] = useState()
-  if (throttle) {
-    const timeout = typeof (throttle) === 'number' ? +throttle : DEFAULT_THROTTLE_TIMEOUT
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useCallback(
-      _throttle(() => {
-        setTick(Math.random())
-      }, timeout)
-      , [])
-  } else {
-    return () => setTick(Math.random())
+function useCreateCacheRef (enableCache) {
+  const cacheRef = useRef()
+  const destroyCacheRef = useRef()
+  if (!cacheRef.current) {
+    __increment('ObserverWrapper.cache')
+    const _createCaches = enableCache ? createCaches : getDummyCache
+    cacheRef.current = _createCaches(['styles', 'model'])
+    destroyCacheRef.current = (where) => {
+      if (!cacheRef.current) throw Error(`NO CACHE REF - ${where}`)
+      __decrement('ObserverWrapper.cache')
+      cacheRef.current.clear()
+      cacheRef.current = undefined
+      destroyCacheRef.current = undefined
+    }
   }
+  return [cacheRef.current, destroyCacheRef.current]
 }

package/react/helpers.js

@@ -1,6 +1,4 @@
-import { useMemo, useContext, createContext } from 'react'
-import { CACHE_ACTIVE, getDummyCache } from '@teamplay/cache'
-import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js'
+import { useContext, createContext, useRef, useEffect } from 'react'
 
 export const ComponentMetaContext = createContext({})
 
@@ -24,12 +22,18 @@ export function pipeComponentMeta (SourceComponent, TargetComponent, suffix = ''
   return TargetComponent
 }
 
-export function useCache (active) {
-  if (!CACHE_ACTIVE.value || !active) return useMemo(getDummyCache, []) // eslint-disable-line react-hooks/rules-of-hooks
-  const { cache } = useContext(ComponentMetaContext) // eslint-disable-line react-hooks/rules-of-hooks
-  return cache
+export function useId () {
+  const { componentId } = useContext(ComponentMetaContext)
+  return componentId
 }
 
 export function useUnmount (fn) {
-  useIsomorphicLayoutEffect(() => fn, [])
+  const fnRef = useRef()
+  if (fnRef.current !== fn) fnRef.current = fn
+  useEffect(
+    () => () => {
+      fnRef.current()
+    },
+    []
+  )
 }

package/react/trapRender.js

@@ -1,15 +1,12 @@
 // trap render function (functional component) to block observer updates and activate cache
 // during synchronous rendering
-import { useId } from 'react'
-import { unobserve } from '@nx-js/observer-util'
 import executionContextTracker from './executionContextTracker.js'
 
-export default function trapRender ({ render, blockUpdate, cache, reactionRef }) {
+export default function trapRender ({ render, cache, destroy, componentId }) {
   return (...args) => {
-    const id = useId()
-    executionContextTracker._start(id)
-    blockUpdate.value = true
+    executionContextTracker._start(componentId)
     cache.activate()
+    let destroyed
     try {
       // destroyer.reset() // TODO: this one is for any destructuring logic which might be needed
       // promiseBatcher.reset() // TODO: this is to support useBatch* hooks
@@ -17,15 +14,12 @@ export default function trapRender ({ render, blockUpdate, cache, reactionRef })
       // if (promiseBatcher.isActive()) {
       //   throw Error('[react-sharedb] useBatch* hooks were used without a closing useBatch() call.')
       // }
-      blockUpdate.value = false // TODO: might want to just put it into finally block
       return res
     } catch (err) {
       // TODO: this might only be needed only if promise is thrown
       //       (check if useUnmount in convertToObserver is called if a regular error is thrown)
-      if (reactionRef.current) {
-        unobserve(reactionRef.current)
-        reactionRef.current = undefined
-      }
+      destroy('trapRender.js')
+      destroyed = true
 
       if (!err.then) throw err
       // If the Promise was thrown, we catch it before Suspense does.
@@ -38,7 +32,7 @@ export default function trapRender ({ render, blockUpdate, cache, reactionRef })
       // throw err.then(destroy)
       throw err
     } finally {
-      cache.deactivate()
+      if (!destroyed) cache.deactivate()
       executionContextTracker._clear()
     }
   }

package/react/universal$.js

@@ -1,9 +1,18 @@
+import { useRef } from 'react'
 import $ from '../orm/$.js'
 import executionContextTracker from './executionContextTracker.js'
 
 // universal versions of $() which work as a plain function or as a react hook
 export default function universal$ ($root, value) {
-  let id
-  if (executionContextTracker.isActive()) id = executionContextTracker.newHookId()
-  return $($root, value, id)
+  if (executionContextTracker.isActive()) {
+    // within react component
+    const id = executionContextTracker.newHookId()
+    const $signal = $($root, value, id)
+    // save signal into ref to make sure it's not garbage collected while component exists
+    const $signalRef = useRef() // eslint-disable-line react-hooks/rules-of-hooks
+    if ($signalRef.current !== $signal) $signalRef.current = $signal
+    return $signal
+  } else {
+    return $($root, value)
+  }
 }

package/react/universalSub.js

@@ -1,9 +1,17 @@
+import { useRef } from 'react'
 import sub from '../orm/sub.js'
 import executionContextTracker from './executionContextTracker.js'
 
 // universal versions of sub() which work as a plain function or as a react hook
 export default function universalSub (...args) {
   const promiseOrSignal = sub(...args)
-  if (executionContextTracker.isActive() && promiseOrSignal.then) throw promiseOrSignal
+  if (executionContextTracker.isActive()) {
+    // within react component
+    // 1. if it's a promise, throw it so that Suspense can catch it and wait for subscription to finish
+    if (promiseOrSignal.then) throw promiseOrSignal
+    // 2. if it's a signal, we save it into ref to make sure it's not garbage collected while component exists
+    const $signalRef = useRef() // eslint-disable-line react-hooks/rules-of-hooks
+    if ($signalRef.current !== promiseOrSignal) $signalRef.current = promiseOrSignal
+  }
   return promiseOrSignal
 }

package/react/wrapIntoSuspense.js

@@ -1,50 +1,29 @@
-import { useMemo, forwardRef as _forwardRef, memo, createElement as el, Suspense } from 'react'
-import { createCaches } from '@teamplay/cache'
-import { __increment, __decrement } from '@teamplay/debug'
-import { pipeComponentMeta, pipeComponentDisplayName, ComponentMetaContext, useUnmount } from './helpers.js'
-
-export default function wrapIntoSuspense (
-  ObservedComponent
-) {
-  const { forwardRef, suspenseProps } = ObservedComponent.__observerOptions
-  if (!(suspenseProps && suspenseProps.fallback)) {
-    throw Error(
-      '[observer()] You must pass at least ' +
-      'a fallback parameter to suspenseProps'
-    )
-  }
+import { forwardRef as _forwardRef, memo, createElement as el, Suspense, useId, useRef } from 'react'
+import { pipeComponentMeta, pipeComponentDisplayName, ComponentMetaContext } from './helpers.js'
+
+export default function wrapIntoSuspense ({
+  Component,
+  forwardRef,
+  suspenseProps = DEFAULT_SUSPENSE_PROPS
+} = {}) {
+  if (!suspenseProps?.fallback) throw Error(ERRORS.noFallback)
 
   let SuspenseWrapper = (props, ref) => {
-    const cache = useMemo(() => {
-      __increment('ObserverWrapper.cache')
-      return createCaches(['styles', 'model'])
-    }, [])
-    // TODO: using useState instead of useMemo will keep this intact during Fast Refresh
-    //       Research if we can change it to use it.
-    // const [componentMeta] = React.useState({
-    //   componentId: $root.id(),
-    //   createdAt: Date.now(),
-    //   cache
-    // })
-    const componentMeta = useMemo(function () {
-      return {
-        // componentId: $root.id(), // TODO: implement creating a unique component guid here (if it's needed anymore)
-        createdAt: Date.now(),
-        cache
+    const componentId = useId()
+    const componentMetaRef = useRef()
+    if (!componentMetaRef.current) {
+      componentMetaRef.current = {
+        componentId,
+        createdAt: Date.now()
       }
-    }, [])
-
-    useUnmount(() => {
-      __decrement('ObserverWrapper.cache')
-      cache.clear()
-    })
+    }
 
     if (forwardRef) props = { ...props, ref }
 
     return (
-      el(ComponentMetaContext.Provider, { value: componentMeta },
+      el(ComponentMetaContext.Provider, { value: componentMetaRef.current },
         el(Suspense, suspenseProps,
-          el(ObservedComponent, props)
+          el(Component, props)
         )
       )
     )
@@ -52,12 +31,19 @@ export default function wrapIntoSuspense (
 
   // pipe only displayName because forwardRef render function
   // do not support propTypes or defaultProps
-  pipeComponentDisplayName(ObservedComponent, SuspenseWrapper, 'StartupjsObserverWrapper')
+  pipeComponentDisplayName(Component, SuspenseWrapper, 'StartupjsObserverWrapper')
 
   if (forwardRef) SuspenseWrapper = _forwardRef(SuspenseWrapper)
   SuspenseWrapper = memo(SuspenseWrapper)
 
-  pipeComponentMeta(ObservedComponent, SuspenseWrapper)
+  pipeComponentMeta(Component, SuspenseWrapper)
 
   return SuspenseWrapper
 }
+
+const DEFAULT_SUSPENSE_PROPS = { fallback: el(NullComponent, null, null) }
+function NullComponent () { return null }
+
+const ERRORS = {
+  noFallback: '[observer()] You must pass at least a fallback parameter to suspenseProps'
+}