Build component libraries

cli/build-public-library.js

@@ -0,0 +1,106 @@
+/*jshint node: true*/
+'use strict';
+
+const fs = require('fs-extra');
+const logger = require('winston');
+const rimraf = require('rimraf');
+const webpack = require('webpack');
+
+const stageTypeScriptFiles = require('./utils/stage-library-ts');
+const preparePackage = require('./utils/prepare-library-package');
+const webpackConfig = require('../config/webpack/build-public-library.webpack.config.js');
+const skyPagesConfigUtil = require('../config/sky-pages/sky-pages.config');
+
+function cleanTemp() {
+  rimraf.sync(skyPagesConfigUtil.spaPathTemp());
+}
+
+function cleanDist() {
+  rimraf.sync(skyPagesConfigUtil.spaPath('dist'));
+}
+
+function cleanAll() {
+  cleanTemp();
+  cleanDist();
+}
+
+function writeTSConfig() {
+  var config = {
+    'compilerOptions': {
+      'target': 'es5',
+      'module': 'es2015',
+      'moduleResolution': 'node',
+      'emitDecoratorMetadata': true,
+      'experimentalDecorators': true,
+      'allowSyntheticDefaultImports': true,
+      'sourceMap': true,
+      'noImplicitAny': true,
+      'declaration': true,
+      'skipLibCheck': true,
+      'lib': [
+        'dom',
+        'es6'
+      ],
+      'types': [
+        'jasmine',
+        'node'
+      ],
+      'outDir': skyPagesConfigUtil.spaPath('dist'),
+      'rootDir': skyPagesConfigUtil.spaPathTemp()
+    },
+    'files': [
+      skyPagesConfigUtil.spaPathTemp('index.ts')
+    ]
+  };
+
+  fs.writeJSONSync(skyPagesConfigUtil.spaPathTemp('tsconfig.json'), config);
+}
+
+function transpile(skyPagesConfig) {
+  const config = webpackConfig.getWebpackConfig(skyPagesConfig);
+  const compiler = webpack(config);
+
+  return new Promise((resolve, reject) => {
+    compiler.run((err, stats) => {
+      if (err) {
+        logger.error(err);
+        reject(err);
+        return;
+      }
+
+      const jsonStats = stats.toJson();
+
+      if (jsonStats.errors.length) {
+        logger.error(jsonStats.errors);
+      }
+
+      if (jsonStats.warnings.length) {
+        logger.warn(jsonStats.warnings);
+      }
+
+      logger.info(stats.toString({
+        chunks: false,
+        colors: false
+      }));
+
+      resolve(stats);
+    });
+  });
+}
+
+module.exports = (skyPagesConfig) => {
+  cleanAll();
+  stageTypeScriptFiles();
+  writeTSConfig();
+
+  return transpile(skyPagesConfig)
+    .then(() => {
+      preparePackage();
+      cleanTemp();
+      process.exit(0);
+    })
+    .catch(() => {
+      cleanAll();
+      process.exit(1);
+    });
+};

cli/utils/prepare-library-package.js

@@ -0,0 +1,35 @@
+/*jshint node: true*/
+'use strict';
+
+const fs = require('fs-extra');
+const skyPagesConfigUtil = require('../../config/sky-pages/sky-pages.config');
+
+function makePackageFileForDist() {
+  const packageJson = fs.readJSONSync(
+    skyPagesConfigUtil.spaPath('package.json')
+  );
+  packageJson.module = 'index.js';
+  packageJson.main = 'bundles/bundle.umd.js';
+  fs.writeJSONSync(
+    skyPagesConfigUtil.spaPath('dist', 'package.json'),
+    packageJson,
+    { spaces: 2 }
+  );
+}
+
+function copyFilesToDist() {
+  fs.copySync(
+    skyPagesConfigUtil.spaPath('README.md'),
+    skyPagesConfigUtil.spaPath('dist', 'README.md')
+  );
+
+  fs.copySync(
+    skyPagesConfigUtil.spaPath('CHANGELOG.md'),
+    skyPagesConfigUtil.spaPath('dist', 'CHANGELOG.md')
+  );
+}
+
+module.exports = () => {
+  makePackageFileForDist();
+  copyFilesToDist();
+};

cli/utils/stage-library-ts.js

