https://github.com/NullVoxPopuli/ember-lifecycle-component

A component with additional lifecycles for times when you may not need need a template.
https://github.com/NullVoxPopuli/ember-lifecycle-component

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/NullVoxPopuli/ember-lifecycle-component
• Owner: NullVoxPopuli
• License: mit
• Archived: true
• Created: 2019-12-14T20:00:38.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-12-13T17:25:00.000Z (11 months ago)
• Last Synced: 2024-07-05T16:09:32.028Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 1.2 MB
• Stars: 9
• Watchers: 3
• Forks: 2
• Open Issues: 43
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-ember - ember-lifecycle-component - A component with additional lifecycles for times when you may need need a template. (Packages / External Components Integration)

README

        
# 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](https://badge.fury.io/js/ember-lifecycle-component.svg)](https://badge.fury.io/js/ember-lifecycle-component)

[![CI](https://github.com/NullVoxPopuli/ember-lifecycle-component/actions/workflows/tests.yml/badge.svg?branch=master&event=push)](https://github.com/NullVoxPopuli/ember-lifecycle-component/actions/workflows/tests.yml)

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](https://github.com/NullVoxPopuli/ember-lifecycle-component/blob/master/tests/integration/components/renderless-test.js)

```ts

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](CONTRIBUTING.md) guide for details.

## License

This project is licensed under the [MIT License](LICENSE.md).