1.0.70

fix(core): update
1.0.69
2022-05-20 16:26:03 +02:00 · 2022-05-20 16:26:03 +02:00 · 2022-05-19 13:51:12 +02:00 · 2022-05-19 13:51:11 +02:00 · 2022-05-18 03:19:55 +02:00 · 2022-05-18 03:19:55 +02:00
13 changed files with 5256 additions and 10307 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -22,5 +22,6 @@
        }
      }
    }
-  ]
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
--- a/html/index.html
+++ b/html/index.html
@ -1,6 +1,7 @@
-<!--gitzone element-->
+<!--gitzone default-->
 <!-- made by Lossless GmbH -->
 <!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
+<!DOCTYPE html>
 <html lang="en">
  <head>
    <!--Lets set some basic meta tags-->
@ -9,16 +10,119 @@
      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
    />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="theme-color" content="#000000">

+    <!--Lets make sure we recognize this as an PWA-->
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="icon" type="image/png" href="/assetbroker/manifest/favicon.png">
+
+    <!--Lets load standard fonts-->
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+    <link
+      crossorigin="anonymous"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+    <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@100;200;300;400;500;600;700;800&family=Roboto+Slab:wght@100;200;300;400;500;600;700;900&family=Roboto:wght@100;300;400;500;700;900&family=Roboto+Mono:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Just+Me+Again+Down+Here&display=swap" rel="stylesheet">
+
+
+    <!--Lets avoid a rescaling flicker due to default body margins-->
    <style>
      body {
+        background: #000;
        margin: 0px;
-        background: #222222;
      }
    </style>
-
-    <script type="module" src="./index.ts"></script>
+    <script>
+      projectVersion = '';
+    </script>
  </head>
  <body>
