Merge pull request #27 from okwolf/update

all the hyperapp 2 updates

Author: okwolf

.github/workflows/ci.yml

@@ -0,0 +1,23 @@
+name: CI
+on: push
+jobs:
+  test:
+    env: 
+      NODE_ENV: development
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12.x, 14.x, 16.x]
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v1
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - name: Test
+      run: |
+        npm install -g codecov
+        npm install
+        npm test
+        codecov

.gitignore

@@ -1,5 +1,3 @@
-.vscode/
-yarn.lock
 coverage/
 node_modules/
 dist/

.npmrc

@@ -0,0 +1,2 @@
+package-lock = false
+save-prefix = =

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "trailingComma": "none",
+  "arrowParens": "avoid"
+}

.travis.yml

@@ -0,0 +1,24 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Jest Tests",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
+      "args": [
+        "--runInBand",
+        "--watch"
+      ],
+      "runtimeArgs": [
+        "--nolazy",
+        "--experimental-vm-modules"
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
+    }
+  ]
+}

.vscode/launch.json

@@ -1,43 +1,37 @@
-# <img height=24 src=https://cdn.rawgit.com/jorgebucaran/f53d2c00bafcf36e84ffd862f0dc2950/raw/882f20c970ff7d61aa04d44b92fc3530fa758bc0/Hyperapp.svg> Hyperapp Logger
+# Hyperapp Logger
 
