d2d-feedbackkit 0.1.1 → 0.1.2

package/dist/vite-plugin.js

@@ -0,0 +1,319 @@
+// src/babel.ts
+import path from "node:path";
+import { parseExpression } from "@babel/parser";
+function feedbackLocatorBabelPlugin(babel) {
+  const t = babel.types;
+  function ensureState(state) {
+    if (!state.feedbackLocator) {
+      throw new Error("Feedback Locator Babel state is not initialized");
+    }
+    return state.feedbackLocator;
+  }
+  function shouldSkip(state) {
+    return !state.filename || state.filename.includes("node_modules");
+  }
+  function enterComponent(state, name, loc) {
+    if (!name || !loc || !isComponentName(name)) {
+      return null;
+    }
+    const transformState = ensureState(state);
+    if (state.opts?.ignoreComponentNames?.includes(name)) {
+      return null;
+    }
+    const id = transformState.components.length;
+    transformState.components.push({ name, loc });
+    transformState.componentStack.push(id);
+    return id;
+  }
+  function exitComponent(state, id) {
+    if (id === null) {
+      return;
+    }
+    const transformState = ensureState(state);
+    const last = transformState.componentStack.at(-1);
+    if (last === id) {
+      transformState.componentStack.pop();
+    }
+  }
+  return {
+    name: "feedbackkit-source-locator-babel",
+    visitor: {
+      Program: {
+        enter(_programPath, state) {
+          if (shouldSkip(state)) {
+            return;
+          }
+          const projectRoot = normalizePath(state.opts?.projectRoot ?? state.cwd ?? process.cwd());
+          const filename = normalizePath(state.filename);
+          const filePath = toRepoRelativePath(filename, projectRoot);
+          const fileKey = filePath;
+          state.feedbackLocator = {
+            projectRoot,
+            filePath,
+            fileKey,
+            components: [],
+            expressions: [],
+            componentStack: []
+          };
+        },
+        exit(programPath, state) {
+          if (shouldSkip(state) || !state.feedbackLocator) {
+            return;
+          }
+          const transformState = state.feedbackLocator;
+          if (transformState.expressions.length === 0) {
+            return;
+          }
+          const data = {
+            filePath: transformState.filePath,
+            projectPath: transformState.projectRoot,
+            expressions: transformState.expressions,
+            components: transformState.components
+          };
+          const serializedData = JSON.stringify(data);
+          const serializedFileKey = JSON.stringify(transformState.fileKey);
+          const registerCode = `(() => {
+            if (typeof window !== "undefined") {
+              window.__FEEDBACK_LOCATOR_DATA__ = window.__FEEDBACK_LOCATOR_DATA__ || {};
+              window.__FEEDBACK_LOCATOR_DATA__[${serializedFileKey}] = ${serializedData};
+            }
+          })()`;
+          programPath.pushContainer("body", t.expressionStatement(parseExpression(registerCode)));
+        }
+      },
+      FunctionDeclaration: {
+        enter(pathNode, state) {
+          if (shouldSkip(state) || !state.feedbackLocator) {
+            return;
+          }
+          pathNode.setData("feedbackLocatorComponentId", enterComponent(state, pathNode.node.id?.name, pathNode.node.loc));
+        },
+        exit(pathNode, state) {
+          if (shouldSkip(state) || !state.feedbackLocator) {
+            return;
+          }
+          exitComponent(state, pathNode.getData("feedbackLocatorComponentId") ?? null);
+        }
+      },
+      VariableDeclarator: {
+        enter(pathNode, state) {
+          if (shouldSkip(state) || !state.feedbackLocator) {
+            return;
+          }
+          const initType = pathNode.node.init?.type;
+          const isFunction = initType === "ArrowFunctionExpression" || initType === "FunctionExpression";
+          const name = pathNode.node.id?.type === "Identifier" ? pathNode.node.id.name : null;
+          pathNode.setData("feedbackLocatorComponentId", isFunction ? enterComponent(state, name, pathNode.node.loc) : null);
+        },
+        exit(pathNode, state) {
+          if (shouldSkip(state) || !state.feedbackLocator) {
+            return;
+          }
+          exitComponent(state, pathNode.getData("feedbackLocatorComponentId") ?? null);
+        }
+      },
+      JSXElement(pathNode, state) {
+        if (shouldSkip(state) || !state.feedbackLocator || !pathNode.node.loc) {
+          return;
+        }
+        const openingElement = pathNode.node.openingElement;
+        const name = getJsxName(openingElement.name);
+        if (!isDomJsxName(openingElement.name)) {
+          return;
+        }
+        if (openingElement.attributes.some((attribute) => attribute.type === "JSXAttribute" && attribute.name?.name === "data-feedback-locator-id")) {
+          return;
+        }
+        const transformState = state.feedbackLocator;
+        const expressionId = transformState.expressions.length;
+        const componentId = transformState.componentStack.at(-1) ?? null;
+        const locatorId = `${transformState.fileKey}::${expressionId}`;
+        transformState.expressions.push({
+          name,
+          loc: pathNode.node.loc,
+          componentId
+        });
+        openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier("data-feedback-locator-id"), t.stringLiteral(locatorId)));
+      }
+    }
+  };
+}
+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 isDomJsxName(node) {
+  if (node.type !== "JSXIdentifier") {
+    return false;
+  }
+  return /^[a-z]/.test(node.name);
+}
+function isComponentName(name) {
+  return /^[A-Z]/.test(name);
+}
+function normalizePath(value) {
+  return value.split(path.sep).join("/");
+}
+function toRepoRelativePath(filename, projectRoot) {
+  const relative = normalizePath(path.relative(projectRoot, filename));
+  return relative.startsWith(".") ? filename : relative;
+}
+// src/source.ts
+var feedbackLocatorDataAttribute = "data-feedback-locator-id";
+var feedbackLocatorDataKey = "__FEEDBACK_LOCATOR_DATA__";
+var locatorJsDataAttribute = "data-locatorjs-id";
+function parseFeedbackLocatorId(locatorId) {
+  const separatorIndex = locatorId.lastIndexOf("::");
+  if (separatorIndex === -1) {
+    throw new Error("feedback locator id is malformed");
+  }
+  const fileKey = locatorId.slice(0, separatorIndex);
+  const expressionId = locatorId.slice(separatorIndex + 2);
+  if (!fileKey || !expressionId) {
+    throw new Error("feedback locator id is malformed");
+  }
+  return {
+    fileKey,
+    expressionIndex: Number(expressionId)
+  };
+}
+function getFeedbackLocatorSourceForElement(target) {
+  const found = target.closest(`[${feedbackLocatorDataAttribute}]`);
+  if (!(found instanceof HTMLElement)) {
+    return getLocatorJsSourceForElement(target);
+  }
+  const locatorId = found.dataset.feedbackLocatorId;
+  if (!locatorId || typeof window === "undefined") {
+    return getLocatorJsSourceForElement(target);
+  }
+  const { fileKey, expressionIndex } = parseFeedbackLocatorId(locatorId);
+  const fileData = window.__FEEDBACK_LOCATOR_DATA__?.[fileKey];
+  const expression = fileData?.expressions[expressionIndex];
+  if (!fileData || !expression) {
+    return getLocatorJsSourceForElement(found);
+  }
+  const component = getFeedbackLocatorComponent(fileData, expression.componentId);
+  const locatorJsComponent = component ? null : getLocatorJsComponentForElement(found);
+  const ancestorComponent = component || locatorJsComponent ? null : getAncestorComponentForElement(found);
+  const resolvedComponent = component ?? locatorJsComponent ?? ancestorComponent;
+  return {
+    locatorId,
+    filePath: fileData.filePath,
+    elementName: expression.name,
+    componentName: resolvedComponent?.name ?? null,
+    line: expression.loc.start.line,
+    column: expression.loc.start.column + 1,
+    componentLine: resolvedComponent?.line ?? null,
+    componentColumn: resolvedComponent?.column ?? null
+  };
+}
+function getLocatorJsSourceForElement(target) {
+  const found = target.closest(`[${locatorJsDataAttribute}]`);
+  if (!(found instanceof HTMLElement) || typeof window === "undefined") {
+    return null;
+  }
+  const locatorId = found.getAttribute(locatorJsDataAttribute);
+  if (!locatorId) {
+    return null;
+  }
+  const { fileKey, expressionIndex } = parseFeedbackLocatorId(locatorId);
+  const fileData = window.__LOCATOR_DATA__?.[fileKey];
+  const expression = fileData?.expressions?.[expressionIndex];
+  if (!fileData || !expression) {
+    return null;
+  }
+  const component = getLocatorJsComponentForElement(found);
+  return {
+    locatorId,
+    filePath: toLocatorJsFilePath(fileData, fileKey),
+    elementName: expression.name,
+    componentName: component?.name ?? null,
+    line: expression.loc.start.line,
+    column: expression.loc.start.column + 1,
+    componentLine: component?.line ?? null,
+    componentColumn: component?.column ?? null
+  };
+}
+function toLocatorJsFilePath(fileData, fileKey) {
+  const filePath = fileData.filePath ?? fileKey;
+  const projectPath = fileData.projectPath;
+  if (projectPath && filePath.startsWith(projectPath)) {
+    return filePath.slice(projectPath.length).replace(/^\//, "");
+  }
+  return filePath.replace(/^\//, "");
+}
+function getFeedbackLocatorComponent(fileData, componentId) {
+  if (componentId === null) {
+    return null;
+  }
+  const component = fileData.components[componentId];
+  if (!component) {
+    return null;
+  }
+  return {
+    name: component.name,
+    line: component.loc.start.line,
+    column: component.loc.start.column + 1
+  };
+}
+function getAncestorComponentForElement(element) {
+  let parent = element.parentElement;
+  while (parent) {
+    const locatorId = parent.getAttribute(feedbackLocatorDataAttribute);
+    if (locatorId) {
+      const component = getFeedbackLocatorComponentForLocatorId(locatorId);
+      if (component) {
+        return component;
+      }
+    }
+    parent = parent.parentElement;
+  }
+  return null;
+}
+function getFeedbackLocatorComponentForLocatorId(locatorId) {
+  const { fileKey, expressionIndex } = parseFeedbackLocatorId(locatorId);
+  const fileData = window.__FEEDBACK_LOCATOR_DATA__?.[fileKey];
+  const expression = fileData?.expressions[expressionIndex];
+  if (!fileData || !expression) {
+    return null;
+  }
+  return getFeedbackLocatorComponent(fileData, expression.componentId);
+}
+function getLocatorJsComponentForElement(element) {
+  const locatorJsId = element.getAttribute(locatorJsDataAttribute);
+  if (!locatorJsId) {
+    return null;
+  }
+  const { fileKey, expressionIndex } = parseFeedbackLocatorId(locatorJsId);
+  const fileData = window.__LOCATOR_DATA__?.[fileKey];
+  const expression = fileData?.expressions?.[expressionIndex];
+  const componentId = expression?.wrappingComponentId;
+  if (componentId === null || componentId === undefined) {
+    return null;
+  }
+  const component = fileData?.components?.[componentId];
+  if (!component) {
+    return null;
+  }
+  return {
+    name: component.name,
+    line: component.loc?.start.line ?? null,
+    column: component.loc?.start.column !== undefined ? component.loc.start.column + 1 : null
+  };
+}
+export {
+  parseFeedbackLocatorId,
+  getFeedbackLocatorSourceForElement,
+  feedbackLocatorDataKey,
+  feedbackLocatorDataAttribute,
+  feedbackLocatorBabelPlugin as feedbackKitBabelPlugin,
+  feedbackLocatorBabelPlugin as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "d2d-feedbackkit",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "description": "SolidJS feedback widget, source locator, and integration helpers.",
   "license": "UNLICENSED",
@@ -24,7 +24,7 @@
     },
     "./vite-plugin": {
       "types": "./src/vite-plugin.ts",
-      "default": "./src/vite-plugin.ts"
+      "default": "./dist/vite-plugin.js"
     },
     "./client": {
       "types": "./src/client.ts",
@@ -61,10 +61,11 @@
     "src/types.ts",
     "src/vite-plugin.ts",
     "src/web-component.tsx",
-    "src/widget.tsx"
+    "src/widget.tsx",
+    "dist/vite-plugin.js"
   ],
   "scripts": {
-    "build": "bun run type-check",
+    "build": "bun run type-check && bun build src/vite-plugin.ts --outfile dist/vite-plugin.js --target node --format esm --packages external",
     "clean": "rm -rf node_modules dist",
     "pack:dry-run": "npm pack --dry-run",
     "publish:public": "npm publish --access public",