feat(demo): added vuejs version

reflog · reflog · commit 4d6a04eed17c · 2018-08-02T16:06:06.000+03:00
diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
diff --git a/package.json b/package.json
@@ -34,12 +34,15 @@
     "tslib": "1.9.3",
     "color-hash": "1.0.3",
     "vue": "2.5.16",
-    "vue-hot-reload-api": "2.3.0"
+    "vue-hot-reload-api": "2.3.0",
+    "vue-styled-components": "^1.3.0"
   },
   "devDependencies": {
     "@types/jest": "23.1.4",
     "@types/react": "16.4.6",
     "@types/react-dom": "16.0.6",
+    "@vue/component-compiler-utils": "2.1.0",
+    "babel-plugin-transform-vue-jsx": "^3.7.0",
     "commitizen": "^2.10.1",
     "concurrently": "^3.6.0",
     "cz-customizable": "^5.2.0",
@@ -58,8 +61,10 @@
     "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",
     "jest": "23.3.0",
+    "jsdom": "11.12.0",
     "lint-staged": "^7.2.0",
-    "prettier": "1.13.7",
+    "parcel-bundler": "1.9.7",
+    "prettier": "^1.13.7",
     "react": "16.4.1",
     "react-test-renderer": "16.4.1",
     "repo-cooker": "^6.2.5",
@@ -69,15 +74,12 @@
     "tslib": "1.9.3",
     "typescript": "2.9.2",
     "typescript-eslint-parser": "^16.0.1",
-    "webpack": "4.15.1",
-    "webpack-cli": "3.0.8",
-    "webpack-dev-server": "^3.1.4",
     "url-loader": "1.0.1",
-    "@vue/component-compiler-utils": "2.1.0",
-    "parcel-bundler": "1.9.7",
-    "jsdom": "11.12.0",
     "vue": "2.5.16",
-    "vue-template-compiler": "2.5.16"
+    "vue-template-compiler": "2.5.16",
+    "webpack": "4.15.1",
+    "webpack-cli": "3.0.8",
+    "webpack-dev-server": "^3.1.4"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": [
diff --git a/packages/demos/vue-todomvc/.babelrc b/packages/demos/vue-todomvc/.babelrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ["transform-vue-jsx"]
+}
diff --git a/packages/demos/vue-todomvc/package.json b/packages/demos/vue-todomvc/package.json
@@ -0,0 +1,29 @@
+{
+	"name": "vue-todomvc",
+	"private": true,
+	"version": "1.0.0",
+	"description": "Overmind todomvc demo",
+	"author": "Christian Alfoni <christianalfoni@gmail.com>",
+	"license": "MIT",
+	"repository": "git+https://github.com/cerebral/overmind.git",
+	"scripts": {
+		"start": "parcel src/index.html --port 4000",
+		"build": "parcel build src/index.html ",
+		"test": "echo \"Error: no test specified\"",
+		"prepare": "npm run build"
+	},
+	"keywords": [
+		"overmind",
+		"demo"
+	],
+	"dependencies": {
+		"vue-overmind": "next",
+		"color": "^3.0.0",
+		"vue": "^2.5.16",
+		"vue-styled-components": "^1.3.0"
+	},
+	"devDependencies": {
+		"babel-plugin-transform-vue-jsx": "^3.7.0",
+		"parcel-bundler": "^1.9.7"
+	}
+}
diff --git a/packages/demos/vue-todomvc/src/app/actions.js b/packages/demos/vue-todomvc/src/app/actions.js
@@ -0,0 +1,13 @@
+import * as helpers from './helpers'
+import * as mutations from './mutations'
+
+export default (action) => ({
+  changeNewTodoTitle: action()
+    .map(helpers.getEventValue)
+    .mutation(mutations.setNewTodoTitle),
+  addTodo: action()
+    .do(helpers.preventEventDefault)
+    .mutation(mutations.addTodo)
+    .mutation(mutations.clearNewTodoTitle),
+  toggleCompleted: action().mutation(mutations.toggleCompleted),
+})
diff --git a/packages/demos/vue-todomvc/src/app/effects.js b/packages/demos/vue-todomvc/src/app/effects.js
@@ -0,0 +1,10 @@
+export const say = {
+  hello: (name) => ({ hello: `Hello ${name}` }),
+}
+
+export const api = {
+  getPosts: () =>
+    fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
+      response.json()
+    ),
+}
diff --git a/packages/demos/vue-todomvc/src/app/helpers.js b/packages/demos/vue-todomvc/src/app/helpers.js
@@ -0,0 +1,7 @@
+export function getEventValue(_, event) {
+  return Promise.resolve(event.currentTarget.value)
+}
+
+export function preventEventDefault(_, event) {
+  event.preventDefault()
+}
diff --git a/packages/demos/vue-todomvc/src/app/index.js b/packages/demos/vue-todomvc/src/app/index.js
@@ -0,0 +1,19 @@
+import App from 'vue-overmind'
+import * as effects from './effects'
+import actions from './actions'
+import state from './state'
+
+const app = new App(
+  {
+    state,
+    actions,
+    effects,
+  },
+  {
+    devtools: 'localhost:1234',
+  }
+)
+
+export const connect = app.connect
+
+export default app
diff --git a/packages/demos/vue-todomvc/src/app/mutations.js b/packages/demos/vue-todomvc/src/app/mutations.js
@@ -0,0 +1,21 @@
+let nextTodoId = 0
+
+export function setNewTodoTitle(state, value) {
+  state.newTodoTitle = value
+}
+
+export function addTodo(state) {
+  state.todos.unshift({
+    id: String(nextTodoId++),
+    title: state.newTodoTitle,
+    completed: false,
+  })
+}
+
+export function clearNewTodoTitle(state) {
+  state.newTodoTitle = ''
+}
+
+export function toggleCompleted(_, todo) {
+  todo.completed = !todo.completed
+}
diff --git a/packages/demos/vue-todomvc/src/app/state.js b/packages/demos/vue-todomvc/src/app/state.js
@@ -0,0 +1,10 @@
+import { derive, compute } from 'overmind'
+
+const state = {
+  todos: [],
+  count: derive((state) => state.todos.length),
+  newTodoTitle: '',
+  testCount: compute((foo) => (state) => state.count + foo),
+}
+
+export default state
diff --git a/packages/demos/vue-todomvc/src/components/AddTodo/elements.js b/packages/demos/vue-todomvc/src/components/AddTodo/elements.js
@@ -0,0 +1,48 @@
+import styled from '../../styled-components'
+import theme from '../../theme'
+
+export const Wrapper = styled.div`
+  width: 100%;
+  background-color: ${theme.color.lighten(theme.color.dark, 0.2)};
+  padding: ${theme.padding.small};
+  border-radius: ${theme.borderRadius.large};
+`
+
+export const Form = styled.form`
+  display: flex;
+`
+
+export const Input = styled.input`
+  flex: 1;
+  display: block;
+  border: 0;
+  margin: 0;
+  outline: none;
+  background-color: transparent;
+  font-size: ${theme.fontSize.larger};
+  color: ${theme.color.white};
+  height: 40px;
+  ::placeholder {
+    color: ${theme.color.fade(theme.color.white, 0.5)};
+  }
+`
+
+export const Button = styled.button`
+  flex: 0 0 50px;
+  outline: none;
+  border-radius: ${theme.borderRadius.normal};
+  background-color: ${theme.color.primary};
+  padding: ${theme.padding.smaller};
+  text-transform: uppercase;
+  border: 0;
+  color: ${theme.color.white};
+  font-weight: bold;
+  cursor: pointer;
+  :hover:enabled {
+    background-color: ${theme.color.lighten(theme.color.primary, 0.1)};
+  }
+  :disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+`
diff --git a/packages/demos/vue-todomvc/src/components/AddTodo/index.js b/packages/demos/vue-todomvc/src/components/AddTodo/index.js
@@ -0,0 +1,21 @@
+import { connect } from '../../app'
+import { Wrapper, Input, Button, Form } from './elements'
+
+export default connect({
+  name: 'AddTodo',
+  render() {
+    return (
+      <Wrapper>
+        {this.app.state.testCount(5)}
+        <Form nativeOnSubmit={this.app.actions.addTodo}>
+          <Input
+            placeholder="I need to..."
+            value={this.app.state.newTodoTitle}
+            nativeOnInput={this.app.actions.changeNewTodoTitle}
+          />
+          <Button disabled={this.app.state.newTodoTitle === ''}>add</Button>
+        </Form>
+      </Wrapper>
+    )
+  },
+})
diff --git a/packages/demos/vue-todomvc/src/components/App/elements.js b/packages/demos/vue-todomvc/src/components/App/elements.js
@@ -0,0 +1,16 @@
+import styled from '../../styled-components'
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+`
+
+export const InnerWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 50%;
+`
diff --git a/packages/demos/vue-todomvc/src/components/App/index.js b/packages/demos/vue-todomvc/src/components/App/index.js
@@ -0,0 +1,17 @@
+import AddTodo from '../AddTodo'
+import Todos from '../Todos'
+import { Wrapper, InnerWrapper } from './elements'
+
+export default {
+  name: 'App',
+  render() {
+    return (
+      <Wrapper>
+        <InnerWrapper>
+          <AddTodo />
+          <Todos />
+        </InnerWrapper>
+      </Wrapper>
+    )
+  },
+}
diff --git a/packages/demos/vue-todomvc/src/components/Todo/elements.js b/packages/demos/vue-todomvc/src/components/Todo/elements.js
@@ -0,0 +1,22 @@
+import styled from '../../styled-components'
+import theme from '../../theme'
+
+export const Item = styled.li`
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  padding: ${theme.padding.normal};
+  font-size: ${theme.fontSize.larger};
+`
+
+export const Completed = styled('button')`
+  outline: none;
+  border: 0;
+  background: transparent;
+  margin-right: ${theme.padding.normal};
+  font-size: ${theme.fontSize.larger};
+  color: ${({ completed }) =>
+    completed
+      ? theme.color.secondary
+      : theme.color.fade(theme.color.secondary, 0.8)};
+`
diff --git a/packages/demos/vue-todomvc/src/components/Todo/index.js b/packages/demos/vue-todomvc/src/components/Todo/index.js
@@ -0,0 +1,17 @@
+import { connect } from '../../app'
+import { Item, Completed } from './elements'
+
+export default connect({
+  props: {
+    todo: { required: true },
+  },
+  name: 'Todo',
+  render() {
+    return (
+      <Item nativeOnClick={() => this.app.actions.toggleCompleted(this.todo)}>
+        <Completed completed={this.todo.completed}>✔</Completed>{' '}
+        {this.todo.title}
+      </Item>
+    )
+  },
+})
diff --git a/packages/demos/vue-todomvc/src/components/Todos/elements.js b/packages/demos/vue-todomvc/src/components/Todos/elements.js
@@ -0,0 +1,8 @@
+import styled from '../../styled-components'
+
+export const List = styled.ul`
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  align-self: stretch;
+`
diff --git a/packages/demos/vue-todomvc/src/components/Todos/index.js b/packages/demos/vue-todomvc/src/components/Todos/index.js
@@ -0,0 +1,19 @@
+import { connect } from '../../app'
+import { List } from './elements'
+import Todo from '../Todo'
+
+export default connect({
+  name: 'Todos',
+  render() {
+    return (
+      <List>
+        {this.app.state.todos.map(
+          (todo) =>
+            console.log('todo ID', todo.id) || (
+              <Todo key={todo.id} todo={todo} />
+            )
+        )}
+      </List>
+    )
+  },
+})
diff --git a/packages/demos/vue-todomvc/src/index.html b/packages/demos/vue-todomvc/src/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+  <style>
+    html,
+    body {
+      margin: 0;
+    }
+
+    body {
+      height: 100%;
+    }
+
+    #app {
+      height: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script defer src="./index.js"></script>
+</body>
+
+</html>
diff --git a/packages/demos/vue-todomvc/src/index.js b/packages/demos/vue-todomvc/src/index.js
diff --git a/packages/demos/vue-todomvc/src/styled-components.js b/packages/demos/vue-todomvc/src/styled-components.js
diff --git a/packages/demos/vue-todomvc/src/theme.js b/packages/demos/vue-todomvc/src/theme.js

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "plugins": ["transform-vue-jsx"]`
	`3`	`+}`