docs: add examples

rymizuki · Mar 25, 2016 · bbf1cdf · bbf1cdf
1 parent 637355e
commit bbf1cdf
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 0 deletions.
diff --git a/examples/todo/index.html b/examples/todo/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <meta charset="UTF-8">
+  <title>TODO</title>
+  <todo></todo>
+  <script src="https://cdn.jsdelivr.net/riot/2.3/riot+compiler.min.js"></script>
+  <script src="js/syntagme.js"></script>
+  <script src="js/todo.js" type="riot/tag"></script>
+  <script>
+    riot.mount('todo')
+  </script>
+</html>
+
diff --git a/examples/todo/js/syntagme.js b/examples/todo/js/syntagme.js
@@ -0,0 +1 @@
+../../../syntagme.js
diff --git a/examples/todo/js/todo.js b/examples/todo/js/todo.js
@@ -0,0 +1,84 @@
+var flux = syntagme()
+
+flux.reducer(function todoReducer (payload, previous) {
+  previous || (previous = {})
+  switch (payload.action.type) {
+    case 'ADD_TODO':
+      return Object.assign({}, previous, {
+        items: (previous.items || []).concat([payload.action.item]),
+        text: null,
+      })
+    case 'TOGGLE_TODO_STATE':
+      var items = previous.items || []
+      for (var i = 0; i < items.length; i++) {
+        if (items[i].title == payload.action.item.title)
+          items[i].done = !items[i].done
+      }
+      return Object.assign({}, previous, {
+        items: items
+      })
+  }
+})
+flux.reducer(function textReducer (payload, previous) {
+  previous || (previous = {})
+  if (payload.action.type == 'INPUT_TEXT')
+    return Object.assign({}, previous, { text: payload.action.text })
+})
+
+var ac = (function () {
+  function add (text) {
+    flux.ac('ADD_TODO',     function () { return {item: {title: text}} })
+  }
+  function edit (value) {
+    flux.ac('INPUT_TEXT',   function () { return {text: value} })
+  }
+  function toggle (item) {
+    flux.ac('TOGGLE_STATE', function () { return {item: item} })
+  }
+  return { add: add, edit: edit, toggle: toggle, }
+}())
+
+<todo>
+  <h3>{ opts.title }</h3>
+  <ul>
+    <li each={ items }>
+      <label class={ completed: done }>
+        <input type="checkbox" checked={ done } onclick={ parent.toggle }> { title }
+      </label>
+    </li>
+  </ul>
+
+  <form onsubmit={ add }>
+    <input name="input" onkeyup={ edit }>
+    <button disabled={ !text }>Add #{ items.length + 1 }</button>
+  </form>
+
+  <script>
+    this.items = opts.items || []
+
+    edit(e) {
+      ac.edit(e.target.value)
+    }
+
+    add(e) {
+      ac.add(this.text)
+    }
+
+    toggle(e) {
+      ac.toggle(e.item)
+      return true
+    }
+
+    onDispatch (state) {
+      this.update(state)
+    }
+
+    flux.subscribe(this.onDispatch)
+
+    this.on('update', function (data) {
+      if (!this.text) {
+        this.text = this.input.value = ''
+      }
+    })
+  </script>
+</todo>
diff --git a/gulpfile.js b/gulpfile.js
@@ -35,6 +35,12 @@ gulp.task('test-browsers', function () {
     }))
 })
 
+gulp.task('examples', function () {
+  var webserver = require('gulp-webserver')
+  gulp.src('examples', {read: false})
+    .pipe(webserver())
+})
+
 gulp.task('watch', ['test-browsers'], function () {
   gulp.watch('script/**/*', ['script'])
 })

diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "coffee-script": "^1.10.0",
     "gulp": "^3.9.1",
     "gulp-karma": "0.0.5",
+    "gulp-webserver": "^0.9.1",
     "istanbul": "^0.4.2",
     "istanbul-instrumenter-loader": "^0.2.0",
     "karma": "^0.13.22",