'use strict'; // Canonical path provides a consistent path (i.e. always forward slashes) across different OSes var path = require('canonical-path'); var Q = require('q'); var _ = require('lodash'); var jsdom = require("jsdom"); var fs = require("fs"); var globby = require('globby'); var mkdirp = require('mkdirp'); var indexHtmlTranslator = require('./indexHtmlTranslator'); var regionExtractor = require('../doc-shredder/regionExtractor'); class PlunkerBuilder { constructor(basePath, destPath, options) { this.basePath = basePath; this.destPath = destPath; this.options = options; this.copyrights = {}; this._buildCopyrightStrings(); } buildPlunkers() { this._getPlunkerFiles(); var errFn = this.options.errFn || function(e) { console.log(e); }; var plunkerPaths = path.join(this.basePath, '**/*plnkr.json'); var fileNames = globby.sync(plunkerPaths, { ignore: ['**/node_modules/**', '**/_boilerplate/**'] }); fileNames.forEach((configFileName) => { try { this._buildPlunkerFrom(configFileName); } catch (e) { errFn(e); } }); } _addPlunkerFiles(config, postData) { if (config.basePath.indexOf('/ts') > -1) { if (config.includeSystemConfig) { // uses systemjs.config.js so add plunker version this.options.addField(postData, 'systemjs.config.js', this.systemjsConfig); } } } _buildCopyrightStrings() { var copyright = 'Copyright 2016 Google Inc. All Rights Reserved.\n' + 'Use of this source code is governed by an MIT-style license that\n' + 'can be found in the LICENSE file at http://angular.io/license'; var pad = '\n\n'; this.copyrights.jsCss = `${pad}/*\n${copyright}\n*/`; this.copyrights.html = `${pad}`; } // Build plunker from JSON configuration file (e.g., plnkr.json): // all properties are optional // files: string[] - array of globs - defaults to all js, ts, html, json, css and md files (with certain files removed) // description: string - description of this plunker - defaults to the title in the index.html page. // tags: string[] - optional array of plunker tags (for searchability) // main: string - name of file that will become index.html in the plunker - defaults to index.html // open: string - name of file to display within the plunker as in "open": "app/app.module.ts" _buildPlunkerFrom(configFileName) { // replace ending 'plnkr.json' with 'plnkr.no-link.html' to create output file name; var outputFileName = `${this.options.plunkerFileName}.no-link.html`; outputFileName = configFileName.substr(0, configFileName.length - 'plnkr.json'.length) + outputFileName; var altFileName; if (this.destPath && this.destPath.length > 0) { var partPath = path.dirname(path.relative(this.basePath, outputFileName)); var altFileName = path.join(this.destPath, partPath, path.basename(outputFileName)).replace('.no-link.', '.'); } try { var config = this._initConfigAndCollectFileNames(configFileName); var postData = this._createPostData(config); this._addPlunkerFiles(config, postData); var html = this._createPlunkerHtml(config, postData); if (this.options.writeNoLink) { fs.writeFileSync(outputFileName, html, 'utf-8'); } if (altFileName) { var altDirName = path.dirname(altFileName); if (!fs.existsSync(altDirName)) { mkdirp.sync(altDirName); } fs.writeFileSync(altFileName, html, 'utf-8'); } } catch (e) { // if we fail delete the outputFile if it exists because it is an old one. if (this._existsSync(outputFileName)) { fs.unlinkSync(outputFileName); } if (altFileName && this._existsSync(altFileName)) { fs.unlinkSync(altFileName); } throw e; } } _createBasePlunkerHtml(config, embedded) { var open = ''; if (config.open) { open = embedded ? `&show=${config.open}` : `&open=${config.open}`; } var action = `${this.options.url}${open}`; var html = ''; html += `
`; // html += '
' // html += '
' html += ''; html += ''; return html; } _createPostData(config) { var postData = {}; config.fileNames.forEach((fileName) => { var content; var extn = path.extname(fileName); if (extn == '.png') { content = this._encodeBase64(fileName); fileName = fileName.substr(0, fileName.length - 4) + '.base64.png' } else if (-1 < fileName.indexOf('systemjs.config.extras')) { content = this._getSystemjsConfigExtras(config); } else { content = fs.readFileSync(fileName, 'utf-8'); } if (extn == '.js' || extn == '.ts' || extn == '.css') { content = content + this.copyrights.jsCss; } else if (extn == '.html') { content = content + this.copyrights.html; } // var escapedValue = escapeHtml(content); var relativeFileName = path.relative(config.basePath, fileName); if (relativeFileName == config.main) { relativeFileName = 'index.html'; } if (relativeFileName == 'index.html') { content = indexHtmlTranslator.translate(content); if (config.description == null) { // set config.description to title from index.html var matches = /(.*)<\/title>/.exec(content); if (matches) { config.description = matches[1]; } } } content = regionExtractor.removeDocTags(content, extn.substr(1)); this.options.addField(postData, relativeFileName, content); }); var tags = ['angular', 'example'].concat(config.tags || []); tags.forEach(function(tag,ix) { postData['tags[' + ix + ']'] = tag; }); if (!this.options.embedded) { postData.private = true; postData.description = "Angular Example - " + config.description; } else { postData.title = "Angular Example - " + config.description; } // Embedded needs to add more content, so if the callback is available, we call it if (this.options.extraData) { this.options.extraData(postData, config); } return postData; } _createPlunkerHtml(config, postData) { var baseHtml = this._createBasePlunkerHtml(config, this.options.embedded); var doc = jsdom.jsdom(baseHtml); var form = doc.querySelector('form'); _.forEach(postData, (value, key) => { var ele = this._htmlToElement(doc, '<input type="hidden" name="' + key + '">'); ele.setAttribute('value', value); form.appendChild(ele) }); var html = doc.documentElement.outerHTML; return html; } _encodeBase64(file) { // read binary data var bitmap = fs.readFileSync(file); // convert binary data to base64 encoded string return new Buffer(bitmap).toString('base64'); } _existsSync(filename) { try { fs.accessSync(filename); return true; } catch(ex) { return false; } } _getPlunkerFiles() { var systemJsConfigPath = '/_boilerplate/src/systemjs.config.web.js'; if (this.options.build) { systemJsConfigPath = '/_boilerplate/src/systemjs.config.web.build.js'; } this.systemjsConfig = fs.readFileSync(this.basePath + systemJsConfigPath, 'utf-8'); // Copyright already added to web versions of systemjs.config // this.systemjsConfig += this.copyrights.jsCss; } // Try to replace `systemjs.config.extras.js` with the // `systemjs.config.extras.web.js` web version that // should default SystemJS barrels to `.ts` files rather than `.js` files // Example: see docs `testing`. // HACK-O-MATIC! _getSystemjsConfigExtras(config) { var extras = config.basePath + '/systemjs.config.extras.js'; var webExtras = config.basePath + '/systemjs.config.extras.web.js'; if (fs.existsSync(webExtras)) { // console.log('** Substituted "' + webExtras + '" for "' + extras + '".'); return fs.readFileSync(webExtras, 'utf-8'); } else if (fs.existsSync(extras)){ console.log('** WARNING: no "' + webExtras + '" replacement for "' + extras + '".'); return fs.readFileSync(extras, 'utf-8'); } else { console.log('** WARNING: no "' + extras + '" file; returning empty content.'); return ''; } } _htmlToElement(document, html) { var div = document.createElement('div'); div.innerHTML = html; return div.firstChild; } _initConfigAndCollectFileNames(configFileName) { var configDir = path.dirname(configFileName); var configSrc = fs.readFileSync(configFileName, 'utf-8'); try { var config = (configSrc && configSrc.trim().length) ? JSON.parse(configSrc) : {}; config.basePath = config.basePath ? path.resolve(configDir, config.basePath) : configDir; } catch (e) { throw new Error(`Plunker config - unable to parse json file: ${configFileName}\n${e}`); } var defaultIncludes = ['**/*.ts', '**/*.js', '**/*.css', '**/*.html', '**/*.md', '**/*.json', '**/*.png']; if (config.files) { if (config.files.length > 0) { if (config.files[0].substr(0, 1) == '!') { config.files = defaultIncludes.concat(config.files); } } } else { config.files = defaultIncludes; } var includeSpec = false; var gpaths = config.files.map(function(fileName) { fileName = fileName.trim(); if (fileName.substr(0,1) == '!') { return "!" + path.join(config.basePath, fileName.substr(1)); } else { includeSpec = includeSpec || /.*\.spec.(ts|js)$/.test(fileName); return path.join(config.basePath, fileName); } }); var defaultExcludes = [ '!**/tsconfig.json', '!**/*plnkr.*', '!**/package.json', '!**/example-config.json', '!**/tslint.json', '!**/.editorconfig', '!**/systemjs.config.js', '!**/wallaby.js', '!**/karma-test-shim.js', '!**/karma.conf.js', // AoT related files '!**/aot/**/*.*', '!**/*-aot.*' ]; // exclude all specs if no spec is mentioned in `files[]` if (!includeSpec) { defaultExcludes = defaultExcludes.concat(['!**/*.spec.*','!**/spec.js']); } Array.prototype.push.apply(gpaths, defaultExcludes); config.fileNames = globby.sync(gpaths, { ignore: ["**/node_modules/**"] }); return config; } } module.exports = PlunkerBuilder; // not currently used. // function escapeHtml(unsafe) { // return unsafe // .replace(/&/g, "&") // .replace(/</g, "<") // .replace(/>/g, ">") // .replace(/"/g, """) // .replace(/'/g, "'"); // } //// Old version - no longer used //function createPlunkerHtmlAsync(basePath, postData) { // // useNewWindow = false; // jsdom.env({ // html: createBasePlunkerHtml(useNewWindow), // done: function (err, window) { // var doc = window.document; // var form = doc.querySelector('form'); // // _.forEach(postData, function(value, key) { // var ele = htmlToElement(doc, '<input type="hidden" name="' + key + '">'); // ele.setAttribute('value', value); // form.appendChild(ele) // }); // var html = doc.documentElement.outerHTML; // var outputFn = path.join(basePath, "plnkr.html"); // fs.writeFileSync(outputFn, html, 'utf-8' ); // } // }); //}