fix(core): update

package.json

@@ -14,16 +14,16 @@
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@designestate/dees-domtools": "^2.0.1",
+    "@designestate/dees-domtools": "^2.0.6",
-    "@designestate/dees-element": "^2.0.4",
+    "@designestate/dees-element": "^2.0.6",
-    "@gitzone/tsrun": "^1.2.31",
+    "@gitzone/tsrun": "^1.2.32",
     "@pushrocks/smartdelay": "^2.0.13",
-    "@pushrocks/smartexpress": "^4.0.0"
+    "@pushrocks/smartexpress": "^4.0.4"
   },
   "devDependencies": {
     "@gitzone/tsbuild": "^2.1.61",
-    "@gitzone/tsbundle": "^1.0.101",
+    "@gitzone/tsbundle": "^1.0.102",
-    "@gitzone/tswatch": "^1.0.73",
+    "@gitzone/tswatch": "^1.0.76",
     "@pushrocks/projectinfo": "^4.0.5",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.17.0"

ts_web/elements/wcc-dashboard.ts

@@ -1,4 +1,4 @@
-import { DeesElement, property, html, customElement, TemplateResult, queryAsync } from '@designestate/dees-element';
+import { DeesElement, property, html, customElement, TemplateResult, queryAsync, render, domtools } from '@designestate/dees-element';
 
 import * as plugins from '../wcctools.plugins.js';
 
@@ -98,32 +98,6 @@ export class WccDashboard extends DeesElement {
         }}
       ></wcc-properties>
       <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
-        ${(() => {
-          if (this.selectedType === 'page' && this.selectedItem) {
-            if (typeof this.selectedItem === 'function') {
-              console.log('slotting page.');
-              return this.selectedItem();
-            } else {
-              console.error('The selected item looks strange:');
-              console.log(this.selectedItem);
-            }
-          } else if (this.selectedType === 'element' && this.selectedItem) {
-            console.log('slotting element.');
-            const anonItem: any = this.selectedItem;
-            if (!anonItem.demo) {
-              this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
-              return;
-            }
-            if (!(typeof anonItem.demo === 'function')) {
-              this.setWarning(
-                `component ${anonItem.name} has demo property, but it is not of type function`
-              );
-              return;
-            }
-            this.setWarning(null);
-            return html`${anonItem.demo()}`;
-          }
-        })()}
       </wcc-frame>
     `;
   }
@@ -160,24 +134,39 @@ export class WccDashboard extends DeesElement {
     );
   }
 
-  private updating = false;
   public async updated() {
-    if (this.updating) {
-      return;
-    }
     this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
     await this.domtools.router._handleRouteState();
-    this.updating = true;
     const storeElement = this.selectedItem;
-    setTimeout(async () => {
+    const wccFrame: WccFrame = this.shadowRoot.querySelector('wcc-frame');
-      this.selectedItem = null;
+
-      setTimeout(async () => {
+    if (this.selectedType === 'page' && this.selectedItem) {
-        this.selectedItem = storeElement;
+      if (typeof this.selectedItem === 'function') {
-        setTimeout(() => {
+        console.log('slotting page.');
-          this.updating = false;
+        const viewport = await wccFrame.getViewportElement();
-        }, 0);
+        render(this.selectedItem(), viewport);
-      });
+        console.log('rendered page.');
-    }, 0);
+      } else {
+        console.error('The selected item looks strange:');
+        console.log(this.selectedItem);
+      }
+    } else if (this.selectedType === 'element' && this.selectedItem) {
+      console.log('slotting element.');
+      const anonItem: any = this.selectedItem;
+      if (!anonItem.demo) {
+        this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
+        return;
+      }
+      if (!(typeof anonItem.demo === 'function')) {
+        this.setWarning(
+          `component ${anonItem.name} has demo property, but it is not of type function`
+        );
+        return;
+      }
+      this.setWarning(null);
+      const viewport = await wccFrame.getViewportElement();
+      render(anonItem.demo(), viewport);;
+    }
   }
 
   public buildUrl() {

ts_web/elements/wcc-frame.ts

@@ -1,25 +1,45 @@
-import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
+import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element';
 
 import * as domtools from '@designestate/dees-domtools';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'wcc-frame': WccFrame;
+  }
+}
+
 @customElement('wcc-frame')
 export class WccFrame extends DeesElement {
   @property()
   public viewport: string;
 
+  public static styles = [
+    css`
+      :host {
+        border: 10px solid #ffaeaf;
+        position: absolute;
+        background: ${cssManager.bdTheme('#333', '#000')};
+        left: 200px;
+        right: 0px;
+        top: 0px;
+        bottom: 100px;
+        overflow-y: auto;
+        overflow-x: auto;
+      }
+
+      .viewport {
+        container-type: inline-size;
+        container-name: wccToolsViewport;
+        position: relative;
+        min-height: 100%;
+      }
+    `,
+  ]
+
   public render(): TemplateResult {
     return html`
       <style>
         :host {
-          border: 10px solid #ffaeaf;
-          position: absolute;
-          background: ${this.goBright ? '#333': '#000'};
-          left: 200px;
-          right: 0px;
-          top: 0px;
-          bottom: 100px;
-          overflow-y: auto;
-          overflow-x: auto;
           ${(() => {
           switch (this.viewport) {
             case 'desktop':
@@ -45,19 +65,17 @@ export class WccFrame extends DeesElement {
                   }px;
                 `;
           }
-        })()}
+          })()}
         }
 
         .viewport {
-          container-type: inline-size;
-          container-name: wccToolsViewport;
-          position: relative;
           ${this.viewport !== 'desktop'
-          ? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
+            ? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
-          : html``}
+            : html``
-          min-height: 100%;
+          }
           background:
-            ${this.goBright ? `
+          ${
+            this.goBright ? `
               radial-gradient(#CCCCCC 3px, transparent 4px),
               radial-gradient(#CCCCCC 3px, transparent 4px),
               linear-gradient(#eeeeee 4px, transparent 0),
@@ -75,11 +93,12 @@ export class WccFrame extends DeesElement {
               #222222;
               background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
               background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
-            `}
+            `
+          }
         }
       </style>
       <div class="viewport">
-        <slot></slot>
+        
       </div>
     `;
   }
@@ -89,4 +108,8 @@ export class WccFrame extends DeesElement {
     const slottedContent = this.children;
     console.log(slottedContent);
   }
+
+  public async getViewportElement(): Promise<HTMLElement> {
+    return this.shadowRoot.querySelector('.viewport') as HTMLElement;
+  }
 }

ts_web/elements/wcc-properties.ts

@@ -243,7 +243,7 @@ export class WccProperties extends DeesElement {
       });
       return enumValues;
     };
-    const determinePropertyType = (propertyArg: any): TPropertyType => {
+    const determinePropertyType = async (propertyArg: any): Promise<TPropertyType> => {
       const typeName: any | undefined = propertyArg.type.name;
       if (typeName) {
         return typeName;
@@ -265,7 +265,7 @@ export class WccProperties extends DeesElement {
       console.log(anonItem.elementProperties);
       const wccFrame = await this.dashboardRef.wccFrame;
       let firstFoundInstantiatedElement: HTMLElement;
-      for (const element of Array.from(wccFrame.children)) {
+      for (const element of Array.from((await wccFrame.getViewportElement()).children)) {
         if (element instanceof (this.selectedItem as any)) {
           firstFoundInstantiatedElement = element as HTMLElement;
           break;
@@ -287,7 +287,7 @@ export class WccProperties extends DeesElement {
           continue;
         }
         const property = classProperties.get(key);
-        const propertyTypeString = determinePropertyType(property);
+        const propertyTypeString = await determinePropertyType(property);
         propertyArray.push(
           html`
             <div class="property">

ts_web/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2017",
-    "module": "es2015",
-    "moduleResolution": "node",
-    "lib": ["es2017", "dom"],
-    "declaration": true,
-    "inlineSources": true,
-    "inlineSourceMap": true,
-    "noUnusedLocals": true,
-    "noFallthroughCasesInSwitch": true,
-    "outDir": "dist/",
-    "skipLibCheck": true,
-    "experimentalDecorators": true
-  }
-}

tsconfig.json

@@ -1,7 +1,9 @@
 {
   "compilerOptions": {
     "experimentalDecorators": true,
-    "target": "ES2017",
+    "useDefineForClassFields": false,
-    "moduleResolution": "Node"
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "nodenext"
   }
 }