@tomjs/vite-plugin-vscode 4.3.0 → 5.1.0

package/README.md

@@ -6,11 +6,11 @@
 
 > Use `vue`/`react` to develop [vscode extension webview](https://code.visualstudio.com/api/references/vscode-api#WebviewPanel), supporting `esm` and `cjs`.
 
-In development mode, inject the same code of [@tomjs/vscode-extension-webview](https://github.com/tomjs/vscode-extension-webview) into `vscode extension code` and `web page code`, use To support `HMR`; during production build, the final generated `index.html` code is injected into `vscode extension code` to reduce the workload.
+During development, inject code into both `vscode extension code` and `web page` code to support `HMR`; during production builds, inject the final generated `index.html` code into the `vscode extension code` to minimize manual effort.
 
 ## Features
 
-- Use [tsup](https://github.com/egoist/tsup) to quickly build `extension code`
+- Use [tsdown](https://tsdown.dev/) to quickly build `extension code`
 - Simple configuration, focus on business
 - Support `esm` and `cjs`
 - Support ESM extension (vscode `v1.100.0+`)
@@ -296,13 +296,13 @@ During development, support standalone development tool applications for `react`
 
 ### ExtensionOptions
 
-Based on [Options](https://paka.dev/npm/tsup) of [tsup](https://tsup.egoist.dev/), some default values are added for ease of use.
+Based on [Options](https://tsdown.dev/reference/api/Interface.Options) of [tsdown](https://tsdown.dev/), some default values are added for ease of use.
 
-| Property  | Type                                                                | Default               | Description                                                |
-| --------- | ------------------------------------------------------------------- | --------------------- | ---------------------------------------------------------- |
-| entry     | `string`                                                            | `extension/index.ts`  | The vscode extension entry file.                           |
-| outDir    | `string`                                                            | `dist-extension/main` | The output directory for the vscode extension file         |
-| onSuccess | `() => Promise<void \| undefined \| (() => void \| Promise<void>)>` | `undefined`           | A function that will be executed after the build succeeds. |
+| Property   | Type                 | Default               | Description                                        |
+| ---------- | -------------------- | --------------------- | -------------------------------------------------- |
+| entry      | `string`             | `extension/index.ts`  | The vscode extension entry file.                   |
+| outDir     | `string`             | `dist-extension/main` | The output directory for the vscode extension file |
+| watchFiles | `string`\/`string[]` | ``                    | Watch extension code files during development      |
 
 ### WebviewOption
 
@@ -443,6 +443,12 @@ Open the [examples](./examples) directory, there are `vue` and `react` examples.
 
 ## Important Notes
 
+### v5.0.0
+
+**Breaking Updates:**
+
+- Using [tsdown](https://tsdown.dev/zh-CN) instead of [tsup](https://tsup.egoist.dev/), the vscode extension [extension](#ExtensionOptions) configuration is changed to inherit [tsdown](https://tsdown.dev/zh-CN).
+
 ### v4.0.0
 
 **Breaking Updates:**

package/README.zh_CN.md

@@ -6,11 +6,11 @@
 
 > 用 `vue`/`react` 来开发 [vscode extension webview](https://code.visualstudio.com/api/references/vscode-api#WebviewPanel) ，支持 `esm` 和 `cjs`。
 
-在开发模式时，给 `vscode 扩展代码` 和 `web 页面代码`中注入 [@tomjs/vscode-extension-webview](https://github.com/tomjs/vscode-extension-webview) 相同的代码，用来支持 `HMR`；生产构建时，将最终生成的`index.html` 代码注入到 `vscode 扩展代码` 中，减少工作量。
+在开发模式时，给 `vscode 扩展代码` 和 `web 页面代码`中注入代码，用来支持 `HMR`；生产构建时，将最终生成的`index.html` 代码注入到 `vscode 扩展代码` 中，减少工作量。
 
 ## 特性
 
-- 使用 [tsup](https://github.com/egoist/tsup) 快速构建 `扩展代码`
+- 使用 [tsdown](https://tsdown.dev/zh-CN/) 快速构建 `扩展代码`
 - 配置简单，专注业务
 - 支持 `esm`和 `cjs`
 - 支持 ESM 扩展（vscode `v1.100.0+`）
@@ -296,13 +296,13 @@ const value = await acquireVsCodeApi().getState();
 
 ### ExtensionOptions
 
-继承自 [tsup](https://tsup.egoist.dev/) 的 [Options](https://paka.dev/npm/tsup)，添加了一些默认值，方便使用。
+继承自 [tsdown](https://tsdown.dev/zh-CN/) 的 [Options](https://tsdown.dev/zh-CN/reference/api/Interface.Options)，添加了一些默认值，方便使用。
 
-| 参数名    | 类型                                                                | 默认值                | 说明                     |
-| --------- | ------------------------------------------------------------------- | --------------------- | ------------------------ |
-| entry     | `string`                                                            | `extension/index.ts`  | 入口文件                 |
-| outDir    | `string`                                                            | `dist-extension/main` | 输出文件夹               |
-| onSuccess | `() => Promise<void \| undefined \| (() => void \| Promise<void>)>` | `undefined`           | 构建成功后运行的回调函数 |
+| 参数名     | 类型                 | 默认值                | 说明                     |
+| ---------- | -------------------- | --------------------- | ------------------------ |
+| entry      | `string`             | `extension/index.ts`  | 入口文件                 |
+| outDir     | `string`             | `dist-extension/main` | 输出文件夹               |
+| watchFiles | `string`\/`string[]` | ``                    | 开发时监听扩展代码的文件 |
 
 ### WebviewOption
 
@@ -447,6 +447,12 @@ pnpm build
 
 ## 重要说明
 
+### v5.0.0
+
+**破坏性更新：**
+
+- 使用 [tsdown](https://tsdown.dev/zh-CN) 替代 [tsup](https://tsup.egoist.dev/)，vscode 扩展 [extension](#ExtensionOptions) 配置改为继承 [tsdown](https://tsdown.dev/zh-CN)
+
 ### v4.0.0
 
 **破坏性更新：**

package/dist/client.iife.js

@@ -0,0 +1,84 @@
+(function() {
+
+
+//#region src/webview/client.ts
+	if (window.top === window.self) throw new Error("[vscode:client]: must run in vscode webview");
+	const 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);
+		});
+	}
+	const 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;
+		};
+	}
+	const 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);
+	});
+	const KEYBOARD_EVENT_TYPE = "[vscode:client]:commands";
+	const 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");
+		}
+	});
+
+//#endregion
+})();

package/dist/index.d.ts

@@ -1,93 +1,89 @@
-import { PluginOption } from 'vite';
-import { Options } from 'tsup';
+import { Options } from "tsdown";
+import { PluginOption } from "vite";
 
+//#region src/types.d.ts
 /**
- * vscode extension options. See [tsup](https://tsup.egoist.dev/) and [API Doc](https://paka.dev/npm/tsup) for more information.
+ * vscode extension options. See [tsdown](https://tsdown.dev/) and [Config Options](https://tsdown.dev/reference/config-options) 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>)>;
+interface ExtensionOptions extends Omit<Options, 'entry' | 'format' | 'outDir' | 'watch'> {
+  /**
+   * 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;
+  /**
+   * `tsdown` watches the current working directory by default. You can set files that need to be watched, which may improve performance.
+   *
+   * If no value is specified, the default value of the "recommended" parameter is ["extension"] when it is true, otherwise it defaults to "true"
+   */
+  watchFiles?: string | string[];
 }
 /**
  * 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;
+  /**
+   * 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;
+  /**
+   * Recommended switch. Default is true.
+   * if true, will have the following default behavior:
+   * - will change the extension/webview outDir to be parallel outDir;
+   * - 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;
 }
-
+//#endregion
+//#region src/index.d.ts
 declare function useVSCodePlugin(options?: PluginOptions): PluginOption;
-
-export { type ExtensionOptions, type PluginOptions, type WebviewOption, useVSCodePlugin as default, useVSCodePlugin };
+//#endregion
+export { ExtensionOptions, PluginOptions, WebviewOption, useVSCodePlugin as default, useVSCodePlugin };