nuxt-monaco-editor 1.3.2 → 1.4.0-alpha.0

package/dist/module.json

@@ -2,11 +2,11 @@
   "name": "nuxt-monaco-editor",
   "configKey": "monacoEditor",
   "compatibility": {
-    "nuxt": ">=3.1.0"
+    "nuxt": ">=3.1.0 ^4"
   },
-  "version": "1.3.2",
+  "version": "1.4.0-alpha.0",
   "builder": {
-    "@nuxt/module-builder": "1.0.1",
-    "unbuild": "3.5.0"
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.0"
   }
 }

package/dist/module.mjs

@@ -1,5 +1,5 @@
 import { fileURLToPath } from 'node:url';
-import { createResolver, defineNuxtModule, addVitePlugin, addPlugin, addComponent, addImports } from '@nuxt/kit';
+import { createResolver, defineNuxtModule, addVitePlugin, addComponent, addImports } from '@nuxt/kit';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 import fs from 'fs/promises';
 import { createRequire } from 'node:module';
@@ -31,7 +31,7 @@ const plugin = (options, nuxtOptions) => ({
         rewrittenMonacoFiles.set(id, code);
         return { code };
       }
-      if (vsPath && id.endsWith(".js")) {
+      if (vsPath?.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 (options.removeSourceMaps) {
@@ -45,7 +45,7 @@ const plugin = (options, nuxtOptions) => ({
       }
       return;
     }
-    if (vsPath && id.endsWith(".js")) {
+    if (vsPath?.endsWith(".js")) {
       let code = await fs.readFile(id, "utf-8");
       if (options.removeSourceMaps) {
         code = code.replace(/\/\/# sourceMappingURL=.+\.js\.map/g, "");
@@ -74,11 +74,10 @@ const module = defineNuxtModule({
   meta: {
     name: "nuxt-monaco-editor",
     configKey: "monacoEditor",
-    compatibility: { nuxt: ">=3.1.0" }
+    compatibility: { nuxt: ">=3.1.0 ^4" }
   },
   defaults: getDefaults,
   setup(options, nuxt) {
-    const isDev = nuxt.options.dev;
     const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
     const { resolve } = createResolver(runtimeDir);
     nuxt.options.build.transpile.push(runtimeDir);
@@ -97,7 +96,6 @@ const module = defineNuxtModule({
         }
       });
     });
-    addPlugin(isDev ? resolve("plugin-dev.client") : resolve("plugin-prod.client"));
     addComponent({ name: options.componentName.codeEditor, filePath: resolve("MonacoEditor.client.vue") });
     addComponent({ name: options.componentName.diffEditor, filePath: resolve("MonacoDiffEditor.client.vue") });
     addImports({ name: "useMonaco", as: "useMonaco", from: resolve("composables") });

package/dist/runtime/MonacoDiffEditor.client.vue

@@ -19,14 +19,20 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue", "load"]);
 const isLoading = ref(true);
 const editorElement = shallowRef();
-const monaco = useMonaco();
-let editor;
-let originalModel;
-let modifiedModel;
 const editorRef = shallowRef();
 const defaultOptions = {
   automaticLayout: true
 };
+defineExpose({
+  /**
+   * Monaco editor instance
+   */
+  $editor: editorRef
+});
+const monaco = await useMonaco();
+let editor;
+let originalModel;
+let modifiedModel;
 watch(() => [props.original, props.modelValue], () => {
   if (originalModel.getValue() !== props.original || modifiedModel.getValue() !== props.modelValue) {
     originalModel.setValue(props.original);
@@ -52,12 +58,6 @@ watch(() => props.lang, () => {
 watch(() => props.options, () => {
   editor?.updateOptions(defu(props.options, defaultOptions));
 });
-defineExpose({
-  /**
-   * Monaco editor instance
-   */
-  $editor: editorRef
-});
 watch(editorElement, (newValue, oldValue) => {
   if (!editorElement.value || oldValue) {
     return;

package/dist/runtime/MonacoEditor.client.vue

@@ -19,10 +19,16 @@ const isLoading = ref(true);
 const lang = computed(() => props.lang || props.options.language);
 const editorRef = shallowRef();
 const editorElement = ref();
-const monaco = useMonaco();
 const defaultOptions = {
   automaticLayout: true
 };
+defineExpose({
+  /**
+     * Monaco editor instance
+     */
+  $editor: editorRef
+});
+const monaco = await useMonaco();
 let editor;
 let model;
 watch(() => props.modelValue, () => {
@@ -55,12 +61,6 @@ watch(editorElement, (newValue, oldValue) => {
   isLoading.value = false;
   emit("load", editor);
 });
-defineExpose({
-  /**
-     * Monaco editor instance
-     */
-  $editor: editorRef
-});
 onBeforeUnmount(() => {
   editor?.dispose();
   model?.dispose();

package/dist/runtime/composables.d.ts

@@ -1,7 +1,2 @@
-import type * as Monaco from 'monaco-editor';
-export declare const _useMonacoState: () => import("vue").Ref<typeof Monaco | null, typeof Monaco | null>;
-/**
- * Get `monaco` namespace
- * @returns `monaco` namespace: if unavailable (server-side), returns `null`
- */
-export declare const useMonaco: () => typeof Monaco | null;
+import type Monaco from 'monaco-editor/esm/vs/editor/editor.api';
+export declare function useMonaco(): Promise<typeof Monaco>;

package/dist/runtime/composables.js

@@ -1,3 +1,31 @@
-import { useState } from "#imports";
-export const _useMonacoState = () => useState("MonacoEditorNamespace", () => null);
-export const useMonaco = () => _useMonacoState().value;
+let monacoPromise = null;
+export function useMonaco() {
+  if (import.meta.server) {
+    return Promise.reject(new Error("monaco-editor cannot be loaded on server"));
+  }
+  if (!monacoPromise) {
+    monacoPromise = (async () => {
+      if (!self.MonacoEnvironment) self.MonacoEnvironment = {};
+      if (!self.MonacoEnvironment.getWorker) {
+        self.MonacoEnvironment.getWorker = (_moduleId, label) => {
+          const getWorkerModuleURL = (moduleUrl) => new URL(
+            import.meta.dev ? `/node_modules/monaco-editor/esm/vs/${moduleUrl}.js?worker` : `${useNuxtApp().$config.app.baseURL}/_nuxt/nuxt-monaco-editor/vs/${moduleUrl}.js`.replace(/\/\//g, "/"),
+            import.meta.url
+          );
+          const workerMap = {
+            json: "language/json/json.worker",
+            css: "language/css/css.worker",
+            html: "language/html/html.worker",
+            typescript: "language/typescript/ts.worker",
+            javascript: "language/typescript/ts.worker"
+          };
+          const workerUrl = workerMap[label] || "editor/editor.worker";
+          return new Worker(getWorkerModuleURL(workerUrl), { type: "module" });
+        };
+      }
+      const monaco = await import("monaco-editor");
+      return monaco;
+    })();
+  }
+  return monacoPromise;
+}

package/package.json

@@ -11,7 +11,7 @@
     "type": "git",
     "url": "https://github.com/e-chan1007/nuxt-monaco-editor.git"
   },
-  "version": "1.3.2",
+  "version": "1.4.0-alpha.0",
   "type": "module",
   "license": "MIT",
   "exports": {
@@ -45,36 +45,38 @@
     "loc:build": "jiti scripts/build-loc.ts"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.17.5",
+    "@nuxt/kit": "^4.0.3",
     "defu": "^6.1.4",
-    "vite-plugin-static-copy": "^3.0.2"
+    "vite-plugin-static-copy": "^3.1.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@nuxt/eslint-config": "^1.4.1",
-    "@nuxt/module-builder": "1.0.1",
-    "@nuxt/test-utils": "3.19.1",
+    "@nuxt/content": "^3.6.3",
+    "@nuxt/eslint-config": "^1.8.0",
+    "@nuxt/module-builder": "1.0.2",
+    "@nuxt/test-utils": "3.19.2",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.29.0",
+    "better-sqlite3": "^12.2.0",
+    "eslint": "^9.33.0",
     "execa": "^9.6.0",
     "happy-dom": "^18.0.1",
     "husky": "^9.1.7",
-    "jiti": "^2.4.2",
+    "jiti": "^2.5.1",
     "monaco-editor": "^0.52.2",
-    "nuxt": "^3.17.5",
+    "nuxt": "^4.0.3",
     "nuxt-content-twoslash": "^0.1.2",
     "pinst": "^3.0.0",
-    "playwright": "^1.53.0",
-    "playwright-core": "^1.53.0",
+    "playwright": "^1.54.2",
+    "playwright-core": "^1.54.2",
     "remark-cli": "^12.0.1",
     "remark-lint": "^10.0.1",
     "remark-preset-lint-recommended": "^7.0.1",
-    "shadcn-docs-nuxt": "^1.0.3",
+    "shadcn-docs-nuxt": "patch:shadcn-docs-nuxt@npm%3A1.1.2#~/.yarn/patches/shadcn-docs-nuxt-npm-1.1.2-b9d2f65cf2.patch",
     "standard-version": "^9.5.0",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.2",
     "vitest": "^3.2.4",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^3.0.5"
   },
   "peerDependencies": {
     "monaco-editor": "*"

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

@@ -1,2 +0,0 @@
-declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
-export default _default;

package/dist/runtime/plugin-dev.client.js

@@ -1,33 +0,0 @@
-import { _useMonacoState } from "./composables.js";
-import { defineNuxtPlugin } from "#imports";
-export default defineNuxtPlugin(async (nuxtApp) => {
-  const getWorkerModule = (moduleUrl, label) => {
-    return new Worker(new URL("/node_modules/monaco-editor/esm/vs/" + moduleUrl + ".js?worker", import.meta.url), {
-      name: label,
-      type: "module"
-    });
-  };
-  self.MonacoEnvironment = {
-    getWorker(workerId, label) {
-      switch (label) {
-        case "json":
-          return getWorkerModule("language/json/json.worker", label);
-        case "css":
-        case "scss":
-        case "less":
-          return getWorkerModule("language/css/css.worker", label);
-        case "html":
-        case "handlebars":
-        case "razor":
-          return getWorkerModule("language/html/html.worker", label);
-        case "typescript":
-        case "javascript":
-          return getWorkerModule("language/typescript/ts.worker", label);
-        default:
-          return getWorkerModule("editor/editor.worker", label);
-      }
-    }
-  };
-  const monacoState = _useMonacoState();
-  monacoState.value = await import("monaco-editor");
-});

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

@@ -1,2 +0,0 @@
-declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
-export default _default;

package/dist/runtime/plugin-prod.client.js

@@ -1,33 +0,0 @@
-import { _useMonacoState } from "./composables.js";
-import { defineNuxtPlugin } from "#imports";
-export default defineNuxtPlugin(async (nuxtApp) => {
-  const getWorkerModule = (moduleUrl, label) => {
-    return new Worker(new URL(`${nuxtApp.$config.app.baseURL}/_nuxt/nuxt-monaco-editor/vs/${moduleUrl}.js`.replace(/\/\//g, "/"), import.meta.url), {
-      name: label,
-      type: "module"
-    });
-  };
-  self.MonacoEnvironment = {
-    getWorker(workerId, label) {
-      switch (label) {
-        case "json":
-          return getWorkerModule("language/json/json.worker", label);
-        case "css":
-        case "scss":
-        case "less":
-          return getWorkerModule("language/css/css.worker", label);
-        case "html":
-        case "handlebars":
-        case "razor":
-          return getWorkerModule("language/html/html.worker", label);
-        case "typescript":
-        case "javascript":
-          return getWorkerModule("language/typescript/ts.worker", label);
-        default:
-          return getWorkerModule("editor/editor.worker", label);
-      }
-    }
-  };
-  const monacoState = _useMonacoState();
-  monacoState.value = await import("monaco-editor");
-});