1.0.73

.gitea/workflows/default_nottags.yaml

@@ -0,0 +1,66 @@
+name: Default (not tags)
+
+on:
+  push:
+    tags-ignore:
+      - '**'
+
+env:
+  IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
+  NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
+  NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
+  NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
+  NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
+
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install pnpm and npmci
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+
+      - name: Run npm prepare
+        run: npmci npm prepare
+
+      - name: Audit production dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --prod
+        continue-on-error: true
+
+      - name: Audit development dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --dev
+        continue-on-error: true
+
+  test:
+    if: ${{ always() }}
+    needs: security
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Test stable
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm test
+
+      - name: Test build
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm build

.gitea/workflows/default_tags.yaml

@@ -0,0 +1,124 @@
+name: Default (tags)
+
+on:
+  push:
+    tags:
+      - '*'
+
+env:
+  IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
+  NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
+  NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
+  NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
+  NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
+
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+          npmci npm prepare
+
+      - name: Audit production dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --prod
+        continue-on-error: true
+
+      - name: Audit development dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --dev
+        continue-on-error: true
+
+  test:
+    if: ${{ always() }}
+    needs: security
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+          npmci npm prepare
+
+      - name: Test stable
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm test
+
+      - name: Test build
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm build
+
+  release:
+    needs: test
+    if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+          npmci npm prepare
+
+      - name: Release
+        run: |
+          npmci node install stable
+          npmci npm publish
+
+  metadata:
+    needs: test
+    if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+    continue-on-error: true
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+          npmci npm prepare
+
+      - name: Code quality
+        run: |
+          npmci command npm install -g typescript
+          npmci npm install
+
+      - name: Trigger
+        run: npmci trigger
+
+      - name: Build docs and upload artifacts
+        run: |
+          npmci node install stable
+          npmci npm install
+          pnpm install -g @gitzone/tsdoc
+          npmci command tsdoc
+        continue-on-error: true

.gitlab-ci.yml

@@ -1,141 +0,0 @@
-# gitzone ci_default
-image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-
-cache:
-  paths:
-    - .npmci_cache/
-  key: '$CI_BUILD_STAGE'
-
-stages:
-  - security
-  - test
-  - release
-  - metadata
-
-before_script:
-  - npm install -g @shipzone/npmci
-
-# ====================
-# security stage
-# ====================
-mirror:
-  stage: security
-  script:
-    - npmci git mirror
-  only:
-    - tags
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
-auditProductionDependencies:
-  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
-  allow_failure: true
-
-auditDevDependencies:
-  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-  stage: security
-  script:
-    - npmci npm prepare
-    - npmci command npm install --ignore-scripts
-    - npmci command npm config set registry https://registry.npmjs.org
-    - npmci command npm audit --audit-level=high --only=dev
-  tags:
-    - docker
-  allow_failure: true
-
-# ====================
-# test stage
-# ====================
-
-testStable:
-  stage: test
-  script:
-    - npmci npm prepare
-    - npmci node install stable
-    - npmci npm install
-    - npmci npm test
-  coverage: /\d+.?\d+?\%\s*coverage/
-  tags:
-    - docker
-
-testBuild:
-  stage: test
-  script:
-    - npmci npm prepare
-    - npmci node install stable
-    - npmci npm install
-    - npmci command npm run build
-  coverage: /\d+.?\d+?\%\s*coverage/
-  tags:
-    - docker
-
-release:
-  stage: release
-  script:
-    - npmci node install stable
-    - npmci npm publish
-  only:
-    - tags
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
-# ====================
-# metadata stage
-# ====================
-codequality:
-  stage: metadata
-  allow_failure: true
-  only:
-    - tags
-  script:
-    - npmci command npm install -g tslint typescript
-    - npmci npm prepare
-    - npmci npm install
-    - npmci command "tslint -c tslint.json ./ts/**/*.ts"
-  tags:
-    - lossless
-    - docker
-    - priv
-
-trigger:
-  stage: metadata
-  script:
-    - npmci trigger
-  only:
-    - tags
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
-pages:
-  stage: metadata
-  script:
-    - npmci node install lts
-    - npmci command npm install -g @gitzone/tsdoc
-    - npmci npm prepare
-    - npmci npm install
-    - npmci command tsdoc
-  tags:
-    - lossless
-    - docker
-    - notpriv
-  only:
-    - tags
-  artifacts:
-    expire_in: 1 week
-    paths:
-      - public
-  allow_failure: true

