fix(plugin): Allow user to specify the bundle name

README.md

@@ -12,10 +12,27 @@
 var carteBlancheAngular2 = require('carteBlancheAngular2')
 
 plugins: [
-  new carteBlancheAngular2({ /* …options… */ })
+  // Plugin: CarteBlanche
+  // Description: Provides a carte blanche page for testing components.
+  // Allows to test each component and its variations separatly
+  new CarteBlanche({
+    componentRoot: 'src/app/components',
+    filter: /.*\.component.ts$/, // Matches all files ending in .ts
+    plugins: [
+      new Angular2Plugin({
+        variationFolderName: 'variations',
+        port: 7000,
+        hostname: 'localhost',
+        bundle: 'main.js',
+      })
+    ]
+  })
 ]
 ```
 
+For now a main bundle must be provided. And additional files can be provided using the files property. in the future support for CommonChunks plugin will be added
+so that you dont have to specify your files explicitly.
+
 ## Options
 
 - `variationFolderName` (default: `variations`): The name of the folders that stores the variation files.
@@ -38,3 +55,10 @@ new carteBlancheAngular2({
     hostname: 'mydomain.com'
   })
   ```
+
+- `bundle` (default: `main.js`): The name of the main bundle that holdes the application.
+  ```JS
+  new carteBlancheAngular2({
+    bundle: 'main.js'
+  })
+  ```

frontend/index.tsx

@@ -1,19 +1,25 @@
 
 import * as React from 'react';
-import {main} from './src/main';
+import { main } from './src/main';
 
 let bootstrapedComponentName: string;
 
