@snaptopixel/quip

quip

Better render functions for Vue. No more string templates, JSX, createElement, or .vue files to worry about.

• How it works
• Setup
  • Installing Quip
  • Registering Quip
• Basic usage
  • Creating vnodes
  • Referencing vnodes
  • Nesting vnodes
• Using plugins
  • css
  • style
  • on
  • prop
  • text
  • map
  • switch
    • case
    • default
  • if
    • else
  • attr
  • data
  • bind

How it works

Vue supports render functions out of the box, they just don't end up looking very pretty and can be hard to deal with. The concept is simple… You do some work based on the current state, return a tree of VNodes and Vue makes updates where necessary.

With Quip, we're wrapping the typical VNode creation process: createElement(tagName, data, children) with chainable function calls and a few TypeScript conventions to make the syntax more approachable, attractive, type-safe and less error-prone.

Setup

Installing Quip

yarn add @snaptopixel/quip

Registering Quip

import { QuipPlugin } from 'vue-quip';
import { Vue, Component } from 'vue-property-decorator';

Vue.use(QuipPlugin)

Basic usage

Quip is meant to be used inside of component render functions, where you generate and return a tree of VNodes.

Creating vnodes

VNodes are created by invoking a named opening function, followed by invoking an anonymous closing function:

const { ul } = this.$quip
return ul()()
// <ul></ul>

Referencing vnodes

You can optionally pass a ref value in the opening function in order to reference vnodes elsewhere in your component:

render() {
  const { div } = this.$quip
  return div('mydiv')()
}
mounted() {
  const ref = this.$refs.mydiv
}

Nesting vnodes

Use method chaining to build complex structures easily and efficiently. Any calls you make between opening and closing functions are applied to the current node.

Note the use of parentheses after return() to allow multiple lines

const { ul } = this.$quip
return(
  ul()
    .li()
      .span()()
    ()
  ()
)
// <ul>
//   <li>
//     <span></span>
//   </li>
// </ul>

Using plugins

Creating vnodes is fun, but not very useful in and of itself. In order to configure our newly created vnodes we use plugins. Quip comes with a set of useful plugins, as well as allowing for the creation of custom plugins.

css

// set classes directly
.div()
  .css('foo', 'bar')
()

// or provide an object
.div()
  .css({
    foo: true,
    bar: false
  })
()

style

// set properties individually
div()
  .style('fontSize', '10px')
  .style('fontWeight', 'bold')
()

// or provide an object
div()
  .style({
    display: 'block',
    textAlign: 'center'
  })
()

on

button()
  .on('click', this.onClick)
()

button()
  .on({
    mouseover: this.onMouseOver,
    mouseout: this.onMouseOut
  })
()

prop

// TODO

text

// TODO

map

// TODO

switch

// TODO

case

// TODO

default

// TODO

if

// TODO

else

// TODO

attr

// TODO

data

// TODO

bind

// TODO