1.0.34

.gitignore

@@ -15,8 +15,6 @@ node_modules/
 
 # builds
 dist/
-dist_web/
+dist_*/
-dist_serve/
-dist_ts_web/
 
 # custom

.gitlab-ci.yml

@@ -19,22 +19,35 @@ mirror:
   stage: security
   script:
     - npmci git mirror
+  only:
+    - tags
   tags:
     - lossless
     - docker
     - notpriv
 
-snyk:
+auditProductionDependencies:
-  image: registry.gitlab.com/hosttoday/ht-docker-node:snyk
+  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+  stage: security
+  script:
+    - npmci npm prepare
+    - npmci command npm install --production --ignore-scripts
+    - npmci command npm config set registry https://registry.npmjs.org
+    - npmci command npm audit --audit-level=high --only=prod --production
+  tags:
+    - docker
+
+auditDevDependencies:
+  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
   stage: security
   script:
     - npmci npm prepare
     - npmci command npm install --ignore-scripts
-    - npmci command snyk test
+    - npmci command npm config set registry https://registry.npmjs.org
+    - npmci command npm audit --audit-level=high --only=dev
   tags:
-    - lossless
     - docker
-    - notpriv
+  allow_failure: true
 
 # ====================
 # test stage
@@ -49,9 +62,7 @@ testStable:
     - npmci npm test
   coverage: /\d+.?\d+?\%\s*coverage/
   tags:
-    - lossless
     - docker
-    - priv
 
 testBuild:
   stage: test
@@ -62,9 +73,7 @@ testBuild:
     - npmci command npm run build
   coverage: /\d+.?\d+?\%\s*coverage/
   tags:
-    - lossless
     - docker
-    - notpriv
 
 release:
   stage: release
@@ -84,6 +93,8 @@ release:
 codequality:
   stage: metadata
   allow_failure: true
+  only:
+    - tags
   script:
     - npmci command npm install -g tslint typescript
     - npmci npm prepare

.vscode/settings.json

@@ -15,7 +15,7 @@
             "properties": {
               "projectType": {
                 "type": "string",
-                "enum": ["website", "element", "service", "npm"]
+                "enum": ["website", "element", "service", "npm", "wcc"]
               }
             }
           }

package.json

@@ -1,42 +1,46 @@
 {
   "name": "@pushrocks/smartssr",
-  "version": "1.0.9",
+  "version": "1.0.34",
   "private": false,
   "description": "a smart server side renderer supporting shadow dom",
-  "main": "dist/index.js",
+  "main": "dist_ts/index.js",
-  "typings": "dist/index.d.ts",
+  "typings": "dist_ts/index.d.ts",
   "author": "Lossless GmbH",
   "license": "MIT",
   "scripts": {
     "test": "(tstest test/ --web)",
     "build": "(tsbuild --web)",
-    "format": "(gitzone format)"
+    "serve": "tsrun scripts/serve.ts"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.24",
+    "@gitzone/tsbuild": "^2.1.26",
-    "@gitzone/tstest": "^1.0.43",
+    "@gitzone/tstest": "^1.0.54",
     "@pushrocks/smartserve": "^1.1.41",
-    "@pushrocks/tapbundle": "^3.2.9",
+    "@pushrocks/tapbundle": "^3.2.14",
-    "@types/node": "^14.0.27",
+    "@types/node": "^16.6.1",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.15.0"
   },
   "dependencies": {
-    "@pushrocks/smartdelay": "^2.0.10",
+    "@pushrocks/smartdelay": "^2.0.13",
-    "@pushrocks/smartfile": "^7.0.12",
+    "@pushrocks/smartfile": "^8.0.10",
-    "@pushrocks/smartpromise": "^3.0.6",
+    "@pushrocks/smartpromise": "^3.1.6",
-    "@pushrocks/smartpuppeteer": "^1.0.15",
+    "@pushrocks/smartpuppeteer": "^1.0.27",
-    "@pushrocks/smarttime": "^3.0.24"
+    "@pushrocks/smarttime": "^3.0.38"
   },
   "files": [
     "ts/**/*",
     "ts_web/**/*",
     "dist/**/*",
-    "dist_web/**/*",
+    "dist_*/**/*",
+    "dist_ts/**/*",
     "dist_ts_web/**/*",
     "assets/**/*",
     "cli.js",
     "npmextra.json",
     "readme.md"
+  ],
+  "browserslist": [
+    "last 1 chrome versions"
   ]
 }

readme.md

@@ -8,13 +8,20 @@ a smart server side renderer supporting shadow dom
 * [docs (typedoc)](https://pushrocks.gitlab.io/smartssr/)
 
 ## Status for master
-[![pipeline status](https://gitlab.com/pushrocks/smartssr/badges/master/pipeline.svg)](https://gitlab.com/pushrocks/smartssr/commits/master)
+
-[![coverage report](https://gitlab.com/pushrocks/smartssr/badges/master/coverage.svg)](https://gitlab.com/pushrocks/smartssr/commits/master)
+Status Category | Status Badge
-[![npm downloads per month](https://img.shields.io/npm/dm/@pushrocks/smartssr.svg)](https://www.npmjs.com/package/@pushrocks/smartssr)
+-- | --
-[![Known Vulnerabilities](https://snyk.io/test/npm/@pushrocks/smartssr/badge.svg)](https://snyk.io/test/npm/@pushrocks/smartssr)
+GitLab Pipelines | [![pipeline status](https://gitlab.com/pushrocks/smartssr/badges/master/pipeline.svg)](https://lossless.cloud)
-[![TypeScript](https://img.shields.io/badge/TypeScript->=%203.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
+GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/pushrocks/smartssr/badges/master/coverage.svg)](https://lossless.cloud)
-[![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
+npm | [![npm downloads per month](https://badgen.net/npm/dy/@pushrocks/smartssr)](https://lossless.cloud)
-[![JavaScript Style Guide](https://img.shields.io/badge/code%20style-prettier-ff69b4.svg)](https://prettier.io/)
+Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/pushrocks/smartssr)](https://lossless.cloud)
+TypeScript Support | [![TypeScript](https://badgen.net/badge/TypeScript/>=%203.x/blue?icon=typescript)](https://lossless.cloud)
+node Support | [![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
+Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](https://lossless.cloud)
+PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@pushrocks/smartssr)](https://lossless.cloud)
+PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@pushrocks/smartssr)](https://lossless.cloud)
+BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@pushrocks/smartssr)](https://lossless.cloud)
+Platform support | [![Supports Windows 10](https://badgen.net/badge/supports%20Windows%2010/yes/green?icon=windows)](https://lossless.cloud) [![Supports Mac OS X](https://badgen.net/badge/supports%20Mac%20OS%20X/yes/green?icon=apple)](https://lossless.cloud)
 
 ## Usage
 

test/test.ts

@@ -5,28 +5,21 @@ let testSSRInstance: smartssr.SmartSSR;
 
 tap.test('should create a valid smartssr instance', async () => {
   testSSRInstance = new smartssr.SmartSSR({
-    debug: true
+    debug: true,
   });
 });
 
-tap.test('should start the smartssr instance', async () => {
+tap.test('should render central.eu', async (tools) => {
-  await testSSRInstance.start();
-});
-
-tap.test('should render central.eu', async tools => {
-  await testSSRInstance.renderPage('https://central.eu/article/5e76873b9cf69b7bf6bc78bc/Introducing%3A%20central.eu');
-});
-
-tap.skip.test('should render lossless.com', async () => {
   await testSSRInstance.renderPage('https://lossless.com');
 });
 
-tap.skip.test('should render https://lossless.gmbh', async () => {
+tap.test('should render lossless.com', async () => {
-  const renderedPage = await testSSRInstance.renderPage('https://lossless.gmbh');
+  await testSSRInstance.renderPage('https://lossless.com');
 });
 
-tap.test('should stop the smartssr instance', async () => {
+tap.test('should render https://lossless.gmbh', async () => {
-  await testSSRInstance.stop();
+  const renderedPage = await testSSRInstance.renderPage('https://lossless.gmbh');
+  console.log(renderedPage);
 });
 
 tap.start();

ts/smartssr.classes.smartssr.ts

@@ -11,79 +11,87 @@ export interface ISmartSSROptions {
  *
  */
 export class SmartSSR {
-  public browser: plugins.smartpuppeteer.puppeteer.Browser;
   public options: ISmartSSROptions;
 
   constructor(optionsArg?: ISmartSSROptions) {
     this.options = {
-      ... {
+      ...{
-        debug: false
+        debug: false,
       },
-      ...optionsArg
+      ...optionsArg,
     };
   }
 
-  public async start() {
-    this.browser = await plugins.smartpuppeteer.getEnvAwareBrowserInstance();
-  }
-  public async stop() {
-    if (this.browser) {
-      await plugins.smartdelay.delayFor(3000);
-      await this.browser.close();
-      this.browser = null;
-    } else {
-      console.log('browser was not in started mode');
-    }
-  }
-
   public async renderPage(urlArg: string) {
     const overallTimeMeasurement = new plugins.smarttime.HrtMeasurement();
     overallTimeMeasurement.start();
     const resultDeferred = plugins.smartpromise.defer<string>();
-    const context = await this.browser.createIncognitoBrowserContext();
+    const browser = new plugins.smartpuppeteer.IncognitoBrowser();
-    const page = await context.newPage();
+    const renderTimeMeasurement = new plugins.smarttime.HrtMeasurement();
-    page.on('console', msg => {
+    let renderedPageString: string;
-      console.log(`${urlArg}: ${msg.text()}`);
+    let screenshotBuffer: Buffer;
-    });
+    await browser.start();
+    try {
+      const context = await browser.getNewIncognitoContext();
+      const page = await context.newPage();
+
+      // lets protect against left open tabs
+      plugins.smartdelay.delayFor(30000).then(async () => {
+        try {
+          await browser.stop();
+        } catch {}
+      });
+
+      page.on('console', (msg) => {
+        console.log(`${urlArg}: ${msg.text()}`);
+      });
+
+      renderTimeMeasurement.start();
+      await page.goto(urlArg, {
+        waitUntil: 'networkidle2',
+        timeout: 30000,
+      });
 
-    page.on('load', async (...args) => {
-      await plugins.smartdelay.delayFor(5000);
-      let screenshotBuffer: Buffer;
-      
       if (this.options.debug) {
         screenshotBuffer = await page.screenshot({
-          encoding: 'binary'
+          encoding: 'binary',
-        });
+        }) as Buffer;
       }
 
       await page.$eval('body', serializeFunction);
       const pageContent = await page.content();
-      const renderedPageString = pageContent;
+      renderedPageString = pageContent;
       resultDeferred.resolve(renderedPageString);
-      
+      renderTimeMeasurement.stop();
-      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);
-      }
 
-    });
+      // lets clean up async
-
+      await page.close();
-    const renderTimeMeasurement = new plugins.smarttime.HrtMeasurement();
+      await context.close();
-    renderTimeMeasurement.start();
+    } catch (e) {
-    await page.goto(urlArg);
+      console.log(e);
-    const result = await resultDeferred.promise;
+      await browser.stop();
-    renderTimeMeasurement.stop();
+      return;
-
+    }
-    // lets clean up async
+    await browser.stop();
-    context.close();
 
     overallTimeMeasurement.stop();
-    console.log(`Overall it took ${overallTimeMeasurement.milliSeconds} milliseconds to render ${urlArg}`);
+    console.log(
-    console.log(`The rendering alone took ${renderTimeMeasurement.milliSeconds} milliseconds for ${urlArg}`)
+      `Overall it took ${overallTimeMeasurement.milliSeconds} milliseconds to render ${urlArg}`
-    return result;
+    );
+    console.log(
+      `The rendering alone took ${renderTimeMeasurement.milliSeconds} milliseconds for ${urlArg}`
+    );
+
+    // debug
+    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);
+    }
+
+    return resultDeferred.promise;
   }
 }

ts/smartssr.function.serialize.ts

@@ -1,5 +1,5 @@
 declare var document: Document;
-export function serializeFunction(rootNode) {
+export function serializeFunction(rootNode: Node) {
   const uuidv4 = () => {
     return 'unixxxxxxxxxxx'.replace(/[xy]/g, (c) => {
       const r = (Math.random() * 16) | 0;
@@ -26,7 +26,7 @@ export function serializeFunction(rootNode) {
   };
   const loopProtection: any[] = [];
 
-  function serializeNode(nodeArg: HTMLElement, logThis = false) {
+  function serializeNode(nodeArg: HTMLElement | any, logThis = false) {
     if (loopProtection.includes(nodeArg)) {
       return;
     }
@@ -34,37 +34,60 @@ export function serializeFunction(rootNode) {
     // console.log(nodeArg.nodeName);
     if (nodeArg.shadowRoot) {
       nodeArg.setAttribute('smartssr', 'yes');
-      
+
       // lets handle the current node
       const nodeUUID = uuidv4();
 
       nodeArg.classList.add(nodeUUID);
+
+      // find all slots
       const slots = nodeArg.shadowRoot.querySelectorAll('slot');
 
       // handle slot element
-      slots.forEach((slot) => {
+      const slotsForMove: HTMLSlotElement[] = [];
-        nodeArg.childNodes.forEach((lightNode) => slot.parentNode.insertBefore(lightNode, slot));
+      slots.forEach((slot: any) => {
-        slot.parentNode.removeChild(slot);
+        slotsForMove.push(slot);
       });
 
+      for (const slot of slotsForMove) {
+        const slottedLightNodesForMove: any[] = [];
+        slot.assignedNodes().forEach((lightNode) => slottedLightNodesForMove.push(lightNode));
+        slottedLightNodesForMove.forEach((lightNode) =>
+          slot.parentNode.insertBefore(lightNode, slot)
+        );
+      }
+
       // lets modify the css
       const childNodes = nodeArg.shadowRoot.childNodes;
       // tslint:disable-next-line: prefer-for-of
       const noteForAppending: HTMLElement[] = [];
-      childNodes.forEach((childNode) => {
+
+      // lets care about static css first
+      if (
+        (nodeArg.constructor as any).styles &&
+        (nodeArg.constructor as any).styles instanceof Array
+      ) {
+        for (const objectArg of (nodeArg.constructor as any).styles) {
+          const styleTag = document.createElement('style');
+          styleTag.textContent = prependCss(nodeUUID, objectArg.cssText);
+          noteForAppending.push(styleTag);
+        }
+      }
+
+      childNodes.forEach((childNode: 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);
         }
       });
-      noteForAppending.forEach(childNode => {
+      while (nodeArg.firstChild) {
+        nodeArg.removeChild(nodeArg.firstChild);
+      }
+      noteForAppending.forEach((childNode) => {
         nodeArg.append(childNode);
       });
     } else {