wheatup/pivotjs

Pivot.js is a super lite-weight library for creating DOM structure with javascript.

Pivot.js is a super lite-weight library for creating DOM structure with javascript.

Basic usage

Register a view

P.View('TestView', () => ({
  render () {
    return P('div', { class: 'test-view' }, [
      P('h1', 'Hello World!'),
      P('ul', [P('li', 'hello'), P('li', 'world')])
    ])
  }
}));

Insert a view into DOM

document.body.append(P('TestView').dom);

This will create a structure like this and insert it into docment.body:

<div data-pivot="TestView" class="test-view">
  <h1>Hello World!</h1>
  <ul>
    <li>hello</li>
    <li>world</li>
  </ul>
</div>

You can get a normal HTMLElement by calling P('TestView').dom

---

Nesting another view

P.View('TestView', () => ({
	render() {
		return P('div', { class: 'test-view' }, [
			P('h1', 'Hello World!'),

			// instead of tag name, specify the view name you registered
			P('NestedView', { candies: 42 }),

			// and you can nest a duplicate that has different properties
			P('NestedView', { candies: 1337 })
		])
	}
}));

P.View('NestedView', () => ({
	render() {
		// get the properties from this.props that passed from above
		return P('h2', this.props.candies)
	}
}));

document.body.append(P('TestView').dom);

This will create a structure like this:

<div data-pivot="TestView" class="test-view">
  <h1>Hello World!</h1>
  <h2 data-pivot="NestedView">42</h2>
  <h2 data-pivot="NestedView">1337</h2>
</div>

Handling events

P.View('TestView', () => ({
	// you can create a function directly here
	onClickMe() {
		alert('ouch');
	},

	render() {
		return (
			P('div', { class: 'test-view' }, [
				P('h1', { text: 'Hello World!' }),

				// when the span is clicked, it alerts "ouch"
				P('span', 'Click Me!', { '@click': () => this.onClickMe() })
			])
		);
	}
}));

document.body.append(P('TestView').dom);

Modifying states

P.View('TestView', () => ({
	candies: 0,

	addCandy(number) {
		this.candies += number;
	},

	render() {
		return (
			P('div', { class: 'test-view ' + this.candies ? 'enough' : 'not-enough' }, [
				P('span', 'Candies: ' + this.candies),

				P('button', 'Add 1', { '@click': () => this.addCandy(1) }),
				P('button', 'Add 2', { '@click': () => this.addCandy(2) })
			])
		);
	}
}));

document.body.append(P('TestView').dom);

Using refs and lifecycles

P.View('TestView', () => ({
	loaded() {
		console.log(this.refs.username.value); // Alice
	},

	render() {
		return P('div', [
			P('input', { ref: 'username', type: 'text', value: 'Alice' })
		])
	}
}));

document.body.append(P('TestView').dom);