From 47dd7b48af304d78234547271f4ca0939038cce8 Mon Sep 17 00:00:00 2001
From: Ingo Schommer <ingo@silverstripe.com>
Date: Sat, 26 Mar 2016 18:41:24 +1300
Subject: [PATCH] Relative ES6 module paths

http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416
https://github.com/substack/node-browserify/issues/767
http://stackoverflow.com/questions/28078780/relative-paths-in-package-json
https://github.com/npm/npm/issues/1558
http://stackoverflow.com/questions/31624567/webstorm-es6-named-import-getting-cannot-resolve-symbol-error/31631415
http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416
https://github.com/vigetlabs/gulp-starter/issues/17#issuecomment-44292681
---
 admin/javascript/src/boot/index.js            |  8 ++--
 .../javascript/src/components/action/index.js |  8 ++--
 .../src/components/form-action/index.js       |  2 +-
 .../src/components/form-builder/index.js      | 12 ++---
 .../form-builder/tests/form-builder-test.js   |  2 +-
 admin/javascript/src/components/form/index.js |  4 +-
 .../src/components/grid-field/cell.js         |  2 +-
 .../src/components/grid-field/header-cell.js  |  2 +-
 .../src/components/grid-field/header.js       |  2 +-
 .../src/components/grid-field/index.js        |  2 +-
 .../src/components/grid-field/row.js          |  2 +-
 .../src/components/grid-field/table.js        |  2 +-
 .../src/components/hidden-field/index.js      |  2 +-
 .../north-header-breadcrumbs/index.js         |  2 +-
 .../src/components/north-header/index.js      |  2 +-
 .../src/components/text-field/index.js        |  2 +-
 .../src/sections/campaign-admin/controller.js |  7 ++-
 .../src/sections/campaign-admin/index.js      |  2 +-
 ...Component.js => silverstripe-component.js} |  0
 gulpfile.js                                   | 45 ++++++++++---------
 package.json                                  |  5 +--
 21 files changed, 58 insertions(+), 57 deletions(-)
 rename admin/javascript/src/{SilverStripeComponent.js => silverstripe-component.js} (100%)

diff --git a/admin/javascript/src/boot/index.js b/admin/javascript/src/boot/index.js
index 0c5128067..38066e280 100644
--- a/admin/javascript/src/boot/index.js
+++ b/admin/javascript/src/boot/index.js
@@ -4,12 +4,12 @@ import thunkMiddleware from 'redux-thunk';
 import createLogger from 'redux-logger';
 import reducerRegister from 'reducer-register';
 
-import * as configActions from '../state/config/actions';
-import ConfigReducer from '../state/config/reducer';
-import SchemaReducer from '../state/schema/reducer';
+import * as configActions from 'state/config/actions';
+import ConfigReducer from 'state/config/reducer';
+import SchemaReducer from 'state/schema/reducer';
 
 // Sections
