x4js 2.2.6 → 2.2.7

package/src/components/monaco/monaco.ts

@@ -0,0 +1,25 @@
+import { Component, ComponentProps } from '../../x4.js';
+
+import * as monaco from './bin/monaco.js';
+import "./bin/monaco.css"
+
+
+interface MonacoEditorProps extends ComponentProps {
+	language: "typescript" | "javascript" | "json" | "css" | "html";
+	theme?: string;
+	content?: string;
+}
+
+export class MonacoEditor extends Component<MonacoEditorProps> {
+
+	constructor( props: MonacoEditorProps ) {
+		super( props );
+		
+		monaco.editor.create( this.dom as HTMLElement, {
+			value: props.content,
+			language: props.language,
+			theme: props.theme,
+		});
+	}
+}
+

package/src/components/monaco/readme.md

@@ -0,0 +1,3 @@
+# using monaco in x4
+
+you must copy ./bin/* in your destination folder

package/src/components/monaco/sources/build.js

@@ -0,0 +1,41 @@
+import * as esbuild from 'esbuild';
+
+const MONACO_DIR = 'node_modules/monaco-editor/esm/vs';
+
+const commonConfig = {
+	bundle: true,
+	minify: true,
+	format: 'esm',
+	target: 'es2022',
+	logLevel: 'info',
+};
+
+async function build() {
+	// 1. Build des Workers (obligatoires pour la coloration/validation)
+	// On génère uniquement les workers dont on a besoin
+	await esbuild.build({
+		...commonConfig,
+		entryPoints: {
+			'editor.worker': 	`${MONACO_DIR}/editor/editor.worker.js`,
+			'ts.worker': 		`${MONACO_DIR}/language/typescript/ts.worker.js`,
+			'css.worker': 		`${MONACO_DIR}/language/css/css.worker.js`,
+			'html.worker': 		`${MONACO_DIR}/language/html/html.worker.js`,
+			'json.worker': 		`${MONACO_DIR}/language/json/json.worker.js`,
+		},
+		outdir: 'dist/workers',
+	});
+
+	// 2. Build de l'application principale
+	await esbuild.build({
+		...commonConfig,
+		entryPoints: ['index.ts'],
+		outfile: 'dist/monaco.js',
+		globalName: 'monaco',
+		loader: {
+			'.ttf': 'file',
+			'.css': 'css',
+		},
+	});
+}
+
+build();

package/src/components/monaco/sources/demo.js

@@ -0,0 +1,57 @@
+import monaco from './dist/monaco.js';
+
+const myLibCode = `
+    declare namespace MyAPI {
+        /**
+         * Calcule une performance optimale.
+         * @param value Le coefficient d'entrée.
+         */
+        function compute(value: number): string;
+    }
+`;
+
+const myLibUri = 'ts:filename/myapi.d.ts';
+
+const ts = (monaco.languages).typescript;
+ts.typescriptDefaults.addExtraLib(myLibCode, myLibUri);
+
+// Facultatif : Créer un modèle pour que l'éditeur "voie" le fichier
+// Utile si tu veux que le "Go to Definition" fonctionne vers ce fichier
+monaco.editor.createModel(myLibCode, 'typescript', monaco.Uri.parse(myLibUri));
+
+
+const el = document.getElementById("container");
+
+globalThis.MonacoEnvironment = {
+	getWorkerUrl: function (_moduleId, label) {
+		if (label === 'json') return './dist/workers/json.worker.js';
+		if (label === 'css' || label === 'scss' || label === 'less') return './dist/workers/css.worker.js';
+		if (label === 'html') return './dist/workers/html.worker.js';
+		if (label === 'typescript' || label === 'javascript') return './dist/workers/ts.worker.js';
+		return './dist/workers/editor.worker.js';
+	}
+};
+
+monaco.languages["typescript"].typescriptDefaults.setCompilerOptions({
+	target: monaco.languages.typescript.ScriptTarget.ESNext,
+	allowNonTsExtensions: true,
+	moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+	module: monaco.languages.typescript.ModuleKind.CommonJS,
+	noEmit: true,
+	typeRoots: ["node_modules/@types"]
+});
+
+monaco.editor.create(el, {
+	value: `
+function test( ) {
+	for( let i=0; i<1000; i++ ) {
+		console.log( "i", i );
+	}
+}
+
+test( );
+			`,
+	language: 'typescript',
+	theme: 'vs-dark'
+});
+

package/src/components/monaco/sources/editor.worker.ts

@@ -0,0 +1 @@
+import 'monaco-editor/esm/vs/editor/editor.worker.js';

package/src/components/monaco/sources/index.ts

@@ -0,0 +1,7 @@
+import * as monaco from 'monaco-editor';
+
+import 'monaco-editor/esm/vs/language/html/monaco.contribution.js';
+import 'monaco-editor/esm/vs/language/css/monaco.contribution.js';
+import 'monaco-editor/esm/vs/language/typescript/monaco.contribution.js';
+
+export default monaco;

package/src/components/monaco/sources/package.json

@@ -0,0 +1,7 @@
+{
+	"type": "module",
+  	"dependencies": {
+	    "esbuild": "^0.27.4",
+	    "monaco-editor": "^0.55.1"
+  	}
+}

package/src/components/monaco/sources/test.html

@@ -0,0 +1,9 @@
+<html>
+<link rel="stylesheet" href="./dist/monaco.css">
+<script type="module" src="demo.js"></script>
+
+<body>
+	<div style="width:500px; height: 500px; border: 1px solid red;" id="container"></div>
+</body>
+
+</html>

package/src/components/monaco/sources/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"moduleResolution": "node",
+		"allowSyntheticDefaultImports": true,
+		"target": "ESNext",
+		"module": "ESNext",
+		"baseUrl": ".",
+		"paths": {
+			"monaco-editor/*": [
+				"node_modules/monaco-editor/*"
+			]
+		},
+	    "esModuleInterop": true,
+    	"skipLibCheck": true
+	}
+}