+    <noscript>
+      <style>
+        body {
+          background: #303f9f;
+          font-family: 'Roboto', sans-serif;
+          color: #ffffff;
+        }
+
+        a {
+          color: #ffffff;
+          text-decoration: none;
+        }
+
+        .logo {
+          margin-top: 100px;
+          text-align: center;
+        }
+
+        img {
+          width: 130px;
+        }
+
+        .container {
+          width: 600px;
+          margin: auto;
+          margin-top: 20px;
+          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+          overflow: hidden;
+          border-radius: 3px;
+          background: #4357d9;
+        }
+        .contentHeader {
+          padding: 20px;
+          text-align: center;
+          font-size: 25px;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .content {
+          padding: 20px;
+        }
+        .footer {
+          padding: 10px;
+          text-align: center;
+        }
+      </style>
+      <div class="logo">
+        <img src="https://assetbroker.lossless.one/brandfiles/lossless/svg-minimal-bright.svg">
+      </div>
+      <div class="container">
+        
+        <div class="contentHeader">
+          We need JavaScript to run properly!
+        </div>
+        <div class="content">
+          This site is being built using lit-element (made by Google). This technology works with
+          JavaScript. Subsequently this website does not work as intended by Lossless GmbH without
+          JavaScript.
+        </div>
+      </div>
+      <div class="footer">
+        <a href="https://lossless.gmbh">Legal Info</a> |
+        <a href="https://lossless.gmbh/privacy">Privacy Policy</a>
+      </div>
+    </noscript>
+    <script type="text/javascript" async defer>
+      window.revenueEnabled = true;
+      const runRevenueCheck = async () => {
+        var e = document.createElement('div');
+        e.id = '476kjuhzgtr764';
+        e.style.display = 'none';
+        document.body.appendChild(e);
+        if (document.getElementById('476kjuhzgtr764')) {
+          window.revenueEnabled = true;
+        } else {
+          window.revenueEnabled = false;
+        }
+        console.log(`revenue enabled: ${window.revenueEnabled}`);
+      };
+
+      runRevenueCheck();
+    </script>
  </body>
+  <script defer type="module" src="/bundle.js"></script>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,39 +1,37 @@
 {
  "name": "@designestate/dees-editor",
-  "version": "1.0.66",
+  "version": "1.0.70",
  "private": false,
  "description": "an advanced editor for markdown documents based on monaco.",
  "main": "dist_ts_web/index.js",
  "typings": "dist_ts_web/index.d.ts",
  "type": "module",
  "scripts": {
-    "test": "npm run build",
+    "test": "tstest test/",
    "build": "tsbuild element --allowimplicitany --skiplibcheck && tsbundle element --allowimplicitany",
    "watch": "tswatch element"
  },
  "author": "Lossless GmbH",
  "license": "UNLICENSED",
  "dependencies": {
-    "@designestate/dees-domtools": "^1.0.41",
-    "@designestate/dees-element": "^1.0.26",
-    "@designestate/dees-wcctools": "^1.0.37",
-    "@gitzone/tsrun": "^1.2.31",
-    "@losslessone_private/loint-pubapi": "^1.0.9",
-    "@pushrocks/smartexpress": "^3.0.76",
+    "@designestate/dees-domtools": "^2.0.22",
+    "@designestate/dees-element": "^2.0.15",
+    "@designestate/dees-wcctools": "^1.0.74",
+    "@gitzone/tsrun": "^1.2.32",
+    "@losslessone_private/loint-pubapi": "^1.0.13",
+    "@pushrocks/smartexpress": "^4.0.4",
+    "@pushrocks/smartmarkdown": "^2.0.14",
    "monaco-editor": "^0.33.0",
-    "typescript": "^4.4.3",
    "xterm": "^4.18.0",
    "xterm-addon-fit": "^0.5.0"
  },
  "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.56",
-    "@gitzone/tsbundle": "^1.0.95",
-    "@gitzone/tswatch": "^1.0.62",
-    "@pushrocks/projectinfo": "^4.0.5",
-    "buffer": "^6.0.3",
-    "process": "^0.11.10",
-    "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.17.0"
+    "@gitzone/tsbuild": "^2.1.61",
+    "@gitzone/tsbundle": "^2.0.3",
+    "@gitzone/tstest": "^1.0.71",
+    "@gitzone/tswatch": "^2.0.1",
+    "@pushrocks/projectinfo": "^5.0.1",
+    "@pushrocks/tapbundle": "^5.0.3"
  },
  "files": [
    "ts/**/*",
--- a/test/test.browser.ts
+++ b/test/test.browser.ts
@ -0,0 +1,15 @@
+import { expect, expectAsync, tap, webhelpers } from '@pushrocks/tapbundle';
+
+import * as deesEditorLib from '../ts_web/index.js';
+
+tap.test('test dees-editor', async () => {
+  const deesEditor = new deesEditorLib.DeesEditor;
+  expect(deesEditor).toBeInstanceOf(deesEditorLib.DeesEditor)
+});
+
+tap.test('test dees-terminal', async () => {
+  const deesTerminal = await webhelpers.fixture(`<dees-terminal></dees-terminal>`);
+  expect(deesTerminal).toBeInstanceOf(deesEditorLib.DeesTerminal);
+})
+
+tap.start()
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@ -0,0 +1,8 @@
+/**
+ * autocreated commitinfo by @pushrocks/commitinfo
+ */
+export const commitinfo = {
+  name: '@designestate/dees-editor',
+  version: '1.0.70',
+  description: 'an advanced editor for markdown documents based on monaco.'
+}
--- a/ts_web/elements/dees-editor-ace.ts
+++ b/ts_web/elements/dees-editor-ace.ts
@ -1,82 +0,0 @@
-import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element';
-import * as domtools from '@designestate/dees-domtools';
-
-const deferred = domtools.plugins.smartpromise.defer();
-let aceDeferred: typeof deferred;
-
-import type * as monaco from 'monaco-editor';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'dees-editor-ace': DeesEditorAce;
-  }
-}
-
-@customElement('dees-editor-ace')
-export class DeesEditorAce extends DeesElement {
-  public static demo = () => html`
-    <dees-editor-ace></dees-editor-ace>
-  `;
-
-  constructor() {
-    super();
-    domtools.DomTools.setupDomTools();
-  }
-
-  public static styles = [
-    domtools.elementBasic.staticStyles,
-    css`
-      :host {
-        
-      }
-
-      * {
-        box-sizing: border-box;
-      }
-
-      #container {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-      }
-    `
-  ]
-
-  public render (): TemplateResult {
-    return html`
-      <div class="mainbox">
-        <div id="container"></div>
-      </div>
-    `;
-  }
-
-  public async firstUpdated (_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
-    super.firstUpdated(_changedProperties);
-    const container = this.shadowRoot.getElementById('container');
-    
-    /* if (!aceDeferred) {
-      aceDeferred = domtools.plugins.smartpromise.defer();
-      const scriptUrl = `https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/loader.js`;
-      const script = document.createElement('script');
-      script.src = scriptUrl;
-      script.onload = () => {
-        aceDeferred.resolve();
-      }
-      document.head.appendChild(script);
-    }
-    await aceDeferred.promise;
-
-    (window as any).require.config({
-      paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor/min/vs" }
-    });
-    (window as any).require([ "vs/editor/editor.main" ], function () {
-      const editor: monaco.editor.IStandaloneCodeEditor = (window as any).monaco.editor.create(container, {
-        value: "function hello() {\n\talert('Hello world!');\n}",
-        language: 'javascript',
-        theme: 'vs-dark',
-        useShadowDOM: true
-      });
-    }); */
-    
-  }
-}
--- a/ts_web/elements/dees-editor-markdownoutlet.ts
+++ b/ts_web/elements/dees-editor-markdownoutlet.ts
@ -0,0 +1,42 @@
+import { customElement, DeesElement, html, TemplateResult } from '@designestate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-editormarkdownoutlet': DeesEditorMarkdownOutlet;
+  }
+}
+
+@customElement('dees-editormarkdownoutlet')
+export class DeesEditorMarkdownOutlet extends DeesElement {
+  // DEMO
+  public static demo = () => html`<dees-editormarkdownoutlet></dees-editormarkdownoutlet>`;
+
+  // INSTANCE
+  private outlet: HTMLElement;
+
+  public render(): TemplateResult {
+    return html`
+      <div class="outlet markdown-body">
+        <h1>Hi there</h1>
+      </div>
+    `;
+  }
+
+  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    await super.firstUpdated(_changedProperties);
+    const styleElement = document.createElement('style');
+    const cssText = await (
+      await fetch('https://unpkg.com/github-markdown-css@5.1.0/github-markdown-dark.css')
+    ).text();
+    styleElement.textContent = cssText;
+    this.shadowRoot.append(styleElement);
+  }
+
+  public async updateHtmlText(htmlTextArg: string) {
+    await this.updateComplete;
+    if (!this.outlet) {
+      this.outlet = this.shadowRoot.querySelector('.outlet');
+    }
+    this.outlet.innerHTML = htmlTextArg;
+  }
+}
--- a/ts_web/elements/dees-editor.ts
+++ b/ts_web/elements/dees-editor.ts
@ -1,9 +1,14 @@
-import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element';
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  TemplateResult,
+  css,
+  cssManager,
+} from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';

