Aberdeen - v1.1.0
    Preparing search index...

    Function derive

    • Creates a reactive scope that automatically re-executes the provided function whenever any proxied data (created by proxy) read during its last execution changes, storing its return value in an observable.

      Updates are batched and run asynchronously shortly after the changes occur. Use clean to register cleanup logic for the scope. Use peek or unproxy within the function to read proxied data without subscribing to it.

      Type Parameters

      • T

      Parameters

      • func: () => T

        The function to execute reactively. Any DOM manipulations should typically be done using $ within this function. Its return value will be made available as an observable returned by the derive() function.

      Returns ValueRef<T>

      An observable object, with its value property containing whatever the last run of func returned.

      const data = proxy({ user: 'Frank', notifications: 42 });

      $('main', () => {
        console.log('Welcome');
        $('h3:Welcome, ' + data.user); // Reactive text

        derive(() => {
          // When data.notifications changes, only this inner scope reruns,
          // leaving the `<p>Welcome, ..</p>` untouched.
          console.log('Notifications');
          $('code.notification-badge:' + data.notifications);
          $('a:Notify!', {click: () => data.notifications++});
        });
      });

      Note that the above could just as easily be done using $(func) instead of derive(func).

      const counter = proxy(0);
      setInterval(() => counter.value++, 1000);
      const double = derive(() => counter.value * 2);

      $('h3', () => {
          $(`:counter=${counter.value} double=${double.value}`);
      })

    Settings

    Member Visibility