add webpack config and react transform, fix lint errors

FormidableLabs · Nov 22, 2015 · e567ffa · e567ffa
1 parent 05c9fe7
commit e567ffa
Show file tree

Hide file tree

Showing 42 changed files with 173 additions and 89 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -5,3 +5,7 @@
 "rules":
   "indent": [2, 2, {"SwitchCase": 1}]
   "max-len": 0
+
+"env":
+    "browser": true,
+    "node": true
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width initial-scale=1 user-scalable=no" />
+    <link href="http://fonts.googleapis.com/css?family=Lobster+Two:400700" rel="stylesheet" type="text/css">
+    <link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300700" rel="stylesheet" type="text/css">
+</head>
+<body>
+    <div id="root"></div>
+    <script src="/dist/bundle.js"></script>
+</body>
+</html>
diff --git a/index.jsx → index.js b/index.jsx → index.js
@@ -1,5 +1,3 @@
-/*global document*/
-
 import React, { PropTypes } from "react";
 import { render } from "react-dom";
 import context from "./src/utils/context";

diff --git a/npm-debug.log b/npm-debug.log
@@ -0,0 +1,37 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'lint' ]
+2 info using npm@2.14.2
+3 info using node@v4.0.0
+4 verbose run-script [ 'prelint', 'lint', 'postlint' ]
+5 info prelint spectacle@0.1.6
+6 info lint spectacle@0.1.6
+7 verbose unsafe-perm in lifecycle true
+8 info spectacle@0.1.6 Failed to exec lint script
+9 verbose stack Error: spectacle@0.1.6 lint: `eslint --ext .js,.jsx .`
+9 verbose stack Exit status 1
+9 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:214:16)
+9 verbose stack     at emitTwo (events.js:87:13)
+9 verbose stack     at EventEmitter.emit (events.js:172:7)
+9 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
+9 verbose stack     at emitTwo (events.js:87:13)
+9 verbose stack     at ChildProcess.emit (events.js:172:7)
+9 verbose stack     at maybeClose (internal/child_process.js:817:16)
+9 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
+10 verbose pkgid spectacle@0.1.6
+11 verbose cwd /Users/mateuszzatorski/Projects/spectacle
+12 error Darwin 15.0.0
+13 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "lint"
+14 error node v4.0.0
+15 error npm  v2.14.2
+16 error code ELIFECYCLE
+17 error spectacle@0.1.6 lint: `eslint --ext .js,.jsx .`
+17 error Exit status 1
+18 error Failed at the spectacle@0.1.6 lint script 'eslint --ext .js,.jsx .'.
+18 error This is most likely a problem with the spectacle package,
+18 error not with npm itself.
+18 error Tell the author that this fails on your system:
+18 error     eslint --ext .js,.jsx .
+18 error You can get their info via:
+18 error     npm owner ls spectacle
+18 error There is likely additional logging output above.
+19 verbose exit [ 1, true ]
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "ReactJS Powered Presentation Framework",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server",
+    "start": "node server.js",
     "lint": "eslint --ext .js,.jsx .",
     "build": "webpack",
     "deploy": "npm run build && surge -p ./dist"
@@ -14,42 +14,42 @@
   "dependencies": {
     "alt": "0.17.8",
     "highlight.js": "8.9.1",
-    "hjs-webpack": "3.0.0",
+    "history": "1.13.1",
     "lodash": "3.10.1",
     "mdast": "^2.1.0",
     "mdast-react": "https://github.com/jjt/mdast-react#2ea3bcd",
     "normalize.css": "3.0.3",
     "radium": "0.15.0",
-    "react": "0.14.2",
-    "react-dom": "0.14.2",
-    "react-addons-transition-group": "0.14.2",
-    "history": "1.13.1",
-    "react-router": "1.0.0",
+    "react": "^0.14.2",
+    "react-addons-transition-group": "^0.14.2",
+    "react-dom": "^0.14.2",
+    "react-router": "^1.0.0",
     "react-tween-state": "0.1.3",
     "tween-functions": "1.1.0"
   },
   "devDependencies": {
     "autoprefixer-core": "^6.0.1",
-    "babel": "^5.8.29",
-    "babel-core": "^5.8.30",
+    "babel-core": "^5.8.34",
     "babel-eslint": "^4.1.3",
-    "babel-loader": "^5.3.2",
-    "css-loader": "^0.21.0",
+    "babel-loader": "^5.4.0",
+    "babel-plugin-react-transform": "^1.1.1",
+    "css-loader": "^0.23.0",
     "eslint": "^1.8.0",
     "eslint-config-defaults": "^7.1.1",
     "eslint-plugin-filenames": "^0.1.2",
     "eslint-plugin-react": "^3.6.3",
+    "express": "^4.13.3",
     "file-loader": "^0.8.4",
-    "json-loader": "^0.5.3",
     "node-libs-browser": "^0.5.3",
-    "postcss-loader": "^0.7.0",
     "raw-loader": "^0.5.1",
-    "react-hot-loader": "^1.3.0",
-    "style-loader": "0.13.0",
-    "stylus-loader": "1.4.2",
+    "react-transform-catch-errors": "^1.0.0",
+    "react-transform-hmr": "^1.0.1",
+    "redbox-react": "^1.2.0",
+    "style-loader": "^0.13.0",
     "surge": "latest",
     "url-loader": "^0.5.6",
-    "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.12.1"
+    "webpack": "^1.12.8",
+    "webpack-dev-middleware": "^1.2.0",
+    "webpack-hot-middleware": "^2.5.0"
   }
 }
