🎨 Get electron-webpack to run app

🎨 Got electron-webpack to run app, see electron-userland/electron-webpack#83
🐛 Now need to get packages working, going to compile on a per package bases.
🎨 Using source-map as devtool
🎨 Using sindresorhus/require-fool-webpack to solve webpack/webpack-dev-server#212

package.json

@@ -5,9 +5,10 @@
   "description": "An electron based file explorer.",
   "main": "src/renderer/index.js",
   "scripts": {
-    "start": "./node_modules/.bin/electron . --color -v",
+    "start": "./node_modules/.bin/electron-webpack dev",
     "package": "electron-forge package",
     "make": "electron-forge make",
+    "build": "electron-webpack",
     "lint": "eslint src"
   },
   "keywords": [],
@@ -84,6 +85,7 @@
     "react-redux": "^5.0.6",
     "react-split-pane": "^0.1.74",
     "redux": "^3.7.2",
+    "require-fool-webpack": "^1.0.0",
     "sass-lint": "^1.12.1",
     "scss-to-json": "^2.0.0",
     "semantic-ui": "^2.2.13",

scripts/build-vars.sh

@@ -1,7 +1,7 @@
 #!/usr/bin/env bash
 # File to contain electron build vars
 # Electron's version.
-export npm_config_target=1.7.6
+export npm_config_target=1.8.1
 # The architecture of Electron, can be ia32 or x64.
 export npm_config_arch=x64
 export npm_config_target_arch=x64
@@ -12,6 +12,6 @@ export npm_config_runtime=electron
 # Tell node-pre-gyp to build module from source code.
 export npm_config_build_from_source=true
 # Electron's node ID
-export electron_id=54
+export electron_id=57
 # Package dir
 export PACKAGE_DIR=src/packages

src/components/app.jsx

@@ -6,12 +6,13 @@ import createFragment from "react-addons-create-fragment";
 import { join } from "path";
 import PropTypes from "prop-types";
 import jquery from "jquery";
+const requireFoolWebpack = require("require-fool-webpack");
 import Panel from "./panel";
 import { updateLayoutConfig, updateLayoutRender, addPlugin } from "../actions";
 import Module from "./module";
 import { PLUGIN_CONFIG, PLUGIN_LOCATION } from "../renderer/constants";
 // Plugin config file
-const plugins = require(PLUGIN_CONFIG);
+const plugins = requireFoolWebpack(PLUGIN_CONFIG);
 
 /**
  * Tara entry point
@@ -31,7 +32,7 @@ export default class Tara extends Component {
     for (let plugin in plugins.dependencies) {
       if (plugins.dependencies.hasOwnProperty(plugin)) {
         // Require
-        const pluginJSON = require(join(PLUGIN_LOCATION, plugin, "package.json"));
+        const pluginJSON = requireFoolWebpack(join(PLUGIN_LOCATION, plugin, "package.json"));
         // ...and store
         this.props.dispatch(addPlugin(pluginJSON));
       }

src/components/module.jsx

@@ -5,6 +5,7 @@ import electron from "electron"; // eslint-disable-line
 import { join } from "path";
 import React, { Component } from "react";
 import PropTypes from "prop-types";
+const requireFoolWebpack = require("require-fool-webpack");
 import { PLUGIN_CONFIG, PLUGIN_LOCATION, PLUGIN_CORE_LOCATION } from "../renderer/constants";
 import TaraPlugin from "../renderer/boot/plugin-init";
 
@@ -19,22 +20,22 @@ export default class Module extends Component {
 
   componentWillMount() {
     // Get plugin's client & listen for it
-    const plugin_config = require(PLUGIN_CONFIG);
+    const plugin_config = requireFoolWebpack(PLUGIN_CONFIG);
     let pluginJSON;
     let plugin_location;
     if (plugin_config.dependencies.hasOwnProperty(this.props.module)) {
       plugin_location = join(PLUGIN_LOCATION, this.props.module);
-      pluginJSON = require(join(plugin_location, "package.json"));
+      pluginJSON = requireFoolWebpack(join(plugin_location, "package.json"));
       // Check if
     } else {
       plugin_location = join(PLUGIN_CORE_LOCATION, this.props.module);
-      pluginJSON = require(join(plugin_location, "package.json"));
+      pluginJSON = requireFoolWebpack(join(plugin_location, "package.json"));
     }
     // Get & send
     if (pluginJSON.tara.hasOwnProperty("client")) {
-      this.setState({ contents: require(join(plugin_location, pluginJSON.tara.client)).default });
+      this.setState({ contents: requireFoolWebpack(join(plugin_location, pluginJSON.tara.client)).default });
     } else {
-      this.setState({ contents: require(join(plugin_location, pluginJSON.main)).client });
+      this.setState({ contents: requireFoolWebpack(join(plugin_location, pluginJSON.main)).client });
     }
   }
   render() {

src/index.js

@@ -39,5 +39,5 @@ const render = Component => {
 
 render(App);
 if (module.hot) {
-  module.hot.accept("../containers/app.jsx", () => render(App));
+  module.hot.accept("./containers/app.jsx", () => render(App));
 }

src/reducers/get-plugin-reducers.js

@@ -2,6 +2,7 @@
  * @overview File to get redux reducers from file
  */
 import { join } from "path";
