@vmz/plugin-codemirror 0.0.0 → 0.0.2

package/README.md

@@ -1,3 +1,36 @@
 # @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.2",
+  "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.2"
+  },
+  "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: [] };
+    },
+});