tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-09-29 20:59:23 +02:00
Code Issues Projects Releases Wiki Activity

Relative ES6 module paths

Browse Source 
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
This commit is contained in:
Ingo Schommer 2016-03-26 18:41:24 +13:00
parent c70590e50c
commit 47dd7b48af
21 changed files with 58 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
admin/javascript/src/boot/index.js
View File

@ -4,12 +4,12 @@ import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger'; import createLogger from 'redux-logger';
import reducerRegister from 'reducer-register'; import reducerRegister from 'reducer-register';
import * as configActions from '../state/config/actions'; import * as configActions from 'state/config/actions';
import ConfigReducer from '../state/config/reducer'; import ConfigReducer from 'state/config/reducer';
import SchemaReducer from '../state/schema/reducer'; import SchemaReducer from 'state/schema/reducer';
// Sections // Sections
import CampaignAdmin from '../sections/campaign-admin'; import CampaignAdmin from 'sections/campaign-admin';
function appBoot() { function appBoot() {
reducerRegister.add('config', ConfigReducer); reducerRegister.add('config', ConfigReducer);

8
admin/javascript/src/components/action/index.js
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import SilverStripeComponent from '../../SilverStripeComponent'; import SilverStripeComponent from 'silverstripe-component.js';
class ActionComponent extends SilverStripeComponent { class ActionComponent extends SilverStripeComponent {
constructor(props) { constructor(props) {
@ -8,7 +8,7 @@ class ActionComponent extends SilverStripeComponent {
this.handleClick = this.handleClick.bind(this); this.handleClick = this.handleClick.bind(this);
} }
render() { render() {
return ( return (
<button className={this.getButtonClasses()} onClick={this.handleClick}> <button className={this.getButtonClasses()} onClick={this.handleClick}>
@ -44,7 +44,7 @@ class ActionComponent extends SilverStripeComponent {
buttonClasses += ' btn-secondary'; buttonClasses += ' btn-secondary';
} else if (this.props.type === 'complete') { } else if (this.props.type === 'complete') {
buttonClasses += ' btn-success-outline'; buttonClasses += ' btn-success-outline';
} }
// Add icon class // Add icon class
if (typeof this.props.icon !== 'undefined') { if (typeof this.props.icon !== 'undefined') {
@ -73,7 +73,7 @@ class ActionComponent extends SilverStripeComponent {
if (this.props.loading) { if (this.props.loading) {
return ( return (
<div className="btn__loading-icon" > <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="6" cy="6" r="6" />
<circle cx="22" cy="6" r="6" /> <circle cx="22" cy="6" r="6" />
<circle cx="38" cy="6" r="6" /> <circle cx="38" cy="6" r="6" />

2
admin/javascript/src/components/form-action/index.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import SilverStripeComponent from '../../SilverStripeComponent'; import SilverStripeComponent from 'silverstripe-component.js';
class FormActionComponent extends SilverStripeComponent { class FormActionComponent extends SilverStripeComponent {

12
admin/javascript/src/components/form-builder/index.js
View File

@ -2,12 +2,12 @@ import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import $ from 'jQuery'; import $ from 'jQuery';
import * as schemaActions from '../../state/schema/actions'; import * as schemaActions from 'state/schema/actions';
import SilverStripeComponent from '../../SilverStripeComponent'; import SilverStripeComponent from 'silverstripe-component.js';
import FormComponent from '../form'; import FormComponent from 'components/form';
import TextField from '../text-field'; import TextField from 'components/text-field';
import HiddenField from '../hidden-field'; import HiddenField from 'components/hidden-field';
import GridField from '../../components/grid-field'; import GridField from 'components/grid-field';
// Using this to map field types to components until we implement dependency injection. // Using this to map field types to components until we implement dependency injection.
var fakeInjector = { var fakeInjector = {

2
admin/javascript/src/components/form-builder/tests/form-builder-test.js
View File

@ -1,4 +1,4 @@
jest.unmock('../../../SilverStripeComponent'); jest.unmock('silverstripe-component.js');
jest.unmock('../'); jest.unmock('../');
import { FormBuilderComponent } from '../'; import { FormBuilderComponent } from '../';

4
admin/javascript/src/components/form/index.js
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import SilverStripeComponent from '../../SilverStripeComponent'; import SilverStripeComponent from 'silverstripe-component.js';
import FormActionComponent from '../form-action'; import FormActionComponent from 'components/form-action';
class FormComponent extends SilverStripeComponent { class FormComponent extends SilverStripeComponent {

2
admin/javascript/src/components/grid-field/cell.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import SilverStripeComponent from '../../SilverStripeComponent'; import SilverStripeComponent from 'silverstripe-component.js';
class GridFieldCellComponent extends SilverStripeComponent { class GridFieldCellComponent extends SilverStripeComponent {

2
admin/javascript/src/components/grid-field/header-cell.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import SilverStripeComponent from '../../SilverStripeComponent'; import SilverStripeComponent from 'silverstripe-component.js';
class GridFieldHeaderCellComponent extends SilverStripeComponent { class GridFieldHeaderCellComponent extends SilverStripeComponent {

2
admin/javascript/src/components/grid-field/header.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import SilverStripeComponent from '../../SilverStripeComponent'; import SilverStripeComponent from 'silverstripe-component.js';
import GridFieldRowComponent from './row'; import GridFieldRowComponent from './row';
class GridFieldHeaderComponent extends SilverStripeComponent { class GridFieldHeaderComponent extends SilverStripeComponent {

2
admin/javascript/src/components/grid-field/index.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import SilverStripeComponent from '../../SilverStripeComponent'; import SilverStripeComponent from 'silverstripe-component.js';
import GridFieldTable from './table'; import GridFieldTable from './table';
import GridFieldHeader from './header'; import GridFieldHeader from './header';
import GridFieldHeaderCell from './header-cell'; import GridFieldHeaderCell from './header-cell';

2
admin/javascript/src/components/grid-field/row.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import SilverStripeComponent from '../../SilverStripeComponent'; import SilverStripeComponent from 'silverstripe-component.js';
class GridFieldRowComponent extends SilverStripeComponent { class GridFieldRowComponent extends SilverStripeComponent {

2
admin/javascript/src/components/grid-field/table.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import SilverStripeComponent from '../../SilverStripeComponent'; import SilverStripeComponent from 'silverstripe-component.js';
class GridFieldTableComponent extends SilverStripeComponent { class GridFieldTableComponent extends SilverStripeComponent {

2
admin/javascript/src/components/hidden-field/index.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import SilverStripeComponent from '../../SilverStripeComponent'; import SilverStripeComponent from 'silverstripe-component.js';
class HiddenFieldComponent extends SilverStripeComponent { class HiddenFieldComponent extends SilverStripeComponent {

2
admin/javascript/src/components/north-header-breadcrumbs/index.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import SilverStripeComponent from '../../SilverStripeComponent'; import SilverStripeComponent from 'silverstripe-component.js';
class NorthHeaderBreadcrumbsComponent extends SilverStripeComponent { class NorthHeaderBreadcrumbsComponent extends SilverStripeComponent {

2
admin/javascript/src/components/north-header/index.js
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import NorthHeaderBreadcrumbsComponent from '../north-header-breadcrumbs'; import NorthHeaderBreadcrumbsComponent from '../north-header-breadcrumbs';
import SilverStripeComponent from '../../SilverStripeComponent'; import SilverStripeComponent from 'silverstripe-component.js';
class NorthHeaderComponent extends SilverStripeComponent { class NorthHeaderComponent extends SilverStripeComponent {

2
admin/javascript/src/components/text-field/index.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import SilverStripeComponent from '../../SilverStripeComponent'; import SilverStripeComponent from 'silverstripe-component.js';
class TextFieldComponent extends SilverStripeComponent { class TextFieldComponent extends SilverStripeComponent {

7
admin/javascript/src/sections/campaign-admin/controller.js
View File

@ -1,11 +1,10 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import SilverStripeComponent from 'silverstripe-component'; import SilverStripeComponent from 'silverstripe-component';
import ActionButton from 'action-button'; import ActionButton from 'components/action-button';
import i18n from 'i18n'; import i18n from 'i18n';
import NorthHeader from 'north-header'; import NorthHeader from 'components/north-header';
import GridField from 'grid-field'; import FormBuilder from 'components/form-builder';
import FormBuilder from '../../components/form-builder';
class CampaignAdminContainer extends SilverStripeComponent { class CampaignAdminContainer extends SilverStripeComponent {

2
admin/javascript/src/sections/campaign-admin/index.js
View File

@ -4,7 +4,7 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import CampaignAdmin from './controller'; import CampaignAdmin from './controller';
import campaignsReducer from '../../state/campaigns/reducer'; import campaignsReducer from 'state/campaigns/reducer';
// TODO: Move this to the controller. // TODO: Move this to the controller.
reducerRegister.add('campaigns', campaignsReducer); reducerRegister.add('campaigns', campaignsReducer);

0
admin/javascript/src/SilverStripeComponent.js → admin/javascript/src/silverstripe-component.js
View File

45
gulpfile.js
View File

@ -41,7 +41,10 @@ var PATHS = {
// Folders which contain both scss and css folders to be compiled // Folders which contain both scss and css folders to be compiled
var rootCompileFolders = [PATHS.FRAMEWORK, PATHS.ADMIN, PATHS.FRAMEWORK_DEV_INSTALL] 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 = { var babelifyOptions = {
presets: ['es2015', 'react'], presets: ['es2015', 'react'],
@ -189,22 +192,23 @@ gulp.task('bundle-lib', function bundleLib() {
.on('update', bundleLib) .on('update', bundleLib)
.on('log', function (msg) { gulpUtil.log('Finished', 'bundled ' + bundleFileName + ' ' + msg) }) .on('log', function (msg) { gulpUtil.log('Finished', 'bundled ' + bundleFileName + ' ' + msg) })
.transform('babelify', babelifyOptions) .transform('babelify', babelifyOptions)
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/action', { expose: 'action-button' }) .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/action', { expose: 'components/action-button' })
.require('deep-freeze', { expose: 'deep-freeze' }) .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/form', { expose: 'components/form' })
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/form', { expose: 'form' }) .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/form-action', { expose: 'components/form-action' })
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/form-action', { expose: 'form-action' }) .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/form-builder', { expose: 'components/form-builder' })
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/form-builder', { expose: 'form-builder' }) .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field', { expose: 'components/grid-field' })
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field', { expose: 'grid-field' }) .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/cell', { expose: 'components/grid-field/cell' })
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/cell', { expose: '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', { expose: '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/header-cell', { expose: '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/row', { expose: 'grid-field-row' }) .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/table', { expose: 'components/grid-field/table' })
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/table', { expose: 'grid-field-table' }) .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/hidden-field', { expose: 'components/hidden-field' })
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/hidden-field', { expose: '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 + '/i18n.js', { expose: 'i18n' })
.require(PATHS.FRAMEWORK_JAVASCRIPT_SRC + '/jQuery.js', { expose: 'jQuery' }) .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', { expose: 'react' })
.require('react-addons-css-transition-group', { expose: 'react-addons-css-transition-group' }) .require('react-addons-css-transition-group', { expose: 'react-addons-css-transition-group' })
.require('react-addons-test-utils', { expose: 'react-addons-test-utils' }) .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', { expose: 'redux' })
.require('redux-thunk', { expose: 'redux-thunk' }) .require('redux-thunk', { expose: 'redux-thunk' })
.require(PATHS.FRAMEWORK_JAVASCRIPT_SRC + '/router.js', { expose: 'router' }) .require(PATHS.FRAMEWORK_JAVASCRIPT_SRC + '/router.js', { expose: 'router' })
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/SilverStripeComponent', { expose: 'silverstripe-component' }) .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/silverstripe-component.js', { expose: 'silverstripe-component' })
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/text-field', { expose: 'text-field' })
.bundle() .bundle()
.on('update', bundleLib) .on('update', bundleLib)
.on('error', notify.onError({ message: bundleFileName + ': <%= error.message %>' })) .on('error', notify.onError({ message: bundleFileName + ': <%= error.message %>' }))
@ -256,13 +259,13 @@ gulp.task('bundle-framework', function bundleBoot() {
.on('update', bundleBoot) .on('update', bundleBoot)
.on('log', function (msg) { gulpUtil.log('Finished', 'bundled ' + bundleFileName + ' ' + msg) }) .on('log', function (msg) { gulpUtil.log('Finished', 'bundled ' + bundleFileName + ' ' + msg) })
.transform('babelify', babelifyOptions) .transform('babelify', babelifyOptions)
.external('action-button') .external('components/action-button')
.external('components/north-header')
.external('components/form-builder')
.external('deep-freeze') .external('deep-freeze')
.external('grid-field') .external('components/grid-field')
.external('i18n') .external('i18n')
.external('jQuery') .external('jQuery')
.external('jQuery')
.external('north-header')
.external('page.js') .external('page.js')
.external('react-addons-test-utils') .external('react-addons-test-utils')
.external('react-dom') .external('react-dom')

5
package.json
View File

@ -11,13 +11,12 @@
}, },
"scripts": { "scripts": {
"build": "gulp build", "build": "gulp build",
"bundle": "gulp bundle",
"coverage": "jest --coverage",
"css": "gulp css", "css": "gulp css",
"lock": "npm-shrinkwrap --dev", "lock": "npm-shrinkwrap --dev",
"sanity": "gulp sanity", "sanity": "gulp sanity",
"sprites": "gulp sprites", "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" "thirdparty": "gulp thirdparty"
}, },
"repository": { "repository": {