feat(#675): prerender component

CHANGELOG.md

@@ -14,13 +14,14 @@
 
 ### Web Components: Update
 
+- drag-resize-rotate: v1.0.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/drag-resize-rotate/CHANGELOG.md))
 - highlight-code: v1.0.4 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/highlight-code/CHANGELOG.md))
 - inline-editor: v1.2.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/inline-editor/CHANGELOG.md))
 - youtube: v1.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/youtube/CHANGELOG.md))
 
 ### Web Components Templates
 
-- slide-split: v1.1.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/split/CHANGELOG.md))
+- slide-split: v1.1.3 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/split/CHANGELOG.md))
 
 ### Others
 

webcomponents/drag-resize-rotate/CHANGELOG.md

@@ -1,3 +1,11 @@
+<a name="1.0.1"></a>
+
+# 1.0.1 (2020-05-08)
+
+### Features
+
+- slot selector on load for Stenci prerendering
+
 <a name="1.0.0"></a>
 
 # 1.0.0 (2020-03-18)

webcomponents/drag-resize-rotate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/drag-resize-rotate",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A Web Component to drag, resize and rotate any element",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

webcomponents/drag-resize-rotate/src/components/deckdeckgo-drr.tsx

@@ -1,4 +1,4 @@
-import {Component, h, Host, Prop, State, Element, Event, EventEmitter} from '@stencil/core';
+import {Component, h, Host, Prop, State, Element, Event, EventEmitter, Build} from '@stencil/core';
 
 import {unifyEvent} from '@deckdeckgo/utils';
 
@@ -12,7 +12,7 @@ interface ResizeMatrix {
 @Component({
   tag: 'deckgo-drr',
   styleUrl: 'deckdeckgo-drr.scss',
-  shadow: true
+  shadow: true,
 })
 export class DeckdeckgoDragResizeRotate {
   @Element() el: HTMLElement;
@@ -160,7 +160,7 @@ export class DeckdeckgoDragResizeRotate {
   }
 
   private async displaySlot() {
-    const element: HTMLElement = this.el.querySelector(`:scope > *`);
+    const element: HTMLElement = this.el.querySelector(Build.isBrowser ? `:scope > *` : '> *');
 
     if (element && element.style.display === 'none') {
       element.style.display = '';
@@ -416,7 +416,7 @@ export class DeckdeckgoDragResizeRotate {
 
     return {
       x: this.dragBottom || this.dragTop ? 0 : currentX - this.startX,
-      y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY
+      y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY,
     };
   }
 
@@ -512,7 +512,7 @@ export class DeckdeckgoDragResizeRotate {
       a,
       b,
       c,
-      d
+      d,
     };
   }
 
@@ -527,7 +527,7 @@ export class DeckdeckgoDragResizeRotate {
           '--height': `${this.height}${heightUnit}`,
           '--top': `${this.top}${heightUnit}`,
           '--left': `${this.left}${widthUnit}`,
-          '--rotate': this.rotate ? `${this.rotate}deg` : `0deg`
+          '--rotate': this.rotate ? `${this.rotate}deg` : `0deg`,
         }}
         class={`${this.selected ? 'selected' : ''} ${this.drag !== 'none' ? 'draggable' : ''} ${this.drag !== 'none' && this.moving ? 'drag' : ''}`}>
         {this.renderEdgesAnchors()}
@@ -571,7 +571,7 @@ export class DeckdeckgoDragResizeRotate {
         onMouseDown={() => (this.dragTopStart = true)}
         onTouchStart={() => (this.dragTopStart = true)}>
         <div></div>
-      </div>
+      </div>,
     ];
   }
 
@@ -600,7 +600,7 @@ export class DeckdeckgoDragResizeRotate {
         class="border start"
         onClick={($event) => $event.stopPropagation()}
         onMouseDown={() => (this.dragStart = true)}
-        onTouchStart={() => (this.dragStart = true)}></div>
+        onTouchStart={() => (this.dragStart = true)}></div>,
     ];
   }
 

webcomponents/slides/split/CHANGELOG.md

@@ -1,3 +1,11 @@
+<a name="1.1.3"></a>
+
+# 1.1.3 (2020-05-08)
+
+### Features
+
+- slot selector on load for Stenci prerendering
+
 <a name="1.1.2"></a>
 
 # 1.1.2 (2020-05-07)

webcomponents/slides/split/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/slide-split",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "The Split template is a simple slide to display the content in two columns on a slide of your presentation",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

webcomponents/slides/split/src/components/slide/deckdeckgo-slide-split.tsx

@@ -1,4 +1,4 @@
-import {Component, Element, Event, EventEmitter, Method, Prop, h, Host} from '@stencil/core';
+import {Component, Element, Event, EventEmitter, Method, Prop, h, Host, Build} from '@stencil/core';
 
 import {
   DeckdeckgoSlide,
@@ -71,7 +71,7 @@ export class DeckdeckgoSlideSplit implements DeckdeckgoSlide {
       return;
     }
 
-    const element: HTMLElement = this.el.querySelector(':scope > deckgo-demo');
+    const element: HTMLElement = this.el.querySelector(Build.isBrowser ? ':scope > deckgo-demo' : '> deckgo-demo');
 
     if (element && typeof (element as any).updateIFrame === 'function') {
       await (element as any).updateIFrame();