-[![Travis CI](https://img.shields.io/travis/hyperapp/logger/master.svg)](https://travis-ci.org/hyperapp/logger)
-[![Codecov](https://img.shields.io/codecov/c/github/hyperapp/logger/master.svg)](https://codecov.io/gh/hyperapp/logger)
-[![npm](https://img.shields.io/npm/v/@hyperapp/logger.svg)](https://www.npmjs.org/package/@hyperapp/logger)
-[![Slack](https://hyperappjs.herokuapp.com/badge.svg)](https://hyperappjs.herokuapp.com "Join us")
+[![Build Status](https://github.com/okwolf/hyperapp-logger/actions/workflows/ci.yml/badge.svg)](https://github.com/okwolf/hyperapp-logger/actions)
+[![Codecov](https://img.shields.io/codecov/c/github/okwolf/hyperapp-logger/master.svg)](https://codecov.io/gh/okwolf/hyperapp-logger)
+[![npm](https://img.shields.io/npm/v/hyperapp-logger.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/hyperapp-logger)
 
-A [Hyperapp](https://github.com/hyperapp/hyperapp) higher-order `app` that logs state updates and action information to the console.
+A [Hyperapp](https://github.com/hyperapp/hyperapp) [dispatch initializer](https://github.com/jorgebucaran/hyperapp/blob/main/docs/architecture/dispatch.md#dispatch-initializer) that logs state updates and action information to the console.
 
 ## Getting Started
 
 This example shows a counter that can be incremented or decremented. Go ahead and [try it online](https://codepen.io/okwolf/pen/xLQmvW?editors=0010) with your browser console open to see the log messages.
 
-```js
-import { h, app } from "hyperapp"
-import { withLogger } from "@hyperapp/logger"
-
-const state = {
-  count: 0
-}
-
-const actions = {
-  down: () => state => ({ count: state.count - 1 }),
-  up: () => state => ({ count: state.count + 1 })
-}
-
-const view = (state, actions) => (
-  <main>
-    <h1>{state.count}</h1>
-    <button onclick={actions.down} disabled={state.count <= 0}>
-      ー
-    </button>
-    <button onclick={actions.up}>＋</button>
-  </main>
-)
-
-withLogger(app)(state, actions, view, document.body)
+```jsx
+import { app } from "hyperapp";
+import logger from "hyperapp-logger";
+
+const Up = state => state + 1;
+const Down = state => state - 1;
+
+app({
+  init: 0,
+  view: state => (
+    <main>
+      <h1>{state.count}</h1>
+      <button onclick={Down}>ー</button>
+      <button onclick={Up}>＋</button>
+    </main>
+  ),
+  node: document.getElementById("app"),
+  dispatch: logger
+});
 ```
 
-![Screenshot](https://user-images.githubusercontent.com/3735164/36941306-d7233132-1f0c-11e8-9b97-335f7957a685.png)
+![Screenshot](https://user-images.githubusercontent.com/3735164/152481590-d18dc32a-71fa-47da-8606-742bc6fc42b1.png)
 
 ## Installation
 
@@ -46,40 +40,44 @@ withLogger(app)(state, actions, view, document.body)
 Install with npm / Yarn.
 
 <pre>
-npm i <a href="https://www.npmjs.com/package/@hyperapp/logger">@hyperapp/logger</a>
+npm i <a href="https://www.npmjs.com/package/hyperapp-logger">hyperapp-logger</a>
 </pre>
 
 Then with a module bundler like [rollup](https://github.com/rollup/rollup) or [webpack](https://github.com/webpack/webpack) use as you would anything else.
 
 ```js
-import { withLogger } from "@hyperapp/logger"
+import logger from "hyperapp-logger";
 ```
 
 ### Browser
 
-Download the minified library from the [CDN](https://unpkg.com/@hyperapp/logger).
+Download the minified library from the [CDN](https://unpkg.com/hyperapp-logger).
 
 ```html
-<script src="https://unpkg.com/@hyperapp/logger"></script>
+<script src="https://unpkg.com/hyperapp-logger"></script>
 ```
 
 You can find the library in `window.hyperappLogger`.
 
-```js
-const { withLogger } = hyperappLogger
-```
-
 ## Usage
 
-Compose the `withLogger` function with your `app` before calling it with the usual arguments.
-
 ```js
-import { withLogger } from "@hyperapp/logger"
+import logger from "hyperapp-logger";
 
-withLogger(app)(state, actions, view, document.body)
+app({
+  init,
+  view,
+  node,
+  dispatch: logger
+});
 
 // Or if you need to pass options
-withLogger(options)(app)(state, actions, view, document.body)
+app({
+  init,
+  view,
+  node,
+  dispatch: logger(options)
+});
 ```
 
 ### Options
@@ -89,11 +87,16 @@ withLogger(options)(app)(state, actions, view, document.body)
 Use it to customize the log function.
 
 ```js
-withLogger({
-  log(prevState, action, nextState) {
-    // format and send your log messages anywhere you like
-  }
-})(app)(state, actions, view, document.body)
+app({
+  init,
+  view,
+  node,
+  dispatch: logger({
+    log(state, action, props, actionResult) {
+      // format and send your log messages anywhere you like
+    }
+  })
+});
 ```
 
 ## License

README.md

@@ -1,51 +1,47 @@
 {
-  "name": "@hyperapp/logger",
+  "name": "hyperapp-logger",
   "version": "0.5.0",
   "description": "Log Hyperapp state updates and action information to the console",
   "main": "dist/hyperappLogger.js",
-  "jsnext:main": "src/index.js",
+  "type": "module",
   "module": "src/index.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/hyperapp/logger.git"
+    "url": "git+https://github.com/okwolf/hyperapp-logger.git"
   },
   "files": [
     "src/**",
     "dist/**"
   ],
   "scripts": {
-    "clean": "npx rimraf coverage dist node_modules",
-    "format": "prettier --write '{src,test}/**/*.js'",
-    "format:check": "prettier --list-different {src,test}/**/*.js",
-    "test": "jest --coverage --no-cache",
+    "clean": "npx --ignore-existing --quiet rimraf coverage dist node_modules",
+    "format": "prettier --write \"{src,test}/**/*.js\"",
+    "format:check": "prettier --list-different \"{src,test}/**/*.js\"",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --coverage --no-cache",
     "bundle": "rollup -i src/index.js -o dist/hyperappLogger.js -m -f umd -n hyperappLogger",
     "minify": "uglifyjs dist/hyperappLogger.js -o dist/hyperappLogger.js -mc pure_funcs=['Object.defineProperty'] --source-map includeSources,url=hyperappLogger.js.map",
     "check": "npm run format:check && npm t",
     "build": "npm run check && npm run bundle && npm run minify",
-    "prepare": "npm run build",
-    "release": "npm run clean && npm i && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"
+    "release:dry": "npm run clean && npm i && npm run check && npm run build",
+    "release": "node --experimental-json-modules release"
   },
-  "prettier": {
-    "semi": false
+  "jest": {
+    "transform": {}
   },
-  "babel": {
-    "presets": "env"
+  "peerDependencies": {
+    "hyperapp": "^2.0.0"
   },
   "devDependencies": {
-    "babel-preset-env": "^1.6.1",
-    "hyperapp": "^1.1.2",
-    "jest": "^21.2.1",
-    "prettier": "^1.11.1",
-    "rollup": "^0.56.3",
-    "uglify-js": "^3.3.12"
-  },
-  "peerDependencies": {
-    "hyperapp": "^1.1.2"
+    "hyperapp": "=2.0.20",
+    "jest": "=27.4.7",
+    "prettier": "=2.5.1",
+    "rollup": "=2.67.0",
+    "uglify-js": "=3.15.0"
   },
   "author": "Wolfgang Wedemeyer <wolf@okwolf.com>",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/hyperapp/logger/issues"
+    "url": "https://github.com/okwolf/hyperapp-logger/issues"
   },
-  "homepage": "https://github.com/hyperapp/logger"
+  "homepage": "https://github.com/okwolf/hyperapp-logger"
 }

package.json

@@ -0,0 +1,37 @@
+import { execSync } from "child_process";
+import packageJson from "./package.json";
+import { fileURLToPath } from "url";
+import { dirname } from "path";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const exec = command => execSync(command, { encoding: "utf8" }).trim();
+
+const exitWithError = error => {
+  process.stderr.write(`\x1b[1;31m${error}\x1b[0m\n\n`);
+  process.exit(1);
+};
+
+const gitBranchName = exec("git rev-parse --abbrev-ref HEAD");
+if (gitBranchName !== "master") {
+  exitWithError("please checkout the master branch to make a release!");
+}
+
+const workingCopyChanges = exec("git status --porcelain");
+if (workingCopyChanges) {
+  exitWithError("please commit your changes before making a release!");
+}
+
+const tagExists = exec(`git tag -l "${packageJson.version}"`);
+if (tagExists) {
+  exitWithError(`${packageJson.version} has already been released!`);
+}
+
+execSync(
+  `npm run release:dry && git tag ${packageJson.version} && git push && git push --tags && npm publish`,
+  {
+    shell: true,
+    stdio: "inherit",
+    cwd: __dirname
+  }
+);

release.js

@@ -1,7 +1,11 @@
-export default function(prevState, action, nextState) {
-  console.group("%c action", "color: gray; font-weight: lighter;", action.name)
-  console.log("%c prev state", "color: #9E9E9E; font-weight: bold;", prevState)
-  console.log("%c data", "color: #03A9F4; font-weight: bold;", action.data)
-  console.log("%c next state", "color: #4CAF50; font-weight: bold;", nextState)
-  console.groupEnd()
+export default function (state, action, props, actionResult) {
+  console.group("%c action", "color: gray; font-weight: lighter;", action.name);
+  console.log("%c state", "color: #9E9E9E; font-weight: bold;", state);
+  console.log("%c props", "color: #03A9F4; font-weight: bold;", props);
+  console.log(
+    "%c action result",
+    "color: #4CAF50; font-weight: bold;",
+    actionResult
+  );
+  console.groupEnd();
 }