Skip to content

Commit c72db29

Browse files
committed
first commit with basic library
0 parents  commit c72db29

14 files changed

+808
-0
lines changed

.gitignore

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Node
2+
node_modules/*
3+
npm-debug.log
4+
5+
# TypeScript
6+
src/*.js
7+
src/*.map
8+
src/*.d.ts
9+
10+
# JetBrains
11+
.idea
12+
.project
13+
.settings
14+
.idea/*
15+
*.iml
16+
17+
# VS Code
18+
.vscode/*
19+
20+
# Windows
21+
Thumbs.db
22+
Desktop.ini
23+
24+
# Mac
25+
.DS_Store
26+
**/.DS_Store
27+
28+
# Ngc generated files
29+
**/*.ngfactory.ts
30+
31+
# Build files
32+
dist/*

.npmignore

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Node
2+
node_modules/*
3+
npm-debug.log
4+
docs/*
5+
# DO NOT IGNORE TYPESCRIPT FILES FOR NPM
6+
# TypeScript
7+
# *.js
8+
# *.map
9+
# *.d.ts
10+
11+
# JetBrains
12+
.idea
13+
.project
14+
.settings
15+
.idea/*
16+
*.iml
17+
18+
# VS Code
19+
.vscode/*
20+
21+
# Windows
22+
Thumbs.db
23+
Desktop.ini
24+
25+
# Mac
26+
.DS_Store
27+
**/.DS_Store
28+
29+
# Ngc generated files
30+
**/*.ngfactory.ts
31+
32+
# Library files
33+
src/*
34+
build/*

.travis.yml

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
language: node_js
2+
sudo: false
3+
node_js:
4+
- '4.2.1'

.yo-rc.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"generator-angular2-library": {
3+
"promptValues": {
4+
"gitRepositoryUrl": "https://github.com/jonasmedeiros/ng-sticky"
5+
}
6+
}
7+
}

README.MD

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
# ng-sticky
2+
3+
## Installation
4+
5+
To install this library, run:
6+
7+
```bash
8+
$ npm install ng-sticky --save
9+
```
10+
11+
## Consuming your library
12+
13+
Once you have published your library to npm, you can import your library in any Angular application by running:
14+
15+
```bash
16+
$ npm install ng-sticky
17+
```
18+
19+
and then from your Angular `AppModule`:
20+
21+
```typescript
22+
import { BrowserModule } from '@angular/platform-browser';
23+
import { NgModule } from '@angular/core';
24+
25+
import { AppComponent } from './app.component';
26+
27+
// Import your library
28+
import { SampleModule } from 'ng-sticky';
29+
30+
@NgModule({
31+
declarations: [
32+
AppComponent
33+
],
34+
imports: [
35+
BrowserModule,
36+
37+
// Specify your library as an import
38+
LibraryModule
39+
],
40+
providers: [],
41+
bootstrap: [AppComponent]
42+
})
43+
export class AppModule { }
44+
```
45+
46+
Once your library is imported, you can use its components, directives and pipes in your Angular application:
47+
48+
```xml
49+
<!-- You can now use your library component in app.component.html -->
50+
<h1>
51+
{{title}}
52+
</h1>
53+
<sampleComponent></sampleComponent>
54+
```
55+
56+
## Development
57+
58+
To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:
59+
60+
```bash
61+
$ npm run build
62+
```
63+
64+
To lint all `*.ts` files:
65+
66+
```bash
67+
$ npm run lint
68+
```
69+
70+
## License
71+
72+
MIT © [Jonas Medeiros](mailto:[email protected])

gulpfile.js

+227
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
/* eslint-disable */
2+
var gulp = require('gulp'),
3+
path = require('path'),
4+
ngc = require('@angular/compiler-cli/src/main').main,
5+
rollup = require('gulp-rollup'),
6+
rename = require('gulp-rename'),
7+
del = require('del'),
8+
runSequence = require('run-sequence'),
9+
inlineResources = require('./tools/gulp/inline-resources');
10+
11+
const rootFolder = path.join(__dirname);
12+
const srcFolder = path.join(rootFolder, 'src');
13+
const tmpFolder = path.join(rootFolder, '.tmp');
14+
const buildFolder = path.join(rootFolder, 'build');
15+
const distFolder = path.join(rootFolder, 'dist');
16+
17+
/**
18+
* 1. Delete /dist folder
19+
*/
20+
gulp.task('clean:dist', function () {
21+
22+
// Delete contents but not dist folder to avoid broken npm links
23+
// when dist directory is removed while npm link references it.
24+
return deleteFolders([distFolder + '/**', '!' + distFolder]);
25+
});
26+
27+
/**
28+
* 2. Clone the /src folder into /.tmp. If an npm link inside /src has been made,
29+
* then it's likely that a node_modules folder exists. Ignore this folder
30+
* when copying to /.tmp.
31+
*/
32+
gulp.task('copy:source', function () {
33+
return gulp.src([`${srcFolder}/**/*`, `!${srcFolder}/node_modules`])
34+
.pipe(gulp.dest(tmpFolder));
35+
});
36+
37+
/**
38+
* 3. Inline template (.html) and style (.css) files into the the component .ts files.
39+
* We do this on the /.tmp folder to avoid editing the original /src files
40+
*/
41+
gulp.task('inline-resources', function () {
42+
return Promise.resolve()
43+
.then(() => inlineResources(tmpFolder));
44+
});
45+
46+
47+
/**
48+
* 4. Run the Angular compiler, ngc, on the /.tmp folder. This will output all
49+
* compiled modules to the /build folder.
50+
*/
51+
gulp.task('ngc', function () {
52+
return ngc({
53+
project: `${tmpFolder}/tsconfig.es5.json`
54+
})
55+
.then((exitCode) => {
56+
if (exitCode === 1) {
57+
// This error is caught in the 'compile' task by the runSequence method callback
58+
// so that when ngc fails to compile, the whole compile process stops running
59+
throw new Error('ngc compilation failed');
60+
}
61+
});
62+
});
63+
64+
/**
65+
* 5. Run rollup inside the /build folder to generate our Flat ES module and place the
66+
* generated file into the /dist folder
67+
*/
68+
gulp.task('rollup:fesm', function () {
69+
return gulp.src(`${buildFolder}/**/*.js`)
70+
// transform the files here.
71+
.pipe(rollup({
72+
73+
// Bundle's entry point
74+
// See https://github.com/rollup/rollup/wiki/JavaScript-API#entry
75+
entry: `${buildFolder}/index.js`,
76+
77+
// Allow mixing of hypothetical and actual files. "Actual" files can be files
78+
// accessed by Rollup or produced by plugins further down the chain.
79+
// This prevents errors like: 'path/file' does not exist in the hypothetical file system
80+
// when subdirectories are used in the `src` directory.
81+
allowRealFiles: true,
82+
83+
// A list of IDs of modules that should remain external to the bundle
84+
// See https://github.com/rollup/rollup/wiki/JavaScript-API#external
85+
external: [
86+
'@angular/core',
87+
'@angular/common'
88+
],
89+
90+
// Format of generated bundle
91+
// See https://github.com/rollup/rollup/wiki/JavaScript-API#format
92+
format: 'es'
93+
}))
94+
.pipe(gulp.dest(distFolder));
95+
});
96+
97+
/**
98+
* 6. Run rollup inside the /build folder to generate our UMD module and place the
99+
* generated file into the /dist folder
100+
*/
101+
gulp.task('rollup:umd', function () {
102+
return gulp.src(`${buildFolder}/**/*.js`)
103+
// transform the files here.
104+
.pipe(rollup({
105+
106+
// Bundle's entry point
107+
// See https://github.com/rollup/rollup/wiki/JavaScript-API#entry
108+
entry: `${buildFolder}/index.js`,
109+
110+
// Allow mixing of hypothetical and actual files. "Actual" files can be files
111+
// accessed by Rollup or produced by plugins further down the chain.
112+
// This prevents errors like: 'path/file' does not exist in the hypothetical file system
113+
// when subdirectories are used in the `src` directory.
114+
allowRealFiles: true,
115+
116+
// A list of IDs of modules that should remain external to the bundle
117+
// See https://github.com/rollup/rollup/wiki/JavaScript-API#external
118+
external: [
119+
'@angular/core',
120+
'@angular/common'
121+
],
122+
123+
// Format of generated bundle
124+
// See https://github.com/rollup/rollup/wiki/JavaScript-API#format
125+
format: 'umd',
126+
127+
// Export mode to use
128+
// See https://github.com/rollup/rollup/wiki/JavaScript-API#exports
129+
exports: 'named',
130+
131+
// The name to use for the module for UMD/IIFE bundles
132+
// (required for bundles with exports)
133+
// See https://github.com/rollup/rollup/wiki/JavaScript-API#modulename
134+
moduleName: 'ng-sticky',
135+
136+
// See https://github.com/rollup/rollup/wiki/JavaScript-API#globals
137+
globals: {
138+
typescript: 'ts'
139+
}
140+
141+
}))
142+
.pipe(rename('ng-sticky.umd.js'))
143+
.pipe(gulp.dest(distFolder));
144+
});
145+
146+
/**
147+
* 7. Copy all the files from /build to /dist, except .js files. We ignore all .js from /build
148+
* because with don't need individual modules anymore, just the Flat ES module generated
149+
* on step 5.
150+
*/
151+
gulp.task('copy:build', function () {
152+
return gulp.src([`${buildFolder}/**/*`, `!${buildFolder}/**/*.js`])
153+
.pipe(gulp.dest(distFolder));
154+
});
155+
156+
/**
157+
* 8. Copy package.json from /src to /dist
158+
*/
159+
gulp.task('copy:manifest', function () {
160+
return gulp.src([`${srcFolder}/package.json`])
161+
.pipe(gulp.dest(distFolder));
162+
});
163+
164+
/**
165+
* 9. Copy README.md from / to /dist
166+
*/
167+
gulp.task('copy:readme', function () {
168+
return gulp.src([path.join(rootFolder, 'README.MD')])
169+
.pipe(gulp.dest(distFolder));
170+
});
171+
172+
/**
173+
* 10. Delete /.tmp folder
174+
*/
175+
gulp.task('clean:tmp', function () {
176+
return deleteFolders([tmpFolder]);
177+
});
178+
179+
/**
180+
* 11. Delete /build folder
181+
*/
182+
gulp.task('clean:build', function () {
183+
return deleteFolders([buildFolder]);
184+
});
185+
186+
gulp.task('compile', function () {
187+
runSequence(
188+
'clean:dist',
189+
'copy:source',
190+
'inline-resources',
191+
'ngc',
192+
'rollup:fesm',
193+
'rollup:umd',
194+
'copy:build',
195+
'copy:manifest',
196+
'copy:readme',
197+
'clean:build',
198+
'clean:tmp',
199+
function (err) {
200+
if (err) {
201+
console.log('ERROR:', err.message);
202+
deleteFolders([distFolder, tmpFolder, buildFolder]);
203+
} else {
204+
console.log('Compilation finished succesfully');
205+
}
206+
});
207+
});
208+
209+
/**
210+
* Watch for any change in the /src folder and compile files
211+
*/
212+
gulp.task('watch', function () {
213+
gulp.watch(`${srcFolder}/**/*`, ['compile']);
214+
});
215+
216+
gulp.task('clean', ['clean:dist', 'clean:tmp', 'clean:build']);
217+
218+
gulp.task('build', ['clean', 'compile']);
219+
gulp.task('build:watch', ['build', 'watch']);
220+
gulp.task('default', ['build:watch']);
221+
222+
/**
223+
* Deletes the specified folder
224+
*/
225+
function deleteFolders(folders) {
226+
return del(folders);
227+
}

0 commit comments

Comments
 (0)