From 10aeabab9885ab8665eb93d852e327213d49ba1a Mon Sep 17 00:00:00 2001 From: Oleksandr Telnov Date: Wed, 21 Sep 2016 21:42:31 +0300 Subject: [PATCH] feat(package): update to angular 2.0.0 (#412) * update angular to rc7, update rest of dependencies, use ng2-webpack-config, create modules and update app to rc7 * add custom typings * update to 2.0.0, remove typings * return typescript v * fix select styles * sanitize html (colorbox) add ngc compiler --- .gitignore | 6 + .ng2-config.js | 29 ++ .npmignore | 1 + .travis.yml | 5 +- components/select.module.ts | 14 + components/select.ts | 2 - components/select/off-click.ts | 1 - components/select/select-pipes.spec.ts | 42 ++- components/select/select.ts | 310 +++++++++++++--------- demo/components/select-section.ts | 45 ++-- demo/components/select/children-demo.ts | 7 +- demo/components/select/multiple-demo.html | 2 +- demo/components/select/multiple-demo.ts | 11 +- demo/components/select/rich-demo.ts | 92 +++---- demo/components/select/single-demo.ts | 7 +- demo/custom-typings.d.ts | 1 + demo/demo.component.ts | 34 +++ demo/demo.module.ts | 36 +++ demo/index.html | 1 - demo/index.ts | 46 +--- demo/polyfills.ts | 28 ++ demo/vendor.ts | 23 ++ gulp-tasks/lint.js | 5 +- karma.conf.js | 100 +------ ng2-select.ts | 10 +- package.json | 119 ++++----- protractor.conf.js | 5 + spec-bundle.js | 65 +++++ test.bundle.js | 47 ---- tsconfig.json | 31 ++- tsconfig.publish.json | 31 +++ tslint.json | 6 +- typings.json | 12 - webpack.config.js | 184 ++----------- 34 files changed, 672 insertions(+), 686 deletions(-) create mode 100644 .ng2-config.js create mode 100644 components/select.module.ts delete mode 100644 components/select.ts create mode 100644 demo/custom-typings.d.ts create mode 100644 demo/demo.component.ts create mode 100644 demo/demo.module.ts create mode 100644 demo/polyfills.ts create mode 100644 demo/vendor.ts create mode 100644 protractor.conf.js create mode 100644 spec-bundle.js delete mode 100644 test.bundle.js create mode 100644 tsconfig.publish.json delete mode 100644 typings.json diff --git a/.gitignore b/.gitignore index faf02f93..e3e8cbc2 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,7 @@ npm-debug.log # WebStorm .idea +.vscode # ignore build and dist for now /bundles @@ -20,6 +21,7 @@ npm-debug.log /demo/**/*.js /demo/**/*.js.map /demo/**/*.d.ts +!/demo/custom-typings.d.ts /components/**/*.js /components/**/*.js.map /components/**/*.d.ts @@ -28,3 +30,7 @@ ng2-select.js.map ng2-select.d.ts /logs + +factories + +/**/*.metadata.json diff --git a/.ng2-config.js b/.ng2-config.js new file mode 100644 index 00000000..1229229e --- /dev/null +++ b/.ng2-config.js @@ -0,0 +1,29 @@ +'use strict'; +var pkg = require('./package.json'); + +module.exports = { + // metadata + title: pkg.description, + baseUrl: '/', + // root folder name + src: 'demo', + dist: 'demo-build', + htmlIndexes: ['index.html'], + // karma bundle src + spec: './spec-bundle.js', + // webpack entry + entry: { + polyfills: './demo/polyfills.ts', + vendor: './demo/vendor.ts', + main: './demo/index.ts' + }, + commonChunks: { + name: ['polyfills', 'vendor'].reverse() + }, + // webpack alias + alias: {}, + copy: [ + {from: 'demo/favicon.ico', to: 'favicon.ico'}, + {from: 'demo/assets', to: 'assets'} + ] +}; diff --git a/.npmignore b/.npmignore index 8f189f28..23f40324 100644 --- a/.npmignore +++ b/.npmignore @@ -22,3 +22,4 @@ webpack.config.js /components/**/*.ts !/components/**/*.d.ts +factories diff --git a/.travis.yml b/.travis.yml index 56eb9da3..05455269 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,12 +2,13 @@ language: node_js node_js: - "6" +#before_install: npm i -g npm@latest + script: - - npm run flow.install:typings - npm test after_success: - - ./node_modules/.bin/codecov + - ./node_modules/.bin/codecov -f coverage/coverage-final.json addons: # sauce labs tunel connector (read more https://docs.travis-ci.com/user/sauce-connect/ ) diff --git a/components/select.module.ts b/components/select.module.ts new file mode 100644 index 00000000..d864c755 --- /dev/null +++ b/components/select.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { SelectComponent } from './select/select'; +import { HighlightPipe } from './select/select-pipes'; +import { OffClickDirective } from './select/off-click'; + +@NgModule({ + imports: [CommonModule], + declarations: [SelectComponent, HighlightPipe, OffClickDirective], + exports: [SelectComponent, HighlightPipe, OffClickDirective] +}) +export class SelectModule { +} diff --git a/components/select.ts b/components/select.ts deleted file mode 100644 index 123935cc..00000000 --- a/components/select.ts +++ /dev/null @@ -1,2 +0,0 @@ -import { SelectComponent } from './select/select'; -export const SELECT_DIRECTIVES:Array = [SelectComponent]; diff --git a/components/select/off-click.ts b/components/select/off-click.ts index 4167d3ff..a3372bb9 100644 --- a/components/select/off-click.ts +++ b/components/select/off-click.ts @@ -19,5 +19,4 @@ export class OffClickDirective implements OnInit, OnDestroy { public ngOnDestroy(): any { document.removeEventListener('click', this.offClickHandler); } - } diff --git a/components/select/select-pipes.spec.ts b/components/select/select-pipes.spec.ts index 4a09b022..a5961dc0 100644 --- a/components/select/select-pipes.spec.ts +++ b/components/select/select-pipes.spec.ts @@ -1,12 +1,34 @@ -import { it, expect, describe, inject, beforeEachProviders } from '@angular/core/testing'; -import { ComponentFixture } from '@angular/compiler/testing'; -import { HighlightPipe } from './select-pipes'; - -describe('Component: HighlightPipe', () => { - beforeEachProviders(() => [ - HighlightPipe - ]); - it('should be fine', inject([HighlightPipe], (fixture:ComponentFixture) => { +import { Component } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SelectModule } from '../../ng2-select'; + +const html = ``; + +describe('Component: ng2-select', () => { + let fixture:ComponentFixture; + let context:TestSelectComponent; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [TestSelectComponent], + imports: [SelectModule] + }); + TestBed.overrideComponent(TestSelectComponent, {set: {template: html}}); + fixture = TestBed.createComponent(TestSelectComponent); + context = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('fixture should not be null', () => { expect(fixture).not.toBeNull(); - })); + }); }); + +@Component({ + selector: 'select-test', + template: '' +}) + +class TestSelectComponent { +} diff --git a/components/select/select.ts b/components/select/select.ts index 76d9ec17..09928f9b 100755 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -1,121 +1,107 @@ import { Component, Input, Output, EventEmitter, ElementRef, OnInit } from '@angular/core'; +import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { SelectItem } from './select-item'; -import { HighlightPipe, stripTags } from './select-pipes'; +import { stripTags } from './select-pipes'; import { OptionsBehavior } from './select-interfaces'; import { escapeRegexp } from './common'; -import { OffClickDirective } from './off-click'; let styles = ` -.ui-select-toggle { - position: relative; - - /* hardcoded, should use variable from bootstrap */ - padding: 0.375rem 0.75rem; -} - -/* Fix Bootstrap dropdown position when inside a input-group */ -.input-group > .dropdown { - /* Instead of relative */ - position: static; -} - -.ui-select-match > .btn { - /* Instead of center because of .btn */ - text-align: left !important; -} - -.ui-select-match > .caret { - position: absolute; - top: 45%; - right: 15px; -} - -.ui-disabled { - background-color: #eceeef; - border-radius: 4px; - position: absolute; - width: 100%; - height: 100%; - z-index: 5; - opacity: 0.6; - top: 0; - left: 0; - cursor: not-allowed; -} - -.ui-select-choices { - width: 100%; - height: auto; - max-height: 200px; - overflow-x: hidden; - margin-top: 0; -} - -.ui-select-multiple .ui-select-choices { - margin-top: 1px; -} - -.ui-select-multiple { - height: auto; - padding: 3px 3px 0 3px; -} - -.ui-select-multiple input.ui-select-search { - background-color: transparent !important; /* To prevent double background when disabled */ - border: none; - outline: none; - height: 1.9em; - margin-bottom: 3px; - - /* hardcoded, should use variable from bootstrap, but must be adjusted because... reasons */ - padding: 0.375rem 0.55rem; -} - -.ui-select-multiple .ui-select-match-item { - outline: 0; - margin: 0 3px 3px 0; -} -`; - -let optionsTemplate = ` - - - + .ui-select-toggle { + position: relative; + } + + /* Fix Bootstrap dropdown position when inside a input-group */ + .input-group > .dropdown { + /* Instead of relative */ + position: static; + } + + .ui-select-match > .btn { + /* Instead of center because of .btn */ + text-align: left !important; + } + + .ui-select-match > .caret { + position: absolute; + top: 45%; + right: 15px; + } + + .ui-disabled { + background-color: #eceeef; + border-radius: 4px; + position: absolute; + width: 100%; + height: 100%; + z-index: 5; + opacity: 0.6; + top: 0; + left: 0; + cursor: not-allowed; + } + + .ui-select-choices { + width: 100%; + height: auto; + max-height: 200px; + overflow-x: hidden; + margin-top: 0; + } + + .ui-select-multiple .ui-select-choices { + margin-top: 1px; + } + .ui-select-choices-row>a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: 400; + line-height: 1.42857143; + color: #333; + white-space: nowrap; + } + .ui-select-choices-row.active>a { + color: #fff; + text-decoration: none; + outline: 0; + background-color: #428bca; + } + + .ui-select-multiple { + height: auto; + padding:3px 3px 0 3px; + } + + .ui-select-multiple input.ui-select-search { + background-color: transparent !important; /* To prevent double background when disabled */ + border: none; + outline: none; + box-shadow: none; + height: 1.6666em; + padding: 0; + margin-bottom: 3px; + + } + .ui-select-match .close { + font-size: 1.6em; + line-height: 0.75; + } + + .ui-select-multiple .ui-select-match-item { + outline: 0; + margin: 0 3px 3px 0; + } + .ui-select-toggle > .caret { + position: absolute; + height: 10px; + top: 50%; + right: 10px; + margin-top: -2px; + } `; @Component({ selector: 'ng-select', - directives: [OffClickDirective], - pipes: [HighlightPipe], styles: [styles], template: `
{{placeholder}} + [innerHTML]="sanitize(active[0].text)"> - - × + +
@@ -149,7 +134,39 @@ let optionsTemplate = ` class="form-control ui-select-search" *ngIf="inputMode" placeholder="{{active.length <= 0 ? placeholder : ''}}"> - ${optionsTemplate} + + + +
- × {{a.text}} @@ -183,7 +200,39 @@ let optionsTemplate = ` class="form-control ui-select-search" placeholder="{{active.length <= 0 ? placeholder : ''}}" role="combobox"> - ${optionsTemplate} + + + + ` }) @@ -200,11 +249,13 @@ export class SelectComponent implements OnInit { this._items = this.itemObjects = []; } else { this._items = value.filter((item:any) => { - if ((typeof item === 'string' && item) || (typeof item === 'object' && item && item.text && item.id)) { + // if ((typeof item === 'string' && item) || (typeof item === 'object' && item && item.text && item.id)) { + if ((typeof item === 'string') || (typeof item === 'object' && item.text)) { return item; } }); - this.itemObjects = this._items.map((item:any) => (typeof item === 'string' ? new SelectItem(item) : new SelectItem({id: item[this.idField], text: item[this.textField]}))); + // this.itemObjects = this._items.map((item:any) => (typeof item === 'string' ? new SelectItem(item) : new SelectItem({id: item[this.idField], text: item[this.textField]}))); + this.itemObjects = this._items.map((item:any) => new SelectItem(item)); } } @@ -215,7 +266,8 @@ export class SelectComponent implements OnInit { this.hideOptions(); } } - public get disabled(): boolean { + + public get disabled():boolean { return this._disabled; } @@ -229,7 +281,7 @@ export class SelectComponent implements OnInit { this._active = selectedItems.map((item:any) => { let data = areItemsStrings ? item - : { id: item[this.idField], text: item[this.textField] }; + : {id: item[this.idField], text: item[this.textField]}; return new SelectItem(data); }); @@ -258,11 +310,15 @@ export class SelectComponent implements OnInit { private _disabled:boolean = false; private _active:Array = []; - public constructor(element:ElementRef) { + public constructor(element:ElementRef, private sanitizer:DomSanitizer) { this.element = element; this.clickedOutside = this.clickedOutside.bind(this); } + public sanitize(html:string):SafeHtml { + return this.sanitizer.bypassSecurityTrustHtml(html); + } + public inputEvent(e:any, isUpMode:boolean = false):void { // tab if (e.keyCode === 9) { @@ -367,7 +423,7 @@ export class SelectComponent implements OnInit { } } - public clickedOutside():void { + public clickedOutside():void { this.inputMode = false; this.optionsOpened = false; } @@ -437,9 +493,8 @@ export class SelectComponent implements OnInit { private open():void { this.options = this.itemObjects - .filter((option: SelectItem) => (this.multiple === false || - this.multiple === true && - !this.active.find((o:SelectItem) => option.text === o.text))); + .filter((option:SelectItem) => (this.multiple === false || + this.multiple === true && !this.active.find((o:SelectItem) => option.text === o.text))); if (this.options.length > 0) { this.behavior.first(); @@ -486,7 +541,8 @@ export class SelectComponent implements OnInit { export class Behavior { public optionsMap:Map = new Map(); - public actor: SelectComponent; + public actor:SelectComponent; + public constructor(actor:SelectComponent) { this.actor = actor; } @@ -569,7 +625,7 @@ export class GenericBehavior extends Behavior implements OptionsBehavior { .filter((option:SelectItem) => { return stripTags(option.text).match(query) && (this.actor.multiple === false || - (this.actor.multiple === true && this.actor.active.map((item: SelectItem) => item.id).indexOf(option.id) < 0)); + (this.actor.multiple === true && this.actor.active.map((item:SelectItem) => item.id).indexOf(option.id) < 0)); }); this.actor.options = options; if (this.actor.options.length > 0) { diff --git a/demo/components/select-section.ts b/demo/components/select-section.ts index cf3febfd..4b648301 100644 --- a/demo/components/select-section.ts +++ b/demo/components/select-section.ts @@ -1,12 +1,4 @@ import { Component } from '@angular/core'; -import { CORE_DIRECTIVES } from '@angular/common'; - -import { TAB_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; - -import { SingleDemoComponent } from './select/single-demo'; -import { MultipleDemoComponent } from './select/multiple-demo'; -import { ChildrenDemoComponent } from './select/children-demo'; -import { RichDemoComponent } from './select/rich-demo'; let name = 'Select'; // webpack html imports @@ -36,7 +28,7 @@ let tabDesc:Array = [ ]; let tabsContent:string = ``; -tabDesc.forEach((desc:any) => { +tabDesc.forEach((desc:any, index:number) => { tabsContent += `
<${desc.heading.toLowerCase()}-demo> @@ -56,7 +48,7 @@ tabDesc.forEach((desc:any) => { 
-              ${desc.ts}
+
@@ -70,25 +62,26 @@ tabDesc.forEach((desc:any) => { @Component({ selector: 'select-section', template: ` -
-
- - - ${tabsContent} - - -
- -
-

API

-
${doc}
-
-
- `, - directives: [SingleDemoComponent, MultipleDemoComponent, ChildrenDemoComponent, RichDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES] +
+
+ + + ${tabsContent} + + +
+ +
+

API

+
+
+
+ ` }) export class SelectSectionComponent { public currentHeading:string = 'Single'; + public tabDesc:any[] = tabDesc; + public doc:string = doc; public select_zzz(e:any):void { if (e.heading) { diff --git a/demo/components/select/children-demo.ts b/demo/components/select/children-demo.ts index f57e05c8..ede43db7 100644 --- a/demo/components/select/children-demo.ts +++ b/demo/components/select/children-demo.ts @@ -1,16 +1,11 @@ import { Component } from '@angular/core'; -import { CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass } from '@angular/common'; -import { BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; - -import { SELECT_DIRECTIVES } from '../../../ng2-select'; // webpack html imports let template = require('./children-demo.html'); @Component({ selector: 'children-demo', - template: template, - directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, BUTTON_DIRECTIVES ] + template }) export class ChildrenDemoComponent { public items:Array = [ diff --git a/demo/components/select/multiple-demo.html b/demo/components/select/multiple-demo.html index 84a08a72..f1b51464 100644 --- a/demo/components/select/multiple-demo.html +++ b/demo/components/select/multiple-demo.html @@ -1,6 +1,6 @@

Select multiple cities

- = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona', @@ -51,7 +46,7 @@ export class MultipleDemoComponent { public itemsToString(value:Array = []):string { return value .map((item:any) => { - return item.text; - }).join(','); + return item.text; + }).join(','); } } diff --git a/demo/components/select/rich-demo.ts b/demo/components/select/rich-demo.ts index adb09adc..ad91f9c2 100644 --- a/demo/components/select/rich-demo.ts +++ b/demo/components/select/rich-demo.ts @@ -1,50 +1,46 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; -import { CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass } from '@angular/common'; -import { BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; - -import { SELECT_DIRECTIVES } from '../../../ng2-select'; const COLORS = [ - { 'name': 'Blue 10', 'hex': '#C0E6FF' }, - { 'name': 'Blue 20', 'hex': '#7CC7FF' }, - { 'name': 'Blue 30', 'hex': '#5AAAFA' }, - { 'name': 'Blue 40', 'hex': '#5596E6' }, - { 'name': 'Blue 50', 'hex': '#4178BE' }, - { 'name': 'Blue 60', 'hex': '#325C80' }, - { 'name': 'Blue 70', 'hex': '#264A60' }, - { 'name': 'Blue 80', 'hex': '#1D3649' }, - { 'name': 'Blue 90', 'hex': '#152935' }, - { 'name': 'Blue 100', 'hex': '#010205' }, - { 'name': 'Green 10', 'hex': '#C8F08F' }, - { 'name': 'Green 20', 'hex': '#B4E051' }, - { 'name': 'Green 30', 'hex': '#8CD211' }, - { 'name': 'Green 40', 'hex': '#5AA700' }, - { 'name': 'Green 50', 'hex': '#4B8400' }, - { 'name': 'Green 60', 'hex': '#2D660A' }, - { 'name': 'Green 70', 'hex': '#144D14' }, - { 'name': 'Green 80', 'hex': '#0A3C02' }, - { 'name': 'Green 90', 'hex': '#0C2808' }, - { 'name': 'Green 100', 'hex': '#010200' }, - { 'name': 'Red 10', 'hex': '#FFD2DD' }, - { 'name': 'Red 20', 'hex': '#FFA5B4' }, - { 'name': 'Red 30', 'hex': '#FF7D87' }, - { 'name': 'Red 40', 'hex': '#FF5050' }, - { 'name': 'Red 50', 'hex': '#E71D32' }, - { 'name': 'Red 60', 'hex': '#AD1625' }, - { 'name': 'Red 70', 'hex': '#8C101C' }, - { 'name': 'Red 80', 'hex': '#6E0A1E' }, - { 'name': 'Red 90', 'hex': '#4C0A17' }, - { 'name': 'Red 100', 'hex': '#040001' }, - { 'name': 'Yellow 10', 'hex': '#FDE876' }, - { 'name': 'Yellow 20', 'hex': '#FDD600' }, - { 'name': 'Yellow 30', 'hex': '#EFC100' }, - { 'name': 'Yellow 40', 'hex': '#BE9B00' }, - { 'name': 'Yellow 50', 'hex': '#8C7300' }, - { 'name': 'Yellow 60', 'hex': '#735F00' }, - { 'name': 'Yellow 70', 'hex': '#574A00' }, - { 'name': 'Yellow 80', 'hex': '#3C3200' }, - { 'name': 'Yellow 90', 'hex': '#281E00' }, - { 'name': 'Yellow 100', 'hex': '#020100' } + {'name': 'Blue 10', 'hex': '#C0E6FF'}, + {'name': 'Blue 20', 'hex': '#7CC7FF'}, + {'name': 'Blue 30', 'hex': '#5AAAFA'}, + {'name': 'Blue 40', 'hex': '#5596E6'}, + {'name': 'Blue 50', 'hex': '#4178BE'}, + {'name': 'Blue 60', 'hex': '#325C80'}, + {'name': 'Blue 70', 'hex': '#264A60'}, + {'name': 'Blue 80', 'hex': '#1D3649'}, + {'name': 'Blue 90', 'hex': '#152935'}, + {'name': 'Blue 100', 'hex': '#010205'}, + {'name': 'Green 10', 'hex': '#C8F08F'}, + {'name': 'Green 20', 'hex': '#B4E051'}, + {'name': 'Green 30', 'hex': '#8CD211'}, + {'name': 'Green 40', 'hex': '#5AA700'}, + {'name': 'Green 50', 'hex': '#4B8400'}, + {'name': 'Green 60', 'hex': '#2D660A'}, + {'name': 'Green 70', 'hex': '#144D14'}, + {'name': 'Green 80', 'hex': '#0A3C02'}, + {'name': 'Green 90', 'hex': '#0C2808'}, + {'name': 'Green 100', 'hex': '#010200'}, + {'name': 'Red 10', 'hex': '#FFD2DD'}, + {'name': 'Red 20', 'hex': '#FFA5B4'}, + {'name': 'Red 30', 'hex': '#FF7D87'}, + {'name': 'Red 40', 'hex': '#FF5050'}, + {'name': 'Red 50', 'hex': '#E71D32'}, + {'name': 'Red 60', 'hex': '#AD1625'}, + {'name': 'Red 70', 'hex': '#8C101C'}, + {'name': 'Red 80', 'hex': '#6E0A1E'}, + {'name': 'Red 90', 'hex': '#4C0A17'}, + {'name': 'Red 100', 'hex': '#040001'}, + {'name': 'Yellow 10', 'hex': '#FDE876'}, + {'name': 'Yellow 20', 'hex': '#FDD600'}, + {'name': 'Yellow 30', 'hex': '#EFC100'}, + {'name': 'Yellow 40', 'hex': '#BE9B00'}, + {'name': 'Yellow 50', 'hex': '#8C7300'}, + {'name': 'Yellow 60', 'hex': '#735F00'}, + {'name': 'Yellow 70', 'hex': '#574A00'}, + {'name': 'Yellow 80', 'hex': '#3C3200'}, + {'name': 'Yellow 90', 'hex': '#281E00'}, + {'name': 'Yellow 100', 'hex': '#020100'} ]; // webpack html imports @@ -54,7 +50,6 @@ let template = require('./rich-demo.html'); selector: 'rich-demo', template: template, styles: [`colorbox,.colorbox { display:inline-block; height:14px; width:14px;margin-right:4px; border:1px solid #000;}`], - directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, BUTTON_DIRECTIVES ], encapsulation: ViewEncapsulation.None // Enable dynamic HTML styles }) export class RichDemoComponent implements OnInit { @@ -64,9 +59,9 @@ export class RichDemoComponent implements OnInit { private items:Array = []; public ngOnInit():any { - COLORS.forEach((color: {name:string, hex:string}) => { - this.items.push( { - id : color.hex, + COLORS.forEach((color:{name:string, hex:string}) => { + this.items.push({ + id: color.hex, text: `${color.name} (${color.hex})` }); }); @@ -97,4 +92,3 @@ export class RichDemoComponent implements OnInit { this.value = value; } } - diff --git a/demo/components/select/single-demo.ts b/demo/components/select/single-demo.ts index 756310e0..b3f5320b 100644 --- a/demo/components/select/single-demo.ts +++ b/demo/components/select/single-demo.ts @@ -1,16 +1,11 @@ import { Component } from '@angular/core'; -import { CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass } from '@angular/common'; -import { BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; - -import { SELECT_DIRECTIVES } from '../../../ng2-select'; // webpack html imports let template = require('./single-demo.html'); @Component({ selector: 'single-demo', - template: template, - directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, BUTTON_DIRECTIVES ] + template }) export class SingleDemoComponent { public items:Array = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona', diff --git a/demo/custom-typings.d.ts b/demo/custom-typings.d.ts new file mode 100644 index 00000000..8b7203f2 --- /dev/null +++ b/demo/custom-typings.d.ts @@ -0,0 +1 @@ +declare const ENV:string; diff --git a/demo/demo.component.ts b/demo/demo.component.ts new file mode 100644 index 00000000..fb179131 --- /dev/null +++ b/demo/demo.component.ts @@ -0,0 +1,34 @@ +import { Component } from '@angular/core'; + +let gettingStarted = require('./getting-started.md'); + +@Component({ + selector: 'demo-app', + template: ` +
+
+

ng2-select

+

Native Angular2 component for Select

+ View on GitHub +
+
+
+
+
+
+ +
+
${gettingStarted}
+ + +
+ + + ` +}) +export class DemoComponent { +} diff --git a/demo/demo.module.ts b/demo/demo.module.ts new file mode 100644 index 00000000..7cec11c5 --- /dev/null +++ b/demo/demo.module.ts @@ -0,0 +1,36 @@ +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; +import { CommonModule } from '@angular/common'; +import { TabsModule, ButtonsModule } from 'ng2-bootstrap/ng2-bootstrap'; + +import { SelectModule } from '../components/select.module'; +import { DemoComponent } from './demo.component'; +import { SelectSectionComponent } from './components/select-section'; +import { ChildrenDemoComponent } from './components/select/children-demo'; +import { MultipleDemoComponent } from './components/select/multiple-demo'; +import { RichDemoComponent } from './components/select/rich-demo'; +import { SingleDemoComponent } from './components/select/single-demo'; + +@NgModule({ + declarations: [ + DemoComponent, + SelectSectionComponent, + ChildrenDemoComponent, + MultipleDemoComponent, + RichDemoComponent, + SingleDemoComponent + ], + imports: [ + BrowserModule, + FormsModule, + SelectModule, + TabsModule, + ButtonsModule, + CommonModule + ], + bootstrap: [DemoComponent] +}) + +export class SelectDemoModule { +} diff --git a/demo/index.html b/demo/index.html index 3c077e81..2223d9a2 100644 --- a/demo/index.html +++ b/demo/index.html @@ -34,6 +34,5 @@ Loading... - diff --git a/demo/index.ts b/demo/index.ts index 77772a05..e270523b 100644 --- a/demo/index.ts +++ b/demo/index.ts @@ -1,44 +1,4 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { Component } from '@angular/core'; -import { NgClass } from '@angular/common'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { SelectSectionComponent } from './components/select-section'; - -let gettingStarted = require('./getting-started.md'); - -@Component({ - selector: 'demo-app', - template: ` -
-
-

ng2-select

-

Native Angular2 component for Select

- View on GitHub -
-
-
-
-
-
- -
-
${gettingStarted}
- - -
- - - `, - directives: [ - NgClass, - SelectSectionComponent - ] -}) -export class DemoComponent { -} - -bootstrap(DemoComponent); +import { SelectDemoModule } from './demo.module'; +platformBrowserDynamic().bootstrapModule(SelectDemoModule); diff --git a/demo/polyfills.ts b/demo/polyfills.ts new file mode 100644 index 00000000..d27ff360 --- /dev/null +++ b/demo/polyfills.ts @@ -0,0 +1,28 @@ +// Polyfills +// (these modules are what are in 'angular2/bundles/angular2-polyfills' so don't use that here) + +// import 'ie-shim'; // Internet Explorer +// import 'es6-shim'; +// import 'es6-promise'; +// import 'es7-reflect-metadata'; + +// Prefer CoreJS over the polyfills above +import 'core-js/es6'; +import 'core-js/es7/reflect'; +require('zone.js/dist/zone'); +require('reflect-metadata'); + +// Typescript emit helpers polyfill +import 'ts-helpers'; + +if ('production' === ENV) { + // Production + +} else { + // Development + + (Error as any).stackTraceLimit = Infinity; + + require('zone.js/dist/long-stack-trace-zone'); + +} diff --git a/demo/vendor.ts b/demo/vendor.ts new file mode 100644 index 00000000..c06cab38 --- /dev/null +++ b/demo/vendor.ts @@ -0,0 +1,23 @@ +// For vendors for example jQuery, Lodash, angular2-jwt just import them here unless you plan on +// chunking vendors files for async loading. You would need to import the async loaded vendors +// at the entry point of the async loaded file. Also see custom-typings.d.ts as you also need to +// run `typings install x` where `x` is your module + +// Angular 2 +import '@angular/common'; +import '@angular/core'; +import '@angular/forms'; +import '@angular/platform-browser'; +import '@angular/platform-browser-dynamic'; + +// RxJS +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/mergeMap'; + +if ('production' === ENV) { + // Production + +} else { + // Development + +} diff --git a/gulp-tasks/lint.js b/gulp-tasks/lint.js index 62c7806a..1132abdf 100644 --- a/gulp-tasks/lint.js +++ b/gulp-tasks/lint.js @@ -9,12 +9,13 @@ gitignore.push('**/*.ts'); gulp.task('tslint', () => gulp .src(gitignore) - .pipe(tslint()) - .pipe(tslint.report('prose', { + .pipe(tslint({ + formatter: 'verbose', emitError: true, summarizeFailureOutput: true, reportLimit: 50 })) + .pipe(tslint.report()) ); gulp.task('lint', ['tslint']); diff --git a/karma.conf.js b/karma.conf.js index 31fec667..6c64f09d 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -1,101 +1,5 @@ 'use strict'; -const path = require('path'); -const cwd = process.cwd(); +const config = require('./.ng2-config'); -module.exports = config => { - config.set({ - // base path that will be used to resolve all patterns (eg. files, exclude) - basePath: '', - - // frameworks to use - // available frameworks: https://npmjs.org/browse/keyword/karma-adapter - frameworks: ['jasmine'], - - // list of files / patterns to load in the browser - files: [ - {pattern: 'test.bundle.js', watched: false} - ], - - // list of files to exclude - exclude: [], - - // preprocess matching files before serving them to the browser - // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor - preprocessors: { - 'test.bundle.js': ['coverage', 'webpack', 'sourcemap'] - }, - - webpack: { - resolve: { - root: [path.resolve(cwd)], - modulesDirectories: ['node_modules', 'demo', 'components', 'test', '.'], - extensions: ['', '.ts', '.js', '.css'] - }, - module: { - loaders: [ - {test: /\.ts$/, loader: 'ts-loader', exclude: [/node_modules/]} - ], - postLoaders: [ - // instrument only testing sources with Istanbul - { - test: /\.(js|ts)$/, - include: root('components'), - loader: 'istanbul-instrumenter-loader', - exclude: [ - /\.e2e\.ts$/, - /node_modules/ - ] - } - ] - }, - stats: { - colors: true, - reasons: true - }, - watch: true, - debug: true - }, - - coverageReporter: { - dir: 'coverage/', - reporters: [ - {type: 'text'}, - {type: 'json'}, - {type: 'html'} - ] - }, - webpackServer: {noInfo: true}, - - // test results reporter to use - // possible values: 'dots', 'progress' - // available reporters: https://npmjs.org/browse/keyword/karma-reporter - reporters: ['spec', 'coverage'], - - // web server port - port: 9876, - - // enable / disable colors in the output (reporters and logs) - colors: true, - - // level of logging - // possible values: config.LOG_DISABLE || config.LOG_ERROR || - // config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG - logLevel: config.LOG_INFO, - - // enable / disable watching file and executing tests whenever any file changes - autoWatch: false, - - // start these browsers - // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher - browsers: ['PhantomJS'], - - // Continuous Integration mode - // if true, Karma captures browsers, runs the tests and exits - singleRun: true - }); -}; - -function root(partialPath) { - return path.join(__dirname, partialPath); -} +module.exports = require('ng2-webpack-config').karma(config); diff --git a/ng2-select.ts b/ng2-select.ts index af1f3e14..e23a00b2 100644 --- a/ng2-select.ts +++ b/ng2-select.ts @@ -1,10 +1,2 @@ -import { SELECT_DIRECTIVES } from './components/select'; - export * from './components/select/select'; -export * from './components/select'; - -export default { - directives: [ - SELECT_DIRECTIVES - ] -}; +export { SelectModule } from './components/select.module'; diff --git a/package.json b/package.json index fd9392f3..17d7c12f 100644 --- a/package.json +++ b/package.json @@ -3,27 +3,27 @@ "version": "1.0.3", "description": "Angular2 based replacement for select boxes", "scripts": { - "flow.install:typings": "./node_modules/.bin/typings install", - "flow.compile": "npm run flow.install:typings && npm run flow.compile:common && npm run flow.compile:system ", - "flow.compile:common": "./node_modules/.bin/tsc", - "flow.compile:system": "./.config/bundle-system.js", - "flow.copy:src": "./node_modules/.bin/cpy ng2-select.ts \"components/*.ts\" ts --parents", - "flow.clean": "./node_modules/.bin/del bundles coverage demo-build typings \"components/**/*.+(js|d.ts|js.map)\" dist \"ng2-select.+(js|d.ts|js.map)\"", - "flow.deploy:gh-pages": "npm run flow.build:prod && ./node_modules/.bin/gh-pages -d demo-build", - "flow.eslint": "./node_modules/.bin/eslint --ignore-path .gitignore --ext js --fix . .config", - "flow.tslint": "./node_modules/.bin/gulp lint", + "flow.compile": "npm run flow.compile:common && npm run flow.compile:system", + "flow.compile:common": "ngc -p tsconfig.publish.json", + "flow.compile:system": "node ./.config/bundle-system.js", + "flow.copy:src": "cpy ng2-select.ts \"components/*.ts\" ts --parents", + "flow.clean": "del-cli bundles coverage demo-build \"components/**/*.+(js|d.ts|js.map)\" dist \"ng2-select.+(js|d.ts|js.map)\"", + "flow.deploy:gh-pages": "npm run flow.build:prod && gh-pages -d demo-build", + "flow.eslint": "eslint --ignore-path .gitignore --ext js --fix . .config", + "flow.tslint": "gulp lint", "flow.lint": "npm run flow.eslint && npm run flow.tslint", - "flow.changelog": "./node_modules/.bin/conventional-changelog -i CHANGELOG.md -s -p angular -v", - "flow.github-release": "./node_modules/.bin/conventional-github-releaser -p angular", - "flow.build:prod": "NODE_ENV=production ./node_modules/.bin/webpack --progress --color", - "flow.build:dev": "./node_modules/.bin/webpack --progress --color", - "flow.serve:dev": "./node_modules/.bin/webpack-dev-server --hot --inline --colors --display-error-details --display-cached", - "flow.serve:prod": "NODE_ENV=production ./node_modules/.bin/webpack-dev-server --hot --inline --colors --display-error-details --display-cached", + "flow.changelog": "conventional-changelog -i CHANGELOG.md -s -p angular -v", + "flow.github-release": "conventional-github-releaser -p angular", + "flow.build:prod": "cross-env NODE_ENV=production webpack --progress --color --display-error-details --display-cached", + "flow.build:dev": "webpack --progress --color", + "flow.serve:dev": "webpack-dev-server --hot --inline --colors --display-error-details --display-cached", + "flow.serve:prod": "cross-env NODE_ENV=production webpack-dev-server --hot --inline --colors --display-error-details --display-cached", "prepublish": "npm run flow.clean && npm run flow.compile", "postpublish": "npm run flow.deploy:gh-pages", "start": "npm run flow.serve:dev", "pretest": "npm run flow.lint", - "test": "NODE_ENV=test ./node_modules/.bin/karma start", + "test": "cross-env NODE_ENV=test karma start", + "test:watch": "cross-env NODE_ENV=test karma start --auto-watch --no-single-run", "preversion": "npm test", "version": "npm run flow.changelog && git add -A", "postversion": "git push origin development && git push --tags" @@ -47,72 +47,54 @@ }, "homepage": "https://github.com/valor-software/ng2-select#readme", "peerDependencies": { - "@angular/common": "^2.0.0-rc.1", - "@angular/compiler": "^2.0.0-rc.1", - "@angular/core": "^2.0.0-rc.1" + "@angular/common": "2.0.0", + "@angular/compiler": "2.0.0", + "@angular/core": "2.0.0", + "@angular/forms": "2.0.0" }, "dependencies": {}, "devDependencies": { - "@angular/common": "^2.0.0-rc.1", - "@angular/compiler": "^2.0.0-rc.1", - "@angular/core": "^2.0.0-rc.1", - "@angular/platform-browser": "^2.0.0-rc.1", - "@angular/platform-browser-dynamic": "^2.0.0-rc.1", - "async": "1.5.2", - "awesome-typescript-loader": "^0.19.0", - "bootstrap": "3.3.6", + "@angular/common": "2.0.0", + "@angular/compiler": "2.0.0", + "@angular/compiler-cli": "0.6.2", + "@angular/core": "2.0.0", + "@angular/forms": "2.0.0", + "@angular/platform-browser": "2.0.0", + "@angular/platform-browser-dynamic": "2.0.0", + "@types/jasmine": "2.2.34", + "@types/node": "6.0.39", + "@types/webpack": "1.12.34", + "async": "2.0.1", + "bootstrap": "3.3.7", "codecov": "1.0.1", - "compression-webpack-plugin": "0.3.1", "conventional-changelog-cli": "1.2.0", - "conventional-github-releaser": "1.1.2", - "copy-webpack-plugin": "3.0.1", + "conventional-github-releaser": "1.1.3", "cpy-cli": "1.0.1", + "cross-env": "2.0.1", "del-cli": "0.2.0", - "es6-promise": "3.2.1", + "es6-promise": "3.3.1", "es6-shim": "0.35.1", "es7-reflect-metadata": "1.6.0", - "eslint-config-valorsoft": "0.0.15", - "exports-loader": "0.6.3", - "file-loader": "0.8.5", + "eslint-config-valorsoft": "0.1.0", "gh-pages": "0.11.0", "gitignore-to-glob": "0.2.1", "gulp": "3.9.1", "gulp-size": "2.1.0", - "gulp-tslint": "5.0.0", - "html-loader": "0.4.3", - "html-webpack-plugin": "2.19.0", - "istanbul-instrumenter-loader": "0.2.0", - "jasmine": "2.4.1", - "karma": "0.13.22", - "karma-chrome-launcher": "1.0.1", - "karma-coverage": "1.0.0", - "karma-jasmine": "1.0.2", - "karma-phantomjs-launcher": "1.0.0", - "karma-sourcemap-loader": "0.3.7", - "karma-spec-reporter": "0.0.26", - "karma-webpack": "1.7.0", - "lite-server": "2.2.0", - "markdown-loader": "0.1.7", - "marked": "0.3.5", - "ng2-bootstrap": "1.0.17", - "phantomjs-polyfill": "0.0.2", - "phantomjs-prebuilt": "2.1.7", + "gulp-tslint": "6.1.1", + "lite-server": "2.2.2", + "marked": "0.3.6", + "ng2-bootstrap": "1.1.5", + "ng2-webpack-config": "0.0.5", "pre-commit": "1.1.3", - "prismjs": "1.5.0", + "prismjs": "1.5.1", "prismjs-loader": "0.0.3", - "raw-loader": "0.5.1", - "reflect-metadata": "0.1.2", + "reflect-metadata": "0.1.8", "require-dir": "0.3.0", - "rxjs": "5.0.0-beta.6", - "source-map-loader": "0.1.5", - "systemjs-builder": "0.15.19", - "ts-loader": "0.8.2", - "tslint-config-valorsoft": "1.0.4", - "typescript": "1.8.10", - "typings": "0.8.1", - "webpack": "1.13.1", - "webpack-dev-server": "1.14.1", - "zone.js": "0.6.12" + "rxjs": "5.0.0-beta.12", + "systemjs-builder": "0.15.31", + "tslint-config-valorsoft": "1.1.1", + "typescript": "2.0.2", + "zone.js": "0.6.25" }, "contributors": [ { @@ -124,6 +106,11 @@ "name": "Dmitriy Shekhovtsov", "email": "valorkin@gmail.com", "url": "https://github.com/valorkin" + }, + { + "name": "Oleksandr Telnov", + "email": "otelnov@gmail.com", + "url": "https://github.com/otelnov" } ] } diff --git a/protractor.conf.js b/protractor.conf.js new file mode 100644 index 00000000..2f1cac81 --- /dev/null +++ b/protractor.conf.js @@ -0,0 +1,5 @@ +'use strict'; + +const config = require('./.ng2-config'); + +module.exports.config = require('ng2-webpack-config').protractor(config); diff --git a/spec-bundle.js b/spec-bundle.js new file mode 100644 index 00000000..fb8a3922 --- /dev/null +++ b/spec-bundle.js @@ -0,0 +1,65 @@ +/* eslint no-var: 0, vars-on-top: 0 */ +/** + * @author: @AngularClass + */ + +/* + * When testing with webpack and ES6, we have to do some extra + * things to get testing to work right. Because we are gonna write tests + * in ES6 too, we have to compile those as well. That's handled in + * karma.conf.js with the karma-webpack plugin. This is the entry + * file for webpack test. Just like webpack will create a bundle.js + * file for our client, when we run test, it will compile and bundle them + * all here! Crazy huh. So we need to do some setup + */ +'use strict'; +Error.stackTraceLimit = Infinity; + +require('core-js'); + +// Typescript emit helpers polyfill +require('ts-helpers'); + +require('zone.js/dist/zone'); +require('zone.js/dist/long-stack-trace-zone'); +require('zone.js/dist/async-test'); +require('zone.js/dist/fake-async-test'); +require('zone.js/dist/sync-test'); +require('zone.js/dist/proxy'); +require('zone.js/dist/jasmine-patch'); + +// RxJS +require('rxjs/Rx'); + +var testing = require('@angular/core/testing'); +var browser = require('@angular/platform-browser-dynamic/testing'); + +testing.TestBed.initTestEnvironment( + browser.BrowserDynamicTestingModule, + browser.platformBrowserDynamicTesting() +); + +Object.assign(global, testing); + +/* + * Ok, this is kinda crazy. We can use the the context method on + * require that webpack created in order to tell webpack + * what files we actually want to require or import. + * Below, context will be an function/object with file names as keys. + * using that regex we are saying look in ./src/app and ./test then find + * any file that ends with spec.js and get its path. By passing in true + * we say do this recursively + */ +var testContext = require.context('./components', true, /\.spec\.ts/); + +/* + * get all the files, for each file, call the context function + * that will require the file and load it up here. Context will + * loop and require those spec files here + */ +function requireAll(requireContext) { + return requireContext.keys().map(requireContext); +} + +// requires and returns all modules that match +requireAll(testContext); diff --git a/test.bundle.js b/test.bundle.js deleted file mode 100644 index 9ade8579..00000000 --- a/test.bundle.js +++ /dev/null @@ -1,47 +0,0 @@ -'use strict'; - -/* eslint vars-on-top:0 no-var:0 */ -// @AngularClass -/* - * When testing with webpack and ES6, we have to do some extra - * things get testing to work right. Because we are gonna write test - * in ES6 to, we have to compile those as well. That's handled in - * karma.conf.js with the karma-webpack plugin. This is the entry - * file for webpack test. Just like webpack will create a bundle.js - * file for our client, when we run test, it well compile and bundle them - * all here! Crazy huh. So we need to do some setup - */ -Error.stackTraceLimit = Infinity; -require('phantomjs-polyfill'); -require('es6-promise'); -require('es6-shim'); -require('es7-reflect-metadata/dist/browser'); - -// require('zone.js'); -require('zone.js/dist/zone.js'); -require('zone.js/dist/long-stack-trace-zone.js'); -require('zone.js/dist/jasmine-patch.js'); -require('zone.js/dist/async-test.js'); - -var testing = require('@angular/core/testing'); -var browser = require('@angular/platform-browser-dynamic/testing'); - -testing.setBaseTestProviders( - browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, - browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS); - -/* - Ok, this is kinda crazy. We can use the the context method on - require that webpack created in order to tell webpack - what files we actually want to require or import. - Below, context will be an function/object with file names as keys. - using that regex we are saying look in ./src/app and ./test then find - any file that ends with spec.js and get its path. By passing in true - we say do this recursively - */ -var testContext = require.context('./components', true, /\.spec\.ts/); - -// get all the files, for each file, call the context function -// that will require the file and load it up here. Context will -// loop and require those spec files here -testContext.keys().forEach(testContext); diff --git a/tsconfig.json b/tsconfig.json index 8028f548..4613fb2e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,24 +3,31 @@ "target": "es5", "module": "commonjs", "moduleResolution": "node", - "sourceMap": false, - "declaration": true, - "removeComments": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, + "sourceMap": true, + "noEmitHelpers": true, "noImplicitAny": true, - "listFiles": false, - "noLib": false + "declaration": false, + "skipLibCheck": true, + "stripInternal": true, + "lib": [ + "dom", + "es6" + ], + "types": [ + "jasmine", + "node", + "webpack" + ] }, "exclude": [ - "node_modules" + "node_modules", + "bundles", + "dist" ], "files": [ - "./typings/browser.d.ts", + "./demo/custom-typings.d.ts", "./ng2-select.ts" - ], - "compileOnSave": false, - "buildOnSave": false, - "atom": { "rewriteTsconfig": false } + ] } - diff --git a/tsconfig.publish.json b/tsconfig.publish.json new file mode 100644 index 00000000..9c102d1a --- /dev/null +++ b/tsconfig.publish.json @@ -0,0 +1,31 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "commonjs", + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "sourceMap": false, + "noEmitHelpers": false, + "noImplicitAny": true, + "declaration": true, + "skipLibCheck": true, + "stripInternal": true, + "lib": ["dom", "es6"], + "types": [ + "jasmine", + "node", + "webpack" + ] + }, + "exclude": [ + "node_modules" + ], + "files": [ + "./demo/custom-typings.d.ts", + "./ng2-select.ts" + ], + "angularCompilerOptions": { + "genDir": "factories" + } +} diff --git a/tslint.json b/tslint.json index ea3f7760..589765ab 100644 --- a/tslint.json +++ b/tslint.json @@ -1,4 +1,8 @@ { "extends": "tslint-config-valorsoft", - "rulesDirectory": "./node_modules/codelyzer" + "rulesDirectory": "./node_modules/codelyzer", + "rules": { + "component-selector-name": [false, ""], + "only-arrow-functions": false + } } diff --git a/typings.json b/typings.json deleted file mode 100644 index 592b524e..00000000 --- a/typings.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "dependencies": { - "moment": "registry:npm/moment#2.10.5+20160211003958", - "webpack": "registry:npm/webpack#1.12.9+20160219013405" - }, - "devDependencies": {}, - "ambientDependencies": { - "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654", - "jasmine": "registry:dt/jasmine#2.2.0+20160317120654", - "require": "registry:dt/require#2.1.20+20160316155526" - } -} diff --git a/webpack.config.js b/webpack.config.js index 2d04b081..a280a0b6 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,15 +1,9 @@ -/* eslint global-require: 0 */ +/* eslint no-process-env: 0, global-require:0 */ 'use strict'; -const path = require('path'); -const marked = require('marked'); -const webpack = require('webpack'); const reqPrism = require('prismjs'); -const CompressionPlugin = require('compression-webpack-plugin'); -const CopyWebpackPlugin = require('copy-webpack-plugin'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); +const marked = require('marked'); -// marked renderer hack marked.Renderer.prototype.code = function renderCode(code, lang) { const out = this.options.highlight(code, lang); const classMap = this.options.langPrefix + lang; @@ -20,159 +14,35 @@ marked.Renderer.prototype.code = function renderCode(code, lang) { return `
${out}\n
\n`; }; -/*eslint no-process-env:0, camelcase:0*/ -const isProduction = (process.env.NODE_ENV || 'development') === 'production'; -const devtool = process.env.NODE_ENV === 'test' ? 'inline-source-map' : 'source-map'; -const dest = 'demo-build'; -const absDest = root(dest); - -const config = { - // isProduction ? 'source-map' : 'evale', - devtool, - debug: false, - - verbose: true, - displayErrorDetails: true, - context: __dirname, - stats: { - colors: true, - reasons: true - }, - - resolve: { - cache: false, - root: __dirname, - extensions: ['', '.ts', '.js', '.json'] - }, - - entry: { - angular2: [ - // Angular 2 Deps - 'es6-shim', - 'es6-promise', - 'zone.js', - 'reflect-metadata', - '@angular/common', - '@angular/core' - ], - 'angular2-select': ['ng2-select'], - 'angular2-select-demo': 'demo' - }, - - output: { - path: absDest, - filename: '[name].js', - sourceMapFilename: '[name].js.map', - chunkFilename: '[id].chunk.js' - }, +// Look in ./config folder for webpack.dev.js +const conf = getWebpackConfig(process.env.NODE_ENV, require('./.ng2-config')); - // our Development Server configs - devServer: { - inline: true, - colors: true, - historyApiFallback: true, - contentBase: dest, - //publicPath: dest, - outputPath: dest, - watchOptions: {aggregateTimeout: 300, poll: 1000} - }, +conf.markdownLoader = { + langPrefix: 'language-', + highlight(code, lang) { + const language = !lang || lang === 'html' ? 'markup' : lang; + const Prism = global.Prism || reqPrism; - markdownLoader: { - langPrefix: 'language-', - highlight(code, lang) { - const language = !lang || lang === 'html' ? 'markup' : lang; - const Prism = global.Prism || reqPrism; - - if (!Prism.languages[language]) { - require(`prismjs/components/prism-${language}.js`); - } - return Prism.highlight(code, Prism.languages[language]); - } - }, - module: { - loaders: [ - // support markdown - {test: /\.md$/, loader: 'html?minimize=false!markdown'}, - // Support for *.json files. - {test: /\.json$/, loader: 'json'}, - // Support for CSS as raw text - {test: /\.css$/, loader: 'raw'}, - // support for .html as raw text - {test: /\.html$/, loader: 'raw'}, - // Support for .ts files. - { - test: /\.ts$/, - loader: 'ts', - query: { - compilerOptions: { - removeComments: true, - noEmitHelpers: false - } - }, - exclude: [/\.(spec|e2e)\.ts$/] - } - ], - noParse: [ - /rtts_assert\/src\/rtts_assert/, - /reflect-metadata/, - /zone\.js\/dist\/zone-microtask/ - ] - }, - - plugins: [ - //new Clean([dest]), - new webpack.optimize.DedupePlugin(), - new webpack.optimize.OccurenceOrderPlugin(true), - new webpack.optimize.CommonsChunkPlugin({ - name: 'angular2', - minChunks: Infinity, - filename: 'angular2.js' - }), - // static assets - new CopyWebpackPlugin([{from: 'demo/favicon.ico', to: 'favicon.ico'}]), - new CopyWebpackPlugin([{from: 'demo/assets', to: 'assets'}]), - // generating html - new HtmlWebpackPlugin({template: 'demo/index.html'}) - ], - pushPlugins() { - if (!isProduction) { - return; + if (!Prism.languages[language]) { + require(`prismjs/components/prism-${language}.js`); } - const plugins = [ - //production only - new webpack.optimize.UglifyJsPlugin({ - beautify: false, - mangle: false, - comments: false, - compress: { - screw_ie8: true - //warnings: false, - //drop_debugger: false - } - //verbose: true, - //beautify: false, - //quote_style: 3 - }), - new CompressionPlugin({ - asset: '{file}.gz', - algorithm: 'gzip', - regExp: /\.js$|\.html|\.css|.map$/, - threshold: 10240, - minRatio: 0.8 - }) - ]; - - this - .plugins - .push - .apply(plugins); + return Prism.highlight(code, Prism.languages[language]); } }; -config.pushPlugins(); - -module.exports = config; - -function root(partialPath) { - return path.join(__dirname, partialPath); +module.exports = conf; + +function getWebpackConfig(env, config) { + switch (env) { + case 'prod': + case 'production': + return require('ng2-webpack-config').webpack.prod(config); + case 'test': + case 'testing': + return require('ng2-webpack-config').webpack.test(config); + case 'dev': + case 'development': + default: + return require('ng2-webpack-config').webpack.dev(config); + } }