First commit

Cplantijn · Feb 12, 2017 · d2693e9 · d2693e9
commit d2693e9
Show file tree

Hide file tree

Showing 9 changed files with 181 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["es2016"],
+    "stage-2",
+    "react",
+    "react-boilerplate"
+  ],
+
+  "plugins": [
+    "react-hot-loader/babel"
+  ]
+}
diff --git a/.eslintrc 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
@@ -0,0 +1 @@
+node_modules
diff --git a/package.json 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
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>
diff --git a/src/js/container/App.js b/src/js/container/App.js
@@ -0,0 +1,9 @@
+import { Component } from 'react';
+
+export default class App extends Component {
+  render() {
+    return (
+      <h1>Hello World</h1>
+    );
+  }
+}
diff --git a/src/js/index.js 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(
+    <AppContainer>
+      <Component />
+    </AppContainer>,
+    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
@@ -0,0 +1,3 @@
+body {
+  background: white;
+}
diff --git a/webpack.config.js 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;