From ce76b735f4ef89d508b2768f6916dd7668845fcf Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Sat, 26 Dec 2015 08:49:18 +0800
Subject: [PATCH] Update

---
 deku.md        |  86 +++++++++++++++++++++++++++++++++++++++
 meow.md        |  30 ++++++++++++++
 mongodb.md     |  10 +++++
 virtual-dom.md |  29 ++++++++++++++
 vue.md         | 107 +++++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 262 insertions(+)
 create mode 100644 deku.md
 create mode 100644 meow.md
 create mode 100644 mongodb.md
 create mode 100644 virtual-dom.md
 create mode 100644 vue.md

diff --git a/deku.md b/deku.md
new file mode 100644
index 000000000..a326c11b0
--- /dev/null
+++ b/deku.md
@@ -0,0 +1,86 @@
+---
+title: Deku
+category: JavaScript libraries
+---
+
+```js
+/** @jsx element */
+import element from 'virtual-element'  // replacement for React.createElement
+import {render, tree} from 'deku'
+
+var app = <div class='my-app'>Hello World!</div>
+
+render(tree(app), document.body)
+```
+ 
+## Components
+
+```js
+Button = {
+  render () { return <button>Submit</button> }
+}
+
+App = {
+  render () { return <div><Button /></div> }
+}
+
+render(tree(<App />), document.body)
+// or with virtual-element
+render(tree(element(App)), document.body)
+```
+
+## Component props/state
+
+```js
+App = {
+  render ({ props, state }) {
+    return <div>{ /*...use state.store here*/ }</div>
+  }
+
+  initialState (props) {
+    return { store: store.getState() }
+  },
+
+  afterMount (comp, el, setState) {
+    store.subscribe(() => setState({ store: store.getState() }))
+  }
+}
+
+render(tree(<App />), document.body)
+```
+
+## Events
+
+```js
+<a onClick={onClick}>{props.text}</a>
+```
+
+## Magic virtual element
+Use [magic-virtual-element](https://github.com/dekujs/magic-virtual-element) to enable nice classnames.
+
+```
+import element from 'magic-virtual-element'
+<div style={style} class={[ 'button', '-active' ]}>
+```
+
+## Reference
+
+```
+name = 'MyComponent'
+
+// Defaults
+initialState (props) {...} // return initial state
+defaultProps = { style: 'rout' }
+
+// Render
+render ({props, state}, setState) {...}
+
+// Lifecycle
+beforeUpdate  ({props, state, id}, nextProps, nextState) {}
+afterRender   ({props, state, id}, el) {}
+afterUpdate   ({props, state, id}, prevProps, prevState, setState) {}
+afterMount    ({props, state, id}, el, setState) {}
+beforeUnmount ({props, state, id}, el) {}
+```
+
+See: <https://www.npmjs.com/package/deku>
diff --git a/meow.md b/meow.md
new file mode 100644
index 000000000..29bc4d8fa
--- /dev/null
+++ b/meow.md
@@ -0,0 +1,30 @@
+---
+title: Meow
+category: JavaScript libraries
+---
+
+```js
+const cli = require('meow')(`
+  Usage: appname [options]
+
+  Options:
+    -h, --help       show usage information
+    -v, --version    print version info and exit
+`, {
+alias: {
+  alias: { h: 'help', v: 'version', x: 'excludeTag' },
+  string: ['lang'],
+  boolean: ['pager'],
+  default: { lang: 'en' },
+  '--': true,
+  stopEarly: true, /* populate _ with first non-option */
+  unknown: function () { ... } /* invoked on unknown param */
+})
+
+cli.flags   // { excludeTag: true }
+cli.input   // []
+
+// yes, flags are camelCased
+```
+
+Also see [minimist](minimist.html).
diff --git a/mongodb.md b/mongodb.md
new file mode 100644
index 000000000..dfd5c75bf
--- /dev/null
+++ b/mongodb.md
@@ -0,0 +1,10 @@
+---
+title: MongoDB
+category: Development
+---
+
+## Querying
+
+```
+{ name: 'john' }
+{ name: { $eq: 'john' } }
diff --git a/virtual-dom.md b/virtual-dom.md
new file mode 100644
index 000000000..ccffc51dc
--- /dev/null
+++ b/virtual-dom.md
@@ -0,0 +1,29 @@
+---
+title: Virtual-dom
+category: JavaScript libraries
+---
+
+See <https://www.npmjs.com/package/virtual-dom>
+
+```js
+var h = require('virtual-dom/h')
+var diff = require('virtual-dom/diff')
+var patch = require('virtual-dom/patch')
+var createElement = require('virtual-dom/create-element')
+```
+
+### Rendering
+
+```js
+tree = h('div', { style: { color: 'blue' } }, [ 'hello' ])
+el = createElement(tree)
+document.body.appendChild(root)
+```
+
+### Updating
+
+```js
+tree2 = h('div', { style: { color: 'blue' } }, [ 'hello world' ])
+delta = diff(tree, tree2)
+el = patch(el, delta) // patch() modifies el
+```
diff --git a/vue.md b/vue.md
new file mode 100644
index 000000000..b1f319300
--- /dev/null
+++ b/vue.md
@@ -0,0 +1,107 @@
+---
+title: Vue
+category: JavaScript libraries
+---
+
+### Lists
+
+```html
+<li v-for="todo in todos">
+  {{ todo.text }}
+  {{ $index }}
+</li>
+```
+
+### Events
+
+```html
+<button v-on:click='submit'>Go</button>
+```
+
+### Components
+
+```js
+new Vue({
+  components: { app: App }
+})
+```
+
+## API
+
+```js
+Vue.extend({ ... })        // creating components
+Vue.nextTick(() => {...})
+
+Vue.set(object, key, val)  // reactive
+Vue.delete(object, key)
+
+Vue.directive('my-dir', { bind, update, unbind })
+// <div v-my-dir='...'></div>
+
+Vue.elementDirective('my-dir', { bind, update, unbind })
+// <my-dir>...</my-dir>
+
+Vue.component('my-component', Vue.extend({ .. }))
+
+Vue.partial('my-partial', '<div>hi {{msg}}</div>')
+// <partial name='my-partial'></partial>
+```
+
+```js
+new Vue({
+  data: { ... }
+  props: ['size'],
+  props: { size: Number },
+  computed: { fullname() { return this.name + ' ' + this.lastName } },
+  methods: { go() { ... } },
+  watch: { a (val, oldVal) { ... } },
+  el: '#foo',
+  template: '...',
+  replace: true, // replace element (default true)
+
+  // lifecycle
+  created () {},
+  beforeCompile () {},
+  compiled () {},
+  ready () {}, // $el is inserted for the first time
+  attached () {},
+  detached () {},
+  beforeDestroy () {},
+  destroyed () {},
+
+  // options
+  directives: {},
+  elementDirectives: {},
+  filters: {},
+  components: {},
+  transitions: {},
+  partials: {}
+})
+```
+
+## Vue templates
+Via [vueify](https://www.npmjs.com/package/vueify)
+
+```js
+// app.vue
+<template>
+  <h1 class="red">{{msg}}</h1>
+</template>
+ 
+<script>
+  module.exports = {
+    data () {
+      return {
+        msg: 'Hello world!'
+      }
+    }
+  }
+</script> 
+```
+
+Also
+
+```html
+<template lang='jade'>
+h1(class='red') {{msg}}
+</template>