@pinfix/plugin 0.1.0

package/dist/index.cjs

@@ -0,0 +1,521 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  default: () => src_default,
+  unplugin: () => unplugin
+});
+module.exports = __toCommonJS(src_exports);
+var import_unplugin = require("unplugin");
+
+// src/transform.ts
+var import_parser = require("@babel/parser");
+var import_traverse = __toESM(require("@babel/traverse"), 1);
+var import_magic_string = __toESM(require("magic-string"), 1);
+
+// ../shared/dist/index.js
+var WS_PORT_DEFAULT = 24816;
+var DATA_ATTR = "data-pinfix-source";
+var VUE_BUILTINS = /* @__PURE__ */ new Set([
+  "template",
+  "slot",
+  "transition",
+  "transition-group",
+  "keep-alive",
+  "teleport",
+  "suspense",
+  "component",
+  "fragment"
+]);
+
+// src/transform.ts
+var import_fs = require("fs");
+var import_compiler_dom = require("@vue/compiler-dom");
+var traverse = import_traverse.default.default || import_traverse.default;
+function transformCode(code, id, absolutePath, options) {
+  const [filePath, query] = id.split("?", 2);
+  const params = new URLSearchParams(query || "");
+  if (filePath.endsWith(".vue") && (params.get("lang") === "tsx" || params.get("lang") === "jsx")) {
+    return transformJsx(code, id, absolutePath, options);
+  }
+  if (filePath.endsWith(".vue") && (!query || params.get("type") === "template")) {
+    return transformVue(code, filePath, options);
+  }
+  if (/\.(jsx|tsx)$/.test(filePath)) {
+    return transformJsx(code, id, absolutePath, options);
+  }
+  return null;
+}
+function transformJsx(code, id, absolutePath, options) {
+  let originalSource;
+  try {
+    const filePath = absolutePath || id;
+    originalSource = (0, import_fs.readFileSync)(filePath.split("?")[0], "utf-8");
+  } catch {
+    originalSource = code;
+  }
+  let ast;
+  try {
+    ast = (0, import_parser.parse)(code, {
+      sourceType: "module",
+      plugins: ["jsx", "typescript", "decorators-legacy"]
+    });
+  } catch {
+    return null;
+  }
+  let originalAst = null;
+  if (originalSource !== code) {
+    try {
+      originalAst = (0, import_parser.parse)(originalSource, {
+        sourceType: "module",
+        plugins: ["jsx", "typescript", "decorators-legacy"]
+      });
+    } catch {
+      originalAst = null;
+    }
+  }
+  const originalPositions = /* @__PURE__ */ new Map();
+  if (originalAst) {
+    const tagCounts2 = /* @__PURE__ */ new Map();
+    traverse(originalAst, {
+      JSXOpeningElement(path) {
+        const node = path.node;
+        const loc = node.loc?.start;
+        if (!loc) return;
+        const name = getJsxName(node.name);
+        const count = (tagCounts2.get(name) || 0) + 1;
+        tagCounts2.set(name, count);
+        originalPositions.set(`${name}#${count}`, { line: loc.line, column: loc.column + 1 });
+      }
+    });
+  }
+  const s = new import_magic_string.default(code);
+  let hasChanges = false;
+  const tagCounts = /* @__PURE__ */ new Map();
+  const escapeTags = options?.escapeTags ?? [];
+  traverse(ast, {
+    JSXOpeningElement(path) {
+      const node = path.node;
+      const loc = node.loc?.start;
+      if (!loc) return;
+      const name = getJsxName(node.name);
+      if (isEscaped(name, escapeTags)) return;
+      const count = (tagCounts.get(name) || 0) + 1;
+      tagCounts.set(name, count);
+      let line = loc.line;
+      let column = loc.column + 1;
+      const origPos = originalPositions.get(`${name}#${count}`);
+      if (origPos) {
+        line = origPos.line;
+        column = origPos.column;
+      }
+      const attrStr = ` ${DATA_ATTR}="${id}:${line}:${column}"`;
+      const nameEnd = node.name.end;
+      s.appendLeft(nameEnd, attrStr);
+      hasChanges = true;
+    }
+  });
+  if (!hasChanges) return null;
+  return { code: s.toString(), map: s.generateMap({ source: id, hires: true, includeContent: true }) };
+}
+function getJsxName(node) {
+  if (node.type === "JSXIdentifier") return node.name;
+  if (node.type === "JSXMemberExpression") {
+    return getJsxName(node.object) + "." + node.property.name;
+  }
+  if (node.type === "JSXNamespacedName") {
+    return node.namespace.name + ":" + node.name.name;
+  }
+  return "unknown";
+}
+function isEscaped(tagName, escapeTags) {
+  return escapeTags.some(
+    (tag) => typeof tag === "string" ? tag === tagName : tag.test(tagName)
+  );
+}
+function transformVue(code, id, options) {
+  const ast = (0, import_compiler_dom.parse)(code, { comments: true });
+  const templateNode = ast.children.find(
+    (node) => node.type === 1 && node.tag === "template"
+  );
+  if (!templateNode) return null;
+  const s = new import_magic_string.default(code);
+  let hasChanges = false;
+  const escapeTags = options?.escapeTags ?? [];
+  function walkNode(node) {
+    if (node.type !== 1) return;
+    const tagName = node.tag;
+    if (!VUE_BUILTINS.has(tagName) && !isEscaped(tagName, escapeTags)) {
+      const line = node.loc.start.line;
+      const column = node.loc.start.column;
+      const insertPos = node.loc.start.offset + 1 + tagName.length;
+      const attrStr = ` ${DATA_ATTR}="${id}:${line}:${column}"`;
+      s.appendLeft(insertPos, attrStr);
+      hasChanges = true;
+    }
+    if (node.children) {
+      for (const child of node.children) {
+        walkNode(child);
+      }
+    }
+  }
+  for (const child of templateNode.children) {
+    walkNode(child);
+  }
+  if (!hasChanges) return null;
+  return { code: s.toString(), map: s.generateMap({ source: id, hires: true, includeContent: true }) };
+}
+
+// src/server.ts
+var import_child_process = require("child_process");
+var import_fs2 = require("fs");
+var import_path = require("path");
+var import_url = require("url");
+var import_meta = {};
+var channelProc = null;
+var currentOptions = null;
+var watchedServerBin = null;
+var restartTimer = null;
+function getRuntimeDir() {
+  return typeof __dirname === "string" ? __dirname : (0, import_path.dirname)((0, import_url.fileURLToPath)(import_meta.url));
+}
+function cleanStalePid(cwd) {
+  const pidFile = (0, import_path.resolve)(cwd, "node_modules", ".cache", "pinfix", "server.pid");
+  if (!(0, import_fs2.existsSync)(pidFile)) return;
+  try {
+    const pid = parseInt((0, import_fs2.readFileSync)(pidFile, "utf-8").trim(), 10);
+    if (!isNaN(pid)) {
+      try {
+        process.kill(pid, 0);
+        process.kill(pid, "SIGTERM");
+      } catch {
+      }
+    }
+  } catch {
+  }
+  try {
+    (0, import_fs2.unlinkSync)(pidFile);
+  } catch {
+  }
+}
+function getServerBin() {
+  return (0, import_path.resolve)(getRuntimeDir(), "channel-server.js");
+}
+function spawnChannelServer(options, serverBin) {
+  if (!(0, import_fs2.existsSync)(serverBin)) {
+    options.onError?.(`channel-server entry not found: ${serverBin}`);
+    return null;
+  }
+  try {
+    const proc = (0, import_child_process.spawn)(process.execPath, [serverBin], {
+      stdio: ["ignore", "pipe", "pipe"],
+      env: {
+        ...process.env,
+        PINFIX_PORT: String(options.port),
+        PINFIX_CWD: options.cwd
+      }
+    });
+    proc.stderr?.on("data", (d) => {
+      const msg = d.toString().trim();
+      if (msg) options.onLog?.(msg);
+    });
+    proc.on("error", () => {
+      options.onError?.("channel-server failed to start");
+    });
+    proc.on("exit", () => {
+      if (channelProc === proc) channelProc = null;
+    });
+    channelProc = proc;
+    return proc;
+  } catch {
+    return null;
+  }
+}
+function watchChannelServer(serverBin) {
+  if (watchedServerBin === serverBin) return;
+  unwatchChannelServer();
+  watchedServerBin = serverBin;
+  (0, import_fs2.watchFile)(serverBin, { interval: 500 }, (curr, prev) => {
+    if (curr.mtimeMs === prev.mtimeMs) return;
+    scheduleChannelServerRestart();
+  });
+}
+function unwatchChannelServer() {
+  if (!watchedServerBin) return;
+  (0, import_fs2.unwatchFile)(watchedServerBin);
+  watchedServerBin = null;
+}
+function scheduleChannelServerRestart() {
+  if (!currentOptions) return;
+  if (restartTimer) clearTimeout(restartTimer);
+  restartTimer = setTimeout(() => {
+    restartTimer = null;
+    restartChannelServer();
+  }, 150);
+}
+function restartChannelServer() {
+  if (!currentOptions) return;
+  const options = currentOptions;
+  const serverBin = getServerBin();
+  options.onLog?.("channel-server changed, restarting");
+  if (channelProc && !channelProc.killed) {
+    const oldProc = channelProc;
+    channelProc = null;
+    oldProc.once("exit", () => {
+      spawnChannelServer(options, serverBin);
+    });
+    oldProc.kill();
+    setTimeout(() => {
+      if (oldProc.exitCode === null && oldProc.signalCode === null) {
+        oldProc.kill("SIGKILL");
+      }
+    }, 1e3);
+    return;
+  }
+  spawnChannelServer(options, serverBin);
+}
+function startChannelServer(options) {
+  cleanStalePid(options.cwd);
+  currentOptions = options;
+  const serverBin = getServerBin();
+  if (options.watch) watchChannelServer(serverBin);
+  if (channelProc && !channelProc.killed) return channelProc;
+  return spawnChannelServer(options, serverBin);
+}
+function stopChannelServer() {
+  if (restartTimer) {
+    clearTimeout(restartTimer);
+    restartTimer = null;
+  }
+  unwatchChannelServer();
+  currentOptions = null;
+  if (channelProc && !channelProc.killed) {
+    channelProc.kill();
+    channelProc = null;
+  }
+}
+
+// src/inject.ts
+var import_fs3 = require("fs");
+var import_path2 = require("path");
+var import_url2 = require("url");
+var import_meta2 = {};
+function getRuntimeDir2() {
+  return typeof __dirname === "string" ? __dirname : (0, import_path2.dirname)((0, import_url2.fileURLToPath)(import_meta2.url));
+}
+function getClientBundle(onError) {
+  const clientPath = (0, import_path2.resolve)(getRuntimeDir2(), "overlay.iife.global.js");
+  try {
+    return (0, import_fs3.readFileSync)(clientPath, "utf-8");
+  } catch (err) {
+    onError?.(
+      `overlay bundle not found at ${clientPath}; run pinfix build before using the plugin (${err.message})`
+    );
+    return "";
+  }
+}
+function getInjectionScript(options) {
+  const clientCode = getClientBundle(options.onError);
+  if (!clientCode) return "";
+  return [
+    `<script>`,
+    `window.__PINFIX_WS_URL__ = ${JSON.stringify(options.wsUrl)};`,
+    `window.__PINFIX_PROMPT__ = ${JSON.stringify(options.prompt)};`,
+    `window.__PINFIX_HOTKEY__ = ${JSON.stringify(options.hotkey || "alt+shift+z")};`,
+    `window.__PINFIX_FAB__ = ${JSON.stringify(options.fab !== false)};`,
+    clientCode,
+    `</script>`
+  ].join("\n");
+}
+
+// src/index.ts
+var import_path3 = require("path");
+var import_url3 = require("url");
+var import_meta3 = {};
+function injectHtml(html, script) {
+  if (!script || html.includes("__PINFIX_WS_URL__")) return html;
+  return html.replace("<head>", `<head>
+${script}`);
+}
+var unplugin = (0, import_unplugin.createUnplugin)((options = {}) => {
+  const port = options.port ?? WS_PORT_DEFAULT;
+  let root = options.root ?? process.cwd();
+  const wsUrl = `ws://localhost:${port}`;
+  const debug = options.debug ?? false;
+  const logError = (msg) => console.warn(`[pinfix] ${msg}`);
+  function setupWebpackLikeCompiler(compiler) {
+    let serverStarted = false;
+    const startServer = () => {
+      if (serverStarted) return;
+      serverStarted = true;
+      startChannelServer({
+        port,
+        cwd: root,
+        watch: true,
+        onLog: debug ? (msg) => console.log(`[pinfix] ${msg}`) : void 0,
+        onError: debug ? (msg) => console.warn(`[pinfix] ${msg}`) : void 0
+      });
+    };
+    if (compiler.watchMode || process.env.WEBPACK_SERVE === "true" || process.env.RSPACK_SERVE === "true") {
+      startServer();
+    }
+    compiler.hooks?.watchRun?.tap("pinfix", startServer);
+    if (compiler.hooks?.shutdown) {
+      compiler.hooks.shutdown.tap("pinfix", stopChannelServer);
+    } else {
+      process.on("exit", stopChannelServer);
+    }
+    compiler.hooks?.compilation?.tap("pinfix", (compilation) => {
+      const script = getInjectionScript({ wsUrl, prompt: options.prompt ?? "", hotkey: options.hotkey, fab: options.fab, onError: logError });
+      const htmlPluginCtors = new Set(
+        (compiler.options?.plugins ?? []).map((plugin) => plugin?.constructor).filter((ctor) => typeof ctor?.getHooks === "function" || typeof ctor?.getCompilationHooks === "function")
+      );
+      for (const HtmlPlugin of htmlPluginCtors) {
+        const hooks = HtmlPlugin.getHooks?.(compilation) ?? HtmlPlugin.getCompilationHooks?.(compilation);
+        if (!hooks?.beforeEmit?.tapPromise) continue;
+        hooks.beforeEmit.tapPromise({ name: "pinfix" }, async (data) => {
+          if (typeof data.html === "string") {
+            data.html = injectHtml(data.html, script);
+          }
+          return data;
+        });
+      }
+      if (compilation.hooks?.processAssets) {
+        const CompilerRuntime = compiler.webpack ?? compiler.rspack;
+        const stage = CompilerRuntime?.Compilation?.PROCESS_ASSETS_STAGE_REPORT ?? 5e3;
+        compilation.hooks.processAssets.tapAsync(
+          { name: "pinfix", stage },
+          (assets, cb) => {
+            if (!script) {
+              cb();
+              return;
+            }
+            const RawSource = CompilerRuntime?.sources?.RawSource;
+            for (const name of Object.keys(assets)) {
+              if (!name.endsWith(".html")) continue;
+              const source = assets[name].source();
+              if (typeof source !== "string") continue;
+              const newHtml = injectHtml(source, script);
+              if (newHtml === source) continue;
+              if (typeof compilation.updateAsset === "function" && RawSource) {
+                compilation.updateAsset(name, new RawSource(newHtml));
+              } else {
+                assets[name] = {
+                  source: () => newHtml,
+                  size: () => newHtml.length
+                };
+              }
+            }
+            cb();
+          }
+        );
+      }
+    });
+  }
+  return {
+    name: "pinfix",
+    enforce: "pre",
+    transformInclude(id) {
+      const [filePath] = id.split("?", 2);
+      return /\.(jsx|tsx|vue)$/.test(filePath);
+    },
+    transform(code, id) {
+      let relativePath = id;
+      const [absFilePath] = id.split("?", 2);
+      if (absFilePath.startsWith(root)) {
+        const rel = absFilePath.slice(root.length);
+        relativePath = (rel.startsWith("/") ? rel.slice(1) : rel) + (id.includes("?") ? "?" + id.split("?")[1] : "");
+      }
+      const relFile = relativePath.split("?")[0];
+      if (options.match && !options.match.test(relFile)) return null;
+      if (options.exclude && options.exclude.test(relFile)) return null;
+      return transformCode(code, relativePath, id, { escapeTags: options.escapeTags });
+    },
+    // === Vite-specific hooks ===
+    vite: {
+      configResolved(config) {
+        root = config.root;
+      },
+      config() {
+        return {
+          define: {
+            __PINFIX_WS_URL__: JSON.stringify(wsUrl),
+            __PINFIX_PROMPT__: JSON.stringify(options.prompt ?? ""),
+            __PINFIX_HOTKEY__: JSON.stringify(options.hotkey ?? "alt+shift+z"),
+            __PINFIX_FAB__: JSON.stringify(options.fab !== false)
+          }
+        };
+      },
+      transformIndexHtml(html) {
+        const injected = getInjectionScript({ wsUrl, prompt: options.prompt ?? "", hotkey: options.hotkey, fab: options.fab, onError: logError });
+        if (injected) {
+          return html.replace("<head>", `<head>
+${injected}`);
+        }
+        const script = `<script type="module" src="/@pinfix/overlay.js"></script>`;
+        return html.replace("</body>", `${script}
+</body>`);
+      },
+      configureServer(server) {
+        startChannelServer({
+          port,
+          cwd: root,
+          watch: true,
+          onLog: debug ? (msg) => server.config.logger.info(`[pinfix] ${msg}`) : void 0,
+          onError: debug ? (msg) => server.config.logger.warn(`[pinfix] ${msg}`) : void 0
+        });
+        server.httpServer?.on("close", stopChannelServer);
+        server.middlewares.use((req, res, next) => {
+          if (req.url === "/@pinfix/overlay.js") {
+            const clientDir = (0, import_path3.resolve)((0, import_path3.dirname)((0, import_url3.fileURLToPath)(import_meta3.url)), "../client");
+            res.setHeader("Content-Type", "application/javascript");
+            res.end(`import "${clientDir}/overlay.ts";`);
+            return;
+          }
+          next();
+        });
+      }
+    },
+    // === Webpack/Rspack-specific hooks ===
+    webpack(compiler) {
+      setupWebpackLikeCompiler(compiler);
+    },
+    rspack(compiler) {
+      setupWebpackLikeCompiler(compiler);
+    }
+  };
+});
+var src_default = unplugin;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  unplugin
+});
+if (module.exports.default) module.exports = module.exports.default;

package/dist/index.d.cts

@@ -0,0 +1,9 @@
+import * as unplugin$1 from 'unplugin';
+import { PinFixOptions } from '@pinfix/shared';
+export { PinFixOptions } from '@pinfix/shared';
+
+declare const unplugin: unplugin$1.UnpluginInstance<PinFixOptions, boolean>;
+
+// @ts-ignore
+export = unplugin;
+export { unplugin };

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import * as unplugin$1 from 'unplugin';
+import { PinFixOptions } from '@pinfix/shared';
+export { PinFixOptions } from '@pinfix/shared';
+
+declare const unplugin: unplugin$1.UnpluginInstance<PinFixOptions, boolean>;
+
+export { unplugin as default, unplugin };

package/dist/index.js

@@ -0,0 +1,8 @@
+import {
+  src_default,
+  unplugin
+} from "./chunk-WYYKYDGW.js";
+export {
+  src_default as default,
+  unplugin
+};