use react-transform
parent
8dcc782168
commit
4f94682a50
19
.babelrc
19
.babelrc
|
@ -1,4 +1,21 @@
|
||||||
{
|
{
|
||||||
"stage": 2,
|
"stage": 2,
|
||||||
"optional": ["es7.classProperties"]
|
"optional": ["es7.classProperties"],
|
||||||
|
"env": {
|
||||||
|
"development": {
|
||||||
|
"plugins": ["react-transform"],
|
||||||
|
"extra": {
|
||||||
|
"react-transform": {
|
||||||
|
"transforms": [{
|
||||||
|
"transform": "react-transform-hmr",
|
||||||
|
"imports": ["react"],
|
||||||
|
"locals": ["module"]
|
||||||
|
}, {
|
||||||
|
"transform": "react-transform-catch-errors",
|
||||||
|
"imports": ["react", "redbox-react"]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,2 +1,3 @@
|
||||||
**/node_modules/
|
**/node_modules/
|
||||||
**/build/
|
**/build/
|
||||||
|
lib
|
||||||
|
|
|
@ -207,6 +207,9 @@
|
||||||
"wrap-regex": [2],
|
"wrap-regex": [2],
|
||||||
"yoda": [2, "never", {
|
"yoda": [2, "never", {
|
||||||
"exceptRange": true
|
"exceptRange": true
|
||||||
}]
|
}],
|
||||||
|
"react/jsx-uses-react": [2],
|
||||||
|
"react/jsx-uses-vars": [2],
|
||||||
|
"react/react-in-jsx-scope": [2]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,11 +2,24 @@ import React from 'react';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
|
||||||
const App = (props) => {
|
const App = (props) => {
|
||||||
|
let className = style.root;
|
||||||
|
if (props.className) {
|
||||||
|
className += ` ${props.className}`;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<app className={style.app}>
|
<div className={className}>
|
||||||
{props.children}
|
{props.children}
|
||||||
</app>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
App.propTypes = {
|
||||||
|
className: React.PropTypes.string
|
||||||
|
};
|
||||||
|
|
||||||
|
App.defaultProps = {
|
||||||
|
className: ''
|
||||||
|
};
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
@import "../commons";
|
@import "../commons";
|
||||||
|
|
||||||
.app {
|
.root {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
|
||||||
const AppBar = (props) => {
|
const AppBar = (props) => {
|
||||||
let className = style.appbar;
|
let className = style.root;
|
||||||
if (props.className) className += ` ${props.className}`;
|
if (props.className) className += ` ${props.className}`;
|
||||||
if (props.fixed) className += ` ${style.fixed}`;
|
if (props.fixed) className += ` ${style.fixed}`;
|
||||||
if (props.flat) className += ` ${style.flat}`;
|
if (props.flat) className += ` ${style.flat}`;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
@import "../base";
|
@import "../base";
|
||||||
@import "./config";
|
@import "./config";
|
||||||
|
|
||||||
.appbar {
|
.root {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: $appbar-height;
|
height: $appbar-height;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -1,35 +1,39 @@
|
||||||
export default {
|
import App from './app';
|
||||||
App: require('./app'),
|
import AppBar from './app_bar';
|
||||||
AppBar: require('./app_bar'),
|
import Autocomplete from './autocomplete';
|
||||||
Autocomplete: require('./autocomplete'),
|
import Button from './button';
|
||||||
Button: require('./button'),
|
import Card from './card';
|
||||||
Card: require('./card'),
|
import Checkbox from './checkbox';
|
||||||
Checkbox: require('./checkbox'),
|
import DatePicker from './date_picker';
|
||||||
DatePicker: require('./date_picker'),
|
import Dialog from './dialog';
|
||||||
Dialog: require('./dialog'),
|
import Drawer from './drawer';
|
||||||
Drawer: require('./drawer'),
|
import Dropdown from './dropdown';
|
||||||
Dropdown: require('./dropdown'),
|
import FontIcon from './font_icon';
|
||||||
FontIcon: require('./font_icon'),
|
import Form from './form';
|
||||||
Form: require('./form'),
|
import Input from './input';
|
||||||
Input: require('./input'),
|
import Link from './link';
|
||||||
Link: require('./link'),
|
import List from './list/list';
|
||||||
List: require('./list/list'),
|
import ListItem from './list/item';
|
||||||
ListItem: require('./list/item'),
|
import ListDivider from './list/divider';
|
||||||
ListDivider: require('./list/divider'),
|
import ListCheckbox from './list/checkbox';
|
||||||
ListCheckbox: require('./list/checkbox'),
|
import ListSubHeader from './list/subheader';
|
||||||
ListSubHeader: require('./list/subheader'),
|
import Menu from './menu/menu';
|
||||||
Menu: require('./menu/menu'),
|
import MenuItem from './menu/menu_item';
|
||||||
MenuItem: require('./menu/menu_item'),
|
import MenuDivider from './menu/menu_divider';
|
||||||
MenuDivider: require('./menu/menu_divider'),
|
import IconMenu from './menu/icon_menu';
|
||||||
IconMenu: require('./menu/icon_menu'),
|
import Navigation from './navigation';
|
||||||
Navigation: require('./navigation'),
|
import ProgressBar from './progress_bar';
|
||||||
ProgressBar: require('./progress_bar'),
|
import RadioGroup from './radio/radio_group';
|
||||||
RadioGroup: require('./radio/radio_group'),
|
import RadioButton from './radio/radio_button';
|
||||||
RadioButton: require('./radio/radio_button'),
|
import Ripple from './ripple';
|
||||||
Ripple: require('./ripple'),
|
import Slider from './slider';
|
||||||
Slider: require('./slider'),
|
import Switch from './switch';
|
||||||
Switch: require('./switch'),
|
import Tab from './tabs/tab';
|
||||||
Tab: require('./tabs/tab'),
|
import Tabs from './tabs/tabs';
|
||||||
Tabs: require('./tabs/tabs'),
|
import TimePicker from './time_picker';
|
||||||
TimePicker: require('./time_picker')
|
|
||||||
};
|
export default { App, AppBar, Autocomplete, Button, Card, Checkbox, DatePicker,
|
||||||
|
Dialog, Drawer, Dropdown, FontIcon, Form, Input, Link, List, ListItem,
|
||||||
|
ListDivider, ListCheckbox, ListSubHeader, Menu, MenuItem, MenuDivider,
|
||||||
|
IconMenu, Navigation, ProgressBar, RadioGroup, RadioButton, Ripple, Slider,
|
||||||
|
Switch, Tab, Tabs, TimePicker };
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import style from './style.menu_divider';
|
import style from './style.menu_divider';
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"stage": 0,
|
||||||
|
"env": {
|
||||||
|
"development": {
|
||||||
|
"plugins": ["react-transform"],
|
||||||
|
"extra": {
|
||||||
|
"react-transform": {
|
||||||
|
"transforms": [{
|
||||||
|
"transform": "react-transform-hmr",
|
||||||
|
"imports": ["react"],
|
||||||
|
"locals": ["module"]
|
||||||
|
}, {
|
||||||
|
"transform": "react-transform-catch-errors",
|
||||||
|
"imports": ["react", "redbox-react"]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,12 +0,0 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
|
||||||
import ReactDOM from 'react-dom';
|
|
||||||
import Router from 'react-router';
|
|
||||||
import AppRoutes from './app-routes';
|
|
||||||
import createHashHistory from 'history/lib/createHashHistory';
|
|
||||||
|
|
||||||
ReactDOM.render(
|
|
||||||
<Router history={createHashHistory({queryKey: false})}>
|
|
||||||
{AppRoutes}
|
|
||||||
</Router>
|
|
||||||
, document.getElementById('app'));
|
|
|
@ -1,4 +1,3 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
import Logo from '../../logo';
|
import Logo from '../../logo';
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
@import "~react-toolbox/base";
|
|
||||||
@import "../../globals";
|
@import "../../globals";
|
||||||
@import "./config";
|
@import "./config";
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { AppBar } from 'react-toolbox';
|
import { AppBar } from 'react-toolbox';
|
||||||
import { Link } from 'react-router';
|
import { Link } from 'react-router';
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ToolboxComponents from './components';
|
import ToolboxComponents from './components';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ToolboxComponents from './components';
|
import ToolboxComponents from './components';
|
||||||
import { List, ListItem } from 'react-toolbox';
|
import { List, ListItem } from 'react-toolbox';
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import MainAppBar from './appbar';
|
import MainAppBar from './appbar';
|
||||||
import MainDrawer from './drawer';
|
import MainDrawer from './drawer';
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Playground from '../../playground';
|
import Playground from '../../playground';
|
||||||
import code from '../../../examples/example.txt';
|
import code from '../../../examples/example.txt';
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
@import "./config";
|
@import "./config";
|
||||||
|
|
||||||
.appbar {
|
.appbar {
|
||||||
composes: appbar from "react-toolbox/app_bar/style";
|
composes: root from "react-toolbox/app_bar/style";
|
||||||
background: $color-primary-dark;
|
background: $color-primary-dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Link } from 'react-router';
|
import { Link } from 'react-router';
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
/*eslint-disable no-eval*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import babel from 'babel-core/browser';
|
import babel from 'babel-core/browser';
|
||||||
|
@ -71,6 +70,8 @@ const Preview = React.createClass({
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const compiledCode = this.compileCode();
|
const compiledCode = this.compileCode();
|
||||||
|
|
||||||
|
/*eslint-disable no-eval*/
|
||||||
const Component = eval(compiledCode).apply(null, scope);
|
const Component = eval(compiledCode).apply(null, scope);
|
||||||
ReactDOM.render(Component, mountNode);
|
ReactDOM.render(Component, mountNode);
|
||||||
if (this.state.error) {
|
if (this.state.error) {
|
||||||
|
|
|
@ -0,0 +1,17 @@
|
||||||
|
import React from 'react';
|
||||||
|
import Router from 'react-router';
|
||||||
|
import routes from './routes';
|
||||||
|
|
||||||
|
const Docs = props => {
|
||||||
|
return (
|
||||||
|
<Router history={props.history}>
|
||||||
|
{routes}
|
||||||
|
</Router>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Docs.propTypes = {
|
||||||
|
history: React.PropTypes.object
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Docs;
|
|
@ -0,0 +1,2 @@
|
||||||
|
import {createHashHistory} from 'history';
|
||||||
|
export default createHashHistory();
|
|
@ -0,0 +1,6 @@
|
||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import history from './history';
|
||||||
|
import Docs from './docs';
|
||||||
|
|
||||||
|
ReactDOM.render(<Docs history={history}/>, document.getElementById('app'));
|
|
@ -1,4 +1,3 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { App } from 'react-toolbox';
|
import { App } from 'react-toolbox';
|
||||||
import { Route, IndexRoute } from 'react-router';
|
import { Route, IndexRoute } from 'react-router';
|
||||||
|
@ -7,7 +6,7 @@ import Main from './components/layout/main';
|
||||||
import Playground from './components/layout/main/playground';
|
import Playground from './components/layout/main/playground';
|
||||||
import Component from './components/layout/main/component';
|
import Component from './components/layout/main/component';
|
||||||
|
|
||||||
const Routes = (
|
const routes = (
|
||||||
<Route component={App}>
|
<Route component={App}>
|
||||||
<Route path="/" component={Home} />
|
<Route path="/" component={Home} />
|
||||||
<Route component={Main}>
|
<Route component={Main}>
|
||||||
|
@ -18,4 +17,4 @@ const Routes = (
|
||||||
</Route>
|
</Route>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default Routes;
|
export default routes;
|
|
@ -4,7 +4,8 @@
|
||||||
"description": "Documentation for React Toolbox",
|
"description": "Documentation for React Toolbox",
|
||||||
"author": "React Toolbox Team (http://github.com/react-toolbox)",
|
"author": "React Toolbox Team (http://github.com/react-toolbox)",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "UV_THREADPOOL_SIZE=100 node ./server"
|
"start": "node ./server",
|
||||||
|
"build": "NODE_ENV=production webpack --config ./webpack.config.production"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"codemirror": "^5.8.0",
|
"codemirror": "^5.8.0",
|
||||||
|
@ -19,7 +20,9 @@
|
||||||
"babel-core": "^5.8.23",
|
"babel-core": "^5.8.23",
|
||||||
"babel-eslint": "^4.1.3",
|
"babel-eslint": "^4.1.3",
|
||||||
"babel-loader": "^5.3.2",
|
"babel-loader": "^5.3.2",
|
||||||
|
"babel-plugin-react-transform": "^1.1.1",
|
||||||
"css-loader": "^0.21.0",
|
"css-loader": "^0.21.0",
|
||||||
|
"express": "^4.13.3",
|
||||||
"extract-text-webpack-plugin": "^0.8.2",
|
"extract-text-webpack-plugin": "^0.8.2",
|
||||||
"html-loader": "^0.3.0",
|
"html-loader": "^0.3.0",
|
||||||
"html-webpack-plugin": "^1.6.2",
|
"html-webpack-plugin": "^1.6.2",
|
||||||
|
@ -27,12 +30,16 @@
|
||||||
"node-sass": "^3.3.3",
|
"node-sass": "^3.3.3",
|
||||||
"postcss-loader": "^0.7.0",
|
"postcss-loader": "^0.7.0",
|
||||||
"raw-loader": "^0.5.1",
|
"raw-loader": "^0.5.1",
|
||||||
"react-hot-loader": "^1.3.0",
|
"react-transform-catch-errors": "^1.0.0",
|
||||||
|
"react-transform-hmr": "^1.0.1",
|
||||||
|
"redbox-react": "^1.1.1",
|
||||||
"sass-loader": "^3.0.0",
|
"sass-loader": "^3.0.0",
|
||||||
"style-loader": "^0.13.0",
|
"style-loader": "^0.13.0",
|
||||||
"transfer-webpack-plugin": "^0.1.4",
|
"transfer-webpack-plugin": "^0.1.4",
|
||||||
"webpack": "^1.12.0",
|
"webpack": "^1.12.0",
|
||||||
"webpack-dev-server": "^1.12.1"
|
"webpack-dev-middleware": "^1.2.0",
|
||||||
|
"webpack-hot-middleware": "^2.4.1"
|
||||||
},
|
},
|
||||||
"repository": "github:react-toolbox/react-toolbox"
|
"repository": "github:react-toolbox/react-toolbox",
|
||||||
|
"license": "MIT"
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,22 +1,31 @@
|
||||||
const webpack = require('webpack');
|
process.env.UV_THREADPOOL_SIZE = Math.ceil(Math.max(4, require('os').cpus().length * 1.5));
|
||||||
const WebpackDevServer = require('webpack-dev-server');
|
|
||||||
const config = require('./webpack.config.development');
|
|
||||||
const devServer = {
|
|
||||||
host: '0.0.0.0',
|
|
||||||
port: 8080,
|
|
||||||
inline: true
|
|
||||||
};
|
|
||||||
|
|
||||||
new WebpackDevServer(webpack(config), {
|
const path = require('path');
|
||||||
contentBase: 'www',
|
const express = require('express');
|
||||||
|
const webpack = require('webpack');
|
||||||
|
const config = require('./webpack.config.development');
|
||||||
|
|
||||||
|
const app = express();
|
||||||
|
const compiler = webpack(config);
|
||||||
|
|
||||||
|
app.use(require('webpack-dev-middleware')(compiler, {
|
||||||
publicPath: config.output.publicPath,
|
publicPath: config.output.publicPath,
|
||||||
historyApiFallback: false,
|
|
||||||
hot: true,
|
|
||||||
stats: {
|
stats: {
|
||||||
colors: true
|
colors: true
|
||||||
}
|
}
|
||||||
}).listen(devServer.port, devServer.host, (err) => {
|
}));
|
||||||
if (err) console.error(err);
|
|
||||||
console.log(`Listening at ${devServer.host}:${devServer.port}`);
|
app.use(require('webpack-hot-middleware')(compiler));
|
||||||
console.log(`open http://${devServer.host}:${devServer.port}/spec/`);
|
|
||||||
|
app.get('*', (req, res) => {
|
||||||
|
res.sendFile(path.join(__dirname, './www/index.html'));
|
||||||
|
});
|
||||||
|
|
||||||
|
app.listen(8081, '0.0.0.0', (err) => {
|
||||||
|
if (err) {
|
||||||
|
console.log(err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Listening at http://0.0.0.0:8081');
|
||||||
});
|
});
|
||||||
|
|
|
@ -7,9 +7,8 @@ module.exports = {
|
||||||
context: __dirname,
|
context: __dirname,
|
||||||
devtool: '#eval-source-map',
|
devtool: '#eval-source-map',
|
||||||
entry: [
|
entry: [
|
||||||
'webpack-dev-server/client?http://0.0.0.0:8080',
|
'webpack-hot-middleware/client',
|
||||||
'webpack/hot/only-dev-server',
|
'./app/index.jsx'
|
||||||
'./app/app.jsx'
|
|
||||||
],
|
],
|
||||||
output: {
|
output: {
|
||||||
path: path.join(__dirname, 'build'),
|
path: path.join(__dirname, 'build'),
|
||||||
|
@ -33,7 +32,7 @@ module.exports = {
|
||||||
{
|
{
|
||||||
test: /(\.js|\.jsx)$/,
|
test: /(\.js|\.jsx)$/,
|
||||||
exclude: /(node_modules)/,
|
exclude: /(node_modules)/,
|
||||||
loader: 'react-hot!babel'
|
loader: 'babel'
|
||||||
}, {
|
}, {
|
||||||
test: /(\.scss|\.css)$/,
|
test: /(\.scss|\.css)$/,
|
||||||
loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass')
|
loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass')
|
||||||
|
@ -51,7 +50,7 @@ module.exports = {
|
||||||
plugins: [
|
plugins: [
|
||||||
new ExtractTextPlugin('docs.css', {allChunks: true}),
|
new ExtractTextPlugin('docs.css', {allChunks: true}),
|
||||||
new webpack.HotModuleReplacementPlugin(),
|
new webpack.HotModuleReplacementPlugin(),
|
||||||
new webpack.optimize.OccurenceOrderPlugin(),
|
new webpack.NoErrorsPlugin(),
|
||||||
new webpack.DefinePlugin({
|
new webpack.DefinePlugin({
|
||||||
'process.env.NODE_ENV': JSON.stringify('development')
|
'process.env.NODE_ENV': JSON.stringify('development')
|
||||||
})
|
})
|
||||||
|
|
|
@ -7,8 +7,7 @@ const TransferWebpackPlugin = require('transfer-webpack-plugin');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
context: __dirname,
|
context: __dirname,
|
||||||
devtool: '#eval-source-map',
|
entry: ['./app/index.jsx'],
|
||||||
entry: ['./app/app.jsx'],
|
|
||||||
output: {
|
output: {
|
||||||
path: path.join(__dirname, 'build'),
|
path: path.join(__dirname, 'build'),
|
||||||
filename: 'docs.js'
|
filename: 'docs.js'
|
||||||
|
@ -33,7 +32,7 @@ module.exports = {
|
||||||
{
|
{
|
||||||
test: /(\.js|\.jsx)$/,
|
test: /(\.js|\.jsx)$/,
|
||||||
exclude: /(node_modules)/,
|
exclude: /(node_modules)/,
|
||||||
loader: 'react-hot!babel'
|
loader: 'babel'
|
||||||
}, {
|
}, {
|
||||||
test: /(\.scss|\.css)$/,
|
test: /(\.scss|\.css)$/,
|
||||||
loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass')
|
loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass')
|
||||||
|
@ -54,8 +53,12 @@ module.exports = {
|
||||||
inject: false,
|
inject: false,
|
||||||
template: path.resolve(__dirname, './www/index.html')
|
template: path.resolve(__dirname, './www/index.html')
|
||||||
}),
|
}),
|
||||||
new TransferWebpackPlugin([
|
new TransferWebpackPlugin([{
|
||||||
{ from: 'www/images', to: 'images' }
|
from: 'www/images',
|
||||||
], path.resolve(__dirname, './'))
|
to: 'images'
|
||||||
|
}], path.resolve(__dirname, './')),
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
'process.env.NODE_ENV': JSON.stringify('production')
|
||||||
|
})
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
23
package.json
23
package.json
|
@ -18,15 +18,15 @@
|
||||||
"main": "./lib",
|
"main": "./lib",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "node ./server",
|
"start": "node ./server",
|
||||||
|
"lint": "eslint ./ --ext .js,.jsx",
|
||||||
"babel": "babel ./components --out-dir ./lib",
|
"babel": "babel ./components --out-dir ./lib",
|
||||||
"build": "npm run lint && npm run babel && npm run sass",
|
"sass": "cpx './components/**/*.scss' ./lib",
|
||||||
|
"build": "npm run babel && npm run sass",
|
||||||
"clean": "rimraf ./lib",
|
"clean": "rimraf ./lib",
|
||||||
"lint": "eslint ./components ./spec ./example --ext .js,.jsx",
|
|
||||||
"prebuild": "npm run clean",
|
"prebuild": "npm run clean",
|
||||||
"prepublish": "npm run build",
|
"prepublish": "npm run build",
|
||||||
"sass": "node-sass ./components -o ./lib",
|
"test": "NODE_ENV=test karma start",
|
||||||
"test": "karma start",
|
"test:watch": "NODE_ENV=test karma start --no-single-run"
|
||||||
"test:watch": "karma start --no-single-run"
|
|
||||||
},
|
},
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/react-toolbox/react-toolbox/issues",
|
"url": "https://github.com/react-toolbox/react-toolbox/issues",
|
||||||
|
@ -52,10 +52,13 @@
|
||||||
"babel-core": "^5.8.23",
|
"babel-core": "^5.8.23",
|
||||||
"babel-eslint": "^4.1.3",
|
"babel-eslint": "^4.1.3",
|
||||||
"babel-loader": "^5.3.2",
|
"babel-loader": "^5.3.2",
|
||||||
|
"babel-plugin-react-transform": "^1.1.1",
|
||||||
|
"cpx": "^1.2.1",
|
||||||
"css-loader": "^0.21.0",
|
"css-loader": "^0.21.0",
|
||||||
"eslint": "^1.7.3",
|
"eslint": "^1.7.3",
|
||||||
"eslint-plugin-react": "^3.3.1",
|
"eslint-plugin-react": "^3.3.1",
|
||||||
"expect": "^1.8.0",
|
"expect": "^1.8.0",
|
||||||
|
"express": "^4.13.3",
|
||||||
"karma": "^0.13.3",
|
"karma": "^0.13.3",
|
||||||
"karma-chrome-launcher": "^0.2.0",
|
"karma-chrome-launcher": "^0.2.0",
|
||||||
"karma-cli": "^0.1.0",
|
"karma-cli": "^0.1.0",
|
||||||
|
@ -63,23 +66,25 @@
|
||||||
"karma-phantomjs-launcher": "~0.2",
|
"karma-phantomjs-launcher": "~0.2",
|
||||||
"karma-webpack": "^1.7.0",
|
"karma-webpack": "^1.7.0",
|
||||||
"mocha": "^2.3.3",
|
"mocha": "^2.3.3",
|
||||||
"node-libs-browser": "^0.5.2",
|
|
||||||
"node-sass": "^3.3.3",
|
"node-sass": "^3.3.3",
|
||||||
"normalize.css": "^3.0.3",
|
"normalize.css": "^3.0.3",
|
||||||
"object-assign": "^4.0.1",
|
"phantomjs": "^1.9.18",
|
||||||
"phantomjs-polyfill": "0.0.1",
|
"phantomjs-polyfill": "0.0.1",
|
||||||
"postcss-loader": "^0.7.0",
|
"postcss-loader": "^0.7.0",
|
||||||
"react": "^0.14",
|
"react": "^0.14",
|
||||||
"react-addons-css-transition-group": "^0.14.0",
|
"react-addons-css-transition-group": "^0.14.0",
|
||||||
"react-addons-test-utils": "^0.14.0",
|
"react-addons-test-utils": "^0.14.0",
|
||||||
"react-dom": "^0.14.0",
|
"react-dom": "^0.14.0",
|
||||||
"react-hot-loader": "^1.3.0",
|
"react-transform-catch-errors": "^1.0.0",
|
||||||
|
"react-transform-hmr": "^1.0.1",
|
||||||
|
"redbox-react": "^1.1.1",
|
||||||
"rimraf": "^2.4.3",
|
"rimraf": "^2.4.3",
|
||||||
"sass-loader": "^3.0.0",
|
"sass-loader": "^3.0.0",
|
||||||
"sinon": "git://github.com/cjohansen/Sinon.JS#sinon-2.0",
|
"sinon": "git://github.com/cjohansen/Sinon.JS#sinon-2.0",
|
||||||
"style-loader": "^0.13.0",
|
"style-loader": "^0.13.0",
|
||||||
"webpack": "^1.12.0",
|
"webpack": "^1.12.0",
|
||||||
"webpack-dev-server": "^1.12.1"
|
"webpack-dev-middleware": "^1.2.0",
|
||||||
|
"webpack-hot-middleware": "^2.4.1"
|
||||||
},
|
},
|
||||||
"repository": "github:react-toolbox/react-toolbox"
|
"repository": "github:react-toolbox/react-toolbox"
|
||||||
}
|
}
|
||||||
|
|
33
server.js
33
server.js
|
@ -1,22 +1,31 @@
|
||||||
process.env.UV_THREADPOOL_SIZE = Math.ceil(Math.max(4, require('os').cpus().length * 1.5));
|
process.env.UV_THREADPOOL_SIZE = Math.ceil(Math.max(4, require('os').cpus().length * 1.5));
|
||||||
|
|
||||||
|
const path = require('path');
|
||||||
|
const express = require('express');
|
||||||
const webpack = require('webpack');
|
const webpack = require('webpack');
|
||||||
const WebpackDevServer = require('webpack-dev-server');
|
|
||||||
const config = require('./webpack.config.development');
|
const config = require('./webpack.config.development');
|
||||||
const devServer = {
|
|
||||||
host: '0.0.0.0',
|
|
||||||
port: 8080,
|
|
||||||
inline: true
|
|
||||||
};
|
|
||||||
|
|
||||||
new WebpackDevServer(webpack(config), {
|
const app = express();
|
||||||
|
const compiler = webpack(config);
|
||||||
|
|
||||||
|
app.use(require('webpack-dev-middleware')(compiler, {
|
||||||
publicPath: config.output.publicPath,
|
publicPath: config.output.publicPath,
|
||||||
historyApiFallback: false,
|
|
||||||
stats: {
|
stats: {
|
||||||
colors: true
|
colors: true
|
||||||
}
|
}
|
||||||
}).listen(devServer.port, devServer.host, (err) => {
|
}));
|
||||||
if (err) console.error(err);
|
|
||||||
console.log(`Listening at ${devServer.host}:${devServer.port}`);
|
app.use(require('webpack-hot-middleware')(compiler));
|
||||||
console.log(`open http://${devServer.host}:${devServer.port}/spec/`);
|
|
||||||
|
app.get('*', (req, res) => {
|
||||||
|
res.sendFile(path.join(__dirname, './spec/index.html'));
|
||||||
|
});
|
||||||
|
|
||||||
|
app.listen(8080, '0.0.0.0', (err) => {
|
||||||
|
if (err) {
|
||||||
|
console.log(err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Listening at http://0.0.0.0:8080');
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Button from '../../components/button';
|
import Button from '../../components/button';
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import FontIcon from '../../components/font_icon';
|
import FontIcon from '../../components/font_icon';
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Input from '../../components/input';
|
import Input from '../../components/input';
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Link from '../../components/link';
|
import Link from '../../components/link';
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { ListCheckbox, ListSubHeader, List, ListItem, ListDivider } from '../../components/list';
|
import { ListCheckbox, ListSubHeader, List, ListItem, ListDivider } from '../../components/list';
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import DatePicker from '../../components/date_picker';
|
import DatePicker from '../../components/date_picker';
|
||||||
import TimePicker from '../../components/time_picker';
|
import TimePicker from '../../components/time_picker';
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Slider from '../../components/slider';
|
import Slider from '../../components/slider';
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Tabs, Tab } from '../../components/tabs';
|
import { Tabs, Tab } from '../../components/tabs';
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import App from './app';
|
import Root from './root';
|
||||||
|
|
||||||
ReactDOM.render(<App/>, document.getElementById('toolbox-test'));
|
ReactDOM.render(<Root />, document.getElementById('toolbox-test'));
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
/*eslint-disable no-unused-vars*/
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import commons from '../components/commons';
|
import App from '../components/app';
|
||||||
import Autocomplete from './components/autocomplete';
|
import Autocomplete from './components/autocomplete';
|
||||||
import Button from './components/button';
|
import Button from './components/button';
|
||||||
import Card from './components/card';
|
import Card from './components/card';
|
||||||
|
@ -21,32 +20,30 @@ import Switch from './components/switch';
|
||||||
import Tabs from './components/tabs';
|
import Tabs from './components/tabs';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
|
||||||
const App = () => {
|
const Root = () => (
|
||||||
return (
|
<App className={style.app}>
|
||||||
<app className={`${commons.app} ${style.app}`}>
|
<h1>React Toolbox</h1>
|
||||||
<h1>React Toolbox</h1>
|
<h3>Component Spec v0.10.20</h3>
|
||||||
<h3>Component Spec v0.10.20</h3>
|
|
||||||
|
|
||||||
<Autocomplete />
|
<Autocomplete />
|
||||||
<Button />
|
<Button />
|
||||||
<Card />
|
<Card />
|
||||||
<Checkbox />
|
<Checkbox />
|
||||||
<Dialog />
|
<Dialog />
|
||||||
<Drawer />
|
<Drawer />
|
||||||
<Dropdown />
|
<Dropdown />
|
||||||
<IconMenu />
|
<IconMenu />
|
||||||
<Input />
|
<Input />
|
||||||
<List />
|
<List />
|
||||||
<Menu />
|
<Menu />
|
||||||
<Pickers />
|
<Pickers />
|
||||||
<Progress />
|
<Progress />
|
||||||
<Radio />
|
<Radio />
|
||||||
<Slider />
|
<Slider />
|
||||||
<Snackbar />
|
<Snackbar />
|
||||||
<Switch />
|
<Switch />
|
||||||
<Tabs />
|
<Tabs />
|
||||||
</app>
|
</App>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
export default App;
|
export default Root;
|
|
@ -1,14 +1,12 @@
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
const webpack = require('webpack');
|
const webpack = require('webpack');
|
||||||
const autoprefixer = require('autoprefixer');
|
const autoprefixer = require('autoprefixer');
|
||||||
const devServer = 'http://0.0.0.0:8080';
|
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
context: __dirname,
|
context: __dirname,
|
||||||
devtool: '#eval-source-map',
|
devtool: '#eval-source-map',
|
||||||
entry: [
|
entry: [
|
||||||
'webpack-dev-server/client?' + devServer,
|
'webpack-hot-middleware/client',
|
||||||
'webpack/hot/only-dev-server',
|
|
||||||
'./spec/index.jsx'
|
'./spec/index.jsx'
|
||||||
],
|
],
|
||||||
output: {
|
output: {
|
||||||
|
@ -24,7 +22,7 @@ module.exports = {
|
||||||
{
|
{
|
||||||
test: /(\.js|\.jsx)$/,
|
test: /(\.js|\.jsx)$/,
|
||||||
exclude: /(node_modules)/,
|
exclude: /(node_modules)/,
|
||||||
loader: 'react-hot!babel'
|
loader: 'babel'
|
||||||
}, {
|
}, {
|
||||||
test: /(\.scss|\.css)$/,
|
test: /(\.scss|\.css)$/,
|
||||||
loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'
|
loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'
|
||||||
|
@ -34,7 +32,7 @@ module.exports = {
|
||||||
postcss: [autoprefixer],
|
postcss: [autoprefixer],
|
||||||
plugins: [
|
plugins: [
|
||||||
new webpack.HotModuleReplacementPlugin(),
|
new webpack.HotModuleReplacementPlugin(),
|
||||||
new webpack.optimize.OccurenceOrderPlugin(),
|
new webpack.NoErrorsPlugin(),
|
||||||
new webpack.DefinePlugin({
|
new webpack.DefinePlugin({
|
||||||
'process.env.NODE_ENV': JSON.stringify('development')
|
'process.env.NODE_ENV': JSON.stringify('development')
|
||||||
})
|
})
|
||||||
|
|
|
@ -7,7 +7,7 @@ module.exports = {
|
||||||
{
|
{
|
||||||
test: /(\.js|\.jsx)$/,
|
test: /(\.js|\.jsx)$/,
|
||||||
exclude: /(node_modules)/,
|
exclude: /(node_modules)/,
|
||||||
loader: 'react-hot!babel'
|
loader: 'babel'
|
||||||
}, {
|
}, {
|
||||||
test: /(\.scss|\.css)$/,
|
test: /(\.scss|\.css)$/,
|
||||||
loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'
|
loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'
|
||||||
|
|
Loading…
Reference in New Issue