1.0.74

fix(core): update
1.0.73
2022-04-14 16:56:04 +02:00 · 2022-04-14 16:56:04 +02:00 · 2022-03-24 18:30:55 +01:00 · 2022-03-24 18:30:54 +01:00 · 2022-03-24 17:08:26 +01:00 · 2022-03-24 17:08:25 +01:00
13 changed files with 941 additions and 1055 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -12,6 +12,9 @@ stages:
  - release
  - metadata
 before_script:
  - npm install -g @shipzone/npmci
 # ====================
 # security stage
 # ====================
@ -36,6 +39,7 @@ auditProductionDependencies:
    - npmci command npm audit --audit-level=high --only=prod --production
  tags:
    - docker
  allow_failure: true
 auditDevDependencies:
  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
@ -96,10 +100,9 @@ codequality:
  only:
    - tags
  script:
-    - npmci command npm install -g tslint typescript
+    - npmci command npm install -g typescript
    - npmci npm prepare
    - npmci npm install
    - npmci command "tslint -c tslint.json ./ts/**/*.ts"
  tags:
    - lossless
    - docker
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -2,28 +2,10 @@
  "version": "0.2.0",
  "configurations": [
    {
-      "name": "current file",
+      "command": "npm test",
-      "type": "node",
+      "name": "Run npm test",
      "request": "launch",
-      "args": [
+      "type": "node-terminal"
        "${relativeFile}"
      ],
      "runtimeArgs": ["-r", "@gitzone/tsrun"],
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "internalConsoleOptions": "openOnSessionStart"
    },
    {
      "name": "test.ts",
      "type": "node",
      "request": "launch",
      "args": [
        "test/test.ts"
      ],
      "runtimeArgs": ["-r", "@gitzone/tsrun"],
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "internalConsoleOptions": "openOnSessionStart"
    }
  ]
 }
--- a/html/index.html
+++ b/html/index.html
@ -17,7 +17,7 @@
      }
    </style>
-    <script src="./index.ts"></script>
+    <script type="module" src="/bundle.js"></script>
  </head>
  <body>
  </body>
--- a/html/index.ts
+++ b/html/index.ts
@ -1,10 +1,10 @@
 // dees tools
-import * as deesWccTools from '../ts_web';
+import * as deesWccTools from '../ts_web/index.js';
 import * as deesDomTools from '@designestate/dees-domtools';
 // elements and pages
-import * as elements from '../test/elements';
+import * as elements from '../test/elements/index.js';
-import * as pages from '../test/pages';
+import * as pages from '../test/pages/index.js';
 deesWccTools.setupWccTools(elements as any, pages);
 deesDomTools.elementBasic.setup();
--- a/npmextra.json
+++ b/npmextra.json
@ -5,7 +5,7 @@
      "githost": "gitlab.com",
      "gitscope": "designestate",
      "gitrepo": "dees-wcctools",
-      "shortDescription": "wcc tools for creating element catalogues",
+      "description": "wcc tools for creating element catalogues",
      "npmPackagename": "@designestate/dees-wcctools",
      "license": "MIT",
      "projectDomain": "design.estate"
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@designestate/dees-wcctools",
-  "version": "1.0.70",
+  "version": "1.0.74",
  "private": false,
  "description": "wcc tools for creating element catalogues",
  "main": "dist_ts_web/index.js",
@ -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.60",
+    "@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"
--- a/ts_web/elements/wcc-dashboard.ts
+++ b/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,31 +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') {
              return this.selectedItem();
            } else {
              console.error('The selected item looks strange:');
              console.log(this.selectedItem);
            }
          } else if (this.selectedType === 'element' && this.selectedItem) {
            // console.log(this.selectedItem);
            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>
    `;
  }
@ -159,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() {
--- a/ts_web/elements/wcc-frame.ts
+++ b/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;
  }
 }
--- a/ts_web/elements/wcc-properties.ts
+++ b/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">
--- a/ts_web/tsconfig.json
+++ b/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
  }
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,7 +1,9 @@
 {
  "compilerOptions": {
    "experimentalDecorators": true,
-    "target": "ES2017",
+    "useDefineForClassFields": false,
-    "moduleResolution": "Node"
+    "target": "ES2022",
    "module": "ES2022",
    "moduleResolution": "nodenext"
  }
 }
Author	SHA1	Message	Date
Philipp Kunz	ea0858fd27	1.0.74	2022-04-14 16:56:04 +02:00
Philipp Kunz	03c00919df	fix(core): update	2022-04-14 16:56:04 +02:00
Philipp Kunz	6917145b58	1.0.73	2022-03-24 18:30:55 +01:00
Philipp Kunz	2e2ad98ed8	fix(core): update	2022-03-24 18:30:54 +01:00
Philipp Kunz	68375a5e58	1.0.72	2022-03-24 17:08:26 +01:00
Philipp Kunz	5876225b39	fix(core): update	2022-03-24 17:08:25 +01:00
Philipp Kunz	342ac96429	1.0.71	2022-03-24 16:14:12 +01:00
Philipp Kunz	85a472fe1c	fix(core): update	2022-03-24 16:14:12 +01:00