Skip to content

Commit

Permalink
Revert "Revert "upgrade to ng4 and angular-library-starter""
Browse files Browse the repository at this point in the history
  • Loading branch information
orizens authored Apr 12, 2017
1 parent 9d5a62b commit 08df724
Show file tree
Hide file tree
Showing 58 changed files with 1,681 additions and 596 deletions.
9 changes: 8 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -50,4 +50,11 @@ typings

src/ngFactory
*.metadata.json
dist

$ cat .gitignore
/node_modules
/dist
/documentation

*.log
*.tgz
31 changes: 20 additions & 11 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -1,14 +1,23 @@
sudo: required
dist: trusty
addons:
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
language: node_js
sudo: false
node_js:
- '5.9.1'

- stable
before_install:
- npm i npm@^4 -g
install:
- npm install

after_script:
- process.exit()

cache:
directories:
- $HOME/.nvm
- npm install
script:
- npm test
before_script:
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
- sleep 3
notifications:
email: false
34 changes: 10 additions & 24 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,13 @@
## v 0.3.3 (2017/03/01)
## Angular library starter Changelog

### Updates
* reverted the fix of #126
<a name="Mar 25, 2017"></a>
### Mar 25, 2017
* Upgrade to Angular 4 configuration

## v 0.3.2 (2017/03/01)

