@pb33f/cowboy-components 0.6.6 → 0.7.0

package/dist/components/editor/editor.js

@@ -4,37 +4,38 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import * as monaco from "monaco-editor";
+import { configureMonacoYaml } from "monaco-yaml";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
-// -- Monaco Editor Imports --
-import * as monaco from "monaco-editor";
-// @ts-ignore
-import editorWorker from "monaco-editor/esm/vs/editor/editor.worker.js?worker";
-// @ts-ignore
-import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker.js?worker";
-// @ts-ignore
-import cssWorker from "monaco-editor/esm/vs/language/css/css.worker.js?worker";
-// @ts-ignore
-import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker.js?worker";
 import { DocumentReferenceClicked, EditorClicked, EditorUpdated } from "../../events/doctor.js";
 import { SpecEditorBreadcrumb } from "./editor-breadcrumb.js";
 import editorCss from "./editor.css.js";
-// @ts-ignore
-self.MonacoEnvironment = {
-    getWorker(_, label) {
-        if (label === "json") {
-            return new jsonWorker();
-        }
-        if (label === "html") {
-            return new htmlWorker();
-        }
-        if (label === "css" || label === "scss" || label === "less") {
-            return new cssWorker();
+// schemas
+import openapi3 from './schemas/openapi3.json';
+import openapi31 from './schemas/openapi31.json';
+// register the YAML worker (only once)
+configureMonacoYaml(monaco, {
+    // mirror the old setDiagnosticsOptions flags:
+    enableSchemaRequest: false, // we’re inlining the schemas
+    hover: true,
+    completion: true,
+    validate: true,
+    format: true,
+    schemas: [
+        // {
+        //     uri:       "inmemory://schema/openapi-3.0.json",
+        //     fileMatch: ["*.yaml","*.yml"],
+        //     schema:    openapi3
+        // },
+        {
+            uri: "inmemory://schema/openapi-3.1.json",
+            fileMatch: ["*.yaml", "*.yml"],
+            schema: openapi31
         }
-        return new editorWorker();
-    },
-};
+    ]
+});
 const editorGreen = '#00FF00FF';
 const editorGreenDim = '#008a00';
 const editorRed = '#ff3c74';
@@ -193,7 +194,9 @@ let SpecEditor = class SpecEditor extends LitElement {
     constructor(id = "spec") {
         super();
         this.container = createRef();
+        this.currentVersion = null;
         this.decorationIdToLinkTarget = new Map();
+        this.linkRun = false;
         this.id = id;
         this.links = [];
         this.decorationIdToLinkTarget = new Map();
@@ -272,11 +275,21 @@ let SpecEditor = class SpecEditor extends LitElement {
         this.editor?.setValue(value);
     }
     getValue() {
-        return this.editor?.getValue();
+        if (this.editor) {
+            return this.editor.getValue();
+        }
+        return '';
+    }
+    updated(changed) {
+        if (changed.has("links")) {
+            this.applyLinkDecorations();
+        }
     }
     clearDecorations() {
         this.linkDecorations.clear();
-        this.editor?.deltaDecorations([], []);
+        this.linkProvider?.dispose();
+        this.links = [];
+        this.linkRun = false;
     }
     clearAllMarkers() {
         monaco.editor.removeAllMarkers("owner-" + this.id);
@@ -293,14 +306,58 @@ let SpecEditor = class SpecEditor extends LitElement {
             }
         });
     }
+    onDocChange() {
+        if (this.model) {
+            const text = this.model.getValue();
+            // look for "openapi: 3.0.x" or "3.1.x"
+            const m = text.match(/^openapi:\s*(3\.\d+)(?:\.\d+)?/m);
+            if (!m) {
+                return; // no version yet
+            }
+            const ver = m[1].startsWith('3.1') ? '3.1' : '3.0';
+            if (ver === this.currentVersion) {
+                return; // no change
+            }
+            this.currentVersion = ver;
+            // pick the right JSON schema
+            const schema = (ver === '3.1') ? openapi31 : openapi3;
+            const uri = `inmemory://schema/openapi-${ver}.json`;
+            // 4) update monaco-yaml with the new schema
+            const settings = {
+                uri,
+                fileMatch: ['**/*.yaml', '**/*.yml'],
+                schema
+            };
+            this.monacoYaml.update({ schemas: [settings] });
+        }
+    }
     firstUpdated() {
+        // monkey patch the monaco API to drop monaco-yaml’s link providers
+        const origReg = monaco.languages.registerLinkProvider.bind(monaco.languages);
+        monaco.languages.registerLinkProvider = (language, provider) => {
+            const code = provider.provideLinks.toString();
+            // drop *both* of monaco‑yaml's providers by matching on the workerManager call:
+            if (code.includes('workerManager.getWorker') || code.includes('worker.findLinks')) {
+                // return a no‑op disposable
+                return { dispose() { } };
+            }
+            return origReg(language, provider);
+        };
+        this.monacoYaml = configureMonacoYaml(monaco, {
+            enableSchemaRequest: false,
+            hover: true,
+            completion: true,
+            validate: true,
+            format: true,
+            schemas: [] // start empty
+        });
         setupMonaco();
-        const uri = monaco.Uri.parse("inmemory://doc-" + this.id);
+        const uri = monaco.Uri.parse("inmemory://doc-" + this.id + '.yaml');
         const value = this.getCode();
         this.model = monaco.editor.createModel(value, "yaml", uri);
         this.editor = monaco.editor.create(this.container.value, {
             model: this.model,
-            language: 'json',
+            language: 'yaml',
             theme: 'pb33f',
             glyphMargin: true,
             readOnly: this.readOnly,
@@ -317,7 +374,9 @@ let SpecEditor = class SpecEditor extends LitElement {
                 sticky: true,
             },
         });
-        monaco.languages.registerLinkProvider('yaml', { provideLinks: this.provideLinks.bind(this) });
+        // restore the original API so nothing else is affected
+        monaco.languages.registerLinkProvider = origReg;
+        this.linkProvider = monaco.languages.registerLinkProvider('yaml', { provideLinks: this.provideLinks.bind(this) });
         monaco.editor.registerLinkOpener({ open: this.open.bind(this) });
         // monaco.languages.registerCodeActionProvider("yaml", {
         //     provideCodeActions: (
@@ -406,6 +465,7 @@ let SpecEditor = class SpecEditor extends LitElement {
                         id: this.id
                     }
                 }));
