@vmz/plugin-codemirror 0.0.0 → 0.0.3

package/README.md

@@ -1,3 +1,38 @@
 # @vmz/plugin-codemirror
 
-Placeholder package (0.0.0). Reserved for the VMZ project.
+## A capable editor without making every page an IDE
+
+`@vmz/plugin-codemirror` brings CodeMirror 6 into VMZ applications. It is a strong choice for embedded editors,
+documentation playgrounds, configuration surfaces, query builders, note-taking tools, and products that need serious
+text editing while still respecting browser cost.
+
+## Why choose CodeMirror
+
+CodeMirror is generally the lighter editor option in the VMZ ecosystem. It offers a flexible modern editing foundation
+without assuming that every application needs the full weight of a desktop-IDE experience. That makes it especially
+suitable when an editor is one interaction region inside an otherwise content- or data-oriented page.
+
+Choose CodeMirror when you want a balanced editor. Choose `@vmz/plugin-monaco` when rich IDE-like behavior and VS Code
+familiarity outweigh the additional delivery cost.
+
+| Good fit                                              | Less suitable                                            |
+|-------------------------------------------------------|----------------------------------------------------------|
+| Embedded editors, playgrounds, and configurable tools | A product that requires the deepest IDE-style experience |
+| Pages where editor weight still matters               | A tiny input field that needs no code-editing behavior   |
+
+## VMZ boundary
+
+The editor is an interactive capability, not the page's architecture. VMZ remains responsible for deciding when the
+editor code is delivered, how its region resumes, and how the rest of the page remains SSR-readable and independently
+testable.
+
+## Product scenarios 📝
+
+- A documentation playground that activates only when the reader starts editing.
+- A query, rule, or configuration editor inside a larger operational UI.
+- A focused coding exercise that does not need a full IDE workbench.
+- A structured text tool whose extensions are chosen for the domain.
+
+The surrounding page should load as a normal VMZ page. The editor region becomes interactive when needed and owns its
+state and lifetime without forcing unrelated content into an eager client shell. That is why CodeMirror is often an
+intentional choice, not merely “the smaller Monaco.”

package/components/Codemirror.vmz

@@ -0,0 +1,33 @@
+<template>
+  <div class="codemirror-host" data-vmz-codemirror style="min-height: 200px; width: 100%"></div>
+</template>
+
+<script client>
+import { mountCodemirror } from '@vmz/plugin-codemirror/runtime';
+
+export default class Codemirror {
+  public value: string = '';
+
+  #api: { dispose: () => void } | null = null;
+
+  async onMount() {
+    const root = this.__vmzDomRoot;
+    const el =
+      (root && root.nodeType === 1 && root.matches?.('[data-vmz-codemirror]') && root) ||
+      root?.querySelector?.('[data-vmz-codemirror]') ||
+      root;
+    if (!el || el.nodeType !== 1) return;
+    this.#api = await mountCodemirror(el, {
+      value: this.value,
+      onChange: (v) => {
+        this.value = v;
+      },
+    });
+  }
+
+  onDestroy() {
+    this.#api?.dispose();
+    this.#api = null;
+  }
+}
+</script>

package/package.json

@@ -1,10 +1,40 @@
 {
   "name": "@vmz/plugin-codemirror",
-  "version": "0.0.0",
-  "description": "VMZ placeholder — not for production use.",
+  "version": "0.0.3",
+  "type": "module",
+  "description": "VMZ CodeMirror 6 editor adapter - <Codemirror>",
   "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.3"
+  },
+  "peerDependencies": {
+    "codemirror": ">=6",
+    "@codemirror/view": ">=6",
+    "@codemirror/state": ">=6"
+  },
+  "keywords": [
+    "vmz",
+    "plugin",
+    "codemirror",
+    "editor"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/doki-land/vmz-framework.git"
+  }
 }

package/runtime.ts

@@ -0,0 +1,40 @@
+/**
+ * CodeMirror 6 mount helper (browser).
+ */
+
+export type MountCodemirrorOptions = {
+    value?: string;
+    onChange?: (v: string) => void;
+};
+
+export async function mountCodemirror(el: HTMLElement, opts: MountCodemirrorOptions = {}) {
+    const { EditorView, basicSetup } = await import('codemirror').catch(async () => {
+        const view = await import('@codemirror/view');
+        const state = await import('@codemirror/state');
+        return {
+            EditorView: view.EditorView,
+            basicSetup: [] as unknown[],
+            EditorState: state.EditorState,
+        };
+    });
+    const { EditorState } = await import('@codemirror/state');
+    const sync = EditorView.updateListener.of((u) => {
+        if (u.docChanged && typeof opts.onChange === 'function') {
+            opts.onChange(u.state.doc.toString());
+        }
+    });
+    const state = EditorState.create({
+        doc: opts.value ?? '',
+        extensions: [basicSetup, sync].flat().filter(Boolean),
+    });
+    const view = new EditorView({ state, parent: el });
+    return {
+        view,
+        getValue: () => view.state.doc.toString(),
+        setValue: (v: string) =>
+            view.dispatch({
+                changes: { from: 0, to: view.state.doc.length, insert: v ?? '' },
+            }),
+        dispose: () => view.destroy(),
+    };
+}

package/vmz.plugin.ts

@@ -0,0 +1,46 @@
+import { definePlugin, loadPluginSource } from '@vmz/plugin';
+
+const source = loadPluginSource(import.meta.url, 'components/Codemirror.vmz');
+
+export default definePlugin({
+    name: '@vmz/plugin-codemirror',
+    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-codemirror:Codemirror.vmz:${source.contentHash.slice(0, 12)}`,
+                items: [
+                    {
+                        id: 'component-codemirror',
+                        kind: 'source',
+                        path: 'src/components/Codemirror.vmz',
+                        content: source.content,
+                        contentHash: source.contentHash,
+                        materialize: true,
+                    },
+                ],
+            };
+        }
+        if (ctx.stage === 'analyzer') {
+            return {
+                stage: 'analyzer',
+                cacheKey: '@vmz/plugin-codemirror:analyzer',
+                items: [
+                    {
+                        id: 'component-codemirror-online',
+                        kind: 'analyzer',
+                        path: 'src/components/Codemirror.vmz',
+                        severity: 'advice',
+                        message: 'Codemirror component online',
+                        code: 'vmz.plugin.codemirror',
+                    },
+                ],
+            };
+        }
+        return { stage: ctx.stage, items: [] };
+    },
+});