feat(stackblitz): stackblitz implementation poc

Author: sumitarora

package.json

@@ -40,6 +40,7 @@
     "@angular/platform-browser-dynamic": "5.2.2",
     "@angular/router": "5.2.2",
     "@angular/service-worker": "5.2.2",
+    "@stackblitz/sdk": "0.3.4",
     "@types/hammerjs": "2.0.35",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",

src/app/operators/components/operator-examples/operator-examples.component.html

@@ -1,5 +1,6 @@
 <h2> Examples </h2>
-<div class="code-example" *ngFor="let example of operatorExamples" appHighlightJs>
+
+<div class="code-example" *ngFor="let i = index;let example of operatorExamples" appHighlightJs>
   <div class="code-block mat-elevation-z2">
     <div class="example-header">
       <div class="header-title" [innerHTML]="example.name"></div>
@@ -8,7 +9,8 @@ <h2> Examples </h2>
       </button>
     </div>
     <div class="bin-wrapper">
-      <iframe [src]="example.externalLink.url | safeUrl" [title]="example.name"></iframe>
+      <div id="exampleDiv-{{i}}"></div>
+      <!-- <iframe [src]="example.externalLink.url | safeUrl" [title]="example.name"></iframe> -->
     </div>
   </div>
 </div>

src/app/operators/components/operator-examples/operator-examples.component.ts

@@ -1,12 +1,48 @@
-import { Component, EventEmitter, Output, Input } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Output,
+  Input,
+  OnChanges
+} from '@angular/core';
+import sdk from '@stackblitz/sdk';
+
 import { OperatorExample } from '../../../../operator-docs';
 
 @Component({
   selector: 'app-operator-examples',
   templateUrl: './operator-examples.component.html',
   styleUrls: ['./operator-examples.component.scss']
 })
-export class OperatorExamplesComponent {
+export class OperatorExamplesComponent implements OnChanges {
   @Input() operatorExamples: OperatorExample[];
   @Output() copyToClipboard = new EventEmitter<string>();
+
+  ngOnChanges() {
+    if (Boolean(this.operatorExamples)) {
+      this.operatorExamples.forEach(this.initExamples);
+    }
+  }
+
+  initExamples(example: OperatorExample, index: number) {
+    const code = example.code;
+    const html = `<h1>${example.name}</h1><br/><br/><div id="output"></div>`;
+
+    const project = {
+      files: {
+        'index.ts': code,
+        'index.html': html
+      },
+      title: 'Dynamically Generated Project',
+      description: 'Created with <3 by the StackBlitz SDK!',
+      template: 'typescript',
+      tags: ['stackblitz', 'sdk'],
+      dependencies: {
+        rxjs: '5.5.6'
+      }
+    };
+    const divName = `exampleDiv-${index}`;
+
+    setTimeout(sdk.embedProject, 0, divName, project, { height: 600 });
+  }
 }

src/operator-docs/combination/combineAll.ts

@@ -50,22 +50,26 @@ export const combineAll: OperatorDoc = {
     {
       name:
         'Map two click events to a finite interval Observable, then apply <span class="markdown-code">combineAll</span>',
-      code: `
-        import { map, combineAll, take } from 'rxjs/operators';
-        import { fromEvent } from 'rxjs/observable/fromEvent';
+      code: `import { map, combineAll, take } from 'rxjs/operators';
+import { interval } from 'rxjs/observable/interval';
+import { fromEvent } from 'rxjs/observable/fromEvent';
 
-        const clicks = fromEvent(document, 'click');
-        const higherOrder = clicks.pipe(
-          map(ev =>
-            interval(Math.random()*2000).pipe(take(3))
-          ),
-          take(2)
-        );
-        const result = higherOrder.pipe(
-          combineAll()
-        );
-        result.subscribe(x => console.log(x));
-      `,
+const clicks = fromEvent(document, 'click');
+const higherOrder = clicks.pipe(
+  map(ev =>
+    interval(Math.random()*2000).pipe(take(3))
+  ),
+  take(2)
+);
+
+const result = higherOrder.pipe(
+  combineAll()
+);
+
+result.subscribe(x => {
+  const output = \`<h3>$\{x.toString\(\)\}<h3>\`;
+  document.getElementById('output').innerHTML = output;
+});`,
       externalLink: {
         platform: 'JSBin',
         url: 'http://jsbin.com/peparawuvo/1/embed?js,console,output'

src/operator-docs/combination/concat.ts

@@ -77,20 +77,21 @@ export const concat: OperatorDoc = {
     {
       name:
         'Concatenate a timer counting from 0 to 3 with a synchronous sequence from 1 to 10',
-      code: `
-      import { take } from 'rxjs/operators';
-      import { interval } from 'rxjs/observable/interval';
-      import { range } from 'rxjs/observable/range';
-      import { concat } from 'rxjs/observable/concat';
+      code: `import { take } from 'rxjs/operators';
+  import { interval } from 'rxjs/observable/interval';
+  import { range } from 'rxjs/observable/range';
+  import { concat } from 'rxjs/observable/concat';
 
-      const timer = interval(1000).pipe(take(4));
-      const sequence = range(1, 10);
-      const result = concat(timer, sequence);
-      result.subscribe(x => console.log(x));
+  const timer = interval(1000).pipe(take(4));
+  const sequence = range(1, 10);
+  const result = concat(timer, sequence);
+  result.subscribe(x => {
+    const output = \`<h3>$\{x.toString\(\)\}<h3>\`;
+    document.getElementById('output').innerHTML = output;
+  });
 
-      // results in:
-      // 0 -1000ms-> 1 -1000ms-> 2 -1000ms-> 3 -immediate-> 1 ... 10
-    `,
+  // results in:
+  // 0 -1000ms-> 1 -1000ms-> 2 -1000ms-> 3 -immediate-> 1 ... 10`,
       externalLink: {
         platform: 'JSBin',
         url: 'http://jsbin.com/doqoyimaxu/embed?js,console'
@@ -106,7 +107,10 @@ export const concat: OperatorDoc = {
       const timer2 = interval(2000).pipe(take(6));
       const timer3 = interval(500).pipe(take(10));
       const result = timer1.pipe(concat(timer2, timer3));
-      result.subscribe(x => console.log(x));
+      result.subscribe(x => {
+        const output = \`<h3>$\{x.toString\(\)\}<h3>\`;
+        document.getElementById('output').innerHTML = output;
+      });
 
       // results in the following:
       // (Prints to console sequentially)