resume

Resume a ref’s notification behavior after a pause.

resumeReactivity

Resume a ref’s notification behavior after a pause.

Overview

The resume function is used to resume the automatic triggering of observers for a specific ref that has previously been paused using the pause function. When a ref is resumed, its observers are reactivated, and changes to the ref's value will once again trigger observer callbacks.

Try it live

Separate stored values from notificationsLive API

Live preview

0Stored value

0Observer's last value

0Callbacks

Notifications are active.

Pause, write, then resume and trigger. The stored value and the last observed value show different responsibilities.

notifications.ts

import { html, observe, pause, ref, resume, trigger } from 'regor'

export function createNotifications(interactive = false) {
  const source = ref(0),
    stored = ref(0),
    seen = ref(0),
    callbacks = ref(0),
    paused = ref(false)
  observe(source, (value) => {
    seen(value)
    callbacks(callbacks() + 1)
  })
  return {
    interactive,
    stored,
    seen,
    callbacks,
    paused,
    write: () => {
      source(source() + 1)
      stored(source())
    },
    pauseSource: () => {
      pause(source)
      paused(true)
    },
    resumeSource: () => {
      resume(source)
      paused(false)
    },
    notify: () => trigger(source),
  }
}

export const notificationsTemplate = html` <div class="guide-demo">
  <div class="guide-session-bar">
    <button type="button" @click="write" :disabled="!interactive">
      Write +1</button
    ><button
      type="button"
      @click="pauseSource"
      :disabled="!interactive || paused"
    >
      Pause</button
    ><button
      type="button"
      @click="resumeSource"
      :disabled="!interactive || !paused"
    >
      Resume</button
    ><button type="button" @click="notify" :disabled="!interactive || paused">
      Trigger
    </button>
  </div>
  <div class="guide-metrics">
    <div><output>{{ stored }}</output><span>Stored value</span></div>
    <div><output>{{ seen }}</output><span>Observer's last value</span></div>
    <div><output>{{ callbacks }}</output><span>Callbacks</span></div>
  </div>
  <p class="guide-event">
    Notifications are {{ paused ? 'paused' : 'active' }}.
  </p>
  <p class="guide-hint">
    Pause, write, then resume and trigger. The stored value and the last
    observed value show different responsibilities.
  </p>
</div>`

browser.ts

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)
}

Pause, write, resume, and trigger. Compare the stored value with what the observer last received.

Usage

Resuming Observers

To resume the observers of a specific ref, call the resume function with the ref as the source argument. This will reactivate the observers associated with the ref.

import { pause, resume, ref, observe } from 'regor'

const myRef = ref(5)

observe(myRef, () => {
  console.log('Observer triggered:', myRef.value)
})

myRef.value = 10 // The observer is automatically triggered

// Pause the observers of myRef
pause(myRef)

myRef.value = 15 // The observer is not triggered

// Resume the observers of myRef
resume(myRef)

myRef.value = 20 // The observer is triggered again

// Outputs:
// Observer triggered: 10
// Observer triggered: 20

Parameters

source: The ref for which you want to resume the automatic triggering of observers.

Coordinate the paused write sequence

The preview separates writing, resuming, and explicitly triggering so their effects are visible.

Notes

The resume function is used to reactivate observers for a ref that has previously been paused using the pause function. This allows you to continue receiving observer notifications when changes are made to the ref's value.
Resuming a ref's observers does not trigger observer callbacks for past changes made while the ref was paused. Only future changes to the ref's value will trigger observers.