Add initial version of openPlunker (#26)

* Add initial version of openPlunker

* Add PlunkerData

* Make openPlunker work

* Move plunker templates location and example data name

* Move plunker template to assets/plunker

* Add test

* fix lint

* Make plunker integrated

Author: tinayuangao

src/app/examples/example-data.ts

@@ -0,0 +1,31 @@
+/**
+ * Example data
+ *   with information about Component name, selector, files used in example, and path to examples
+ */
+export class ExampleData {
+  // TODO: figure out how do we get these variables.
+  description: string = 'Some description for material';
+  // TODO: use real example and delete the example/ folder.
+  examplePath = '/assets/example/';
+  exampleFiles = ['button-demo.html', 'button-demo.scss', 'button-demo.ts'];
+
+  // TODO: extract these variables from example code.
+  selectorName = 'button-demo';
+  indexFilename = 'button-demo';
+  componentName = 'ButtonDemo';
+
+  constructor(example: string) {
+    if (example) {
+      this.examplePath = `/app/examples/${example}/`;
+      // TODO(tinayuangao): Do not hard-code extensions
+      this.exampleFiles = ['html', 'ts', 'scss']
+        .map((extension) => `${example}-example.${extension}`);
+      this.selectorName = this.indexFilename = `${example}-example`;
+      var exampleName = example.replace(/(?:^\w|\b\w)/g, function(letter) {
+        return letter.toUpperCase();
+      });
+      this.description = exampleName.replace(/[\-]+/g, ' ') + ' Example';
+      this.componentName = exampleName.replace(/[\-]+/g, '') + 'Example';
+    }
+  }
+}

src/app/shared/example-viewer/example-viewer.html

@@ -4,7 +4,7 @@
   <div class="docs-example-viewer-title-spacer"></div>
 
   <button md-icon-button type="button" (click)="toggleSourceView()">S</button>
-  <button md-icon-button type="button">P</button>
+  <plunker-button [example]="example"></plunker-button>
 </div>
 
 <div class="docs-example-viewer-source" *ngIf="showSource">

src/app/shared/example-viewer/example-viewer.ts

@@ -43,6 +43,6 @@ export class ExampleViewer {
   }
 
   exampleFileUrl(extension: string) {
-    return `/assets/examples/${this.example}-example.${extension.toLowerCase()}.html`;
+    return `/app/examples/${this.example}/${this.example}-example.${extension.toLowerCase()}`;
   }
 }

src/app/shared/plunker/index.ts

@@ -0,0 +1 @@
+export * from './plunker-button';

src/app/shared/plunker/plunker-button.html

@@ -0,0 +1,2 @@
+<!-- TODO: change the template to be plunker icon -->
+<button md-icon-button type="button"(click)="openPlunker()">P</button>

src/app/shared/plunker/plunker-button.ts

@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+import { PlunkerWriter } from './plunker-writer';
+import { ExampleData } from '../../examples/example-data';
+
+@Component({
+  selector: 'plunker-button',
+  templateUrl: './plunker-button.html',
+  providers: [PlunkerWriter],
+})
+export class PlunkerButton {
+  exampleData: ExampleData;
+
+  @Input()
+  set example(example: string) {
+     this.exampleData = new ExampleData(example);
+  }
+
+  constructor(private plunkerWriter: PlunkerWriter) {}
+
+  openPlunker(): void {
+    this.plunkerWriter.openPlunker(this.exampleData);
+  }
+}

src/app/shared/plunker/plunker-writer.spec.ts

