fix(core): update

.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

.vscode/settings.json

@@ -22,6 +22,5 @@
         }
       }
     }
-  ],
+  ]
-  "typescript.tsdk": "node_modules/typescript/lib"
 }

html/index.html

@@ -1,7 +1,6 @@
-<!--gitzone default-->
+<!--gitzone element-->
-<!-- made by Lossless GmbH -->
+<!-- made by Task Venture Capital GmbH -->
 <!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
-<!DOCTYPE html>
 <html lang="en">
   <head>
     <!--Lets set some basic meta tags-->
@@ -10,119 +9,20 @@
       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://assetbroker.lossless.one/" crossorigin>
+    <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
 
-    <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>
+
-      projectVersion = '';
+    <script type="module" src="/bundle.js"></script>
-    </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>

html/index.ts

@@ -1,6 +1,6 @@
 // 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/index.js';

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,5 +1,5 @@
 {
-  "name": "@designestate/dees-editor",
+  "name": "@design.estate/dees-editor",
   "version": "1.0.72",
   "private": false,
   "description": "an advanced editor for markdown documents based on monaco.",
@@ -9,29 +9,30 @@
   "scripts": {
     "test": "tstest test/",
     "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": "^2.0.22",
+    "@design.estate/dees-domtools": "^2.0.34",
-    "@designestate/dees-element": "^2.0.15",
+    "@design.estate/dees-element": "^2.0.29",
-    "@designestate/dees-wcctools": "^1.0.74",
+    "@design.estate/dees-wcctools": "^1.0.78",
-    "@gitzone/tsrun": "^1.2.32",
+    "@git.zone/tsrun": "^1.2.46",
     "@losslessone_private/loint-pubapi": "^1.0.13",
-    "@pushrocks/smartexpress": "^4.0.4",
+    "@push.rocks/smartmarkdown": "^3.0.1",
-    "@pushrocks/smartmarkdown": "^2.0.14",
+    "@webcontainer/api": "^1.1.5",
-    "monaco-editor": "^0.33.0",
+    "monaco-editor": "^0.43.0",
-    "xterm": "^4.18.0",
+    "xterm": "^5.3.0",
-    "xterm-addon-fit": "^0.5.0"
+    "xterm-addon-fit": "^0.8.0"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.61",
+    "@git.zone/tsbuild": "^2.1.70",
-    "@gitzone/tsbundle": "^2.0.3",
+    "@git.zone/tsbundle": "^2.0.8",
-    "@gitzone/tstest": "^1.0.71",
+    "@git.zone/tstest": "^1.0.81",
-    "@gitzone/tswatch": "^2.0.1",
+    "@git.zone/tswatch": "^2.0.13",
-    "@pushrocks/projectinfo": "^5.0.1",
+    "@push.rocks/projectinfo": "^5.0.2",
-    "@pushrocks/tapbundle": "^5.0.3"
+    "@push.rocks/tapbundle": "^5.0.8"
   },
   "files": [
     "ts/**/*",
@@ -48,4 +49,4 @@
   "browserslist": [
     "last 1 Chrome versions"
   ]
-}
+}

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

