Skip to content

Commit 4b36690

Browse files
author
geo
committed
fix(system.js): add section for SystemJS configuration, use lodash-es instead of lodash (closes #104, #103, #58)
lodash-es is a distribution of the lodash which uses es2015 import syntax and can be tree-shaked. SystemJS was not working because typescript transpiled lodash imports using default export.
1 parent 8b24ef8 commit 4b36690

7 files changed

Lines changed: 267 additions & 228 deletions

File tree

‎README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
- [NodeRenamedEvent](#noderenamedevent)
2424
- [NodeExpandedEvent](#nodeexpandedevent)
2525
- [NodeCollapsedEvent](#nodecollapsedevent)
26+
- [SystemJS](#systemjs)
2627
- [Changes that should be taken into account in order to migrate from __ng2-tree V1__ to __ng2-tree V2__](#changes-that-should-be-taken-into-account-in-order-to-migrate-from-__ng2-tree-v1__-to-__ng2-tree-v2__)
2728
- [:bulb: Want to help?](#bulb-want-to-help)
2829

@@ -466,6 +467,21 @@ You can subscribe to `NodeCollapsedEvent` by attaching listener to `(nodeCollaps
466467
{node: <Tree>{...}}
467468
```
468469

470+
## SystemJS
471+
If you are using SystemJS, then you need
472+
473+
```javascript
474+
System.config({
475+
// ...
476+
map: {
477+
// ...
478+
'ng2-tree': 'node_modules/ng2-tree/bundles/ng2-tree.umd.min.js',
479+
// ...
480+
},
481+
// ...
482+
}
483+
```
484+
469485
## Changes that should be taken into account in order to migrate from __ng2-tree V1__ to __ng2-tree V2__
470486
- Events were reworked:
471487
- In V1 all events that were inherited from NodeDestructiveEvent used to have property `parent`. It's not the case anymore. If you need a parent you should get it from `node` in event object like `node.parent`;

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,9 @@
6666
"@angular/platform-browser-dynamic": "4.1.3",
6767
"@angular/router": "4.1.3",
6868
"@types/jasmine": "2.5.51",
69+
"@types/lodash-es": "4.14.5",
6970
"@types/node": "7.0.29",
7071
"alertifyjs": "1.10.0",
71-
"async": "2.4.1",
7272
"codelyzer": "3.0.1",
7373
"conventional-changelog": "1.1.3",
7474
"conventional-changelog-cli": "1.3.1",
@@ -87,6 +87,7 @@
8787
"karma-jasmine-html-reporter": "0.2.2",
8888
"karma-phantomjs-launcher": "1.0.4",
8989
"lodash": "4.17.4",
90+
"lodash-es": "4.17.4",
9091
"phantomjs-polyfill": "0.0.2",
9192
"phantomjs-prebuilt": "2.1.14",
9293
"pre-commit": "1.2.2",

‎publish.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
11
#!/usr/bin/node
22

3-
const _ = require('lodash');
43
const fs = require('fs');
54
const shell = require('shelljs');
65
const pkg = require('./package.json');
76

87
shell.exec('npm run pre:publish');
9-
fs.writeFileSync('dist/package.json', JSON.stringify(_.omit(pkg, ['private']), null, 2), {encoding: 'utf-8'});
8+
9+
fs.writeFileSync('dist/package.json', JSON.stringify(omit(pkg, 'private'), null, 2), {encoding: 'utf-8'});
1010

1111
shell.exec('npm publish dist');
1212
shell.exec('npm run post:publish');
1313

14+
function omit(obj, key) {
15+
return Object
16+
.keys(pkg)
17+
.reduce((result, prop) => {
18+
if (prop === key) return result;
19+
return Object.assign(result, {[prop]: pkg[prop]})
20+
}, {});
21+
}

‎src/tree.ts‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
import * as _map from 'lodash/map';
2-
import * as _isEmpty from 'lodash/isEmpty';
3-
import * as _trim from 'lodash/trim';
4-
import * as _has from 'lodash/has';
5-
import * as _isFunction from 'lodash/isFunction';
6-
import * as _clone from 'lodash/clone';
7-
import * as _merge from 'lodash/merge';
8-
import * as _extend from 'lodash/extend';
9-
import * as _get from 'lodash/get';
10-
import * as _omit from 'lodash/omit';
11-
import * as _forEach from 'lodash/forEach';
12-
import * as _toString from 'lodash/toString';
13-
import * as _isArray from 'lodash/isArray';
14-
import * as _size from 'lodash/size';
15-
import * as _indexOf from 'lodash/indexOf';
16-
import * as _includes from 'lodash/includes';
17-
import * as _findIndex from 'lodash/findIndex';
18-
import * as _once from 'lodash/once';
1+
import _map from 'lodash-es/map';
2+
import _isEmpty from 'lodash-es/isEmpty';
3+
import _trim from 'lodash-es/trim';
4+
import _has from 'lodash-es/has';
5+
import _isFunction from 'lodash-es/isFunction';
6+
import _clone from 'lodash-es/clone';
7+
import _merge from 'lodash-es/merge';
8+
import _extend from 'lodash-es/extend';
9+
import _get from 'lodash-es/get';
10+
import _omit from 'lodash-es/omit';
11+
import _forEach from 'lodash-es/forEach';
12+
import _toString from 'lodash-es/toString';
13+
import _isArray from 'lodash-es/isArray';
14+
import _size from 'lodash-es/size';
15+
import _indexOf from 'lodash-es/indexOf';
16+
import _includes from 'lodash-es/includes';
17+
import _findIndex from 'lodash-es/findIndex';
18+
import _once from 'lodash-es/once';
1919
import { Observable, Observer } from 'rxjs/Rx';
2020
import { TreeModel, RenamableNode, FoldingType, TreeStatus, TreeModelSettings, ChildrenLoadingFunction } from './tree.types';
2121

‎src/tree.types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import * as _defaultsDeep from 'lodash/defaultsDeep';
2-
import * as _get from 'lodash/get';
1+
import _defaultsDeep from 'lodash-es/defaultsDeep';
2+
import _get from 'lodash-es/get';
33

44
export class FoldingType {
55
public static Expanded: FoldingType = new FoldingType('node-expanded');

‎umd-bundler.js‎

Lines changed: 39 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -2,88 +2,60 @@
22

33
'use strict';
44

5-
/*eslint no-console: 0, no-sync: 0*/
6-
7-
// UMD bundler
8-
// simple and yet reusable system.js bundler
9-
// bundles, minifies and gzips
10-
11-
const fs = require('fs');
125
const del = require('del');
136
const path = require('path');
14-
const zlib = require('zlib');
15-
const async = require('async');
167
const Builder = require('systemjs-builder');
178

189
const pkg = require('./package.json');
19-
const name = pkg.name;
20-
const targetFolder = path.resolve('./bundles');
10+
const targetFolder = path.resolve('./dist/bundles');
11+
12+
del(targetFolder)
13+
.then(paths => {
14+
console.log('Deleted files and folders:\n', paths.join('\n'));
15+
})
16+
.then(() => {
17+
const systemJsConfig = { minify: false, sourceMaps: true, mangle: false, noEmitHelpers: false, declaration: false };
18+
return Promise.all([
19+
buildSystemJs(systemJsConfig),
20+
buildSystemJs(Object.assign({}, systemJsConfig, {minify: true}))
21+
]);
22+
})
23+
.catch(e => console.log(e));
2124

22-
async.waterfall([
23-
cleanBundlesFolder,
24-
getSystemJsBundleConfig,
25-
buildSystemJs({minify: false, sourceMaps: true, mangle: false, noEmitHelpers: false, declaration: true}),
26-
getSystemJsBundleConfig,
27-
buildSystemJs({minify: true, sourceMaps: true, mangle: false, noEmitHelpers: false, declaration: true})
28-
], err => {
29-
if (err) {
30-
throw err;
31-
}
32-
});
25+
function buildSystemJs(options) {
26+
const minPostFix = options && options.minify ? '.umd.min' : '.umd';
27+
const fileName = `${pkg.name}${minPostFix}.js`;
28+
const dest = path.resolve(__dirname, targetFolder, fileName);
29+
const builder = new Builder();
30+
31+
console.log('Bundling system.js file:', fileName, options);
32+
builder.config(getSystemJsBundleConfig());
33+
34+
return builder
35+
.buildStatic('dist/index', dest, { format: 'umd' })
36+
.then((b) => {
37+
console.log(`Build complete: ${minPostFix}`);
38+
})
39+
.catch(err => {
40+
console.log('Error', err);
41+
});
42+
}
3343

34-
function getSystemJsBundleConfig(cb) {
35-
const config = {
44+
function getSystemJsBundleConfig() {
45+
return {
3646
baseURL: '.',
37-
transpiler: 'typescript',
38-
typescriptOptions: {
39-
module: 'cjs'
40-
},
4147
map: {
42-
typescript: './node_modules/typescript/lib/typescript',
48+
typescript: './node_modules/typescript/lib/typescript.js',
4349
'@angular': './node_modules/@angular',
4450
rxjs: './node_modules/rxjs/bundles',
45-
lodash: './node_modules/lodash'
51+
'lodash-es': './node_modules/lodash-es'
4652
},
4753
paths: {
48-
'*': '*.js',
54+
'*': '*.js'
4955
},
5056
meta: {
51-
'./node_modules/@angular/*': {build: false},
52-
'./node_modules/rxjs/*': {build: false},
53-
lodash: {build: false, main: 'lodash.js'}
57+
'./node_modules/@angular/*': { build: false },
58+
'./node_modules/rxjs/*': { build: false }
5459
}
5560
};
56-
57-
return cb(null, config);
58-
}
59-
60-
function cleanBundlesFolder(cb) {
61-
return del(targetFolder)
62-
.then(paths => {
63-
console.log('Deleted files and folders:\n', paths.join('\n'));
64-
cb();
65-
});
66-
}
67-
68-
function buildSystemJs(options) {
69-
return (config, cb) => {
70-
const minPostFix = options && options.minify ? '.umd.min' : '.umd';
71-
const fileName = `${name}${minPostFix}.js`;
72-
const dest = path.resolve(__dirname, targetFolder, fileName);
73-
const builder = new Builder();
74-
75-
console.log('Bundling system.js file:', fileName, options);
76-
builder.config(config);
77-
78-
return builder
79-
.buildStatic('dist/index', dest, {format: 'umd'})
80-
.then(() => {
81-
console.log('Build complete.');
82-
cb();
83-
})
84-
.catch(err => {
85-
console.log('Error', err);
86-
cb();
87-
});
88-
};
8961
}

0 commit comments

Comments
 (0)
⚡