Skip to content
This repository has been archived by the owner on Jun 18, 2024. It is now read-only.

Commit

Permalink
Convert Fabric Components to TypeScript (#489)
Browse files Browse the repository at this point in the history
* Add TypeScript to the gulp build tools.
* Add tslint to build process for Component Samples.
* Convert all component JavScript files over to TypeScript.
  - Components are no longer implemented as jQuery plugins, as all components are now classes within the fabric namespace.
  - jQuery removal from all of the components using it is still ongoing work.
  • Loading branch information
dammittom committed Apr 14, 2016
1 parent b8a529c commit 8d56acf
Show file tree
Hide file tree
Showing 52 changed files with 6,477 additions and 2,507 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Fabric is a responsive, mobile-first collection of styles and tools designed to


##Get started
For a quick start, reference the latest release of Fabric from a CDN or add a copy to your project. See [Getting Started](http://dev.office.com/fabric/getting-started) on the [Office UI Fabric site](http://dev.office.com/fabric) for full details.
For a quick start, reference the latest release of Fabric from a CDN or add a copy to your project. See [Get Started](http://dev.office.com/fabric/get-started) on the [Office UI Fabric site](http://dev.office.com/fabric) for full details.

Want to customize Fabric for your project? See [Building Fabric](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/BUILDING.md) to learn about the build process.

Expand All @@ -37,4 +37,4 @@ All files on the Office UI Fabric GitHub repository are subject to the MIT licen


##Changelog
We use [GitHub Releases](https://github.com/blog/1547-release-your-software) to manage our releases, including the changelog between every release. View a complete list of additions, fixes, and changes since 1.0 on the [Releases page](https://github.com/OfficeDev/Office-UI-Fabric/releases).
We use [GitHub Releases](https://github.com/blog/1547-release-your-software) to manage our releases, including the changelog between every release. View a complete list of additions, fixes, and changes since 1.0 on the [releases](https://github.com/OfficeDev/Office-UI-Fabric/releases) page.
97 changes: 97 additions & 0 deletions gulp/ComponentJS.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
var gulp = require('gulp');
var Banners = require('./modules/Banners');
var Config = require('./modules/Config');
var ErrorHandling = require('./modules/ErrorHandling');
var Plugins = require('./modules/Plugins');

//
// Clean/Delete Tasks
// ----------------------------------------------------------------------------

gulp.task('ComponentJS-nuke', function () {
return Plugins.del.sync([Config.paths.distJS, Config.paths.distLibPath]);
});


//
// Library tasks
// ----------------------------------------------------------------------------
gulp.task('ComponentJS-copyLib', function() {
return gulp.src(Config.paths.srcLibPath + '/**/*')
.pipe(Plugins.plumber(ErrorHandling.onErrorInPipe))
.pipe(Plugins.changed(Config.paths.distLibPath))
.pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
title: "Copying /lib folder to dist folder"
})))
.pipe(gulp.dest(Config.paths.distLibPath));
});

//
// Typescript tasks
// ----------------------------------------------------------------------------

gulp.task('ComponentJS-typescript', function() {
var tscResult = gulp.src(Config.paths.componentsPath + '/**/*.ts')

// only process TS files that have changed since last compiled to /dist/Components
.pipe(Plugins.changed(Config.paths.distComponents, {extension: '.js'}))
.pipe(Plugins.plumber(ErrorHandling.onErrorInPipe))

// tslint options set by tslint.json
.pipe(Plugins.tslint())
.pipe(Plugins.tslint.report("verbose"))

// Typescript project is set to give us both definitions and javascript
.pipe(Plugins.tsc(Config.typescriptProject));

return Plugins.mergeStream( [

// place .d.ts output in both the Samples folder and the Components folder
tscResult.dts.pipe(gulp.dest(Config.paths.distSamples + '/Components'))
.pipe(gulp.dest(Config.paths.distComponents))
.pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
title: "Output Fabric Component .d.ts built from TypeScript"
}))),

// place .js output in both the Samples folder and the Components folder
tscResult.js.pipe(gulp.dest(Config.paths.distSamples + '/Components'))
.pipe(gulp.dest(Config.paths.distComponents))
.pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
title: "Output Fabric Component .js built from TypeScript"
})))
]);
});

