├── .gitignore
├── demos
├── index.html
├── time-slicing
│ ├── index.html
│ ├── README.md
│ ├── index.js
│ ├── index.css
│ ├── Clock.js
│ └── Charts.js
├── custom.css
├── components
│ ├── index.js
│ ├── timer.js
│ ├── sourceswitching.js
│ ├── blink.js
│ ├── counter.js
│ ├── crappybird.js
│ └── button.css
├── eleventy.css
└── index.js
├── .babelrc
├── reactive-react
├── index.js
├── updateProperties.js
├── element.js
├── component.js
├── swyxjs.js
├── scheduler.js
└── reconciler.js
├── prototypeAPI.js
├── netlify.toml
├── rollup.config.js
├── package.json
├── README.md
└── dependencygraph.svg
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | yarn.lock
4 | .cache
--------------------------------------------------------------------------------
/demos/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/demos/time-slicing/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/demos/time-slicing/README.md:
--------------------------------------------------------------------------------
1 | note that this isnt actually a demo of time slicing - its just meant to show the performance issues.
2 |
3 | this was originally written as a separate demo from all the rest and that may change.
--------------------------------------------------------------------------------
/demos/custom.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: rgb(2,0,36);
3 | background: linear-gradient(45deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 23%, rgba(161,0,0,1) 100%);
4 | }
5 | html {
6 | overflow: scroll;
7 | }
8 | .container {
9 | width: 700px
10 | }
11 |
12 | .titleLink {
13 | display: flex
14 | }
15 |
16 | .titleLink a {
17 | margin-left: 10px;
18 | }
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": [
3 | "transform-object-rest-spread",
4 | "transform-class-properties",
5 | [
6 | "transform-react-jsx",
7 | {}
8 | ]
9 | ],
10 | "presets": [
11 | [
12 | "env",
13 | {
14 | "targets": {
15 | "node": "current"
16 | }
17 | }
18 | ]
19 | ]
20 | }
--------------------------------------------------------------------------------
/reactive-react/index.js:
--------------------------------------------------------------------------------
1 | import { createElement, createHandler } from "./element";
2 | import { Component } from "./component";
3 | import { renderStream } from "./reconciler"
4 | import { mount } from "./scheduler";
5 |
6 | export default {
7 | renderStream,
8 | createElement,
9 | createHandler,
10 | Component,
11 | mount
12 | };
13 |
14 | export { createElement, createHandler, Component,
15 | renderStream,
16 | mount };
17 |
--------------------------------------------------------------------------------
/prototypeAPI.js:
--------------------------------------------------------------------------------
1 |
2 | class Abc extends Component {
3 | source($) {
4 | return Observable.of(1)
5 | }
6 | render($) {
7 | return
8 | }
9 | }
10 |
11 | class LabeledSlider extends Component {
12 | constructor() {
13 | this.myRef = Creat.createRef();
14 | }
15 | source($) {
16 | return this.myRef()
17 | }
18 | render(value, prop$) {
19 | return
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [Settings]
2 | ID = "reactive-react"
3 |
4 | # for more: https://www.netlify.com/docs/netlify-toml-reference/
5 |
6 | [build]
7 | # This is the directory to change to before starting a build.
8 | # base = "project/"
9 | # NOTE: This is where we will look for package.json/.nvmrc/etc, not root.
10 | # This is the directory that you are publishing from (relative to root of your repo)
11 | publish = "demos/dist/"
12 | # This will be your default build command
13 | command = "npm run demo:build"
14 | # This is where we will look for your lambda functions
15 | # functions = "project/functions/"
--------------------------------------------------------------------------------
/demos/components/index.js:
--------------------------------------------------------------------------------
1 | import Timer from './timer'
2 | import Blink from './blink'
3 | import Counter, {Counters} from './counter'
4 | import CrappyBird from './crappybird'
5 | import Source, {SourceSwitching} from './sourceswitching'
6 | import CrazyCharts from '../time-slicing'
7 |
8 | // barrel rollup of all neighbors
9 | // export Timer from './timer'
10 | // export Blink from './blink'
11 | // export Counter, {Counters} from './counter'
12 | // export CrappyBird from './crappybird'
13 | // export Source, {SourceSwitching} from './sourceswitching'
14 | export {Timer, Blink, Counter, Counters, CrappyBird, Source, SourceSwitching, CrazyCharts}
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | // Rollup plugins
2 | import babel from 'rollup-plugin-babel';
3 |
4 | export default {
5 | entry: 'reactive-react/index.js',
6 | dest: 'build/reactive-react.js',
7 | format: 'iife',
8 | sourceMap: 'inline',
9 | moduleName: 'reactive-react',
10 | plugins: [
11 | babel({
12 | babelrc: false,
13 | presets: [['env', { modules: false }]],
14 | plugins: [
15 | "transform-object-rest-spread",
16 | "transform-class-properties",
17 | [
18 | "transform-react-jsx",
19 | {}
20 | ]
21 | ],
22 | exclude: 'node_modules/**',
23 | }),
24 | ],
25 | };
--------------------------------------------------------------------------------
/demos/components/timer.js:
--------------------------------------------------------------------------------
1 | /** @jsx createElement */
2 | import {mount, createElement, Component, createHandler} from '../../reactive-react'
3 | import {Interval, scan, startWith, merge, mapToConstant} from '../../reactive-react/swyxjs'
4 | import Observable from 'zen-observable'
5 |
6 | export default class Timer extends Component {
7 | // demonstrate interval time
8 | initialState = 0
9 | source($) {
10 | const source = Interval(this.props.ms) // tick every second
11 | const reducer = x => x + 0.5 // count up
12 | // source returns an observable
13 | return scan(source, reducer, 0) // from zero
14 | }
15 | render(state, stateMap) {
16 | return number of seconds elapsed: {state}
17 | }
18 | }
--------------------------------------------------------------------------------
/reactive-react/updateProperties.js:
--------------------------------------------------------------------------------
1 | export function updateDomProperties(dom, prevProps, nextProps) {
2 | const isEvent = name => name.startsWith("on");
3 | const isAttribute = name => !isEvent(name) && name != "children";
4 |
5 | // Remove event listeners
6 | Object.keys(prevProps).filter(isEvent).forEach(name => {
7 | const eventType = name.toLowerCase().substring(2);
8 | dom.removeEventListener(eventType, prevProps[name]);
9 | });
10 |
11 | // Remove attributes
12 | Object.keys(prevProps).filter(isAttribute).forEach(name => {
13 | dom[name] = null;
14 | });
15 |
16 | // Set attributes
17 | Object.keys(nextProps).filter(isAttribute).forEach(name => {
18 | dom[name] = nextProps[name];
19 | });
20 |
21 | // Add event listeners
22 | Object.keys(nextProps).filter(isEvent).forEach(name => {
23 | const eventType = name.toLowerCase().substring(2);
24 | dom.addEventListener(eventType, nextProps[name]);
25 | });
26 | }
27 |
--------------------------------------------------------------------------------
/reactive-react/element.js:
--------------------------------------------------------------------------------
1 | import Observable from 'zen-observable'
2 | import { createChangeEmitter } from 'change-emitter'
3 |
4 | export const TEXT_ELEMENT = "TEXT ELEMENT";
5 |
6 | export function createElement(type, config, ...args) {
7 | const props = Object.assign({}, config);
8 | const hasChildren = args.length > 0;
9 | const rawChildren = hasChildren ? [].concat(...args) : [];
10 | props.children = rawChildren
11 | .filter(c => c != null && c !== false)
12 | .map(c => c instanceof Object ? c : createTextElement(c));
13 | return { type, props };
14 | }
15 |
16 | function createTextElement(value) {
17 | return createElement(TEXT_ELEMENT, { nodeValue: value });
18 | }
19 |
20 | export function createHandler(_fn) {
21 | const emitter = createChangeEmitter()
22 | let handler = x => {
23 | emitter.emit(x)
24 | }
25 | handler.$ = new Observable(observer => {
26 | return emitter.listen(value => {
27 | observer.next(_fn ? _fn(value) : value)
28 | }
29 | )
30 | })
31 | return handler
32 | }
--------------------------------------------------------------------------------
/demos/components/sourceswitching.js:
--------------------------------------------------------------------------------
1 | /** @jsx createElement */
2 | import {mount, createElement, Component, createHandler} from '../../reactive-react'
3 | import {Interval, scan, startWith, merge, mapToConstant} from '../../reactive-react/swyxjs'
4 | import Observable from 'zen-observable'
5 |
6 | import Timer from './timer'
7 | import Counter from './counter'
8 |
9 | export class SourceSwitching extends Component {
10 | initialState = true
11 | toggle = createHandler()
12 | source($) {
13 | const source = this.toggle.$
14 | const reducer = x => !x
15 | return {source, reducer}
16 | }
17 | render(state, stateMap) {
18 | return
19 |
20 | {
21 | state ? this.props.left : this.props.right
22 | }
23 |
24 | }
25 | }
26 |
27 | export default function Source() {
28 | // demonstrate ability to switch sources
29 | return }
31 | left={}
32 | right={}
33 | />
34 | }
--------------------------------------------------------------------------------
/demos/components/blink.js:
--------------------------------------------------------------------------------
1 | /** @jsx createElement */
2 | import {mount, createElement, Component, createHandler} from '../../reactive-react'
3 | import {Interval, scan, startWith, merge, mapToConstant} from '../../reactive-react/swyxjs'
4 | import Observable from 'zen-observable'
5 |
6 | export default class Blink extends Component {
7 | // more fun time demo
8 | // initialState = true // proper
9 | initialState = 0 // hacky
10 | source($) {
11 | // there is a bug right now where switching sources subscribes to the new source twice
12 | // havent been able to chase it down so i had to do this hacky thing
13 | // i'm sorry :( breaking demos last minute before talk sucks
14 | // const reducer = x => !x // the proper reducer
15 | const reducer = (acc, x) => acc + x // hacky reducer
16 | const source = Interval(500, 1) // tick every second
17 | return {source, reducer}
18 | }
19 | render(state) {
20 | const style = {
21 | visibility: ((state/2 + 1) % 2) ? // hacky
22 | 'visible' :
23 | 'hidden'}
24 | return Bring back the blink tag!
25 | }
26 | }
--------------------------------------------------------------------------------
/demos/components/counter.js:
--------------------------------------------------------------------------------
1 | /** @jsx createElement */
2 | import {mount, createElement, Component, createHandler} from '../../reactive-react'
3 | import {Interval, scan, startWith, merge, mapToConstant} from '../../reactive-react/swyxjs'
4 | import Observable from 'zen-observable'
5 |
6 | import './button.css'
7 |
8 | export default class Counter extends Component {
9 | // demonstrate basic counter
10 | initialState = 0
11 | increment = createHandler(e => 1)
12 | // decrement = createHandler(e => -1)
13 | source($) {
14 | // const source = merge(this.increment.$, this.decrement.$)
15 | const source = this.increment.$
16 | const reducer = (acc, n) => acc + n
17 | return {source, reducer}
18 | }
19 | render(state, stateMap) {
20 | const {name = "counter"} = this.props
21 | return
22 |
23 | {name}: {state}
24 |
25 |
+
26 | {/*
- */}
27 |
35 |
36 |
37 |
38 | }
--------------------------------------------------------------------------------
/reactive-react/component.js:
--------------------------------------------------------------------------------
1 | // import { reconcile } from "./reconciler";
2 | import {Interval, scan, startWith, merge, mapToConstant} from './swyxjs'
3 |
4 | export class Component {
5 | constructor(props) {
6 | this.props = props;
7 | this.state = this.state || {};
8 | }
9 |
10 | // setState(partialState) {
11 | // this.state = Object.assign({}, this.state, partialState);
12 | // updateInstance(this.__internalInstance);
13 | // }
14 |
15 | // class method because it feeds in this.initialState
16 | combineReducer(obj) {
17 | const sources = Object.entries(obj).map(([k,fn]) => {
18 | let subReducer = fn(obj)
19 | // there are two forms of return the subreducer can have
20 | // straight stream form
21 | // or object form where we need to scan it into string
22 | if (subReducer.source) { // object form
23 | subReducer = scan(subReducer.source,
24 | subReducer.reducer || ((_, n) => n),
25 | this.initialState[k]
26 | )
27 | }
28 | return subReducer
29 | .map(x => ({[k]: x})) // map to its particular namespace
30 | })
31 | const source = merge(...sources)
32 | const reducer = (acc, n) => ({...acc, ...n})
33 | return {source, reducer}
34 | }
35 | }
36 |
37 | // function updateInstance(internalInstance) {
38 | // const parentDom = internalInstance.dom.parentNode;
39 | // const element = internalInstance.element;
40 | // reconcile(parentDom, internalInstance, element);
41 | // }
42 |
43 | export function createPublicInstance(element/*, internalInstance*/) {
44 | const { type, props } = element;
45 | const publicInstance = new type(props);
46 | // publicInstance.__internalInstance = internalInstance;
47 | return publicInstance;
48 | }
49 |
--------------------------------------------------------------------------------
/demos/eleventy.css:
--------------------------------------------------------------------------------
1 | *{margin:0;padding:0}::-moz-selection{background-color:#222;color:#067ada}::selection{background-color:#222;color:#067ada}html{background-color:#222}body{text-align:center;background-color:#067ada;color:#cde4f8;font-family:sans-serif;font-weight:30;font-size:16px;line-height:1.8}@media (min-width: 740px){body{font-size:18px}}.container{margin-left:auto;margin-right:auto;width:90%;text-align:left}h1,h2,h3{color:#fff;font-weight:600;margin-top:2.5em;margin-bottom:1em;line-height:1em}h1{margin-top:0.4em;font-size:4em;line-height:0.9em}@media (min-width: 740px){h1{font-size:5em}}@media (min-width: 1200px){h1{font-size:6em}}p{margin-bottom:1em}.subtitle{margin-top:-3em;margin-bottom:6em}ul,ol{padding-left:1em}a:link,a:visited{color:#222;text-decoration:none;border-bottom:solid 1px #1f87de}a:hover,a:focus{color:#fff;border-bottom:solid 1px #222}.nav{padding-top:3em}.nav li{display:inline}.nav a:link,.nav a:visited{display:inline-block;border-top:solid 1px #9bcaf0;border-bottom-style:none;padding-top:0.8em;padding-bottom:2em;margin-left:0;margin-right:0.7em;width:8em;text-align:left;color:#cde4f8;text-decoration:none}.nav a:hover,.nav a:focus{color:#fff;border-top:solid 1px #222;border-bottom-style:none}.nav small{display:block;font-size:0.7em;color:#9bcaf0}code{font-size:0.8em;background-color:#0971c8;color:#fff;padding-top:2px;padding-bottom:2px;padding-left:4px;padding-right:4px}pre{margin-top:2em;margin-bottom:2em;padding-top:1em;padding-bottom:1em;padding-left:2em;padding-right:2em;line-height:1.2;background-color:#0971c8;border:solid 1px #0e60a3;overflow:auto}pre code{border-style:none;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0}footer{margin-top:6em;padding-top:4em;padding-bottom:6em;border-top:solid 1px #1f87de;font-size:0.7em;color:#6aafe9}footer a:link,footer a:visited{color:#b4d7f4;border-bottom:solid 1px #1a3c59}footer a:hover,footer a:focus{color:#222;border-bottom:solid 1px #fff}
2 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@swyx/reactive-react",
3 | "version": "1.0.2",
4 | "license": "MIT",
5 | "dependencies": {
6 | "change-emitter": "^0.1.6",
7 | "d3": "^5.5.0",
8 | "virtual-dom": "^2.1.1",
9 | "zen-observable": "^0.8.9"
10 | },
11 | "main": "build/reactive-react.umd.js",
12 | "module": "build/reactive-react.es.js",
13 | "files": [
14 | "build"
15 | ],
16 | "devDependencies": {
17 | "ava": "^0.19.0",
18 | "babel-cli": "^6.24.1",
19 | "babel-plugin-transform-class-properties": "^6.24.1",
20 | "babel-plugin-transform-object-rest-spread": "^6.26.0",
21 | "babel-plugin-transform-react-jsx": "^6.24.1",
22 | "babel-preset-env": "^1.3.3",
23 | "babel-register": "^6.24.1",
24 | "browser-env": "^2.0.29",
25 | "npm-run-all": "^4.0.2",
26 | "parcel-bundler": "^1.9.7",
27 | "rollup": "^0.41.6",
28 | "rollup-plugin-babel": "^3.0.7"
29 | },
30 | "scripts": {
31 | "start": "npm run demo:start",
32 | "demo:start": "parcel demos/index.html --no-hmr",
33 | "demo:build": "parcel build demos/index.html -d demos/dist",
34 | "build:deptree": "depcruise --exclude '^node_modules' --output-type dot reactive-react | dot -T svg > dependencygraph.svg",
35 | "build:module": "rollup -c -f es -n reactive-react -o build/reactive-react.es.js",
36 | "build:main": "rollup -c -f umd -n reactive-react -o build/reactive-react.umd.js",
37 | "build": "run-p build:module build:main build:deptree",
38 | "prepublishOnly": "npm run build"
39 | },
40 | "babel": {
41 | "plugins": [
42 | "transform-object-rest-spread",
43 | "transform-class-properties",
44 | [
45 | "transform-react-jsx",
46 | {}
47 | ]
48 | ],
49 | "presets": [
50 | [
51 | "env",
52 | {
53 | "targets": {
54 | "node": "current"
55 | }
56 | }
57 | ]
58 | ]
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/demos/time-slicing/index.js:
--------------------------------------------------------------------------------
1 | /** @jsx createElement */
2 | import {mount, createElement, Component, createHandler} from '../../reactive-react'
3 | import {fromEvent} from '../../reactive-react/swyxjs'
4 | import Observable from 'zen-observable'
5 |
6 | import _ from 'lodash';
7 | import Charts from './Charts';
8 | // import Clock from './Clock';
9 | import './index.css';
10 |
11 | let cachedData = new Map();
12 |
13 | export default class App extends Component {
14 | initialState = ''
15 |
16 | // Random data for the chart
17 | getStreamData(input) {
18 | if (cachedData.has(input)) {
19 | return cachedData.get(input);
20 | }
21 | const multiplier = input.length !== 0 ? input.length : 1;
22 | const complexity =
23 | (parseInt(window.location.search.substring(1), 10) / 100) * 25 || 25;
24 | const data = _.range(5).map(t =>
25 | _.range(complexity * multiplier).map((j, i) => {
26 | return {
27 | x: j,
28 | y: (t + 1) * _.random(0, 255),
29 | };
30 | })
31 | );
32 | cachedData.set(input, data);
33 | return data;
34 | }
35 |
36 | handleChange = createHandler(e => e.target.value)
37 | source() {
38 | return {
39 | source: this.handleChange.$,
40 | reducer: (_, x) => x
41 | }
42 | }
43 |
44 | render(state, stateMap) {
45 | const Wrapper = 'div'
46 | const data = this.getStreamData(state);
47 | return (
48 |
49 |
56 |
57 |
58 |
59 |
60 |
61 |
33 |
Crappy Bird: Match the bird to the target!
34 |
35 |
{ Math.abs(input - target) < 20 ? '👍 Good 👍' : '☠️ LOSING! ☠️'}
36 |
Bird
37 |
Target
38 |
39 | {/*
*/}
40 |
+
41 |
42 |
49 |
56 |
57 |
Bird:
63 | // Target:
*/}
--------------------------------------------------------------------------------
/reactive-react/scheduler.js:
--------------------------------------------------------------------------------
1 | import Observable from 'zen-observable'
2 | import {fromEvent, scan, merge, startWith, switchLatest} from './swyxjs'
3 | import diff from 'virtual-dom/diff';
4 | import patch from 'virtual-dom/patch';
5 | import createElement from 'virtual-dom/create-element';
6 | import { createChangeEmitter } from 'change-emitter'
7 | import { renderStream } from './reconciler'
8 |
9 | export const stateMapPointer = new Map()
10 |
11 | const circuitBreakerflag = !true // set true to enable debugger in infinite loops
12 | let circuitBreaker = -200
13 |
14 | const emitter = createChangeEmitter()
15 | // single UI thread; this is the observable that sticks around and swaps out source
16 | const UIthread = new Observable(observer => {
17 | emitter.listen(x => {
18 | observer.next(x)
19 | })
20 | })
21 | // mount the vdom on to the dom and
22 | // set up the runtime from sources and
23 | // patch the vdom
24 | // ---
25 | // returns an unsubscribe method you can use to unmount
26 | export function mount(rootElement, container) {
27 | // initial, throwaway-ish frame
28 | let {source, instance} = renderStream(rootElement, {}, undefined, stateMapPointer)
29 | let instancePointer = instance
30 | const rootNode = createElement(instance.dom)
31 | const containerChild = container.firstElementChild
32 | if (containerChild) {
33 | container.replaceChild(rootNode,containerChild) // hot reloaded mount
34 | } else {
35 | container.appendChild(rootNode) // initial mount
36 | }
37 | let currentSrc$ = null
38 | let SoS = startWith(UIthread, source) // stream of streams
39 | return SoS.subscribe(
40 | src$ => { // this is the current sourceStream we are working with
41 | if (currentSrc$) console.log('unsub!') || currentSrc$.unsubscribe() // unsub from old stream
42 | if (circuitBreakerflag && circuitBreaker++ > 0) debugger
43 | /**** main */
44 | const source2$ = scan(
45 | src$,
46 | ({instance, stateMap}, nextState) => {
47 | const streamOutput = renderStream(rootElement, instance, nextState, stateMap)
48 | if (streamOutput.isNewStream) { // quick check
49 | const nextSource$ = streamOutput.source
50 | instancePointer = streamOutput.instance
51 | patch(rootNode, diff(instance.dom, instancePointer.dom)) // render to screen
52 | emitter.emit(nextSource$) // update the UI thread; source will switch
53 | } else {
54 | const nextinstance = streamOutput.instance
55 | patch(rootNode, diff(instance.dom, nextinstance.dom)) // render to screen
56 | return {instance: nextinstance, stateMap: stateMap}
57 | }
58 | },
59 | {instance: instancePointer, stateMap: stateMapPointer} // accumulator
60 | )
61 | /**** end main */
62 | currentSrc$ =
63 | source2$
64 | .subscribe()
65 | }
66 | )
67 | }
68 |
--------------------------------------------------------------------------------
/demos/index.js:
--------------------------------------------------------------------------------
1 | /** @jsx createElement */
2 | import {mount, createElement, Component, createHandler} from '../reactive-react'
3 | import {Interval, scan, startWith, merge, mapToConstant} from '../reactive-react/swyxjs'
4 | import Observable from 'zen-observable'
5 |
6 | import {Timer, Blink, Counter, Counters, CrappyBird, Source, SourceSwitching, CrazyCharts} from './components'
7 |
8 | import './eleventy.css'
9 | import './custom.css'
10 |
11 | class App extends Component {
12 | initialState = "counter"
13 | router = createHandler(e => e.target.name)
14 | source($) {
15 | return this.router.$
16 | }
17 | render(state) {
18 | const Display = {
19 | 'counter': () => ,
20 | // 'timer': () => ,
21 | 'blink': () => ,
22 | 'crappy': () => ,
23 | 'charts': () => ,
24 | }[state] || (() => )
25 |
26 | function selectedLink(name) {
27 | return {
28 | name,
29 | style: state === name && {color: 'yellow'}
30 | }
31 | }
32 | return
33 |
34 |
reactive-react Demo: {state}
35 |
41 |
42 |
61 | {Display()}
62 |
65 |
91 | //
103 | //
40 | {name}: {state}
41 |
42 |
43 |
44 | }
45 | }
46 |
47 | // taking info from event handler
48 | class Echo extends Component {
49 | handler = createHandler(e => e.target.value)
50 | initialState = 'hello world'
51 | source($) {
52 | const source = this.handler.$
53 | const reducer = (acc, n) => n
54 | return {source, reducer}
55 | }
56 | render(state, prevState) {
57 | return
58 |
59 | {state}
60 |
61 | }
62 | }
63 |
64 | class Timer extends Component {
65 | // demonstrate interval time
66 | initialState = 0
67 | source($) {
68 | const reducer = x => x + 1 // count up
69 | const source = Interval(this.props.ms) // tick every second
70 | // source returns an observable
71 | return scan(source, reducer, 0) // from zero
72 | }
73 | render(state, stateMap) {
74 | return number of seconds elapsed: {state}
75 | }
76 | }
77 |
78 | class Blink extends Component {
79 | // more fun time demo
80 | initialState = true
81 | source($) {
82 | const reducer = x => !x
83 | // tick every ms milliseconds
84 | const source = Interval(this.props.ms)
85 | // source can also return an observable
86 | return scan(source, reducer, true)
87 | }
88 | render(state) {
89 | const style = {display: state ? 'block' : 'none'}
90 | return Bring back the blink tag!
91 | }
92 | }
93 |
94 | class CrappyBird extends Component {
95 | // merging time and counter
96 | initialState = {
97 | input: 50,
98 | target: 50
99 | }
100 | increment = createHandler(e => 3)
101 | source($) {
102 | return this.combineReducer({
103 | input: () => {
104 | const source = merge(this.increment.$, Interval(200,-1))
105 | const reducer = (acc, x) => Math.max(0,acc + x)
106 | return {source, reducer}
107 | },
108 | target: () => {
109 | const source = Interval(200)
110 | const reducer = (acc) => {
111 | const int = acc + Math.random() * 8 - 4
112 | return int - (int-50)/30 // bias toward 50
113 | }
114 | return {source, reducer}
115 | }
116 | })
117 | }
118 | render(state, stateMap) {
119 | const {input, target} = state
120 | return
121 |
122 |
Crappy bird
123 |
Bird:
124 |
Target:
125 |
132 |
133 |
134 |
135 | }
136 | function Source() {
137 | // demonstrate ability to switch sources
138 | return }
140 | right={}
141 | />
142 | }
143 |
144 | class SourceSwitching extends Component {
145 | initialState = true
146 | toggle = createHandler()
147 | source($) {
148 | const source = this.toggle.$
149 | const reducer = x => !x
150 | return {source, reducer}
151 | }
152 | render(state, stateMap) {
153 | return
154 |
155 | {
156 | state ? this.props.left : this.props.right
157 | }
158 |
159 | }
160 | }
161 |
162 | ```
163 |
164 | # Local development
165 |
166 | `yarn run build` and then `npm publish` (but its under my namespace @swyx/reactive-react cos someone else has the generic one)
167 |
168 | Here is the project structure:
169 |
170 | 
171 |
--------------------------------------------------------------------------------
/demos/time-slicing/Charts.js:
--------------------------------------------------------------------------------
1 | /** @jsx createElement */
2 | import {mount, createElement, Component, createHandler} from '../../reactive-react'
3 | import * as d3 from "d3";
4 |
5 | const colors = ['#fff489', '#fa57c1', '#b166cc', '#7572ff', '#69a6f9'];
6 | const containerWidth = 565 / 2
7 | const containerHeight = 400 / 2
8 |
9 |
10 | export default class Charts extends Component {
11 | render() {
12 | const data = this.props.data;
13 | const container = document.getElementById("demo")
14 | if (!container) return Type something
// initial load only
15 | bottomChart(data)
16 | leftChart(data)
17 | rightChart(data)
18 | return (
19 |
20 |
number of datapoints: {data[0].length * 5}
21 |
25 |
33 |