adding webpack and typescript rigs

common/config/rush/browser-approved-packages.json

@@ -74,6 +74,10 @@
       "name": "@types/node",
       "allowedCategories": [ "production" ]
     },
+    {
+      "name": "@types/resolve",
+      "allowedCategories": [ "production" ]
+    },
     {
       "name": "@types/rimraf",
       "allowedCategories": [ "production" ]
@@ -86,6 +90,10 @@
       "name": "@types/undertaker-registry",
       "allowedCategories": [ "production" ]
     },
+    {
+      "name": "@types/webpack",
+      "allowedCategories": [ "production" ]
+    },
     {
       "name": "@types/yargs",
       "allowedCategories": [ "production" ]
@@ -98,6 +106,10 @@
       "name": "@uifabric/fabric-website-resources",
       "allowedCategories": [ "docs" ]
     },
+    {
+      "name": "autoprefixer",
+      "allowedCategories": [ "production" ]
+    },
     {
       "name": "build",
       "allowedCategories": [ "production" ]
@@ -110,6 +122,10 @@
       "name": "build-rig-typescript",
       "allowedCategories": [ "docs" ]
     },
+    {
+      "name": "build-rig-webpack",
+      "allowedCategories": [ "docs" ]
+    },
     {
       "name": "bunyan",
       "allowedCategories": [ "production" ]
@@ -118,6 +134,10 @@
       "name": "bunyan-prettystream",
       "allowedCategories": [ "production" ]
     },
+    {
+      "name": "case-sensitive-paths-webpack-plugin",
+      "allowedCategories": [ "production" ]
+    },
     {
       "name": "chalk",
       "allowedCategories": [ "production" ]
@@ -126,6 +146,10 @@
       "name": "cpx",
       "allowedCategories": [ "production" ]
     },
+    {
+      "name": "css-loader",
+      "allowedCategories": [ "production" ]
+    },
     {
       "name": "dev",
       "allowedCategories": [ "production" ]
@@ -158,6 +182,10 @@
       "name": "office-ui-fabric-react",
       "allowedCategories": [ "docs" ]
     },
+    {
+      "name": "postcss-loader",
+      "allowedCategories": [ "production" ]
+    },
     {
       "name": "react",
       "allowedCategories": [ "docs" ]
@@ -174,6 +202,14 @@
       "name": "rimraf",
       "allowedCategories": [ "production" ]
     },
+    {
+      "name": "sass-loader",
+      "allowedCategories": [ "production" ]
+    },
+    {
+      "name": "style-loader",
+      "allowedCategories": [ "production" ]
+    },
     {
       "name": "typescript",
       "allowedCategories": [ "production" ]
@@ -186,6 +222,10 @@
       "name": "undertaker-registry",
       "allowedCategories": [ "production" ]
     },
+    {
+      "name": "webpack",
+      "allowedCategories": [ "production" ]
+    },
     {
       "name": "yargs",
       "allowedCategories": [ "production" ]

package.json

@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "postinstall": "node ./common/scripts/install-run-rush.js install"
+    "postinstall": "node ./common/scripts/install-run-rush.js install",
+    "start": "node ./scripts/watch.js"
   },
   "keywords": [],
   "author": "",

packages/build-rig-typescript/config/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "jsx": "react",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "lib",
+    "esModuleInterop": true
+  }
+}

packages/build-rig-typescript/package.json

@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@types/node": "^8.9.4",
+    "@types/resolve": "^0.0.8",
     "typescript": "^3.1.6",
     "jest": "^23.6.0"
   },

packages/build-rig-typescript/src/index.ts

@@ -1,6 +1,44 @@
 import { task, series, parallel, logger } from 'build-rig';
 import { spawn } from 'child_process';
+import path from 'path';
+import os from 'os';
+import resolve from 'resolve';
 
