Comments (5)
I'm thinking about something along this lines:
var open = require("dom-reduce/event")
var writer = require("reflex/writer")
var map = require("reducers/map")
var channel = require("reducers/channel")
var emit = require("reducers/emit")
var reduce = require("reducers/reduce")
function widget(read, write) {
return function make(input, options) {
// Create / hook an instance using options passed
var instance = write(input, null, options)
var output = read(instance)
output.view = instance
return output
}
}
var rangeWriter = writer(function swap(output, data) {
output.querySelector(".caption").textContent = data.value
}, function close(output) {
var parent = output.parentElement
if (parent) parent.removeChild(output)
}, function open(options) {
options = options || {}
var root = document.createElement("div")
root.className = "widget"
var range = document.createElement("input")
range.className = "input range"
range.type = "range"
range.max = options.max || 100
range.min = options.min || 0
range.value = options.value === void(0) ? range.max / 2
: options.value
root.appendChild(range)
var caption = document.createElement("label")
caption.className = "caption"
root.appendChild(caption)
return root
})
var slider = widget(function(instance) {
var changes = open(instance, "change")
return map(changes, function(event) {
return event.target.value
})
}, rangeWriter)
var state = channel()
var s = slider(state, { max: 100, min: 0, value: 50 })
document.body.appendChild(s.view)
from reflex.
How would it work with collectionWriter.
You would want to call read for each one.
from reflex.
Draft for the implementation of component
that me and @Raynos have outlined:
function component(read, write) {
/**
Component takes read / write functions for each of the nested component
and returns `react` function that can take `input` stream of application state
changes and returns `input` of user events
**/
return function react(state, options) {
var hash = {} // hash of items that are already known
var inputs = channel() // sequence of streams where each one is update per nested component.
reduce(state, function(current, state) {
var delta = diff(current, state)
Object.keys(delta).forEach(function(id) {
if (delta[id] === null) hash[id] = null
else if (!hash[id]) {
hash[id] = true
// filter each input to only updates for component with this id.
var fork = filter(state, function(data) { return id in data })
// Map it to actual update deltas.
var updates = map(fork, function(state) { return state[id] })
// Create an output where updates are written
var output = write(updates, options)
// and read inputs from that output
var input = read(output, options)
// create stream of deltas by mapping each update back to id
var deltas = map(output, function(update) {
var value = {}
value[id] = update
return value
})
// emit deltas stream to the stream of all inputs
emit(inputs, deltas)
}
})
})
// return joined stream of all inputs from all nested components.
flatten(inputs)
}
}
from reflex.
Draft for the implementation of compound component that me and @Raynos have outlined:
function compoundComponent(mapping) {
/**
Takes mapping of JSON paths for a state snapshot and `react`-or function
to which scoped updates are forwarded. In return it returns `input` stream
of user events all all the nested components joined in the state model
structure.
**/
return function react(state) {
var inputs = Object.keys(mapping).map(function(id) {
// Filter updates to the component with the given `id`.
var fork = filter(state, function(data) { return id in data })
// Selects a deltas for the given item.
var updates = map(fork, function(state) { return state[id] })
// Get an user input for the component by passing scope updates to
// the reactor function associated with an `id`.
var input = mapping[id](updates)
// Join back user input into same state structure.
return map(input, function(update) {
var value = {}
value[id] = update
return value
})
})
// Merge updates from all components together into stream of deltas
// for the application state.
return flatten(inputs)
}
}
from reflex.
This now is now duplicate of #16
from reflex.
Related Issues (20)
- State changes to computed properties should no got to state
- Deep nesting for units. HOT 1
- Merge atom / set / component / unit into a simpler concept HOT 2
- Improve reactor API HOT 2
- operations are discrete events
- Hi, what is reflex? HOT 2
- Status & spiritual successor
- Allow children to be iterator
- View driver should have a development hooks HOT 1
- Task.io may cause an infinite loop HOT 1
- Is it production ready yet ? HOT 3
- Effects.batch should complain if it doesn't get called with an array HOT 3
- Bundled, minified distribution without node dependency? HOT 6
- `thunk` type annotations are incorrect HOT 2
- node() does not support namespacing for SVG elements HOT 4
- A typo in README
- Tutorial/Guide HOT 5
- Duplicate name HOT 1
- Wiki changes HOT 1
- CODE_OF_CONDUCT.md file missing
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reflex.