Ember-cli-hooks NPM

Ember Hooks

This is an experimental addon that allows you to use react style hooks inside of ember. In theory this should allow you to create your Ember components without ever using the this keyword. Additionally I have wrapped the ember props in a proxy that handles getting and setting for you. This should allow you to just set and get like you would with normal objects. This is still WIP and experimental.

Javascript with default hooks:

import Component from '@ember/component';
import layout from '../templates/components/counter-with-hooks';
import EmberHooksMixin, { useProperties } from 'ember-hooks/mixins/ember-hooks';

export default Component.extend(EmberHooksMixin, {
  layout,
  hooks() {
    // Use properties will automatically bind this data to your components scope
    const state = useProperties({
      count: 0,
    });

    // Note that you don't need to refer to this, instead you can mutate the values directly
    const increment = () => {
      state.count = state.count + 1;
    }

    // What gets returned here will bind to your component
    return {
      actions: {
        increment,
      }
    };
  }
});

Template

<h3>Count: {{count}}</h3>
<button onclick={{action "increment"}}>Increment</button>

Same component using a custom hook:

import { withHooks } from "ember-hooks/mixins/ember-hooks";
import useCounter from "../hooks/useCounter";

// withHooks will return a component with the mixin already attached
// You can still pass in additional mixins as arguments before props
const CounterUsingWithHooksComponent = withHooks(props => {

  // Explicitly deconstruct the values you want to use from the hook
  const { count, increment } = useCounter();

  return {
    count,
    actions: {
      increment,
    },
  };
});

export default CounterUsingWithHooksComponent;