diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..457152b --- /dev/null +++ b/.babelrc @@ -0,0 +1,12 @@ +{ + "presets": [ + ["es2016"], + "stage-2", + "react", + "react-boilerplate" + ], + + "plugins": [ + "react-hot-loader/babel" + ] +} diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..b7e77c6 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,22 @@ +{ + "parser": "babel-eslint", + "env": { + "browser": true, + "node": true + }, + "ecmaFeatures": { + "jsx": true, + "es6": true, + "classes": true + }, + "extends": "airbnb", + "rules": { + "space-before-function-paren": 0, + "react/prefer-stateless-function": 0, + "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], + "linebreak-style": 0, + "global-require": 0, + "comma-dangle": 0, + "react/react-in-jsx-scope": 0 + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/package.json b/package.json new file mode 100644 index 0000000..695adb8 --- /dev/null +++ b/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-element-connectors", + "version": "1.0.0", + "description": "Visually connect elements on the React DOM elements with SVG", + "main": "index.js", + "scripts": { + "start": "./node_modules/.bin/webpack-dev-server", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Christopher S Plantijn", + "license": "ISC", + "devDependencies": { + "babel-cli": "^6.22.2", + "babel-core": "^6.22.1", + "babel-eslint": "^7.1.1", + "babel-loader": "^6.2.10", + "babel-preset-es2016": "^6.22.0", + "babel-preset-react": "^6.22.0", + "babel-preset-react-boilerplate": "^1.1.1", + "babel-preset-react-hmre": "^1.1.1", + "babel-preset-stage-2": "^6.22.0", + "css-loader": "^0.26.1", + "eslint": "^3.15.0", + "eslint-config-airbnb": "^14.1.0", + "eslint-plugin-import": "^2.2.0", + "eslint-plugin-jsx-a11y": "^4.0.0", + "eslint-plugin-react": "^6.9.0", + "extract-text-webpack-plugin": "^2.0.0-rc.3", + "html-webpack-plugin": "^2.28.0", + "node-sass": "^4.5.0", + "open-browser-webpack-plugin": "0.0.3", + "sass-loader": "^5.0.1", + "style-loader": "^0.13.1", + "webpack": "^2.2.1", + "webpack-dev-server": "^2.3.0" + }, + "dependencies": { + "react": "^15.4.2", + "react-dom": "^15.4.2", + "react-hot-loader": "^3.0.0-beta.6" + } +} diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..e84573e --- /dev/null +++ b/src/index.html @@ -0,0 +1,9 @@ + + + + + + +
+ + diff --git a/src/js/container/App.js b/src/js/container/App.js new file mode 100644 index 0000000..dbabb45 --- /dev/null +++ b/src/js/container/App.js @@ -0,0 +1,9 @@ +import { Component } from 'react'; + +export default class App extends Component { + render() { + return ( +

Hello World

+ ); + } +} diff --git a/src/js/index.js b/src/js/index.js new file mode 100644 index 0000000..662fd35 --- /dev/null +++ b/src/js/index.js @@ -0,0 +1,21 @@ +import ReactDOM from 'react-dom'; +import { AppContainer } from 'react-hot-loader'; +import App from './container/App'; + +const render = (Component) => { + ReactDOM.render( + + + , + document.getElementById('root') + ); +}; + +render(App); + +if (module.hot) { + module.hot.accept('./container/App', () => { + const newApp = require('./container/App').default; + render(newApp); + }); +} diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000..5b6976f --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,3 @@ +body { + background: white; +} diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..7638733 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,62 @@ +const { resolve } = require('path'); +const webpack = require('webpack'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const OpenBrowserPlugin = require('open-browser-webpack-plugin'); + +const config = { + devtool: 'cheap-module-eval-source-map', + context: resolve(__dirname, 'src'), + entry: [ + 'react-hot-loader/patch', + 'webpack-dev-server/client?http://localhost:8080', + 'webpack/hot/only-dev-server', + './js/index.js', + './styles/main.scss' + ], + output: { + filename: 'bundle.js', + path: resolve(__dirname, 'dist'), + publicPath: '/' + }, + devServer: { + hot: true, + contentBase: resolve(__dirname, 'dist'), + publicPath: '/' + }, + module: { + rules: [ + { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ }, + { test: /\.scss$/, + use: ExtractTextPlugin.extract({ + fallback: 'style-loader', + use: [ + 'css-loader', + { + loader: 'sass-loader', + query: { + sourceMap: true, + }, + }, + ], + }), + exclude: /node_modules/ + } + ] + }, + plugins: [ + new ExtractTextPlugin({ filename: 'style.css', disable: false, allChunks: true }), + new webpack.HotModuleReplacementPlugin(), + new HtmlWebpackPlugin({ + template: `${__dirname}/src/index.html`, + filename: 'index.html', + inject: 'body', + }), + new OpenBrowserPlugin({ url: 'http://localhost:8080' }), + new webpack.ProvidePlugin({ + React: 'react' + }) + ] +}; + +module.exports = config;