@vmz/plugin-monaco 0.0.0 → 0.0.2

package/README.md

@@ -1,3 +1,36 @@
 # @vmz/plugin-monaco
 
-Placeholder package (0.0.0). Reserved for the VMZ project.
+## Bring an IDE-class editor to the browser
+
+`@vmz/plugin-monaco` integrates Monaco for VMZ applications that genuinely need a rich code-editing experience: browser
+IDEs, serious language playgrounds, configuration workbenches, and professional developer tools.
+
+## When Monaco is the right answer
+
+Monaco is familiar to many developers because it powers the editing experience behind VS Code. That capability comes
+with a meaningful browser cost. It is the right choice when editing is central to the product and advanced editor
+behavior justifies the payload; it is not the automatic choice for a small form field or a documentation snippet.
+
+For lighter embedded editing, choose `@vmz/plugin-codemirror`. The distinction is intentionally product-oriented rather
+than ideological: VMZ should let an application choose the right interaction tool while still keeping delivery and
+resumption boundaries visible.
+
+| Monaco is a strong fit for...               | Prefer CodeMirror for...                    |
+|---------------------------------------------|---------------------------------------------|
+| Browser IDEs and rich developer workbenches | Lightweight embedded editing                |
+| Products where editing is the main task     | Documentation pages and smaller playgrounds |
+
+## VMZ boundary
+
+Monaco owns the editor experience. VMZ owns the surrounding page, its SSR fallback, the Island or client boundary that
+loads Monaco, and the test and deployment evidence for that boundary. This prevents one rich widget from turning the
+whole application into an eager client runtime.
+
+## Features worth paying for 🚀
+
+- Familiar IDE-style editing for developer audiences.
+- A foundation for rich language services, diagnostics, navigation, and completion.
+- Strong fit for multi-file playgrounds and browser workbenches.
+- An interaction surface substantial enough to justify an isolated delivery boundary.
+
+Monaco works best when users arrive to edit, inspect, or debug code. VMZ's Island and application boundaries make that tradeoff explicit: deliver the IDE when the user reaches the IDE experience.

package/components/Monaco.vmz

@@ -0,0 +1,39 @@
+<template>
+  <div class="monaco-host" data-vmz-monaco style="min-height: 240px; width: 100%"></div>
+</template>
+
+<script client>
+import { mountMonaco } from '@vmz/plugin-monaco/runtime';
+
+export default class Monaco {
+  public value: string = '';
+  public language: string = 'typescript';
+  public theme: string = 'vs-dark';
+  public readOnly: boolean = false;
+
+  #api: { dispose: () => void } | null = null;
+
+  async onMount() {
+    const root = this.__vmzDomRoot;
+    const el =
+      (root && root.nodeType === 1 && root.matches?.('[data-vmz-monaco]') && root) ||
+      root?.querySelector?.('[data-vmz-monaco]') ||
+      root;
+    if (!el || el.nodeType !== 1) return;
+    this.#api = await mountMonaco(el, {
+      value: this.value,
+      language: this.language,
+      theme: this.theme,
+      readOnly: this.readOnly,
+      onChange: (v) => {
+        this.value = v;
+      },
+    });
+  }
+
+  onDestroy() {
+    this.#api?.dispose();
+    this.#api = null;
+  }
+}
+</script>

package/package.json

@@ -1,10 +1,38 @@
 {
   "name": "@vmz/plugin-monaco",
-  "version": "0.0.0",
-  "description": "VMZ placeholder — not for production use.",
+  "version": "0.0.2",
+  "type": "module",
+  "description": "VMZ Monaco editor adapter - <Monaco>",
   "license": "MIT",
-  "private": false,
-  "files": [
-    "README.md"
-  ]
+  "main": "./vmz.plugin.ts",
+  "types": "./vmz.plugin.ts",
+  "exports": {
+    ".": {
+      "types": "./vmz.plugin.ts",
+      "default": "./vmz.plugin.ts"
+    },
+    "./runtime": {
+      "types": "./runtime.ts",
+      "default": "./runtime.ts"
+    }
+  },
+  "dependencies": {
+    "@vmz/plugin": "0.0.2"
+  },
+  "peerDependencies": {
+    "monaco-editor": ">=0.52"
+  },
+  "keywords": [
+    "vmz",
+    "plugin",
+    "monaco",
+    "editor"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/doki-land/vmz-framework.git"
+  }
 }

package/runtime.ts

@@ -0,0 +1,35 @@
+/**
+ * Monaco mount helper (browser). First slice: imperative create/dispose.
+ * Peer: monaco-editor.
+ */
+
+export type MountMonacoOptions = {
+    value?: string;
+    language?: string;
+    theme?: string;
+    readOnly?: boolean;
+    onChange?: (v: string) => void;
+};
+
+export async function mountMonaco(el: HTMLElement, opts: MountMonacoOptions = {}) {
+    const monaco = await import('monaco-editor');
+    const editor = monaco.editor.create(el, {
+        value: opts.value ?? '',
+        language: opts.language ?? 'typescript',
+        theme: opts.theme ?? 'vs-dark',
+        readOnly: !!opts.readOnly,
+        automaticLayout: true,
+        minimap: { enabled: false },
+    });
+    if (typeof opts.onChange === 'function') {
+        editor.onDidChangeModelContent(() => {
+            opts.onChange?.(editor.getValue());
+        });
+    }
+    return {
+        editor,
+        getValue: () => editor.getValue(),
+        setValue: (v: string) => editor.setValue(v ?? ''),
+        dispose: () => editor.dispose(),
+    };
+}

package/vmz.plugin.ts

@@ -0,0 +1,46 @@
+import { definePlugin, loadPluginSource } from '@vmz/plugin';
+
+const source = loadPluginSource(import.meta.url, 'components/Monaco.vmz');
+
+export default definePlugin({
+    name: '@vmz/plugin-monaco',
+    version: '0.1.0',
+    protocol: '0.1.0',
+    stages: ['workspace_resolve', 'analyzer'],
+    deterministic: true,
+    async contribute(ctx) {
+        if (ctx.stage === 'workspace_resolve') {
+            return {
+                stage: 'workspace_resolve',
+                cacheKey: `@vmz/plugin-monaco:Monaco.vmz:${source.contentHash.slice(0, 12)}`,
+                items: [
+                    {
+                        id: 'component-monaco',
+                        kind: 'source',
+                        path: 'src/components/Monaco.vmz',
+                        content: source.content,
+                        contentHash: source.contentHash,
+                        materialize: true,
+                    },
+                ],
+            };
+        }
+        if (ctx.stage === 'analyzer') {
+            return {
+                stage: 'analyzer',
+                cacheKey: '@vmz/plugin-monaco:analyzer',
+                items: [
+                    {
+                        id: 'component-monaco-online',
+                        kind: 'analyzer',
+                        path: 'src/components/Monaco.vmz',
+                        severity: 'advice',
+                        message: 'Monaco component online',
+                        code: 'vmz.plugin.monaco',
+                    },
+                ],
+            };
+        }
+        return { stage: ctx.stage, items: [] };
+    },
+});