Socket
Socket
Sign inDemoInstall

cycle-react

Package Overview
Dependencies
1
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 5.0.0-alpha.0 to 5.0.0

.vscode/launch.json

92

CHANGELOG.md
# Changelog
## 5.0.0
Breaking change: Custom events is now subscribed only when listener
props is provided upon componentDidMountEvent [#37]
For example, if you have following component:
```
<MyTimer />
```
And you add the event listener after the component has mounted:
```
<MyTimer onTick={listener('x')} />
```
The `onTick` event will be no longer raised for this cycle-react version.
Breaking change: `mixin` is removed along with the usage of `createClass`
Breaking change: `self` and `renderScheduler` have been removed
As a result, `lifecycles` parameter has moved to the third parameter of
`definitionFn`. For handling [refs](https://facebook.github.io/react/docs/refs-and-the-dom.html),
please use `interactions` for generating callback function.
See ["Working with React"](/docs/working-with-react.md) for further details.
Breaking change: `cycle-react` is now native ES6
Use any transplier if you need backward compatibility for `cycle-react`.
If you are using [Babel](https://babeljs.io/) already you should have
no problem.
In addition, the following features are not used in cycle-react to ensure
minimum dependency and good efficiency for all browsers.
- Async
- Iterators and generators
- Symbol
- for..of
- Destructuring assignment
- Default, spread and rest parameters
- Promise
You can still use any of the features above in your project with cycle-react.
In fact, using destructuring assignment with cycle-react is recommended.
- Preview: View component
View component is a new way to define cycle-react components by divorcing view
function from the component. For example, the original component function
allows you to define the component like this:
```
component('Hello', (interactions) =>
interactions.get('OnNameChanged')
.map(ev => ev.target.value)
.startWith('')
.map(name =>
<div>
<label>Name:</label>
<input type="text" onChange={interactions.listener('OnNameChanged')} />
<hr />
<h1>Hello {name}</h1>
</div>
)
);
```
New view component extracts the view function out of component definition:
```
viewComponent(
'Hello',
(interactions) =>
interactions.get('OnNameChanged')
.map(ev => ev.target.value)
.startWith(''),
// View function
(name, {OnNameChanged}) => (
<div>
<label>Name:</label>
<input type="text" onChange={OnNameChanged} />
<hr />
<h1>Hello {name}</h1>
</div>
)
);
```
## 4.0.0

@@ -4,0 +96,0 @@

7

CONTRIBUTING.md

@@ -6,10 +6,3 @@ First of all, thank you for contributing. It’s appreciated.

3. Run `npm test` to lint and test. Don’t commit before fixing all errors and warnings.
- Use `npm run test-node` to run a subset of Mocha tests specific for Node.js.
- Use `npm run test-browser` to run a subset of Mocha tests specific to browsers.
- Note: `npm test-browser` will attempt to open a tab in Chrome.
4. Reference the issue’s number in your commit. E.g.: “Did this #12”
5. Make a pull request.
Prior to v1.0, the versions will follow the convention: improvements that break backwards
compatibility increment the minor number, any other improvements will increment the patch
number. After v1.0, we will follow [http://semver.org/](semver).

0

docs/api.md

@@ -0,0 +0,0 @@ # Cycle-React API

0

docs/interactions.md

@@ -0,0 +0,0 @@ # Interactions API

0

docs/README.md

@@ -0,0 +0,0 @@ ### Documentations

116

docs/working-with-react.md

@@ -26,3 +26,3 @@ # Working with React

// Define event for the component
let MyElement = Cycle.component('MyElement', function definition() {
const MyElement = Cycle.component('MyElement', function definition() {
return {

@@ -42,22 +42,2 @@ view: Rx.Observable.just(<h3 className="myelement">My Element</h3>),

## this
The third parameter of `definitionFn` is `self`, which represents `this` of
your created React class.
Normally, you don't want to use this. However, it might be required for
working with some React components.
Example:
```js
let Navigation = require('react-router').Navigation;
let options = {
mixins: [Navigation]
};
let MyElement = Cycle.component('MyElement', function (_1, _2, self) {
return Rx.Observable.just(<div onClick={() => self.goBack()}>Go back</div>);
}, options);
```
## Lifecycle events

@@ -67,3 +47,3 @@

[lifecycle events](https://facebook.github.io/react/docs/component-specs.html)
through the forth parameter `lifecycle` for definitionFn.
through the third parameter `lifecycle` for definitionFn.

@@ -79,10 +59,8 @@ The key for the lifecycle event is the lifecycle name itself.

```js
let MyElement = Cycle.component('MyElement', function (interactions, props, self, lifecycles) {
const MyElement = Cycle.component('MyElement', function (interactions, props, lifecycles) {
// Get the observable for componentDidMount
let componentDidMountObservable = lifecycles.componentDidMount;
const componentDidMountObservable = lifecycles.componentDidMount;
return componentDidMountObservable.map(() => {
// Find the DOM node from "self"
let node = ReactDOM.findDOMNode(self);
// ...
// Event handler for componentDidMountEvent
return <div>The element</div>;

@@ -104,73 +82,23 @@ });

In order to use refs in React, your JSX elements must be created within a React.render method. However, Observables
do not, by default, get invoked within this render method, making refs unusable. There are two approaches to fix:
Use [Interactions API](/docs/interactions.md) to generate callback function for
[refs](https://facebook.github.io/react/docs/refs-and-the-dom.html).
1. Return an Observable of functions containing the ReactElements.
```js
let MyElement = Cycle.component('MyElement', function (interactions, props) {
return props.map(() => (
// Return a wrapper function instead of a raw ReactElement.
() => <div ref="top-div"></div>
));
});
```
2. Use the render scheduler. Use a observeOn(renderScheduler) in order to cause the remaining chained observables
to be invoked within the component's render method.
NOTE: Using this scheduler to send events or cause state
changes in another react element will throw an error as per React's restrictions
(no setState during any batched rendering). It's best to use this scheduler only for rendering elements.
```js
let MyElement = Cycle.component('MyElement', function (interactions, props, self, lifecycles, renderScheduler) {
return props
.observeOn(renderScheduler)
.map(() => <div ref="top-div"></div>);
}, {renderScheduler: true});
```
The advantage of the latter approach is that you can use the scheduler to compose different Observable streams
more easily. This is useful, if say, one part of your DOM is more expensive to build than others, so you want
to use separate Observables to compose it.
```js
let MyElement = Cycle.component('MyElement', function (interactions, props, self, lifecycles, renderScheduler) {
var inner$ = props.get('innerText')
.observeOn(renderScheduler)
.map((p) => <div ref="inner">{p.innerText}</div>);
return props.get('outerText')
.combineLatest(inner$, (outerText, inner) => <div>{outerText} {inner}</div>);
}, {renderScheduler: true});
```
The other advantage of using the scheduler is in 'delaying' actions until after refs have been rendered.
```js
let MyElement = Cycle.component('MyElement', function (interactions, props, self, lifecycles, renderScheduler) {
return props.observeOn(renderScheduler).map(() => {
renderScheduler.schedule(null, function () {
self.refs.theref; // this is now set. actions that are scheduled during a render will batch immediately after.
});
return <div ref="theref"></div>
});
}, {renderScheduler: true});
```
## Mixins
Working with mixins could make your Cycle-React apps written in a
less-functional style. However, it might be needed if you want to take
advantage of other React components.
`opts.mixins` is the mixins property used by React.createClass in
Cycle-React internally. This value must be an array.
Example:
```js
let options = {
mixins: []
};
let MyElement = Cycle.component('MyElement', function () {
// ...
}, options);
const MyElement = Cycle.component(
'MyElement',
(interactions) =>
interactions
.get('onRefUpdate')
// Handling with ref callback
// Function parameter is the DOM element
.do((textInput) => textInput.focus())
.startWith('')
.map(() => (
// Listening ref with interactions
<input type="text"
ref={interactions.listener('onRefUpdate')} />
))
);
```

@@ -177,0 +105,0 @@

15

index.js

@@ -1,10 +0,9 @@

'use strict';
var createComponent = require('./src/component');
var createTemplateComponent = require('./src/template-component');
var createAdapter = require('./src/rx/adapter');
var React = require('react');
const createComponent = require('./src/component');
const createTemplateComponent = require('./src/template-component');
const createAdapter = require('./src/rx/adapter');
const React = require('react');
var RxAdapter = createAdapter();
const RxAdapter = createAdapter();
var Cycle = {
const Cycle = {
/**

@@ -16,3 +15,3 @@ * The component's definition function.

* @param {Object} props - The observable for React props.
* @param {Object} [self] - "this" object for the React component.
* @param {Object} [lifecycles] - lifecycle observables for the React component.
* @returns {}

@@ -19,0 +18,0 @@ */

0

jsconfig.json

@@ -0,0 +0,0 @@ {

15

native.js

@@ -1,7 +0,9 @@

'use strict';
var createReactClass = require('./src/create-react-class');
var createAdapter = require('./src/rx/adapter');
var React = require('react-native');
const createComponent = require('./src/component');
const createTemplateComponent = require('./src/template-component');
const createAdapter = require('./src/rx/adapter');
const React = require('react-native');
var Cycle = {
const RxAdapter = createAdapter();
const Cycle = {
/**

@@ -39,5 +41,6 @@ * The component's definition function.

*/
component: createReactClass(React, createAdapter())
component: createComponent(React, RxAdapter),
viewComponent: createTemplateComponent(React, RxAdapter)
};
module.exports = Cycle;

48

package.json
{
"name": "cycle-react",
"version": "5.0.0-alpha.0",
"version": "5.0.0",
"author": {

@@ -25,5 +25,2 @@ "name": "pH200",

"main": "index.js",
"dependencies": {
"inherits": "^2.0.1"
},
"peerDependencies": {

@@ -33,35 +30,28 @@ "rx": "*"

"devDependencies": {
"babel": "^5.8.23",
"babel-eslint": "^4.1.3",
"babelify": "^6.4.0",
"browserify": "^11.2.0",
"cheerio": "~0.19.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babelify": "^7.3.0",
"browserify": "^14.3.0",
"cuid": "^1.3.8",
"eslint": "^1.7.3",
"express": "^4.13.3",
"immutable": "^3.7.5",
"mocha": "^2.3.3",
"react": "~0.14.0",
"react-dom": "^0.14.3",
"rx": "4.0.7",
"testem": "~0.9.8",
"uglify-js": "^2.5.0"
"envify": "^4.0.0",
"eslint": "^3.19.0",
"express": "^4.15.2",
"immutable": "^3.8.1",
"jest": "^19.0.2",
"prop-types": "^15.5.4",
"react": "^15.5.3",
"react-dom": "^15.5.3",
"react-test-renderer": "^15.5.3",
"rx": "4.1.0"
},
"engines": {
"node": ">=0.10.0"
"node": ">=6.9.0"
},
"scripts": {
"lint": "eslint src examples test",
"test-common": "mocha --compilers js:babel/register test/common",
"pretest-onlynode": "mkdir -p test/node",
"test-onlynode": "mocha --compilers js:babel/register test/node",
"test-node": "npm run test-common && npm run test-onlynode",
"test-browser": "testem",
"test": "npm run lint && npm run test-node && npm run test-browser -- ci -l PhantomJS",
"travis-test": "testem launchers && npm run lint && npm run test-node && testem ci -s Chromium",
"browserify": "NODE_ENV=production browserify index.js --standalone Cycle -o dist/cycle-react.js",
"uglify": "uglifyjs dist/cycle-react.js -o dist/cycle-react.min.js",
"dist": "mkdir -p dist && npm run browserify && npm run uglify",
"test-jest": "jest",
"test": "npm run lint && jest",
"travis-test": "npm run lint && jest --verbose",
"examples": "node examples/web/server.js"
}
}

4

README.md

@@ -80,3 +80,3 @@ # Cycle-React

// by "React.createElement".
let Counter = Cycle.component('Counter', function (interactions, props) {
const Counter = Cycle.component('Counter', function (interactions, props) {
return props.get('counter').map(counter =>

@@ -87,3 +87,3 @@ <h3>Seconds Elapsed: {counter}</h3>

let Timer = Cycle.component('Timer', function () {
const Timer = Cycle.component('Timer', function () {
return Rx.Observable.interval(1000).map(i =>

@@ -90,0 +90,0 @@ <Counter counter={i} />

63

src/component.js

@@ -1,29 +0,23 @@

var createReactClass = require('./create-react-class');
const createReactClass = require('./create-react-class');
function digestDefinitionFnOutput(output) {
var newValue$;
var dispose;
var customEvents;
if (output && output.hasOwnProperty('view') &&
typeof output.view.subscribe === 'function')
{
newValue$ = output.view;
dispose = output.dispose;
customEvents = output.events;
} else if (output && typeof output.subscribe === 'function') {
newValue$ = output;
} else {
throw new Error(
'definitionFn given to render or component must return an ' +
'Observable of React elements, or an object containing such ' +
'Observable named as `view`');
function digestDefinitionFnOutput(output, isObservable) {
if (output && output.hasOwnProperty('view') && isObservable(output.view)) {
return {
newValue$: output.view,
dispose: output.dispose,
customEvents: output.events
};
}
return {
newValue$: newValue$,
dispose: dispose,
customEvents: customEvents || {}
};
if (output && isObservable(output)) {
return {
newValue$: output
};
}
throw new Error(
'definitionFn given to render or component must return an ' +
'Observable of React elements, or an object containing such ' +
'Observable named as `view`');
}
function createCycleComponent(definitionFn, interactions, propsSubject$) {
function createCycleComponent(isObservable, definitionFn, interactions, propsSubject$) {
return digestDefinitionFnOutput(

@@ -33,15 +27,16 @@ definitionFn(

propsSubject$
)
),
isObservable
);
}
function createRenderer(React, rootTagName) {
return function render() {
var vtree = this.state ? this.state.newValue : null;
if (vtree) {
return vtree;
}
return React.createElement(rootTagName);
};
function createRenderer(React, rootTagName) {
return function render() {
var vtree = this.state ? this.state.newValue : null;
if (vtree) {
return vtree;
}
return React.createElement(rootTagName);
};
}

@@ -48,0 +43,0 @@

146

src/create-react-class.js

@@ -1,5 +0,3 @@

var util = require('./util');
var subscribeEventObservables = util.subscribeEventObservables;
var createLifecycleSubjects = util.createLifecycleSubjects;
var makeInteractions = require('./interactions');
const {subscribeEventObservables, createLifecycleSubjects} = require('./util');
const makeInteractions = require('./interactions');

@@ -13,7 +11,10 @@ function createReactClass(

) {
var makePropsObservable = Adapter.makePropsObservable;
var createEventSubject = Adapter.createEventSubject;
var CompositeDisposable = Adapter.CompositeDisposable;
var createDisposable = Adapter.createDisposable;
var subscribe = Adapter.subscribe;
const {
makePropsObservable,
createEventSubject,
CompositeDisposable,
createDisposable,
subscribe,
isObservable
} = Adapter;

@@ -33,3 +34,4 @@ return function component(displayName,

}
var options = (
const options = (
// option isTemplateComponent (y): 4th argument (n): 3rd argument

@@ -39,43 +41,40 @@ isTemplateComponent ? componentOptions : templateFn

// The option for the default root element type.
var rootTagName = options.rootTagName || 'div';
const rootTagName = options.rootTagName || 'div';
// Use React.PureComponent by default (>= 15.3.0)
const PureComponent = React.PureComponent || /* istanbul ignore next */ React.Component;
var reactClassProto = {
displayName: displayName,
getInitialState: function getInitialState() {
this.hotLoaderHasMounted = false;
return {
class ReactClass extends PureComponent {
constructor(props) {
super(props);
this.hasNewValue = false;
this.state = {
newValue: null
};
},
_subscribeCycleComponent: function _subscribeCycleComponent() {
var self = this;
this.hasNewValue = false;
}
_subscribeCycleComponent() {
this.disposable = new CompositeDisposable();
var propsSubject$ = makePropsObservable(this.props);
this.propsSubject$ = propsSubject$;
var interactions = makeInteractions(createEventSubject);
this.interactions = interactions;
var lifecycles = isTemplateComponent ?
this.propsSubject$ = makePropsObservable(this.props);
this.interactions = makeInteractions(createEventSubject);
this.lifecycles = isTemplateComponent ?
createLifecycleSubjects(createEventSubject) :
null;
this.lifecycles = lifecycles;
var cycleComponent = createCycleComponent(
this.cycleComponent = createCycleComponent(
isObservable,
definitionFn,
interactions,
propsSubject$,
lifecycles,
this
this.interactions,
this.propsSubject$,
this.lifecycles
);
this.cycleComponent = cycleComponent;
var newValue$ = cycleComponent.newValue$;
var subscription = subscribe(newValue$, function onNextValue(newValue) {
self.hasNewValue = true;
self.setState({newValue: newValue});
});
const subscription = subscribe(
this.cycleComponent.newValue$,
(newValue) => {
this.hasNewValue = true;
this.setState({newValue: newValue})
});
this.disposable.add(propsSubject$);
this.disposable.add(this.propsSubject$);
this.disposable.add(subscription);
var cycleComponentDispose = cycleComponent.dispose;
const cycleComponentDispose = this.cycleComponent.dispose;
if (cycleComponentDispose) {

@@ -88,4 +87,4 @@ if (typeof cycleComponentDispose === 'function') {

}
},
_unsubscribeCycleComponent: function _unsubscribeCycleComponent() {
}
_unsubscribeCycleComponent() {
if (this.propsSubject$) {

@@ -97,5 +96,5 @@ this.propsSubject$.onCompleted();

}
},
_subscribeCycleEvents: function _subscribeCycleEvents() {
var subscriptions = subscribeEventObservables(
}
_subscribeCycleEvents() {
const subscriptions = subscribeEventObservables(
this.cycleComponent.customEvents,

@@ -106,12 +105,12 @@ this,

if (subscriptions.length > 0) {
for (var i = 0; i < subscriptions.length; i++) {
for (let i = 0; i < subscriptions.length; i++) {
this.disposable.add(subscriptions[i]);
}
}
},
shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
}
shouldComponentUpdate(nextProps, nextState) {
// Only care about the state since the props have been observed.
return this.state !== nextState;
},
componentWillMount: function componentWillMount() {
}
componentWillMount() {
// componentWillMount is called for both client and server

@@ -123,11 +122,10 @@ // https://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount

}
},
componentDidMount: function componentDidMount() {
}
componentDidMount() {
this._subscribeCycleEvents();
this.hotLoaderHasMounted = true;
if (isTemplateComponent) {
this.lifecycles.componentDidMount.onNext();
}
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
}
componentWillReceiveProps(nextProps) {
this.propsSubject$.onNext(nextProps);

@@ -137,14 +135,14 @@ if (isTemplateComponent) {

}
},
componentWillUpdate: function componentWillUpdate(nextProps) {
}
componentWillUpdate(nextProps) {
if (isTemplateComponent) {
this.lifecycles.componentWillUpdate.onNext(nextProps);
}
},
componentDidUpdate: function componentDidUpdate(prevProps) {
}
componentDidUpdate(prevProps) {
if (isTemplateComponent) {
this.lifecycles.componentDidUpdate.onNext(prevProps);
}
},
componentWillUnmount: function componentWillUnmount() {
}
componentWillUnmount() {
// componentWillUnmount is not being called for the server context

@@ -161,28 +159,12 @@ if (isTemplateComponent) {

this._unsubscribeCycleComponent();
},
render: createRenderer(React, rootTagName, templateFn)
};
}
}
ReactClass.prototype.render = createRenderer(React, rootTagName, templateFn);
if (Array.isArray(options.mixins)) {
reactClassProto.mixins = options.mixins;
}
ReactClass.displayName = displayName;
if (options.propTypes) {
reactClassProto.propTypes = options.propTypes;
ReactClass.propTypes = options.propTypes;
}
// Override forceUpdate for react-hot-loader
if (options._testForceHotLoader ||
(!options.disableHotLoader && module.hot)) {
reactClassProto.forceUpdate = function hotForceUpdate(callback) {
if (this.hotLoaderHasMounted) {
this._unsubscribeCycleComponent();
this._subscribeCycleComponent();
this._subscribeCycleEvents();
}
if (callback) {
callback();
}
};
}
return React.createClass(reactClassProto);
return ReactClass;
};

@@ -189,0 +171,0 @@ }

27

src/interactions.js

@@ -1,4 +0,3 @@

/* globals process */
function makeInteractions(createEventSubject) {
var subjects = {};
const subjects = {};

@@ -16,4 +15,5 @@ function get(name) {

function listener(name) {
var eventSubject = subjects[name];
const eventSubject = subjects[name];
if (!eventSubject && process.env.NODE_ENV !== 'production') {
/* eslint-disable no-console */
if (typeof console !== 'undefined') {

@@ -26,13 +26,10 @@ console.warn(

}
if (!eventSubject) {
eventSubject = get(name);
}
return eventSubject.onEvent;
return (eventSubject || get(name)).onEvent;
}
function bindListeners(interactionTypes) {
var result = {};
var names = Object.keys(interactionTypes);
for (var i = 0; i < names.length; i++) {
var name = names[i];
const result = {};
const names = Object.keys(interactionTypes);
for (let i = 0; i < names.length; i++) {
const name = names[i];
result[name] = listener(interactionTypes[name]);

@@ -44,6 +41,6 @@ }

function _getCurrentListeners() {
var result = {};
var names = Object.keys(subjects);
for (var i = 0; i < names.length; i++) {
var name = names[i];
const result = {};
const names = Object.keys(subjects);
for (let i = 0; i < names.length; i++) {
const name = names[i];
result[name] = listener(name);

@@ -50,0 +47,0 @@ }

11

src/rx/adapter.js

@@ -1,4 +0,4 @@

var Rx = require('rx');
var createEventSubject = require('./event-subject');
var makePropsObservable = require('./props');
const Rx = require('rx');
const createEventSubject = require('./event-subject');
const makePropsObservable = require('./props');

@@ -11,6 +11,9 @@ module.exports = function createAdapter() {

createDisposable: Rx.Disposable.create,
subscribe: function subscribe(observable, onNext) {
subscribe(observable, onNext) {
return observable.subscribe(onNext);
},
isObservable(observable) {
return observable && typeof observable.subscribe === 'function';
}
};
};

9

src/rx/event-subject.js

@@ -1,6 +0,5 @@

'use strict';
var Rx = require('rx');
const Rx = require('rx');
function createEventSubject() {
var subject = new Rx.Subject();
module.exports = function createEventSubject() {
const subject = new Rx.Subject();
subject.onEvent = function onEvent(value) {

@@ -11,3 +10,1 @@ subject.onNext(value);

}
module.exports = createEventSubject;

7

src/rx/props.js

@@ -1,3 +0,2 @@

'use strict';
var Rx = require('rx');
const Rx = require('rx');

@@ -8,3 +7,3 @@ function isEqual(x, y) {

function makePropsObservable(props) {
module.exports = function makePropsObservable(props) {
var propsSubject$ = new Rx.BehaviorSubject(props);

@@ -24,3 +23,1 @@ propsSubject$.get = function getProp(propName, comparer) {

}
module.exports = makePropsObservable;

57

src/template-component.js

@@ -1,36 +0,23 @@

var createReactClass = require('./create-react-class');
const createReactClass = require('./create-react-class');
function digestDefinitionFnOutput(output) {
var newValue$;
var dispose;
var customEvents;
if (output && output.hasOwnProperty('viewData') &&
typeof output.viewData.subscribe === 'function')
{
newValue$ = output.viewData;
dispose = output.dispose;
customEvents = output.events;
} else if (output && typeof output.subscribe === 'function') {
newValue$ = output;
} else {
throw new Error(
'definitionFn given to render or component must return an ' +
'Observable of values, or an object containing such ' +
'Observable named as `viewData`');
function digestDefinitionFnOutput(output, isObservable) {
if (output && output.hasOwnProperty('viewData') && isObservable(output.viewData)) {
return {
newValue$: output.viewData,
dispose: output.dispose,
customEvents: output.events
};
}
return {
newValue$: newValue$,
dispose: dispose,
customEvents: customEvents || {}
};
if (output && isObservable(output)) {
return {
newValue$: output
};
}
throw new Error(
'definitionFn given to render or component must return an ' +
'Observable of values, or an object containing such ' +
'Observable named as `viewData`');
}
function RefsGetter(componentSelf) {
this.componentSelf = componentSelf;
}
RefsGetter.prototype.get = function get(name) {
return this.componentSelf.refs[name];
};
function createCycleComponent(definitionFn, interactions, propsSubject$, lifecycles, self) {
function createCycleComponent(isObservable, definitionFn, interactions, propsSubject$, lifecycles) {
return digestDefinitionFnOutput(

@@ -40,5 +27,5 @@ definitionFn(

propsSubject$,
new RefsGetter(self),
lifecycles
)
),
isObservable
);

@@ -49,4 +36,4 @@ }

return function render() {
var viewData = this.state ? this.state.newValue : null;
var hasNewValue = this.hasNewValue;
const viewData = this.state ? this.state.newValue : null;
const hasNewValue = this.hasNewValue;

@@ -53,0 +40,0 @@ if (hasNewValue) {

29

src/util.js

@@ -16,3 +16,3 @@ 'use strict';

if (self.props) {
var eventHandler = self.props[eventName];
const eventHandler = self.props[eventName];
if (eventHandler) {

@@ -26,17 +26,22 @@ eventHandler(evData);

module.exports = {
subscribeEventObservables: function subscribeEventObservables(events, self, subscribe) {
var eventNames = Object.keys(events);
var eventSubscriptions = [];
for (var i = 0; i < eventNames.length; i++) {
var eventName = eventNames[i];
var eventObs = events[eventName];
eventSubscriptions.push(
subscribe(eventObs, makeDispatchFunction(eventName, self))
);
subscribeEventObservables(events, self, subscribe) {
if (events) {
const eventNames = Object.keys(events);
const eventSubscriptions = [];
for (let i = 0; i < eventNames.length; i++) {
const eventName = eventNames[i];
const eventObs = events[eventName];
if (self.props[eventName]) {
eventSubscriptions.push(
subscribe(eventObs, makeDispatchFunction(eventName, self))
);
}
}
return eventSubscriptions;
}
return eventSubscriptions;
return [];
},
createLifecycleSubjects: function createLifecycleSubjects(createEventSubject) {
createLifecycleSubjects(createEventSubject) {
return new LifecycleSubjects(createEventSubject);
}
};
.testem.json
dist/cycle-react.js
dist/cycle-react.min.js
dist/react-rx.js
dist/react-rx.min.js
src/rx/react-render-scheduler.js
test/.eslintrc
test/browser/component.js
test/browser/fixtures/issue-89.js
test/browser/index.js
test/browser/lib/apply-to-dom.js
test/browser/lib/cycle.js
test/browser/render.js
test/browser/template-component.js
test/common/cycle.js
test/common/test-create-react-class.js
test/common/test-event-subject.js
test/common/test-interactions.js
test/common/test-props.js
test/common/test-render-scheduler.js
test/node/html-render.js
.editorconfig

Sorry, the diff of this file is not supported yet

.eslintignore

Sorry, the diff of this file is not supported yet

.eslintrc

Sorry, the diff of this file is not supported yet

.npmignore

Sorry, the diff of this file is not supported yet

.travis.yml

Sorry, the diff of this file is not supported yet

LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc