fix(launchedbrowser): wait for config to be available before launch puppeteer (#267)

closes 194

Author: SanderElias

blog/page-1.md

@@ -5,7 +5,6 @@ publish date: 2019-11-26
 slug: look at_my-urls Cool
 slugs:
   - 'page-1'
-  - 'a slug'
 description: This is the first demo page in this sample.
 ---
 

scully.sampleBlog.config.js

@@ -47,6 +47,18 @@ exports.config = {
         property: 'id',
       },
     },
+    '/user/:userId/friend/:friendCode': {
+      type: 'ignored',
+      // type:'json',
+      userId: {
+        url: 'https://jsonplaceholder.typicode.com/users',
+        property: 'id',
+      },
+      friendCode: {
+        url: 'https://jsonplaceholder.typicode.com/users?userId=${userId}',
+        property: 'id',
+      },
+    },
     '/blog/:slug': {
       type: 'contentFolder',
       // postRenderers: ['toc'],

scully/renderPlugins/launchedBrowser.ts

@@ -1,24 +1,38 @@
 import {Browser, launch, LaunchOptions} from 'puppeteer';
-import {Observable} from 'rxjs';
-import {shareReplay, take} from 'rxjs/operators';
-import {log} from '../utils/log';
+import {from, Observable} from 'rxjs';
+import {shareReplay, switchMap, take} from 'rxjs/operators';
 import * as yargs from 'yargs';
-import {scullyConfig} from '../utils/config';
+import {loadConfig, scullyConfig} from '../utils/config';
+import {httpGetJson} from '../utils/httpGetJson';
+import {log} from '../utils/log';
+import {waitForIt} from './puppeteerRenderPlugin';
 
 const {showBrowser} = yargs
   .boolean('sb')
   .alias('sb', 'showBrowser')
   .describe('sb', 'Shows the puppeteer controlled browser').argv;
-
-/** use shareReplay so the browser will stay in memory during the lifetime of the program */
-const launched = obsBrowser().pipe(shareReplay({refCount: false, bufferSize: 1}));
+/**
+ * Returns an Observable with that will fire with the launched puppeteer in there.
+ */
+const launched = from(loadConfig).pipe(
+  /** give the system a bit of breathing room, and prevent race */
+  switchMap(() => from(waitForIt(500))),
+  switchMap(() => obsBrowser()),
+  /** use shareReplay so the browser will stay in memory during the lifetime of the program */
+  shareReplay({refCount: false, bufferSize: 1})
+);
 export const launchedBrowser: () => Promise<Browser> = () => launched.pipe(take(1)).toPromise();
 let browser: Browser;
 
+/**
+ * Function that creates an observable with the puppeteer browser inside
+ * @param options
+ */
 function obsBrowser(options: LaunchOptions = scullyConfig.puppeteerLaunchOptions || {}): Observable<Browser> {
   if (showBrowser) {
     options.headless = false;
   }
+  options.args = options.args || [];
   // options.args = ['--no-sandbox', '--disable-setuid-sandbox'];
 
   const {SCULLY_PUPPETEER_EXECUTABLE_PATH} = process.env;
@@ -56,8 +70,9 @@ function exitHandler(options, exitCode) {
     browser = undefined;
   }
   if (exitCode || exitCode === 0) {
-    // console.log(exitCode)
+    // console.log(exitCode);
   }
+  // TODO: kill the server here. (but only if started from scully, not when started from another process)
   if (options.exit) {
     process.exit();
   }

scully/renderPlugins/puppeteerRenderPlugin.ts

@@ -87,7 +87,7 @@ export const puppeteerRender = async (route: HandledRoute): Promise<string> => {
   return pageHtml;
 };
 
-function waitForIt(milliSeconds) {
+export function waitForIt(milliSeconds) {
   return new Promise(resolve => setTimeout(() => resolve(), milliSeconds));
 }
 

scully/utils/config.ts

@@ -54,6 +54,8 @@ const loadIt = async () => {
   await updateScullyConfig(compiledConfig);
   return scullyConfig;
 };
+
+/** export the config as a promise, so you can wait for it when you need config during 'boot' */
 export const loadConfig = loadIt();
 
 export const updateScullyConfig = async (config: Partial<ScullyConfig>) => {