feat(dees-editor): integrate Monaco version management and update CDN references
This commit is contained in:
		@@ -10,7 +10,8 @@
 | 
				
			|||||||
    "test": "tstest test/ --web --verbose --timeout 30 --logfile",
 | 
					    "test": "tstest test/ --web --verbose --timeout 30 --logfile",
 | 
				
			||||||
    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production --bundler esbuild",
 | 
					    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production --bundler esbuild",
 | 
				
			||||||
    "watch": "tswatch element",
 | 
					    "watch": "tswatch element",
 | 
				
			||||||
    "buildDocs": "tsdoc"
 | 
					    "buildDocs": "tsdoc",
 | 
				
			||||||
 | 
					    "postinstall": "node scripts/update-monaco-version.cjs"
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  "author": "Lossless GmbH",
 | 
					  "author": "Lossless GmbH",
 | 
				
			||||||
  "license": "MIT",
 | 
					  "license": "MIT",
 | 
				
			||||||
 
 | 
				
			|||||||
							
								
								
									
										
											BIN
										
									
								
								readme.plan.md
									
									
									
									
									
								
							
							
						
						
									
										
											BIN
										
									
								
								readme.plan.md
									
									
									
									
									
								
							
										
											Binary file not shown.
										
									
								
							
							
								
								
									
										44
									
								
								scripts/update-monaco-version.cjs
									
									
									
									
									
										Executable file
									
								
							
							
						
						
									
										44
									
								
								scripts/update-monaco-version.cjs
									
									
									
									
									
										Executable file
									
								
							@@ -0,0 +1,44 @@
 | 
				
			|||||||
 | 
					#!/usr/bin/env node
 | 
				
			||||||
 | 
					const fs = require('fs');
 | 
				
			||||||
 | 
					const path = require('path');
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const projectRoot = path.resolve(__dirname, '..');
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					function resolveMonacoPackageJson() {
 | 
				
			||||||
 | 
					  try {
 | 
				
			||||||
 | 
					    const resolvedPath = require.resolve('monaco-editor/package.json', {
 | 
				
			||||||
 | 
					      paths: [projectRoot],
 | 
				
			||||||
 | 
					    });
 | 
				
			||||||
 | 
					    return resolvedPath;
 | 
				
			||||||
 | 
					  } catch (error) {
 | 
				
			||||||
 | 
					    console.error('[dees-editor] Unable to resolve monaco-editor/package.json');
 | 
				
			||||||
 | 
					    throw error;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					function getMonacoVersion() {
 | 
				
			||||||
 | 
					  const monacoPackagePath = resolveMonacoPackageJson();
 | 
				
			||||||
 | 
					  const monacoPackage = require(monacoPackagePath);
 | 
				
			||||||
 | 
					  if (!monacoPackage.version) {
 | 
				
			||||||
 | 
					    throw new Error('[dees-editor] monaco-editor/package.json does not expose a version field');
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  return monacoPackage.version;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					function writeVersionModule(version) {
 | 
				
			||||||
 | 
					  const targetDir = path.join(projectRoot, 'ts_web', 'elements', 'dees-editor');
 | 
				
			||||||
 | 
					  fs.mkdirSync(targetDir, { recursive: true });
 | 
				
			||||||
 | 
					  const targetFile = path.join(targetDir, 'version.ts');
 | 
				
			||||||
 | 
					  const fileContent = `// Auto-generated by scripts/update-monaco-version.cjs\nexport const MONACO_VERSION = '${version}';\n`;
 | 
				
			||||||
 | 
					  fs.writeFileSync(targetFile, fileContent, 'utf8');
 | 
				
			||||||
 | 
					  console.log(`[dees-editor] Wrote ${path.relative(projectRoot, targetFile)} with monaco-editor@${version}`);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					try {
 | 
				
			||||||
 | 
					  const version = getMonacoVersion();
 | 
				
			||||||
 | 
					  writeVersionModule(version);
 | 
				
			||||||
 | 
					} catch (error) {
 | 
				
			||||||
 | 
					  console.error('[dees-editor] Failed to update Monaco version module.');
 | 
				
			||||||
 | 
					  console.error(error instanceof Error ? error.message : error);
 | 
				
			||||||
 | 
					  process.exitCode = 1;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
@@ -8,6 +8,7 @@ import {
 | 
				
			|||||||
  cssManager,
 | 
					  cssManager,
 | 
				
			||||||
} from '@design.estate/dees-element';
 | 
					} from '@design.estate/dees-element';
 | 
				
			||||||
import * as domtools from '@design.estate/dees-domtools';
 | 
					import * as domtools from '@design.estate/dees-domtools';
 | 
				
			||||||
 | 
					import { MONACO_VERSION } from './version.js';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
import type * as monaco from 'monaco-editor';
 | 
					import type * as monaco from 'monaco-editor';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -80,10 +81,11 @@ export class DeesEditor extends DeesElement {
 | 
				
			|||||||
  ): Promise<void> {
 | 
					  ): Promise<void> {
 | 
				
			||||||
    super.firstUpdated(_changedProperties);
 | 
					    super.firstUpdated(_changedProperties);
 | 
				
			||||||
    const container = this.shadowRoot.getElementById('container');
 | 
					    const container = this.shadowRoot.getElementById('container');
 | 
				
			||||||
 | 
					    const monacoCdnBase = `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}`;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    if (!DeesEditor.monacoDeferred) {
 | 
					    if (!DeesEditor.monacoDeferred) {
 | 
				
			||||||
      DeesEditor.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 scriptUrl = `${monacoCdnBase}/min/vs/loader.js`;
 | 
				
			||||||
      const script = document.createElement('script');
 | 
					      const script = document.createElement('script');
 | 
				
			||||||
      script.src = scriptUrl;
 | 
					      script.src = scriptUrl;
 | 
				
			||||||
      script.onload = () => {
 | 
					      script.onload = () => {
 | 
				
			||||||
@@ -94,7 +96,7 @@ export class DeesEditor extends DeesElement {
 | 
				
			|||||||
    await DeesEditor.monacoDeferred.promise;
 | 
					    await DeesEditor.monacoDeferred.promise;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    (window as any).require.config({
 | 
					    (window as any).require.config({
 | 
				
			||||||
      paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor/min/vs' },
 | 
					      paths: { vs: `${monacoCdnBase}/min/vs` },
 | 
				
			||||||
    });
 | 
					    });
 | 
				
			||||||
    (window as any).require(['vs/editor/editor.main'], async () => {
 | 
					    (window as any).require(['vs/editor/editor.main'], async () => {
 | 
				
			||||||
      const editor = ((window as any).monaco.editor as typeof monaco.editor).create(container, {
 | 
					      const editor = ((window as any).monaco.editor as typeof monaco.editor).create(container, {
 | 
				
			||||||
@@ -109,7 +111,7 @@ export class DeesEditor extends DeesElement {
 | 
				
			|||||||
      this.editorDeferred.resolve(editor);
 | 
					      this.editorDeferred.resolve(editor);
 | 
				
			||||||
    });
 | 
					    });
 | 
				
			||||||
    const css = await (
 | 
					    const css = await (
 | 
				
			||||||
      await fetch('https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/editor/editor.main.css')
 | 
					      await fetch(`${monacoCdnBase}/min/vs/editor/editor.main.css`)
 | 
				
			||||||
    ).text();
 | 
					    ).text();
 | 
				
			||||||
    const styleElement = document.createElement('style');
 | 
					    const styleElement = document.createElement('style');
 | 
				
			||||||
    styleElement.textContent = css;
 | 
					    styleElement.textContent = css;
 | 
				
			||||||
 
 | 
				
			|||||||
							
								
								
									
										2
									
								
								ts_web/elements/dees-editor/version.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										2
									
								
								ts_web/elements/dees-editor/version.ts
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,2 @@
 | 
				
			|||||||
 | 
					// Auto-generated by scripts/update-monaco-version.cjs
 | 
				
			||||||
 | 
					export const MONACO_VERSION = '0.52.2';
 | 
				
			||||||
@@ -19,7 +19,7 @@ export * from './dees-contextmenu.js';
 | 
				
			|||||||
export * from './dees-dataview-codebox.js';
 | 
					export * from './dees-dataview-codebox.js';
 | 
				
			||||||
export * from './dees-dataview-statusobject.js';
 | 
					export * from './dees-dataview-statusobject.js';
 | 
				
			||||||
export * from './dees-dashboardgrid/index.js';
 | 
					export * from './dees-dashboardgrid/index.js';
 | 
				
			||||||
export * from './dees-editor.js';
 | 
					export * from './dees-editor/dees-editor.js';
 | 
				
			||||||
export * from './dees-editor-markdown.js';
 | 
					export * from './dees-editor-markdown.js';
 | 
				
			||||||
export * from './dees-editor-markdownoutlet.js';
 | 
					export * from './dees-editor-markdownoutlet.js';
 | 
				
			||||||
export * from './dees-form-submit.js';
 | 
					export * from './dees-form-submit.js';
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user