teamplay 0.4.0 → 0.5.0-alpha.1

package/react/executionContextTracker.js

@@ -1,32 +0,0 @@
-export default new class ExecutionContextTracker {
-  #contextId
-  #hooksCounter
-
-  isActive () {
-    return this.#contextId !== undefined
-  }
-
-  getComponentId () {
-    return this.#contextId
-  }
-
-  newHookId () {
-    this.incrementHooksCounter()
-    const id = `_${this.#contextId}_${this.#hooksCounter}`
-    return id
-  }
-
-  incrementHooksCounter () {
-    if (!this.#contextId) return
-    this.#hooksCounter++
-  }
-
-  _start (contextId) {
-    this.#contextId = contextId
-    this.#hooksCounter = -1
-  }
-
-  _clear () {
-    this.#contextId = undefined
-  }
-}()

package/react/helpers.js

@@ -1,141 +0,0 @@
-import { useContext, createContext, useRef, useEffect, useLayoutEffect } from 'react'
-
-export const ComponentMetaContext = createContext({})
-
-export function pipeComponentDisplayName (SourceComponent, TargetComponent, suffix = '', defaultName = 'StartupjsWrapper') {
-  const displayName = SourceComponent.displayName || SourceComponent.name
-
-  if (!TargetComponent.displayName) {
-    TargetComponent.displayName = displayName ? (displayName + suffix) : defaultName
-  }
-}
-
-export function pipeComponentMeta (SourceComponent, TargetComponent, suffix = '', defaultName = 'StartupjsWrapper') {
-  pipeComponentDisplayName(SourceComponent, TargetComponent, suffix, defaultName)
-
-  if (!TargetComponent.propTypes && SourceComponent.propTypes) {
-    TargetComponent.propTypes = SourceComponent.propTypes
-  }
-  if (!TargetComponent.defaultProps && SourceComponent.defaultProps) {
-    TargetComponent.defaultProps = SourceComponent.defaultProps
-  }
-  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)
-  return context.componentId
-}
-
-export function useTriggerUpdate () {
-  const context = useContext(ComponentMetaContext)
-  if (!context) throw Error(ERRORS.useTriggerUpdate)
-  return context.triggerUpdate
-}
-
-export function useScheduleUpdate () {
-  const context = useContext(ComponentMetaContext)
-  if (!context) throw Error(ERRORS.useScheduleUpdate)
-  return context.scheduleUpdate
-}
-
-export function useDefer () {
-  const context = useContext(ComponentMetaContext)
-  if (!context) throw Error(ERRORS.useScheduleUpdate)
-  return context.defer
-}
-
-export function useCache (key) {
-  const context = useContext(ComponentMetaContext)
-  if (!context) throw Error(ERRORS.useCache)
-  return context.cache
-}
-
-export function useUnmount (fn) {
-  const fnRef = useRef()
-  if (fnRef.current !== fn) fnRef.current = fn
-  useEffect(
-    () => () => {
-      fnRef.current()
-    },
-    []
-  )
-}
-
-export function useDidUpdate (fn, deps) {
-  const isFirst = useRef(true)
-  const fnRef = useRef(fn)
-  if (fnRef.current !== fn) fnRef.current = fn
-  const stableDeps = useStableDeps(deps)
-  useEffect(() => {
-    if (isFirst.current) {
-      isFirst.current = false
-      return
-    }
-    return fnRef.current()
-  }, stableDeps)
-}
-
-export function useOnce (condition, fn) {
-  const fired = useRef(false)
-  useEffect(() => {
-    if (fired.current) return
-    if (!condition) return
-    fired.current = true
-    return fn()
-  }, [condition, fn])
-}
-
-export function useSyncEffect (fn, deps) {
-  const stableDeps = useStableDeps(deps)
-  useLayoutEffect(fn, [fn, stableDeps])
-}
-
-function useStableDeps (deps) {
-  const depsRef = useRef([])
-  const nextDeps = Array.isArray(deps) ? deps : []
-  if (!shallowEqualArrays(depsRef.current, nextDeps)) {
-    depsRef.current = nextDeps
-  }
-  return depsRef.current
-}
-
-function shallowEqualArrays (a, b) {
-  if (a === b) return true
-  if (!Array.isArray(a) || !Array.isArray(b)) return false
-  if (a.length !== b.length) return false
-  for (let i = 0; i < a.length; i++) {
-    if (!Object.is(a[i], b[i])) return false
-  }
-  return true
-}
-
-const ERRORS = {
-  useTriggerUpdate: `
-    useTriggerUpdate() can only be used inside a component wrapped with observer().
-    You have probably forgot to wrap your component with observer().
-  `,
-  useScheduleUpdate: `
-    useScheduleUpdate() can only be used inside a component wrapped with observer().
-    You have probably forgot to wrap your component with observer().
-  `,
-  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().
-  `,
-  useCache: `
-    useCache() can only be used inside a component wrapped with observer().
-    You have probably forgot to wrap your component with observer().
-  `
-}

package/react/observer.js

@@ -1,9 +0,0 @@
-import convertToObserver from './convertToObserver.js'
-import wrapIntoSuspense from './wrapIntoSuspense.js'
-
-function observer (Component, options) {
-  return wrapIntoSuspense(convertToObserver(Component, options))
-}
-observer.__wrapObserverMeta = wrapIntoSuspense
-observer.__makeObserver = convertToObserver
-export default observer

package/react/promiseBatcher.js

@@ -1,115 +0,0 @@
-let active = false
-let promises = []
-let checks = new Map()
-
-const READINESS_POLL_INTERVAL_MS = 16
-const READINESS_WARN_AFTER_MS = 1000
-
-export function activate () {
-  active = true
-}
-
-export function add (promise) {
-  if (!promise || typeof promise.then !== 'function') return
-  promises.push(promise)
-}
-
-export function addCheck (check) {
-  if (!check || typeof check.isReady !== 'function') return
-  const key = check.key ?? Symbol('batch-check')
-  checks.set(key, { ...check, key })
-}
-
-export function getPromiseAll () {
-  const pendingPromises = promises
-  const pendingChecks = Array.from(checks.values())
-  const hasPromises = pendingPromises.length > 0
-  // Checks are a materialization barrier for initial batch subscriptions.
-  // If there were no subscription promises in this render, we are in update mode
-  // and should not suspend the whole subtree.
-  const result = hasPromises
-    ? waitForBatchReady(pendingPromises, pendingChecks)
-    : null
-  reset()
-  return result
-}
-
-export function isActive () {
-  return active
-}
-
-export function reset () {
-  active = false
-  promises = []
-  checks = new Map()
-}
-
-async function waitForBatchReady (pendingPromises, pendingChecks) {
-  if (pendingPromises.length > 0) await Promise.all(pendingPromises)
-  // Let microtasks flush after subscription promises resolve so tree writes become visible.
-  await Promise.resolve()
-  await waitForChecksReady(pendingChecks)
-}
-
-async function waitForChecksReady (pendingChecks) {
-  if (pendingChecks.length === 0) return
-  let warned = false
-  const startedAt = Date.now()
-  while (true) {
-    const notReadyChecks = getNotReadyChecks(pendingChecks)
-    if (notReadyChecks.length === 0) return
-    if (!warned && isDevMode() && Date.now() - startedAt >= READINESS_WARN_AFTER_MS) {
-      warned = true
-      warnAboutChecksDelay(notReadyChecks)
-    }
-    await delay(READINESS_POLL_INTERVAL_MS)
-  }
-}
-
-function getNotReadyChecks (pendingChecks) {
-  const notReady = []
-  for (const check of pendingChecks) {
-    if (!isCheckReady(check)) notReady.push(check)
-  }
-  return notReady
-}
-
-function isCheckReady (check) {
-  try {
-    return !!check.isReady()
-  } catch (err) {
-    if (isThenable(err)) return false
-    throw err
-  }
-}
-
-function warnAboutChecksDelay (checks) {
-  const details = checks.map(check => {
-    let state
-    try {
-      state = typeof check.getState === 'function' ? check.getState() : undefined
-    } catch (err) {
-      state = isThenable(err) ? 'suspended' : `state-error: ${err?.message || err}`
-    }
-    return {
-      type: check.type || 'unknown',
-      key: String(check.key),
-      details: check.details,
-      state
-    }
-  })
-  console.warn('[teamplay] useBatch() is waiting for data materialization checks.', details)
-}
-
-function isDevMode () {
-  if (typeof process === 'undefined' || !process?.env) return true
-  return process.env.NODE_ENV !== 'production'
-}
-
-function isThenable (value) {
-  return !!value && typeof value.then === 'function'
-}
-
-function delay (ms) {
-  return new Promise(resolve => setTimeout(resolve, ms))
-}

package/react/renderAttemptDestroyer.js

@@ -1,47 +0,0 @@
-class RenderAttemptDestroyer {
-  constructor () {
-    this.fns = []
-    this.compatAttemptCleanupArmed = false
-    this.suspenseGateArmed = false
-  }
-
-  add (fn, { compat = false } = {}) {
-    if (typeof fn !== 'function') return
-    this.fns.push(fn)
-    if (compat) this.compatAttemptCleanupArmed = true
-  }
-
-  armCompatAttemptCleanup () {
-    this.compatAttemptCleanupArmed = true
-  }
-
-  armSuspenseGate () {
-    this.suspenseGateArmed = true
-  }
-
-  consumeThenableHandling () {
-    const shouldRunAttemptCleanup = this.compatAttemptCleanupArmed && this.fns.length > 0
-    const shouldKeepShellAlive = this.suspenseGateArmed || shouldRunAttemptCleanup
-    let destroyAttempt
-    if (shouldRunAttemptCleanup) {
-      const fns = [...this.fns]
-      destroyAttempt = async () => {
-        await Promise.allSettled(fns.map(fn => fn()))
-        fns.length = 0
-      }
-    }
-    this.reset()
-    return {
-      shouldKeepShellAlive,
-      destroyAttempt
-    }
-  }
-
-  reset () {
-    this.fns.length = 0
-    this.compatAttemptCleanupArmed = false
-    this.suspenseGateArmed = false
-  }
-}
-
-export default new RenderAttemptDestroyer()

package/react/trapRender.js

@@ -1,50 +0,0 @@
-// trap render function (functional component) to block observer updates and activate cache
-// during synchronous rendering
-import executionContextTracker from './executionContextTracker.js'
-import * as promiseBatcher from './promiseBatcher.js'
-import renderAttemptDestroyer from './renderAttemptDestroyer.js'
-
-export default function trapRender ({ render, cache, destroy, componentId }) {
-  return (...args) => {
-    executionContextTracker._start(componentId)
-    cache.activate()
-    let destroyed
-    try {
-      renderAttemptDestroyer.reset()
-      promiseBatcher.reset()
-      const res = render(...args)
-      if (isDevMode() && promiseBatcher.isActive()) {
-        throw Error('[teamplay] useBatch* hooks were used without a closing useBatch() call.')
-      }
-      return res
-    } catch (err) {
-      promiseBatcher.reset()
-      if (!err.then) {
-        destroy('trapRender.js')
-        destroyed = true
-        throw err
-      }
-      const {
-        shouldKeepShellAlive,
-        destroyAttempt
-      } = renderAttemptDestroyer.consumeThenableHandling()
-      if (shouldKeepShellAlive) {
-        throw Promise.resolve(err).then(() => destroyAttempt?.())
-      }
-
-      // TODO: this might only be needed only if promise is thrown
-      //       (check if useUnmount in convertToObserver is called if a regular error is thrown)
-      destroy('trapRender.js')
-      destroyed = true
-      throw err
-    } finally {
-      if (!destroyed) cache.deactivate()
-      executionContextTracker._clear()
-    }
-  }
-}
-
-function isDevMode () {
-  if (typeof process === 'undefined' || !process?.env) return true
-  return process.env.NODE_ENV !== 'production'
-}

package/react/universal$.js

@@ -1,18 +0,0 @@
-import $ from '../orm/$.js'
-import { useCache } from './helpers.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) {
-  if (executionContextTracker.isActive()) {
-    // within react component
-    const id = executionContextTracker.newHookId()
-    const cache = useCache() // eslint-disable-line react-hooks/rules-of-hooks
-    const $signal = $($root, value, id)
-    cache.set(id, $signal)
-    // save signal into ref to make sure it's not garbage collected while component exists
-    return $signal
-  } else {
-    return $($root, value)
-  }
-}

package/react/universalSub.js

@@ -1,21 +0,0 @@
-// NOTE: this is not used currently since using an explicit useSub()
-//       hook is easier to understand in a React context.
-//       Having the same sub() function working with either await or without it
-//       is confusing. It's better to have a separate function for the hook.
-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()) {
-    // 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/useApi.js

@@ -1,63 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-
-export default function useApi (api, args = [], options = {}) {
-  const { debounce = 0 } = options || {}
-  const [data, setData] = useState()
-  const [error, setError] = useState()
-  const [loading, setLoading] = useState(false)
-  const requestIdRef = useRef(0)
-  const stableArgs = useStableDeps(Array.isArray(args) ? args : [args])
-
-  useEffect(() => {
-    if (typeof api !== 'function') return
-    let cancelled = false
-    const requestId = ++requestIdRef.current
-    let timer
-
-    const run = async () => {
-      try {
-        setLoading(true)
-        const result = await api(...stableArgs)
-        if (cancelled || requestId !== requestIdRef.current) return
-        setData(result)
-        setError(undefined)
-      } catch (err) {
-        if (cancelled || requestId !== requestIdRef.current) return
-        setError(err)
-      } finally {
-        if (!cancelled && requestId === requestIdRef.current) setLoading(false)
-      }
-    }
-
-    if (debounce > 0) {
-      timer = setTimeout(run, debounce)
-    } else {
-      run()
-    }
-
-    return () => {
-      cancelled = true
-      if (timer) clearTimeout(timer)
-    }
-  }, [api, debounce, stableArgs])
-
-  return [data, loading, error]
-}
-
-function useStableDeps (deps) {
-  const depsRef = useRef([])
-  if (!shallowEqualArrays(depsRef.current, deps)) {
-    depsRef.current = deps
-  }
-  return depsRef.current
-}
-
-function shallowEqualArrays (a, b) {
-  if (a === b) return true
-  if (!Array.isArray(a) || !Array.isArray(b)) return false
-  if (a.length !== b.length) return false
-  for (let i = 0; i < a.length; i++) {
-    if (!Object.is(a[i], b[i])) return false
-  }
-  return true
-}

package/react/useSub.js

@@ -1,169 +0,0 @@
-import { useRef, useDeferredValue } from 'react'
-import sub from '../orm/sub.js'
-import { useScheduleUpdate, useCache, useDefer, useId } from './helpers.js'
-import executionContextTracker from './executionContextTracker.js'
-import * as promiseBatcher from './promiseBatcher.js'
-import renderAttemptDestroyer from './renderAttemptDestroyer.js'
-import { markCompatComponent } from './compatComponentRegistry.js'
-
-let TEST_THROTTLING = false
-
-// experimental feature to leverage useDeferredValue() to handle re-subscriptions.
-// Currently it does lead to issues with extra rerenders and requires further investigation
-let USE_DEFERRED_VALUE = true
-// by default we want to defer stuff if possible instead of throwing promises
-let DEFAULT_DEFER = true
-
-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, options) // eslint-disable-line react-hooks/rules-of-hooks
-  } else {
-    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, { async = false, defer, batch = false, compatAttemptCleanup = false } = {}) {
-  const $signalRef = useRef() // eslint-disable-line react-hooks/rules-of-hooks
-  const componentId = useId()
-  const scheduleUpdate = useScheduleUpdate()
-  const observerDefer = useDefer()
-  if (compatAttemptCleanup) markCompatComponent(componentId)
-  if (batch) promiseBatcher.activate()
-  defer ??= observerDefer ?? DEFAULT_DEFER
-  if (defer) {
-    signal = useDeferredValue(signal) // eslint-disable-line react-hooks/rules-of-hooks
-    params = useDeferredValue(params ? JSON.stringify(params) : undefined) // eslint-disable-line react-hooks/rules-of-hooks
-    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) {
-    const promise = maybeThrottle(promiseOrSignal)
-    const hasPreviousSignal = !!$signalRef.current
-    if (batch) {
-      // Batch suspense must block only on initial load.
-      // On resubscribe we keep rendering previous signal and refresh in background.
-      if (!hasPreviousSignal) {
-        promiseBatcher.add(promise)
-        if (compatAttemptCleanup) registerCompatAttemptCleanup(signal, params)
-      } else {
-        scheduleUpdate(promise)
-      }
-      if (async) scheduleUpdate(promise)
-      return $signalRef.current
-    }
-    if (async) {
-      scheduleUpdate(promise)
-      return
-    }
-    // Keep previous snapshot during update re-subscribe and refresh in background.
-    if (hasPreviousSignal) {
-      scheduleUpdate(promise)
-      return $signalRef.current
-    }
-    if (compatAttemptCleanup) registerCompatAttemptCleanup(signal, params)
-    throw promise
-  // 2. if it's a signal, we save it into ref to make sure it's not garbage collected while component exists
-  } 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, { async = false, batch = false, compatAttemptCleanup = false } = {}) {
-  const id = executionContextTracker.newHookId()
-  const componentId = useId()
-  const cache = useCache()
-  const activePromiseRef = useRef()
-  const scheduleUpdate = useScheduleUpdate()
-  if (compatAttemptCleanup) markCompatComponent(componentId)
-  if (batch) promiseBatcher.activate()
-  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) {
-    const promise = maybeThrottle(promiseOrSignal)
-    if (batch) {
-      const hasPreviousSignal = cache.has(id)
-      // Batch suspense must block only on initial load.
-      // On resubscribe we keep rendering previous signal and refresh in background.
-      if (!hasPreviousSignal) {
-        promiseBatcher.add(promise)
-        if (compatAttemptCleanup) registerCompatAttemptCleanup(signal, params)
-      } else {
-        scheduleUpdate(promise)
-      }
-      if (async) scheduleUpdate(promise)
-      if (hasPreviousSignal) return cache.get(id)
-      return
-    }
-    // first time we just throw the promise to be caught by Suspense
-    if (!cache.has(id)) {
-      // 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
-      }
-      if (compatAttemptCleanup) registerCompatAttemptCleanup(signal, params)
-      // 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 cache.get(id)
-  // 2. if it's a signal, we save it into ref to make sure it's not garbage collected while component exists
-  } else {
-    const $signal = promiseOrSignal
-    if (cache.get(id) !== $signal) {
-      activePromiseRef.current = undefined
-      cache.set(id, $signal)
-    }
-    return $signal
-  }
-}
-
-export function setTestThrottling (ms) {
-  if (typeof ms !== 'number') throw Error('setTestThrottling() accepts only a number in ms')
-  if (ms === 0) throw Error('setTestThrottling(0) is not allowed, use resetTestThrottling() instead')
-  if (ms < 0) throw Error('setTestThrottling() accepts only a positive number in ms')
-  TEST_THROTTLING = ms
-}
-export function resetTestThrottling () {
-  TEST_THROTTLING = false
-}
-export function setUseDeferredValue (value) {
-  USE_DEFERRED_VALUE = value
-}
-export function setDefaultDefer (value) {
-  DEFAULT_DEFER = 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)
-  })
-}
-
-function registerCompatAttemptCleanup (signal, params) {
-  // Compat hooks don't build per-hook init objects like Racer.
-  // We still need a marker so trapRender can defer observer-shell cleanup
-  // only when a real attempt cleanup exists.
-  // This path must not arm suspense-gate keep-alive by itself.
-  renderAttemptDestroyer.armCompatAttemptCleanup()
-}