+const requireFoolWebpack = require("require-fool-webpack");
 import { PLUGIN_CONFIG, PLUGIN_LOCATION, PLUGIN_CORE_CONFIG, PLUGIN_CORE_LOCATION } from "../renderer/constants";
 import { getPluginPath } from "../renderer/utils";
 import getPlugins from "../renderer/boot/plugins";
@@ -22,18 +23,18 @@ export default () => {
   let reducersObj = {};
   for (let plugin of plugins) {
     const location = getPluginPath(plugin.name);
-    const pkgJSON = require(join(location, "package.json"));
+    const pkgJSON = requireFoolWebpack(join(location, "package.json"));
     // Check where to get reducer from
     if (pkgJSON.hasOwnProperty("tara") && pkgJSON.tara.hasOwnProperty("reducers") && pkgJSON.tara.type === "plugin") {
       // Rqeuire reducer file
-      const reducers = require(join(location, pkgJSON.tara.reducers)).default;
+      const reducers = requireFoolWebpack(join(location, pkgJSON.tara.reducers)).default;
       reducersObj = {
         ...reducersObj,
         ...reducers
       };
     } else if (pkgJSON.tara.type === "plugin") {
       // Require main file
-      const { reducers } = require(join(location, pkgJSON.main));
+      const { reducers } = requireFoolWebpack(join(location, pkgJSON.main));
       reducersObj = {
         ...reducersObj,
         ...reducers

src/renderer/boot/layout.js

@@ -5,11 +5,12 @@
 import { eachSeries } from "async";
 import fs from "fs";
 import { join } from "path";
+const requireFoolWebpack = require("require-fool-webpack");
 import Logger from "../logger.ts";
 import { LAYOUT_LOCATION, LAYOUT_SETUP_DONE_LOCATION, PLUGIN_LOCATION, TYPE_PLUGIN, REGEN_LAYOUT_ARGS, LAYOUT_LOCATION_DEFAULT } from "../constants";
 import { copy } from "../utils";
 // Location of layout files
-const setupDB = require(LAYOUT_SETUP_DONE_LOCATION);
+const setupDB = requireFoolWebpack(LAYOUT_SETUP_DONE_LOCATION);
 
 // Logger
 const logger = new Logger({
@@ -280,7 +281,7 @@ class TaraLayoutClass {
    */
   static getConfig(file) {
     // Requires file
-    return require(LAYOUT_LOCATION);
+    return requireFoolWebpack(LAYOUT_LOCATION);
   }
 
   /**
@@ -341,7 +342,7 @@ export default async (plugins, location, callback) => {
     // What file to use??
     if (plugin.tara.hasOwnProperty("init")) {
       logger.debug(`Using init script ${plugin.tara.init}...`);
-      const init = require(join(location, plugin.name, plugin.tara.init));
+      const init = requireFoolWebpack(join(location, plugin.name, plugin.tara.init));
       // Run
       init(TaraLayout, async (tara) => {
         // Update config
@@ -354,10 +355,10 @@ export default async (plugins, location, callback) => {
         // Add to index
         TaraLayoutClass.updateSetupDone(plugin.name);
       });
-    } else if (require(join(location, plugin.name, plugin.main)).hasOwnProperty("init")) {
+    } else if (requireFoolWebpack(join(location, plugin.name, plugin.main)).hasOwnProperty("init")) {
       // Use entry
       logger.debug(`Using entry file ${plugin.main}...`);
-      const { init } = require(join(location, plugin.name, plugin.main));
+      const { init } = requireFoolWebpack(join(location, plugin.name, plugin.main));
       // Run
       init(TaraLayout, async (tara) => {
         // Use JS's mutable objects

src/renderer/boot/main-process.js

@@ -5,6 +5,7 @@ import { cyan } from "chalk";
 import fs from "fs";
 import electron from "electron"; // eslint-disable-line
 import path from "path";
+const requireFoolWebpack = require("require-fool-webpack");
 import addEventListeners from "./event-listeners";
 import Logger from "../logger.ts";
 import TaraPlugin from "./plugin-init.ts";
@@ -36,13 +37,13 @@ export const startMainProcessPlugins = (plugins, location) => {
     const taraPluginClass = new TaraPlugin(plugin, electron);
     if (plugin.tara.hasOwnProperty("mainProcess")) {
       logger.debug("Using a custom script.");
-      const main = require(path.join(location, plugin.name, plugin.tara.mainProcess));
+      const main = requireFoolWebpack(path.join(location, plugin.name, plugin.tara.mainProcess));
       // Run
       main(taraPluginClass);
     } else {
       fs.access(path.join(location, plugin.name, plugin.main), (err) => {
-        if (!err && require(path.join(location, plugin.name, plugin.main)).hasOwnProperty("main")) {
-          const { main } = require(path.join(location, plugin.name, plugin.main));
+        if (!err && requireFoolWebpack(path.join(location, plugin.name, plugin.main)).hasOwnProperty("main")) {
+          const { main } = requireFoolWebpack(path.join(location, plugin.name, plugin.main));
           // Run
           main(taraPluginClass);
         } else {

src/renderer/boot/plugin-init.ts

@@ -3,6 +3,7 @@
  */
 import * as Electron from "electron";
 import { join } from "path";
+const requireFoolWebpack = require("require-fool-webpack");
 import Logger from "../logger";
 import getPlugins from "./plugins";
 import { TARA_CONFIG, CONFIG_FILE, PLUGIN_LOCATION, PLUGIN_CORE_LOCATION, PLUGIN_CONFIG, PLUGIN_CORE_CONFIG } from "../constants";
@@ -116,31 +117,31 @@ export default class TaraPlugin {
       location = PLUGIN_CORE_LOCATION;
 
       // Load
-      const pluginJSON = require(join(location, plugin, "package.json"));
+      const pluginJSON = requireFoolWebpack(join(location, plugin, "package.json"));
       let pluginFile: string;
       if (pluginJSON.hasOwnProperty("tara") && pluginJSON.tara.hasOwnProperty("api")) {
         pluginFile = join(location, plugin, pluginJSON.tara.api);
         // Require it & return
-        return await require(pluginFile);
+        return await requireFoolWebpack(pluginFile);
       } else {
         pluginFile = join(location, plugin, pluginJSON.main);
         // Require it & return
-        return await require(pluginFile).api;
+        return await requireFoolWebpack(pluginFile).api;
       }
     } else if (getPlugins(PLUGIN_CONFIG, PLUGIN_LOCATION, "name").includes(plugin)) {
       location = PLUGIN_LOCATION;
 
       // Load
-      const pluginJSON = require(join(location, plugin, "package.json"));
+      const pluginJSON = requireFoolWebpack(join(location, plugin, "package.json"));
       let pluginFile: string;
       if (pluginJSON.hasOwnProperty("tara") && pluginJSON.tara.hasOwnProperty("api")) {
         pluginFile = join(location, plugin, pluginJSON.tara.api);
         // Require it & return
-        return await require(pluginFile);
+        return await requireFoolWebpack(pluginFile);
       } else {
         pluginFile = join(location, plugin, pluginJSON.main);
         // Require it & return
-        return await require(pluginFile).api;
+        return await requireFoolWebpack(pluginFile).api;
       }
     }
   }

src/renderer/boot/plugins.js

@@ -2,6 +2,7 @@
  * @overview File to load plugins
  */
 import { join } from "path";
+const requireFoolWebpack = require("require-fool-webpack");
 
 /**
  * Loads plugins
@@ -12,14 +13,14 @@ import { join } from "path";
  */
 export default (config, location, prop = null) => {
   // Plugin config file
-  const plugins = require(config);
+  const plugins = requireFoolWebpack(config);
 
   // Grab each pkg.json and send to store
   const pluginArray = [];
   for (let plugin in plugins.dependencies) {
     if (plugins.dependencies.hasOwnProperty(plugin)) {
       // Require
-      const pluginJSON = require(join(location, plugin, "package.json"));
+      const pluginJSON = requireFoolWebpack(join(location, plugin, "package.json"));
       // ...and store
       if (!prop) {
         pluginArray.push(pluginJSON);

src/renderer/boot/protocols.js

@@ -6,12 +6,13 @@ import fs from "fs";
 import { join, resolve, normalize } from "path";
 import { app, protocol } from "electron"; // eslint-disable-line
 import sass from "node-sass";
+const requireFoolWebpack = require("require-fool-webpack");
 import { TARA_CONFIG, CONFIG_FILE } from "../constants";
 import Logger from "../logger.ts";
 import getPluginPath from "../utils/get-plugin-path";
 
 // Config
-const config = require(join(TARA_CONFIG, CONFIG_FILE));
+const config = requireFoolWebpack(join(TARA_CONFIG, CONFIG_FILE));
 
 const logger = new Logger({
   name: "protocol"
@@ -37,7 +38,7 @@ function registerTara() {
         logger.debug("Theme requested.  Sending...");
         const pluginPath = getPluginPath(config.theme);
         // Get theme entry
-        const pluginPkgJSON = require(join(pluginPath, "package.json"));
+        const pluginPkgJSON = requireFoolWebpack(join(pluginPath, "package.json"));
         const themeFile = join(pluginPath, pluginPkgJSON.tara.theme);
         logger.debug(`Using theme file ${blue(join(themeFile))}.`);
         // Compile

src/renderer/boot/theme.js

@@ -5,12 +5,13 @@
 import { blue, green, yellow } from "chalk";
 import fs from "fs";
 import { join, resolve } from "path";
+const requireFoolWebpack = require("require-fool-webpack");
 import Logger from "../logger.ts";
 import { TARA_CONFIG, CONFIG_FILE, THEME_FILE, PLUGIN_LOCATION, PLUGIN_CONFIG, PLUGIN_CORE_LOCATION, PLUGIN_CORE_CONFIG, THEME_FILE_CONTENTS_DEFAULT } from "../constants";
 import getPluginPath from "../utils/get-plugin-path";
 
 // Config
-const config = require(join(TARA_CONFIG, CONFIG_FILE));
+const config = requireFoolWebpack(join(TARA_CONFIG, CONFIG_FILE));
 
 const logger = new Logger({
   name: "theme"
@@ -52,7 +53,7 @@ export default () => {
     logger.debug(`Old Theme: ${yellow(currentTheme)}`);
     const pluginPath = getPluginPath(config.theme);
     // Get theme entry
-    const pluginPkgJSON = require(join(pluginPath, "package.json"));
+    const pluginPkgJSON = requireFoolWebpack(join(pluginPath, "package.json"));
     const themeFile = join(pluginPath, pluginPkgJSON.tara.theme);
     logger.debug(`Using theme file ${blue(join(themeFile))}.`);
     const newTheme = `${THEME_FILE_CONTENTS_DEFAULT} "${config.theme}"\n@import ${JSON.stringify(themeFile)}\n`;

src/renderer/utils/get-plugin-path.js

@@ -3,6 +3,7 @@
  */
 import { yellow } from "chalk";
 import { join, resolve, normalize } from "path";
+const requireFoolWebpack = require("require-fool-webpack");
 import Logger from "../logger.ts";
 import { PLUGIN_LOCATION, PLUGIN_CONFIG, PLUGIN_CORE_LOCATION, PLUGIN_CORE_CONFIG } from "../constants";
 
@@ -18,8 +19,8 @@ const logger = new Logger({
   */
 export default (plugin) => {
   // Check config
-  const pluginsConfig = require(PLUGIN_CONFIG);
-  const pluginsConfigCore = require(PLUGIN_CORE_CONFIG);
+  const pluginsConfig = requireFoolWebpack(PLUGIN_CONFIG);
+  const pluginsConfigCore = requireFoolWebpack(PLUGIN_CORE_CONFIG);
   if (pluginsConfig.dependencies.hasOwnProperty(plugin)) {
     logger.debug(`Plugin ${yellow(plugin)} is user installed`);
     return join(PLUGIN_LOCATION, plugin);

src/shared/config.ts

@@ -4,6 +4,7 @@
 import { writeFile } from "fs";
 import { Config } from "../renderer/interfaces";
 import Logger from "../renderer/logger";
+const requireFoolWebpack = require("require-fool-webpack");
 
 /**
  * Config class
@@ -31,7 +32,7 @@ export default class ConfigClass {
    * @private
    */
   private _getConfig() {
-    this.config = require(this.configFile);
+    this.config = requireFoolWebpack(this.configFile);
   }
 
   /**

webpack.config.dev.js

@@ -8,5 +8,5 @@ module.exports = {
     ]
   },
   stats: "minimal",
-  devtool: "eval-source-map"
+  devtool: "source-map"
 };