diff --git a/presentation/config.js b/presentation/config.js
@@ -3,6 +3,5 @@ module.exports = {
   height: 700,
   margin: 40,
   theme: require("../themes/default/index"),
-  print: require("../themes/default/print"),
-  html: require("../themes/default/html")
+  print: require("../themes/default/print")
 };
diff --git a/presentation/deck.jsx → presentation/deck.js b/presentation/deck.jsx → presentation/deck.js
diff --git a/presentation/interactive.jsx → presentation/interactive.js b/presentation/interactive.jsx → presentation/interactive.js
diff --git a/server.js b/server.js
@@ -0,0 +1,29 @@
+/* eslint-disable */
+
+var path = require("path");
+var express = require("express");
+var webpack = require("webpack");
+var config = require("./webpack.config");
+
+var app = express();
+var compiler = webpack(config);
+
+app.use(require("webpack-dev-middleware")(compiler, {
+    noInfo: true,
+    publicPath: config.output.publicPath
+}));
+
+app.use(require("webpack-hot-middleware")(compiler));
+
+app.get("*", function(req, res) {
+  res.sendFile(path.join(__dirname, "index.html"));
+});
+
+app.listen(3000, "localhost", function (err) {
+  if (err) {
+    console.log(err);
+    return;
+  }
+
+  console.log("Listening at http://localhost:3000");
+});
diff --git a/src/appear.jsx → src/appear.js b/src/appear.jsx → src/appear.js
@@ -21,10 +21,10 @@ const Appear = React.createClass({
     };
   },
   componentWillMount() {
-    this.context.export || this.context.flux.stores.SlideStore.listen(this._storeChange);
+    return this.context.export || this.context.flux.stores.SlideStore.listen(this._storeChange);
   },
   componentWillUnmount() {
-    this.context.export || this.context.flux.stores.SlideStore.unlisten(this._storeChange);
+    return this.context.export || this.context.flux.stores.SlideStore.unlisten(this._storeChange);
   },
   _storeChange(state) {
     const slide = this.context.slide;

diff --git a/src/base.jsx → src/base.js b/src/base.jsx → src/base.js
diff --git a/src/block-quote.jsx → src/block-quote.js b/src/block-quote.jsx → src/block-quote.js
diff --git a/src/cite.jsx → src/cite.js b/src/cite.jsx → src/cite.js
diff --git a/src/code-pane.jsx → src/code-pane.js b/src/code-pane.jsx → src/code-pane.js
diff --git a/src/code.jsx → src/code.js b/src/code.jsx → src/code.js
diff --git a/src/deck.jsx → src/deck.js b/src/deck.jsx → src/deck.js
@@ -1,5 +1,5 @@
 /*eslint new-cap:0, max-statements:0*/
-/*global window document localStorage*/
+/* eslint react/no-did-mount-set-state: 0 */
 
 import React, { Children, cloneElement, Component, PropTypes } from "react";
 import ReactTransitionGroup from "react-addons-transition-group";

diff --git a/src/export.jsx → src/export.js b/src/export.jsx → src/export.js
diff --git a/src/fill.jsx → src/fill.js b/src/fill.jsx → src/fill.js
diff --git a/src/fit.jsx → src/fit.js b/src/fit.jsx → src/fit.js
diff --git a/src/flux/alt.jsx → src/flux/alt.js b/src/flux/alt.jsx → src/flux/alt.js
diff --git a/src/flux/slide-actions.jsx → src/flux/slide-actions.js b/src/flux/slide-actions.jsx → src/flux/slide-actions.js
diff --git a/src/flux/slide-store.jsx → src/flux/slide-store.js b/src/flux/slide-store.jsx → src/flux/slide-store.js
diff --git a/src/heading.jsx → src/heading.js b/src/heading.jsx → src/heading.js
@@ -1,5 +1,3 @@
-/*global window*/
-
 import React, { createElement, PropTypes } from "react";
 import Base from "./base";
 import Radium from "radium";

diff --git a/src/image.jsx → src/image.js b/src/image.jsx → src/image.js
diff --git a/src/layout.jsx → src/layout.js b/src/layout.jsx → src/layout.js
diff --git a/src/link.jsx → src/link.js b/src/link.jsx → src/link.js
diff --git a/src/list-item.jsx → src/list-item.js b/src/list-item.jsx → src/list-item.js
diff --git a/src/list.jsx → src/list.js b/src/list.jsx → src/list.js
diff --git a/src/markdown.jsx → src/markdown.js b/src/markdown.jsx → src/markdown.js
@@ -1,10 +1,9 @@
-import React, { PropTypes } from "react";
+import React, { Component, PropTypes } from "react";
 import mdast from "mdast";
 import mdastReact from "mdast-react";
 import isUndefined from "lodash/lang/isundefined";
 
 import BlockQuote from "./block-quote";
-import Code from "./code";
 import CodePane from "./code-pane";
 import Heading from "./heading";
 import Image from "./image";
@@ -17,22 +16,26 @@ import Text from "./text";
 
 // We can't pass props into mdast-react directly, so we have to "bind" them
 // to spectacle components (ex. headings, strong/em/del)
-function spectacleComponent(component, boundProps = {}) {
+const spectacleComponent = (component, boundProps = {}) => {
   return React.createClass({
-    render(){
+    render() {
       const props = {...this.props, ...boundProps};
       return React.createElement(component, {...props}, this.props.children);
     }
   });
-}
+};
 
 // Spectacle requires a <Quote> inside a <BlockQuote>
-class CombinedBlockQuote extends React.Component {
+class CombinedBlockQuote extends Component {
   render() {
     return <BlockQuote><Quote>{this.props.children}</Quote></BlockQuote>;
   }
 }
 
+CombinedBlockQuote.propTypes = {
+  children: PropTypes.object
+};
+
 // We export the default config so people can extend it themselves
 export const mdastConfigDefault = {
   commonmark: true,
@@ -76,12 +79,11 @@ Markdown.propTypes = {
   children: PropTypes.node,
   source: PropTypes.string,
   mdastConfig: PropTypes.object
-}
+};
 
 Markdown.defaultProps = {
   source: "",
   mdastConfig: mdastConfigDefault
 };
 
 export default Markdown;
-
diff --git a/src/overview.jsx → src/overview.js b/src/overview.jsx → src/overview.js
diff --git a/src/presenter.jsx → src/presenter.js b/src/presenter.jsx → src/presenter.js
@@ -1,5 +1,3 @@
-/*global setInterval clearInterval*/
-
 import React, { cloneElement, PropTypes } from "react";
 import Base from "./base";
 import Radium from "radium";

diff --git a/src/progress.jsx → src/progress.js b/src/progress.jsx → src/progress.js
@@ -74,7 +74,7 @@ class Progress extends Base {
 
   getWidth() {
     return {
-      width: (100 * this.props.currentSlide / (this.props.items.length - 1)) + "%"
+      width: `${(100 * this.props.currentSlide / (this.props.items.length - 1))}%`
     };
   }
 

diff --git a/src/quote.jsx → src/quote.js b/src/quote.jsx → src/quote.js
diff --git a/src/s.jsx → src/s.js b/src/s.jsx → src/s.js
diff --git a/src/slide.jsx → src/slide.js b/src/slide.jsx → src/slide.js
@@ -1,5 +1,3 @@
-/*global window*/
-
 import React, { PropTypes } from "react";
 import tweenState from "react-tween-state";
 import Base from "./base";

diff --git a/src/spectacle.jsx → src/spectacle.js b/src/spectacle.jsx → src/spectacle.js
diff --git a/src/text.jsx → src/text.js b/src/text.jsx → src/text.js
@@ -1,5 +1,3 @@
-/*global window*/
-
 import React, { PropTypes } from "react";
 import Base from "./base";
 import Radium from "radium";
@@ -53,7 +51,7 @@ class Text extends Base {
         margin: "0",
         padding: "0",
         lineHeight: this.props.lineHeight,
-        transform: "scale(" + this.state.scale + ")",
+        transform: `scale(${this.state.scale})`,
         transformOrigin: "center top"
       },
       nonFit: {

diff --git a/src/transitions.jsx → src/transitions.js b/src/transitions.jsx → src/transitions.js
@@ -1,5 +1,3 @@
-/*global setTimeout*/
-
 import { PropTypes } from "react";
 import tweenState from "react-tween-state";
 

diff --git a/src/utils/context.jsx → src/utils/context.js b/src/utils/context.jsx → src/utils/context.js
diff --git a/src/utils/preloader.jsx → src/utils/preloader.js b/src/utils/preloader.jsx → src/utils/preloader.js
@@ -1,5 +1,3 @@
-/*global Image*/
-
 const preload = function preload(imageArray) {
   const images = [];
   for (let i = 0; i < imageArray.length; i++) {

diff --git a/themes/default/html.js b/themes/default/html.js