@@ -0,0 +1,98 @@
+/*jshint node: true*/
+'use strict';
+
+const fs = require('fs-extra');
+const glob = require('glob');
+const path = require('path');
+const sass = require('node-sass');
+const skyPagesConfigUtil = require('../../config/sky-pages/sky-pages.config');
+const spaPathTempSrc = skyPagesConfigUtil.spaPathTempSrc();
+
+function copySource() {
+  fs.copySync(
+    skyPagesConfigUtil.spaPath('src', 'app', 'public'),
+    skyPagesConfigUtil.spaPathTemp()
+  );
+}
+
+function deleteNonDistFiles() {
+  let files = glob.sync(`${spaPathTempSrc}/**/*.spec.ts`);
+  files.forEach(file => fs.removeSync(file));
+}
+
+function inlineHtmlCss() {
+  const templateUrlRegEx = /templateUrl\:\s*'(.+?\.html)'/gi;
+  const styleUrlsRegEx = /styleUrls\:\s*\[\s*'(.+?\.scss)']/gi;
+
+  let files = glob.sync(`${spaPathTempSrc}/**/*.ts`);
+
+  files.forEach((file) => {
+    let fileContents = fs.readFileSync(file, { encoding: 'utf8' });
+    let dirname = path.dirname(file);
+    let matches;
+
+    // templateUrl
+    matches = templateUrlRegEx.exec(fileContents);
+    while (matches) {
+      let requireFile = path.join(dirname, matches[1]);
+      let requireContents = getFileContents(requireFile);
+      requireContents = `template: ${requireContents}`;
+      fileContents = fileContents.replace(matches[0], requireContents);
+      matches = templateUrlRegEx.exec(fileContents);
+
+      // Since we're changing the file contents in each iteration and since the regex is stateful
+      // we need to reset the regex; otherwise it might not be able to locate subsequent matches
+      // after the first replacement.
+      templateUrlRegEx.lastIndex = 0;
+    }
+
+    // styleUrls
+    matches = styleUrlsRegEx.exec(fileContents);
+    while (matches) {
+      let requireFile = path.join(dirname, matches[1]);
+      let requireContents = getFileContents(requireFile);
+      requireContents = `styles: [${requireContents}]`;
+      fileContents = fileContents.replace(matches[0], requireContents);
+      styleUrlsRegEx.lastIndex = 0;
+      matches = styleUrlsRegEx.exec(fileContents);
+    }
+
+    fs.writeFileSync(file, fileContents, { encoding: 'utf8' });
+  });
+}
+
+function getFileContents(filePath) {
+  let contents = '';
+  switch (path.extname(filePath)) {
+    case '.scss':
+      contents = compileSass(filePath);
+      break;
+    case '.html':
+      contents = getHtmlContents(filePath);
+      break;
+  }
+
+  contents = contents
+    .toString()
+    .replace(/\\f/g, '\\\\f')
+    .replace(/`/g, '\\`');
+
+  return '`' + contents + '`';
+}
+
+function getHtmlContents(filePath) {
+  return fs.readFileSync(filePath).toString();
+}
+
+function compileSass(filePath) {
+  return sass.renderSync({
+    file: filePath,
+    outputStyle: 'compressed'
+  }).css;
+}
+
+module.exports = () => {
+  copySource();
+  deleteNonDistFiles();
+  inlineHtmlCss();
+};

config/webpack/build-public-library.webpack.config.js

@@ -0,0 +1,68 @@
+/*jslint node: true */
+'use strict';
+
+const webpack = require('webpack');
+const ngcWebpack = require('ngc-webpack');
+const skyPagesConfigUtil = require('../sky-pages/sky-pages.config');
+const ProcessExitCode = require('../../plugin/process-exit-code');
+
+function getWebpackConfig(skyPagesConfig) {
+  const libraryName = skyPagesConfig.skyux.name || 'SkyAppLibrary';
+  return {
+    entry: skyPagesConfigUtil.spaPathTemp('index.ts'),
+    output: {
+      path: skyPagesConfigUtil.spaPath('dist', 'bundles'),
+      filename: 'bundle.umd.js',
+      libraryTarget: 'umd',
+      library: libraryName
+    },
+    externals: [
+      /^@angular\//,
+      /^@blackbaud\//,
+      /^rxjs\//
+    ],
+    resolve: {
+      extensions: ['.js', '.ts']
+    },
+    module: {
+      rules: [
+        {
+          test: /\.ts$/,
+          use: ['awesome-typescript-loader', 'angular2-template-loader'],
+          exclude: [/\.(spec|e2e)\.ts$/]
+        },
+        {
+          test: /\.html$/,
+          use: 'raw-loader'
+        },
+        {
+          test: /\.scss$/,
+          use: ['raw-loader', 'sass-loader']
+        },
+        {
+          test: /\.css$/,
+          use: ['raw-loader', 'style-loader']
+        }
+      ]
+    },
+    plugins: [
+      new ngcWebpack.NgcWebpackPlugin({
+        tsConfig: skyPagesConfigUtil.spaPathTemp('tsconfig.json')
+      }),
+
+      new webpack.optimize.UglifyJsPlugin({
+        beautify: false,
+        comments: false,
+        compress: { warnings: false },
+        mangle: { screw_ie8: true, keep_fnames: true }
+      }),
+
+      // Webpack 2 behavior does not correctly return non-zero exit code.
+      new ProcessExitCode()
+    ]
+  };
+}
+
+module.exports = {
+  getWebpackConfig: getWebpackConfig
+};

index.js

@@ -13,6 +13,9 @@ module.exports = {
       case 'build':
         require('./cli/build')(argv, skyPagesConfig, webpack);
         break;
+      case 'build-public-library':
+        require('./cli/build-public-library')(skyPagesConfig);
+        break;
       case 'e2e':
         require('./cli/e2e')(argv, skyPagesConfig, webpack);
         break;

package.json

@@ -69,6 +69,7 @@
     "karma-webpack": "2.0.3",
     "loader-utils": "1.1.0",
     "merge": "1.2.0",
+    "ngc-webpack": "3.0.0",
     "node-sass": "4.5.3",
     "open": "0.0.5",
     "portfinder": "1.0.13",