Skip to content
This repository has been archived by the owner on Dec 13, 2023. It is now read-only.

A component with additional lifecycles for times when you may not need need a template.

License

Notifications You must be signed in to change notification settings

NullVoxPopuli/ember-lifecycle-component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Archived

While this component is built on public APIs, I can no longer recommend it as it doesn't fit within the current meta for reactivity

ember-lifecycle-component

npm version CI

For situations where you don't need a template.

  • WebGL Integration
  • Other DOM-less situations

The LifeCycleComponent has the same interface as @glimmer/component, but with some additional hooks.

Generally, you do not need this. Nearly all side-effecting code can be represented as computed/tracked properties and regular getters while causing changes via the functions that would have started the side-effect anyway.

All the hooks available for use are:

  • constructor(owner, args)
  • didReceiveArgs(prev, next)
  • didUpdate()
  • willDestroy()

Installation

ember install ember-lifecycle-component

Usage

More examples here, in the tests

import { LifeCycleComponent } from 'ember-lifecycle-component';

import THREE from 'three';

let geometry = new THREE.BoxGeometry( 2, 2, 2 );
let material = new THREE.MeshNormalMaterial();

export default class SceneBoxComponent extends LifeCycleComponent {
  constructor(owner, args) {
    super(owner, args);

    this.mesh = new THREE.Mesh(geometry, material);

    let { rx, ry, rz } = this.args;

    this.#updateRotation(rx, ry, rz);
    this.mesh.position.set(0, 0, 0);

    args.scene.add(this.mesh);
  }

  didUpdate() {
    let { rx, ry, rz } = this.args;
    this.#updateRotation({ rx, ry, rz });
  }

  willDestroy() {
    this.args.scene.remove(this.mesh);
  }

  #updateRotation({ rx, ry, rz }) {
    this.mesh.rotation.set(rx, ry, rz);
  }
}

Compatibility

  • See: config/ember-try.js

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.