+                this.onDocChange();
             }
             else {
                 this.firstboot = false;
@@ -452,6 +512,8 @@ let SpecEditor = class SpecEditor extends LitElement {
         //     }
         // }
         //})
+        // also do an initial run
+        this.onDocChange();
         window
             .matchMedia("(prefers-color-scheme: dark)")
             .addEventListener("change", () => {
@@ -471,38 +533,33 @@ let SpecEditor = class SpecEditor extends LitElement {
         return Promise.resolve(true);
     }
     applyLinkDecorations() {
-        if (this.editor) {
-            this.linkDecorations.clear();
-            const newDecorations = this.links.map((link) => {
-                let inlineClassName = 'ref';
-                let glyphClassName = 'ref-margin';
-                let hoverMessage = { value: "Reference (_JSON Pointer_) to: **" + link.fullDefinition + "**" };
-                let minimap = editorGreenDim;
-                if (link.isPolymorphic) {
-                    inlineClassName = 'ref-poly';
-                    glyphClassName = 'ref-poly-margin';
-                    hoverMessage = { value: "Polymorphic Reference (_JSON Pointer_) to: **" + link.fullDefinition + "**" };
-                    minimap = editorBrown;
-                }
-                return {
-                    range: new monaco.Range(link.line, link.startColumn, link.line, link.endColumn),
-                    options: {
-                        inlineClassName: inlineClassName,
-                        glyphMarginClassName: glyphClassName,
-                        glyphMarginHoverMessage: hoverMessage,
-                        minimap: { color: minimap, position: monaco.editor.MinimapPosition.Inline }
-                    },
-                };
-            });
-            const decorationIds = this.linkDecorations.set(newDecorations);
-            this.decorationIdToLinkTarget.clear();
-            decorationIds.forEach((decorationId, index) => {
-                const target = this.links[index].jsonPath + '||' + this.links[index].targetLine + ':' + this.links[index].targetColumn + "||" + this.links[index].fullDefinition + "||" + this.links[index].rolodexIdHash;
-                this.decorationIdToLinkTarget.set(decorationId, target);
+        if (!this.editor) {
+            return;
+        }
+        this.linkDecorations.clear();
+        const newDecorations = this.links.map(link => ({
+            range: new monaco.Range(link.line, link.startColumn, link.line, link.endColumn),
+            options: {
+                inlineClassName: link.isPolymorphic ? 'ref-poly' : 'ref',
+                glyphMarginClassName: link.isPolymorphic ? 'ref-poly-margin' : 'ref-margin',
+                glyphMarginHoverMessage: {
+                    value: link.isPolymorphic
+                        ? `Polymorphic reference → **${link.fullDefinition}**`
+                        : `Reference → **${link.fullDefinition}**`
+                },
+            }
+        }));
+        this.linkDecorations.set(newDecorations);
+        if (this.links.length) {
+            this.linkProvider = monaco.languages.registerLinkProvider('yaml', {
+                provideLinks: this.provideLinks.bind(this)
             });
         }
     }
     provideLinks(_model, _token) {
+        if (this.linkRun) {
+            return null;
+        }
         const links = this.links.map((link) => {
             const range = new monaco.Range(link.line, link.startColumn, link.line, link.endColumn);
             const linkString = link.jsonPath + '||' + link.targetLine + ':' + link.targetColumn + "||" + link.fullDefinition + "||" + link.rolodexIdHash;
@@ -511,6 +568,7 @@ let SpecEditor = class SpecEditor extends LitElement {
                 url: monaco.Uri.parse(`doctor://${encodeURIComponent(linkString)}`),
             };
         });
+        this.linkRun = true;
         return { links };
     }
 };
@@ -527,9 +585,6 @@ __decorate([
 __decorate([
     property()
 ], SpecEditor.prototype, "code", void 0);
-__decorate([
-    state()
-], SpecEditor.prototype, "links", void 0);
 __decorate([
     property()
 ], SpecEditor.prototype, "minimapVisible", void 0);

package/dist/components/editor/init.js

@@ -0,0 +1,28 @@
+"use strict";
+// ---------- FILE: src/editor‑init.ts ----------
+// (!) This module is only responsible for wiring the workers.
+// Import it before importing anything else from "monaco‑editor".
+// // @ts-ignore
+// import editorWorker from "monaco‑editor/esm/vs/editor/editor.worker.js?worker";
+// // @ts-ignore
+// import jsonWorker   from "monaco‑editor/esm/vs/language/json/json.worker.js?worker";
+// // @ts-ignore
+// import htmlWorker   from "monaco‑editor/esm/vs/language/html/html.worker.js?worker";
+// // @ts-ignore
+// import cssWorker    from "monaco‑editor/esm/vs/language/css/css.worker.js?worker";
+// // @ts-ignore
+// import yamlWorker   from "monaco‑yaml/yaml.worker.js?worker";
+//
+// declare let self: any;
+// self.MonacoEnvironment = {
+//     getWorker(_moduleId: string, label: string) {
+//         switch (label) {
+//             case "json":  return new jsonWorker();
+//             case "html":  return new htmlWorker();
+//             case "css":   return new cssWorker();
+//             case "yaml":  return new yamlWorker();
+//             default:      return new editorWorker();
+//         }
+//     }
+// };
+// export {};