0

mikekidder · Aug 10, 2015 · 1519fe3 · 1519fe3
commit 1519fe3
Show file tree

Hide file tree

Showing 29 changed files with 701 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,7 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,15 @@
+# Editor-specific
+.idea
+*.sublime-project
+*.sublime-workspace
+.settings
+
+# Installed libs
+node_modules
+
+# Generated
+**/dist
+
+# Misc
+ignore
+npm-debug.log
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Andre Medeiros
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
diff --git a/README.md b/README.md
@@ -0,0 +1,9 @@
+# Cycle.js Examples
+
+Browse and learn from examples of small Cycle.js apps using Core, DOM Driver, HTML Driver, HTTP Driver, JSONP Driver, and others.
+
+## Usage
+
+1.  Open the directory of an example in your terminal.
+2.  Type `npm start`
+3.  Open the `index.html` of that example in your browser, with the full path, e.g. `file:///Users/myself/cycle-examples/jsx-seconds-elapsed/index.html`
diff --git a/bmi-naive/index.html b/bmi-naive/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <meta name="description" content="Cycle.js example - Body mass index calculator (naive)"/>
+  <title>Cycle.js example - Body mass index calculator (naive)</title>
+</head>
+<body>
+    <div id="main-container"></div>
+    <script src="./dist/main.js"></script>
+</body>
+</html>
diff --git a/bmi-naive/package.json b/bmi-naive/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "example",
+  "version": "0.0.0",
+  "private": true,
+  "author": "Andre Staltz",
+  "license": "MIT",
+  "dependencies": {
+    "@cycle/core": "2.0.x",
+    "@cycle/dom": "4.0.x",
+    "@cycle/http": "2.0.x"
+  },
+  "devDependencies": {
+    "browserify": "11.0.1",
+    "babel": "5.6.x",
+    "babelify": "6.1.x"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prebrowserify": "mkdir -p dist",
+    "browserify": "browserify src/main.js -t babelify --outfile dist/main.js",
+    "start": "npm install && npm run browserify && echo 'OPEN index.html IN YOUR BROWSER'"
+  }
+}
diff --git a/bmi-naive/src/main.js b/bmi-naive/src/main.js
@@ -0,0 +1,38 @@
+import Cycle from '@cycle/core';
+import {h, makeDOMDriver} from '@cycle/dom';
+
+function main({DOM}) {
+  let changeWeight$ = DOM.get('#weight', 'input')
+    .map(ev => ev.target.value);
+  let changeHeight$ = DOM.get('#height', 'input')
+    .map(ev => ev.target.value);
+  let state$ = Cycle.Rx.Observable.combineLatest(
+    changeWeight$.startWith(70),
+    changeHeight$.startWith(170),
+    (weight, height) => {
+      let heightMeters = height * 0.01;
+      let bmi = Math.round(weight / (heightMeters * heightMeters));
+      return {weight, height, bmi};
+    }
+  );
+
+  return {
+    DOM: state$.map(({weight, height, bmi}) =>
+      h('div', [
+        h('div', [
+          'Weight ' + weight + 'kg',
+          h('input#weight', {type: 'range', min: 40, max: 140, value: weight})
+        ]),
+        h('div', [
+          'Height ' + height + 'cm',
+          h('input#height', {type: 'range', min: 140, max: 210, value: height})
+        ]),
+        h('h2', 'BMI is ' + bmi)
+      ])
+    )
+  };
+}
+
+Cycle.run(main, {
+  DOM: makeDOMDriver('#main-container')
+});
diff --git a/checkbox/index.html b/checkbox/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <meta name="description" content="Cycle.js example - Checkbox"/>
+  <title>Cycle.js example - Checkbox</title>
+</head>
+<body>
+    <div id="main-container"></div>
+    <script src="./dist/main.js"></script>
+</body>
+</html>
diff --git a/checkbox/package.json b/checkbox/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "example",
+  "version": "0.0.0",
+  "private": true,
+  "author": "Andre Staltz",
+  "license": "MIT",
+  "dependencies": {
+    "@cycle/core": "2.0.x",
+    "@cycle/dom": "4.0.x"
+  },
+  "devDependencies": {
+    "browserify": "11.0.1",
+    "babel": "5.6.x",
+    "babelify": "6.1.x"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prebrowserify": "mkdir -p dist",
+    "browserify": "browserify src/main.js -t babelify --outfile dist/main.js",
+    "start": "npm install && npm run browserify && echo 'OPEN index.html IN YOUR BROWSER'"
+  }
+}
diff --git a/checkbox/src/main.js b/checkbox/src/main.js
@@ -0,0 +1,21 @@
+import Cycle from '@cycle/core';
+import {h, makeDOMDriver} from '@cycle/dom';
+
+function main(responses) {
+  let requests = {
+    DOM: responses.DOM.get('input', 'change')
+      .map(ev => ev.target.checked)
+      .startWith(false)
+      .map(toggled =>
+        h('div', [
+          h('input', {type: 'checkbox'}), 'Toggle me',
+          h('p', toggled ? 'ON' : 'off')
+        ])
+      )
+  };
+  return requests;
+}
+
+Cycle.run(main, {
+  DOM: makeDOMDriver('#main-container')
+});
diff --git a/counter/index.html b/counter/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <meta name="description" content="Cycle.js example - Counter"/>
+  <title>Cycle.js example - Counter</title>
+</head>
+<body>
+    <div id="main-container"></div>
+    <script src="./dist/main.js"></script>
+</body>
+</html>
diff --git a/counter/package.json b/counter/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "example",
+  "version": "0.0.0",
+  "private": true,
+  "author": "Andre Staltz",
+  "license": "MIT",
+  "dependencies": {
+    "@cycle/core": "2.0.x",
+    "@cycle/dom": "4.0.x"
+  },
+  "devDependencies": {
+    "browserify": "11.0.1",
+    "babel": "5.6.x",
+    "babelify": "6.1.x"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prebrowserify": "mkdir -p dist",
+    "browserify": "browserify src/main.js -t babelify --outfile dist/main.js",
+    "start": "npm install && npm run browserify && echo 'OPEN index.html IN YOUR BROWSER'"
+  }
+}
diff --git a/counter/src/main.js b/counter/src/main.js
@@ -0,0 +1,23 @@
+import Cycle from '@cycle/core';
+import {h, makeDOMDriver} from '@cycle/dom';
+
+function main({DOM}) {
+  let action$ = Cycle.Rx.Observable.merge(
+    DOM.get('.decrement', 'click').map(ev => -1),
+    DOM.get('.increment', 'click').map(ev => +1)
+  );
+  let count$ = action$.startWith(0).scan((x,y) => x+y);
+  return {
+    DOM: count$.map(count =>
+        h('div', [
+          h('button.decrement', 'Decrement'),
+          h('button.increment', 'Increment'),
+          h('p', 'Counter: ' + count)
+        ])
+      )
+  };
+}
+
+Cycle.run(main, {
+  DOM: makeDOMDriver('#main-container')
+});
diff --git a/hello-world/index.html b/hello-world/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <meta name="description" content="Cycle.js example - Hello World"/>
+  <title>Cycle.js example - Hello World</title>
+</head>
+<body>
+    <div id="main-container"></div>
+    <script src="./dist/main.js"></script>
+</body>
+</html>
diff --git a/hello-world/package.json b/hello-world/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "example",
+  "version": "0.0.0",
+  "private": true,
+  "author": "Andre Staltz",
+  "license": "MIT",
+  "dependencies": {
+    "@cycle/core": "2.0.x",
+    "@cycle/dom": "4.0.x"
+  },
+  "devDependencies": {
+    "browserify": "11.0.1",
+    "babel": "5.6.x",
+    "babelify": "6.1.x"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prebrowserify": "mkdir -p dist",
+    "browserify": "browserify src/main.js -t babelify --outfile dist/main.js",
+    "start": "npm install && npm run browserify && echo 'OPEN index.html IN YOUR BROWSER'"
+  }
+}
diff --git a/hello-world/src/main.js b/hello-world/src/main.js
@@ -0,0 +1,22 @@
+import Cycle from '@cycle/core';
+import {h, makeDOMDriver} from '@cycle/dom';
+
+function main(responses) {
+  return {
+    DOM: responses.DOM.get('.myinput', 'input')
+      .map(ev => ev.target.value)
+      .startWith('')
+      .map(name =>
+        h('div', [
+          h('label', 'Name:'),
+          h('input.myinput', {attributes: {type: 'text'}}),
+          h('hr'),
+          h('h1', `Hello ${name}`)
+        ])
+      )
+  };
+}
+
+Cycle.run(main, {
+  DOM: makeDOMDriver('#main-container')
+});
diff --git a/http-random-user/index.html b/http-random-user/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <meta name="description" content="Cycle.js example - HTTP Show random user from backend"/>
+  <title>Cycle.js example - HTTP Show random user from backend</title>
+</head>
+<body>
+    <div id="main-container"></div>
+    <script src="./dist/main.js"></script>
+</body>
+</html>
diff --git a/http-random-user/package.json b/http-random-user/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "example",
+  "version": "0.0.0",
+  "private": true,
+  "author": "Andre Staltz",
+  "license": "MIT",
+  "dependencies": {
+    "@cycle/core": "2.0.x",
+    "@cycle/dom": "4.0.x",
+    "@cycle/http": "2.0.x"
+  },
+  "devDependencies": {
+    "browserify": "11.0.1",
+    "babel": "5.6.x",
+    "babelify": "6.1.x"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prebrowserify": "mkdir -p dist",
+    "browserify": "browserify src/main.js -t babelify --outfile dist/main.js",
+    "start": "npm install && npm run browserify && echo 'OPEN index.html IN YOUR BROWSER'"
+  }
+}
diff --git a/http-random-user/src/main.js b/http-random-user/src/main.js
@@ -0,0 +1,42 @@
+import Cycle from '@cycle/core';
+import {h, makeDOMDriver} from '@cycle/dom';
+import {makeHTTPDriver} from '@cycle/http';
+
+function main(responses) {
+  const USERS_URL = 'http://jsonplaceholder.typicode.com/users/';
+  let getRandomUser$ = responses.DOM.get('.get-random', 'click')
+    .map(() => {
+      let randomNum = Math.round(Math.random() * 9) + 1;
+      return {
+        url: USERS_URL + String(randomNum),
+        method: 'GET'
+      };
+    });
+
+  let user$ = responses.HTTP
+    .filter(res$ => res$.request.url.indexOf(USERS_URL) === 0)
+    .mergeAll()
+    .map(res => res.body)
+    .startWith(null);
+
+  let vtree$ = user$.map(user =>
+    h('div.users', [
+      h('button.get-random', 'Get random user'),
+      user === null ? null : h('div.user-details', [
+        h('h1.user-name', user.name),
+        h('h4.user-email', user.email),
+        h('a.user-website', {href: user.website}, user.website)
+      ])
+    ])
+  );
+
+  return {
+    DOM: vtree$,
+    HTTP: getRandomUser$
+  };
+}
+
+Cycle.run(main, {
+  DOM: makeDOMDriver('#main-container'),
+  HTTP: makeHTTPDriver()
+});