nuxt-monaco-editor 1.2.6 → 1.2.8

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 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.2.8](https://github.com/e-chan1007/nuxt-monaco-editor/compare/v1.2.7...v1.2.8) (2024-04-20)
+
+### [1.2.7](https://github.com/e-chan1007/nuxt-monaco-editor/compare/v1.2.6...v1.2.7) (2024-01-20)
+
+
+### Bug Fixes
+
+* restore explicit imports ([d44ab28](https://github.com/e-chan1007/nuxt-monaco-editor/commit/d44ab28ca35c79edbefd69ea45161b8f51632d29))
+* use `watch` for the target element ([878d3e7](https://github.com/e-chan1007/nuxt-monaco-editor/commit/878d3e735819bbbae245af3db7520a3a00a4237b))
+* use `watch` instead of `onMounted` ([6e48fd1](https://github.com/e-chan1007/nuxt-monaco-editor/commit/6e48fd1672517719917d47a3012feb019d46530d))
+
 ### [1.2.6](https://github.com/e-chan1007/nuxt-monaco-editor/compare/v1.2.5...v1.2.6) (2023-12-10)
 
 

package/README.md

@@ -8,14 +8,7 @@ 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
+npx nuxi@latest module add nuxt-monaco-editor
 ```
 Don't forget to install `monaco-editor`.
 

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.1.0"
   },
-  "version": "1.2.6"
+  "version": "1.2.8"
 }

package/dist/module.mjs

@@ -29,25 +29,33 @@ const plugin = (options, nuxtOptions) => ({
     }
   },
   async load(id) {
+    id = id.split("?")[0];
+    const vsPath = id.includes("monaco-editor/esm") ? id.split("monaco-editor/esm/").pop() : null;
     if (options.locale !== "en") {
-      id = id.split("?")[0];
       if (rewrittenMonacoFiles.has(id)) {
         return { code: rewrittenMonacoFiles.get(id) };
       }
       if (/\/(vscode-)?nls\.m?js/.test(id)) {
-        const code = (await fs.readFile(resolve("nls.mjs"), "utf-8")).replace("__LOCALE_DATA_PATH__", `monaco-editor-nls/locale/${options.locale}.json`);
+        const code = (await fs.readFile(resolve("nls.mjs"), "utf-8")).replace("__LOCALE_DATA_PATH__", `nuxt-monaco-editor/dist/i18n/${options.locale}.json`);
         rewrittenMonacoFiles.set(id, code);
         return { code };
       }
-      if (/monaco-editor\/esm\/vs.+\.js/.test(id)) {
-        const vsPath = id.split(/monaco-editor\/esm\//).pop();
-        if (vsPath) {
-          const path = vsPath.replace(".js", "");
-          const code = (await fs.readFile(id, "utf-8")).replace(/import \* as nls from '.+nls\.js(\?v=.+)?';/g, `import * as nls from '${nlsPath}';`).replace(/(?<!function )localize\(/g, `localize('${path}', `);
-          rewrittenMonacoFiles.set(id, code);
-          return { code };
+      if (vsPath && id.endsWith(".js")) {
+        const path = vsPath.replace(/\.js$/, "");
+        let code = (await fs.readFile(id, "utf-8")).replace(/import \* as nls from '.+nls\.js(\?v=.+)?';/g, `import * as nls from '${nlsPath}';`).replace(/(?<!function )localize\(/g, `localize('${path}', `);
+        if (path === "vs/base/common/platform") {
+          code = code.replace("let _isWeb = false;", "let _isWeb = true;");
         }
+        rewrittenMonacoFiles.set(id, code);
+        return { code };
       }
+      return;
+    }
+    if (vsPath === "vs/base/common/platform.js") {
+      let code = await fs.readFile(id, "utf-8");
+      code = code.replace("let _isWeb = false;", "let _isWeb = true;");
+      rewrittenMonacoFiles.set(id, code);
+      return { code };
     }
   }
 });
@@ -70,6 +78,9 @@ const module = defineNuxtModule({
     const isDev = nuxt.options.dev;
     const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
     const { resolve } = createResolver(runtimeDir);
+    if (isDev) {
+      nuxt.options.vite.optimizeDeps?.exclude?.push("monaco-editor");
+    }
     nuxt.options.build.transpile.push(runtimeDir);
     nuxt.options.build.transpile.push(({ isClient }) => isClient ? "monaco-editor" : false);
     addVitePlugin(plugin(options, nuxt.options));

package/dist/runtime/MonacoDiffEditor.client.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import type * as Monaco from 'monaco-editor'
-import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
+import { onBeforeUnmount, ref, shallowRef, watch } from 'vue'
 import { defu } from 'defu'
 import { useMonaco } from './composables'
 
@@ -44,8 +44,8 @@ const monaco = useMonaco()!
 let editor: Monaco.editor.IStandaloneDiffEditor
 let originalModel: Monaco.editor.ITextModel
 let modifiedModel: Monaco.editor.ITextModel
-const editorRef = shallowRef<Monaco.editor.IStandaloneDiffEditor>()
 
+const editorRef = shallowRef<Monaco.editor.IStandaloneDiffEditor>()
 const defaultOptions: Monaco.editor.IStandaloneEditorConstructionOptions = {
   automaticLayout: true
 }
@@ -81,7 +81,8 @@ defineExpose({
   $editor: editorRef
 })
 
-onMounted(() => {
+watch(editorElement, (newValue, oldValue) => {
+  if (!editorElement.value || oldValue) { return }
   editor = monaco.editor.createDiffEditor(editorElement.value!, defu(props.options, defaultOptions))
   editorRef.value = editor
   originalModel = monaco.editor.createModel(props.original, props.lang)
@@ -99,7 +100,7 @@ onMounted(() => {
   emit('load', editor)
 })
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   editor?.dispose()
   originalModel?.dispose()
   modifiedModel?.dispose()

package/dist/runtime/MonacoEditor.client.vue

@@ -6,26 +6,26 @@
 
 <script lang="ts" setup>
 import type * as Monaco from 'monaco-editor'
-import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
+import { computed, ref, shallowRef, watch, onBeforeUnmount } from 'vue'
 import { defu } from 'defu'
 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;
+    /**
+     * 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
-  (event: 'load', editor: Monaco.editor.IStandaloneCodeEditor): void
+    (event: 'update:modelValue', value: string): void
+    (event: 'load', editor: Monaco.editor.IStandaloneCodeEditor): void
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -33,28 +33,30 @@ const props = withDefaults(defineProps<Props>(), {
   options: () => ({}),
   modelValue: () => ''
 })
+
 const emit = defineEmits<Emits>()
 const isLoading = ref(true)
-
 const lang = computed(() => props.lang || props.options.language)
-
-const editorElement = shallowRef<HTMLDivElement>()
-const monaco = useMonaco()!
-
-let editor: Monaco.editor.IStandaloneCodeEditor
-let model: Monaco.editor.ITextModel
 const editorRef = shallowRef<Monaco.editor.IStandaloneCodeEditor>()
-
+const editorElement = ref<HTMLDivElement>()
+const monaco = useMonaco()!
 const defaultOptions: Monaco.editor.IStandaloneEditorConstructionOptions = {
   automaticLayout: true
 }
 
+let editor: Monaco.editor.IStandaloneCodeEditor
+let model: Monaco.editor.ITextModel
+
 watch(() => props.modelValue, () => {
-  if (editor?.getValue() !== props.modelValue) { editor?.setValue(props.modelValue) }
+  if (editor?.getValue() !== props.modelValue) {
+    editor?.setValue(props.modelValue)
+  }
 })
 
 watch(() => props.lang, () => {
-  if (model) { model.dispose() }
+  if (model) {
+    model.dispose()
+  }
   model = monaco.editor.createModel(props.modelValue, lang.value)
   editor?.setModel(model)
 })
@@ -63,17 +65,12 @@ watch(() => props.options, () => {
   editor?.updateOptions(defu(props.options, defaultOptions))
 })
 
-defineExpose({
-  /**
-   * Monaco editor instance
-   */
-  $editor: editorRef
-})
-
-onMounted(() => {
+watch(editorElement, (newValue, oldValue) => {
+  if (!editorElement.value || oldValue) { return }
   editor = monaco.editor.create(editorElement.value!, defu(props.options, defaultOptions))
-  editorRef.value = editor
   model = monaco.editor.createModel(props.modelValue, lang.value)
+  editorRef.value = editor
+  editor.layout()
   editor.setModel(model)
   editor.onDidChangeModelContent(() => {
     emit('update:modelValue', editor.getValue())
@@ -82,7 +79,14 @@ onMounted(() => {
   emit('load', editor)
 })
 
-onUnmounted(() => {
+defineExpose({
+  /**
+     * Monaco editor instance
+     */
+  $editor: editorRef
+})
+
+onBeforeUnmount(() => {
   editor?.dispose()
   model?.dispose()
 })

package/dist/runtime/nls.d.mts

@@ -3,3 +3,7 @@ export function localize(path: any, _data: any, defaultMessage: any, ...args: an
 export function loadMessageBundle(file: any): typeof localize;
 export function config(opt: any): typeof loadMessageBundle;
 export function getConfiguredDefaultLocale(): undefined;
+export function localize2(data: any, message: any, ...args: any[]): {
+    value: any;
+    original: any;
+};

package/dist/runtime/nls.mjs

@@ -15,7 +15,7 @@ export function _format (message, args) {
 
 export function localize (path, _data, defaultMessage) {
   const key = typeof _data === 'object' ? _data.key : _data
-  const data = localeData || {}
+  const data = localeData?.contents || {}
   let message = (data[path] || {})[key]
   if (!message) {
     message = defaultMessage
@@ -27,6 +27,14 @@ export function localize (path, _data, defaultMessage) {
   return _format(message, args)
 }
 
+export const localize2 = (data, message, ...args) => {
+  const original = _format(message, args)
+  return {
+    value: original,
+    original
+  }
+}
+
 export function loadMessageBundle (file) {
   return localize
 }

package/package.json

@@ -11,7 +11,7 @@
     "type": "git",
     "url": "https://github.com/e-chan1007/nuxt-monaco-editor.git"
   },
-  "version": "1.2.6",
+  "version": "1.2.8",
   "type": "module",
   "license": "MIT",
   "exports": {
@@ -31,45 +31,49 @@
   "scripts": {
     "postpack": "pinst --enable",
     "_postinstall": "husky install && playwright install",
-    "build": "nuxt-module-build",
+    "build": "nuxt-module-build && yarn loc:build",
     "lint": "eslint --ext .js,.cjs,.mjs,.ts,.cts,.mts,.vue . && remark . -q",
     "test": "nuxt test",
     "prepack": "pinst --disable && nuxt-module-build",
     "release": "standard-version",
     "dev": "nuxt dev playground",
     "dev:build": "nuxt build playground",
-    "dev:prepare": "nuxt-module-build --stub && nuxt prepare playground",
+    "dev:prepare": "nuxt-module-build --stub && nuxt prepare playground && yarn loc:build",
     "docs:dev": "nuxt dev docs",
     "docs:generate": "nuxt generate docs",
     "docs:prepare": "nuxt prepare docs",
-    "docs:preview": "nuxt preview docs"
+    "docs:preview": "nuxt preview docs",
+    "loc:build": "jiti scripts/build-loc.ts"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.8.1",
-    "defu": "^6.1.3",
-    "monaco-editor-nls": "^3.1.0",
-    "vite-plugin-static-copy": "^0.17.0"
+    "@nuxt/kit": "^3.11.2",
+    "defu": "^6.1.4",
+    "vite-plugin-static-copy": "^1.0.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.4.1",
-    "@commitlint/config-conventional": "^18.4.0",
+    "@commitlint/cli": "^19.2.2",
+    "@commitlint/config-conventional": "^19.2.2",
     "@nuxt-themes/docus": "^1.15.0",
     "@nuxt/module-builder": "latest",
-    "@nuxt/test-utils": "^3.8.1",
+    "@nuxt/test-utils": "3.11.0",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
-    "eslint": "^8.53.0",
+    "@vue/test-utils": "^2.4.5",
+    "eslint": "^8.57.0",
     "execa": "^8.0.1",
-    "husky": "^8.0.3",
-    "monaco-editor": "^0.44.0",
-    "nuxt": "^3.8.1",
+    "happy-dom": "^14.7.1",
+    "husky": "^9.0.11",
+    "jiti": "^1.21.0",
+    "monaco-editor": "^0.47.0",
+    "nuxt": "^3.11.2",
     "pinst": "^3.0.0",
-    "playwright": "^1.39.0",
+    "playwright": "^1.43.1",
+    "playwright-core": "^1.43.1",
     "remark-cli": "^12.0.0",
-    "remark-lint": "^9.1.2",
-    "remark-preset-lint-recommended": "^6.1.3",
+    "remark-lint": "^10.0.0",
+    "remark-preset-lint-recommended": "^7.0.0",
     "standard-version": "^9.5.0",
-    "typescript": "^5.2.2",
-    "vitest": "^0.33.0"
+    "typescript": "^5.4.5",
+    "vitest": "^1.5.0"
   },
   "peerDependencies": {
     "monaco-editor": "*"
@@ -86,5 +90,5 @@
   "workspaces": [
     "playground"
   ],
-  "packageManager": "yarn@4.0.1"
+  "packageManager": "yarn@4.1.1"
 }