@tomjs/vite-plugin-vscode 2.5.4 → 2.5.5

package/dist/index.mjs

@@ -0,0 +1,404 @@
+// node_modules/.pnpm/tsup@7.2.0_@swc+core@1.3.100_postcss@8.4.32_typescript@5.3.3/node_modules/tsup/assets/esm_shims.js
+import { fileURLToPath } from "url";
+import path from "path";
+var getFilename = () => fileURLToPath(import.meta.url);
+var getDirname = () => path.dirname(getFilename());
+var __dirname = /* @__PURE__ */ getDirname();
+
+// src/index.ts
+import fs from "fs";
+import os from "os";
+import path2 from "path";
+import { cwd } from "process";
+import cloneDeep from "lodash.clonedeep";
+import merge from "lodash.merge";
+import { parse as htmlParser } from "node-html-parser";
+import { build as tsupBuild } from "tsup";
+import { emptyDirSync, readFileSync, readJsonSync } from "@tomjs/node";
+
+// src/constants.ts
+var PLUGIN_NAME = "tomjs:vscode";
+var PACKAGE_NAME = "@tomjs/vite-plugin-vscode";
+var WEBVIEW_METHOD_NAME = "__getWebviewHtml__";
+
+// src/logger.ts
+import dayjs from "dayjs";
+import { blue, gray, green, red, yellow } from "kolorist";
+var Logger = class {
+  constructor(tag, withTime) {
+    this.tag = PLUGIN_NAME;
+    this.withTime = true;
+    this.tag = `[${tag}]`;
+    this.withTime = withTime ?? true;
+  }
+  getTime() {
+    return `${this.withTime ? dayjs().format("HH:mm:ss") : ""} `;
+  }
+  /**
+   * 调试
+   */
+  debug(msg, ...rest) {
+    console.log(`${this.getTime()}${gray(this.tag)}`, msg, ...rest);
+  }
+  /**
+   *  调试日志 等同 debug
+   */
+  log(msg, ...rest) {
+    this.debug(msg, ...rest);
+  }
+  info(msg, ...rest) {
+    console.log(`${this.getTime()}${blue(this.tag)}`, msg, ...rest);
+  }
+  warn(msg, ...rest) {
+    console.log(`${this.getTime()}${yellow(this.tag)}`, msg, ...rest);
+  }
+  error(msg, ...rest) {
+    console.log(`${this.getTime()}${red(this.tag)}`, msg, ...rest);
+  }
+  success(msg, ...rest) {
+    console.log(`${this.getTime()}${green(this.tag)}`, msg, ...rest);
+  }
+};
+var createLogger = (tag) => {
+  return new Logger(tag || PLUGIN_NAME, true);
+};
+
+// src/utils.ts
+function resolveHostname(hostname) {
+  const loopbackHosts = /* @__PURE__ */ new Set([
+    "localhost",
+    "127.0.0.1",
+    "::1",
+    "0000:0000:0000:0000:0000:0000:0000:0001"
+  ]);
+  const wildcardHosts = /* @__PURE__ */ new Set(["0.0.0.0", "::", "0000:0000:0000:0000:0000:0000:0000:0000"]);
+  return loopbackHosts.has(hostname) || wildcardHosts.has(hostname) ? "localhost" : hostname;
+}
+function resolveServerUrl(server) {
+  const addressInfo = server.httpServer.address();
+  const isAddressInfo = (x) => x == null ? void 0 : x.address;
+  if (isAddressInfo(addressInfo)) {
+    const { address, port } = addressInfo;
+    const hostname = resolveHostname(address);
+    const options = server.config.server;
+    const protocol = options.https ? "https" : "http";
+    const devBase = server.config.base;
+    const path3 = typeof options.open === "string" ? options.open : devBase;
+    const url = path3.startsWith("http") ? path3 : `${protocol}://${hostname}:${port}${path3}`;
+    return url;
+  }
+}
+
+// src/index.ts
+var isDev = process.env.NODE_ENV === "development";
+var logger = createLogger();
+function getPkg() {
+  const pkgFile = path2.resolve(process.cwd(), "package.json");
+  if (!fs.existsSync(pkgFile)) {
+    throw new Error("Main file is not specified, and no package.json found");
+  }
+  const pkg = readJsonSync(pkgFile);
+  if (!pkg.main) {
+    throw new Error("Main file is not specified, please check package.json");
+  }
+  return pkg;
+}
+function preMergeOptions(options) {
+  const pkg = getPkg();
+  const opts = merge(
+    {
+      webview: true,
+      recommended: true,
+      debug: false,
+      extension: {
+        entry: "extension/index.ts",
+        outDir: "dist-extension",
+        target: ["es2019", "node14"],
+        format: "cjs",
+        shims: true,
+        clean: true,
+        dts: false,
+        treeshake: isDev ? false : "smallest",
+        outExtension() {
+          return { js: ".js" };
+        },
+        external: ["vscode"],
+        skipNodeModulesBundle: isDev
+      }
+    },
+    cloneDeep(options)
+  );
+  const opt = opts.extension || {};
+  ["entry", "format"].forEach((prop) => {
+    const value = opt[prop];
+    if (!Array.isArray(value) && value) {
+      opt[prop] = [value];
+    }
+  });
+  if (isDev) {
+    opt.sourcemap = opt.sourcemap ?? true;
+  } else {
+    opt.minify ??= true;
+  }
+  opt.external = ["vscode"].concat(opt.external ?? []);
+  if (!opt.skipNodeModulesBundle) {
+    opt.noExternal = Object.keys(pkg.dependencies || {}).concat(
+      Object.keys(pkg.peerDependencies || {})
+    );
+  }
+  opts.extension = opt;
+  if (opts.webview !== false) {
+    let name = WEBVIEW_METHOD_NAME;
+    if (typeof opts.webview === "string") {
+      name = opts.webview ?? WEBVIEW_METHOD_NAME;
+    }
+    opts.webview = Object.assign({ name }, opts.webview);
+  }
+  return opts;
+}
+var prodCachePkgName = `${PACKAGE_NAME}-inject`;
+function genProdWebviewCode(cache, webview) {
+  webview = Object.assign({}, webview);
+  const prodCacheFolder = path2.join(cwd(), "node_modules", prodCachePkgName);
+  emptyDirSync(prodCacheFolder);
+  const destFile = path2.join(prodCacheFolder, "index.ts");
+  function handleHtmlCode(html) {
+    const root = htmlParser(html);
+    const head = root.querySelector("head");
+    if (!head) {
+      root == null ? void 0 : root.insertAdjacentHTML("beforeend", "<head></head>");
+    }
+    const csp = (webview == null ? void 0 : webview.csp) || `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src {{cspSource}} 'unsafe-inline'; script-src 'nonce-{{nonce}}' 'unsafe-eval';">`;
+    head.insertAdjacentHTML("afterbegin", csp);
+    if (csp && csp.includes("{{nonce}}")) {
+      const tags = {
+        script: "src",
+        link: "href"
+      };
+      Object.keys(tags).forEach((tag) => {
+        const elements = root.querySelectorAll(tag);
+        elements.forEach((element) => {
+          const attr = element.getAttribute(tags[tag]);
+          if (attr) {
+            element.setAttribute(tags[tag], `{{baseUri}}${attr}`);
+          }
+          element.setAttribute("nonce", "{{nonce}}");
+        });
+      });
+    }
+    return root.removeWhitespace().toString();
+  }
+  const cacheCode = (
+    /* js */
+    `const htmlCode = {
+    ${Object.keys(cache).map((s) => `${s}: \`${handleHtmlCode(cache[s])}\`,`).join("\n")}
+  };`
+  );
+  const code = (
+    /* js */
+    `import { ExtensionContext, Uri, Webview } from 'vscode';
+
+${cacheCode}
+
+function uuid() {
+  let text = '';
+  const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  for (let i = 0; i < 32; i++) {
+    text += possible.charAt(Math.floor(Math.random() * possible.length));
+  }
+  return text;
+}
+
+export default function getWebviewHtml(webview: Webview, context: ExtensionContext, inputName?:string){
+  const nonce = uuid();
+  const baseUri = webview.asWebviewUri(Uri.joinPath(context.extensionUri, (process.env.VITE_WEBVIEW_DIST || 'dist')));
+  const html = htmlCode[inputName || 'index'] || '';
+  return html.replaceAll('{{cspSource}}', webview.cspSource).replaceAll('{{nonce}}', nonce).replaceAll('{{baseUri}}', baseUri);
+}
+  `
+  );
+  fs.writeFileSync(destFile, code, { encoding: "utf8" });
+  return fixWindowsPath(destFile);
+}
+function fixWindowsPath(webviewPath) {
+  if (os.platform() === "win32") {
+    webviewPath = webviewPath.replaceAll("\\", "/");
+  }
+  return webviewPath;
+}
+function useVSCodePlugin(options) {
+  const opts = preMergeOptions(options);
+  const handleConfig = (config) => {
+    var _a, _b, _c, _d, _e;
+    let outDir = ((_a = config == null ? void 0 : config.build) == null ? void 0 : _a.outDir) || "dist";
+    opts.extension ??= {};
+    if (opts.recommended) {
+      opts.extension.outDir = path2.resolve(outDir, "extension");
+      outDir = path2.resolve(outDir, "webview");
+    }
+    const assetsDir = ((_b = config == null ? void 0 : config.build) == null ? void 0 : _b.assetsDir) || "assets";
+    const output = {
+      chunkFileNames: `${assetsDir}/[name].js`,
+      entryFileNames: `${assetsDir}/[name].js`,
+      assetFileNames: `${assetsDir}/[name].[ext]`
+    };
+    let rollupOutput = ((_d = (_c = config == null ? void 0 : config.build) == null ? void 0 : _c.rollupOptions) == null ? void 0 : _d.output) ?? {};
+    if (Array.isArray(rollupOutput)) {
+      rollupOutput.map((s) => Object.assign(s, output));
+    } else {
+      rollupOutput = Object.assign({}, rollupOutput, output);
+    }
+    return {
+      build: {
+        outDir,
+        sourcemap: isDev ? true : (_e = config == null ? void 0 : config.build) == null ? void 0 : _e.sourcemap,
+        rollupOptions: {
+          output: rollupOutput
+        }
+      }
+    };
+  };
+  let devWebviewClient;
+  if (opts.webview) {
+    devWebviewClient = readFileSync(path2.join(__dirname, "client.global.js"));
+  }
+  let buildConfig;
+  const prodHtmlCache = {};
+  return [
+    {
+      name: "@tomjs:vscode",
+      apply: "serve",
+      config(config) {
+        return handleConfig(config);
+      },
+      configureServer(server) {
+        var _a;
+        if (!server || !server.httpServer) {
+          return;
+        }
+        (_a = server.httpServer) == null ? void 0 : _a.once("listening", async () => {
+          const env = {
+            NODE_ENV: server.config.mode || "development",
+            VITE_DEV_SERVER_URL: resolveServerUrl(server)
+          };
+          logger.info("extension build start");
+          let buildCount = 0;
+          const webview = opts == null ? void 0 : opts.webview;
+          const { onSuccess: _onSuccess, ...tsupOptions } = opts.extension || {};
+          await tsupBuild(
+            merge(tsupOptions, {
+              watch: true,
+              env,
+              silent: true,
+              esbuildPlugins: !webview ? [] : [
+                {
+                  name: "@tomjs:vscode:inject",
+                  setup(build) {
+                    build.onLoad({ filter: /\.ts$/ }, async (args) => {
+                      const file = fs.readFileSync(args.path, "utf-8");
+                      if (file.includes(`${webview.name}(`)) {
+                        return {
+                          contents: `import ${webview.name} from '${PACKAGE_NAME}/webview';
+` + file,
+                          loader: "ts"
+                        };
+                      }
+                      return {};
+                    });
+                  }
+                }
+              ],
+              async onSuccess() {
+                if (typeof _onSuccess === "function") {
+                  await _onSuccess();
+                }
+                if (buildCount++ > 1) {
+                  logger.info("extension rebuild success");
+                } else {
+                  logger.info("extension build success");
+                }
+              }
+            })
+          );
+        });
+      },
+      transformIndexHtml(html) {
+        if (!opts.webview) {
+          return html;
+        }
+        return html.replace(/<\/title>/i, `</title><script>${devWebviewClient}</script>`);
+      }
+    },
+    {
+      name: "@tomjs:vscode",
+      apply: "build",
+      enforce: "post",
+      config(config) {
+        return handleConfig(config);
+      },
+      configResolved(config) {
+        buildConfig = config;
+      },
+      transformIndexHtml(html, ctx) {
+        var _a;
+        if (!opts.webview) {
+          return html;
+        }
+        prodHtmlCache[(_a = ctx.chunk) == null ? void 0 : _a.name] = html;
+        return html;
+      },
+      closeBundle() {
+        let webviewPath;
+        const webview = opts == null ? void 0 : opts.webview;
+        if (webview) {
+          webviewPath = genProdWebviewCode(prodHtmlCache, webview);
+        }
+        let outDir = buildConfig.build.outDir.replace(cwd(), "").replaceAll("\\", "/");
+        if (outDir.startsWith("/")) {
+          outDir = outDir.substring(1);
+        }
+        const env = {
+          NODE_ENV: buildConfig.mode || "production",
+          VITE_WEBVIEW_DIST: outDir
+        };
+        logger.info("extension build start");
+        const { onSuccess: _onSuccess, ...tsupOptions } = opts.extension || {};
+        tsupBuild(
+          merge(tsupOptions, {
+            env,
+            silent: true,
+            esbuildPlugins: !webview ? [] : [
+              {
+                name: "@tomjs:vscode:inject",
+                setup(build) {
+                  build.onLoad({ filter: /\.ts$/ }, async (args) => {
+                    const file = fs.readFileSync(args.path, "utf-8");
+                    if (file.includes(`${webview.name}(`)) {
+                      return {
+                        contents: `import ${webview.name} from \`${webviewPath}\`;
+` + file,
+                        loader: "ts"
+                      };
+                    }
+                    return {};
+                  });
+                }
+              }
+            ],
+            async onSuccess() {
+              if (typeof _onSuccess === "function") {
+                await _onSuccess();
+              }
+              logger.info("extension build success");
+            }
+          })
+        );
+      }
+    }
+  ];
+}
+var src_default = useVSCodePlugin;
+export {
+  src_default as default,
+  useVSCodePlugin
+};

