/define-state

Define stateful property for an object

Primary LanguageJavaScript

define state

DEPRECATION NOTICE

Just use st8 directly as:

import State from 'st8'

var state = new State({
	a(){
		// onenter
		this === target //true
	},
	
	b(){
		// onenter
		this === target //true
		return () => {
			// onexit
		}
	}
	
}, target);

Object.defineProperty(target, property, {
	set: function (value) {
		return state.set(value);
	},
	get: function () {
		return state.get();
	}
});

Define stateful property on class instance or any object. Behaves like defineProperty, but defines a state.

$ npm install define-state

var defineState = require('define-state');

function MyComponent (el) {
	this.el = el;

	//define state on instance
	defineState(this, 'state', this.state);

	//go to initial state
	this.state = true;
}

//state declaration
MyComponent.prototype.state = {
	true: {
		before: function () {
			this.el.innerHTML = 'Hello world!';
		}
	}
}

//create instance
new MyComponent(document.querySelector('#hello'));

API

defineState(target, name, state, isFn?)

Define stateful property name on a target according to the state declaration (see st8 API). Pass optional isFn argument to define functional accessor instead of getter/setter, might be useful for IE8/ES3 environments or to define functional-style components, like dialog.

defineState(target, 'visible', {
	true: function () {
		this.removeAttribute('hidden');
	},
	false: function () {
		this.setAttribute('hidden', true);
	}
}, true);

target.visible(false);

NPM