html/index.html

@@ -1,5 +1,5 @@
 <!--gitzone element-->
-<!-- made by Lossless GmbH -->
+<!-- made by Task Venture Capital GmbH -->
 <!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
 <html lang="en">
   <head>
@@ -10,6 +10,10 @@
     />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
+    <!--Lets load standard fonts-->
+    <link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
+    <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
+
     <style>
       body {
         margin: 0px;
@@ -17,7 +21,7 @@
       }
     </style>
 
-    <script type="module" src="./index.ts"></script>
+    <script type="module" src="/bundle.js"></script>
   </head>
   <body>
   </body>

html/index.ts

@@ -1,10 +1,10 @@
 // dees tools
-import * as deesWccTools from '@designestate/dees-wcctools';
+import * as deesWccTools from '@design.estate/dees-wcctools';
-import * as deesDomTools from '@designestate/dees-domtools';
+import * as deesDomTools from '@design.estate/dees-domtools';
 
 // elements and pages
-import * as elements from '../ts_web/elements';
+import * as elements from '../ts_web/elements/index.js';
-import * as pages from '../ts_web/pages';
+import * as pages from '../ts_web/pages/index.js';
 
 deesWccTools.setupWccTools(elements as any, pages);
 deesDomTools.elementBasic.setup();

npmextra.json

@@ -6,7 +6,7 @@
       "gitscope": "designestate",
       "gitrepo": "dees-editor",
       "description": "an advanced editor for markdown documents based on monaco.",
-      "npmPackagename": "@designestate/dees-editor",
+      "npmPackagename": "@design.estate/dees-editor",
       "license": "MIT",
       "projectDomain": "design.estate"
     }

package.json