-task('typescript', function() {
-  spawn('tsc');
+task('typescript', function(done) {
+  const typescriptPath = resolve.sync('typescript', { basedir: __dirname, preserveSymlinks: true });
+  const tscCmd = path.resolve(path.dirname(typescriptPath), 'tsc.js');
+
+  this.logger.info(`Running ${tscCmd}`);
+
+  const cp = spawn(process.execPath, [tscCmd], { stdio: 'inherit' });
+
+  cp.on('exit', code => {
+    if (code !== 0) {
+      return done('Error in typescript');
+    }
+
+    done();
+  });
+});
+
+task('typescript:watch', function(done) {
+  const typescriptPath = resolve.sync('typescript', { basedir: __dirname, preserveSymlinks: true });
+  const tscCmd = path.resolve(path.dirname(typescriptPath), 'tsc.js');
+
+  this.logger.info(`Running ${tscCmd} in watch mode`);
+
+  const cp = spawn(process.execPath, [tscCmd, '-w', '--preserveWatchOutput'], { stdio: 'pipe' });
+
+  cp.stdout.on('data', data => {
+    this.logger.info(data.toString().trim());
+  });
+
+  cp.on('exit', code => {
+    if (code !== 0) {
+      return done('Error in typescript');
+    }
+
+    done();
+  });
+  return;
 });

packages/build-rig-typescript/tsconfig.json

@@ -3,57 +3,11 @@
     /* Basic Options */
     "target": "es2015" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
     "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
-    // "lib": [],                             /* Specify library files to be included in the compilation. */
-    // "allowJs": true /* Allow javascript files to be compiled. */,
-    // "checkJs": true,                       /* Report errors in .js files. */
-    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
     "declaration": true /* Generates corresponding '.d.ts' file. */,
     "declarationMap": true /* Generates a sourcemap for each corresponding '.d.ts' file. */,
-    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
-    // "outFile": "./",                       /* Concatenate and emit output to single file. */
     "outDir": "lib" /* Redirect output structure to the directory. */,
-    // "composite": true,                     /* Enable project compilation */
-    // "removeComments": true,                /* Do not emit comments to output. */
-    // "noEmit": true,                        /* Do not emit outputs. */
-    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
-    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
-
-    /* Strict Type-Checking Options */
     "strict": true /* Enable all strict type-checking options. */,
-    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
-    // "strictNullChecks": true,              /* Enable strict null checks. */
-    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
-    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
-    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
-    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
-
-    /* Additional Checks */
-    // "noUnusedLocals": true,                /* Report errors on unused locals. */
-    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
-    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
-    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-
-    /* Module Resolution Options */
-    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
-    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
-    // "typeRoots": [],                       /* List of folders to include type definitions from. */
-    // "types": [],                           /* Type declaration files to be included in compilation. */
-    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
     "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
-
-    /* Source Map Options */
-    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
-    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
-    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
-    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-
-    /* Experimental Options */
-    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
-    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
   },
   "include": ["src"]
 }

packages/build-rig-webpack/config/webpack.dll.config.js

@@ -0,0 +1,21 @@
+const webpack = require('webpack');
+const path = require('path');
+const resolve = require('resolve');
+
+const contextPath = path.dirname(resolve.sync('./package.json', { basedir: process.cwd() }));
+
+module.exports = {
+  output: {
+    filename: 'bundle.js',
+    library: '[name]_[hash]',
+    path: path.resolve(contextPath, 'dist')
+  },
+  plugins: [
+    new webpack.DllPlugin({
+      name: '[name]_[hash]',
+      path: path.join(contextPath, 'dist/manifest.json'),
+      entryOnly: true
+    })
+  ],
+  mode: 'development'
+};

packages/build-rig-webpack/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "build-rig-webpack",
+  "version": "0.0.1",
+  "description": "",
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc -w --preserveWatchOutput"
+  },
+  "dependencies": {
+    "build-rig": "*",
+    "resolve": "^1.8.1",
+    "webpack": "^4.26.1",
+    "css-loader": "^1.0.1",
+    "style-loader": "^0.23.1",
+    "postcss-loader": "^3.0.0",
+    "autoprefixer": "^9.3.1",
+    "sass-loader": "^7.1.0",
+    "case-sensitive-paths-webpack-plugin": "^2.1.2"
+  },
+  "devDependencies": {
+    "@types/node": "^8.9.4",
+    "@types/resolve": "^0.0.8",
+    "@types/webpack": "^4.4.20",
+    "typescript": "^3.1.6",
+    "webpack": "^4.26.1",
+    "jest": "^23.6.0"
+  },
+  "keywords": [],
+  "author": "Ken Chau <kchau@microsoft.com>",
+  "license": "MIT"
+}

packages/build-rig-webpack/src/index.ts

@@ -0,0 +1,22 @@
+import { task, series, parallel, logger } from 'build-rig';
+import path from 'path';
+import resolve from 'resolve';
+import webpack from 'webpack';
+
+task('webpack', function(done) {
+  const webpackConfig = require('../config/webpack.dll.config.js');
+
+  if (!webpackConfig.entry) {
+    webpackConfig.entry = ['./lib/index.js'];
+  }
+
+  webpack(webpackConfig, (err, stats) => {
+    if (err) {
+      this.logger.error(err.message);
+      return done(err);
+    }
+
+    this.logger.info(stats.toString());
+    done();
+  });
+});

packages/build-rig-webpack/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "es2015" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
+    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
+    "declaration": true /* Generates corresponding '.d.ts' file. */,
+    "declarationMap": true /* Generates a sourcemap for each corresponding '.d.ts' file. */,
+    "outDir": "lib" /* Redirect output structure to the directory. */,
+    "strict": true /* Enable all strict type-checking options. */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+  },
+  "include": ["src"]
+}