@@ -0,0 +1,126 @@
+import {TestBed, inject, async, flushMicrotasks, fakeAsync} from '@angular/core/testing';
+import {MockBackend} from '@angular/http/testing';
+import {BaseRequestOptions, Http, Response, ResponseOptions, XHRBackend} from '@angular/http';
+import {PlunkerWriter} from './plunker-writer';
+import {ExampleData} from '../../examples/example-data';
+
+
+describe('PlunkerWriter', () => {
+  var plunkerWriter: PlunkerWriter;
+  var data: ExampleData;
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [],
+      declarations: [],
+      providers: [
+        PlunkerWriter,
+        MockBackend,
+        BaseRequestOptions,
+        {provide: XHRBackend, useExisting: MockBackend},
+        {
+          provide: Http,
+          useFactory: (backendInstance: MockBackend, defaultOptions: BaseRequestOptions) => {
+            return new Http(backendInstance, defaultOptions);
+          },
+          deps: [MockBackend, BaseRequestOptions]
+        },
+      ]
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  beforeEach(inject([MockBackend], (mockBackend: MockBackend, http: Http) => {
+    mockBackend.connections.subscribe((connection: any) => {
+      const url = connection.request.url;
+      connection.mockRespond(getFakeDocResponse(url));
+    });
+
+    plunkerWriter = TestBed.get(PlunkerWriter);
+    data = new ExampleData();
+    data.examplePath = 'http://material.angular.io/';
+    data.exampleFiles = ['test.ts', 'test.html', 'src/detail.ts'];
+  }));
+
+  it('should append correct copyright', () => {
+    expect(plunkerWriter._appendCopyright('test.ts', 'NoContent')).toBe(`NoContent
+
+/**  Copyright 2016 Google Inc. All Rights Reserved.
+    Use of this source code is governed by an MIT-style license that
+    can be found in the LICENSE file at http://angular.io/license */`);
+
+    expect(plunkerWriter._appendCopyright('test.html', 'NoContent')).toBe(`NoContent
+
+<!-- Copyright 2016 Google Inc. All Rights Reserved.
+    Use of this source code is governed by an MIT-style license that
+    can be found in the LICENSE file at http://angular.io/license -->`);
+
+  });
+
+  it('should create form element', () => {
+    expect(plunkerWriter._createFormElement().outerHTML).toBe(
+      `<form action="https://plnkr.co/edit/?p=preview" method="post" target="_blank"></form>`);
+  });
+
+  it('should add files to form input', () => {
+    plunkerWriter.form = plunkerWriter._createFormElement();
+
+    plunkerWriter._addFileToForm('NoContent', 'test.ts', 'path/to/file');
+    plunkerWriter._addFileToForm('Test', 'test.html', 'path/to/file');
+    plunkerWriter._addFileToForm('Detail', 'src/detail.ts', 'path/to/file');
+
+    let elements = plunkerWriter.form.elements;
+    expect(elements.length).toBe(3);
+    expect(elements[0].getAttribute('name')).toBe('files[test.ts]');
+    expect(elements[1].getAttribute('name')).toBe('files[test.html]');
+    expect(elements[2].getAttribute('name')).toBe('files[src/detail.ts]');
+  });
+
+  it('should open a new window with plunker url', fakeAsync(() => {
+    plunkerWriter.openPlunker(data);
+    flushMicrotasks();
+
+    let elements = plunkerWriter.form.elements;
+    expect(elements.length).toBe(11);
+
+    // Should have correct tags
+    expect(elements[0].getAttribute('name')).toBe('tags[0]');
+    expect(elements[0].getAttribute('value')).toBe('angular');
+    expect(elements[1].getAttribute('value')).toBe('material');
+    expect(elements[2].getAttribute('value')).toBe('example');
+
+    // Should have private and description
+    expect(elements[3].getAttribute('name')).toBe('private');
+    expect(elements[4].getAttribute('name')).toBe('description');
+
+    // Should have example files
+    expect(elements[5].getAttribute('name')).toBe('files[index.html]');
+    expect(elements[6].getAttribute('name')).toBe('files[systemjs.config.js]');
+    expect(elements[7].getAttribute('name')).toBe('files[main.ts]');
+
+    // Should have template files
+    expect(elements[8].getAttribute('name')).toBe('files[test.ts]');
+    expect(elements[9].getAttribute('name')).toBe('files[test.html]');
+    expect(elements[10].getAttribute('name')).toBe('files[src/detail.ts]');
+
+    // TODO(tinagao): Add more test
+  }));
+});
+
+const FAKE_DOCS = {
+  'http://material.angular.io/test.ts': 'ExampleComponent',
+  'http://material.angular.io/test.html': `
+      <example></example>`,
+  'http://material.angular.io/src/detail.ts': 'DetailComponent',
+};
+
+function getFakeDocResponse(url: string) {
+  if (url in FAKE_DOCS) {
+    return new Response(new ResponseOptions({
+      status: 200,
+      body: FAKE_DOCS[url],
+    }));
+  } else {
+    return new Response(new ResponseOptions({status: 404}));
+  }
+}

src/app/shared/plunker/plunker-writer.ts

