' +
+ '
' +
+ '' +
+ '
Live example' +
+ '
' +
+ '' +
+ 'Live example' +
+ '' +
+ '
Live example' +
+ '
'
+
+ }
function embeddedTemplate(src, img) {
return 'Live example' +
+ '' +
@@ -39,6 +59,24 @@ angularIO.directive('liveExample', ['$location', function ($location) {
'
';
}
+ function getHref(langOrApi, example, plnkr) {
+ var href;
+ switch (langOrApi) {
+ case 'ts':
+ case 'js':
+ href = '/resources/live-examples/' + example + '/' + langOrApi + '/' + plnkr + '.html';
+ break;
+ case 'dart':
+ href = 'http://angular-examples.github.io/' + example;
+ break;
+ case 'api':
+ href = '/resources/api-live-examples/' + example + '/' + plnkr + '.html';
+ }
+ return href;
+ }
+
+ function span(text) { return '' + text + ''; }
+
return {
restrict: 'E',
scope: true,
@@ -47,35 +85,41 @@ angularIO.directive('liveExample', ['$location', function ($location) {
var ex = attrs.name || NgIoUtil.getExampleName($location);
var embedded = attrs.hasOwnProperty('embedded');
var plnkr = embedded ? 'eplnkr' : 'plnkr';
- var href, template;
+ var href, template, exLang;
var imageBase = '/resources/images/';
var defaultImg = 'plunker/placeholder.png';
-
+ var noImg = angular.isDefined(attrs.noimg);
+ var isApi = !!attrs.api;
+ console.log(noImg);
if (attrs.plnkr) {
plnkr = attrs.plnkr + '.' + plnkr;
}
+ if (isApi) {
+ ex = attrs.api;
+ exLang = 'api';
+ } else {
+ exLang = isForDart ? 'dart' : isForJs ? 'js' : 'ts';
+ }
+
var isForDart = attrs.lang === 'dart' || NgIoUtil.isDoc($location, 'dart');
var isForJs = attrs.lang === 'js' || NgIoUtil.isDoc($location, 'js');
- var exLang = isForDart ? 'dart' : isForJs ? 'js' : 'ts';
if (embedded && !isForDart) {
- href = '/resources/live-examples/' + ex + '/' + exLang + '/' + plnkr + '.html';
+ href = getHref(exLang, ex, plnkr);
img = imageBase + (attrs.img || defaultImg);
- template = embeddedTemplate(href, img);
+ template = noImg ? embeddedNoImgTemplate(href) : embeddedTemplate(href, img);
} else {
- var href = isForDart
- ? 'http://angular-examples.github.io/' + ex
- : '/resources/live-examples/' + ex + '/' + exLang + '/' + plnkr + '.html'
+ href = getHref(exLang, ex, plnkr);
// Link to live example.
- var template = a(text, { href: href, target: '_blank' });
+ template = a(text, { href: href, target: '_blank' });
// The hosted example and sources are in different locations for Dart.
// Also show link to sources for Dart, unless noSource is specified.
if (isForDart && !attrs.hasOwnProperty('nosource')) {
var srcText = attrs.srcText || 'view source';
- var srcHref = 'http://github.com/angular-examples/' + ex;
+ href = getHref('dart', ex);
template = span(template + ' (' + a(srcText, { href: srcHref, target: '_blank' }) + ')');
}
}
diff --git a/tools/api-builder/angular.io-package/rendering/indentForMarkdown.js b/tools/api-builder/angular.io-package/rendering/indentForMarkdown.js
index 991ef30007..fd99b28fe0 100644
--- a/tools/api-builder/angular.io-package/rendering/indentForMarkdown.js
+++ b/tools/api-builder/angular.io-package/rendering/indentForMarkdown.js
@@ -59,4 +59,4 @@ module.exports = function(encodeCodeBlock) {
return str;
};
-};
\ No newline at end of file
+};
diff --git a/tools/api-builder/links-package/index.js b/tools/api-builder/links-package/index.js
index 4d4a06c82b..4d8311b3f2 100644
--- a/tools/api-builder/links-package/index.js
+++ b/tools/api-builder/links-package/index.js
@@ -6,6 +6,7 @@ module.exports = new Package('links', [])
.factory(require('./inline-tag-defs/linkDocs'))
.factory(require('./inline-tag-defs/example'))
.factory(require('./inline-tag-defs/exampleTabs'))
+.factory(require('./inline-tag-defs/liveExample'))
.factory(require('dgeni-packages/links/services/getAliases'))
.factory(require('dgeni-packages/links/services/getDocFromAlias'))
.factory(require('./services/getLinkInfo'))
@@ -14,11 +15,12 @@ module.exports = new Package('links', [])
.factory(require('./services/deprecatedDocsLinkDisambiguator'))
.factory(require('./services/getApiFragmentFileName'))
-.config(function(inlineTagProcessor, linkInlineTagDef, linkDocsInlineTagDef, exampleInlineTagDef, exampleTabsInlineTagDef) {
+.config(function(inlineTagProcessor, linkInlineTagDef, linkDocsInlineTagDef, exampleInlineTagDef, exampleTabsInlineTagDef, liveExampleInlineTagDef) {
inlineTagProcessor.inlineTagDefinitions.push(linkInlineTagDef);
inlineTagProcessor.inlineTagDefinitions.push(linkDocsInlineTagDef);
inlineTagProcessor.inlineTagDefinitions.push(exampleInlineTagDef);
inlineTagProcessor.inlineTagDefinitions.push(exampleTabsInlineTagDef);
+ inlineTagProcessor.inlineTagDefinitions.push(liveExampleInlineTagDef);
})
.config(function(getLinkInfo, moduleScopeLinkDisambiguator, deprecatedDocsLinkDisambiguator) {
diff --git a/tools/api-builder/links-package/inline-tag-defs/liveExample.js b/tools/api-builder/links-package/inline-tag-defs/liveExample.js
new file mode 100644
index 0000000000..afa7286123
--- /dev/null
+++ b/tools/api-builder/links-package/inline-tag-defs/liveExample.js
@@ -0,0 +1,39 @@
+var path = require('canonical-path');
+var fs = require("fs");
+
+/**
+ * @dgService liveExampleInlineTagDef
+ * @description
+ * Process inline liveExample tags (of the form {@liveExample demo-path embedded }),
+ * replacing them with a directive.
+ * Examples:
+ * {@liveExample core/animation/ts/dsl }
+ * {@liveExample core/di/ts/contentChildren embedded }
+ * @kind function
+ */
+module.exports = function liveExampleInlineTagDef(getLinkInfo, parseArgString, getApiFragmentFileName, createDocMessage, log) {
+ return {
+ name: 'liveExample',
+ description: 'Process inline liveExample tags (of the form {@liveExample demo-path embedded }), replacing them with ',
+ handler: function(doc, tagName, tagDescription) {
+
+ var tagArgs = parseArgString(tagDescription);
+ var unnamedArgs = tagArgs._;
+ var relativePath = unnamedArgs[0] !== 'embedded' ? unnamedArgs[0] : unnamedArgs[1];
+ var embedded = unnamedArgs.indexOf('embedded') >= 0 ? 'embedded' : '';
+ var imgPath = tagArgs.img;
+
+ // check if fragment file actually exists.
+ var apiPlunkerFile = getApiPlunkerFile(relativePath);
+ if ( !fs.existsSync(apiPlunkerFile)) {
+ log.warn(createDocMessage(`Invalid example (unable to locate plunker file: ${apiPlunkerFile}`));
+ }
+
+ return [ `Animations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading...
+
+
+
+
diff --git a/tools/plunker-builder/boilerplate/main.ts b/tools/plunker-builder/boilerplate/main.ts
new file mode 100644
index 0000000000..7a91a2ded9
--- /dev/null
+++ b/tools/plunker-builder/boilerplate/main.ts
@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './module.ts';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/tools/plunker-builder/builder.js b/tools/plunker-builder/builder.js
index 3f0fdacdd1..448c11fa12 100644
--- a/tools/plunker-builder/builder.js
+++ b/tools/plunker-builder/builder.js
@@ -15,17 +15,21 @@ var regionExtractor = require('../doc-shredder/regionExtractor');
class PlunkerBuilder {
constructor(basePath, destPath, options) {
this.basePath = basePath;
+ this.boilerplatePath = './public/docs/_examples';
+ this.copyrights = {};
+ this.boilerplateFiles = {};
+ this.boilerplateFilesPath = `${__dirname}/boilerplate`
this.destPath = destPath;
this.options = options;
- this.copyrights = {};
this._buildCopyrightStrings();
}
buildPlunkers() {
this._getPlunkerFiles();
+ this._getBoilerplateFiles();
var errFn = this.options.errFn || function(e) { console.log(e); };
- var plunkerPaths = path.join(this.basePath, '**/*plnkr.json');
+ var plunkerPaths = path.join(this.basePath, `**/*${this.options.flagFile}`);
var fileNames = globby.sync(plunkerPaths, { ignore: "**/node_modules/**"});
fileNames.forEach((configFileName) => {
try {
@@ -36,6 +40,12 @@ class PlunkerBuilder {
});
}
+ _addAPIFiles(postData) {
+ _.forEach(this.boilerplateFiles, (content, fileName) => {
+ this.options.addField(postData, fileName, content);
+ });
+ }
+
_addPlunkerFiles(config, postData) {
this._addReadme(config, postData);
if (config.basePath.indexOf('/ts') > -1) {
@@ -43,6 +53,10 @@ class PlunkerBuilder {
this.options.addField(postData, 'systemjs.config.js', this.systemjsConfig);
this.options.addField(postData, 'tsconfig.json', this.tsconfig);
}
+
+ if (this.options.api) {
+ this._addAPIFiles(postData);
+ }
}
_addReadme(config, postData) {
@@ -56,6 +70,16 @@ class PlunkerBuilder {
}
}
+ _attachCopyright(file, content) {
+ const ext = file.substr(file.lastIndexOf('.') + 1);
+ if (ext === 'js' || ext === 'ts' || ext === 'css') {
+ content += this.copyrights.jsCss;
+ } else if (ext === 'html') {
+ content += this.copyrights.html;
+ }
+ return content;
+ }
+
_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'
@@ -73,7 +97,7 @@ class PlunkerBuilder {
_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;
+ outputFileName = configFileName.substr(0, configFileName.length - this.options.flagFile.length) + outputFileName;
var altFileName;
if (this.destPath && this.destPath.length > 0) {
var partPath = path.dirname(path.relative(this.basePath, outputFileName));
@@ -167,7 +191,11 @@ class PlunkerBuilder {
postData.description = "Angular Example - " + config.description;
} else {
- postData.title = "Angular Example - " + config.description;
+ if (this.options.api) {
+ postData.title = config.description;
+ } else {
+ postData.title = "Angular Example - " + config.description;
+ }
}
// Embedded needs to add more content, so if the callback is available, we call it
@@ -207,16 +235,23 @@ class PlunkerBuilder {
}
}
+ _getBoilerplateFiles() {
+ fs.readdirSync(this.boilerplateFilesPath).map((file) => {
+ let content = fs.readFileSync(`${this.boilerplateFilesPath}/${file}`);
+ this.boilerplateFiles[`${file}`] = this._attachCopyright(file, content);
+ });
+ }
+
_getPlunkerFiles() {
// Assume plunker version is sibling of node_modules version
- this.readme = fs.readFileSync(this.basePath + '/plunker.README.md', 'utf-8');
+ this.readme = fs.readFileSync(this.boilerplatePath + '/plunker.README.md', 'utf-8');
var systemJsConfigPath = '/systemjs.config.plunker.js';
if (this.options.build) {
systemJsConfigPath = '/systemjs.config.plunker.build.js';
}
- this.systemjsConfig = fs.readFileSync(this.basePath + systemJsConfigPath, 'utf-8');
+ this.systemjsConfig = fs.readFileSync(this.boilerplatePath + systemJsConfigPath, 'utf-8');
this.systemjsConfig += this.copyrights.jsCss;
- this.tsconfig = fs.readFileSync(`${this.basePath}/tsconfig.json`, 'utf-8');
+ this.tsconfig = fs.readFileSync(`${this.boilerplatePath}/tsconfig.json`, 'utf-8');
}
_htmlToElement(document, html) {
@@ -228,10 +263,17 @@ class PlunkerBuilder {
_initConfigAndCollectFileNames(configFileName) {
var basePath = path.dirname(configFileName);
var configSrc = fs.readFileSync(configFileName, 'utf-8');
+ var config = {};
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}`);
+ if (configFileName.slice(-3) === '.ts') {
+ config.description = 'Angular API example';
+ config.tags = ['API'];
+ }
+ else {
+ throw new Error(`Plunker config - unable to parse json file: ${configFileName}\n${e}`);
+ }
}
var defaultIncludes = ['**/*.ts', '**/*.js', '**/*.css', '**/*.html', '**/*.md', '**/*.json', '**/*.png'];
@@ -255,7 +297,6 @@ class PlunkerBuilder {
}
});
- // var defaultExcludes = [ '!**/node_modules/**','!**/typings/**','!**/tsconfig.json', '!**/*plnkr.json', '!**/*plnkr.html', '!**/*plnkr.no-link.html' ];
var defaultExcludes = [
'!**/typings/**',
'!**/typings.json',
@@ -273,11 +314,17 @@ class PlunkerBuilder {
// exclude all specs if no spec is mentioned in `files[]`
if (!includeSpec) {
- defaultExcludes = defaultExcludes.concat(['!**/*.spec.*','!**/spec.js']);
+ defaultExcludes = defaultExcludes.concat(['!**/*.spec.*','!**/spec.js', '!**/*_spec.*']);
}
- Array.prototype.push.apply(gpaths, defaultExcludes);
+ if (this.options.api) {
+ defaultExcludes = defaultExcludes.map((pattern) => {
+ pattern = pattern.slice(1);
+ return path.join(`!${basePath}`, pattern);
+ });
+ }
+ Array.prototype.push.apply(gpaths, defaultExcludes);
config.fileNames = globby.sync(gpaths, { ignore: ["**/node_modules/**"] });
config.basePath = basePath;
diff --git a/tools/plunker-builder/embeddedApiPlunker.js b/tools/plunker-builder/embeddedApiPlunker.js
new file mode 100644
index 0000000000..54757b108a
--- /dev/null
+++ b/tools/plunker-builder/embeddedApiPlunker.js
@@ -0,0 +1,46 @@
+var PlunkerBuilder = require('./builder');
+
+const rootFiles = [
+ 'index.html',
+ 'README.md',
+ 'systemjs.config.js',
+ 'tsconfig.json'
+];
+
+function buildPlunkers(basePath, destPath, options) {
+ configureBuilder(options);
+ var builder = new PlunkerBuilder(basePath, destPath, options);
+ builder.buildPlunkers();
+}
+
+function configureBuilder(options) {
+ options.addField = addField;
+ options.api = true;
+ options.embedded = true;
+ options.extraData = extraData;
+ options.flagFile = 'module.ts';
+ options.plunkerFileName = 'eplnkr';
+ options.url = 'https://embed.plnkr.co?show=preview';
+ options.writeNoLink = false;
+}
+
+function extraData(postData, config) {
+ postData['source[type]'] = config.description || 'Angular 2 example';
+ postData['source[url]'] = 'https://angular.io'
+}
+
+function addField(postData, name, content) {
+ var encoding = 'utf8';
+ if (name.split('.').pop === 'png') {
+ encoding = 'base64';
+ }
+ if (rootFiles.indexOf(name) === -1) {
+ name = `app/${name}`;
+ }
+ postData[`entries[${name}][content]`] = content;
+ postData[`entries[${name}][encoding]`] = encoding;
+}
+
+module.exports = {
+ buildPlunkers: buildPlunkers
+};
diff --git a/tools/plunker-builder/embeddedPlunker.js b/tools/plunker-builder/embeddedPlunker.js
index 0fbf7f4f18..c980db31d0 100644
--- a/tools/plunker-builder/embeddedPlunker.js
+++ b/tools/plunker-builder/embeddedPlunker.js
@@ -8,11 +8,12 @@ function buildPlunkers(basePath, destPath, options) {
function configureBuilder(options) {
options.addField = addField;
+ options.embedded = true;
+ options.extraData = extraData;
+ options.flagFile = 'plnkr.json';
options.plunkerFileName = 'eplnkr';
options.url = 'https://embed.plnkr.co?show=preview';
options.writeNoLink = false;
- options.embedded = true;
- options.extraData = extraData;
}
function extraData(postData, config) {
diff --git a/tools/plunker-builder/regularApiPlunker.js b/tools/plunker-builder/regularApiPlunker.js
new file mode 100644
index 0000000000..c27bec3632
--- /dev/null
+++ b/tools/plunker-builder/regularApiPlunker.js
@@ -0,0 +1,35 @@
+var PlunkerBuilder = require('./builder');
+
+const rootFiles = [
+ 'index.html',
+ 'README.md',
+ 'systemjs.config.js',
+ 'tsconfig.json'
+];
+
+function buildPlunkers(basePath, destPath, options) {
+ configureBuilder(options);
+ var builder = new PlunkerBuilder(basePath, destPath, options);
+ builder.buildPlunkers();
+}
+
+function configureBuilder(options) {
+ options.addField = addField;
+ options.api = true;
+ options.embedded = false;
+ options.flagFile = 'module.ts';
+ options.plunkerFileName = 'plnkr';
+ options.url = 'http://plnkr.co/edit/?p=preview';
+ options.writeNoLink = false;
+}
+
+function addField(postData, name, content) {
+ if (rootFiles.indexOf(name) === -1) {
+ name = `app/${name}`;
+ }
+ postData[`files[${name}]`] = content;
+}
+
+module.exports = {
+ buildPlunkers: buildPlunkers
+};
diff --git a/tools/plunker-builder/regularPlunker.js b/tools/plunker-builder/regularPlunker.js
index 7dda2fa7c0..c513f97f99 100644
--- a/tools/plunker-builder/regularPlunker.js
+++ b/tools/plunker-builder/regularPlunker.js
@@ -8,10 +8,11 @@ function buildPlunkers(basePath, destPath, options) {
function configureBuilder(options) {
options.addField = addField;
+ options.embedded = false;
+ options.flagFile = 'plnkr.json';
options.plunkerFileName = 'plnkr';
options.url = 'http://plnkr.co/edit/?p=preview';
options.writeNoLink = true;
- options.embedded = false;
}
function addField(postData, name, content) {