@hyperapp/fx (#25)

* refactor for org/repo name change

* lots of effects => fx refactoring

* update readme to be more in line with the rest of hyperapp org
add new quote fetching example

package.json

@@ -1,13 +1,12 @@
 {
-  "name": "hyperapp-effects",
-  "version": "0.5.2",
+  "name": "@hyperapp/fx",
+  "version": "0.6.0",
   "description": "Effects as data for Hyperapp",
-  "main": "dist/effects.js",
-  "jsnext:main": "src/index.js",
+  "main": "dist/fx.js",
   "module": "src/index.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/HyperappCommunity/hyperapp-effects.git"
+    "url": "git+https://github.com/hyperapp/fx.git"
   },
   "peerDependencies": {
     "hyperapp": "^1.1.2"
@@ -23,8 +22,8 @@
   "scripts": {
     "test": "jest --coverage --no-cache",
     "build": "npm run bundle && npm run minify",
-    "bundle": "rollup -i src/index.js -o dist/effects.js -m -f umd -n effects",
-    "minify": "uglifyjs dist/effects.js -o dist/effects.js -mc pure_funcs=['Object.defineProperty'] --source-map includeSources,url=effects.js.map",
+    "bundle": "rollup -i src/index.js -o dist/fx.js -m -f umd -n fx",
+    "minify": "uglifyjs dist/fx.js -o dist/fx.js -mc pure_funcs=['Object.defineProperty'] --source-map includeSources,url=fx.js.map",
     "prepare": "npm run build",
     "format": "prettier --semi false --write '{src,test}/**/*.js'"
   },
@@ -34,7 +33,7 @@
   "author": "Wolfgang Wedemeyer <wolf@okwolf.com>",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/HyperappCommunity/hyperapp-effects/issues"
+    "url": "https://github.com/hyperapp/fx/issues"
   },
-  "homepage": "https://github.com/HyperappCommunity/hyperapp-effects"
+  "homepage": "https://github.com/hyperapp/fx"
 }

src/effectCreators.js → src/fxCreators.js