package/dist/webview.d.mts

@@ -0,0 +1,13 @@
+interface WebviewHtmlDevOptions {
+    /**
+     * local server url
+     */
+    serverUrl: string;
+}
+/**
+ *
+ * @param options serverUrl string or object options
+ */
+declare function getHtml(options: string | WebviewHtmlDevOptions): string;
+
+export { WebviewHtmlDevOptions, getHtml as default, getHtml };

package/dist/webview.d.ts

@@ -0,0 +1,13 @@
+interface WebviewHtmlDevOptions {
+    /**
+     * local server url
+     */
+    serverUrl: string;
+}
+/**
+ *
+ * @param options serverUrl string or object options
+ */
+declare function getHtml(options: string | WebviewHtmlDevOptions): string;
+
+export { WebviewHtmlDevOptions, getHtml as default, getHtml };

package/dist/webview.js

@@ -0,0 +1,207 @@
+"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]:getState') {
+            iframe.contentWindow.postMessage(
+              {
+                type: '[vscode:client]:getState',
+                data: getApi().getState(),
+              },
+              '*',
+            );
+          } else if (type === '[vscode:client]:setState') {
+            getApi().setState(data);
+          }
+        }
+      }
+
+      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
+function getHtml(options) {
+  const opts = {
+    serverUrl: ""
+  };
+  if (typeof options === "string") {
+    opts.serverUrl = options;
+  } else {
+    Object.assign(opts, options);
+  }
+  return template_default.replace(new RegExp("{{serverUrl}}", "g"), opts.serverUrl);
+}
+var webview_default = getHtml;
+
+
+
+exports.default = webview_default; exports.getHtml = getHtml;