-const deferred = domtools.plugins.smartpromise.defer();
-let monacoDeferred: typeof deferred;
-
 import type * as monaco from 'monaco-editor';

 declare global {
@ -14,9 +19,30 @@ declare global {

@customElement('dees-editor')
 export class DeesEditor extends DeesElement {
-  public static demo = () => html`
-    <dees-editor></dees-editor>
-  `;
+  // DEMO
+  public static demo = () => html` <dees-editor></dees-editor> `;
+
+  // STATIC
+  public static monacoDeferred: ReturnType<typeof domtools.plugins.smartpromise.defer>;
+
+  // INSTANCE
+  public editorDeferred = domtools.plugins.smartpromise.defer<monaco.editor.IStandaloneCodeEditor>();
+  public language = 'typescript';
+
+  @property({
+    type: String
+  })
+  public content = "function hello() {\n\talert('Hello world!');\n}";
+
+  @property({
+    type: Object
+  })
+  public contentSubject = new domtools.rxjs.Subject<string>();
+
+  @property({
+    type: Boolean
+  })
+  public wordWrap: monaco.editor.IStandaloneEditorConstructionOptions['wordWrap'] = 'off';

  constructor() {
    super();
@ -27,7 +53,6 @@ export class DeesEditor extends DeesElement {
    domtools.elementBasic.staticStyles,
    css`
      :host {
-        
      }

      * {
@ -39,10 +64,10 @@ export class DeesEditor extends DeesElement {
        height: 100%;
        width: 100%;
      }
-    `
-  ]
+    `,
+  ];

-  public render (): TemplateResult {
+  public render(): TemplateResult {
    return html`
      <div class="mainbox">
        <div id="container"></div>
@ -50,33 +75,52 @@ export class DeesEditor extends DeesElement {
    `;
  }

-  public async firstUpdated (_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
+  public async firstUpdated(
+    _changedProperties: Map<string | number | symbol, unknown>
+  ): Promise<void> {
    super.firstUpdated(_changedProperties);
    const container = this.shadowRoot.getElementById('container');

-    if (!monacoDeferred) {
-      monacoDeferred = domtools.plugins.smartpromise.defer();
+    if (!DeesEditor.monacoDeferred) {
+      DeesEditor.monacoDeferred = domtools.plugins.smartpromise.defer();
      const scriptUrl = `https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/loader.js`;
      const script = document.createElement('script');
      script.src = scriptUrl;
      script.onload = () => {
-        monacoDeferred.resolve();
-      }
+        DeesEditor.monacoDeferred.resolve();
+      };
      document.head.appendChild(script);
    }
-    await monacoDeferred.promise;
+    await DeesEditor.monacoDeferred.promise;

    (window as any).require.config({
-      paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor/min/vs" }
+      paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor/min/vs' },
    });
-    (window as any).require([ "vs/editor/editor.main" ], function () {
-      const editor: monaco.editor.IStandaloneCodeEditor = (window as any).monaco.editor.create(container, {
-        value: "function hello() {\n\talert('Hello world!');\n}",
-        language: 'javascript',
+    (window as any).require(['vs/editor/editor.main'], async () => {
+      const editor = ((window as any).monaco.editor as typeof monaco.editor).create(container, {
+        value: this.content,
+        language: this.language,
        theme: 'vs-dark',
-        useShadowDOM: true
+        useShadowDOM: true,
+        fontSize: 16,
+        automaticLayout: true,
+        wordWrap: this.wordWrap
      });
+      this.editorDeferred.resolve(editor);
    });
+    const css = await (
+      await fetch('https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/editor/editor.main.css')
+    ).text();
+    const styleElement = document.createElement('style');
+    styleElement.textContent = css;
+    this.shadowRoot.append(styleElement);

+
+    // editor is setup let do the rest
+    const editor = await this.editorDeferred.promise;
+    editor.onDidChangeModelContent(async eventArg => {
+      this.contentSubject.next(editor.getValue());
+    });
+    this.contentSubject.next(editor.getValue());
  }
 }
--- a/ts_web/elements/dees-editormarkdown.ts
+++ b/ts_web/elements/dees-editormarkdown.ts
@ -0,0 +1,101 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  TemplateResult,
+  css,
+  cssManager,
+} from '@designestate/dees-element';
+import * as domtools from '@designestate/dees-domtools';
+
+import * as smartmarkdown from '@pushrocks/smartmarkdown';
+
+const deferred = domtools.plugins.smartpromise.defer();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-editormarkdown': DeesEditorMarkdown;
+  }
+}
+
+@customElement('dees-editormarkdown')
+export class DeesEditorMarkdown extends DeesElement {
+  public static demo = () => html`<dees-editormarkdown></dees-editormarkdown>`;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      .gridcontainer {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        display: grid;
+        grid-template-columns: 60% 40%;
+      }
+      .editorContainer {
+        position: relative;
+      }
+      .outletContainer {
+        background: #111;
+        color: #fff;
+        font-family: 'Roboto Slab';
+        padding: 20px;
+      }
+
+      .outletContainer h1 {
+
+      }
+    `,
+  ];
+
+  public render() {
+    return html`
+      <div class="gridcontainer">
+        <div class="editorContainer">
+          <dees-editor
+            .language=${'markdown'}
+            .content=${`# a test content
+
+This is test content that is of longer form an hopefully starts to wrap when I need it. And yes, it does perfectly. nice.
+
+Test | Hello
+--- | ---
+Yeah | So good
+
+This is real asset I think. Why would we want to leave that on the table? Can you tell my that?
+
+Why are we here?
+
+Do you know?
+
+> note:
+There is something going on.
+
+\`\`\`typescript
+const hello = 'yes'
+\`\`\`
+`}
+            wordWrap="bounded"
+          ></dees-editor>
+        </div>
+        <div class="outletContainer">
+          <dees-editormarkdownoutlet></dees-editormarkdownoutlet>
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated(_changedPropertiesArg) {
+    await super.firstUpdated(_changedPropertiesArg);
+    const editor = this.shadowRoot.querySelector('dees-editor');
+    const markdownOutlet = this.shadowRoot.querySelector('dees-editormarkdownoutlet');
+    const smartmarkdownInstance = new smartmarkdown.SmartMarkdown();
+    const mdParsedResult = await smartmarkdownInstance.getMdParsedResultFromMarkdown('loading...')
+    editor.contentSubject.subscribe(async contentArg => {
+      await mdParsedResult.updateFromMarkdownString(contentArg)
+      const html = mdParsedResult.html;
+      markdownOutlet.updateHtmlText(html);
+    })
+  }
+}
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@ -1,3 +1,4 @@
 export * from './dees-editor.js';
-export * from './dees-editor-ace.js';
+export * from './dees-editormarkdown.js';
+export * from './dees-editor-markdownoutlet.js';
 export * from './dees-terminal.js';
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,16 +1,8 @@
 {
  "compilerOptions": {
-    "target": "es2017",
-    "module": "es2015",
-    "moduleResolution": "node",
-    "lib": ["es2017", "dom"],
-    "declaration": true,
-    "inlineSources": true,
-    "inlineSourceMap": true,
-    "noUnusedLocals": false,
-    "noFallthroughCasesInSwitch": true,
-    "outDir": "dist/",
-    "skipLibCheck": false,
-    "experimentalDecorators": true
+    "experimentalDecorators": true,
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "node12"
  }
 }
--- a/tslint.json
+++ b/tslint.json
@ -1,17 +0,0 @@
-{
-  "extends": ["tslint:latest", "tslint-config-prettier"],
-  "rules": {
-    "semicolon": [true, "always"],
-    "no-console": false,
-    "ordered-imports": false,
-    "object-literal-sort-keys": false,
-    "member-ordering": {
-      "options":{
-        "order": [
-          "static-method"
-        ]
-      }
-    }
-  },
-  "defaultSeverity": "warning"
-}
Author	SHA1	Message	Date
Philipp Kunz	83f79c5fcb	1.0.70	2022-05-20 16:26:03 +02:00
Philipp Kunz	cd5a083fa8	fix(core): update	2022-05-20 16:26:03 +02:00
Philipp Kunz	1e01b59d32	1.0.69	2022-05-19 13:51:12 +02:00
Philipp Kunz	3b40811295	fix(core): update	2022-05-19 13:51:11 +02:00
Philipp Kunz	80597b25d6	1.0.68	2022-05-18 03:19:55 +02:00
Philipp Kunz	bcadb1b97f	fix(core): update	2022-05-18 03:19:55 +02:00
Philipp Kunz	e70d8abc8a	1.0.67	2022-03-18 16:56:51 +01:00
Philipp Kunz	c5ef13acbe	fix(core): update	2022-03-18 16:56:50 +01:00