@@ -0,0 +1,121 @@
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+import { ExampleData } from '../../examples/example-data';
+import 'rxjs/add/operator/toPromise';
+
+const PLUNKER_URL = 'https://plnkr.co/edit/?p=preview';
+
+const COPYRIGHT =
+  `Copyright 2016 Google Inc. All Rights Reserved.
+    Use of this source code is governed by an MIT-style license that
+    can be found in the LICENSE file at http://angular.io/license`;
+
+const TEMPLATE_PATH = '/assets/plunker/';
+const TEMPLATE_FILES = ['index.html', 'systemjs.config.js', 'main.ts'];
+
+const TAGS: string[] = ['angular', 'material', 'example'];
+
+/**
+ * Plunker writer, write example files to Plunker
+ *
+ * Plunker API
+ * URL: http://plnkr.co/edit/?p=preview
+ * data: {
+ *   // File name, directory and content of files
+ *   files[file-name1]: file-content1,
+ *   files[directory-name/file-name2]: file-content2,
+ *   // Can add multiple tags
+ *   tags[0]: tag-0,
+ *   // Description of plunker
+ *   description: description,
+ *   // Private or not
+ *   private: true
+ * }
+ */
+@Injectable()
+export class PlunkerWriter {
+  form: HTMLFormElement;
+  exampleData: ExampleData;
+
+  constructor(private _http: Http) {}
+
+  /** Construct the plunker content */
+  openPlunker(data: ExampleData) {
+    this.exampleData = data;
+
+    this.form = this._createFormElement();
+
+    for (let i = 0; i < TAGS.length; i++) {
+      this._createFormInput(`tags[${i}]`, TAGS[i]);
+    }
+
+    this._createFormInput('private', 'true');
+    this._createFormInput('description', this.exampleData.description);
+
+    var templateContents = TEMPLATE_FILES.map((file) => this._readFile(file, TEMPLATE_PATH));
+    var exampleContents = this.exampleData.exampleFiles.map(
+      (file) => this._readFile(file, this.exampleData.examplePath));
+
+    Promise.all(templateContents.concat(exampleContents)).then((_) => this.form.submit());
+  }
+
+  _createFormElement(): HTMLFormElement {
+    var form = document.createElement('form');
+    form.action = PLUNKER_URL;
+    form.method = 'post';
+    form.target = '_blank';
+    return form;
+  }
+
+  _createFormInput(name: string, value: string) {
+    var input = document.createElement('input');
+    input.type = 'hidden';
+    input.name = name;
+    input.value = value;
+    this.form.appendChild(input);
+  }
+
+  _readFile(filename: string, path: string) {
+    return this._http.get(path + filename).toPromise().then(
+      response => this._addFileToForm(response.text(), filename, path),
+      error => console.log(error));
+  }
+
+  _addFileToForm(content: string, filename: string, path: string) {
+    if (path == TEMPLATE_PATH) {
+      content = this._replaceExamplePlaceholderNames(filename, content);
+    }
+    this._createFormInput(`files[${filename}]`, this._appendCopyright(filename, content));
+  }
+
+  /**
+   * The Plunker template assets contain placeholder names for the examples:
+   * "<material-docs-example>" and "MaterialDocsExample".
+   * This will replace those placeholders with the names from the example metadata,
+   * e.g. "<basic-button-example>" and "BasicButtonExample"
+   */
+  _replaceExamplePlaceholderNames(fileName: string, fileContent: string): string {
+    if (fileName == 'index.html') {
+      // Replace the component selector in `index,html`.
+      // For example, <material-docs-example></material-docs-exmaple> will be replaced as
+      // <button-demo></button-demo>
+      fileContent = fileContent.replace(/material-docs-example/g, this.exampleData.selectorName);
+    } else if (fileName == 'main.ts') {
+      // Replace the component name in `main.ts`.
+      // For example, `import {MaterialDocsExample} from 'material-docs-example'`
+      // will be replaced as `import {ButtonDemo} from './button-demo'`
+      fileContent = fileContent.replace(/MaterialDocsExample/g, this.exampleData.componentName);
+      fileContent = fileContent.replace(/material-docs-example/g, this.exampleData.indexFilename);
+    }
+    return fileContent;
+  }
+
+  _appendCopyright(filename: string, content: string) {
+    if (filename.indexOf('.ts') > -1 || filename.indexOf('.scss') > -1) {
+      content = `${content}\n\n/**  ${COPYRIGHT} */`;
+    } else if (filename.indexOf('.html') > -1) {
+      content = `${content}\n\n<!-- ${COPYRIGHT} -->`;
+    }
+    return content;
+  }
+}

src/app/shared/shared-module.ts

@@ -7,6 +7,7 @@ import {NavBar} from './navbar/navbar';
 import {MaterialModule} from '@angular/material';
 import {BrowserModule} from '@angular/platform-browser';
 import {RouterModule} from '@angular/router';
+import {PlunkerButton} from './plunker';
 
 
 @NgModule({
@@ -16,8 +17,8 @@ import {RouterModule} from '@angular/router';
     BrowserModule,
     MaterialModule,
   ],
-  declarations: [DocViewer, ExampleViewer, NavBar],
-  exports: [DocViewer, ExampleViewer, NavBar],
+  declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton],
+  exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton],
   providers: [DocumentationItems],
   entryComponents: [
     ExampleViewer,