npm - @tomjs/vite-plugin-vscode - Versions diffs - 4.3.0 → 5.1.0 - Mend

@tomjs/vite-plugin-vscode 4.3.0 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/webview.d.ts CHANGED Viewed

@@ -1,13 +1,14 @@
+//#region src/webview/webview.d.ts
 interface WebviewHtmlOptions {
-    /**
-     * local server url
-     */
-    serverUrl: string;
+  /**
+   * local server url
+   */
+  serverUrl: string;
 }
 /**
  *
  * @param options serverUrl string or object options
  */
 declare function getWebviewHtml(options: WebviewHtmlOptions): string;
-export { type WebviewHtmlOptions, getWebviewHtml as default, getWebviewHtml };
+//#endregion
+export { WebviewHtmlOptions, getWebviewHtml as default, getWebviewHtml };

package/dist/webview.js CHANGED Viewed

@@ -1,203 +1,18 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/webview/template.html
-var template_default = `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <style>
-      html,
-      body {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-      }
-      #webview-patch-iframe {
-        width: 100%;
-        height: 100%;
-        border: none;
-      }
-      .outer {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-      }
-    </style>
-    <script type="module" id="webview-patch">
-      const TAG = '[@tomjs:vscode:extension] ';
-      function onDomReady(callback, doc) {
-        const _doc = doc || document;
-        if (_doc.readyState === 'interactive' || _doc.readyState === 'complete') {
-          callback();
-        } else {
-          _doc.addEventListener('DOMContentLoaded', callback);
-        }
-      }
-      let vsCodeApi;
-      function getApi() {
-        if (vsCodeApi) return vsCodeApi;
-        return (vsCodeApi = acquireVsCodeApi());
-      }
-      function sendInitData(iframe) {
-        console.log(TAG + 'init data');
-        const dataset = {};
-        Object.keys(document.body.dataset).forEach((key) => {
-          dataset[key] = document.body.dataset[key];
-        });
-        iframe.contentWindow.postMessage(
-          {
-            type: '[vscode:extension]:init',
-            data: {
-              state: getApi().getState(),
-              style: document.getElementById('_defaultStyles').innerHTML,
-              root: {
-                cssText: document.documentElement.style.cssText,
-              },
-              body: {
-                dataset: dataset,
-                className: document.body.className,
-                role: document.body.getAttribute('role'),
-              },
-            },
-          },
-          '*',
-        );
-      }
-      function observeAttributeChanges(element, attributeName, callback) {
-        const observer = new MutationObserver(function (mutationsList) {
-          for (let mutation of mutationsList) {
-            if (mutation.type === 'attributes' && mutation.attributeName === attributeName) {
-              callback(mutation.target.getAttribute(attributeName));
-            }
-          }
-        });
-        observer.observe(element, { attributes: true });
-        return observer;
-      }
-      // message handler
-      let iframeLoaded = false;
-      const cacheMessages = [];
-      function handleMessage(e) {
-        const iframe = document.getElementById('webview-patch-iframe');
-        if (!iframeLoaded || !iframe) {
-          return;
-        }
-        if (e.origin.startsWith('vscode-webview://')) {
-          iframe.contentWindow.postMessage(e.data, '*');
-        } else if ('{{serverUrl}}'.startsWith(e.origin)) {
-          const { type, data } = e.data;
-          console.log(TAG + ' received:', e.data);
-          if (type === '[vscode:client]:postMessage') {
-            getApi().postMessage(data);
-          } else if (type === '[vscode:client]:commands') {
-            if (data === 'F1') {
-              window.dispatchEvent(
-                new KeyboardEvent('keydown', {
-                  key: 'F1',
-                  keyCode: 112,
-                  code: 'F1',
-                }),
-              );
-            }
-          }
-        }
-      }
-      window.addEventListener('message', function (event) {
-        if (event.origin.startsWith('vscode-webview://')) {
-          cacheMessages.push(event);
-          return;
-        }
-        handleMessage(event);
-      });
-      let isCacheWorking = false;
-      setInterval(() => {
-        if (isCacheWorking) {
-          return;
-        }
-        isCacheWorking = true;
-        if (iframeLoaded) {
-          let event = cacheMessages.shift();
-          while (event) {
-            handleMessage(event);
-            event = cacheMessages.shift();
-          }
-        }
-        isCacheWorking = false;
-      }, 50);
-      onDomReady(function () {
-        /**  @type {HTMLIFrameElement} */
-        const iframe = document.getElementById('webview-patch-iframe');
-        observeAttributeChanges(document.body, 'class', function (className) {
-          sendInitData(iframe);
-        });
-        onDomReady(function () {
-          iframeLoaded = true;
-          sendInitData(iframe);
-        }, iframe.contentDocument);
-        iframe.addEventListener('load', function (e) {
-          iframeLoaded = true;
-          let interval = setInterval(() => {
-            try {
-              if (document.getElementById('_defaultStyles')) {
-                sendInitData(iframe);
-                // addListeners(iframe);
-                clearInterval(interval);
-                return;
-              }
-            } catch (e) {
-              clearInterval(interval);
-              console.error(e);
-            }
-          }, 10);
-        });
-      });
-    </script>
-  </head>
-  <body>
-    <div class="outer">
-      <iframe
-        id="webview-patch-iframe"
-        frameborder="0"
-        sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock allow-downloads"
-        allow="cross-origin-isolated; autoplay; clipboard-read; clipboard-write"
-        src="{{serverUrl}}"
-      ></iframe>
-    </div>
-  </body>
-</html>
-`;
-// src/webview/webview.ts
+//#region src/webview/template.html
+var template_default = "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <style>\n      html,\n      body {\n        width: 100%;\n        height: 100%;\n        margin: 0;\n        padding: 0;\n        overflow: hidden;\n      }\n\n      #webview-patch-iframe {\n        width: 100%;\n        height: 100%;\n        border: none;\n      }\n\n      .outer {\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n      }\n    </style>\n\n    <script type=\"module\" id=\"webview-patch\">\n      const TAG = '[@tomjs:vscode:extension] ';\n\n      function onDomReady(callback, doc) {\n        const _doc = doc || document;\n        if (_doc.readyState === 'interactive' || _doc.readyState === 'complete') {\n          callback();\n        } else {\n          _doc.addEventListener('DOMContentLoaded', callback);\n        }\n      }\n\n      let vsCodeApi;\n\n      function getApi() {\n        if (vsCodeApi) return vsCodeApi;\n        return (vsCodeApi = acquireVsCodeApi());\n      }\n\n      function sendInitData(iframe) {\n        console.log(TAG + 'init data');\n        const dataset = {};\n        Object.keys(document.body.dataset).forEach((key) => {\n          dataset[key] = document.body.dataset[key];\n        });\n\n        iframe.contentWindow.postMessage(\n          {\n            type: '[vscode:extension]:init',\n            data: {\n              state: getApi().getState(),\n              style: document.getElementById('_defaultStyles').innerHTML,\n              root: {\n                cssText: document.documentElement.style.cssText,\n              },\n              body: {\n                dataset: dataset,\n                className: document.body.className,\n                role: document.body.getAttribute('role'),\n              },\n            },\n          },\n          '*',\n        );\n      }\n\n      function observeAttributeChanges(element, attributeName, callback) {\n        const observer = new MutationObserver(function (mutationsList) {\n          for (let mutation of mutationsList) {\n            if (mutation.type === 'attributes' && mutation.attributeName === attributeName) {\n              callback(mutation.target.getAttribute(attributeName));\n            }\n          }\n        });\n        observer.observe(element, { attributes: true });\n        return observer;\n      }\n\n      // message handler\n      let iframeLoaded = false;\n      const cacheMessages = [];\n\n      function handleMessage(e) {\n        const iframe = document.getElementById('webview-patch-iframe');\n        if (!iframeLoaded || !iframe) {\n          return;\n        }\n        if (e.origin.startsWith('vscode-webview://')) {\n          iframe.contentWindow.postMessage(e.data, '*');\n        } else if ('{{serverUrl}}'.startsWith(e.origin)) {\n          const { type, data } = e.data;\n          console.log(TAG + ' received:', e.data);\n          if (type === '[vscode:client]:postMessage') {\n            getApi().postMessage(data);\n          } else if (type === '[vscode:client]:commands') {\n            if (data === 'F1') {\n              window.dispatchEvent(\n                new KeyboardEvent('keydown', {\n                  key: 'F1',\n                  keyCode: 112,\n                  code: 'F1',\n                }),\n              );\n            }\n          }\n        }\n      }\n\n      window.addEventListener('message', function (event) {\n        if (event.origin.startsWith('vscode-webview://')) {\n          cacheMessages.push(event);\n          return;\n        }\n        handleMessage(event);\n      });\n\n      let isCacheWorking = false;\n      setInterval(() => {\n        if (isCacheWorking) {\n          return;\n        }\n\n        isCacheWorking = true;\n        if (iframeLoaded) {\n          let event = cacheMessages.shift();\n          while (event) {\n            handleMessage(event);\n            event = cacheMessages.shift();\n          }\n        }\n        isCacheWorking = false;\n      }, 50);\n\n      onDomReady(function () {\n        /**  @type {HTMLIFrameElement} */\n        const iframe = document.getElementById('webview-patch-iframe');\n        observeAttributeChanges(document.body, 'class', function (className) {\n          sendInitData(iframe);\n        });\n\n        onDomReady(function () {\n          iframeLoaded = true;\n          sendInitData(iframe);\n        }, iframe.contentDocument);\n\n        iframe.addEventListener('load', function (e) {\n          iframeLoaded = true;\n\n          let interval = setInterval(() => {\n            try {\n              if (document.getElementById('_defaultStyles')) {\n                sendInitData(iframe);\n                // addListeners(iframe);\n                clearInterval(interval);\n                return;\n              }\n            } catch (e) {\n              clearInterval(interval);\n              console.error(e);\n            }\n          }, 10);\n        });\n      });\n    <\/script>\n  </head>\n\n  <body>\n    <div class=\"outer\">\n      <iframe\n        id=\"webview-patch-iframe\"\n        frameborder=\"0\"\n        sandbox=\"allow-scripts allow-same-origin allow-forms allow-pointer-lock allow-downloads\"\n        allow=\"cross-origin-isolated; autoplay; clipboard-read; clipboard-write\"\n        src=\"{{serverUrl}}\"\n      ></iframe>\n    </div>\n  </body>\n</html>\n";
+//#endregion
+//#region src/webview/webview.ts
+/**
+*
+* @param options serverUrl string or object options
+*/
 function getWebviewHtml(options) {
-  const opts = {
-    serverUrl: ""
-  };
-  Object.assign(opts, options);
-  return template_default.replace(/\{\{serverUrl\}\}/g, opts.serverUrl);
+	const opts = { serverUrl: "" };
+	Object.assign(opts, options);
+	return template_default.replace(/\{\{serverUrl\}\}/g, opts.serverUrl);
 }
 var webview_default = getWebviewHtml;
