feat: React support

Close #12

Author: develar

docs/en/languages-and-frameworks.md

@@ -34,7 +34,11 @@ declare module "*.vue" {
 
 `yarn add vue electron-webpack-vue --dev`
 
-Please note — [Chrome devtools extension for debugging Vue.js applications](https://github.com/vuejs/vue-devtools) is automatically installed in a dev mode. 
+Please note — [Chrome devtools extension for debugging Vue.js applications](https://github.com/vuejs/vue-devtools) is automatically installed in a dev mode.
+
+## React
+
+`yarn add babel-preset-react --dev`
 
 ## iView
 

packages/electron-webpack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "electron-webpack",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "license": "MIT",
   "author": "Vladimir Krivosheev <develar@gmail.com>",
   "main": "out/main.js",

packages/electron-webpack/src/configurators/js.ts

@@ -2,15 +2,23 @@ import { gte } from "semver"
 import { WebpackConfigurator } from "../main"
 
 export function createBabelLoader(configurator: WebpackConfigurator) {
+  // better to use require instead of just preset sname to avoid babel resolving (in our test we set custom resolver - and only in case of explicit required it works)
+  const presets = [
+    [
+      require("babel-preset-env"), {
+      modules: false,
+      targets: computeBabelEnvTarget(configurator.isRenderer, configurator.electronVersion),
+    }],
+  ]
+
+  if (configurator.hasDevDependency("babel-preset-react")) {
+    presets.push([require("babel-preset-react")])
+  }
+
   return {
     loader: "babel-loader",
     options: {
-      presets: [
-        [require("babel-preset-env"), {
-          modules: false,
-          targets: computeBabelEnvTarget(configurator.isRenderer, configurator.electronVersion),
-        }],
-      ],
+      presets,
       plugins: [
         require("babel-plugin-syntax-dynamic-import"),
       ]

test/out/__snapshots__/loaderDetectionTest.js.snap

@@ -44,6 +44,8 @@ resolve 'nunjucks-loader' in '<project-dir>'
  @ multi <project-dir>/src/main/index.js"
 `;
 
+exports[`react 1`] = `"Cannot find module 'babel-preset-react' from 'js.js'"`;
+
 exports[`sass 1`] = `
 "<project-dir>/src/renderer/index.js
 Module not found: Error: Can't resolve 'sass-loader' in '<project-dir>'

test/src/loaderDetectionTest.ts

@@ -21,12 +21,6 @@ test("nunjucks", async () => {
 
 test("sass", async () => {
   const projectDir = await getMutableProjectDir()
-  await writeJson(path.join(projectDir, "package.json"), {
-    name: "Test",
-    devDependencies: {
-      "nunjucks-loader": "*"
-    }
-  })
   await writeFile(path.join(projectDir, "src/renderer/file.scss"), `
   $font-stack:    Helvetica, sans-serif;
   $primary-color: #333;
@@ -41,4 +35,24 @@ test("sass", async () => {
   }})
 
   return await assertThat(testWebpack(configuration, projectDir)).throws(projectDir)
+})
+
+test("react", async () => {
+  const projectDir = await getMutableProjectDir()
+  await writeJson(path.join(projectDir, "package.json"), {
+    name: "Test",
+    devDependencies: {
+      "babel-preset-react": "*"
+    }
+  })
+  await writeFile(path.join(projectDir, "src/renderer/file.jsx"), `
+<MyButton color="blue" shadowSize={2}>
+  Click Me
+</MyButton>
+  `)
+  await writeFile(path.join(projectDir, "src/renderer/index.js"), 'import "./file.jsx"')
+  const configuration = require("electron-webpack/webpack.renderer.config.js")({production: true, configuration: {
+    projectDir,
+  }})
+  await assertThat(configuration).throws(projectDir)
 })