//
// Concat and minify the output files into a single fabric.js file
gulp.task('ComponentJS-concatJS', ['ComponentJS-typescript'], function() {

return gulp.src(Config.paths.distComponents + '/**/*.js')
.pipe(Plugins.plumber(ErrorHandling.onErrorInPipe))
.pipe(Plugins.concat('fabric.js'))
.pipe(Plugins.header(Banners.getJSCopyRight()))
.pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
title: "Concat Fabric Component JS"
})))
.pipe(gulp.dest(Config.paths.distJS))
.pipe(Plugins.rename('fabric.min.js'))
.pipe(Plugins.uglify())
.pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
title: "Minify Fabric Component JS"
})))
.pipe(gulp.dest(Config.paths.distJS));
});


//
// Rolled up Build tasks
// ----------------------------------------------------------------------------

var ComponentJSTasks = [
'ComponentJS-copyLib',
'ComponentJS-typescript',
'ComponentJS-concatJS'
];

//Build Fabric Component Samples
gulp.task('ComponentJS', ComponentJSTasks);
31 changes: 3 additions & 28 deletions gulp/ComponentSamples.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
var gulp = require('gulp');
var fs = require('fs');
var Utilities = require('./modules/Utilities');
var Banners = require('./modules/Banners');
var Config = require('./modules/Config');
var BuildConfig = require('./modules/BuildConfig');
var ConsoleHelper = require('./modules/ConsoleHelper');
Expand Down Expand Up @@ -51,24 +52,6 @@ gulp.task('ComponentSamples-copyAssets', function() {
.pipe(gulp.dest(Config.paths.distSamples + '/Components'));
});

gulp.task('ComponentSamples-moveJS', function() {
var paths;
var newPaths;
paths = Utilities.setIgnoreFlagOnFiles(Config.ignoreComponentJSLinting);
newPaths = paths.concat([Config.paths.componentsPath + '/**/*.js']);

return gulp.src(newPaths)
.pipe(Plugins.plumber(ErrorHandling.onErrorInPipe))
.pipe(Plugins.jshint())
.pipe(ErrorHandling.JSHintErrors())
.pipe(Plugins.changed(Config.paths.distSamples + '/Components'))
.pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
title: "Copying Component Assets"
})))
.pipe(Plugins.fileinclude())
.pipe(gulp.dest(Config.paths.distSamples + '/Components'));
});


gulp.task('ComponentSamples-styleHinting', function() {
return gulp.src(Config.paths.componentsPath + '/**/*.scss')
Expand Down Expand Up @@ -131,12 +114,7 @@ gulp.task('ComponentSamples-build', function() {
var filesArray = manifest.fileOrder;
var componentPipe;
var fileGlob = Utilities.getManifestFileList(filesArray, Config.paths.componentsPath + '/' + folderName);
var jsFiles = Utilities.getFilesByExtension(srcFolderName, '.js');
var jsLinks = '';

for (var x = 0; x < jsFiles.length; x++) {
jsLinks += '<script type="text/javascript" src="' + jsFiles[x] + '"></script>' + "\r\n";
}

componentPipe = gulp.src(fileGlob)
.pipe(Plugins.plumber(ErrorHandling.oneErrorInPipe))
.pipe(Plugins.gulpif(manifest.wrapBranches, Plugins.wrap('<div class="sample-wrapper"><%= contents %></div>')))
Expand All @@ -148,9 +126,6 @@ gulp.task('ComponentSamples-build', function() {
},
{
componentName: folderName
},
{
jsLinks: jsLinks
}
))
.pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
Expand Down Expand Up @@ -178,7 +153,7 @@ var ComponentSamplesTasks = [
'ComponentSamples-build',
'ComponentSamples-copyAssets',
'ComponentSamples-buildStyles',
'ComponentSamples-moveJS',
'ComponentJS',
'ComponentSamples-copyIgnoredFiles'
// 'ComponentSamples-styleHinting' Commented out until warnings are resolved
];
Expand Down
36 changes: 2 additions & 34 deletions gulp/FabricComponents.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ gulp.task('FabricComponents-nuke', function () {

gulp.task('FabricComponents-copyAssets', function () {
// Copy all Components files.
return gulp.src([Config.paths.componentsPath + '/**', '!' + Config.paths.componentsPath + '/**/*.js'])
return gulp.src([Config.paths.componentsPath + '/**', '!' + Config.paths.componentsPath + '/**/*.js', '!' + Config.paths.componentsPath + '/**/*.ts'])
.pipe(Plugins.plumber(ErrorHandling.onErrorInPipe))
.pipe(Plugins.changed(Config.paths.distComponents))
.pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
Expand All @@ -34,18 +34,6 @@ gulp.task('FabricComponents-copyAssets', function () {
.pipe(gulp.dest(Config.paths.distComponents));
});

gulp.task('FabricComponents-moveJs', function () {
// Copy all Components files.
return gulp.src([Config.paths.componentsPath + '/**/*.js'])
.pipe(Plugins.plumber(ErrorHandling.onErrorInPipe))
.pipe(Plugins.changed(Config.paths.distComponents))
.pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
title: "Moving Fabric Component Assets to Dist"
})))
.pipe(Plugins.fileinclude())
.pipe(gulp.dest(Config.paths.distComponents));
});

//
// Sass tasks
// ----------------------------------------------------------------------------
Expand Down Expand Up @@ -116,26 +104,6 @@ gulp.task('FabricComponents-buildStyles', function () {
});
});

//
// JS Only tasks
// ----------------------------------------------------------------------------


gulp.task('FabricComponents-moveJs', function() {
return gulp.src(Config.paths.componentsPath + '/**/*.js')
.pipe(Plugins.plumber(ErrorHandling.onErrorInPipe))
.pipe(Plugins.concat('jquery.fabric.js'))
.pipe(Plugins.header(Banners.getJSCopyRight()))
.pipe(Plugins.changed(Config.paths.distJS))
.pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
title: "Moving Fabric Component JS"
})))
.pipe(gulp.dest(Config.paths.distJS))
.pipe(Plugins.rename('jquery.fabric.min.js'))
.pipe(Plugins.uglify())
.pipe(gulp.dest(Config.paths.distJS));
});

