Update Monaco Editor

- Move monaco-editor to a seperate package, to keep all building and transformations once, and in a seperate place. - hole-punch monaco to work around: - microsoft/monaco-editor#3217 - and other various issues: https://github.com/microsoft/monaco-editor/issues?q=shadow - Remove `codeTheme` as it is no-longer compatible with monaco's new css bundling. - Add codicons.ttf in an assetPath - Add `es-hole-punch to` `es-components`. - Standardize rollup usage across libs
EventStore · Aug 9, 2024 · 20dcceb · 20dcceb
1 parent 615feb2
commit 20dcceb
Show file tree

Hide file tree

Showing 41 changed files with 1,013 additions and 3,924 deletions.
diff --git a/.changeset/afraid-clocks-know.md b/.changeset/afraid-clocks-know.md
@@ -0,0 +1,9 @@
+---
+'@eventstore-ui/router': patch
+'@eventstore-ui/stores': patch
+'@eventstore-ui/forms': patch
+'@eventstore-ui/theme': patch
+'@eventstore-ui/utils': patch
+---
+
+Standardization of builds across design system libraries.
diff --git a/.changeset/strange-ads-talk.md b/.changeset/strange-ads-talk.md
@@ -0,0 +1,35 @@
+---
+'@eventstore-ui/editor': major
+---
+
+Monaco editor has been moved to a seperate package: `@eventstore-ui/monaco-editor`.
+
+## Breaking changes:
+
+### `assetsPath`
+
+You must now also copy `assetsPath` as well as `workersPath`, into your served assets.
+
+```ts
+import * as editor from '@eventstore-ui/editor/configure';
+
+// ...
+
+                {
+                    src: editor.assetsPath,
+                    dest: 'assets',
+                },
+                {
+                    src: editor.workerPath,
+                    dest: 'workers',
+                },
+ // ...
+```
+
+### `IStandaloneEditorConstructionOptions`
+
+`es-editor`'s options prop may required different arguments, due to changes in monaco's `IStandaloneEditorConstructionOptions`
+
+### `codeTheme`
+
+Child theme `codeTheme` has been removed, and is no-longer added to the global theme.
diff --git a/.changeset/yellow-pens-invent.md b/.changeset/yellow-pens-invent.md
@@ -0,0 +1,5 @@
+---
+'@eventstore-ui/components': minor
+---
+
+Adds the `es-hole-puncher` element, to pass children through to the light DOM.
diff --git a/documentation/src/global/app.ts b/documentation/src/global/app.ts
@@ -9,20 +9,4 @@ import '../icons';
 
 import { initialize } from '@eventstore-ui/editor/initialize';
 
-initialize({
-    getWorkerUrl(_moduleId: string, label: string) {
-        if (label === 'json') {
-            return '/workers/json.worker.js';
-        }
-        if (label === 'typescript' || label === 'javascript') {
-            return '/workers/ts.worker.js';
-        }
-        if (label === 'css') {
-            return '/workers/css.worker.js';
-        }
-        if (label === 'html') {
-            return '/workers/html.worker.js';
-        }
-        return '/workers/editor.worker.js';
-    },
-});
+initialize();
diff --git a/documentation/src/global/polyfills.ts b/documentation/src/global/polyfills.ts
@@ -16,4 +16,6 @@ if (Build.isServer) {
         observe() {}
         unobserve() {}
     };
+
+    global.UIEvent = class {} as any;
 }
diff --git a/documentation/stencil.config.ts b/documentation/stencil.config.ts
@@ -4,7 +4,7 @@ import { assetsPath } from '@eventstore-ui/assets';
 import postcssPresetEnv from 'postcss-preset-env';
 
 import { string } from 'rollup-plugin-string';
