feat(stackblitz): stackblitz implementation poc

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

@@ -1,5 +1,28 @@
 import { OperatorDoc } from '../operator.model';
 
+const EXAMPLE_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 => {
+  const output = \`<h3>$\{x.toString\(\)\}<h3>\`;
+  document.getElementById('output').innerHTML += output;
+});
+`;
+
 export const combineAll: OperatorDoc = {
   name: 'combineAll',
   operatorType: 'combination',
@@ -50,26 +73,7 @@ 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';
-
-        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));
-      `,
-      externalLink: {
-        platform: 'JSBin',
-        url: 'http://jsbin.com/peparawuvo/1/embed?js,console,output'
-      }
+      code: EXAMPLE_CODE
     }
   ],
   relatedOperators: ['combineLatest', 'mergeAll'],

src/operator-docs/combination/combineLatest.ts

@@ -1,5 +1,26 @@
 import { OperatorDoc } from '../operator.model';
 
+const EXAMPLE_CODE = `
+import { combineLatest } from 'rxjs/operators/combineLatest';
+import { of } from 'rxjs/observable/of';
+
+const weight = of(70, 72, 76, 79, 75);
+const height = of(1.76, 1.77, 1.78);
+const bmi = weight.pipe(
+  combineLatest(height, (w, h) => w / (h * h))
+);
+/*
+   Output:
+   BMI is 24.212293388429753
+   BMI is 23.93948099205209
+   BMI is 23.671253629592222
+*/
+bmi.subscribe(x => {
+  const output = \`<h3>BMI is $\{x.toString\(\)\}<h3>\`;
+  document.getElementById('output').innerHTML += output;
+});
+`;
+
 export const combineLatest: OperatorDoc = {
   name: 'combineLatest',
   operatorType: 'combination',
@@ -55,27 +76,7 @@ export const combineLatest: OperatorDoc = {
     {
       name:
         'Dynamically calculate the Body-Mass Index from an Observable of weight and one for height',
-      code: `
-        import { combineLatest } from 'rxjs/operators;
-        import { of } from 'rxjs/observable/of';
-
-        const weight = of(70, 72, 76, 79, 75);
-        const height = of(1.76, 1.77, 1.78);
-        const bmi = weight.pipe(
-          combineLatest(height, (w, h) => w / (h * h))
-        );
-        /*
-           Output:
-           BMI is 24.212293388429753
-           BMI is 23.93948099205209
-           BMI is 23.671253629592222
-        */
-        bmi.subscribe(x => console.log('BMI is ' + x));
-      `,
-      externalLink: {
-        platform: 'JSBin',
-        url: 'http://jsbin.com/pivowunedu/1/embed?js,console'
-      }
+      code: EXAMPLE_CODE
     }
   ],
   relatedOperators: ['combineAll', 'merge', 'withLatestFrom'],

src/operator-docs/combination/concat.ts

@@ -77,24 +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
-    `,
-      externalLink: {
-        platform: 'JSBin',
-        url: 'http://jsbin.com/doqoyimaxu/embed?js,console'
-      }
+  // results in:
+  // 0 -1000ms-> 1 -1000ms-> 2 -1000ms-> 3 -immediate-> 1 ... 10`
     },
     {
       name: 'Concatenate an array of 3 Observables',
@@ -106,18 +103,17 @@ 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)
       // -1000ms-> 0 -1000ms-> 1 -1000ms-> ... 9
       // -2000ms-> 0 -2000ms-> 1 -2000ms-> ... 5
       // -500ms-> 0 -500ms-> 1 -500ms-> ... 9
-    `,
-      externalLink: {
-        platform: 'JSBin',
-        url: 'http://jsbin.com/decaromone/1/embed?js,console'
-      }
+    `
     }
   ],
   relatedOperators: ['concatAll', 'concatMap', 'concatMapTo']

src/operator-docs/combination/concatAll.ts

@@ -51,12 +51,11 @@ export const concatAll: OperatorDoc = {
           map(ev => interval(1000).pipe(take(4)))
         );
         const firstOrder = higherOrder.pipe(concatAll());