-import CampaignAdmin from '../sections/campaign-admin';
+import CampaignAdmin from 'sections/campaign-admin';
 
 function appBoot() {
     reducerRegister.add('config', ConfigReducer);
diff --git a/admin/javascript/src/components/action/index.js b/admin/javascript/src/components/action/index.js
index 4af8004d6..35c29bcb5 100644
--- a/admin/javascript/src/components/action/index.js
+++ b/admin/javascript/src/components/action/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import SilverStripeComponent from '../../SilverStripeComponent';
+import SilverStripeComponent from 'silverstripe-component.js';
 
 class ActionComponent extends SilverStripeComponent {
     constructor(props) {
@@ -8,7 +8,7 @@ class ActionComponent extends SilverStripeComponent {
 
         this.handleClick = this.handleClick.bind(this);
     }
-    
+
     render() {
         return (
             <button className={this.getButtonClasses()} onClick={this.handleClick}>
@@ -44,7 +44,7 @@ class ActionComponent extends SilverStripeComponent {
             buttonClasses += ' btn-secondary';
         } else if (this.props.type === 'complete') {
             buttonClasses += ' btn-success-outline';
-        } 
+        }
 
         // Add icon class
         if (typeof this.props.icon !== 'undefined') {
@@ -73,7 +73,7 @@ class ActionComponent extends SilverStripeComponent {
         if (this.props.loading) {
             return (
                 <div className="btn__loading-icon" >
-                    <svg viewBox="0 0 44 12"> 
+                    <svg viewBox="0 0 44 12">
                         <circle cx="6" cy="6" r="6" />
                         <circle cx="22" cy="6" r="6" />
                         <circle cx="38" cy="6" r="6" />
diff --git a/admin/javascript/src/components/form-action/index.js b/admin/javascript/src/components/form-action/index.js
index 6fb2cfa03..b31ac5898 100644
--- a/admin/javascript/src/components/form-action/index.js
+++ b/admin/javascript/src/components/form-action/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SilverStripeComponent from '../../SilverStripeComponent';
+import SilverStripeComponent from 'silverstripe-component.js';
 
 class FormActionComponent extends SilverStripeComponent {
 
diff --git a/admin/javascript/src/components/form-builder/index.js b/admin/javascript/src/components/form-builder/index.js
index d96cbada0..c4ae70928 100644
--- a/admin/javascript/src/components/form-builder/index.js
+++ b/admin/javascript/src/components/form-builder/index.js
@@ -2,12 +2,12 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import $ from 'jQuery';
-import * as schemaActions from '../../state/schema/actions';
-import SilverStripeComponent from '../../SilverStripeComponent';
-import FormComponent from '../form';
-import TextField from '../text-field';
-import HiddenField from '../hidden-field';
-import GridField from '../../components/grid-field';
+import * as schemaActions from 'state/schema/actions';
+import SilverStripeComponent from 'silverstripe-component.js';
+import FormComponent from 'components/form';
+import TextField from 'components/text-field';
+import HiddenField from 'components/hidden-field';
+import GridField from 'components/grid-field';
 
 // Using this to map field types to components until we implement dependency injection.
 var fakeInjector = {
diff --git a/admin/javascript/src/components/form-builder/tests/form-builder-test.js b/admin/javascript/src/components/form-builder/tests/form-builder-test.js
index e22ed2481..760f44e89 100644
--- a/admin/javascript/src/components/form-builder/tests/form-builder-test.js
+++ b/admin/javascript/src/components/form-builder/tests/form-builder-test.js
@@ -1,4 +1,4 @@
-jest.unmock('../../../SilverStripeComponent');
+jest.unmock('silverstripe-component.js');
 jest.unmock('../');
 
 import { FormBuilderComponent } from '../';
diff --git a/admin/javascript/src/components/form/index.js b/admin/javascript/src/components/form/index.js
index 5903d7d21..0f45bb95e 100644
--- a/admin/javascript/src/components/form/index.js
+++ b/admin/javascript/src/components/form/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import SilverStripeComponent from '../../SilverStripeComponent';
-import FormActionComponent from '../form-action';
+import SilverStripeComponent from 'silverstripe-component.js';
+import FormActionComponent from 'components/form-action';
 
 class FormComponent extends SilverStripeComponent {
 
diff --git a/admin/javascript/src/components/grid-field/cell.js b/admin/javascript/src/components/grid-field/cell.js
index 5b8057c39..5e55738dd 100644
--- a/admin/javascript/src/components/grid-field/cell.js
+++ b/admin/javascript/src/components/grid-field/cell.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SilverStripeComponent from '../../SilverStripeComponent';
+import SilverStripeComponent from 'silverstripe-component.js';
 
 class GridFieldCellComponent extends SilverStripeComponent {
 
diff --git a/admin/javascript/src/components/grid-field/header-cell.js b/admin/javascript/src/components/grid-field/header-cell.js
index b131f555a..e6c7aee7f 100644
--- a/admin/javascript/src/components/grid-field/header-cell.js
+++ b/admin/javascript/src/components/grid-field/header-cell.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SilverStripeComponent from '../../SilverStripeComponent';
+import SilverStripeComponent from 'silverstripe-component.js';
 
 class GridFieldHeaderCellComponent extends SilverStripeComponent {
 
diff --git a/admin/javascript/src/components/grid-field/header.js b/admin/javascript/src/components/grid-field/header.js
index 2a5cf1cc6..06c6e9e15 100644
--- a/admin/javascript/src/components/grid-field/header.js
+++ b/admin/javascript/src/components/grid-field/header.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SilverStripeComponent from '../../SilverStripeComponent';
+import SilverStripeComponent from 'silverstripe-component.js';
 import GridFieldRowComponent from './row';
 
 class GridFieldHeaderComponent extends SilverStripeComponent {
diff --git a/admin/javascript/src/components/grid-field/index.js b/admin/javascript/src/components/grid-field/index.js
index 848a94dc4..5a09e67c8 100644
--- a/admin/javascript/src/components/grid-field/index.js
+++ b/admin/javascript/src/components/grid-field/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SilverStripeComponent from '../../SilverStripeComponent';
+import SilverStripeComponent from 'silverstripe-component.js';
 import GridFieldTable from './table';
 import GridFieldHeader from './header';
 import GridFieldHeaderCell from './header-cell';
diff --git a/admin/javascript/src/components/grid-field/row.js b/admin/javascript/src/components/grid-field/row.js
index ff91b4e48..74479f50b 100644
--- a/admin/javascript/src/components/grid-field/row.js
+++ b/admin/javascript/src/components/grid-field/row.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SilverStripeComponent from '../../SilverStripeComponent';
+import SilverStripeComponent from 'silverstripe-component.js';
 
 class GridFieldRowComponent extends SilverStripeComponent {
 
diff --git a/admin/javascript/src/components/grid-field/table.js b/admin/javascript/src/components/grid-field/table.js
index 858ade0a2..76d205ca3 100644
--- a/admin/javascript/src/components/grid-field/table.js
+++ b/admin/javascript/src/components/grid-field/table.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SilverStripeComponent from '../../SilverStripeComponent';
+import SilverStripeComponent from 'silverstripe-component.js';
 
 class GridFieldTableComponent extends SilverStripeComponent {
 
diff --git a/admin/javascript/src/components/hidden-field/index.js b/admin/javascript/src/components/hidden-field/index.js
index bcbe9ff13..309a77103 100644
--- a/admin/javascript/src/components/hidden-field/index.js
+++ b/admin/javascript/src/components/hidden-field/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SilverStripeComponent from '../../SilverStripeComponent';
+import SilverStripeComponent from 'silverstripe-component.js';
 
 class HiddenFieldComponent extends SilverStripeComponent {
 
diff --git a/admin/javascript/src/components/north-header-breadcrumbs/index.js b/admin/javascript/src/components/north-header-breadcrumbs/index.js
index dc8e3c532..5e2f1be31 100644
--- a/admin/javascript/src/components/north-header-breadcrumbs/index.js
+++ b/admin/javascript/src/components/north-header-breadcrumbs/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SilverStripeComponent from '../../SilverStripeComponent';
+import SilverStripeComponent from 'silverstripe-component.js';
 
 class NorthHeaderBreadcrumbsComponent extends SilverStripeComponent {
 
diff --git a/admin/javascript/src/components/north-header/index.js b/admin/javascript/src/components/north-header/index.js
index a9d44c122..d4ea019ef 100644
--- a/admin/javascript/src/components/north-header/index.js
+++ b/admin/javascript/src/components/north-header/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import NorthHeaderBreadcrumbsComponent from '../north-header-breadcrumbs';
-import SilverStripeComponent from '../../SilverStripeComponent';
+import SilverStripeComponent from 'silverstripe-component.js';
 
 class NorthHeaderComponent extends SilverStripeComponent {
 
diff --git a/admin/javascript/src/components/text-field/index.js b/admin/javascript/src/components/text-field/index.js
index 15cd5a311..9ef3ffccb 100644
--- a/admin/javascript/src/components/text-field/index.js
+++ b/admin/javascript/src/components/text-field/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SilverStripeComponent from '../../SilverStripeComponent';
+import SilverStripeComponent from 'silverstripe-component.js';
 
 class TextFieldComponent extends SilverStripeComponent {
 
diff --git a/admin/javascript/src/sections/campaign-admin/controller.js b/admin/javascript/src/sections/campaign-admin/controller.js
index 5c827c233..6a59f1097 100644
--- a/admin/javascript/src/sections/campaign-admin/controller.js
+++ b/admin/javascript/src/sections/campaign-admin/controller.js
@@ -1,11 +1,10 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import SilverStripeComponent from 'silverstripe-component';
-import ActionButton from 'action-button';
+import ActionButton from 'components/action-button';
 import i18n from 'i18n';
-import NorthHeader from 'north-header';
-import GridField from 'grid-field';
-import FormBuilder from '../../components/form-builder';
+import NorthHeader from 'components/north-header';
+import FormBuilder from 'components/form-builder';
 
 class CampaignAdminContainer extends SilverStripeComponent {
 
diff --git a/admin/javascript/src/sections/campaign-admin/index.js b/admin/javascript/src/sections/campaign-admin/index.js
index f911df9e7..001c09e6e 100644
--- a/admin/javascript/src/sections/campaign-admin/index.js
+++ b/admin/javascript/src/sections/campaign-admin/index.js
@@ -4,7 +4,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import CampaignAdmin from './controller';
-import campaignsReducer from '../../state/campaigns/reducer';
+import campaignsReducer from 'state/campaigns/reducer';
 
 // TODO: Move this to the controller.
 reducerRegister.add('campaigns', campaignsReducer);
diff --git a/admin/javascript/src/SilverStripeComponent.js b/admin/javascript/src/silverstripe-component.js
similarity index 100%
rename from admin/javascript/src/SilverStripeComponent.js
rename to admin/javascript/src/silverstripe-component.js
diff --git a/gulpfile.js b/gulpfile.js
index 0ef589708..efc33e256 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -41,7 +41,10 @@ var PATHS = {
 // Folders which contain both scss and css folders to be compiled
 var rootCompileFolders = [PATHS.FRAMEWORK, PATHS.ADMIN, PATHS.FRAMEWORK_DEV_INSTALL]
 
-var browserifyOptions = { debug: true };
+var browserifyOptions = {
+	debug: true,
+	paths: [PATHS.ADMIN_JAVASCRIPT_SRC, PATHS.FRAMEWORK_JAVASCRIPT_SRC]
+};
 
 var babelifyOptions = {
     presets: ['es2015', 'react'],
@@ -189,22 +192,23 @@ gulp.task('bundle-lib', function bundleLib() {
         .on('update', bundleLib)
         .on('log', function (msg) { gulpUtil.log('Finished', 'bundled ' + bundleFileName + ' ' + msg) })
         .transform('babelify', babelifyOptions)
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/action',                   { expose: 'action-button' })
-        .require('deep-freeze',                                                       { expose: 'deep-freeze' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/form',                     { expose: 'form' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/form-action',              { expose: 'form-action' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/form-builder',             { expose: 'form-builder' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field',               { expose: 'grid-field' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/cell',          { expose: 'grid-field-cell' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/header',        { expose: 'grid-field-header' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/header-cell',   { expose: 'grid-field-header-cell' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/row',           { expose: 'grid-field-row' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/table',         { expose: 'grid-field-table' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/hidden-field',             { expose: 'hidden-field' })
+        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/action',                   { expose: 'components/action-button' })
+        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/form',                     { expose: 'components/form' })
+        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/form-action',              { expose: 'components/form-action' })
+        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/form-builder',             { expose: 'components/form-builder' })
+        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field',               { expose: 'components/grid-field' })
+        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/cell',          { expose: 'components/grid-field/cell' })
+        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/header',        { expose: 'components/grid-field/header' })
+        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/header-cell',   { expose: 'components/grid-field/header-cell' })
+        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/row',           { expose: 'components/grid-field/row' })
+        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/table',         { expose: 'components/grid-field/table' })
+        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/hidden-field',             { expose: 'components/hidden-field' })
+	    .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/text-field',               { expose: 'components/text-field' })
+	    .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/north-header',             { expose: 'components/north-header' })
+	    .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/north-header-breadcrumbs', { expose: 'components/north-header-breadcrumbs' })
+	    .require('deep-freeze',                                                       { expose: 'deep-freeze' })
         .require(PATHS.FRAMEWORK_JAVASCRIPT_SRC + '/i18n.js',                         { expose: 'i18n' })
         .require(PATHS.FRAMEWORK_JAVASCRIPT_SRC + '/jQuery.js',                       { expose: 'jQuery' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/north-header',             { expose: 'north-header' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/north-header-breadcrumbs', { expose: 'north-header-breadcrumbs' })
         .require('react',                                                             { expose: 'react' })
         .require('react-addons-css-transition-group',                                 { expose: 'react-addons-css-transition-group' })
         .require('react-addons-test-utils',                                           { expose: 'react-addons-test-utils' })
@@ -214,8 +218,7 @@ gulp.task('bundle-lib', function bundleLib() {
         .require('redux',                                                             { expose: 'redux' })
         .require('redux-thunk',                                                       { expose: 'redux-thunk' })
         .require(PATHS.FRAMEWORK_JAVASCRIPT_SRC + '/router.js',                       { expose: 'router' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/SilverStripeComponent',               { expose: 'silverstripe-component' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/text-field',               { expose: 'text-field' })
+        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/silverstripe-component.js',           { expose: 'silverstripe-component' })
         .bundle()
 		.on('update', bundleLib)
         .on('error', notify.onError({ message: bundleFileName + ': <%= error.message %>' }))
@@ -256,13 +259,13 @@ gulp.task('bundle-framework', function bundleBoot() {
         .on('update', bundleBoot)
         .on('log', function (msg) { gulpUtil.log('Finished', 'bundled ' + bundleFileName + ' ' + msg) })
         .transform('babelify', babelifyOptions)
-        .external('action-button')
+        .external('components/action-button')
+	    .external('components/north-header')
+	    .external('components/form-builder')
         .external('deep-freeze')
-        .external('grid-field')
+        .external('components/grid-field')
         .external('i18n')
         .external('jQuery')
-        .external('jQuery')
-        .external('north-header')
         .external('page.js')
         .external('react-addons-test-utils')
         .external('react-dom')
diff --git a/package.json b/package.json
index dd592abb7..c05f64681 100644
--- a/package.json
+++ b/package.json
@@ -11,13 +11,12 @@
   },
   "scripts": {
     "build": "gulp build",
-    "bundle": "gulp bundle",
-    "coverage": "jest --coverage",
     "css": "gulp css",
     "lock": "npm-shrinkwrap --dev",
     "sanity": "gulp sanity",
     "sprites": "gulp sprites",
-    "test": "jest",
+    "test": "NODE_PATH=\"./javascript/src:./admin/javascript/src\" jest",
+    "coverage": "NODE_PATH=\"./javascript/src:./admin/javascript/src\" jest --coverage",
     "thirdparty": "gulp thirdparty"
   },
   "repository": {