1.0.8

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushrocks/smartssr",
-  "version": "1.0.3",
+  "version": "1.0.8",
   "private": false,
   "description": "a smart server side renderer supporting shadow dom",
   "main": "dist/index.js",
@@ -13,18 +13,20 @@
     "format": "(gitzone format)"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.0.22",
-    "@gitzone/tstest": "^1.0.15",
-    "@pushrocks/tapbundle": "^3.0.7",
-    "@types/node": "^10.11.7",
-    "tslint": "^5.11.0",
+    "@gitzone/tsbuild": "^2.1.24",
+    "@gitzone/tstest": "^1.0.43",
+    "@pushrocks/smartserve": "^1.1.41",
+    "@pushrocks/tapbundle": "^3.2.9",
+    "@types/node": "^14.0.27",
+    "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.15.0"
   },
   "dependencies": {
-    "@pushrocks/smartdelay": "^2.0.6",
-    "@pushrocks/smartfile": "^7.0.8",
+    "@pushrocks/smartdelay": "^2.0.10",
+    "@pushrocks/smartfile": "^7.0.12",
     "@pushrocks/smartpromise": "^3.0.6",
-    "@pushrocks/smartpuppeteer": "^1.0.14"
+    "@pushrocks/smartpuppeteer": "^1.0.15",
+    "@pushrocks/smarttime": "^3.0.24"
   },
   "files": [
     "ts/**/*",

scripts/serve.ts

@@ -0,0 +1,9 @@
+import * as smartserve from '@pushrocks/smartserve';
+import * as path from 'path';
+
+const smartserveInstance = new smartserve.SmartServe({
+  injectReload: true,
+  serveDir: path.join(__dirname, '../.nogit/')
+});
+
+smartserveInstance.start();

test/test.ts

@@ -4,7 +4,9 @@ import * as smartssr from '../ts/index';
 let testSSRInstance: smartssr.SmartSSR;
 
 tap.test('should create a valid smartssr instance', async () => {
-  testSSRInstance = new smartssr.SmartSSR();
+  testSSRInstance = new smartssr.SmartSSR({
+    debug: true
+  });
 });
 
 tap.test('should start the smartssr instance', async () => {
@@ -12,18 +14,18 @@ tap.test('should start the smartssr instance', async () => {
 });
 
 tap.test('should render central.eu', async tools => {
-  await testSSRInstance.renderPage('https://central.eu');
+  await testSSRInstance.renderPage('https://central.eu/article/5e76873b9cf69b7bf6bc78bc/Introducing%3A%20central.eu');
 });
 
-tap.test('should render lossless.com', async () => {
+tap.skip.test('should render lossless.com', async () => {
   await testSSRInstance.renderPage('https://lossless.com');
 });
 
-tap.test('should render https://lossless.gmbh', async () => {
-  await testSSRInstance.renderPage('https://lossless.gmbh');
+tap.skip.test('should render https://lossless.gmbh', async () => {
+  const renderedPage = await testSSRInstance.renderPage('https://lossless.gmbh');
 });
 
-tap.test('should stop the smartssr instacne', async () => {
+tap.test('should stop the smartssr instance', async () => {
   await testSSRInstance.stop();
 });
 

ts/smartssr.classes.smartssr.ts

@@ -3,11 +3,26 @@ import * as paths from './smartssr.paths';
 
 import { serializeFunction } from './smartssr.function.serialize';
 
+export interface ISmartSSROptions {
+  debug: boolean;
+}
+
 /**
  *
  */
 export class SmartSSR {
   public browser: plugins.smartpuppeteer.puppeteer.Browser;
+  public options: ISmartSSROptions;
+
+  constructor(optionsArg?: ISmartSSROptions) {
+    this.options = {
+      ... {
+        debug: false
+      },
+      ...optionsArg
+    };
+  }
+
   public async start() {
     this.browser = await plugins.smartpuppeteer.getEnvAwareBrowserInstance();
   }
@@ -22,25 +37,53 @@ export class SmartSSR {
   }
 
   public async renderPage(urlArg: string) {
+    const overallTimeMeasurement = new plugins.smarttime.HrtMeasurement();
+    overallTimeMeasurement.start();
     const resultDeferred = plugins.smartpromise.defer<string>();
-    const page = await this.browser.newPage();
-    page.on('console', (event: any) => console.log(event._text));
+    const context = await this.browser.createIncognitoBrowserContext();
+    const page = await context.newPage();
+    page.on('console', msg => {
+      console.log(`${urlArg}: ${msg.text()}`);
+    });
 
     page.on('load', async (...args) => {
-      // await plugins.smartdelay.delayFor(2000);
+      await plugins.smartdelay.delayFor(5000);
+      let screenshotBuffer: Buffer;
+      
+      if (this.options.debug) {
+        screenshotBuffer = await page.screenshot({
+          encoding: 'binary'
+        });
+      }
+
       await page.$eval('body', serializeFunction);
       const pageContent = await page.content();
       const renderedPageString = pageContent;
       resultDeferred.resolve(renderedPageString);
-      plugins.smartfile.memory.toFsSync(
-        renderedPageString,
-        plugins.path.join(paths.noGitDir, 'test.html')
-      );
+      
+      if (this.options.debug) {
+        plugins.smartfile.memory.toFsSync(
+          renderedPageString,
+          plugins.path.join(paths.noGitDir, 'test.html')
+        );
+        const fs = await import('fs');
+        fs.writeFileSync(plugins.path.join(paths.noGitDir, 'test.png'), screenshotBuffer);
+      }
+
     });
 
+    const renderTimeMeasurement = new plugins.smarttime.HrtMeasurement();
+    renderTimeMeasurement.start();
     await page.goto(urlArg);
     const result = await resultDeferred.promise;
-    page.close();
+    renderTimeMeasurement.stop();
+
+    // lets clean up async
+    context.close();
+
+    overallTimeMeasurement.stop();
+    console.log(`Overall it took ${overallTimeMeasurement.milliSeconds} milliseconds to render ${urlArg}`);
+    console.log(`The rendering alone took ${renderTimeMeasurement.milliSeconds} milliseconds for ${urlArg}`)
     return result;
   }
 }

ts/smartssr.function.serialize.ts

@@ -1,7 +1,7 @@
 declare var document: Document;
 export function serializeFunction(rootNode) {
   const uuidv4 = () => {
-    return 'unixxxxxxxxxxx'.replace(/[xy]/g, c => {
+    return 'unixxxxxxxxxxx'.replace(/[xy]/g, (c) => {
       const r = (Math.random() * 16) | 0;
       const v = c === 'x' ? r : (r & 0x3) | 0x8;
       return v.toString(16);
@@ -24,55 +24,57 @@ export function serializeFunction(rootNode) {
     styleTemplate = styleTemplate.replace(/}[ \t\n]+div/g, `}\n\n.${uuidID} div`);
     return styleTemplate;
   };
+  const loopProtection: any[] = [];
 
-  function serializeNode(node: HTMLElement) {
-    if (!node.tagName.includes('-')) {
+  function serializeNode(nodeArg: HTMLElement, logThis = false) {
+    if (loopProtection.includes(nodeArg)) {
       return;
     }
-    if (node.hasAttribute('smartssr')) {
-      console.log(`${node.tagName} is already serialized`);
-      return;
-    }
-    node.setAttribute('smartssr', 'yes');
-    // lets handle the current node
-    const nodeUUID = uuidv4();
+    loopProtection.push(nodeArg);
+    // console.log(nodeArg.nodeName);
+    if (nodeArg.shadowRoot) {
+      nodeArg.setAttribute('smartssr', 'yes');
+      
+      // lets handle the current node
+      const nodeUUID = uuidv4();
 
-    try {
-      node.classList.add(nodeUUID);
+      nodeArg.classList.add(nodeUUID);
+      const slots = nodeArg.shadowRoot.querySelectorAll('slot');
+
+      // handle slot element
+      slots.forEach((slot) => {
+        nodeArg.childNodes.forEach((lightNode) => slot.parentNode.insertBefore(lightNode, slot));
+        slot.parentNode.removeChild(slot);
+      });
 
       // lets modify the css
-      const children: HTMLElement[] = node.shadowRoot.children as any;
-      for (const childElement of children) {
-        if (childElement.tagName === 'STYLE') {
-          childElement.textContent = prependCss(nodeUUID, childElement.textContent);
+      const childNodes = nodeArg.shadowRoot.childNodes;
+      // tslint:disable-next-line: prefer-for-of
+      const noteForAppending: HTMLElement[] = [];
+      childNodes.forEach((childNode) => {
+        if (childNode instanceof HTMLElement) {
+          if (childNode.tagName === 'STYLE') {
+            childNode.textContent = prependCss(nodeUUID, childNode.textContent);
+          } else {
+            if (nodeArg.tagName?.includes('ARTICLEGRID')) {
+              console.log('hello ' + childNode.id);
+            }
+            serializeNode(childNode, logThis);
+          }
+          noteForAppending.push(childNode);
         }
-        serializeFunction(childElement);
-      }
-
-      const templateDom = document.createElement('template');
-      templateDom.innerHTML = node.innerHTML;
-
-      const slot = node.shadowRoot.querySelector('slot');
-      node.childNodes.forEach(lightNode => slot.parentNode.insertBefore(lightNode, slot));
-      // remove slot element
-      if (slot) {
-        slot.parentNode.removeChild(slot);
-      }
-
-      // move shadowDom into root node
-      node.shadowRoot.childNodes.forEach(shadowNode => node.appendChild(shadowNode));
-
-      // add original lightDom as template
-      if (templateDom.innerHTML !== '') {
-        node.appendChild(templateDom);
-      }
-    } catch (err) {
-      console.log('error:', err);
-      console.log(node.tagName);
+      });
+      noteForAppending.forEach(childNode => {
+        nodeArg.append(childNode);
+      });
+    } else {
+      nodeArg.childNodes.forEach((nodeArg2: any) => {
+        serializeNode(nodeArg2, logThis);
+      });
     }
   }
 
-  [...rootNode.querySelectorAll('*')]
-    .filter(element => /-/.test(element.nodeName))
-    .forEach(serializeNode);
+  rootNode.childNodes.forEach((nodeArg) => {
+    serializeNode(nodeArg);
+  });
 }

ts/smartssr.paths.ts

@@ -2,3 +2,4 @@ import * as plugins from './smartssr.plugins';
 
 export const packageDir = plugins.path.join(__dirname, '../');
 export const noGitDir = plugins.path.join(packageDir, './.nogit');
+plugins.smartfile.fs.ensureDirSync(noGitDir);

ts/smartssr.plugins.ts

@@ -1,13 +1,13 @@
 // node native
 import * as path from 'path';
-import * as fs from 'fs';
 
-export { path, fs };
+export { path };
 
 // @pushrocks scope
 import * as smartdelay from '@pushrocks/smartdelay';
 import * as smartfile from '@pushrocks/smartfile';
 import * as smartpuppeteer from '@pushrocks/smartpuppeteer';
 import * as smartpromise from '@pushrocks/smartpromise';
+import * as smarttime from '@pushrocks/smarttime';
 
-export { smartdelay, smartfile, smartpuppeteer, smartpromise };
+export { smartdelay, smartfile, smartpuppeteer, smartpromise, smarttime };