//
// Rolled up Build tasks
// ----------------------------------------------------------------------------
Expand All @@ -145,7 +113,7 @@ gulp.task('FabricComponents', [
'FabricComponents-buildAndCombineStyles',
'FabricComponents-buildStyles',
'FabricComponents-copyAssets',
'FabricComponents-moveJs'
'ComponentJS'
]
);

Expand Down
20 changes: 19 additions & 1 deletion gulp/modules/Config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
var path = require('path');
var pkg = require('../../package.json');
var Plugins = require('./Plugins');

/**
* Configuration class containing all properties to be used throughout the build
Expand All @@ -24,7 +25,9 @@ var Config = function() {
srcSamples: srcPath + '/samples',
srcSass: srcPath + '/sass',
componentsPath : 'src/components',
templatePath : srcPath + '/templates'
templatePath : srcPath + '/templates',
srcLibPath: 'lib',
distLibPath: distPath + '/lib'
};
this.port = process.env.PORT || 2020;
this.projectURL = "http://localhost";
Expand All @@ -33,8 +36,23 @@ var Config = function() {
{
'urlPath': '/css',
'folderPath': '../css'
},
{
'urlPath': '/js',
'folderPath': '../js'
},
{
'urlPath': '/lib',
'folderPath': '../lib'
}
];
this.typescriptConfig = {
module: 'commonjs',
declaration: true,
target: 'ES5',
noEmitOnError: true
};
this.typescriptProject = Plugins.tsc.createProject(this.typescriptConfig);
this.nugetConfig = {
id: "OfficeUIFabric",
title: "Office UI Fabric",
Expand Down
7 changes: 5 additions & 2 deletions gulp/modules/ErrorHandling.js
Original file line number Diff line number Diff line change
Expand Up @@ -140,9 +140,12 @@ var ErrorHandling = function() {
case 'gulp-sass':
this.emit('end');
break;
case 'gulp-tslint':
this.emit('end');
break;
default:
that.generateBuildError(error[0]);
that.addError(error[0]);
that.generateBuildError(error);
that.addError(error);
break;
}
return;
Expand Down
24 changes: 13 additions & 11 deletions gulp/modules/Plugins.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,19 @@ var Plugins = function() {
this.nugetpack = require('gulp-nuget-pack');
this.requireDir = require('require-dir');
this.debug = require('gulp-debug');
this.gulpif = require('gulp-if');
this.changed = require('gulp-changed');
this.sass = require('gulp-sass');
this.jshint = require('gulp-jshint');
this.plumber = require('gulp-plumber');
this.replace = require('gulp-replace');
this.walkSync = require('walk-sync');
this.size = require('gulp-size');
this.fs = require('fs');
this.sasslint = require('gulp-sass-lint');
this.fileinclude = require('gulp-file-include');
this.gulpif = require('gulp-if');
this.changed = require('gulp-changed');
this.sass = require('gulp-sass');
this.jshint = require('gulp-jshint');
this.plumber = require('gulp-plumber');
this.replace = require('gulp-replace');
this.walkSync = require('walk-sync');
this.size = require('gulp-size');
this.fs = require('fs');
this.sasslint = require('gulp-sass-lint');
this.fileinclude = require('gulp-file-include');
this.tsc = require('gulp-typescript');
this.tslint = require("gulp-tslint");
};

module.exports = new Plugins();
10 changes: 6 additions & 4 deletions gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ var ErrorHandling = require('./gulp/modules/ErrorHandling');

var watchTasks = [
'Fabric',
'ComponentJS',
'FabricComponents',
'ComponentSamples',
'Samples',
Expand All @@ -17,6 +18,7 @@ var watchTasks = [

var buildTasks = [
'Fabric',
'ComponentJS',
'FabricComponents',
'ComponentSamples',
'Samples',
Expand Down Expand Up @@ -50,22 +52,22 @@ gulp.task('FabricServer', function() {
//
// Nuke Tasks
// ---------------------------------------------------------------------------
gulp.task('nuke', ['Fabric-nuke', 'FabricComponents-nuke', 'ComponentSamples-nuke', 'Samples-nuke']);
gulp.task('nuke', ['Fabric-nuke', 'ComponentJS-nuke', 'FabricComponents-nuke', 'ComponentSamples-nuke', 'Samples-nuke']);

//
// Watch Tasks
// ----------------------------------------------------------------------------

// Watch Sass
gulp.task('watch-build', ['ComponentSamples', 'Samples', 'FabricDemoPage', 'FabricServer', 'All-server'], function () {
gulp.task('watch-build', ['ComponentJS', 'ComponentSamples', 'Samples', 'FabricDemoPage', 'FabricServer', 'All-server'], function () {
gulp.watch(Config.paths.srcPath + '/**/*', Plugins.batch(function (events, done) {
Plugins.runSequence(['Fabric', 'FabricComponents', 'ComponentSamples', 'Samples', 'FabricDemoPage', 'FabricServer', 'All-updated'], done);
Plugins.runSequence(['Fabric', 'ComponentJS', 'FabricComponents', 'ComponentSamples', 'Samples', 'FabricDemoPage', 'FabricServer', 'All-updated'], done);
}));
});

