nuxt-monaco-editor 1.1.3 → 1.2.0-beta.0

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 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.0-beta.0](https://github.com/e-chan1007/nuxt-monaco-editor/compare/v1.1.4...v1.2.0-beta.0) (2023-03-24)
+
+
+### Features
+
+* load monaco-editor with ESM ([#1](https://github.com/e-chan1007/nuxt-monaco-editor/issues/1), [#19](https://github.com/e-chan1007/nuxt-monaco-editor/issues/19), [#26](https://github.com/e-chan1007/nuxt-monaco-editor/issues/26)) ([f1ea2e0](https://github.com/e-chan1007/nuxt-monaco-editor/commit/f1ea2e0bf31fbdc1adf7fcbb3b1184c5b6465aed))
+
+
+### Bug Fixes
+
+* copy esm to `_nuxt` ([fcefdbf](https://github.com/e-chan1007/nuxt-monaco-editor/commit/fcefdbf992bcbdc6a9d9b4ebed5ba490233be427))
+* resolve paths correctly ([01b6450](https://github.com/e-chan1007/nuxt-monaco-editor/commit/01b645077abd7b602b30c9dbdda91372289a8d93))
+* update link to IStandaloneCodeEditor in monaco editor official documentation ([9debaa8](https://github.com/e-chan1007/nuxt-monaco-editor/commit/9debaa8e33296ea4babe7eb6fe3bd06396479841))
+
+### [1.1.4](https://github.com/e-chan1007/nuxt-monaco-editor/compare/v1.1.3...v1.1.4) (2023-02-22)
+
+
+### Bug Fixes
+
+* change the directory to which `monaco-editor` will be copied ([7f88db5](https://github.com/e-chan1007/nuxt-monaco-editor/commit/7f88db5ea359ae0b91ea7664872b9f908f26994a))
+
 ### [1.1.3](https://github.com/e-chan1007/nuxt-monaco-editor/compare/v1.1.3-beta.0...v1.1.3) (2023-01-28)
 
 

package/dist/module.d.ts

@@ -1,8 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
-type MonacoEditorLocale = 'de' | 'es' | 'fr' | 'it' | 'ja' | 'ko' | 'ru' | 'zh-cn' | 'zh-tw' | 'en';
+type MonacoEditorLocale = 'cs' | 'de' | 'es' | 'fr' | 'it' | 'ja' | 'ko' | 'pl' | 'pt-br' | 'qps-ploc' | 'ru' | 'tr' | 'zh-hans' | 'zh-hant' | 'en';
 interface ModuleOptions {
-    dest?: string;
     locale?: MonacoEditorLocale;
     componentName?: {
         codeEditor?: string;

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.1.0"
   },
-  "version": "1.1.3"
+  "version": "1.2.0-beta.0"
 }

package/dist/module.mjs

@@ -1,6 +1,8 @@
-import { fileURLToPath } from 'url';
-import { defineNuxtModule, createResolver, extendViteConfig, addPlugin, addComponent, addImports } from '@nuxt/kit';
+import { fileURLToPath } from 'node:url';
+import { createResolver, defineNuxtModule, addVitePlugin, addPlugin, addComponent, addImports } from '@nuxt/kit';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
+import fs from 'fs/promises';
+import { createRequire } from 'node:module';
 
 
 
@@ -11,8 +13,46 @@ 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 runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
+const { resolve } = createResolver(runtimeDir);
+const rewrittenMonacoFiles = /* @__PURE__ */ new Map();
+const nlsPath = resolve("nls.mjs");
+const { resolve: resolveModule } = createRequire(import.meta.url);
+const plugin = (options, nuxtOptions) => ({
+  name: "vite-plugin-nuxt-monaco-editor",
+  enforce: "pre",
+  resolveId(src) {
+    if (src.includes("monaco-editor/esm/vs/") && src.endsWith(".js?worker")) {
+      return resolveModule(
+        src.replace("?worker", "").replace("__skip_vite", "").replace("node_modules", "").replace(nuxtOptions.app.baseURL, "/").replace(/\/\/+/g, "/").replace(/^\//, "")
+      );
+    }
+  },
+  async load(id) {
+    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`);
+        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 };
+        }
+      }
+    }
+  }
+});
+
 const DEFAULTS = {
-  dest: "_monaco",
   locale: "en",
   componentName: {
     codeEditor: "MonacoEditor",
@@ -27,29 +67,28 @@ const module = defineNuxtModule({
   },
   defaults: DEFAULTS,
   setup(options, nuxt) {
+    const isDev = nuxt.options.dev;
     const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
-    const { resolve: resolveURL } = createResolver(nuxt.options.app.baseURL);
     const { resolve } = createResolver(runtimeDir);
-    const monacoEditorLocation = resolveURL(options.dest);
     nuxt.options.build.transpile.push(runtimeDir);
     nuxt.options.build.transpile.push(({ isClient }) => isClient ? "monaco-editor" : false);
-    nuxt.options.runtimeConfig.app.__MONACO_EDITOR_LOCALE__ = options.locale;
-    nuxt.options.runtimeConfig.app.__MONACO_EDITOR_LOCATION__ = monacoEditorLocation;
-    extendViteConfig((config) => {
-      const viteStaticCopyPlugin = viteStaticCopy({
-        targets: [{
-          src: require.resolve("monaco-editor/min/vs/loader.js").replace(/\\/g, "/").replace(/\/vs\/loader\.js$/, "/*"),
-          dest: options.dest
-        }]
+    addVitePlugin(plugin(options, nuxt.options));
+    addVitePlugin(viteStaticCopy({
+      targets: [{
+        src: require.resolve("monaco-editor/esm/metadata.js").replace(/\\/g, "/").replace(/\/metadata.js$/, "/*"),
+        dest: "_nuxt/nuxt-monaco-editor"
+      }]
+    }));
+    nuxt.hook("build:manifest", (manifest) => {
+      Object.entries(manifest).forEach(([key, entry]) => {
+        if (key.includes("node_modules/monaco-editor/esm/vs")) {
+          entry.isEntry = false;
+        }
       });
-      if (!config.plugins) {
-        config.plugins = [];
-      }
-      config.plugins.push(...viteStaticCopyPlugin);
     });
-    addPlugin(resolve("plugin.client"));
-    addComponent({ name: options.componentName.codeEditor, filePath: resolve("MonacoEditor.vue") });
-    addComponent({ name: options.componentName.diffEditor, filePath: resolve("MonacoDiffEditor.vue") });
+    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/nls.d.mts

@@ -0,0 +1,5 @@
+export function _format(message: any, args: any): any;
+export function localize(path: any, _data: any, defaultMessage: any, ...args: any[]): any;
+export function loadMessageBundle(file: any): typeof localize;
+export function config(opt: any): typeof loadMessageBundle;
+export function getConfiguredDefaultLocale(): undefined;

package/dist/runtime/nls.mjs

@@ -0,0 +1,40 @@
+import localeData from '__LOCALE_DATA_PATH__'
+
+export function _format (message, args) {
+  let result
+  if (args.length === 0) {
+    result = message
+  } else {
+    result = String(message).replace(/\{(\d+)\}/g, function (match, rest) {
+      const index = rest[0]
+      return typeof args[index] !== 'undefined' ? args[index] : match
+    })
+  }
+  return result
+}
+
+export function localize (path, _data, defaultMessage) {
+  const key = typeof _data === 'object' ? _data.key : _data
+  const data = localeData || {}
+  let message = (data[path] || {})[key]
+  if (!message) {
+    message = defaultMessage
+  }
+  const args = []
+  for (let _i = 3; _i < arguments.length; _i++) {
+    args[_i - 3] = arguments[_i]
+  }
+  return _format(message, args)
+}
+
+export function loadMessageBundle (file) {
+  return localize
+}
+
+export function config (opt) {
+  return loadMessageBundle
+}
+
+export function getConfiguredDefaultLocale () {
+  return undefined
+}

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

@@ -0,0 +1,33 @@
+import { defineNuxtPlugin } from "#app";
+import { _useMonacoState } from "./composables.mjs";
+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

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

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

@@ -0,0 +1,33 @@
+import { defineNuxtPlugin } from "#app";
+import { _useMonacoState } from "./composables.mjs";
+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");
+});

package/package.json

@@ -11,13 +11,16 @@
     "type": "git",
     "url": "https://github.com/e-chan1007/nuxt-monaco-editor.git"
   },
-  "version": "1.1.3",
+  "version": "1.2.0-beta.0",
   "type": "module",
   "license": "MIT",
   "exports": {
     ".": {
       "import": "./dist/module.mjs",
       "require": "./dist/module.cjs"
+    },
+    "./dist/*": {
+      "import": "./dist/*"
     }
   },
   "main": "./dist/module.cjs",
@@ -42,28 +45,29 @@
     "docs:preview": "nuxt preview docs"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.1.1",
-    "vite-plugin-static-copy": "^0.13.0"
+    "@nuxt/kit": "^3.3.1",
+    "monaco-editor-nls": "^3.0.0",
+    "vite-plugin-static-copy": "^0.13.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.4.2",
-    "@commitlint/config-conventional": "^17.4.2",
-    "@nuxt-themes/docus": "^1.6.3",
+    "@commitlint/cli": "^17.5.0",
+    "@commitlint/config-conventional": "^17.4.4",
+    "@nuxt-themes/docus": "^1.9.10",
     "@nuxt/module-builder": "latest",
-    "@nuxt/test-utils": "^3.1.1",
+    "@nuxt/test-utils": "^3.3.1",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
-    "eslint": "^8.32.0",
-    "execa": "^6.1.0",
+    "eslint": "^8.36.0",
+    "execa": "^7.1.1",
     "husky": "^8.0.3",
-    "monaco-editor": "^0.34.1",
-    "nuxt": "^3.1.1",
+    "monaco-editor": "^0.36.1",
+    "nuxt": "^3.3.1",
     "pinst": "^3.0.0",
-    "playwright": "^1.30.0",
+    "playwright": "^1.32.0",
     "remark-cli": "^11.0.0",
     "remark-lint": "^9.1.1",
     "remark-preset-lint-recommended": "^6.1.2",
     "standard-version": "^9.5.0",
-    "vitest": "^0.28.3"
+    "vitest": "^0.29.7"
   },
   "peerDependencies": {
     "monaco-editor": "*"
@@ -77,5 +81,8 @@
       ]
     ]
   },
+  "workspaces": [
+    "playground"
+  ],
   "packageManager": "yarn@3.2.4"
 }

package/dist/runtime/plugin.client.mjs

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