diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md new file mode 100644 index 0000000..25d3ce1 --- /dev/null +++ b/.github/CONTRIBUTING.md @@ -0,0 +1,6 @@ +## Submitting Pull Requests +If you're changing the structure of the repository please create an issue first + +## Submitting bug reports + +Make sure you are on latest changes and that you ran this command `npm run clean:install` after updating your local repository. If you can, please provide more infomation about your environment such as browser, operating system, node version, and npm version \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md new file mode 100644 index 0000000..bf0ca89 --- /dev/null +++ b/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,32 @@ +**I'm submitting a ...** (check one with "x") +``` +[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting +[ ] support request => check the FAQ and search github for a similar issue before submitting +[ ] feature request +``` + +**Current behavior** + + +**Expected/desired behavior** + + +**Reproduction of the problem** +If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar. + + +**What is the expected behavior?** + + +**What is the motivation / use case for changing the behavior?** + + +**Please tell us about your environment:** + +* **ng2-translate version:** x.x.x + +* **Angular version:** 2.0.0-rc.X + +* **Browser:** [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] + +* **Language:** [all | TypeScript X.X | ES6/7 | ES5] diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..caae6b1 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,13 @@ +* **What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...) + + + +* **What is the current behavior?** (You can also link to an open issue here) + + + +* **What is the new behavior (if this is a feature change)?** + + + +* **Other information**: diff --git a/.gitignore b/.gitignore index ad6c30a..d581ed1 100644 --- a/.gitignore +++ b/.gitignore @@ -7,21 +7,17 @@ manifest.mf build.xml node_modules/* npm-debug.log +*.js +!config/* +!karma.conf.js +!webpack.config.js +*.map +*.d.ts +!make.js coverage -dist -typings +*.metadata.json bundles -src/*.js -src/*.d.ts -src/*.js.map -tests/*.js -tests/*.d.ts -tests/*.js.map -typings -index.js -index.d.ts -index.js.map -_test-output +.vscode ################# ## JetBrains @@ -29,8 +25,6 @@ _test-output .idea .project .settings -.idea/* -*.iml ############ ## Windows diff --git a/.npmignore b/.npmignore index b98da45..6b0a540 100644 --- a/.npmignore +++ b/.npmignore @@ -7,18 +7,14 @@ manifest.mf build.xml node_modules/* npm-debug.log -coverage -typings -typings.json -**/*.ts +*.ts !*.d.ts -!src/*.d.ts -!tests/*.d.ts -.travis.yml -karma* -make.js -tsconfig.json -_test-output +tests +.github +coverage +!*.metadata.json +!bundles/*.js +*.ngFactory.ts ################# ## JetBrains @@ -26,8 +22,6 @@ _test-output .idea .project .settings -.idea/* -*.iml ############ ## Windows diff --git a/.travis.yml b/.travis.yml index c159406..dfe3f7b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,23 +1,36 @@ -sudo: false language: node_js + cache: directories: + - $HOME/.npm + - $HOME/.yarn-cache - node_modules + +sudo: false + notifications: email: false + node_js: - - '5' + - '6' + +branches: + except: + - "/^v\\d+\\.\\d+\\.\\d+$/" + before_install: - - npm i -g npm@^3.7 + - export CHROME_BIN=chromium-browser + - npm i -g yarn + before_script: - npm prune -script: - - npm run test + +install: + - yarn + after_success: - npm run semantic-release -branches: - except: - - "/^v\\d+\\.\\d+\\.\\d+$/" + before_script: - export DISPLAY=:99.0 - sh -e /etc/init.d/xvfb start \ No newline at end of file diff --git a/README.md b/README.md index caab0ec..876524b 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ System.config({ 'ng2-slim-loading-bar': 'node_modules/ng2-slim-loading-bar' }, packages: { - 'ng2-slim-loading-bar': { main: 'index.js', defaultExtension: 'js' }, + 'ng2-slim-loading-bar': { defaultExtension: 'js' }, } }); ``` diff --git a/config/helpers.js b/config/helpers.js new file mode 100644 index 0000000..609b9e1 --- /dev/null +++ b/config/helpers.js @@ -0,0 +1,32 @@ +/** + * taken from angular2-webpack-starter + */ +var path = require('path'); + +// Helper functions +var ROOT = path.resolve(__dirname, '..'); + +function hasProcessFlag(flag) { + return process.argv.join('').indexOf(flag) > -1; +} + +function isWebpackDevServer() { + return process.argv[1] && !! (/webpack-dev-server$/.exec(process.argv[1])); +} + +function root(args) { + args = Array.prototype.slice.call(arguments, 0); + return path.join.apply(path, [ROOT].concat(args)); +} + +function checkNodeImport(context, request, cb) { + if (!path.isAbsolute(request) && request.charAt(0) !== '.') { + cb(null, 'commonjs ' + request); return; + } + cb(); +} + +exports.hasProcessFlag = hasProcessFlag; +exports.isWebpackDevServer = isWebpackDevServer; +exports.root = root; +exports.checkNodeImport = checkNodeImport; \ No newline at end of file diff --git a/config/karma.conf.js b/config/karma.conf.js new file mode 100644 index 0000000..9c6f57e --- /dev/null +++ b/config/karma.conf.js @@ -0,0 +1,58 @@ +module.exports = function(config) { + var testWebpackConfig = require('./webpack.test.js'); + + var configuration = { + basePath: '', + + frameworks: ['jasmine'], + + // list of files to exclude + exclude: [ ], + + /* + * list of files / patterns to load in the browser + * + * we are building the test environment in ./spec-bundle.js + */ + files: [ { pattern: './config/spec-bundle.js', watched: false } ], + + preprocessors: { './config/spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] }, + + // Webpack Config at ./webpack.test.js + webpack: testWebpackConfig, + + coverageReporter: { + type: 'in-memory' + }, + + remapCoverageReporter: { + 'text-summary': null, + json: './coverage/coverage.json', + html: './coverage/html' + }, + + // Webpack please don't spam the console when running in karma! + webpackMiddleware: { stats: 'errors-only'}, + + reporters: [ 'mocha', 'coverage', 'remap-coverage' ], + + // web server port + port: 9876, + + 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, + + autoWatch: false, + + browsers: [process.env.TRAVIS ? 'Firefox' : 'Chrome'], + + singleRun: true + }; + + config.set(configuration); +}; \ No newline at end of file diff --git a/config/spec-bundle.js b/config/spec-bundle.js new file mode 100644 index 0000000..81c94c8 --- /dev/null +++ b/config/spec-bundle.js @@ -0,0 +1,58 @@ +/* + * 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 + */ +Error.stackTraceLimit = Infinity; + +require('core-js/es6'); +require('core-js/es7/reflect'); + +// 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'); // since zone.js 0.6.15 +require('zone.js/dist/jasmine-patch'); // put here since zone.js 0.6.14 + +// 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() +); + +/* + * Ok, this is kinda crazy. We can use 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 a function/object with file names as keys. + * Using that regex we are saying look in ../src then find + * any file that ends with spec.ts and get its path. By passing in true + * we say do this recursively + */ +var testContext = require.context('../tests', 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 +var modules = requireAll(testContext); \ No newline at end of file diff --git a/config/testing-utils.ts b/config/testing-utils.ts new file mode 100644 index 0000000..e7d202d --- /dev/null +++ b/config/testing-utils.ts @@ -0,0 +1,46 @@ +/// + +/* + Temporary fiile for referencing the TypeScript defs for Jasmine + some potentially + utils for testing. Will change/adjust this once I find a better way of doing + */ + +declare module jasmine { + interface Matchers { + toHaveText(text: string): boolean; + toContainText(text: string): boolean; + } +} + +beforeEach(() => { + jasmine.addMatchers({ + + toHaveText: function() { + return { + compare: function(actual, expectedText) { + var actualText = actual.textContent; + return { + pass: actualText === expectedText, + get message() { + return 'Expected ' + actualText + ' to equal ' + expectedText; + } + }; + } + }; + }, + + toContainText: function() { + return { + compare: function(actual, expectedText) { + var actualText = actual.textContent; + return { + pass: actualText.indexOf(expectedText) > -1, + get message() { + return 'Expected ' + actualText + ' to contain ' + expectedText; + } + }; + } + }; + } + }); +}); \ No newline at end of file diff --git a/config/webpack.test.js b/config/webpack.test.js new file mode 100644 index 0000000..4412e08 --- /dev/null +++ b/config/webpack.test.js @@ -0,0 +1,89 @@ +/** + * Adapted from angular2-webpack-starter + */ + +const helpers = require('./helpers'), + webpack = require('webpack'), + LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin'); + +/** + * Webpack Plugins + */ + +module.exports = { + + /** + * Source map for Karma from the help of karma-sourcemap-loader & karma-webpack + * + * Do not change, leave as is or it wont work. + * See: https://github.com/webpack/karma-webpack#source-maps + */ + devtool: 'inline-source-map', + + resolve: { + extensions: ['.ts', '.js'], + modules: [helpers.root('src'), 'node_modules'] + }, + + module: { + rules: [{ + enforce: 'pre', + test: /\.ts$/, + loader: 'tslint', + exclude: [helpers.root('node_modules')] + }, { + enforce: 'pre', + test: /\.js$/, + loader: 'source-map-loader', + exclude: [ + // these packages have problems with their sourcemaps + helpers.root('node_modules/rxjs'), + helpers.root('node_modules/@angular') + ] + }, { + test: /\.ts$/, + loader: 'awesome-typescript-loader', + query: { + // use inline sourcemaps for "karma-remap-coverage" reporter + sourceMap: false, + inlineSourceMap: true, + module: "commonjs", + removeComments: true + }, + exclude: [/\.e2e\.ts$/] + }, { + enforce: 'post', + test: /\.(js|ts)$/, + loader: 'istanbul-instrumenter-loader', + include: helpers.root('src'), + exclude: [/\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/] + }], + }, + + plugins: [ + // fix the warning in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js + new webpack.ContextReplacementPlugin( + /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, + helpers.root('./src') + ), + + new LoaderOptionsPlugin({ + debug: true, + options: { + + /** + * Static analysis linter for TypeScript advanced options configuration + * Description: An extensible linter for the TypeScript language. + * + * See: https://github.com/wbuchwalter/tslint-loader + */ + tslint: { + emitErrors: false, + failOnHint: false, + resourcePath: 'src' + }, + + } + }) + ] +}; diff --git a/index.ts b/index.ts index a634b22..d3342a9 100644 --- a/index.ts +++ b/index.ts @@ -2,32 +2,26 @@ // This project is licensed under the terms of the MIT license. // https://github.com/akserg/ng2-slim-loading-bar -'use strict'; +import { NgModule, ModuleWithProviders } from "@angular/core"; -import {NgModule, ModuleWithProviders} from "@angular/core"; -import {CommonModule} from "@angular/common"; - -import {SlimLoadingBarComponent} from './src/slim-loading-bar.component'; -import {SlimLoadingBarService} from './src/slim-loading-bar.service'; +import { SlimLoadingBarComponent } from './src/slim-loading-bar.component'; +import { SlimLoadingBarService, slimLoadingBarServiceFactory } from './src/slim-loading-bar.service'; export * from './src/slim-loading-bar.component'; export * from './src/slim-loading-bar.service'; -export default { - providers: [SlimLoadingBarService], - directives: [SlimLoadingBarComponent] -} +export let providers = [{ provide: SlimLoadingBarService, useFactory: slimLoadingBarServiceFactory }]; @NgModule({ - imports: [CommonModule], - declarations: [SlimLoadingBarComponent], - exports: [CommonModule, SlimLoadingBarComponent] + declarations: [SlimLoadingBarComponent], + exports: [SlimLoadingBarComponent], + providers: providers }) export class SlimLoadingBarModule { - static forRoot(): ModuleWithProviders { + static forRoot(): ModuleWithProviders { return { ngModule: SlimLoadingBarModule, - providers: [SlimLoadingBarService] + providers: providers }; } } diff --git a/karma-test-shim.js b/karma-test-shim.js deleted file mode 100644 index 9952664..0000000 --- a/karma-test-shim.js +++ /dev/null @@ -1,85 +0,0 @@ -// #docregion -// /*global jasmine, __karma__, window*/ -Error.stackTraceLimit = Infinity; // - -jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; - -var builtPath = '/base/tests/'; - -__karma__.loaded = function () { }; - -function isJsFile(path) { - return path.slice(-3) == '.js'; -} - -function isSpecFile(path) { - return /\.spec\.(.*\.)?js$/.test(path); -} - -function isBuiltFile(path) { - return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath); -} - -var allSpecFiles = Object.keys(window.__karma__.files) - .filter(isSpecFile) - .filter(isBuiltFile); - -System.config({ - baseURL: '/base/', - defaultJSExtensions: true, - - // Assume npm: is set in `paths` in systemjs.config - // Map the angular testing umd bundles - map: { - '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js', - '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js', - '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js', - '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js', - '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js', - '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js', - '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js', - '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js', - }, -}); - -System.import('systemjs.config.js') -// .then(importSystemJsExtras) - .then(initTestBed) - .then(initTesting); - -/** Optional SystemJS configuration extras. Keep going w/o it */ -// function importSystemJsExtras(){ -// return System.import('systemjs.config.extras.js') -// .catch(function(reason) { -// console.log( -// 'WARNING: System.import could not load "systemjs.config.extras.js"; continuing without it.' -// ); -// console.log(reason); -// }); -// } - -function initTestBed(){ - return Promise.all([ - System.import('@angular/core/testing'), - System.import('@angular/platform-browser-dynamic/testing') - ]) - - .then(function (providers) { - var coreTesting = providers[0]; - var browserTesting = providers[1]; - - coreTesting.TestBed.initTestEnvironment( - browserTesting.BrowserDynamicTestingModule, - browserTesting.platformBrowserDynamicTesting()); - }) -}; - -// Import all spec files and start karma -function initTesting () { - return Promise.all( - allSpecFiles.map(function (moduleName) { - return System.import(moduleName); - }) - ) - .then(__karma__.start, __karma__.error); -} \ No newline at end of file diff --git a/karma.conf.js b/karma.conf.js index 95506e4..09f1f7a 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -1,82 +1,2 @@ -// #docregion -module.exports = function (config) { - // transpiled src JS and map files - var appBase = 'src/'; - // transpiled test JS and map files - var testBase = 'tests/'; - - config.set({ - basePath: './', - frameworks: ['jasmine'], - plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('karma-firefox-launcher'), - require('karma-htmlfile-reporter') - ], - - customLaunchers: { - // From the CLI. - // Chrome setup for travis CI using chromium - Chrome_travis_ci: { - base: 'Chrome', - flags: ['--no-sandbox'] - } - }, - files: [ - // System.js for module loading - 'node_modules/systemjs/dist/system.src.js', - - // Polyfills - 'node_modules/core-js/client/shim.js', - 'node_modules/reflect-metadata/Reflect.js', - - // zone.js - 'node_modules/zone.js/dist/zone.js', - 'node_modules/zone.js/dist/long-stack-trace-zone.js', - 'node_modules/zone.js/dist/proxy.js', - 'node_modules/zone.js/dist/sync-test.js', - 'node_modules/zone.js/dist/jasmine-patch.js', - 'node_modules/zone.js/dist/async-test.js', - 'node_modules/zone.js/dist/fake-async-test.js', - - // RxJs - { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, - { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false }, - - // Paths loaded via module imports: - // Angular itself - { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false }, - { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false }, - - { pattern: 'systemjs.config.js', included: false, watched: false }, - { pattern: 'systemjs.config.extras.js', included: false, watched: false }, - 'karma-test-shim.js', - - // transpiled application & spec code paths loaded via module imports - { pattern: appBase + '**/*.js', included: false, watched: true }, - { pattern: testBase + '**/*.js', included: false, watched: true }, - ], - - exclude: [], - preprocessors: {}, - reporters: ['progress', 'html'], - - // HtmlReporter configuration - htmlReporter: { - // Open this file to see results in browser - outputFile: '_test-output/tests.html', - - // Optional - pageTitle: 'Unit Tests', - subPageTitle: __dirname - }, - - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: false, - browsers: [process.env.TRAVIS ? 'Firefox' : 'Chrome'], - singleRun: true - }) -} \ No newline at end of file +// Look in ./config for karma.conf.js +module.exports = require('./config/karma.conf.js'); \ No newline at end of file diff --git a/make.js b/make.js deleted file mode 100644 index 8ed3208..0000000 --- a/make.js +++ /dev/null @@ -1,35 +0,0 @@ -var pkg = require('./package.json'); -var path = require('path'); -var Builder = require('systemjs-builder'); - -var builder = new Builder(); -var config = { - baseURL: '.', - transpiler: 'typescript', - typescriptOptions: { - module: 'cjs' - }, - map: { - 'typescript': './node_modules/typescript/lib/typescript.js', - '@angular': path.resolve('node_modules/@angular'), - 'rxjs': path.resolve('node_modules/rxjs') - }, - paths: { - '*': '*.js' - }, - meta: { - 'node_modules/@angular/*': { build: false }, - 'node_modules/rxjs/*': { build: false } - }, -}; - -builder.config(config); - -builder -.bundle('index', path.resolve(__dirname, 'bundles/', pkg.name + '.js')) -.then(function() { - console.log('Build complete.'); -}) -.catch(function(err) { - console.log('Error', err); -}); diff --git a/package.json b/package.json index 22b36d7..c33f428 100644 --- a/package.json +++ b/package.json @@ -3,10 +3,11 @@ "description": "Angular2 component shows slim loading bar at the top of the page", "version": "0.0.0-semantically-released", "scripts": { - "test": "tsc && karma start karma.conf.js", + "test": "karma start", "test-watch": "tsc && karma start --no-single-run --auto-watch", - "minify": "node node_modules/uglify-js/bin/uglifyjs bundles/ng2-slim-loading-bar.js -o bundles/ng2-slim-loading-bar.min.js --source-map bundles/ng2-slim-loading-bar.min.js.map -c -m", - "prepublish": "typings install && tsc && node make.js && npm run minify", + "commit": "npm run prepublish && npm test && git-cz", + "prepublish": "ngc && npm run build", + "build": "webpack && cp style.css bundles/style.css", "semantic-release": "semantic-release pre && npm publish && semantic-release post" }, "repository": { @@ -26,35 +27,51 @@ "bugs": { "url": "https://github.com/akserg/ng2-slim-loading-bar/issues" }, - "main": "index.js", - "typings": "index", + "main": "bundles/index.umd.js", + "module": "index.js", + "typings": "index.d.ts", "homepage": "https://github.com/akserg/ng2-slim-loading-bar", - "dependencies": { - "core-js": "^2.4.1", - "reflect-metadata": "^0.1.3", - "rxjs": "5.0.0-beta.12", - "zone.js": "^0.6.23" + "peerDependencies": { + "@angular/core": "^2.0.0" }, "devDependencies": { - "@angular/common": "2.0.0", - "@angular/compiler": "2.0.0", - "@angular/core": "2.0.0", - "@angular/platform-browser": "2.0.0", - "@angular/platform-browser-dynamic": "2.0.0", - "commitizen": "^2.7.6", - "cz-conventional-changelog": "^1.1.5", - "jasmine-core": "~2.5.1", - "karma": "~1.3.0", - "karma-chrome-launcher": "~2.0.0", - "karma-firefox-launcher": "~1.0.0", - "karma-htmlfile-reporter": "^0.3.4", - "karma-jasmine": "~1.0.2", - "semantic-release": "^4.3.5", - "systemjs": "~0.19.27", - "systemjs-builder": "^0.15.6", - "typescript": "^2.0.2", - "typings": "^1.3.3", - "uglify-js": "^2.6.2" + "@angular/common": "2.1.2", + "@angular/compiler": "2.1.2", + "@angular/compiler-cli": "2.1.2", + "@angular/core": "2.1.2", + "@angular/platform-browser": "2.1.2", + "@angular/platform-browser-dynamic": "2.1.2", + "@angular/platform-server": "2.1.2", + "@types/hammerjs": "2.0.33", + "@types/jasmine": "2.5.37", + "@types/node": "6.0.46", + "awesome-typescript-loader": "2.2.4", + "codelyzer": "1.0.0-beta.3", + "commitizen": "2.8.6", + "core-js": "2.4.1", + "cz-conventional-changelog": "1.2.0", + "istanbul-instrumenter-loader": "0.2.0", + "jasmine-core": "2.5.2", + "karma": "1.3.0", + "karma-chrome-launcher": "2.0.0", + "karma-firefox-launcher": "1.0.0", + "karma-coverage": "1.1.1", + "karma-jasmine": "1.0.2", + "karma-mocha-reporter": "^2.1.0", + "karma-remap-coverage": "~0.1.2", + "karma-sourcemap-loader": "^0.3.7", + "karma-webpack": "^1.8.0", + "loader-utils": "~0.2.16", + "reflect-metadata": "0.1.8", + "rxjs": "5.0.0-beta.12", + "semantic-release": "4.3.5", + "source-map-loader": "0.1.5", + "ts-helpers": "1.1.2", + "tslint": "3.15.1", + "tslint-loader": "2.1.5", + "typescript": "2.0.10", + "webpack": "2.1.0-beta.25", + "zone.js": "0.6.26" }, "config": { "commitizen": { diff --git a/src/slim-loading-bar.component.ts b/src/slim-loading-bar.component.ts index 09448ba..2d80f94 100644 --- a/src/slim-loading-bar.component.ts +++ b/src/slim-loading-bar.component.ts @@ -2,46 +2,34 @@ // This project is licensed under the terms of the MIT license. // https://github.com/akserg/ng2-slim-loading-bar -import {Component, Input, OnInit} from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; -import {SlimLoadingBarService, SlimLoadingBarEvent, SlimLoadingBarEventType} from './slim-loading-bar.service'; -import {isPresent} from './slim-loading-bar.utils'; +import { SlimLoadingBarService, SlimLoadingBarEvent, SlimLoadingBarEventType } from './slim-loading-bar.service'; +import { isPresent } from './slim-loading-bar.utils'; /** * A Slim Loading Bar component shows message loading progress bar on the top of web page or parent component. */ @Component({ - moduleId: module.id.toString(), selector: 'ng2-slim-loading-bar', template: `
-
` }) export class SlimLoadingBarComponent implements OnInit { - private progressEl:HTMLDivElement; - - private _progress: string = '0%'; - @Input() set progress(value: string) { - if (isPresent(value)) { - this._progress = value + '%'; - } - } - get progress(): string { - return this._progress; - } - + @Input() progress: string = '0'; @Input() color: string = 'firebrick'; @Input() height: string = '2px'; @Input() show: boolean = true; - constructor(private service:SlimLoadingBarService) {} + constructor(public service: SlimLoadingBarService) { } ngOnInit(): any { - this.service.observable.subscribe((event:SlimLoadingBarEvent) => { - if (event.type === SlimLoadingBarEventType.PROGRESS) { + this.service.events.subscribe((event: SlimLoadingBarEvent) => { + if (event.type === SlimLoadingBarEventType.PROGRESS && isPresent(event.value)) { this.progress = event.value; } else if (event.type === SlimLoadingBarEventType.COLOR) { this.color = event.value; diff --git a/src/slim-loading-bar.service.ts b/src/slim-loading-bar.service.ts index b171a95..499ca69 100644 --- a/src/slim-loading-bar.service.ts +++ b/src/slim-loading-bar.service.ts @@ -2,11 +2,7 @@ // This project is licensed under the terms of the MIT license. // https://github.com/akserg/ng2-slim-loading-bar -import {Injectable} from '@angular/core'; - -import {Observable} from 'rxjs/Observable'; -import {Subscriber} from 'rxjs/Subscriber'; -import {Subscription} from 'rxjs/Subscription'; +import {Injectable, EventEmitter} from '@angular/core'; import {isPresent} from './slim-loading-bar.utils'; @@ -21,6 +17,10 @@ export class SlimLoadingBarEvent { constructor(public type:SlimLoadingBarEventType, public value:any) {} } +export function slimLoadingBarServiceFactory(): SlimLoadingBarService { + return new SlimLoadingBarService(new EventEmitter()); + } + /** * SlimLoadingBar service helps manage Slim Loading bar on the top of screen or parent component */ @@ -35,20 +35,13 @@ export class SlimLoadingBarService { private _intervalCounterId:any = 0; public interval:number = 500; // in milliseconds - public observable: Observable; - private subscriber: Subscriber; - - constructor() { - this.observable = new Observable((subscriber:Subscriber) => { - this.subscriber = subscriber; - }); - } + constructor(public events: EventEmitter) {} set progress(value:number) { if (isPresent(value)) { - if (value > 0) { - this.visible = true; - } + if (value > 0) { + this.visible = true; + } this._progress = value; this.emitEvent(new SlimLoadingBarEvent(SlimLoadingBarEventType.PROGRESS, this._progress)); } @@ -93,9 +86,9 @@ export class SlimLoadingBarService { } private emitEvent(event: SlimLoadingBarEvent) { - if (this.subscriber) { + if (this.events) { // Push up a new event - this.subscriber.next(event); + this.events.next(event); } } diff --git a/systemjs.config.js b/systemjs.config.js deleted file mode 100644 index 7e535ac..0000000 --- a/systemjs.config.js +++ /dev/null @@ -1,39 +0,0 @@ -/** - * System configuration for Angular 2. - */ -(function (global) { - System.config({ - paths: { - // paths serve as alias - 'npm:': 'node_modules/' - }, - // map tells the System loader where to look for things - map: { - // our app is within the app folder - app: '.', - - // angular bundles - '@angular/core': 'npm:@angular/core/bundles/core.umd.js', - '@angular/common': 'npm:@angular/common/bundles/common.umd.js', - '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', - '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', - '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', - '@angular/http': 'npm:@angular/http/bundles/http.umd.js', - '@angular/router': 'npm:@angular/router/bundles/router.umd.js', - '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', - - // other libraries - 'rxjs': 'npm:rxjs' - }, - // packages tells the System loader how to load when no filename and/or no extension - packages: { - app: { - main: './index.js', - defaultExtension: 'js' - }, - rxjs: { - defaultExtension: 'js' - } - } - }); -})(this); \ No newline at end of file diff --git a/tests/component.spec.ts b/tests/slim-loading-bar.component.spec.ts similarity index 92% rename from tests/component.spec.ts rename to tests/slim-loading-bar.component.spec.ts index 3f85dc7..0906441 100644 --- a/tests/component.spec.ts +++ b/tests/slim-loading-bar.component.spec.ts @@ -1,7 +1,7 @@ import { TestBed, ComponentFixture } from '@angular/core/testing'; -import {SlimLoadingBarService, SlimLoadingBarEvent, SlimLoadingBarEventType} +import {SlimLoadingBarService, slimLoadingBarServiceFactory} from '../src/slim-loading-bar.service'; import {SlimLoadingBarComponent} from '../src/slim-loading-bar.component'; @@ -12,10 +12,12 @@ describe('SlimLoadingBar', () => { let containerDiv:HTMLDivElement; let progressDiv:HTMLDivElement; + let providers = [{ provide: SlimLoadingBarService, useFactory: slimLoadingBarServiceFactory }]; + beforeEach(() => { TestBed.configureTestingModule({ declarations: [SlimLoadingBarComponent], - providers: [SlimLoadingBarService] + providers: [providers] }); TestBed.compileComponents(); }); diff --git a/tests/service.spec.ts b/tests/slim-loading-bar.service.spec.ts similarity index 91% rename from tests/service.spec.ts rename to tests/slim-loading-bar.service.spec.ts index 37eadb6..7b464b5 100644 --- a/tests/service.spec.ts +++ b/tests/slim-loading-bar.service.spec.ts @@ -1,16 +1,17 @@ import { inject, fakeAsync, tick, TestBed } from '@angular/core/testing'; -import {SlimLoadingBarService, SlimLoadingBarEvent, SlimLoadingBarEventType} +import {SlimLoadingBarService, slimLoadingBarServiceFactory} from '../src/slim-loading-bar.service'; describe('SlimLoadingBarService', () => { let service: SlimLoadingBarService; + let providers = [{ provide: SlimLoadingBarService, useFactory: slimLoadingBarServiceFactory }]; beforeEach(() => { TestBed.configureTestingModule({ - providers: [SlimLoadingBarService] + providers: [providers] }); }); diff --git a/tsconfig.json b/tsconfig.json index 9704972..e033674 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,12 +1,33 @@ { - "compilerOptions": { - "noImplicitAny": true, - "module": "commonjs", - "target": "ES5", - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "declaration": true, - "moduleResolution": "node", - "sourceMap": true - } -} \ No newline at end of file + "compilerOptions": { + "noImplicitAny": true, + "module": "es2015", + "target": "es5", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "declaration": true, + "moduleResolution": "node", + "types": [ + "hammerjs", + "jasmine", + "node" + ], + "lib": ["es2015", "dom"] + }, + "files": [ + "index.ts", + "./src/slim-loading-bar.component.ts", + "./src/slim-loading-bar.service.ts", + "./src/slim-loading-bar.utils.ts", + "tests/slim-loading-bar.component.spec.ts", + "tests/slim-loading-bar.service.spec.ts" + ], + "exclude": [ + "node_modules", + "bundles" + ], + "angularCompilerOptions": { + "strictMetadataEmit": true, + "skipTemplateCodegen": true + } +} diff --git a/tslint.json b/tslint.json new file mode 100644 index 0000000..356294b --- /dev/null +++ b/tslint.json @@ -0,0 +1,80 @@ +{ + "rulesDirectory": [ + "node_modules/codelyzer" + ], + "rules": { + "class-name": true, + "curly": true, + "forin": true, + "indent": [ + true, + "spaces" + ], + "label-position": true, + "label-undefined": true, + "member-access": false, + "no-arg": true, + "no-bitwise": true, + "no-console": [ + true, + "debug", + "info", + "time", + "timeEnd", + "trace" + ], + "no-construct": true, + "no-debugger": true, + "no-duplicate-key": true, + "no-duplicate-variable": true, + "no-empty": false, + "no-eval": true, + "no-inferrable-types": false, + "no-shadowed-variable": true, + "no-string-literal": false, + "no-unused-expression": true, + "no-unused-variable": true, + "no-unreachable": true, + "no-use-before-declare": true, + "object-literal-sort-keys": false, + "one-line": [ + true, + "check-open-brace", + "check-catch", + "check-else", + "check-whitespace" + ], + "radix": true, + "semicolon": [ + "always" + ], + "triple-equals": [ + true, + "allow-null-check" + ], + "typedef-whitespace": [ + true, + { + "call-signature": "nospace", + "index-signature": "nospace", + "parameter": "nospace", + "property-declaration": "nospace", + "variable-declaration": "nospace" + } + ], + "variable-name": false, + "directive-selector-type": [ + true, + "attribute" + ], + "component-selector-type": [ + true, + "element" + ], + "use-input-property-decorator": true, + "use-output-property-decorator": true, + "use-host-property-decorator": false, + "use-life-cycle-interface": true, + "use-pipe-transform-interface": true + } +} diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..91578ee --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,62 @@ +/** + * Adapted from angular2-webpack-starter + */ + +const helpers = require('./config/helpers'), + webpack = require('webpack'); + +/** + * Webpack Plugins + */ +const ProvidePlugin = require('webpack/lib/ProvidePlugin'); +const DefinePlugin = require('webpack/lib/DefinePlugin'); +const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin'); + +module.exports = { + resolve: { + extensions: ['.ts', '.js'] + }, + + entry: helpers.root('index.ts'), + + output: { + path: helpers.root('bundles'), + publicPath: '/', + filename: 'index.umd.js', + libraryTarget: 'umd', + library: 'ng2-slim-loading-bar' + }, + + // require those dependencies but don't bundle them + externals: [/^\@angular\//, /^rxjs\//], + + module: { + rules: [{ + enforce: 'pre', + test: /\.ts$/, + loader: 'tslint', + exclude: [helpers.root('node_modules')] + }, { + test: /\.ts$/, + loader: 'awesome-typescript-loader?declaration=false', + exclude: [/\.e2e\.ts$/] + }] + }, + + plugins: [ + // fix the warning in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js + new webpack.ContextReplacementPlugin( + /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, + helpers.root('./src') + ), + + new webpack.LoaderOptionsPlugin({ + options: { + tslintLoader: { + emitErrors: false, + failOnHint: false + } + } + }) + ] +};