### Updates
* fixes [#126](https://github.com/orizens/angular2-infinite-scroll/issues/126)

## v 0.3.1 (2017/02/15)

### Updates
* added custom scrollable container from [#108](https://github.com/orizens/angular2-infinite-scroll/pull/108/files)

## v 0.3.0 (2017/01/31)

### Updates
* refactored infinite scroller to smaller modules with composition
* added "models" - includes interfaces for development

## v 0.2.9 (2017/01/13)

### Updates
* added changelog.md
* ([refactor(scroll): replaces throttle with debounce](https://github.com/orizens/angular2-infinite-scroll/pull/82))
<a name="Mar 6, 2017"></a>
### Mar 6, 2017
* Add _compodoc_ for generating documentation

<a name="Feb 5, 2017"></a>
### Feb 5, 2017
* Create library
161 changes: 161 additions & 0 deletions Development Instructions.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
# angular-library-starter
[![Build Status](https://travis-ci.org/robisim74/angular-library-starter.svg?branch=master)](https://travis-ci.org/robisim74/angular-library-starter)
>Build an Angular library compatible with AoT compilation &amp; Tree shaking.
This starter allows you to create a library for **Angular 2+** apps written in _TypeScript_, _ES6_ or _ES5_.
The project is based on the official _Angular_ packages.

Get the [Changelog](https://github.com/robisim74/angular-library-starter/blob/master/CHANGELOG.md).

## Contents
* [1 Project structure](#1)
* [2 Customizing](#2)
* [3 Unit testing](#3)
* [4 Building](#4)
* [5 Publishing](#5)
* [6 Documentation](#6)
* [7 Using the library](#7)
* [8 What it is important to know](#8)

## <a name="1"></a>1 Project structure
- Library:
- **src** folder for the classes
- **public_api.ts** entry point for all public APIs of the package
- **package.json** _npm_ options
- **rollup.config.js** _Rollup_ configuration for building the bundles
- **tsconfig-build.json** _ngc_ compiler options for _AoT compilation_
- **build.js** building process using _ShellJS_
- Unit testing:
- **tests** folder for unit tests
- **karma.conf.js** _Karma_ configuration that uses _webpack_ to build the tests
- **spec.bundle.js** defines the files used by _webpack_
- **tsconfig.json** _TypeScript_ compiler options
- Extra:
- **tslint.json** _TypeScript_ linter rules with _Codelyzer_
- **travis.yml** _Travis CI_ configuration

## <a name="2"></a>2 Customizing
1. Update [Node & npm](https://docs.npmjs.com/getting-started/installing-node).

2. Rename `angular-library-starter` and `angularLibraryStarter` everywhere to `my-library` and `myLibrary`.

3. Update in `package.json` file:
- version: [Semantic Versioning](http://semver.org/)
- description
- urls
- packages

and run `npm install`.

4. Create your classes in `src` folder, and export public classes in `my-library.ts`.

5. You can create only one _module_ for the whole library:
I suggest you create different _modules_ for different functions,
so that the user can import only those he needs and optimize _Tree shaking_ of his app.

6. Update in `rollup.config.js` file `external` & `globals` libraries with those that actually you use.

7. Create unit tests in `tests` folder.
_Karma_ is configured to use _webpack_ only for `*.ts` files: if you need to test different formats, you have to update it.

## <a name="3"></a>3 Unit testing
```Shell
npm test
```

## <a name="4"></a>4 Building
The following command:
```Shell
npm run build
```
- starts _TSLint_ with _Codelyzer_
- starts _AoT compilation_ using _ngc_ compiler
- creates `dist` folder with all the files of distribution

To test locally the npm package:
```Shell
npm run pack-lib
```
Then you can install it in an app to test it:
```Shell
npm install [path]my-library-[version].tgz
```

## <a name="5"></a>5 Publishing
Before publishing the first time:
- you can register your library on [Travis CI](https://travis-ci.org/): you have already configured `.travis.yml` file
- you must have a user on the _npm_ registry: [Publishing npm packages](https://docs.npmjs.com/getting-started/publishing-npm-packages)

```Shell
npm run publish-lib
```

## <a name="6"></a>6 Documentation
To generate the documentation, this starter uses [compodoc](https://github.com/compodoc/compodoc):
```Shell
npm run compodoc
npm run compodoc-serve
```

## <a name="7"></a>7 Using the library
### Installing
```Shell
npm install my-library --save
```
### Loading
#### Using SystemJS configuration
```JavaScript
System.config({
map: {
'my-library': 'node_modules/my-library/bundles/my-library.umd.js'
}
});
```
#### Angular-CLI
No need to set up anything, just import it in your code.
#### Rollup or webpack
No need to set up anything, just import it in your code.
#### Plain JavaScript
Include the `umd` bundle in your `index.html`:
```Html
<script src="node_modules/my-library/bundles/my-library.umd.js"></script>
```
and use global `ng.myLibrary` namespace.

### AoT compilation
The library is compatible with _AoT compilation_.

## <a name="8"></a>8 What it is important to know
1. `package.json`

* `"main": "./bundles/angular-library-starter.umd.js"` legacy module format
* `"module": "./bundles/angular-library-starter.es5.js"` flat _ES_ module, for using module bundlers such as _Rollup_ or _webpack_:
[package module](https://github.com/rollup/rollup/wiki/pkg.module)
* `"es2015": "./bundles/angular-library-starter.js"` _ES2015_ flat _ESM_ format, experimental _ES2015_ build
* `"peerDependencies"` the packages and their versions required by the library when it will be installed

2. `tsconfig-build.json` file used by _ngc_ compiler

* Compiler options:
* `"declaration": true` to emit _TypeScript_ declaration files
* `"module": "es2015"` & `"target": "es2015"` are used by _Rollup_ to create the _ES2015_ bundle

* Angular Compiler Options:
* `"skipTemplateCodegen": true,` skips generating _AoT_ files
* `"annotateForClosureCompiler": true` for compatibility with _Google Closure compiler_
* `"strictMetadataEmit": true` without emitting metadata files, the library will not compatible with _AoT compilation_

3. `rollup.config.js` file used by _Rollup_

* `format: 'umd'` the _Universal Module Definition_ pattern is used by _Angular_ for its bundles
* `moduleName: 'ng.angularLibraryStarter'` defines the global namespace used by _JavaScript_ apps
* `external` & `globals` declare the external packages

4. Server-side prerendering

If you want the library will be compatible with server-side prerendering:
* `window`, `document`, `navigator` and other browser types do not exist on the server
* don't manipulate the _nativeElement_ directly

## License
MIT
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2016 Oren Farhi
Copyright (c) 2017 Roberto Simonetti

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
12 changes: 1 addition & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
Inspired by [ng-infinite-scroll](https://github.com/sroze/ngInfiniteScroll) directive for angular (> 2).

## Angular Support
Supports in Angular - **Final - 2.x.x**
Supports in Angular **> +2, 4**

## Angular Consulting Services
I'm a Senior Javascript Engineer & A Front End Consultant at [Orizens](http://orizens.com).
Expand Down Expand Up @@ -144,15 +144,5 @@ export class AppComponent {
}
```

## Testing
To start developing tdd/bdd style: ```npm run dev```
This will: compile ts files, watch for changes and start the test task. Whenever a ts file is changed, it will rerun the tests.

Travis-ci is integrated

### Credits For Tests Setup
[ng2-test-seed](https://github.com/juliemr/ng2-test-seed) has been a huge help and source of inspiration. At first, copy & paste, then, customisation to adapt to this code repository.
Thanks [@juliemr](https://github.com/juliemr)!

# Showcase Examples
* [Echoes Player Ng2 Version](http://orizens.github.io/echoes-ng2) ([github repo for echoes player](http://github.com/orizens/echoes-ng2))
61 changes: 61 additions & 0 deletions build.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
"use strict";

require('shelljs/global');
const chalk = require('chalk');

const PACKAGE = `ngx-infinite-scroll`;
const NPM_DIR = `dist`;
const MODULES_DIR = `${NPM_DIR}/modules`;
const BUNDLES_DIR = `${NPM_DIR}/bundles`;

echo('Start building...');

rm(`-Rf`, `${NPM_DIR}/*`);
mkdir(`-p`, `./${MODULES_DIR}`);
mkdir(`-p`, `./${BUNDLES_DIR}`);

/* TSLint with Codelyzer */
// https://github.com/palantir/tslint/blob/master/src/configs/recommended.ts
// https://github.com/mgechev/codelyzer
echo(`Start TSLint`);
exec(`tslint --project ./tsconfig.json --type-check ./src/**/*.ts`);
echo(chalk.green(`TSLint completed`));

/* Aot compilation: ES2015 sources */
echo(`Start AoT compilation`);
exec(`ngc -p tsconfig-build.json`);
echo(chalk.green(`AoT compilation completed`));

/* Creates bundles: ESM/ES5 and UMD bundles */
echo(`Start bundling`);
echo(`Rollup package`);
exec(`rollup -i ${NPM_DIR}/index.js -o ${MODULES_DIR}/${PACKAGE}.js --sourcemap`, {silent: true});
exec(`node scripts/map-sources -f ${MODULES_DIR}/${PACKAGE}.js`);

echo(`Downleveling ES2015 to ESM/ES5`);
cp(`${MODULES_DIR}/${PACKAGE}.js`, `${MODULES_DIR}/${PACKAGE}.es5.ts`);
exec(`tsc ${MODULES_DIR}/${PACKAGE}.es5.ts --target es5 --module es2015 --noLib --sourceMap`, {silent: true});
exec(`node scripts/map-sources -f ${MODULES_DIR}/${PACKAGE}.es5.js`);
rm(`-f`, `${MODULES_DIR}/${PACKAGE}.es5.ts`);

echo(`Run Rollup conversion on package`);
exec(`rollup -c rollup.config.js --sourcemap`, {silent: true});
exec(`node scripts/map-sources -f ${BUNDLES_DIR}/${PACKAGE}.umd.js`);

echo(`Minifying`);
cd(`${BUNDLES_DIR}`);
exec(`uglifyjs -c --screw-ie8 --comments -o ${PACKAGE}.umd.min.js --source-map ${PACKAGE}.umd.min.js.map --source-map-include-sources ${PACKAGE}.umd.js`, {silent: true});
exec(`node ../../scripts/map-sources -f ${PACKAGE}.umd.min.js`);
cd(`..`);
cd(`..`);

echo(chalk.green(`Bundling completed`));

rm(`-Rf`, `${NPM_DIR}/*.js`);
rm(`-Rf`, `${NPM_DIR}/*.js.map`);
rm(`-Rf`, `${NPM_DIR}/src/**/*.js`);
rm(`-Rf`, `${NPM_DIR}/src/**/*.js.map`);

cp(`-Rf`, [`package.json`, `LICENSE`, `README.md`], `${NPM_DIR}`);

echo(chalk.green(`End building`));
Loading

0 comments on commit 08df724

Please sign in to comment.