Remove experimental ES7 code, and use babel for webpack config

jdan · Oct 9, 2015 · 03a0021 · 03a0021
1 parent 75b45be
commit 03a0021
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 20 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.eslintrc b/.eslintrc
@@ -1,5 +1,4 @@
 {
-    "parser": "babel-eslint",
     "env": {
         "node": true,
         "browser": true,

diff --git a/index.js b/index.js
@@ -49,8 +49,7 @@ class Toolbar {
         let $toolbar;
 
         let $defaultPlugins = plugins.default.map((Plugin) => { // eslint-disable-line no-unused-vars
-            // Render each plugin with the bound click handler
-            return <Plugin onClick={::this.handlePluginClick} />;
+            return <Plugin onClick={this.handlePluginClick.bind(this)} />;
         });
 
         let $experimentalPlugins = null;
@@ -63,7 +62,7 @@ class Toolbar {
                     {
                         plugins.experimental.map((Plugin) => { // eslint-disable-line no-unused-vars
                             return (
-                                <Plugin onClick={::this.handlePluginClick} />
+                                <Plugin onClick={this.handlePluginClick.bind(this)} />
                             );
                         })
                     }

diff --git a/package.json b/package.json
@@ -12,7 +12,6 @@
     "autoprefixer-loader": "^2.0.0",
     "babel": "^5.6.7",
     "babel-core": "^5.0.12",
-    "babel-eslint": "^3.1.23",
     "babel-loader": "^5.0.0",
     "css-loader": "^0.10.1",
     "eslint": "^0.23.0",

diff --git a/plugins/alt-text/index.js b/plugins/alt-text/index.js
@@ -58,7 +58,7 @@ class AltTextPlugin extends Plugin {
         let {result, elements} = audit("imagesWithoutAltText");
 
         if (result === "FAIL") {
-            elements.forEach(::this.reportError);
+            elements.forEach(this.reportError.bind(this));
         }
 
         // Additionally, label presentational images

diff --git a/webpack.config.js → webpack.config.babel.js b/webpack.config.js → webpack.config.babel.js
@@ -1,19 +1,23 @@
-var fs = require("fs");
-var handlebars = require("handlebars");
-var path = require("path");
-var postcss = require("postcss");
-var webpack = require("webpack");
+let fs = require("fs");
+let handlebars = require("handlebars");
+let path = require("path");
+let postcss = require("postcss");
+let webpack = require("webpack");
 
 // PostCSS plugin to append !important to every CSS rule
-var veryimportant = postcss.plugin("veryimportant", function() {
+let veryimportant = postcss.plugin("veryimportant", function() {
     return function(css) {
         css.eachDecl(function(decl) {
             decl.important = true;
         });
     };
 });
 
-var bannerTemplate = handlebars.compile(
+// Tell babel to transform all JSX code into calls to this function. It can be
+// anything!
+const JSX_PRAGMA_FN = "buildElement";
+
+let bannerTemplate = handlebars.compile(
     fs.readFileSync("./templates/banner.handlebars", "utf-8"));
 
 module.exports = {
@@ -30,6 +34,9 @@ module.exports = {
                 test: /\.js$/,
                 exclude: /node_modules/,
                 loader: "babel",
+                query: {
+                    jsxPragma: JSX_PRAGMA_FN,
+                },
             },
             { test: /\.handlebars$/, loader: "handlebars", },
             {
@@ -48,10 +55,10 @@ module.exports = {
             }),
             {entryOnly: true}),
 
-        // Make the JSX pragma function "E" available everywhere without the
-        // need to use "require"
+        // Make the JSX pragma function available everywhere without the need
+        // to use "require"
         new webpack.ProvidePlugin({
-            "E": path.join(__dirname, "element"),
+            [JSX_PRAGMA_FN]: path.join(__dirname, "element"),
         }),
     ],
     postcss: [veryimportant],