d2d-feedbackkit 0.1.0 → 0.1.2

package/README.md

@@ -64,6 +64,12 @@ const locator = createFeedbackLocator({
   appKey: "host-app",
   appName: "Host App",
   showFloatingButton: false,
+  enableVideoRecording: false,
+  theme: {
+    primary: "45 96% 53%",
+    primaryForeground: "30 70% 8%",
+    ring: "45 96% 53%",
+  },
   submitFeedback: async (input) => {
     const response = await fetch("https://feedbackkit.d2d.cloud/api/submissions", {
       method: "POST",

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.0",
+  "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",

package/src/solid.tsx

@@ -37,10 +37,11 @@ import type {
   FeedbackLocatorHotkey,
   FeedbackLocatorPoint,
   FeedbackLocatorSourceMetadata,
+  FeedbackLocatorTheme,
 } from "./types";
 import { createShortcutResolver } from "./shortcuts";
 
-type FeedbackLocatorRootProps = {
+export type FeedbackLocatorRootProps = {
   locator: FeedbackLocator;
   open?: boolean;
   defaultOpen?: boolean;
@@ -48,6 +49,8 @@ type FeedbackLocatorRootProps = {
   onClose?: (reason: FeedbackLocatorCloseReason) => void;
   onSubmitted?: (result: FeedbackLocatorHostedSubmitResult) => void;
   showFloatingButton?: boolean;
+  enableVideoRecording?: boolean;
+  theme?: FeedbackLocatorTheme;
 };
 
 type FeedbackLocatorMode = "idle" | "selecting" | "annotating" | "submitting";
@@ -1309,6 +1312,17 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
   const snapshot = () => selected();
   const selectionRect = () => hoverRect();
   const currentTextDraft = () => textDraft();
+  const isVideoRecordingEnabled = () =>
+    (props.enableVideoRecording ?? props.locator.config.enableVideoRecording) === true;
+  const themeStyle = (): JSX.CSSProperties => {
+    const theme = props.theme ?? props.locator.config.theme;
+
+    return {
+      ...(theme?.primary ? { "--primary": theme.primary } : {}),
+      ...(theme?.primaryForeground ? { "--primary-foreground": theme.primaryForeground } : {}),
+      ...(theme?.ring ? { "--ring": theme.ring } : {}),
+    };
+  };
   const canvasCursor = () => {
     if (tool() === "select") {
       return isMovingAnnotation() ? "grabbing" : "grab";
@@ -1322,7 +1336,7 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
   };
 
   return (
-    <div data-feedback-locator-ui="true">
+    <div data-feedback-locator-ui="true" style={themeStyle()}>
       <Show
         when={
           mode() === "idle" &&
@@ -1615,70 +1629,72 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
                       </Show>
                     </div>
 
-                    <div>
-                      <label class="mb-2 block text-sm font-medium">Video-opname</label>
-                      <div class="space-y-2 rounded-md border bg-background p-3">
-                        <div class="flex flex-wrap items-center gap-2">
-                          <Show
-                            when={recordingState() === "recording"}
-                            fallback={
-                              <button
-                                type="button"
-                                class="inline-flex h-9 items-center gap-2 rounded-md border px-3 text-sm font-medium transition hover:bg-muted disabled:opacity-60"
-                                disabled={mode() === "submitting" || !supportsScreenRecording()}
-                                onClick={startRecording}
-                              >
-                                <Video class="h-4 w-4" />
-                                Neem video op
-                              </button>
-                            }
-                          >
-                            <button
-                              type="button"
-                              class="inline-flex h-9 items-center gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 text-sm font-medium transition hover:bg-destructive/15"
-                              disabled={mode() === "submitting"}
-                              onClick={stopRecording}
-                            >
-                              <StopCircle class="h-4 w-4" />
-                              Stop opname
-                            </button>
-                          </Show>
-
-                          <Show when={recordingBlob()}>
-                            {(blob) => (
-                              <>
-                                <a
-                                  class="inline-flex h-9 max-w-full items-center gap-2 truncate rounded-md border px-3 text-sm underline-offset-4 hover:bg-muted hover:underline"
-                                  href={recordingUrl() ?? undefined}
-                                  target="_blank"
-                                  rel="noreferrer"
-                                >
-                                  <Video class="h-4 w-4 shrink-0" />
-                                  <span class="truncate">
-                                    screen-recording.webm ({formatBytes(blob().size)},{" "}
-                                    {formatDuration(recordingDurationMs())})
-                                  </span>
-                                </a>
+                    <Show when={isVideoRecordingEnabled()}>
+                      <div>
+                        <label class="mb-2 block text-sm font-medium">Video-opname</label>
+                        <div class="space-y-2 rounded-md border bg-background p-3">
+                          <div class="flex flex-wrap items-center gap-2">
+                            <Show
+                              when={recordingState() === "recording"}
+                              fallback={
                                 <button
                                   type="button"
-                                  class="inline-flex h-9 items-center gap-2 rounded-md border px-3 text-sm font-medium transition hover:bg-muted"
-                                  disabled={mode() === "submitting"}
-                                  onClick={clearRecording}
+                                  class="inline-flex h-9 items-center gap-2 rounded-md border px-3 text-sm font-medium transition hover:bg-muted disabled:opacity-60"
+                                  disabled={mode() === "submitting" || !supportsScreenRecording()}
+                                  onClick={startRecording}
                                 >
-                                  <Trash2 class="h-4 w-4" />
-                                  Wissen
+                                  <Video class="h-4 w-4" />
+                                  Neem video op
                                 </button>
-                              </>
-                            )}
+                              }
+                            >
+                              <button
+                                type="button"
+                                class="inline-flex h-9 items-center gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 text-sm font-medium transition hover:bg-destructive/15"
+                                disabled={mode() === "submitting"}
+                                onClick={stopRecording}
+                              >
+                                <StopCircle class="h-4 w-4" />
+                                Stop opname
+                              </button>
+                            </Show>
+
+                            <Show when={recordingBlob()}>
+                              {(blob) => (
+                                <>
+                                  <a
+                                    class="inline-flex h-9 max-w-full items-center gap-2 truncate rounded-md border px-3 text-sm underline-offset-4 hover:bg-muted hover:underline"
+                                    href={recordingUrl() ?? undefined}
+                                    target="_blank"
+                                    rel="noreferrer"
+                                  >
+                                    <Video class="h-4 w-4 shrink-0" />
+                                    <span class="truncate">
+                                      screen-recording.webm ({formatBytes(blob().size)},{" "}
+                                      {formatDuration(recordingDurationMs())})
+                                    </span>
+                                  </a>
+                                  <button
+                                    type="button"
+                                    class="inline-flex h-9 items-center gap-2 rounded-md border px-3 text-sm font-medium transition hover:bg-muted"
+                                    disabled={mode() === "submitting"}
+                                    onClick={clearRecording}
+                                  >
+                                    <Trash2 class="h-4 w-4" />
+                                    Wissen
+                                  </button>
+                                </>
+                              )}
+                            </Show>
+                          </div>
+                          <Show when={!supportsScreenRecording()}>
+                            <div class="text-xs text-muted-foreground">
+                              Video-opname is niet beschikbaar in deze browser.
+                            </div>
                           </Show>
                         </div>
-                        <Show when={!supportsScreenRecording()}>
-                          <div class="text-xs text-muted-foreground">
-                            Video-opname is niet beschikbaar in deze browser.
-                          </div>
-                        </Show>
                       </div>
-                    </div>
+                    </Show>
 
                     <Accordion title="Broncontext" defaultOpen>
                       <div class="space-y-1">

package/src/types.ts

@@ -191,6 +191,12 @@ export type FeedbackLocatorSourceCollector = (
   target: HTMLElement,
 ) => FeedbackLocatorSourceMetadata | null;
 
+export type FeedbackLocatorTheme = {
+  primary?: string;
+  primaryForeground?: string;
+  ring?: string;
+};
+
 export type FeedbackLocatorConfig = {
   appKey: string;
   appName: string;
@@ -209,6 +215,8 @@ export type FeedbackLocatorConfig = {
   contextProviders?: FeedbackLocatorContextProvider[];
   hotkey?: FeedbackLocatorHotkey;
   showFloatingButton?: boolean;
+  enableVideoRecording?: boolean;
+  theme?: FeedbackLocatorTheme;
   sourceCollector?: FeedbackLocatorSourceCollector;
 };
 
@@ -219,6 +227,8 @@ export type FeedbackLocator = {
       | "contextProviders"
       | "hotkey"
       | "showFloatingButton"
+      | "enableVideoRecording"
+      | "theme"
       | "sourceCollector"
       | "startAgentSession"
       | "startCodexThread"