-import { workerPath } from '@eventstore-ui/editor/configure';
+import * as editor from '@eventstore-ui/editor/configure';
 
 export const config: Config = {
     globalStyle: 'src/global/app.css',
@@ -19,7 +19,11 @@ export const config: Config = {
             copy: [
                 { src: 'preview.html', dest: 'preview/index.html' },
                 {
-                    src: workerPath,
+                    src: editor.assetsPath,
+                    dest: 'assets',
+                },
+                {
+                    src: editor.workerPath,
                     dest: 'workers',
                 },
                 {

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -352,6 +352,17 @@ export namespace Components {
          */
         "variant": CounterVariant;
     }
+    /**
+     * Punches a hole through all parent shadow DOMs into the light DOM.
+     * Any slotted chlid will be moved into the light, and a chain of slots
+     * brings the slotted children back into position.
+     */
+    interface EsHolePuncher {
+        /**
+          * The unique ID to use for the slot path
+         */
+        "uniqueId": string;
+    }
     /**
      * Displays an icon loaded from the `iconStore`. An icon named "spinner" will automatically spin.
      * See [IconStore](/components/variables/iconStore) for details on how to load icons.
@@ -1204,6 +1215,17 @@ declare global {
         prototype: HTMLEsCounterElement;
         new (): HTMLEsCounterElement;
     };
+    /**
+     * Punches a hole through all parent shadow DOMs into the light DOM.
+     * Any slotted chlid will be moved into the light, and a chain of slots
+     * brings the slotted children back into position.
+     */
+    interface HTMLEsHolePuncherElement extends Components.EsHolePuncher, HTMLStencilElement {
+    }
+    var HTMLEsHolePuncherElement: {
+        prototype: HTMLEsHolePuncherElement;
+        new (): HTMLEsHolePuncherElement;
+    };
     /**
      * Displays an icon loaded from the `iconStore`. An icon named "spinner" will automatically spin.
      * See [IconStore](/components/variables/iconStore) for details on how to load icons.
@@ -1418,6 +1440,7 @@ declare global {
         "es-copy": HTMLEsCopyElement;
         "es-corner-banner": HTMLEsCornerBannerElement;
         "es-counter": HTMLEsCounterElement;
+        "es-hole-puncher": HTMLEsHolePuncherElement;
         "es-icon": HTMLEsIconElement;
         "es-loading-dots": HTMLEsLoadingDotsElement;
         "es-loading-text": HTMLEsLoadingTextElement;
@@ -1758,6 +1781,17 @@ declare namespace LocalJSX {
          */
         "variant"?: CounterVariant;
     }
+    /**
+     * Punches a hole through all parent shadow DOMs into the light DOM.
+     * Any slotted chlid will be moved into the light, and a chain of slots
+     * brings the slotted children back into position.
+     */
+    interface EsHolePuncher {
+        /**
+          * The unique ID to use for the slot path
+         */
+        "uniqueId": string;
+    }
     /**
      * Displays an icon loaded from the `iconStore`. An icon named "spinner" will automatically spin.
      * See [IconStore](/components/variables/iconStore) for details on how to load icons.
@@ -2491,6 +2525,7 @@ declare namespace LocalJSX {
         "es-copy": EsCopy;
         "es-corner-banner": EsCornerBanner;
         "es-counter": EsCounter;
+        "es-hole-puncher": EsHolePuncher;
         "es-icon": EsIcon;
         "es-loading-dots": EsLoadingDots;
         "es-loading-text": EsLoadingText;
@@ -2579,6 +2614,12 @@ declare module "@stencil/core" {
              * A pill display of an number, that pulses on change. Caps out at 999.
              */
             "es-counter": LocalJSX.EsCounter & JSXBase.HTMLAttributes<HTMLEsCounterElement>;
+            /**
+             * Punches a hole through all parent shadow DOMs into the light DOM.
+             * Any slotted chlid will be moved into the light, and a chain of slots
+             * brings the slotted children back into position.
+             */
+            "es-hole-puncher": LocalJSX.EsHolePuncher & JSXBase.HTMLAttributes<HTMLEsHolePuncherElement>;
             /**
              * Displays an icon loaded from the `iconStore`. An icon named "spinner" will automatically spin.
              * See [IconStore](/components/variables/iconStore) for details on how to load icons.

diff --git a/packages/components/src/components/es-hole-puncher/es-hole-puncher.tsx b/packages/components/src/components/es-hole-puncher/es-hole-puncher.tsx
@@ -0,0 +1,71 @@
+import { Component, h, Element, Prop, Host } from '@stencil/core';
+
+/**
+ * Punches a hole through all parent shadow DOMs into the light DOM.
+ * Any slotted chlid will be moved into the light, and a chain of slots
+ * brings the slotted children back into position.
+ */
+@Component({
+    tag: 'es-hole-puncher',
+    shadow: true,
+})
+export class EsHolePuncher {
+    @Element() host!: Element;
+
+    /** The unique ID to use for the slot path */
+    @Prop() uniqueId!: string;
+
+    private slotChain: HTMLSlotElement[] = [];
+    private slottedElements: Element[] = [];
+
+    componentDidLoad() {
+        let $parent = this.host;
+        let $host = ($parent.getRootNode() as ShadowRoot).host;
+
+        while ($host) {
+            const $slot = document.createElement('slot');
+            $slot.setAttribute('name', this.uniqueId);
+            $slot.setAttribute('slot', this.uniqueId);
+            $parent.appendChild($slot);
+
+            this.slotChain.push($slot);
+
+            $parent = $host;
+            $host = ($parent.getRootNode() as ShadowRoot).host;
+        }
+
+        const slot = this.host.shadowRoot!.querySelector('slot');
+        if (!slot) throw new Error('No slot found');
+
+        slot.assignedNodes({ flatten: true })
+            .filter(
+                ($node): $node is Element =>
+                    $node.nodeType === Node.ELEMENT_NODE,
+            )
+            .forEach(($el) => {
+                $el.setAttribute('slot', this.uniqueId);
+                $parent.appendChild($el);
+                this.slottedElements.push($el);
+            });
+    }
+
+    disconnectedCallback() {
+        this.slotChain.forEach(($slot) => $slot.remove());
+        this.slotChain = [];
+
+        const slot = this.host.shadowRoot!.querySelector('slot')!;
+        this.slottedElements.forEach(($node) => {
+            slot.appendChild($node);
+        });
+        this.slottedElements = [];
+    }
+
+    render() {
+        return (
+            <Host>
+                <slot />
+                <slot name={this.uniqueId} />
+            </Host>
+        );
+    }
+}
diff --git a/packages/components/src/components/es-hole-puncher/readme.md b/packages/components/src/components/es-hole-puncher/readme.md
@@ -0,0 +1,23 @@
+# es-hole-puncher
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Overview
+
+Punches a hole through all parent shadow DOMs into the light DOM.
+Any slotted chlid will be moved into the light, and a chain of slots
+brings the slotted children back into position.
+
+## Properties
+
+| Property                | Attribute   | Description                            | Type     | Default     |
+| ----------------------- | ----------- | -------------------------------------- | -------- | ----------- |
+| `uniqueId` _(required)_ | `unique-id` | The unique ID to use for the slot path | `string` | `undefined` |
+
+
+----------------------------------------------
+
+
diff --git a/packages/editor/monaco.d.ts b/packages/editor/monaco.d.ts
@@ -1 +1 @@
-export * from 'monaco-editor';
+export * from '@eventstore-ui/monaco-editor';
diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -14,7 +14,6 @@
     "unpkg": "dist/components/components.js",
     "files": [
         "dist/",
-        "workers/",
         "/configure.d.ts",
         "/configure.js",
         "/initialize.d.ts",
@@ -31,15 +30,9 @@
         "build": "run-s \"build:*\"",
         "dev": "stencil build --dev --watch --serve",
         "build:utils": "run-p \"utils:*\"",
-        "build:workers": "run-p \"workers:*\"",
         "build:stencil": "stencil build --docs",
         "utils:initialize": "tsc ./utils/initialize.ts --target esnext --moduleResolution node --declaration --outDir . ",
         "utils:configure": "tsc ./utils/configure.ts --declaration --outDir . ",
-        "workers:main": "rollup ../../node_modules/monaco-editor/esm/vs/editor/editor.worker.js --file ./workers/editor.worker.js --format iife --output.name editorWorker --context self",
-        "workers:json": "rollup ../../node_modules/monaco-editor/esm/vs/language/json/json.worker.js --file ./workers/json.worker.js --format iife --output.name jsonWorker --context self",
-        "workers:typescript": "rollup ../../node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js --file ./workers/ts.worker.js --format iife --output.name tsWorker --context self",
-        "workers:css": "rollup ../../node_modules/monaco-editor/esm/vs/language/css/css.worker.js --file ./workers/css.worker.js --format iife --output.name cssWorker --context self",
-        "workers:html": "rollup ../../node_modules/monaco-editor/esm/vs/language/html/html.worker.js --file ./workers/html.worker.js --format iife --output.name htmlWorker --context self",
         "docs": "run-s \"docs:*\"",
         "docs:stencil": "stencil build --docs-json ../../documentation/generated/editor.stencil.json",
         "docs:typedoc": "typedoc --tsconfig ./utils/tsconfig.json --json ../../documentation/generated/editor.typedoc.json",
@@ -66,7 +59,7 @@
         }
     },
     "dependencies": {
-        "monaco-editor": "^0.22.3"
+        "@eventstore-ui/monaco-editor": "workspace:*"
     },
     "peerDependencies": {
         "@eventstore-ui/components": "^1.0.0",
@@ -83,7 +76,9 @@
         "jest": "^27.4.5",
         "npm-run-all": "^4.1.5",
         "puppeteer": "^19.5.0",
-        "rollup": "^2.52.7",
+        "rollup": "^4.18.0",
+        "rollup-plugin-copy": "3.5.0",
+        "rollup-plugin-import-css": "3.5.0",
         "typedoc": "0.24.8",
         "typescript": "5.1.6"
     }

diff --git a/packages/editor/src/assets/codicon.css b/packages/editor/src/assets/codicon.css
diff --git a/packages/editor/src/assets/codicon.ttf b/packages/editor/src/assets/codicon.ttf
diff --git a/packages/editor/src/components.d.ts b/packages/editor/src/components.d.ts
@@ -5,8 +5,8 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { editor } from "monaco-editor";
-export { editor } from "monaco-editor";
+import { editor } from "@eventstore-ui/monaco-editor";
+export { editor } from "@eventstore-ui/monaco-editor";
 export namespace Components {
     /**
      * Monaco editor wrapped in a web component. Handles re-layout on container resize

diff --git a/packages/editor/src/es-editor/es-editor.css b/packages/editor/src/es-editor/es-editor.css
@@ -1,5 +1,3 @@
-@import './monaco.css';
-
 /**
  * @prop --editor-width: Sets the width of the editor. (default: 100%)
  * @prop --editor-height: Sets the height of the editor. (default: 300px)

diff --git a/packages/editor/src/es-editor/es-editor.tsx b/packages/editor/src/es-editor/es-editor.tsx
@@ -1,5 +1,5 @@
 import { Component, h, Element, Prop } from '@stencil/core';
-import type { editor } from 'monaco-editor';
+import type { editor } from '@eventstore-ui/monaco-editor';
 import { MONACO } from '../utils/globals';
 import { logger } from '../utils/logger';
 
@@ -20,6 +20,12 @@ export class YEditor {
     @Prop() editorRef?: (editor: editor.IStandaloneCodeEditor) => void;
     private editorInstance?: editor.IStandaloneCodeEditor;
 
+    private holeId!: string;
+
+    componentWillLoad() {
+        this.holeId = `es-editor-${Math.random().toString(16).slice(2)}`;
+    }
+
     componentDidLoad() {
         this.initializeEditor();
     }
@@ -34,11 +40,11 @@ export class YEditor {
 
     render() {
         return (
-            <es-resize-observer
-                onSizeChanged={this.resize}
-                class={'container'}
-                ref={this.captureContainer}
-            />
+            <es-resize-observer onSizeChanged={this.resize} class={'container'}>
+                <es-hole-puncher uniqueId={this.holeId}>
+                    <div ref={this.captureContainer} />
+                </es-hole-puncher>
+            </es-resize-observer>
         );
     }