-        firstOrder.subscribe(x => console.log(x));
-      `,
-      externalLink: {
-        platform: 'JSBin',
-        url: 'http://jsbin.com/guhefeyahi/embed?js,console,output'
-      }
+        firstOrder.subscribe(x => {
+          const output = \`<h3>$\{x.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        });
+      `
     }
   ],
   relatedOperators: [

src/operator-docs/combination/forkJoin.ts

@@ -81,18 +81,17 @@ export const forkJoin: OperatorDoc = {
         of(5, 6, 7, 8)
       );
       observable.subscribe(
-        value => console.log(value),
+        value => {
+          const output = \`<h3>$\{value.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        },
         err => {},
         () => console.log('This is how it ends!')
       );
       // Logs:
       // [4, 8]
       // "This is how it ends!"
-    `,
-      externalLink: {
-        platform: 'JSBin',
-        url: 'http://jsbin.com/kinilaruki/1/embed?js,console'
-      }
+    `
     },
     {
       name: 'Use forkJoin with operator emitting after some time',
@@ -106,40 +105,42 @@ export const forkJoin: OperatorDoc = {
         interval(500).pipe(take(4)) // emit 0, 1, 2, 3 every half a second and complete
       );
       observable.subscribe(
-        value => console.log(value),
+        value => {
+          const output = \`<h3>$\{value.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        },
         err => {},
         () => console.log('This is how it ends!')
       );
       // Logs:
       // [2, 3] after 3 seconds
       // "This is how it ends!" immediately after
-    `,
-      externalLink: {
-        platform: 'JSBin',
-        url: 'http://jsbin.com/rewivubuqi/1/embed?js,console'
-      }
+    `
     },
     {
       name: 'Use forkJoin with project function',
       code: `
-      const observable = Rx.Observable.forkJoin(
-        Rx.Observable.interval(1000).take(3), // emit 0, 1, 2 every second and complete
-        Rx.Observable.interval(500).take(4), // emit 0, 1, 2, 3 every half a second and complete
+      import { take } from 'rxjs/operators';
+      import { forkJoin } from 'rxjs/observable/forkJoin';
+      import { interval } from 'rxjs/observable/interval';
+
+      const observable = forkJoin(
+        interval(1000).pipe(take(3)), // emit 0, 1, 2 every second and complete
+        interval(500).pipe(take(4)), // emit 0, 1, 2, 3 every half a second and complete
         (n, m) => n + m
       );
       observable.subscribe(
-        value => console.log(value),
+        value => {
+          const output = \`<h3>$\{value.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        },
         err => {},
         () => console.log('This is how it ends!')
       );
       // Logs:
       // 5 after 3 seconds
       // "This is how it ends!" immediately after
-    `,
-      externalLink: {
-        platform: 'JSBin',
-        url: 'http://jsbin.com/wayomumike/1/embed?js,console'
-      }
+    `
     }
   ],
   relatedOperators: ['combineLatest', 'zip']

src/operator-docs/combination/merge.ts

@@ -53,12 +53,11 @@ export const merge: OperatorDoc = {
         const clicks = fromEvent(document, 'click');
         const timer = interval(1000);
         const clicksOrTimer = clicks.pipe(merge(timer));
-        clicksOrTimer.subscribe(x => console.log(x));
-      `,
-      externalLink: {
-        platform: 'JSBin',
-        url: 'http://jsbin.com/wihafapiva/1/embed?js,output'
-      }
+        clicksOrTimer.subscribe(x => {
+          const output = \`<h3>$\{x.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        });
+      `
     },
     {
       name: 'Merge together 3 Observables, but only 2 run concurrently',
@@ -72,12 +71,11 @@ export const merge: OperatorDoc = {
         const timer3 = interval(500).pipe(take(10));
         const concurrent = 2; // the argument
         const merged = timer1.pipe(merge(timer2, timer3, concurrent));
-        merged.subscribe(x => console.log(x));
-      `,
-      externalLink: {
-        platform: 'JSBin',
-        url: 'http://jsbin.com/midosuqaga/1/embed?js,output'
-      }
+        merged.subscribe(x => {
+          const output = \`<h3>$\{x.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        });
+      `
     }
   ],
   relatedOperators: ['mergeAll', 'mergeMap', 'mergeMapTo', 'mergeScan']