From 81d0f3c8b19551ddba417d005e46c5811bb2641b Mon Sep 17 00:00:00 2001 From: Kishan Date: Sat, 20 Jan 2018 12:09:26 +0000 Subject: [PATCH] :art: Get electron-webpack to run app :art: Got electron-webpack to run app, see electron-userland/electron-webpack#83 :bug: Now need to get packages working, going to compile on a per package bases. :art: Using source-map as devtool :art: Using sindresorhus/require-fool-webpack to solve webpack/webpack-dev-server#212 --- package-lock.json | 5 +++++ package.json | 4 +++- scripts/build-vars.sh | 4 ++-- src/components/app.jsx | 5 +++-- src/components/module.jsx | 11 ++++++----- src/index.js | 2 +- src/reducers/get-plugin-reducers.js | 7 ++++--- src/renderer/boot/layout.js | 11 ++++++----- src/renderer/boot/main-process.js | 7 ++++--- src/renderer/boot/plugin-init.ts | 13 +++++++------ src/renderer/boot/plugins.js | 5 +++-- src/renderer/boot/protocols.js | 5 +++-- src/renderer/boot/theme.js | 5 +++-- src/renderer/utils/get-plugin-path.js | 5 +++-- src/shared/config.ts | 3 ++- webpack.config.dev.js | 2 +- 16 files changed, 56 insertions(+), 38 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5816a78..a7ce523 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23716,6 +23716,11 @@ "resolved": "https://registry.npmjs.org/require-dot-file/-/require-dot-file-0.4.0.tgz", "integrity": "sha1-tb9ValWJXC1ZDl3srUU1cXhQqek=" }, + "require-fool-webpack": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/require-fool-webpack/-/require-fool-webpack-1.0.0.tgz", + "integrity": "sha1-O+qagMzYuOsmlF2cdx2WSpD2INc=" + }, "require-main-filename": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz", diff --git a/package.json b/package.json index 532468f..7b0b55a 100644 --- a/package.json +++ b/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", diff --git a/scripts/build-vars.sh b/scripts/build-vars.sh index 762846d..a96f4d2 100644 --- a/scripts/build-vars.sh +++ b/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 diff --git a/src/components/app.jsx b/src/components/app.jsx index 44d925d..c829c56 100644 --- a/src/components/app.jsx +++ b/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)); } diff --git a/src/components/module.jsx b/src/components/module.jsx index bfec35b..091b830 100644 --- a/src/components/module.jsx +++ b/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() { diff --git a/src/index.js b/src/index.js index 8eb56d0..3128b8b 100644 --- a/src/index.js +++ b/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)); } diff --git a/src/reducers/get-plugin-reducers.js b/src/reducers/get-plugin-reducers.js index 9910d32..7f18d59 100644 --- a/src/reducers/get-plugin-reducers.js +++ b/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 diff --git a/src/renderer/boot/layout.js b/src/renderer/boot/layout.js index 2e1b0ba..6af582a 100644 --- a/src/renderer/boot/layout.js +++ b/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 diff --git a/src/renderer/boot/main-process.js b/src/renderer/boot/main-process.js index 20095ad..e263dcf 100644 --- a/src/renderer/boot/main-process.js +++ b/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 { diff --git a/src/renderer/boot/plugin-init.ts b/src/renderer/boot/plugin-init.ts index 7e62bb5..cfbbbfb 100644 --- a/src/renderer/boot/plugin-init.ts +++ b/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; } } } diff --git a/src/renderer/boot/plugins.js b/src/renderer/boot/plugins.js index 8a51de4..332f665 100644 --- a/src/renderer/boot/plugins.js +++ b/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); diff --git a/src/renderer/boot/protocols.js b/src/renderer/boot/protocols.js index c03d694..680e0c3 100644 --- a/src/renderer/boot/protocols.js +++ b/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 diff --git a/src/renderer/boot/theme.js b/src/renderer/boot/theme.js index b0881da..cc2604c 100644 --- a/src/renderer/boot/theme.js +++ b/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`; diff --git a/src/renderer/utils/get-plugin-path.js b/src/renderer/utils/get-plugin-path.js index c58a987..9fd865a 100644 --- a/src/renderer/utils/get-plugin-path.js +++ b/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); diff --git a/src/shared/config.ts b/src/shared/config.ts index 5671e8b..009f197 100644 --- a/src/shared/config.ts +++ b/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); } /** diff --git a/webpack.config.dev.js b/webpack.config.dev.js index 6a3359b..fd1d0ed 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -8,5 +8,5 @@ module.exports = { ] }, stats: "minimal", - devtool: "eval-source-map" + devtool: "source-map" };