Class Resource<Args>

The 'Resource' base class has only one lifecycle hook, modify, which is called during instantiation of the resource as well as on every update of any of any consumed args.

Typically, a Resource will be used to build higher-level APIs that you'd then use in your apps. For example, maybe you want to build a reactive-wrapper around a non-reactive wrapper, XState which requires that the "State machine interpreter" is stopped when you are discarding the parent context (such as a component).

An example

import { Resource } from 'ember-resources';
import { createMachine, interpret } from 'xstate';

const machine = createMachine(); // ... see XState docs for this function this ...

class MyResource extends Resource {
  @tracked customState;

  constructor(owner) {
    super(owner);

    registerDestructor(this, () => this.interpreter.stop());
  }

  modify(positional, named) {
    if (!this.interpreter) {
      // Initial Setup
      this.interpreter = interpret(machine).onTransition(state => this.customState = state);
    } else {
      // Subsequent Updates
      this.interpreter.send('SOME_EVENT', { positional, named });
    }
  }
}

Once defined, there are two ways to use MyResource

• in a template
• in JavaScript

In the template, the Resource can be imported (or re-exported from the helpers directory)

When imported (using RFC 779),

import { MyResource } from './somewhere';

<template>
  {{#let (MyResource) as |myResource|}}
    {{log myResource.customState}}
  {{/let}}
</template>

When using in javascript, you'll need the from utility

import { MyResource } from './somewhere';

class ContainingClass {
  state = MyResource.from(this, () => [...])
}

However, when authoring a Resource, it's useful to co-locate an export of a helper function:

export function myResource(destroyable, options) {
  return MyResource.from(destroyable, () => ({
    foo: () => options.foo,
    bar: () => options.bar,
  }))
}

This way, consumers only need one import.