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

When would you reach for the class-based Resource instead of the function-based resource?

• the capabilities of the function-based resource and class-based resource are almost identical. the main difference is that function-based resources may represent a single a value (which could, itself, be a class instance, or object with properties), class-based-resources expose the whole class instance to the consumer.

• function-based resources, however, are much easier to work with and understand, and have better intellisense capabilities.

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.

If your resource may be used with other resources in the same file, class-based resources also work with use, which gives the benefit of omitting the this parameter to from.

import { use } from 'ember-resources';
import { MyResource } from './somewhere';
import { SomeRequest } from './somewhere-else';
import { WebSocket } from './connection';

class ContainingClass {
  @use state = MyResource.from(() => [...])
  @use request = SomeRequest.from(() => [...])
  @use socket = WebSocket.from(() => [...])
}