snippet todo "// TODO"
// TODO $0
endsnippet

snippet fn "function .."
function $1($2) {
	$0
}
endsnippet

snippet if "if ( ... ) { ... }"
if ($1) {
	$0
}
endsnippet

snippet cl "console.log( ... )"
console.log($0);
endsnippet

snippet cw "console.warn( ... )"
console.warn($0);
endsnippet

snippet f "for (...)"
for (let index=0; index < $1; index += 1) {
	$0
}
endsnippet

snippet fr "for (...)"
for (let index=${1:0}; index ${2:<} $3; index ${4:+=} ${5:1}) {
	$0
}
endsnippet

snippet .fe "...forEach( ... );" i
.forEach(($1) => {
	$0
});
endsnippet

snippet wae "window.addEventListener( ... );"
window.addEventListener('$1', ($2) => {
	$0
});
endsnippet

snippet .ael "...addEventListener( ... );" i
.addEventListener('$1', ($2) => {
	$0
});
endsnippet

snippet st "setTimeout( ... )"
setTimeout(() => {$0
}, ${1:1000});
endsnippet

snippet dq "document.querySelector( ... )"
document.querySelector($0)
endsnippet

snippet dqa "document.querySelectorAll( ... )"
document.querySelectorAll($0)
endsnippet

snippet cdq "const ... = document.querySelector( ... )"
const $1 = document.querySelector($0);
endsnippet

snippet cdqa "const ... = document.querySelectorAll( ... )"
const $1 = document.querySelectorAll($0);
endsnippet

snippet jsx "import React ..."
import React from "react";

class $1 extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
		}
	}

	render() {
		return (
			<${2:div} className={this.props.className}>
				$0
			</$2>
		);
	}
}

export default () => (
	<S.$1}></S.$1>
);
endsnippet

snippet jsxs "import React ... styled"
import React from "react";
import styled from "styled-components";

const S = {};

class $1 extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
		}
	}

	render() {
		return (
			<${2:div} className={this.props.className}>
				$0
			</$2>
		);
	}
}

S.$1 = styled($1)\`
\`;

export default () => (
	<S.$1}></S.$1>
);
endsnippet

snippet jsc "class ... extends React.Component"
class $1 extends React.Component \{
${2:	constructor(props) \{
		super(props);
		this.state = \{
		\}
	\}}

	render() \{
		return (
			<${3:div}${4: className=\{this.props.className\}}>
				$0
			</$3>
		);
	}
}
endsnippet

snippet th "this.handle..."
this.handle${1:Click} = this.handle$1.bind(this);
endsnippet

snippet tb "this ... = ... .bind(this);"
this.$1 = this.$1.bind(this);
endsnippet

snippet wprb
import { registerBlockType } from '@wordpress/blocks';

const blockStyle = {
	color: red,
	backgroundColor: pink,
};

registerBlockType( '${1:namespace}/${2:block-name}', {
	title: '$3',
	icon: '${4:universal-access-alt}',
	category: '${5:layout}',
	example: {},
	edit( { className } ) {
		return <div className={ className }>Hello World, step 1 (from the editor).</div>;
	},
	save() {
		return <div style={ blockStyle }>Hello World, step 1 (from the frontend).</div>;
	},
} );
endsnippet

snippet rtw "React + twin.macro"
import * as React from "react"
import 'twin.macro'

const `!p snip.rv = snip.basename` = ({ children }) => {
  return (
		<$1 tw="$0">
			{children}
		</$1>
  )
}

export default `!p snip.rv = snip.basename`

endsnippet

snippet ue "useEffect(() => {"
useEffect(() => {
	$0
}, ${1:[]});
endsnippet

snippet ule "useLayoutEffect(() => {"
useLayoutEffect(() => {
	$0
}, ${1:[]});
endsnippet

snippet imp "import ... from ..."
import $1 from "${2:.}/$1";
endsnippet

snippet impcss "import ... from ..."
import \{ css \} from "@emotion/react";
endsnippet