eddyw
/ index.html
Created Jul 6, 2018
— forked from justinjmoses/index.html
es6 proxy #jsbench #jsperf (https://jsbench.github.io/#531652a2edfa806a5014558bafe6eb0e) #jsbench #jsperf
View index.html
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title>es6 proxy #jsbench #jsperf</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script> | |
| <script src="./suite.js"></script> | |
| </head> | |
| <body> | |
| <h1>Open the console to view the results</h1> |
View index.js
| import TodoReducer from 'TodoReducer' | |
| import { createStore } from 'redux' | |
| const store = createStore(TodoReducer) | |
| store.dispatch({ | |
| type: 'ADD_TODO', | |
| payload: { | |
| title: 'Example', | |
| done: 1, |
eddyw
/ TodoReducer.js
Last active Feb 5, 2018
Type-checking Redux State with propTypes (without React)
View TodoReducer.js
| import withPropTypes from 'withPropTypes.js' | |
| const ItemSchema = { | |
| id: propTypes.number, | |
| done: propTypes.bool.isRequired, | |
| title: propTypes.string.isRequired, | |
| } | |
| const TodoReducerSchema = propTypes.arrayOf( | |
| propTypes.shape(ItemSchema).isRequired |
eddyw
/ withPropTypes.js
Created Feb 5, 2018
Type-checking Redux State with propTypes (without React)
View withPropTypes.js
| const withPropTypes = (name, propTypesSchema) => reducer => { | |
| if (process.env.NODE_ENV === 'development') { | |
| return (state, action) => { | |
| const result = reducer(state, action) | |
| propTypes.checkPropTypes( | |
| { state: propTypesSchema }, | |
| { state: result }, | |
| 'property', | |
| name, |
eddyw
/ TodoReducer.js
Last active Feb 5, 2018
Type-checking Redux State with propTypes (without React)
View TodoReducer.js
| let id = 0 | |
| const TodoReducer = (state = [], action) => { | |
| switch (action.type) { | |
| case 'ADD_TODO': | |
| return [...state, { | |
| id: ++id, | |
| title: action.payload.title, | |
| done: action.payload.done, | |
| }] |
View example.js
| import propTypes from 'prop-types' | |
| const pTypes = { | |
| name: propTypes.string.isRequired, | |
| age: propTypes.number.isRequired, | |
| } | |
| const obj = { | |
| name: 16, | |
| age: 'John', | |
| } |
View map-component.js
| const Item = ({ title, completed, check, style, className }) => ( | |
| <li className={className}> | |
| <span>{check} ({String(completed)}) </span> | |
| <span style={style}>{title}</span> | |
| </li> | |
| ) | |
| const map = item => ({ | |
| ...item, | |
| check: item.completed? 'o' : 'x', | |
| style: item.completed? { color: 'gree' } : { color: 'red' }, |
View map-component.js
| const completedStyle = { color: 'green' } | |
| const uncompletedStyle = { color: 'red' } | |
| const Item = ({ title, completed }) => ( | |
| <li> | |
| <span>{completed ? 'o' : 'x'} </span> | |
| <span style={completed ? completedStyle : uncompletedStyle}>{title}</span> | |
| </li> | |
| ) | |
| const TodoList = () => ( | |
| <ul> |
View map-component.js
| class MapArray extends React.Component { | |
| static propTypes = { | |
| from: propTypes.array.isRequired, | |
| children: propTypes.element.isRequired, | |
| map: propTypes.func, | |
| } | |
| static defaultProps = { | |
| map: e => e, | |
| } | |
| shouldComponentUpdate(nextProps) { |
View map-component.js
| const completedStyle = { color: 'green' } | |
| const uncompletedStyle = { color: 'red' } | |
| const Item = ({ title, completed }) => ( | |
| <li> | |
| <span>{completed ? 'o' : 'x'} </span> | |
| <span style={completed ? completedStyle : uncompletedStyle}>{title}</span> | |
| </li> | |
| ) |
NewerOlder