Fix jsx compilation (#10)

* 	Change extension of files with JSX syntax in them

* 	Add a magical loader to allow importing of .jsx files

* 	Remove all .js counterparts of jsx files

* 	The miracle of successful compilation is performed. Hosana in the highest!!

gulp-tasks/extensions.js

@@ -0,0 +1,87 @@
+/**
+    This file contains black magic. Don't overthink it.
+
+    In rollup configuration use it like this:
+
+    const extensions = require("./extensions")
+    rollup({
+        plugins: [
+            extensions({
+                extensions: [".jsx", ".foobar", ".etc"]
+            }),
+        ]
+    });
+
+    Most of this file's code was taken from here: https://github.com/rollup/rollup/issues/1052
+ */
+
+const { basename, dirname, isAbsolute, resolve } = require("path");
+const fs = require("fs");
+
+function isFile(file) {
+    try {
+        return fs.statSync(file).isFile();
+    } catch (err) {
+        return false;
+    }
+}
+
+function addExtensionIfNecessary(file, extensions) {
+    try {
+        const name = basename(file);
+        const files = fs.readdirSync(dirname(file));
+
+        if (~files.indexOf(name) && isFile(file)) return file;
+        for (const ext of extensions) {
+            if (~files.indexOf(`${name}${ext}`) && isFile(`${file}${ext}`)) {
+                return `${file}${ext}`;
+            }
+
+            // In case `file` is a folder name, we check if there is an
+            // index file in the folder
+            const indexPath = `${file}/index${ext}`;
+            if (isFile(indexPath)) {
+                return indexPath;
+            }
+        }
+    } catch (err) {
+        // noop
+    }
+
+    return null;
+}
+
+module.exports = function extensions({ extensions }) {
+    if (!extensions || !extensions.length) {
+        throw new Error(
+            `Must specify { extensions: [..] } as non-empty array!`
+        );
+    }
+
+    return {
+        name: "extensions",
+
+        resolveId(importee, importer) {
+            // absolute paths are left untouched
+            if (isAbsolute(importee)) {
+                return addExtensionIfNecessary(resolve(importee), extensions);
+            }
+
+            // if this is the entry point, resolve against cwd
+            if (importer === undefined) {
+                return addExtensionIfNecessary(
+                    resolve(process.cwd(), importee),
+                    extensions
+                );
+            }
+
+            // external modules are skipped at this stage
+            if (importee[0] !== ".") return null;
+
+            return addExtensionIfNecessary(
+                resolve(dirname(importer), importee),
+                extensions
+            );
+        }
+    };
+};

gulp-tasks/transpile-react.js

@@ -25,6 +25,7 @@ const nodeResolve = require('rollup-plugin-node-resolve');
 const organiser = require('gulp-organiser');
 const rename = require('gulp-rename');
 const { curry } = require('lodash/fp');
+const extensions = require("./extensions");
 
 const DEFAULT_CONFIG = {
   sourceMap: true,
@@ -34,6 +35,8 @@ const DEFAULT_CONFIG = {
   // Let's use UMD format to serve our files to the front-end
   format: 'umd',
   plugins: [
+    // Reslver to allow importing .jsx files
+    extensions({ extensions: [".jsx", ".js"] }),
     // Import modules with jsnext:main
     nodeResolve({	jsnext: true, main: true }),
     // Allow importing commonjs modules

src/js/index.jsx

@@ -0,0 +1,28 @@
+import store from "./store";
+import React from "react";
+// This is used to make the store available to all components
+import { Provider } from "react-redux";
+import ReactDOM from "react-dom";
+import assert from "fl-assert";
+import View from "./View";
+import { importState, importCustomComponents } from "./Actions";
+
+function FormBuilder(container, components = []) {
+    assert(
+        container && container.nodeName,
+        `Invalid contianer: ${container}. Container must be an HTML element.`
+    );
+
+    ReactDOM.render(
+        <Provider store={store}>
+            <View />
+        </Provider>,
+        container
+    );
+
+    store.dispatch(importCustomComponents(components));
+    this.exportState = _ => store.getState().fieldsState;
+    this.importState = s => store.dispatch(importState(s));
+}
+
+export default FormBuilder;