-export default function playground(frontendData, pluginData, Component, componentPath) {
+export default function playground(
+    frontendData,
+    pluginData,
+    Component,
+    componentPath,
+    navigationStore,
+) {
 
     // Parse the angular source from typedoc
     let AngularSource = JSON.stringify(pluginData.AngularSourceParsed);
     // Get Info from the component
     let componentName = pluginData.AngularSourceParsed.elements[0].componentInfo.name;
     let componentSource = pluginData.source;
     let options = JSON.stringify(frontendData.options);
-
-    console.log(Component);
+    let basePath = pluginData.basePath;
+    let bundle = pluginData.bundle;
 
     // Bootstrap the angular app if we are in a different component
     if (bootstrapedComponentName != componentName) {
@@ -24,5 +30,5 @@ export default function playground(frontendData, pluginData, Component, componen
      * We need to pass in the component as an input to the angular app so it can 
      * render it using Dynamic component loader
      */
-    return <div data-frontend-options={frontendData.options} data-component-source={AngularSource} data-component={componentName} data-component-path={componentPath} className="cb-angular"></div>;
+    return <div data-bundle={bundle} data-base-path={basePath} data-frontend-options={frontendData.options} data-component-source={AngularSource} data-component={componentName} data-component-path={componentPath} className="cb-angular"></div>;
 }

frontend/src/app/app.ts

@@ -14,7 +14,7 @@ import { PlaylistList } from './components/playlistList/playlistList.component';
     selector: '.cb-angular', // <app></app>
     // The template for our app
     template: `
-    <cb-playlist-list [frontendOptions]="frontendOptions" [componentPath]="componentPath" [componentName]="componentName" [componentObj]="componentObj"></cb-playlist-list>`
+    <cb-playlist-list [basePath]="basePath" [bundle]="bundle" [frontendOptions]="frontendOptions" [componentPath]="componentPath" [componentName]="componentName" [componentObj]="componentObj"></cb-playlist-list>`
 })
 export class AppComponent implements OnInit {
     componentName: string;
@@ -23,6 +23,7 @@ export class AppComponent implements OnInit {
     compiledComponent: any;
     frontendOptions: any;
     basePath: string;
+    bundle: string;
     componentObj: Object;
 
     constructor(
@@ -31,6 +32,8 @@ export class AppComponent implements OnInit {
         this.componentName = nativeElement.getAttributeNode("data-component").value;
         this.componentPath = nativeElement.getAttributeNode("data-component-path").value;
         this.componentSource = nativeElement.getAttributeNode("data-component-source").value;
+        this.basePath = nativeElement.getAttributeNode("data-base-path").value;
+        this.bundle = nativeElement.getAttributeNode("data-bundle").value;
 
         // DO JSON PARSE
         this.frontendOptions = nativeElement.getAttributeNode("data-frontend-options").value;

frontend/src/app/components/iframe/iframe.component.ts

@@ -19,6 +19,7 @@ import { VariationData } from './../../utils/index';
 })
 export class IframeComponent implements OnInit {
     @Input() basePath: string;
+    @Input() bundle: string;
     @Input() component: any;
     @Input() componentPath: string;
     @Input() variationData: VariationData;
@@ -30,12 +31,9 @@ export class IframeComponent implements OnInit {
     }
 
     ngOnInit() {
-        //console.log(this.basePath);
         //this.userBundle = path.join(this.basePath, 'user-bundle.js');
-        this.userBundle = '';
         this.element = this._ref.nativeElement;
         this.iframe = this.element.children[0];
-        console.log(this.iframe);
         const doc = this.iframe.contentDocument;
         doc.open();
         // eslint-disable-next-line max-len
@@ -66,7 +64,7 @@ export class IframeComponent implements OnInit {
             <script type="text/javascript">
                 window.COMPONENT_PATH = '/${this.componentPath}';
             </script>
-            <script type="text/javascript" src="http://localhost:3000/main.js"></script></body>
+            <script type="text/javascript" src="${this.basePath}/${this.bundle}"></script></body>
         </body>
     </html>`;
     }

frontend/src/app/components/playlist/playlist.component.ts

@@ -45,7 +45,7 @@ import { EditVariationFormComponent } from './../editVariationForm/editVariation
         <cb-edit-button [size]="24" (click)="toggleModal()"></cb-edit-button>
         <cb-delete-button [size]="24" (click)="deleteVariation()"></cb-delete-button>
         <cb-card>
-            <cb-iframe [componentPath]="componentPath" [component]="component" [variationData]="variationData"></cb-iframe>
+            <cb-iframe [basePath]="basePath" [bundle]="bundle" [componentPath]="componentPath" [component]="component" [variationData]="variationData"></cb-iframe>
         </cb-card>
         <cb-modal [visible]="showModal" (onClose)="toggleModal()">
             <cb-edit-variation-form (onChanged)="persistVariation($event);"  [component]="component" [variationData]="variationData" [inputsCustomMeta]="inputsCustomMeta"></cb-edit-variation-form>
@@ -54,6 +54,8 @@ import { EditVariationFormComponent } from './../editVariationForm/editVariation
     </div>`,
 })
 export class Playlist {
+    @Input() basePath: string;
+    @Input() bundle: string;
     @Input() component: any;
     @Input() componentPath: string;
     @Input() variationData: any;

frontend/src/app/components/playlistList/playlistList.component.ts

@@ -32,12 +32,14 @@ import { ComponentGenerator, ComponentMetadataResolver } from './../../services/
             <cb-customm-metadata-form (changed)="componentPropsChange()" [componentPath]="componentPath" [component]="component" [inputsCustomMeta]="inputsCustomMeta"></cb-customm-metadata-form>
         </cb-modal>
         <div *ngFor="let variation of variations; let i = index">
-            <cb-playlist *ngIf="loadedCustomData" (onDeleted)="deleteVariation($event);" (onChanged)="persistVariation($event);" [componentPath]="componentPath" [component]="component" [variationData]="variation" [inputsCustomMeta]="inputsCustomMeta"></cb-playlist>
+            <cb-playlist *ngIf="loadedCustomData" (onDeleted)="deleteVariation($event);" (onChanged)="persistVariation($event);" [basePath]="basePath" [bundle]="bundle" [componentPath]="componentPath" [component]="component" [variationData]="variation" [inputsCustomMeta]="inputsCustomMeta"></cb-playlist>
         </div>
         <cb-create-variation-button (onCreateVariation)="submitVariation($event)"></cb-create-variation-button>
     </div>`,
 })
 export class PlaylistList {
+    @Input() basePath: string;
+    @Input() bundle: string;
     @Input() componentObj: any;
     @Input() componentName: string;
     @Input() componentPath: string;

frontend/src/app/utils/index.ts

@@ -1,6 +1,6 @@
-export { VariationData } from './variationData.interface.ts';
-export { codeToCustomMetadata } from './codeToCustomMetadata.ts';
-export { customMetadataToCode } from './customMetadataToCode.ts';
-export { propsToVariation } from './propsToVariation.ts';
-export { addDataToVariation } from './addDataToVariation.ts';
-export { variationsToProps } from './variationsToProps.ts';
+export { VariationData } from './variationData.interface';
+export { codeToCustomMetadata } from './codeToCustomMetadata';
+export { customMetadataToCode } from './customMetadataToCode';
+export { propsToVariation } from './propsToVariation';
+export { addDataToVariation } from './addDataToVariation';
+export { variationsToProps } from './variationsToProps';

plugin.js

@@ -91,6 +91,7 @@ Angular2Plugin.prototype.apply = function apply(compiler) {
     // Setting Default options for the plugin
     const options = defaults({}, this.options, {
         hostname: 'localhost',
+        bundle: 'main.js',
         files: [],
         injectTags: [],
         port: 8082,
@@ -123,9 +124,13 @@ Angular2Plugin.prototype.apply = function apply(compiler) {
             // Read the data from this component
             let AngularSource = type_doc_parser(data.source);
             data.AngularSouce = AngularSource;
+            // @TODO - Support common chunks
+            data.bundle = options.bundle;
+            data.basePath = compiler.options.devServer ? `http://${compiler.options.devServer.host}:${compiler.options.devServer.port}` : `${options.hostname}:${options.port}`;
             data.AngularSourceParsed = type_doc_analyzer(JSON.parse(AngularSource));
         });
         compilation.plugin('carte-blanche-plugin-assets-processing', function (assets) {
+            // Polyfills and vendor file for Carteblanche angular2 plugin
             assets.push(path.join(__dirname, './frontend/polyfills.js'));
             assets.push(path.join(__dirname, './frontend/vendor.js'));
         });
@@ -134,7 +139,7 @@ Angular2Plugin.prototype.apply = function apply(compiler) {
             'carte-blanche-plugin-processing',
             (renderToClient) => {
                 renderToClient({
-                    // TODO the name is used in the iframe & playground list
+                    // @TODO the name is used in the iframe & playground list
                     // best to pass it in there instead of hardcoding it
                     name: 'angular2',
                     frontendData: { options },