packages/build-rig/src/task.ts

@@ -2,13 +2,16 @@ import Undertaker from 'undertaker';
 import { undertaker } from './undertaker';
 import { Arguments } from 'yargs';
 import { taskLogger, ILogger } from './logger';
+import { Duplex } from 'stream';
 
 interface TaskContext {
-  argv?: Arguments;
-  logger?: ILogger;
+  argv: Arguments;
+  logger: ILogger;
 }
 
-interface TaskFunction extends Undertaker.TaskFunction, TaskContext {}
+interface TaskFunction extends Undertaker.TaskFunctionParams {
+  (this: TaskContext, done: (error?: any) => void): void | Duplex | NodeJS.Process | Promise<never> | any;
+}
 
 /**
  * This form of task definition takes a name and also a function
@@ -31,14 +34,18 @@ function task(firstParam: string | TaskFunction, fn?: TaskFunction) {
 }
 
 function _wrapFunction(taskName: string, fn: TaskFunction) {
-  const wrapped: Undertaker.TaskFunction = function(done: any) {
+  const wrapped: Undertaker.TaskFunction = function(this: TaskContext, done: any) {
     const context: TaskContext = {
       argv: (undertaker.registry() as any).argv,
       logger: taskLogger(taskName)
     };
 
     if (fn.length >= 1) {
-      (fn as any).call(context, done);
+      try {
+        (fn as any).call(context, done);
+      } catch (e) {
+        done(e);
+      }
     } else {
       // This is a synchronous OR non-callback based function, call "done" here for the user
       let results;

packages/build-rig/src/undertaker.ts

@@ -5,19 +5,22 @@ import chalk from 'chalk';
 const undertaker = new Undertaker();
 const NS_PER_SEC = 1e9;
 
-undertaker.on('start', (args: any) => {
+undertaker.on('start', function(args: any) {
   taskLogger(args.name).info(chalk.green('Started'));
 });
 
-undertaker.on('stop', (args: any) => {
+undertaker.on('stop', function(args: any) {
   const duration = args.duration;
   const durationInSecs = Math.round(((duration[0] * NS_PER_SEC + duration[1]) / NS_PER_SEC) * 100) / 100;
 
   taskLogger(args.name).info(chalk.green(`Finished in ${durationInSecs}s`));
 });
 
-undertaker.on('error', (args: any) => {
+undertaker.on('error', function(args: any) {
   taskLogger(args.name).error(chalk.red('Error detected while running this task'));
+  taskLogger(args.name).error(chalk.yellow('------------------------------------'));
+  taskLogger(args.name).error(chalk.yellow(args.error));
+  taskLogger(args.name).error(chalk.yellow('------------------------------------'));
 });
 
 export const parallel: typeof undertaker.parallel = undertaker.parallel.bind(undertaker);

packages/documentation/website/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "scripts": {
     "examples": "docusaurus-examples",
-    "dev": "docusaurus-start",
+    "start": "docusaurus-start",
     "build": "docusaurus-build",
     "publish-gh-pages": "docusaurus-publish",
     "write-translations": "docusaurus-write-translations",

packages/example-lib/package.json

@@ -11,6 +11,7 @@
   "license": "ISC",
   "devDependencies": {
     "build-rig": "*",
-    "build-rig-typescript": "*"
+    "build-rig-typescript": "*",
+    "build-rig-webpack": "*"
   }
 }

packages/example-lib/rig.js

@@ -1,5 +1,7 @@
 const { task, series, parallel } = require('build-rig');
 
-import 'build-rig-typescript';
+require('build-rig-typescript');
+require('build-rig-webpack');
 
-task('build', series('typescript'));
+task('build', series('typescript', 'webpack'));
+task('watch', parallel('typescript:watch'));

packages/example-lib/src/index.ts

@@ -0,0 +1 @@
+const a = 5;

rush.json

@@ -79,6 +79,11 @@
       "projectFolder": "packages/build-rig-typescript",
       "reviewCategory": "production"
     },
+    {
+      "packageName": "build-rig-webpack",
+      "projectFolder": "packages/build-rig-webpack",
+      "reviewCategory": "production"
+    },
     {
       "packageName": "build-rig-docs",
       "projectFolder": "packages/documentation/website",

scripts/watch.js

@@ -0,0 +1,9 @@
+const { spawn } = require('child_process');
+
+['', 'typescript', 'webpack'].forEach(pkg => {
+  const name = ['build', 'rig', ...(pkg ? [pkg] : [])];
+
+  const cp = spawn('tsc', ['-p', `packages/${name.join('-')}`, '-w', '--preserveWatchOutput'], { stdio: 'pipe' });
+  cp.stdout.pipe(process.stdout);
+  cp.stderr.pipe(process.stderr);
+});