computeMany

Overview

The computeMany function allows you to create a computed ref object that depends on multiple source ref objects and a computation function. The computed ref automatically updates when any of the source refs change, making it useful for deriving values from multiple reactive data sources.

Try it live

import { computed, computeMany, computeRef, html, ref } from 'regor'

export function createDerived(interactive = false) {
  const seats = ref(4)
  const price = ref(25)
  return {
    interactive,
    seats,
    price,
    total: computed(() => seats() * price()),
    double: computeRef(seats, (value) => value * 2),
    combined: computeMany([seats, price], (count, cost) => count + cost),
  }
}

export const derivedTemplate = html` <div class="guide-demo">
  <div class="guide-filter">
    <label
      >Seats · {{ seats }}<input
        type="range"
        min="1"
        max="12"
        r-model.number="seats"
        :value="seats"
        :disabled="!interactive" /></label
    ><label
      >Price · {{ price }}<input
        type="range"
        min="10"
        max="50"
        step="5"
        r-model.number="price"
        :value="price"
        :disabled="!interactive"
    /></label>
  </div>
  <div class="guide-metrics">
    <div>
      <output class="api-derived-total">{{ total }}</output
      ><span>computed · seats × price</span>
    </div>
    <div><output>{{ double }}</output><span>computeRef · seats × 2</span></div>
    <div>
      <output>{{ combined }}</output><span>computeMany · seats + price</span>
    </div>
  </div>
  <p class="guide-hint">
    Three read-only values, three ways to specify their dependencies.
  </p>
</div>`

import { createApp, RegorConfig, useScope } from 'regor'
import { apiExamples } from './examples'

const element = document.getElementById('api-demo')
const name = element?.dataset.example
if (element && name && Object.hasOwn(apiExamples, name)) {
  const example = apiExamples[name as keyof typeof apiExamples]
  const scope = useScope<object>(() => example.create(true))
  const config =
    'config' in scope.context && scope.context.config instanceof RegorConfig
      ? scope.context.config
      : undefined
  createApp(scope, { element, template: example.template }, config)
}

Usage

Creating Computed Refs

To create a computed ref using computeMany, you provide an array of source ref objects and a computation function. The computation function calculates the computed value based on the values of the source refs, and the computed ref will automatically update when any of the source refs change.

import { computeMany, ref } from 'regor'

const myRef1 = ref(5)
const myRef2 = ref(10)

// Create a computed ref that depends on both myRef1 and myRef2
const computedValue = computeMany(
  [myRef1, myRef2],
  (value1, value2) => value1 + value2,
)

console.log(computedValue.value) // Outputs 15

// Later, when myRef1 or myRef2 changes, computedValue will automatically update
myRef1.value = 7
console.log(computedValue.value) // Outputs 17

Parameters

• sources: An array of source ref objects that the computed ref depends on. Changes to any of the source refs will trigger the computation.
• compute: A function that calculates the computed value based on the values of the source refs. This function should not have side effects and should only depend on reactive data.

Return Value

• The computeMany function returns a computed ref object that holds the computed value. You can access the computed value using the .value property of the computed ref or by invoking it directly.

Example

import { computeMany, ref } from 'regor'

const myRef1 = ref(5)
const myRef2 = ref(10)

// Create a computed ref that depends on both myRef1 and myRef2
const computedValue = computeMany(
  [myRef1, myRef2],
  (value1, value2) => value1 + value2,
)

console.log(computedValue.value) // Outputs 15

// Later, when myRef1 or myRef2 changes, computedValue will automatically update
myRef1.value = 7
console.log(computedValue.value) // Outputs 17

See Also

Back to the API list