Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

Eddy Wilson eddyw

🏠
Working from home
  • Rspective
  • Shanxi, People's Republic of China
  • @eddyw_dev
View GitHub Profile
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>
@eddyw
eddyw / index.js
Created Feb 5, 2018
Type-checking Redux State with propTypes (without React)
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
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
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
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,
}]
@eddyw
eddyw / example.js
Last active Feb 5, 2018
Type-checking Redux State with propTypes (without React)
View example.js
import propTypes from 'prop-types'
const pTypes = {
name: propTypes.string.isRequired,
age: propTypes.number.isRequired,
}
const obj = {
name: 16,
age: 'John',
}
@eddyw
eddyw / map-component.js
Last active Nov 11, 2017
Map Component
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>
@eddyw
eddyw / map-component.js
Last active Nov 11, 2017
Map Component
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) {
@eddyw
eddyw / map-component.js
Last active Nov 11, 2017
Map Component
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>
)