teamplay 0.3.7 → 0.3.9

package/index.js

@@ -14,9 +14,10 @@ export { GLOBAL_ROOT_ID } from './orm/Root.js'
 export const $ = _getRootSignal({ rootId: GLOBAL_ROOT_ID, rootFunction: universal$ })
 export default $
 export { default as sub } from './orm/sub.js'
-export { default as useSub, setUseDeferredValue as __setUseDeferredValue } from './react/useSub.js'
+export { default as useSub, useAsyncSub, setUseDeferredValue as __setUseDeferredValue } from './react/useSub.js'
 export { default as observer } from './react/observer.js'
 export { connection, setConnection, getConnection, fetchOnly, setFetchOnly, publicOnly, setPublicOnly } from './orm/connection.js'
+export { useId, useNow, useScheduleUpdate, useTriggerUpdate } from './react/helpers.js'
 export { GUID_PATTERN, hasMany, hasOne, hasManyFlags, belongsTo, pickFormFields } from '@teamplay/schema'
 export { aggregation, aggregationHeader as __aggregationHeader } from '@teamplay/utils/aggregation'
 export { accessControl } from '@teamplay/utils/accessControl'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "teamplay",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "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.3.7",
-    "@teamplay/cache": "^0.3.7",
-    "@teamplay/channel": "^0.3.7",
-    "@teamplay/debug": "^0.3.7",
-    "@teamplay/schema": "^0.3.7",
-    "@teamplay/utils": "^0.3.7",
+    "@teamplay/backend": "^0.3.9",
+    "@teamplay/cache": "^0.3.9",
+    "@teamplay/channel": "^0.3.9",
+    "@teamplay/debug": "^0.3.9",
+    "@teamplay/schema": "^0.3.9",
+    "@teamplay/utils": "^0.3.9",
     "diff-match-patch": "^1.0.5",
     "events": "^3.3.0",
     "json0-ot-diff": "^1.1.2",
@@ -63,5 +63,5 @@
     ]
   },
   "license": "MIT",
-  "gitHead": "c5840863c3afd56432f923700f7cd04333168469"
+  "gitHead": "7c53fc31b160822abc448b75e831409514f8945a"
 }

package/react/helpers.js

@@ -22,6 +22,12 @@ export function pipeComponentMeta (SourceComponent, TargetComponent, suffix = ''
   return TargetComponent
 }
 
