Merge 13f4b57 into d7355ec

README.md

@@ -0,0 +1 @@
+packages/vertu/README.md

jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};

lerna.json

@@ -0,0 +1,7 @@
+{
+  "packages": [
+    "packages/*"
+  ],
+  "version": "0.4.2-alpha.0",
+  "npmClient": "yarn"
+}

package.json

@@ -1,58 +1,26 @@
 {
-  "name": "vertu",
-  "version": "0.4.0",
-  "description": "super minimal vanilla js state container",
+  "name": "@vertu/vertu",
+  "version": "0.0.0",
+  "private": true,
+  "description": "minimal vanilla js state container",
   "repository": "osdevisnot/vertu",
   "license": "MIT",
   "author": "osdevisnot <osdevisnot@gmail.com>",
-  "files": [
-    "dist",
-    "docs"
-  ],
-  "main": "dist/vertu.cjs.js",
-  "unpkg": "dist/vertu.esm.js",
-  "module": "dist/vertu.esm.js",
-  "source": "src/vertu.tsx",
-  "browser": "dist/vertu.js",
-  "types": "dist/types/index.d.ts",
   "scripts": {
-    "build": "tslib build",
-    "coverage": "tslib coverage",
-    "coveralls": "tslib coveralls",
-    "format": "tslib format",
-    "lint": "tslib lint",
-    "prepare": "tslib build",
-    "pub": "tslib pub",
-    "setup": "tslib setup",
-    "start": "tslib start",
-    "test": "tslib test",
-    "watch": "tslib watch"
+    "build": "lerna run build",
+    "coverage": "jest --coverage",
+    "coveralls": "coveralls < coverage/lcov.info",
+    "postinstall": "lerna bootstrap",
+    "prepublishOnly": "lerna run build"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx,css,json,md}": [
-      "tslib format",
-      "git add"
-    ],
-    "package.json": [
-      "sort-package-json",
-      "git add"
-    ]
-  },
-  "prettier": "tslib-cli",
+  "prettier": "@osdevisnot/prettier",
   "devDependencies": {
+    "@osdevisnot/prettier": "3.0.1",
     "@types/jest": "24.0.23",
-    "husky": "3.1.0",
-    "lint-staged": "9.5.0",
-    "sort-package-json": "1.31.0",
-    "tslib-cli": "6.0.9"
-  },
-  "klap": {
-    "sourcemap": false,
-    "example": "public/index.tsx"
+    "coveralls": "3.0.9",
+    "jest": "24.9.0",
+    "lerna": "3.19.0",
+    "ts-jest": "24.2.0",
+    "typescript": "3.7.3"
   }
 }

packages/devtools/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "devtools",
+  "version": "0.4.2-alpha.0",
+  "private": true,
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/devtools.cjs.js",
+  "module": "dist/devtools.js",
+  "source": "src/devtools.tsx",
+  "browser": "dist/devtools.umd.js",
+  "scripts": {
+    "build": "klap build",
+    "postbuild": "cp dist/*.js ../vertu/dist/.",
+    "start": "klap start",
+    "watch": "klap watch"
+  },
+  "dependencies": {
+    "vertu": "latest"
+  },
+  "devDependencies": {
+    "klap": "3.5.2"
+  },
+  "klap": {
+    "minify": false,
+    "sourcemap": false
+  }
+}

packages/devtools/src/devtools.tsx

@@ -0,0 +1,31 @@
+import { store, update } from 'vertu'
+
+const extension =
+  (window as any).__REDUX_DEVTOOLS_EXTENSION__ ||
+  (window as any).top.__REDUX_DEVTOOLS_EXTENSION__
+
+let ignore = false
+
+if (!extension) {
+  console.warn('Please install / enable Redux Devtools Extension')
+  ;(store as any).devtools = null
+}
+if (!(store as any).devtools) {
+  ;(store as any).devtools = extension.connect()
+  ;(store as any).devtools.subscribe(message => {
+    if (message.type === 'DISPATCH' && message.state) {
+      ignore =
+        message.payload.type === 'JUMP_TO_ACTION' ||
+        message.payload.type === 'JUMP_TO_STATE'
+      update(JSON.parse(message.state), message.payload.type)
+    }
+  })
+  ;(store as any).devtools.init(store.state)
+  store.on((state, action) => {
+    if (!ignore) {
+      ;(store as any).devtools.send(action, store.state)
+    } else {
+      ignore = false
+    }
+  })
+}

packages/example/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "example",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/example.cjs.js",
+  "module": "dist/example.esm.js",
+  "source": "src/example.js",
+  "browser": "dist/example.js",
+  "scripts": {
+    "start": "klap start",
+    "watch": "klap watch"
+  },
+  "dependencies": {
+    "devtools": "latest",
+    "vertu": "latest"
+  },
+  "devDependencies": {
+    "klap": "3.5.2"
+  }
+}

packages/example/public/index.html

@@ -0,0 +1,13 @@
+<!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>example example</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script src="dist/example.esm.js" type="module"></script>
+	</body>
+</html>

public/index.tsx → packages/example/public/index.js

@@ -1,33 +1,37 @@
-import { store, dispatch, update } from '../src/vertu'
-
-store.on((state, action) => console.log('state : ', state, action))
+import { store, dispatch } from 'vertu'
+import 'vertu/dist/devtools' // optionally enable redux devtools
 
 store.init(
-  { count: 10 },
+  { count: 10 }, // default state
   {
+    // actions can just return updated state
     down(state) {
       return { count: state.count - 1 }
     },
+    // use arrow functions to define action
     up: state => ({ count: state.count + 1 }),
+    // action receives current state as first argument and other parameters next
     upBy: (state, by) => ({ count: state.count + by }),
   }
 )
 
-dispatch('down')
+// optionally subscribe to store updates
+store.on(state => console.log('state : ', state))
 
-dispatch('upBy', 10)
+// dispatch an action
+dispatch('down')
 
-update('MANUAL', { count: 100 })
+// dispatch an action with arguments
+dispatch('upBy', 5)
 
+// define and dispatch actions outside the store...
 const upByFive = state => ({ count: state.count - 5 })
-
 dispatch(upByFive)
 
+// Asunc Actions
 const fetchTodos = state =>
   fetch('https://jsonplaceholder.typicode.com/todos')
     .then(response => response.json())
     .then(todos => ({ todos })) // api response goes in state.todos
 
 dispatch(fetchTodos) // state will have `state.todos` after promise is resolved
-
-setInterval(() => dispatch('down'), 3000)

packages/example/src/example.js

@@ -0,0 +1 @@
+export const sum = (a, b) => a + b;