-exports.default = webview_default; exports.getWebviewHtml = getWebviewHtml;
+//#endregion
+export { webview_default as default, getWebviewHtml };

package/package.json CHANGED Viewed

@@ -1,6 +1,7 @@
 {
   "name": "@tomjs/vite-plugin-vscode",
-  "version": "4.3.0",
+  "type": "module",
+  "version": "5.1.0",
   "description": "Use vue/react to develop 'vscode extension webview', supporting esm/cjs",
   "author": {
     "name": "Tom Gao",
@@ -23,26 +24,19 @@
     "cjs"
   ],
   "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
-    "./webview": {
-      "import": "./dist/webview.mjs",
-      "require": "./dist/webview.js"
-    },
-    "./client": "./dist/client.global.js",
+    ".": "./dist/index.js",
+    "./webview": "./dist/webview.js",
+    "./client": "./dist/client.iife.js",
     "./env": "./env.d.ts"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
     "env.d.ts"
   ],
   "engines": {
-    "node": ">=18"
+    "node": ">=18.19"
   },
   "publishConfig": {
     "access": "public",
@@ -55,39 +49,41 @@
     "@tomjs/logger": "^1.4.0",
     "@tomjs/node": "^2.2.3",
     "dayjs": "^1.11.13",
-    "execa": "^5.1.1",
+    "execa": "^8.0.1",
     "kolorist": "^1.8.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.merge": "^4.6.2",
     "node-html-parser": "^7.0.1",
-    "tsup": "^8.5.0"
+    "tsdown": "~0.15.12"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.8.1",
-    "@tomjs/commitlint": "^4.0.0",
-    "@tomjs/eslint": "^5.2.0",
-    "@tomjs/stylelint": "^6.0.0",
-    "@tomjs/tsconfig": "^2.0.0",
+    "@antfu/eslint-config": "^6.2.0",
+    "@commitlint/cli": "^20.1.0",
+    "@tomjs/commitlint": "^5.0.0",
+    "@tomjs/eslint": "^6.0.0",
+    "@tomjs/stylelint": "^7.0.0",
+    "@tomjs/tsconfig": "^2.1.0",
     "@types/lodash.clonedeep": "^4.5.9",
     "@types/lodash.merge": "^4.6.9",
-    "@types/node": "18.19.120",
-    "@vitejs/plugin-vue": "^5.2.4",
-    "cross-env": "^7.0.3",
-    "eslint": "^9.31.0",
-    "globals": "^16.3.0",
-    "lint-staged": "^16.1.2",
+    "@types/node": "20.19.25",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "cross-env": "^10.1.0",
+    "eslint": "^9.39.1",
+    "globals": "^16.5.0",
+    "lint-staged": "^16.2.7",
     "npm-run-all": "^4.1.5",
-    "rimraf": "^6.0.1",
-    "simple-git-hooks": "^2.13.0",
-    "stylelint": "^16.22.0",
-    "tsx": "^4.20.3",
-    "typescript": "~5.7.3",
-    "vite": "^6.3.5",
-    "vue-tsc": "^2.2.12"
+    "publint": "^0.3.15",
+    "rimraf": "^6.1.2",
+    "simple-git-hooks": "^2.13.1",
+    "stylelint": "^16.26.1",
+    "tsx": "^4.20.6",
+    "typescript": "~5.8.3",
+    "vite": "^7.2.4",
+    "vue-tsc": "^3.1.5"
   },
   "scripts": {
-    "dev": "pnpm clean && tsup --watch",
-    "build": "pnpm clean && tsup",
+    "dev": "pnpm clean && tsdown --watch",
+    "build": "pnpm clean && tsdown",
     "clean": "rimraf ./dist",
     "lint": "run-s lint:stylelint lint:eslint",
     "lint:eslint": "eslint --fix",

package/dist/client.global.js DELETED Viewed

@@ -1,93 +0,0 @@
-"use strict";
-(() => {
-  // src/webview/client.ts
-  if (window.top === window.self) {
-    throw new Error("[vscode:client]: must run in vscode webview");
-  }
-  var TAG = "[@tomjs:vscode:client] ";
-  patchAcquireVsCodeApi();
-  function onDomReady(callback) {
-    if (document.readyState === "interactive" || document.readyState === "complete") {
-      callback();
-    } else {
-      document.addEventListener("DOMContentLoaded", callback);
-    }
-  }
-  function patchInitData(data) {
-    onDomReady(() => {
-      console.log(TAG, "patch client style");
-      const { style, body, root } = data;
-      document.documentElement.style.cssText = root.cssText;
-      document.body.className = body.className;
-      Object.keys(body.dataset).forEach((key) => {
-        document.body.dataset[key] = body.dataset[key];
-      });
-      const defaultStyles = document.createElement("style");
-      defaultStyles.id = "_defaultStyles";
-      defaultStyles.textContent = style;
-      document.head.appendChild(defaultStyles);
-    });
-  }
-  var POST_MESSAGE_TYPE = "[vscode:client]:postMessage";
-  function patchAcquireVsCodeApi() {
-    class AcquireVsCodeApi {
-      postMessage(message) {
-        console.log(TAG, "mock acquireVsCodeApi.postMessage:", message);
-        window.parent.postMessage({ type: POST_MESSAGE_TYPE, data: message }, "*");
-      }
-      getState() {
-        console.log(TAG, "mock acquireVsCodeApi.getState");
-        const state = sessionStorage.getItem("vscodeState");
-        return state ? JSON.parse(state) : void 0;
-      }
-      setState(newState) {
-        console.log(TAG, "mock acquireVsCodeApi.setState:", newState);
-        sessionStorage.setItem("vscodeState", JSON.stringify(newState));
-        return newState;
-      }
-    }
-    console.log(TAG, "patch acquireVsCodeApi");
-    let api;
-    window.acquireVsCodeApi = () => {
-      if (!api) {
-        api = new AcquireVsCodeApi();
-        return api;
-      } else {
-        return api;
-      }
-    };
-  }
-  var INIT_TYPE = "[vscode:extension]:init";
-  window.addEventListener("message", (e) => {
-    const { type, data } = e.data || {};
-    if (!e.origin.startsWith("vscode-webview://") || type !== INIT_TYPE) {
-      return;
-    }
-    patchInitData(data);
-  });
-  var KEYBOARD_EVENT_TYPE = "[vscode:client]:commands";
-  var isMac = navigator.userAgent.includes("Macintosh");
-  document.addEventListener("keydown", (e) => {
-    console.log(e);
-    const { metaKey, shiftKey, ctrlKey, altKey, key } = e;
-    if (key === "F1") {
-      window.parent.postMessage({ type: KEYBOARD_EVENT_TYPE, data: "F1" }, "*");
-    } else if (isMac && metaKey && !altKey && !ctrlKey) {
-      if (shiftKey) {
-        if (key === "z") {
-          document.execCommand("redo");
-        }
-      } else if (key === "a") {
-        document.execCommand("selectAll");
-      } else if (key === "c") {
-        document.execCommand("copy");
-      } else if (key === "v") {
-        document.execCommand("paste");
-      } else if (key === "x") {
-        document.execCommand("cut");
-      } else if (key === "z") {
-        document.execCommand("undo");
-      }
-    }
-  });
-})();

package/dist/index.d.mts DELETED Viewed

@@ -1,93 +0,0 @@
-import { PluginOption } from 'vite';
-import { Options } from 'tsup';
-/**
- * vscode extension options. See [tsup](https://tsup.egoist.dev/) and [API Doc](https://paka.dev/npm/tsup) for more information.
- */
-interface ExtensionOptions extends Omit<Options, 'entry' | 'format' | 'outDir' | 'watch' | 'onSuccess' | 'skipNodeModulesBundle'> {
-    /**
-     * The extension entry file.
-     * @default "extension/index.ts"
-     */
-    entry?: string;
-    /**
-     * The output directory for the extension files. Default is `dist-extension`.
-     * @default "dist-extension"
-     */
-    outDir?: string;
-    /**
-     * The bundle format. Currently only supports cjs.
-     */
-    format?: 'cjs';
-    /**
-     * Skip dependencies and peerDependencies bundle. Default is false.
-     */
-    skipNodeModulesBundle?: boolean;
-    /**
-     * A function that will be executed after the build succeeds.
-     */
-    onSuccess?: () => Promise<void | undefined | (() => void | Promise<void>)>;
-}
-/**
- * vscode webview options.
- */
-interface WebviewOption {
-    /**
-     * The method name to inject. Default is '__getWebviewHtml__'
-     */
-    name?: string;
-    /**
-     * The CSP meta for the webview. Default is `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src {{cspSource}} 'unsafe-inline'; script-src 'nonce-{{nonce}}' 'unsafe-eval';">`
-     */
-    csp?: string;
-}
-/**
- * vite plugin options.
- */
-interface PluginOptions {
-    /**
-     * Recommended switch. Default is true.
-     * if true, will have the following default behavior:
-     * will change the extension/webview outDir to be parallel outDir;
-     * eg. if vite build.outDir is 'dist', will change extension/webview to 'dist/extension' and 'dist/webview'
-     * @default true
-     */
-    recommended?: boolean;
-    /**
-     * Inject code into vscode extension code and web client code, so that webview can support HMR during the development stage.
-     *
-     * - vite serve
-     *   - extension: Inject `import __getWebviewHtml__ from '@tomjs/vite-plugin-vscode/webview';` at the top of the file that calls the `__getWebviewHtml__` method
-     *   - web: Add `<script>` tag to index.html and inject `@tomjs/vite-plugin-vscode/client` code
-     * - vite build
-     *   - extension: Inject `import __getWebviewHtml__ from '@tomjs/vite-plugin-vscode-inject';` at the top of the file that calls the `__getWebviewHtml__` method
-     *
-     * If is string, will set inject method name. Default is '__getWebviewHtml__'.
-     *
-     *
-     * @example
-     * extension file
-     * ```ts
-     *function setupHtml(webview: Webview, context: ExtensionContext) {
-     *  return __getWebviewHtml__({serverUrl:WebviewHtmlOptions, webview, context});
-     *}
-     * ```
-     */
-    webview?: boolean | string | WebviewOption;
-    /**
-     * extension vite config.
-     */
-    extension?: ExtensionOptions;
-    /**
-     * Whether to enable devtools. Inject `<script src="http://localhost:<devtools-port>"></script>` into webview client . Default is true.
-     *  - true:
-     *    - react: inject `<script src="http://localhost:8097"></script>`
-     *    - vue: inject `<script src="http://localhost:8098"></script>`
-     * @default true
-     */
-    devtools?: boolean;
-}
-declare function useVSCodePlugin(options?: PluginOptions): PluginOption;
-export { type ExtensionOptions, type PluginOptions, type WebviewOption, useVSCodePlugin as default, useVSCodePlugin };