Atom Metal.js Snippets

An Atom snippet library for Metal.js, and metal-css-transitions. This library uses ES6 syntax.

Install via apm install atom-metal-snippets

Includes

Imports

[ict]

import Transition from 'metal-css-transitions';

[ijsx]

import Component from 'metal-jsx';

[imr]

import ${1} from 'metal-redux';

[isoy]

import Component from 'metal-soy';

Soy

[soy]

import Component, {Config} from 'metal-soy';

import templates from './${1:MyComponent}.soy';

class ${1:MyComponent} extends Component {
	${2:}
}

${1:MyComponent}.STATE = {
};

Soy.register(${1:MyComponent}, templates);

export default ${1:MyComponent};

JSX

[bind]

this.${1} = this.${1}.bind(this);

[jsx]

import Component, {Config} from 'metal-jsx';

class ${1:MyComponent} extends Component {
	render() {
		return (
			${2:<div>MyComponent</div>}
		);
	}
}

${1:MyComponent}.PROPS = {
};

${1:MyComponent}.STATE = {
};

export default ${1:MyComponent};

[trans]

<Transition name="$1">
		${2}
</Transition>

Life Cycles

[att]

attached() {
	${1}
}

[cre]

created() {
	${1}
}

[det]

detached() {
	${1}
}

[dis]

disposed() {
	${1}
}

[ren]

render() {
	return (
		${2}
	);
}

[rend]

rendered() {
	${1}
}

[shup]

shouldUpdate(newState, newProps) {
	${1}
}

[sync]

sync$1(newVal, prevVal) {
	${2}
}

State Management

[sst]

this.setState({$1});

[PRO]

${1}.PROPS = {
	${2}
};

[STA]

${1}.STATE = {
	${2}
};

Types

[conan]

Config.any()

[conarr]

Config.array()

[conarro]

Config.arrayOf(${1})

[conboo]

Config.bool()

[confun]

Config.func()

[conino]

Config.instanceOf(${1})

[connum]

Config.number()

[conob]

Config.object()

[conobo]

Config.objectOf(${1})

[conoot]

Config.oneOfType(
	[
		${1},
	]
)

[consha]

Config.shapeOf(
	{
		${1}
	}
)

[constr]

Config.string()

[conval]

Config.value(${1})