317 lines
		
	
	
		
			10 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			317 lines
		
	
	
		
			10 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| '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/**"});
 | |
|     fileNames.forEach((configFileName) => {
 | |
|       try {
 | |
|         this._buildPlunkerFrom(configFileName);
 | |
|       } catch (e) {
 | |
|         errFn(e);
 | |
|       }
 | |
|     });
 | |
|   }
 | |
| 
 | |
|   _addPlunkerFiles(config, postData) {
 | |
|     this._addReadme(config, postData);
 | |
|     if (config.basePath.indexOf('/ts') > -1) {
 | |
|       // uses systemjs.config.js so add plunker version
 | |
|       this.options.addField(postData, 'systemjs.config.js', this.systemjsConfig);
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   _addReadme(config, postData) {
 | |
|     var existingFiles = config.fileNames.map(function(file) {
 | |
|       return file.substr(file.lastIndexOf('/') + 1);
 | |
|     });
 | |
| 
 | |
|     if (existingFiles.indexOf('README.md') === -1) {
 | |
|       var plunkerReadme = this.readme + config.description;
 | |
|       this.options.addField(postData, 'README.md', plunkerReadme);
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   _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}<!-- \n${copyright}\n-->`;
 | |
|   }
 | |
| 
 | |
|   // config has
 | |
|   //   files: [] - optional array of globs - defaults to all js, ts, html, json, css and md files (with certain files removed)
 | |
|   //   description: optional string - description of this plunker - defaults to the title in the index.html page.
 | |
|   //   tags: [] - optional array of strings
 | |
|   //   main: string - filename of what will become index.html in the plunker - defaults to index.html
 | |
|   _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(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(embedded) {
 | |
|     var html = '<!DOCTYPE html><html lang="en"><body>'
 | |
|     html += `<form id="mainForm" method="post" action="${this.options.url}" target="_self">`
 | |
| 
 | |
|     // html += '<div class="button"><button id="formButton" type="submit">Create Plunker</button></div>'
 | |
|     // html += '</form><script>document.getElementById("formButton").click();</script>'
 | |
|     html +=  '</form><script>document.getElementById("mainForm").submit();</script>'
 | |
|     html += '</body></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 {
 | |
|         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>(.*)<\/title>/.exec(content);
 | |
|           if (matches) {
 | |
|             config.description = matches[1];
 | |
|           }
 | |
|         }
 | |
|       }
 | |
|       content = regionExtractor.removeDocTags(content, extn.substr(1));
 | |
| 
 | |
|       this.options.addField(postData, relativeFileName, content);
 | |
|     });
 | |
| 
 | |
|     var tags = ['angular2', '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(postData) {
 | |
|     var baseHtml = this._createBasePlunkerHtml(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() {
 | |
|     // Assume plunker version is sibling of node_modules version
 | |
|     this.readme = fs.readFileSync(this.basePath +  '/_boilerplate/plunker.README.md', 'utf-8');
 | |
|     var systemJsConfigPath = '/_boilerplate/systemjs.config.web.js';
 | |
|     if (this.options.build) {
 | |
|       systemJsConfigPath = '/_boilerplate/systemjs.config.web.build.js';
 | |
|     }
 | |
|     this.systemjsConfig = fs.readFileSync(this.basePath + systemJsConfigPath, 'utf-8');
 | |
|     this.systemjsConfig +=  this.copyrights.jsCss;
 | |
|   }
 | |
| 
 | |
|   _htmlToElement(document, html) {
 | |
|     var div = document.createElement('div');
 | |
|     div.innerHTML = html;
 | |
|     return div.firstChild;
 | |
|   }
 | |
| 
 | |
|   _initConfigAndCollectFileNames(configFileName) {
 | |
|     var basePath = path.dirname(configFileName);
 | |
|     var configSrc = fs.readFileSync(configFileName, 'utf-8');
 | |
|     try {
 | |
|       var config = (configSrc && configSrc.trim().length) ? JSON.parse(configSrc) : {};
 | |
|     } 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(basePath, fileName.substr(1));
 | |
|       } else {
 | |
|         includeSpec = includeSpec || /.*\.spec.(ts|js)$/.test(fileName);
 | |
|         return path.join(basePath, fileName);
 | |
|       }
 | |
|     });
 | |
| 
 | |
|     var defaultExcludes = [
 | |
|       '!**/app/main.ts',
 | |
|       '!**/tsconfig.json',
 | |
|       '!**/*plnkr.*',
 | |
|       '!**/package.json',
 | |
|       '!**/example-config.json',
 | |
|       '!**/tslint.json',
 | |
|       '!**/.editorconfig',
 | |
|       '!**/systemjs.config.js',
 | |
|       '!**/wallaby.js',
 | |
|       '!**/karma-test-shim.js',
 | |
|       '!**/karma.conf.js'
 | |
|     ];
 | |
| 
 | |
|     // 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/**"] });
 | |
|     config.basePath = basePath;
 | |
| 
 | |
|     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' );
 | |
| //    }
 | |
| //  });
 | |
| //}
 |