gulp.task('watch', ['watch-build']);

gulp.task('watch-debug-build', ['Fabric', 'FabricComponents', 'ComponentSamples', 'Samples', 'FabricDemoPage', 'FabricServer', 'All-server'], function () {
gulp.task('watch-debug-build', ['ComponentJS', 'Fabric', 'FabricComponents', 'ComponentSamples', 'Samples', 'FabricDemoPage', 'FabricServer', 'All-server'], function () {
gulp.watch(Config.paths.srcPath + '/**/*', Plugins.batch(function (events, done) {
Plugins.runSequence(['Fabric', 'FabricComponents', 'ComponentSamples', 'Samples', 'FabricDemoPage', 'FabricServer', 'All-updated'], done);
}));
Expand Down
File renamed without changes.
4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@
"gulp-size": "^1.0.0",
"gulp-tap": "^0.1.3",
"gulp-template": "^3.0.0",
"gulp-tslint": "^4.3.2",
"gulp-typescript": "^2.10.0",
"gulp-uglify": "^1.5.2",
"gulp-util": "^3.0.1",
"gulp-wrap": "^0.11.0",
Expand All @@ -63,6 +65,8 @@
"run-sequence": "^1.1.0",
"swig": "^1.4.2",
"through2": "^2.0.0",
"tslint": "^3.3.0",
"typescript": "^1.7.5",
"walk-sync": "^0.2.6"
}
}
Loading

0 comments on commit 8d56acf

Please sign in to comment.