@@ -1,37 +1,38 @@
 {
-  "name": "@designestate/dees-editor",
+  "name": "@design.estate/dees-editor",
-  "version": "1.0.62",
+  "version": "1.0.73",
   "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 && tsbundle element --production",
+    "build": "tsbuild element --allowimplicitany --skiplibcheck && tsbundle element --allowimplicitany",
-    "watch": "tswatch element"
+    "watch": "tswatch element",
+    "buildDocs": "tsdoc"
   },
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.41",
+    "@design.estate/dees-domtools": "^2.0.34",
-    "@designestate/dees-element": "^1.0.26",
+    "@design.estate/dees-element": "^2.0.29",
-    "@designestate/dees-wcctools": "^1.0.37",
+    "@design.estate/dees-wcctools": "^1.0.78",
-    "@gitzone/tsrun": "^1.2.12",
+    "@git.zone/tsrun": "^1.2.46",
-    "@losslessone_private/loint-pubapi": "^1.0.9",
+    "@losslessone_private/loint-pubapi": "^1.0.13",
-    "@parcel/config-default": "^2.3.2",
+    "@push.rocks/smartmarkdown": "^3.0.1",
-    "@pushrocks/smartexpress": "^3.0.76",
+    "@webcontainer/api": "^1.1.5",
-    "monaco-editor": "^0.32.1",
+    "monaco-editor": "^0.43.0",
-    "typescript": "^4.4.3"
+    "xterm": "^5.3.0",
+    "xterm-addon-fit": "^0.8.0"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.24",
+    "@git.zone/tsbuild": "^2.1.70",
-    "@gitzone/tsbundle": "^1.0.72",
+    "@git.zone/tsbundle": "^2.0.8",
-    "@gitzone/tswatch": "^1.0.58",
+    "@git.zone/tstest": "^1.0.81",
-    "@pushrocks/projectinfo": "^4.0.5",
+    "@git.zone/tswatch": "^2.0.13",
-    "buffer": "^6.0.3",
+    "@push.rocks/projectinfo": "^5.0.2",
-    "process": "^0.11.10",
+    "@push.rocks/tapbundle": "^5.0.8"
-    "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.17.0"
   },
   "files": [
     "ts/**/*",

readme.md

@@ -2,7 +2,7 @@
 an advanced editor for markdown documents based on monaco.
 
 ## Availabililty and Links
-* [npmjs.org (npm package)](https://www.npmjs.com/package/@designestate/dees-editor)
+* [npmjs.org (npm package)](https://www.npmjs.com/package/@design.estate/dees-editor)
 * [gitlab.com (source)](https://gitlab.com/designestate/dees-editor)
 * [github.com (source mirror)](https://github.com/designestate/dees-editor)
 * [docs (typedoc)](https://designestate.gitlab.io/dees-editor/)
@@ -13,15 +13,14 @@ Status Category | Status Badge
 -- | --
 GitLab Pipelines | [![pipeline status](https://gitlab.com/designestate/dees-editor/badges/master/pipeline.svg)](https://lossless.cloud)
 GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/designestate/dees-editor/badges/master/coverage.svg)](https://lossless.cloud)
-npm | [![npm downloads per month](https://badgen.net/npm/dy/@designestate/dees-editor)](https://lossless.cloud)
+npm | [![npm downloads per month](https://badgen.net/npm/dy/@design.estate/dees-editor)](https://lossless.cloud)
 Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/designestate/dees-editor)](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/@designestate/dees-editor)](https://lossless.cloud)
+PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@design.estate/dees-editor)](https://lossless.cloud)
-PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@designestate/dees-editor)](https://lossless.cloud)
+PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@design.estate/dees-editor)](https://lossless.cloud)
-BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@designestate/dees-editor)](https://lossless.cloud)
+BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@design.estate/dees-editor)](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
 
@@ -33,7 +32,6 @@ We are always happy for code contributions. If you are not the code contributing
 
 For further information read the linked docs at the top of this readme.
 
-> MIT licensed | **©** [Lossless GmbH](https://lossless.gmbh)
+## Legal
+> MIT licensed | **©** [Task Venture Capital GmbH](https://task.vc)
 | By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
-
-[![repo-footer](https://lossless.gitlab.io/publicrelations/repofooter.svg)](https://maintainedby.lossless.com)

test/test.browser.ts

@@ -0,0 +1,15 @@
+import { expect, expectAsync, tap, webhelpers } from '@push.rocks/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();

ts_web/00_commitinfo_data.ts

@@ -0,0 +1,8 @@
+/**
+ * autocreated commitinfo by @pushrocks/commitinfo
+ */
+export const commitinfo = {
+  name: '@design.estate/dees-editor',
+  version: '1.0.73',
+  description: 'an advanced editor for markdown documents based on monaco.'
+}

ts_web/elements/dees-editor-markdownoutlet.ts

@@ -0,0 +1,42 @@
+import { customElement, DeesElement, html, type TemplateResult } from '@design.estate/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;
+  }
+}

ts_web/elements/dees-editor.ts

@@ -1,8 +1,13 @@
-import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element';
+import {
-import * as domtools from '@designestate/dees-domtools';
+  DeesElement,
-
+  property,
-const deferred = domtools.plugins.smartpromise.defer();
+  html,
-let monacoDeferred: typeof deferred;
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
 
 import type * as monaco from 'monaco-editor';
 
@@ -14,9 +19,30 @@ declare global {
 
 @customElement('dees-editor')
 export class DeesEditor extends DeesElement {
-  public static demo = () => html`
+  // DEMO
-    <dees-editor></dees-editor>
+  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) {
+    if (!DeesEditor.monacoDeferred) {
-      monacoDeferred = domtools.plugins.smartpromise.defer();
+      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 () {
+    (window as any).require(['vs/editor/editor.main'], async () => {
-      const editor: monaco.editor.IStandaloneCodeEditor = (window as any).monaco.editor.create(container, {
+      const editor = ((window as any).monaco.editor as typeof monaco.editor).create(container, {
-        value: "function hello() {\n\talert('Hello world!');\n}",
+        value: this.content,
-        language: 'javascript',
+        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());
   }
-}
+}

ts_web/elements/dees-editormarkdown.ts

@@ -0,0 +1,100 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+
+import * as smartmarkdown from '@push.rocks/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;
+        overflow-y: scroll;
+      }
+    `,
+  ];
+
+  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');
+    
+    // lets care about wiring the markdown stuff.
+    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);
+    })
+  }
+}

ts_web/elements/dees-terminal.ts

@@ -0,0 +1,274 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+
+import * as webcontainer from '@webcontainer/api';
+
+import { Terminal } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-terminal': DeesTerminal;
+  }
+}
+
+@customElement('dees-terminal')
+export class DeesTerminal extends DeesElement {
+  public static demo = () => html` <dees-terminal></dees-terminal> `;
+
+  constructor() {
+    super();
+    domtools.DomTools.setupDomTools();
+  }
+
+  public static styles = [
+    domtools.elementBasic.staticStyles,
+    css`
+      :host {
+        padding: 20px;
+        background: #000;
+        position: absolute;
+        height: 100%;
+        width: 100%;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      #container {
+        position: absolute;
+        height: calc(100% - 40px);
+        width: calc(100% - 40px);
+      }
+      /**
+      * Copyright (c) 2014 The xterm.js authors. All rights reserved.
+      * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
+      * https://github.com/chjj/term.js
+      * @license MIT
+      *
+      * Permission is hereby granted, free of charge, to any person obtaining a copy
+      * of this software and associated documentation files (the "Software"), to deal
+      * in the Software without restriction, including without limitation the rights
+      * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+      * copies of the Software, and to permit persons to whom the Software is
+      * furnished to do so, subject to the following conditions:
+      *
+      * The above copyright notice and this permission notice shall be included in
+      * all copies or substantial portions of the Software.
+      *
+      * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+      * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+      * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+      * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+      * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+      * THE SOFTWARE.
+      *
+      * Originally forked from (with the author's permission):
+      *   Fabrice Bellard's javascript vt100 for jslinux:
+      *   http://bellard.org/jslinux/
+      *   Copyright (c) 2011 Fabrice Bellard
+      *   The original design remains. The terminal itself
+      *   has been extended to include xterm CSI codes, among
+      *   other features.
+      */
+
+      /**
+      *  Default styles for xterm.js
+      */
+
+      .xterm {
+        font-feature-settings: 'liga' 0;
+        position: relative;
+        user-select: none;
+        -ms-user-select: none;
+        -webkit-user-select: none;
+      }
+
+      .xterm.focus,
+      .xterm:focus {
+        outline: none;
+      }
+
+      .xterm .xterm-helpers {
+        position: absolute;
+        top: 0;
+        /**
+          * The z-index of the helpers must be higher than the canvases in order for
+          * IMEs to appear on top.
+          */
+        z-index: 5;
+      }
+
+      .xterm .xterm-helper-textarea {
+        padding: 0;
+        border: 0;
+        margin: 0;
+        /* Move textarea out of the screen to the far left, so that the cursor is not visible */
+        position: absolute;
+        opacity: 0;
+        left: -9999em;
+        top: 0;
+        width: 0;
+        height: 0;
+        z-index: -5;
+        /** Prevent wrapping so the IME appears against the textarea at the correct position */
+        white-space: nowrap;
+        overflow: hidden;
+        resize: none;
+      }
+
+      .xterm .composition-view {
+        /* TODO: Composition position got messed up somewhere */
+        background: #000;
+        color: #fff;
+        display: none;
+        position: absolute;
+        white-space: nowrap;
+        z-index: 1;
+      }
+
+      .xterm .composition-view.active {
+        display: block;
+      }
+
+      .xterm .xterm-viewport {
+        /* On OS X this is required in order for the scroll bar to appear fully opaque */
+        background-color: #000;
+        overflow-y: scroll;
+        cursor: default;
+        position: absolute;
+        right: 0;
+        left: 0;
+        top: 0;
+        bottom: 0;
+      }
+
+      .xterm .xterm-screen {
+        position: relative;
+      }
+
+      .xterm .xterm-screen canvas {
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+
+      .xterm .xterm-scroll-area {
+        visibility: hidden;
+      }
+
+      .xterm-char-measure-element {
+        display: inline-block;
+        visibility: hidden;
+        position: absolute;
+        top: 0;
+        left: -9999em;
+        line-height: normal;
+      }
+
+      .xterm {
+        cursor: text;
+      }
+
+      .xterm.enable-mouse-events {
+        /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
+        cursor: default;
+      }
+
+      .xterm.xterm-cursor-pointer {
+        cursor: pointer;
+      }
+
+      .xterm.column-select.focus {
+        /* Column selection mode */
+        cursor: crosshair;
+      }
+
+      .xterm .xterm-accessibility,
+      .xterm .xterm-message {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        z-index: 10;
+        color: transparent;
+      }
+
+      .xterm .live-region {
+        position: absolute;
+        left: -9999px;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+      }
+
+      .xterm-dim {
+        opacity: 0.5;
+      }
+
+      .xterm-underline {
+        text-decoration: underline;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="mainbox">
+        <div id="container"></div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated(
+    _changedProperties: Map<string | number | symbol, unknown>
+  ): Promise<void> {
+    const domtools = await this.domtoolsPromise;
+    super.firstUpdated(_changedProperties);
+    const container = this.shadowRoot.getElementById('container');
+
+    const term = new Terminal({
+      convertEol: true,
+      cursorBlink: true,
+    });
+    const fitAddon = new FitAddon();
+    term.loadAddon(fitAddon);
+
+    // Open the terminal in #terminal-container
+    term.open(container);
+
+    // Make the terminal's size and geometry fit the size of #terminal-container
+    fitAddon.fit();
+
+    term.write(`dees-terminal custom terminal. \r\n$ `);
+
+    // lets start the webcontainer
+    // Call only once
+    const webcontainerInstance = await webcontainer.WebContainer.boot();
+    const shellProcess = await webcontainerInstance.spawn('jsh');
+    shellProcess.output.pipeTo(
+      new WritableStream({
+        write(data) {
+          term.write(data);
+        },
+      })
+    );
+    const input = shellProcess.input.getWriter();
+    term.onData((data) => {
+      input.write(data);
+    });
+    await domtools.convenience.smartdelay.delayFor(5000);
+    input.write(`pnpm add isomorphic-git @git.zone/tsbuild\n`);
+  }
+}

ts_web/elements/index.ts

@@ -1 +1,4 @@
-export * from './dees-editor';
+export * from './dees-editor.js';
+export * from './dees-editormarkdown.js';
+export * from './dees-editor-markdownoutlet.js';
+export * from './dees-terminal.js';

ts_web/index.ts

@@ -1 +1 @@
-export * from './elements/index';
+export * from './elements/index.js';

tsconfig.json

@@ -1,16 +1,14 @@
 {
   "compilerOptions": {
-    "target": "es2017",
+    "experimentalDecorators": true,
-    "module": "es2015",
+    "useDefineForClassFields": false,
-    "moduleResolution": "node",
+    "target": "ES2022",
-    "lib": ["es2017", "dom"],
+    "module": "ES2022",
-    "declaration": true,
+    "moduleResolution": "nodenext",
-    "inlineSources": true,
+    "esModuleInterop": true,
-    "inlineSourceMap": true,
+    "verbatimModuleSyntax": true
-    "noUnusedLocals": true,
+  },
-    "noFallthroughCasesInSwitch": true,
+  "exclude": [
-    "outDir": "dist/",
+    "dist_*/**/*.d.ts"
-    "skipLibCheck": true,
+  ]
-    "experimentalDecorators": true
-  }
 }

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"
-}