@@ -9,7 +9,7 @@ import {
   KEY_DOWN,
   KEY_UP,
   RANDOM
-} from "./effectTypes"
+} from "./fxTypes"
 
 export function action(name, data) {
   return [

src/fxIf.js

@@ -0,0 +1,11 @@
+export function fxIf(fxSpecs) {
+  return fxSpecs
+    .filter(function(fxSpec) {
+      // first element is the conditional
+      return fxSpec[0]
+    })
+    .map(function(fxSpec) {
+      // second element is the effect to include
+      return fxSpec[1]
+    })
+}

src/index.js

@@ -1,3 +1,3 @@
-export { default as withEffects } from "./withEffects"
-export * from "./effectCreators"
-export { default as effectsIf } from "./effectsIf"
+export { withFx } from "./withFx"
+export * from "./fxCreators"
+export { fxIf } from "./fxIf"

src/makeDefaultEffects.js → src/makeDefaultFx.js

@@ -9,37 +9,37 @@ import {
   KEY_DOWN,
   KEY_UP,
   RANDOM
-} from "./effectTypes"
+} from "./fxTypes"
 import { assign, omit } from "./utils.js"
 
-export default function makeDefaultEffects() {
-  var effects = {}
+export default function makeDefaultFx() {
+  var fx = {}
 
-  effects[ACTION] = function(props, getAction) {
+  fx[ACTION] = function(props, getAction) {
     getAction(props.name)(props.data)
   }
 
-  effects[FRAME] = function(props, getAction) {
+  fx[FRAME] = function(props, getAction) {
     requestAnimationFrame(function(time) {
       getAction(props.action)(time)
     })
   }
 
-  effects[DELAY] = function(props, getAction) {
+  fx[DELAY] = function(props, getAction) {
     setTimeout(function() {
       getAction(props.action)(props.data)
     }, props.duration)
   }
 
-  effects[TIME] = function(props, getAction) {
+  fx[TIME] = function(props, getAction) {
     getAction(props.action)(performance.now())
   }
 
-  effects[LOG] = function(props, getAction) {
+  fx[LOG] = function(props, getAction) {
     console.log.apply(null, props.args)
   }
 
-  effects[HTTP] = function(props, getAction) {
+  fx[HTTP] = function(props, getAction) {
     var options = assign(
       {
         response: "json",
@@ -66,26 +66,26 @@ export default function makeDefaultEffects() {
       })
   }
 
-  effects[EVENT] = function(props, getAction) {
+  fx[EVENT] = function(props, getAction) {
     getAction(props.action)(props.event)
   }
 
-  effects[KEY_DOWN] = function(props, getAction) {
+  fx[KEY_DOWN] = function(props, getAction) {
     document.onkeydown = function(keyEvent) {
       getAction(props.action)(keyEvent)
     }
   }
 
-  effects[KEY_UP] = function(props, getAction) {
+  fx[KEY_UP] = function(props, getAction) {
     document.onkeyup = function(keyEvent) {
       getAction(props.action)(keyEvent)
     }
   }
 
-  effects[RANDOM] = function(props, getAction) {
+  fx[RANDOM] = function(props, getAction) {
     var randomValue = Math.random() * (props.max - props.min) + props.min
     getAction(props.action)(randomValue)
   }
 
-  return effects
+  return fx
 }

src/withEffects.js → src/withFx.js

@@ -1,7 +1,7 @@
 import { assign } from "./utils.js"
-import makeDefaultEffects from "./makeDefaultEffects"
+import makeDefaultFx from "./makeDefaultFx"
 
-var isEffect = Array.isArray
+var isFx = Array.isArray
 var isFn = function(value) {
   return typeof value === "function"
 }
@@ -19,25 +19,25 @@ function getActionNamed(actions, name) {
   return getNextAction(actions, name.split("."))
 }
 
-function runIfEffect(actions, currentEvent, maybeEffect, effects) {
-  var getAction = getActionNamed.bind(null, actions)
-  if (!isEffect(maybeEffect)) {
+function runIfFx(actions, currentEvent, maybeFx, fx) {
+  if (!isFx(maybeFx)) {
     // Not an effect
-    return maybeEffect
-  } else if (isEffect(maybeEffect[0])) {
+    return maybeFx
+  } else if (isFx(maybeFx[0])) {
     // Run an array of effects
-    for (var i in maybeEffect) {
-      runIfEffect(actions, currentEvent, maybeEffect[i], effects)
+    for (var i in maybeFx) {
+      runIfFx(actions, currentEvent, maybeFx[i], fx)
     }
   } else {
     // Run a single effect
-    var type = maybeEffect[0]
-    var props = assign(maybeEffect[1], { event: currentEvent })
-    effects[type](props, getAction)
+    var getAction = getActionNamed.bind(null, actions)
+    var type = maybeFx[0]
+    var props = assign(maybeFx[1], { event: currentEvent })
+    fx[type](props, getAction)
   }
 }
 
-function enhanceActions(actionsTemplate, effects) {
+function enhanceActions(actionsTemplate, fx) {
   return Object.keys(actionsTemplate || {}).reduce(function(
     otherActions,
     name
@@ -48,42 +48,42 @@ function enhanceActions(actionsTemplate, effects) {
           return function(state, actions) {
             var result = action(data)
             result = isFn(result) ? result(state, actions) : result
-            return runIfEffect(actions, null, result, effects)
+            return runIfFx(actions, null, result, fx)
           }
         }
-      : enhanceActions(action, effects)
+      : enhanceActions(action, fx)
     return otherActions
   },
   {})
 }
 
-function handleEventEffect(actions, effect, effects) {
+function handleEventFx(actions, currentFx, fx) {
   return function(currentEvent) {
-    runIfEffect(actions, currentEvent, effect, effects)
+    runIfFx(actions, currentEvent, currentFx, fx)
   }
 }
 
-function patchVdomEffects(actions, vdom, effects) {
+function patchVdomFx(actions, vdom, fx) {
   if (typeof vdom === "object") {
     for (var key in vdom.attributes) {
-      var maybeEffect = vdom.attributes[key]
-      if (isEffect(maybeEffect)) {
-        vdom.attributes[key] = handleEventEffect(actions, maybeEffect, effects)
+      var maybeFx = vdom.attributes[key]
+      if (isFx(maybeFx)) {
+        vdom.attributes[key] = handleEventFx(actions, maybeFx, fx)
       }
     }
     for (var i in vdom.children) {
-      patchVdomEffects(actions, vdom.children[i], effects)
+      patchVdomFx(actions, vdom.children[i], fx)
     }
   }
 }
 
-function makeEffectsApp(effects, nextApp) {
+function makeFxApp(fx, nextApp) {
   return function(initialState, actionsTemplate, view, container) {
-    var enhancedActions = enhanceActions(actionsTemplate, effects)
+    var enhancedActions = enhanceActions(actionsTemplate, fx)
     var enhancedView = isFn(view)
       ? function(state, actions) {
           var vdom = view(state, actions)
-          patchVdomEffects(actions, vdom, effects)
+          patchVdomFx(actions, vdom, fx)
           return vdom
         }
       : undefined
@@ -98,16 +98,16 @@ function makeEffectsApp(effects, nextApp) {
   }
 }
 
-export default function withEffects(effectsOrApp) {
-  var effects = makeDefaultEffects()
-  if (typeof effectsOrApp === "function") {
-    return makeEffectsApp(effects, effectsOrApp)
+export function withFx(fxOrApp) {
+  var fx = makeDefaultFx()
+  if (typeof fxOrApp === "function") {
+    return makeFxApp(fx, fxOrApp)
   } else {
-    for (var name in effectsOrApp) {
-      effects[name] = effectsOrApp[name]
+    for (var name in fxOrApp) {
+      fx[name] = fxOrApp[name]
     }
     return function(nextApp) {
-      return makeEffectsApp(effects, nextApp)
+      return makeFxApp(fx, nextApp)
     }
   }
 }

test/effectsIf.test.js

@@ -1,8 +1,8 @@
-import { action, effectsIf } from "../dist/effects"
+import { action, fxIf } from "../src"
 
-describe("effectsIf", () => {
+describe("fxIf", () => {
   it("should filter out effects with truthy conditionals", () =>
     expect(
-      effectsIf([[true, action("include")], [false, action("exclude")]])
+      fxIf([[true, action("include")], [false, action("exclude")]])
     ).toEqual([action("include")]))
 })

test/fxIf.test.js

@@ -0,0 +1,8 @@
+import { action, fxIf } from "../src"
+
+describe("fxIf", () => {
+  it("should filter out effects with truthy conditionals", () =>
+    expect(
+      fxIf([[true, action("include")], [false, action("exclude")]])
+    ).toEqual([action("include")]))
+})