nuxt-monaco-editor 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+## 1.0.0 (2022-08-25)

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 e_chan1007
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,62 @@
+# nuxt-monaco-editor
+[![npm version](https://badge.fury.io/js/nuxt-monaco-editor.svg)](https://badge.fury.io/js/nuxt-monaco-editor)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Codacy Badge](https://app.codacy.com/project/badge/Grade/8b4585be9901491795f8b3c2f5dbb680)](https://www.codacy.com/gh/e-chan1007/nuxt-monaco-editor/dashboard?utm_source=github.com&utm_medium=referral&utm_content=e-chan1007/nuxt-monaco-editor&utm_campaign=Badge_Grade)
+
+Integrate [monaco-editor](https://microsoft.github.io/monaco-editor/) with Nuxt
+
+## Install
+```sh
+# npm
+npm install -D monaco-editor nuxt-monaco-editor
+
+# yarn
+yarn add -D monaco-editor nuxt-monaco-editor
+
+# pnpm
+pnpm add -D monaco-editor nuxt-monaco-editor
+```
+Don't forget to install `monaco-editor`.
+
+## Setup
+1. Add this module to the Nuxt config 
+
+```ts
+export default defineNuxtConfig({
+  modules: [
+    'nuxt-monaco-editor'
+  ]
+})
+```
+
+2. (Optional) Configure the module 
+
+```ts
+export default defineNuxtConfig({
+  monacoEditor: {
+    // These are default values:
+    locale: 'en',
+    componentName: {
+      codeEditor: 'MonacoEditor',
+      diffEditor: 'MonacoDiffEditor'
+    }
+  }
+})
+```
+
+3. Use the component in your pages or components 
+
+```vue
+<template>
+  <MonacoEditor v-model="value" lang="typescript" />
+</template>
+
+<script lang="ts" setup>
+const value = ref('')
+</script>
+```
+
+## Development
+
+- Run `npm run dev:prepare` to generate type stubs.  
+- Use `npm run dev` to start [playground](./playground) in development mode.  

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -0,0 +1,13 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+declare type MonacoEditorLocale = 'de' | 'es' | 'fr' | 'it' | 'ja' | 'ko' | 'ru' | 'zh-cn' | 'zh-tw' | 'en';
+interface ModuleOptions {
+    locale?: MonacoEditorLocale;
+    componentName?: {
+        codeEditor?: string;
+        diffEditor?: string;
+    };
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { ModuleOptions, MonacoEditorLocale, _default as default };

package/dist/module.json

@@ -0,0 +1,8 @@
+{
+  "name": "nuxt-monaco-editor",
+  "configKey": "monacoEditor",
+  "compatibility": {
+    "nuxt": "^3.0.0"
+  },
+  "version": "1.0.0"
+}

package/dist/module.mjs

@@ -0,0 +1,49 @@
+import { fileURLToPath } from 'url';
+import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponent, addAutoImport } from '@nuxt/kit';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+// -- Unbuild CommonJS Shims --
+import __cjs_url__ from 'url';
+import __cjs_path__ from 'path';
+import __cjs_mod__ from 'module';
+const __filename = __cjs_url__.fileURLToPath(import.meta.url);
+const __dirname = __cjs_path__.dirname(__filename);
+const require = __cjs_mod__.createRequire(import.meta.url);
+
+
+const DEFAULTS = {
+  locale: "en",
+  componentName: {
+    codeEditor: "MonacoEditor",
+    diffEditor: "MonacoDiffEditor"
+  }
+};
+const module = defineNuxtModule({
+  meta: {
+    name: "nuxt-monaco-editor",
+    configKey: "monacoEditor",
+    compatibility: { nuxt: "^3.0.0" }
+  },
+  defaults: DEFAULTS,
+  setup(options, nuxt) {
+    const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
+    const { resolve } = createResolver(runtimeDir);
+    nuxt.options.build.transpile.push(runtimeDir);
+    nuxt.options.build.transpile.push("monaco-editor");
+    nuxt.options.runtimeConfig.app.__MONACO_EDITOR_LOCALE__ = options.locale;
+    const [viteStaticCopyServePlugin, viteStaticCopyBuildPlugin] = viteStaticCopy({
+      targets: [{
+        src: require.resolve("monaco-editor/min/vs/loader.js").replace(/\/vs\/loader\.js$/, "/*"),
+        dest: "_monaco"
+      }]
+    });
+    addVitePlugin(viteStaticCopyServePlugin);
+    addVitePlugin(viteStaticCopyBuildPlugin);
+    addPlugin(resolve("plugin.client"));
+    addComponent({ name: options.componentName.codeEditor, filePath: resolve("MonacoEditor.vue") });
+    addComponent({ name: options.componentName.diffEditor, filePath: resolve("MonacoDiffEditor.vue") });
+    addAutoImport({ name: "useMonaco", as: "useMonaco", from: resolve("composables") });
+  }
+});
+
+export { module as default };

package/dist/runtime/MonacoDiffEditor.vue

@@ -0,0 +1,95 @@
+<template>
+  <div ref="editorElement">
+    <slot v-if="isLoading" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type * as Monaco from 'monaco-editor'
+import { onMounted, ref, watch } from 'vue'
+import { useMonaco } from './composables'
+
+interface Props {
+  /**
+   * Programming Language (Not a locale for UI);
+   * overrides `options.language`
+  */
+  lang?: string;
+  /**
+   * Options passed to the second argument of `monaco.editor.createDiffEditor`
+   */
+  options?: Monaco.editor.IStandaloneDiffEditorConstructionOptions
+  original?: string;
+  modelValue?: string;
+}
+
+interface Emits {
+  (event: 'update:modelValue', value: string): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  lang: () => 'plaintext',
+  options: () => ({}),
+  original: () => '',
+  modelValue: () => ''
+})
+const emit = defineEmits<Emits>()
+const isLoading = ref(true)
+
+const editorElement = ref<HTMLDivElement>()
+const monaco = useMonaco()!
+
+let ignoreWatch = false
+let editor: Monaco.editor.IStandaloneDiffEditor
+let originalModel: Monaco.editor.ITextModel
+let modifiedModel: Monaco.editor.ITextModel
+
+watch(() => [props.original, props.modelValue], () => {
+  if (ignoreWatch) {
+    ignoreWatch = false
+    return
+  }
+  originalModel.setValue(props.original)
+  modifiedModel.setValue(props.modelValue)
+})
+
+watch(() => props.lang, () => {
+  if (originalModel) { originalModel.dispose() }
+  if (modifiedModel) { originalModel.dispose() }
+  originalModel = monaco.editor.createModel(props.original, props.lang)
+  modifiedModel = monaco.editor.createModel(props.modelValue, props.lang)
+  editor.setModel({
+    original: originalModel,
+    modified: modifiedModel
+  })
+})
+
+watch(() => props.options, () => {
+  editor?.updateOptions(props.options)
+})
+
+defineExpose({
+  /**
+   * Monaco editor instance
+   */
+  // @ts-ignore
+  $editor: editor
+})
+
+onMounted(() => {
+  editor = monaco.editor.createDiffEditor(editorElement.value!, props.options)
+  originalModel = monaco.editor.createModel(props.original, props.lang)
+  modifiedModel = monaco.editor.createModel(props.modelValue, props.lang)
+  editor.setModel({
+    original: originalModel,
+    modified: modifiedModel
+  })
+
+  editor.onDidUpdateDiff(() => {
+    ignoreWatch = true
+    emit('update:modelValue', editor.getModel()!.modified.getValue())
+  })
+
+  isLoading.value = false
+})
+</script>

package/dist/runtime/MonacoEditor.vue

@@ -0,0 +1,85 @@
+<template>
+  <div ref="editorElement">
+    <slot v-if="isLoading" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from '@vue/reactivity'
+import type * as Monaco from 'monaco-editor'
+import { onMounted, ref, watch } from 'vue'
+import { useMonaco } from './composables'
+
+interface Props {
+  /**
+   * Programming Language (Not a locale for UI);
+   * overrides `options.language`
+   */
+  lang?: string;
+  /**
+   * Options passed to the second argument of `monaco.editor.create`
+   */
+  options?: Monaco.editor.IStandaloneEditorConstructionOptions
+  modelValue?: string;
+}
+
+interface Emits {
+  (event: 'update:modelValue', value: string): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  lang: () => 'plaintext',
+  options: () => ({}),
+  modelValue: () => ''
+})
+const emit = defineEmits<Emits>()
+const isLoading = ref(true)
+
+const lang = computed(() => props.lang || props.options.language)
+
+const editorElement = ref<HTMLDivElement>()
+const monaco = useMonaco()!
+
+let ignoreWatch = false
+let editor: Monaco.editor.IStandaloneCodeEditor
+let model: Monaco.editor.ITextModel
+
+watch(() => props.modelValue, () => {
+  if (ignoreWatch) {
+    ignoreWatch = false
+    return
+  }
+  editor?.setValue(props.modelValue)
+})
+
+watch(() => props.lang, () => {
+  if (model) { model.dispose() }
+  model = monaco.editor.createModel(props.modelValue, lang.value)
+  editor?.setModel(model)
+})
+
+watch(() => props.options, () => {
+  editor?.updateOptions(props.options)
+})
+
+defineExpose({
+  /**
+   * Monaco editor instance
+   */
+  // @ts-ignore
+  $editor: editor
+})
+
+onMounted(() => {
+  editor = monaco.editor.create(editorElement.value!, props.options)
+  model = monaco.editor.createModel(props.modelValue, lang.value)
+  editor.setModel(model)
+
+  editor.onDidChangeModelContent(() => {
+    ignoreWatch = true
+    emit('update:modelValue', editor.getValue())
+  })
+
+  isLoading.value = false
+})
+</script>

package/dist/runtime/composables.d.ts

@@ -0,0 +1,7 @@
+import type * as Monaco from 'monaco-editor';
+export declare const _useMonacoState: () => any;
+/**
+ * Get `monaco` namespace
+ * @returns `monaco` namespace: if unavailable (server-side), returns `null`
+ */
+export declare const useMonaco: () => typeof Monaco | null;

package/dist/runtime/composables.mjs

@@ -0,0 +1,3 @@
+import { useState } from "#app";
+export const _useMonacoState = () => useState("MonacoEditorNamespace", () => null);
+export const useMonaco = () => _useMonacoState().value;

package/dist/runtime/plugin.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugin.client.mjs

@@ -0,0 +1,25 @@
+import { defineNuxtPlugin, useRuntimeConfig } from "#app";
+import { _useMonacoState } from "./composables.mjs";
+export default defineNuxtPlugin((_nuxtApp) => new Promise((resolve) => {
+  const monacoState = _useMonacoState();
+  const locale = useRuntimeConfig().app.__MONACO_EDITOR_LOCALE__;
+  const script = document.createElement("script");
+  script.src = "/_monaco/vs/loader.js";
+  script.onload = () => {
+    require.config({ paths: { vs: "_monaco/vs" } });
+    if (locale !== "en") {
+      require.config({
+        "vs/nls": {
+          availableLanguages: {
+            "*": locale
+          }
+        }
+      });
+    }
+    require(["vs/editor/editor.main"], (monaco) => {
+      monacoState.value = monaco;
+      resolve();
+    });
+  };
+  document.head.appendChild(script);
+}));

package/dist/types.d.ts

@@ -0,0 +1,10 @@
+
+import { ModuleOptions } from './module'
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig { ['monacoEditor']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['monacoEditor']?: ModuleOptions }
+}
+
+
+export { default } from './module'

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "nuxt-monaco-editor",
+  "author": "e-chan1007",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/e-chan1007/nuxt-monaco-editor.git"
+  },
+  "version": "1.0.0",
+  "type": "module",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "postpack": "pinst --enable",
+    "_postinstall": "husky install",
+    "build": "nuxt-module-build",
+    "lint": "eslint --ext .js,.cjs,.mjs,.ts,.cts,.mts,.vue . && remark . -q",
+    "prepack": "pinst --disable && nuxt-module-build",
+    "release": "standard-version",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
+    "docs:dev": "vuepress dev docs --port 3000",
+    "docs:build": "vuepress build docs",
+    "docs:serve": "vuepress serve docs --port 3000"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.0.0-rc.8",
+    "vite-plugin-static-copy": "^0.7.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.0.3",
+    "@commitlint/config-conventional": "^17.0.3",
+    "@nuxt/module-builder": "latest",
+    "@nuxtjs/eslint-config-typescript": "latest",
+    "eslint": "latest",
+    "husky": "^8.0.1",
+    "monaco-editor": "^0.34.0",
+    "nuxt": "^3.0.0-rc.8",
+    "pinst": "^3.0.0",
+    "remark-cli": "^11.0.0",
+    "remark-lint": "^9.1.1",
+    "remark-preset-lint-recommended": "^6.1.2",
+    "standard-version": "^9.5.0",
+    "vuepress": "next"
+  },
+  "peerDependencies": {
+    "monaco-editor": "*"
+  },
+  "remarkConfig": {
+    "plugins": [
+      "remark-preset-lint-recommended",
+      [
+        "remark-lint-list-item-indent",
+        "mixed"
+      ]
+    ]
+  },
+  "packageManager": "yarn@3.2.2"
+}