+export function useNow () {
+  const context = useContext(ComponentMetaContext)
+  if (!context) throw Error(ERRORS.useNow)
+  return context.createdAt
+}
+
 export function useId () {
   const context = useContext(ComponentMetaContext)
   if (!context) throw Error(ERRORS.useId)
@@ -63,5 +69,9 @@ const ERRORS = {
   useId: `
     useId() can only be used inside a component wrapped with observer().
     You have probably forgot to wrap your component with observer().
+  `,
+  useNow: `
+    useNow() can only be used inside a component wrapped with observer().
+    You have probably forgot to wrap your component with observer().
   `
 }

package/react/useSub.js

@@ -8,70 +8,79 @@ let TEST_THROTTLING = false
 // Currently it does lead to issues with extra rerenders and requires further investigation
 let USE_DEFERRED_VALUE = false
 
-export default function useSub (signal, params) {
+export function useAsyncSub (signal, params, options) {
+  return useSub(signal, params, { ...options, async: true })
+}
+
+export default function useSub (signal, params, options) {
   if (USE_DEFERRED_VALUE) {
-    return useSubDeferred(signal, params) // eslint-disable-line react-hooks/rules-of-hooks
+    return useSubDeferred(signal, params, options) // eslint-disable-line react-hooks/rules-of-hooks
   } else {
-    return useSubClassic(signal, params) // eslint-disable-line react-hooks/rules-of-hooks
+    return useSubClassic(signal, params, options) // eslint-disable-line react-hooks/rules-of-hooks
   }
 }
 
 // version of sub() which works as a react hook and throws promise for Suspense
-export function useSubDeferred (signal, params) {
+export function useSubDeferred (signal, params, { async = false } = {}) {
+  const $signalRef = useRef() // eslint-disable-line react-hooks/rules-of-hooks
+  const scheduleUpdate = useScheduleUpdate()
   signal = useDeferredValue(signal)
   params = useDeferredValue(params ? JSON.stringify(params) : undefined)
   params = params != null ? JSON.parse(params) : undefined
   const promiseOrSignal = params != null ? sub(signal, params) : sub(signal)
   // 1. if it's a promise, throw it so that Suspense can catch it and wait for subscription to finish
   if (promiseOrSignal.then) {
-    if (TEST_THROTTLING) {
-      // simulate slow network
-      throw new Promise((resolve, reject) => {
-        setTimeout(() => {
-          promiseOrSignal.then(resolve, reject)
-        }, TEST_THROTTLING)
-      })
+    const promise = maybeThrottle(promiseOrSignal)
+    if (async) {
+      scheduleUpdate(promise)
+      return
     }
-    throw promiseOrSignal
-  }
+    throw promise
   // 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
+  } else {
+    const $signal = promiseOrSignal
+    if ($signalRef.current !== $signal) $signalRef.current = $signal
+    return $signal
+  }
 }
 
 // classic version which initially throws promise for Suspense
 // but if we get a promise second time, we return the last signal and wait for promise to resolve
-export function useSubClassic (signal, params) {
+export function useSubClassic (signal, params, { async = false } = {}) {
   const $signalRef = useRef()
   const activePromiseRef = useRef()
   const scheduleUpdate = useScheduleUpdate()
   const promiseOrSignal = params != null ? sub(signal, params) : sub(signal)
   // 1. if it's a promise, throw it so that Suspense can catch it and wait for subscription to finish
   if (promiseOrSignal.then) {
-    let promise
-    if (TEST_THROTTLING) {
-      // simulate slow network
-      promise = new Promise((resolve, reject) => {
-        setTimeout(() => {
-          promiseOrSignal.then(resolve, reject)
-        }, TEST_THROTTLING)
-      })
-    } else {
-      promise = promiseOrSignal
-    }
+    const promise = maybeThrottle(promiseOrSignal)
     // first time we just throw the promise to be caught by Suspense
-    if (!$signalRef.current) throw promise
+    if (!$signalRef.current) {
+      // if we are in async mode, we just return nothing and let the user
+      // handle appearance of signal on their own.
+      // We manually schedule an update when promise resolves since we can't
+      // rely on Suspense in this case to automatically trigger component's re-render
+      if (async) {
+        scheduleUpdate(promise)
+        return
+      }
+      // in regular mode we throw the promise to be caught by Suspense
+      // this way we guarantee that the signal with all the data
+      // will always be there when component is rendered
+      throw promise
+    }
     // if we already have a previous signal, we return it and wait for new promise to resolve
     scheduleUpdate(promise)
     return $signalRef.current
-  }
   // 2. if it's a signal, we save it into ref to make sure it's not garbage collected while component exists
-  if ($signalRef.current !== promiseOrSignal) {
-    activePromiseRef.current = undefined
-    $signalRef.current = promiseOrSignal
+  } else {
+    const $signal = promiseOrSignal
+    if ($signalRef.current !== $signal) {
+      activePromiseRef.current = undefined
+      $signalRef.current = $signal
+    }
+    return $signal
   }
-  return promiseOrSignal
 }
 
 export function setTestThrottling (ms) {
@@ -86,3 +95,13 @@ export function resetTestThrottling () {
 export function setUseDeferredValue (value) {
   USE_DEFERRED_VALUE = value
 }
+
+// throttle to simulate slow network
+function maybeThrottle (promise) {
+  if (!TEST_THROTTLING) return promise
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      promise.then(resolve, reject)
+    }, TEST_THROTTLING)
+  })
+}

package/react/wrapIntoSuspense.js

@@ -19,21 +19,21 @@ export default function wrapIntoSuspense ({
         stateVersion: Symbol(), // eslint-disable-line symbol-description
         onStoreChange: undefined,
         scheduledUpdatePromise: undefined,
+        scheduleUpdate: promise => {
+          if (!promise?.then) throw Error('scheduleUpdate() expects a promise')
+          if (adm.scheduledUpdatePromise === promise) return
+          adm.scheduledUpdatePromise = promise
+          promise.then(() => {
+            if (adm.scheduledUpdatePromise !== promise) return
+            adm.scheduledUpdatePromise = undefined
+            adm.onStoreChange?.()
+          })
+        },
         subscribe (onStoreChange) {
           adm.onStoreChange = () => {
             adm.stateVersion = Symbol() // eslint-disable-line symbol-description
             onStoreChange()
           }
-          adm.scheduleUpdate = promise => {
-            if (!promise?.then) throw Error('scheduleUpdate() expects a promise')
-            if (adm.scheduledUpdatePromise === promise) return
-            adm.scheduledUpdatePromise = promise
-            promise.then(() => {
-              if (adm.scheduledUpdatePromise !== promise) return
-              adm.scheduledUpdatePromise = undefined
-              adm.onStoreChange?.()
-            })
-          }
           return () => {
             adm.onStoreChange = undefined
             adm.scheduledUpdatePromise = undefined

package/utils/MockFinalizationRegistry.js

@@ -1,17 +1,10 @@
-export const REGISTRY_FINALIZE_AFTER = 10_000
 export const REGISTRY_SWEEP_INTERVAL = 10_000
+const PERMANENT = false
 
-// This is a mock implementation of FinalizationRegistry that uses setTimeout to
-// schedule the sweep of outdated objects.
-// It is used in environments where FinalizationRegistry is not available.
-// For now we permanently keep the values in the registry until they are
-// manually unregistered since we don't have a way to know when the object is
-// no longer needed. In the future we might add the control logic to properly
-// invalidate the objects.
-export let PERMANENT = true
-export function setPermanent (permanent) { PERMANENT = permanent }
-
-export class TimerBasedFinalizationRegistry {
+// This is a mock implementation of FinalizationRegistry which doesn't actually
+// finalize anything. It's used in environments where FinalizationRegistry is not
+// available and it can not be simulated using WeakRef (e.g. React Native <0.75 or Old Architecture).
+export class PermanentFinalizationRegistry {
   registrations = new Map()
   sweepTimeout
 
@@ -25,7 +18,31 @@ export class TimerBasedFinalizationRegistry {
       value,
       registeredAt: Date.now()
     })
-    if (!PERMANENT) this.scheduleSweep()
+  }
+
+  unregister (token) {
+    this.registrations.delete(token)
+  }
+}
+
+// This is a mock implementation of FinalizationRegistry which uses WeakRef to
+// track the target objects. It's used in environments where FinalizationRegistry
+// is not available but WeakRef is (e.g. React Native >=0.75 on New Architecture).
+export class WeakRefBasedFinalizationRegistry {
+  registrations = new Map()
+  sweepTimeout
+
+  constructor (finalize) {
+    this.finalize = finalize
+  }
+
+  // Token is actually required with this impl
+  register (target, value, token) {
+    this.registrations.set(token, {
+      targetRef: new WeakRef(target),
+      value
+    })
+    this.scheduleSweep()
   }
 
   unregister (token) {
@@ -33,34 +50,37 @@ export class TimerBasedFinalizationRegistry {
   }
 
   // Bound so it can be used directly as setTimeout callback.
-  sweep = (maxAge = REGISTRY_FINALIZE_AFTER) => {
-    // cancel timeout so we can force sweep anytime
+  sweep = () => {
     clearTimeout(this.sweepTimeout)
     this.sweepTimeout = undefined
 
-    const now = Date.now()
     this.registrations.forEach((registration, token) => {
-      if (now - registration.registeredAt >= maxAge) {
-        this.finalize(registration.value)
-        this.registrations.delete(token)
-      }
+      if (registration.targetRef.deref() !== undefined) return
+      this.finalize(registration.value)
+      this.registrations.delete(token)
     })
 
-    if (this.registrations.size > 0) {
-      this.scheduleSweep()
-    }
-  }
-
-  // Bound so it can be exported directly as clearTimers test utility.
-  finalizeAllImmediately = () => {
-    this.sweep(0)
+    if (this.registrations.size > 0) this.scheduleSweep()
   }
 
   scheduleSweep () {
-    if (this.sweepTimeout === undefined) {
-      this.sweepTimeout = setTimeout(this.sweep, REGISTRY_SWEEP_INTERVAL)
-    }
+    if (this.sweepTimeout) return
+    this.sweepTimeout = setTimeout(this.sweep, REGISTRY_SWEEP_INTERVAL)
   }
 }
 
-export default (typeof FinalizationRegistry !== 'undefined' ? FinalizationRegistry : TimerBasedFinalizationRegistry)
+let ExportedFinalizationRegistry
+
+if (typeof FinalizationRegistry !== 'undefined') {
+  ExportedFinalizationRegistry = FinalizationRegistry
+} else if (typeof WeakRef !== 'undefined' && !PERMANENT) {
+  console.warn('FinalizationRegistry is not available in this environment. ' +
+      'Using a mock implementation: WeakRefBasedFinalizationRegistry')
+  ExportedFinalizationRegistry = WeakRefBasedFinalizationRegistry
+} else {
+  console.warn('FinalizationRegistry is not available in this environment. ' +
+      'Using a mock implementation: PermanentFinalizationRegistry')
+  ExportedFinalizationRegistry = PermanentFinalizationRegistry
+}
+
+export default ExportedFinalizationRegistry

package/utils/MockWeakRef.js

@@ -13,4 +13,13 @@ export function destroyMockWeakRef (weakRef) {
   weakRef.value = undefined
 }
 
-export default (typeof WeakRef !== 'undefined' ? WeakRef : MockWeakRef)
+let ExportedWeakRef
+
+if (typeof WeakRef !== 'undefined') {
+  ExportedWeakRef = WeakRef
+} else {
+  console.warn('WeakRef is not available in this environment. Using a mock implementation: MockWeakRef')
+  ExportedWeakRef = MockWeakRef
+}
+
+export default ExportedWeakRef