ported to observable

element/set-position.js

@@ -1,4 +1,4 @@
-module.export = setPosition
+module.exports = setPosition
 
 function setPosition(pos, elem) {
     elem.style.position = 'absolute';

examples/display/collage-colors.js

@@ -4,8 +4,6 @@ var rect = require("../../element").rect
 
 var render = require("../../render")
 
-
-
 var myBlue  = { r: 0, g: 85, b: 170 }
 var myGreen = { r: 28, g: 267, b: 85, a: 1 / 2 }
 

examples/full/mario.js

@@ -2,9 +2,10 @@ var WindowDimensions = require("../../input").WindowDimensions
 var KeyboardArrows = require("../../input").KeyboardArrows
 var fps = require("../../input").fps
 
-var map = require("../../signal").map
-var mapMany = require("../../signal").mapMany
+var transform = require("../../signal").transform
+var transformMany = require("../../signal").transformMany
 var foldp = require("../../signal").foldp
+var inspect = require("../../signal").inspect
 
 var rect = require("../../element").rect
 var filled = require("../../element").filled
@@ -29,16 +30,15 @@ var MarioModel = {
 
 /* Inputs */
 var dimensions = WindowDimensions()
-dimensions
-// =>
+inspect(dimensions) // =>
+
 var arrows = KeyboardArrows()
 var framerate = fps(25)
 
-var input = mapMany([framerate, arrows], function toTuple(delta, arrows) {
+var input = transformMany([framerate, arrows], function toTuple(delta, arrows) {
     return { delta: delta, arrows: arrows }
 })
-input
-// =>
+inspect(input) // =>
 
 function gravity(mario, delta) {
     return {
@@ -91,11 +91,10 @@ var marioState = foldp(input, function update(mario, inputState) {
 
     return move(walkedMario, delta)
 }, MarioModel)
-marioState
-// =>
+inspect(marioState) // =>
 
 /* rendering */
-var main = mapMany([
+var main = transformMany([
     dimensions, marioState
 ], function display(dimensions, mario) {
     // var src = "/imgs/mario/stand/right.gif"
@@ -131,8 +130,7 @@ var main = mapMany([
         // , marioForm
     ])
 })
-main
-// =>
+inspect(main) // =>
 
 render(main, false)
 // =>

examples/react/mouse-clicks.js

@@ -1,14 +1,14 @@
 var MouseClicks = require("../../input").MouseClicks
-var foldp = require("../../signal/foldp")
-var map = require("../../signal/map")
+var foldp = require("../../signal").foldp
+var transform = require("../../signal").transform
 var plainText = require("../../element").plainText
 var render = require("../../render")
 
 var clicks = foldp(MouseClicks(), function (count) {
     return count + 1
 }, 0)
 
-var main = map(clicks, plainText)
+var main = transform(clicks, plainText)
 
 render(main, false)
 // =>

examples/react/mouse-position-image.js

@@ -1,21 +1,21 @@
 var image = require("../../element").image
-var map = require("../../signal/map")
+var transform = require("../../signal").transform
+var inspect = require("../../signal").inspect
 var MousePosition = require("../../input").MousePosition
 var render = require("../../render")
 
 var input = MousePosition()
-input
-// =>
+inspect(input) // =>
 
-var edgeLength = map(input, function (pos) {
+// application state
+var edgeLength = transform(input, function (pos) {
     return Math.max(100, Math.max(pos.x, pos.y))
 })
-edgeLength // application state
-// =>
+inspect(edgeLength) // =>
 
-var main = map(edgeLength, function resizableYogi(edgeLength) {
+// application view
+var main = transform(edgeLength, function resizableYogi(edgeLength) {
     return image(edgeLength, edgeLength, "http://elm-lang.org/yogi.jpg")
-}) // application view
+})
 
-render(main, false)
-// =>
+render(main, false) // =>

examples/react/mouse-position.js

@@ -1,9 +1,9 @@
 var MousePosition = require("../../input").MousePosition
-var map = require("../../signal/map")
+var transform = require("../../signal").transform
 var plainText = require("../../element").plainText
 var render = require("../../render")
 
-var main = map(MousePosition(), function (position) {
+var main = transform(MousePosition(), function (position) {
     return plainText(position)
 })
 

examples/react/window-centering.js

@@ -1,8 +1,9 @@
 var middle = require("../../element").middle
 var plainText = require("../../element").plainText
 var container = require("../../element").container
+
 var WindowDimensions = require("../../input").WindowDimensions
-var map = require("../../signal/map")
+var transform = require("../../signal").transform
 var render = require("../../render")
 
 function scene(dimensions) {
@@ -14,7 +15,7 @@ function scene(dimensions) {
 }
 
 
-var main = map(WindowDimensions(), scene)
+var main = transform(WindowDimensions(), scene)
 
 render(main, false)
 // =>

package.json

@@ -17,22 +17,17 @@
     "email": "raynos2@gmail.com"
   },
   "dependencies": {
-    "reducers": "git://github.com/Raynos/reducers",
     "global": "~2.0.1",
-    "invoker": "~0.1.2",
-    "tryme": "git://github.com/Raynos/tryme"
+    "observable": "~1.4.1"
   },
   "devDependencies": {
     "tape": "~0.2.2",
     "browserify-server": "~2.1.18",
     "browservefy": "git://github.com/Raynos/browservefy",
     "testem": "~0.2.56",
-    "reducible": "git://github.com/Raynos/reducible#1.x",
     "tryme": "git://github.com/Raynos/tryme"
   },
-  "peerDependencies": {
-    "reducible": "git://github.com/Raynos/reducible#1.x"
-  },
+  "peerDependencies": {},
   "licenses": [
     {
       "type": "MIT",

render.js

@@ -1,6 +1,6 @@
 var document = require("global/document")
 
-var consume = require("./signal/consume")
+var start = require("./signal/start")
 var foldp = require("./signal/foldp")
 
 module.exports = render
@@ -12,27 +12,23 @@ function render(scenes, container) {
 
     var surface = document.createElement("div")
 
-    console.log("------------------------")
-    console.log("RENDER CALLED TWICE LAWL")
-    console.log("------------------------")
+    var initial = typeof scenes === "function" ? scenes() : scenes
+    var elem = initial.create()
+    surface.appendChild(elem)
 
-    var main = foldp(scenes, function (previous, current) {
-        if (previous === null) {
-            console.log("previos null thus create")
-            var elem = current.create()
-            surface.appendChild(elem)
-        } else {
+    if (typeof scenes === "function") {
+        var main = foldp(scenes, function (previous, current) {
             current.update(surface.firstChild, previous)
-        }
 
-        return current
-    }, null)
+            return current
+        }, initial)
+
+        start(main)
+    }
 
     if (container !== false) {
         container.insertBefore(surface, container.firstChild)
     }
 
-    consume(main)
-
     return surface
 }

signal/foldp.js

@@ -1,8 +1,38 @@
-var reductions = require("reducers/reductions")
-var concat = require("reducers/concat")
+var observable = require("observable")
 
+// Signal A -> (B -> A -> B) -> B -> Signal B
 module.exports = foldp
 
-function foldp(input, folder, initial) {
-    return concat(initial, reductions(input, folder, initial))
+function foldp(inputSignal, folder, initialValue) {
+    var state = initialValue
+    var listeners = []
+    var started = false
+
+    return outputSignal
+
+    function outputSignal(listener) {
+        if (isGet(listener)) {
+            return state
+        } else if (isSet(listener)) {
+            throw new Error("read-only")
+        } else {
+            listeners.push(listener)
+            if (!started) {
+                started = true
+                start()
+            }
+        }
+    }
+
+    function start() {
+        inputSignal(function onchange(value) {
+            state = folder(state, value)
+            listeners.forEach(function (cb) {
+                cb(state)
+            })
+        })
+    }
 }
+
+function isGet(x) { return x === undefined }
+function isSet(x) { return typeof x !== "function" }

signal/index.js

@@ -1,5 +1,6 @@
 module.exports = {
-    map: require("./map")
+    transform: require("./transform")
     , foldp: require("./foldp")
-    , mapMany: require("./mapMany")
+    , transformMany: require("./transformMany")
+    , inspect: require("./inspect")
 }

signal/inspect.js

@@ -0,0 +1,19 @@
+var document = require("global/document")
+
+module.exports = inspect
+
+function inspect(observable) {
+    var pre = document.createElement("pre")
+
+    render(pre, observable())
+
+    observable(function (value) {
+        render(pre, value)
+    })
+
+    return pre
+}
+
+function render(surface, value) {
+    surface.textContent = JSON.stringify(value, null, "    ")
+}