@@ -1,15 +1,15 @@
-import { expect, expectAsync, tap, webhelpers } from '@pushrocks/tapbundle';
+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;
+  const deesEditor = new deesEditorLib.DeesEditor();
-  expect(deesEditor).toBeInstanceOf(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()
+tap.start();

ts_web/00_commitinfo_data.ts

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

ts_web/elements/dees-editor-markdownoutlet.ts

@@ -1,4 +1,4 @@
-import { customElement, DeesElement, html, TemplateResult } from '@designestate/dees-element';
+import { customElement, DeesElement, html, type TemplateResult } from '@design.estate/dees-element';
 
 declare global {
   interface HTMLElementTagNameMap {

ts_web/elements/dees-editor.ts

@@ -3,11 +3,11 @@ import {
   property,
   html,
   customElement,
-  TemplateResult,
+  type TemplateResult,
   css,
   cssManager,
-} from '@designestate/dees-element';
+} from '@design.estate/dees-element';
-import * as domtools from '@designestate/dees-domtools';
+import * as domtools from '@design.estate/dees-domtools';
 
 import type * as monaco from 'monaco-editor';
 

ts_web/elements/dees-editormarkdown.ts

@@ -3,13 +3,13 @@ import {
   property,
   html,
   customElement,
-  TemplateResult,
+  type TemplateResult,
   css,
   cssManager,
-} from '@designestate/dees-element';
+} from '@design.estate/dees-element';
-import * as domtools from '@designestate/dees-domtools';
+import * as domtools from '@design.estate/dees-domtools';
 
-import * as smartmarkdown from '@pushrocks/smartmarkdown';
+import * as smartmarkdown from '@push.rocks/smartmarkdown';
 
 const deferred = domtools.plugins.smartpromise.defer();
 

ts_web/elements/dees-terminal.ts

@@ -1,5 +1,15 @@
-import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element';
+import {
-import * as domtools from '@designestate/dees-domtools';
+  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';
@@ -12,9 +22,7 @@ declare global {
 
 @customElement('dees-terminal')
 export class DeesTerminal extends DeesElement {
-  public static demo = () => html`
+  public static demo = () => html` <dees-terminal></dees-terminal> `;
-    <dees-terminal></dees-terminal>
-  `;
 
   constructor() {
     super();
@@ -79,143 +87,143 @@ export class DeesTerminal extends DeesElement {
       */
 
       .xterm {
-          font-feature-settings: "liga" 0;
+        font-feature-settings: 'liga' 0;
-          position: relative;
+        position: relative;
-          user-select: none;
+        user-select: none;
-          -ms-user-select: none;
+        -ms-user-select: none;
-          -webkit-user-select: none;
+        -webkit-user-select: none;
       }
 
       .xterm.focus,
       .xterm:focus {
-          outline: none;
+        outline: none;
       }
 
       .xterm .xterm-helpers {
-          position: absolute;
+        position: absolute;
-          top: 0;
+        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;
+        z-index: 5;
       }
 
       .xterm .xterm-helper-textarea {
-          padding: 0;
+        padding: 0;
-          border: 0;
+        border: 0;
-          margin: 0;
+        margin: 0;
-          /* Move textarea out of the screen to the far left, so that the cursor is not visible */
+        /* Move textarea out of the screen to the far left, so that the cursor is not visible */
-          position: absolute;
+        position: absolute;
-          opacity: 0;
+        opacity: 0;
-          left: -9999em;
+        left: -9999em;
-          top: 0;
+        top: 0;
-          width: 0;
+        width: 0;
-          height: 0;
+        height: 0;
-          z-index: -5;
+        z-index: -5;
-          /** Prevent wrapping so the IME appears against the textarea at the correct position */
+        /** Prevent wrapping so the IME appears against the textarea at the correct position */
-          white-space: nowrap;
+        white-space: nowrap;
-          overflow: hidden;
+        overflow: hidden;
-          resize: none;
+        resize: none;
       }
 
       .xterm .composition-view {
-          /* TODO: Composition position got messed up somewhere */
+        /* TODO: Composition position got messed up somewhere */
-          background: #000;
+        background: #000;
-          color: #FFF;
+        color: #fff;
-          display: none;
+        display: none;
-          position: absolute;
+        position: absolute;
-          white-space: nowrap;
+        white-space: nowrap;
-          z-index: 1;
+        z-index: 1;
       }
 
       .xterm .composition-view.active {
-          display: block;
+        display: block;
       }
 
       .xterm .xterm-viewport {
-          /* On OS X this is required in order for the scroll bar to appear fully opaque */
+        /* On OS X this is required in order for the scroll bar to appear fully opaque */
-          background-color: #000;
+        background-color: #000;
-          overflow-y: scroll;
+        overflow-y: scroll;
-          cursor: default;
+        cursor: default;
-          position: absolute;
+        position: absolute;
-          right: 0;
+        right: 0;
-          left: 0;
+        left: 0;
-          top: 0;
+        top: 0;
-          bottom: 0;
+        bottom: 0;
       }
 
       .xterm .xterm-screen {
-          position: relative;
+        position: relative;
       }
 
       .xterm .xterm-screen canvas {
-          position: absolute;
+        position: absolute;
-          left: 0;
+        left: 0;
-          top: 0;
+        top: 0;
       }
 
       .xterm .xterm-scroll-area {
-          visibility: hidden;
+        visibility: hidden;
       }
 
       .xterm-char-measure-element {
-          display: inline-block;
+        display: inline-block;
-          visibility: hidden;
+        visibility: hidden;
-          position: absolute;
+        position: absolute;
-          top: 0;
+        top: 0;
-          left: -9999em;
+        left: -9999em;
-          line-height: normal;
+        line-height: normal;
       }
 
       .xterm {
-          cursor: text;
+        cursor: text;
       }
 
       .xterm.enable-mouse-events {
-          /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
+        /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
-          cursor: default;
+        cursor: default;
       }
 
       .xterm.xterm-cursor-pointer {
-          cursor: pointer;
+        cursor: pointer;
       }
 
       .xterm.column-select.focus {
-          /* Column selection mode */
+        /* Column selection mode */
-          cursor: crosshair;
+        cursor: crosshair;
       }
 
       .xterm .xterm-accessibility,
       .xterm .xterm-message {
-          position: absolute;
+        position: absolute;
-          left: 0;
+        left: 0;
-          top: 0;
+        top: 0;
-          bottom: 0;
+        bottom: 0;
-          right: 0;
+        right: 0;
-          z-index: 10;
+        z-index: 10;
-          color: transparent;
+        color: transparent;
       }
 
       .xterm .live-region {
-          position: absolute;
+        position: absolute;
-          left: -9999px;
+        left: -9999px;
-          width: 1px;
+        width: 1px;
-          height: 1px;
+        height: 1px;
-          overflow: hidden;
+        overflow: hidden;
       }
 
       .xterm-dim {
-          opacity: 0.5;
+        opacity: 0.5;
       }
 
       .xterm-underline {
-          text-decoration: underline;
+        text-decoration: underline;
       }
-    `
+    `,
-  ]
+  ];
 
-  public render (): TemplateResult {
+  public render(): TemplateResult {
     return html`
       <div class="mainbox">
         <div id="container"></div>
@@ -223,11 +231,17 @@ export class DeesTerminal extends DeesElement {
     `;
   }
 
-  public async firstUpdated (_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
+  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();
+    const term = new Terminal({
+      convertEol: true,
+      cursorBlink: true,
+    });
     const fitAddon = new FitAddon();
     term.loadAddon(fitAddon);
 
@@ -238,5 +252,23 @@ export class DeesTerminal extends DeesElement {
     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`);
   }
-}
+}

tsconfig.json

@@ -1,8 +1,14 @@
 {
   "compilerOptions": {
     "experimentalDecorators": true,
-    "target": "ES2020",
+    "useDefineForClassFields": false,
-    "module": "ES2020",
+    "target": "ES2022",
-    "moduleResolution": "node12"
+    "module": "ES2022",
-  }
+    "moduleResolution": "nodenext",
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true
+  },
+  "exclude": [
+    "dist_*/**/*.d.ts"
+  ]
 }