Skip to content

Commit

Permalink
docs: add decorators example
Browse files Browse the repository at this point in the history
  • Loading branch information
gregberge committed Dec 27, 2017
1 parent 068de59 commit ae129fe
Show file tree
Hide file tree
Showing 8 changed files with 4,210 additions and 0 deletions.
4 changes: 4 additions & 0 deletions examples/decorators/.babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"presets": ["env", "react"],
"plugins": ["react-hot-loader/babel", "transform-class-properties", "transform-decorators-legacy"]
}
1 change: 1 addition & 0 deletions examples/decorators/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
24 changes: 24 additions & 0 deletions examples/decorators/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
"name": "hot-decorators",
"version": "1.0.0",
"scripts": {
"start": "webpack-dev-server --hot"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
"dependencies": {
"autobind-decorator": "^2.1.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-hot-loader": "next"
}
}
12 changes: 12 additions & 0 deletions examples/decorators/src/App.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from 'react'
import { hot } from 'react-hot-loader'
import Counter from './Counter'

const App = () => (
<h1>
Hello, world.<br />
<Counter />
</h1>
)

export default hot(module)(App)
25 changes: 25 additions & 0 deletions examples/decorators/src/Counter.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React from 'react'
import autobind from 'autobind-decorator'

@autobind
class Counter extends React.Component {
state = { count: 0 }

componentDidMount() {
this.interval = setInterval(this.increment, 200)
}

componentWillUnmount() {
clearInterval(this.interval)
}

increment() {
this.setState(prevState => ({ count: prevState.count + 1 }))
}

render() {
return this.state.count
}
}

export default Counter
8 changes: 8 additions & 0 deletions examples/decorators/src/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from 'react'
import { render } from 'react-dom'
import App from './App'

const root = document.createElement('div')
document.body.appendChild(root)

render(<App />, root)
22 changes: 22 additions & 0 deletions examples/decorators/webpack.config.babel.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/* eslint-disable */
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
entry: ['./src/index'],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
exclude: /node_modules|packages/,
test: /\.js$/,
use: 'babel-loader',
},
],
},
plugins: [new HtmlWebpackPlugin(), new webpack.NamedModulesPlugin()],
}
Loading

0 comments on commit ae129fe

Please sign in to comment.