made-refine 0.2.13 → 0.2.16

package/dist/utils.mjs

@@ -40,6 +40,125 @@ function getZoomScale() {
   return snap.active ? snap.zoom : 1;
 }
 
+// src/utils/react-fiber.ts
+var EXCLUDED_PROP_KEYS = /* @__PURE__ */ new Set([
+  "className",
+  "style",
+  "children",
+  "ref",
+  "key",
+  "render"
+]);
+function serializePropValue(value) {
+  if (typeof value === "function") return "[function]";
+  if (typeof value === "symbol") return void 0;
+  if (value === void 0) return void 0;
+  if (value !== null && typeof value === "object") {
+    if ("$$typeof" in value) return "[element]";
+    try {
+      JSON.stringify(value);
+      return value;
+    } catch {
+      return "[object]";
+    }
+  }
+  return value;
+}
+function getComponentProps(fiber) {
+  const props = fiber?.memoizedProps ?? fiber?.pendingProps;
+  if (!props || typeof props !== "object") return {};
+  const result = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (EXCLUDED_PROP_KEYS.has(key)) continue;
+    if (key.startsWith("data-")) continue;
+    const serialized = serializePropValue(value);
+    if (serialized !== void 0) {
+      result[key] = serialized;
+    }
+  }
+  return result;
+}
+function getCallSiteSource(fiber) {
+  const source = fiber?._debugSource;
+  if (source?.fileName) {
+    return {
+      file: source.fileName,
+      line: typeof source.lineNumber === "number" ? source.lineNumber : void 0,
+      column: typeof source.columnNumber === "number" ? source.columnNumber : void 0
+    };
+  }
+  const pending = fiber?.pendingProps?.__source;
+  if (pending?.fileName) {
+    return {
+      file: pending.fileName,
+      line: typeof pending.lineNumber === "number" ? pending.lineNumber : void 0,
+      column: typeof pending.columnNumber === "number" ? pending.columnNumber : void 0
+    };
+  }
+  return null;
+}
+function deriveDefinitionSource(frames) {
+  for (const frame of frames) {
+    if (frame.file && isComponentPrimitivePath(frame.file)) {
+      return { file: frame.file, line: frame.line, column: frame.column };
+    }
+  }
+  return null;
+}
+var PRIMITIVE_PATH_PATTERNS = [
+  /\/components\/ui\//,
+  /\/ui\/primitives\//,
+  /\/design-system\//
+];
+var PRIMITIVE_NPM_PATTERNS = [
+  /@base-ui\//,
+  /@radix-ui\//,
+  /@headlessui\//,
+  /@chakra-ui\//,
+  /@mantine\//,
+  /@mui\//,
+  /@ark-ui\//
+];
+var FRAMEWORK_EXCLUSION_PATTERNS = [
+  /node_modules\/react\//,
+  /node_modules\/react-dom\//,
+  /node_modules\/next\/dist\//,
+  /node_modules\/scheduler\//,
+  /node_modules\/react-server\//
+];
+function isComponentPrimitivePath(filePath) {
+  const normalized = filePath.replace(/\\/g, "/");
+  for (const pattern of FRAMEWORK_EXCLUSION_PATTERNS) {
+    if (pattern.test(normalized)) return false;
+  }
+  for (const pattern of PRIMITIVE_NPM_PATTERNS) {
+    if (pattern.test(normalized)) return true;
+  }
+  for (const pattern of PRIMITIVE_PATH_PATTERNS) {
+    if (pattern.test(normalized)) return true;
+  }
+  return false;
+}
+function classifyComponentFiber(fiber, frames, elementSourceFile) {
+  if (elementSourceFile && isComponentPrimitivePath(elementSourceFile)) {
+    return { isComponentPrimitive: true };
+  }
+  if (!fiber) return { isComponentPrimitive: false };
+  const callSite = getCallSiteSource(fiber);
+  if (callSite?.file && isComponentPrimitivePath(callSite.file)) {
+    return { isComponentPrimitive: true };
+  }
+  for (const frame of frames) {
+    if (frame.file && isComponentPrimitivePath(frame.file)) {
+      return { isComponentPrimitive: true };
+    }
+  }
+  if (!elementSourceFile && fiber._debugSource) {
+    return { isComponentPrimitive: true };
+  }
+  return { isComponentPrimitive: false };
+}
+
 // src/utils.ts
 function clamp(value, min, max) {
   if (!Number.isFinite(value)) return min;
@@ -1805,38 +1924,48 @@ function getOwnerStack(fiber) {
   const frames = [];
   let current = fiber;
   let lastFrame = null;
+  let nearestComponentFiber = null;
   while (current) {
     const frame = buildFrame(current);
     if (frame && shouldIncludeFrame(frame, lastFrame)) {
       frames.push(frame);
       lastFrame = frame;
+      if (!nearestComponentFiber) {
+        nearestComponentFiber = current;
+      }
     }
     current = current._debugOwner;
   }
-  return frames;
+  return { frames, nearestComponentFiber };
 }
 function getRenderStack(fiber) {
   const frames = [];
   let current = fiber;
   let lastFrame = null;
+  let nearestComponentFiber = null;
   while (current) {
     const frame = buildFrame(current);
     if (frame && shouldIncludeFrame(frame, lastFrame)) {
       frames.push(frame);
       lastFrame = frame;
+      if (!nearestComponentFiber) {
+        nearestComponentFiber = current;
+      }
     }
     current = current.return;
   }
-  return frames;
+  return { frames, nearestComponentFiber };
 }
-function getReactComponentStack(element) {
+function getReactComponentInfo(element) {
   const fiber = getFiberForElement(element);
-  if (!fiber) return [];
-  const ownerStack = getOwnerStack(fiber);
-  if (ownerStack.length > 0) {
-    return ownerStack;
+  if (!fiber) return { frames: [], nearestComponentFiber: null };
+  const elementSource = getSourceFromFiber(fiber);
+  const elementSourceFile = elementSource?.fileName || void 0;
+  const ownerResult = getOwnerStack(fiber);
+  if (ownerResult.frames.length > 0) {
+    return { ...ownerResult, elementSourceFile };
   }
-  return getRenderStack(fiber);
+  return { ...getRenderStack(fiber), elementSourceFile };
 }
 function getElementDisplayName(element) {
   const tag = element.tagName.toLowerCase();
@@ -2138,6 +2267,27 @@ function parseDomSource(element) {
   }
   return { file, line, column };
 }
+var MAX_SUB_ELEMENT_SOURCES = 20;
+function collectSubElementSources(element) {
+  const sources = {};
+  const children = element.querySelectorAll("[data-direct-edit-source]");
+  const labelCounts = /* @__PURE__ */ new Map();
+  let count = 0;
+  for (const child of children) {
+    if (count >= MAX_SUB_ELEMENT_SOURCES) break;
+    if (!(child instanceof HTMLElement)) continue;
+    const source = parseDomSource(child);
+    if (!source) continue;
+    const text = ((child.innerText || child.textContent) ?? "").trim();
+    let baseLabel = text.length > 0 && text.length <= 30 ? text.slice(0, 30).toLowerCase().replace(/\s+/g, "_") : child.tagName.toLowerCase();
+    const existing = labelCounts.get(baseLabel) ?? 0;
+    labelCounts.set(baseLabel, existing + 1);
+    const label = existing > 0 ? `${baseLabel}_${existing + 1}` : baseLabel;
+    sources[label] = source;
+    count++;
+  }
+  return sources;
+}
 function getElementSource(element) {
   const domSource = parseDomSource(element);
   if (domSource) return domSource;
@@ -2160,8 +2310,15 @@ function getElementSource(element) {
 function getElementLocator(element) {
   const elementInfo = getElementInfo(element);
   const domSource = getElementSource(element);
+  const { frames, nearestComponentFiber, elementSourceFile } = getReactComponentInfo(element);
+  const componentName = nearestComponentFiber?.type?.displayName || nearestComponentFiber?.type?.name || void 0;
+  const authoredProps = nearestComponentFiber ? getComponentProps(nearestComponentFiber) : void 0;
+  const classification = classifyComponentFiber(nearestComponentFiber, frames, elementSourceFile);
+  const callSite = nearestComponentFiber ? getCallSiteSource(nearestComponentFiber) : null;
+  const definitionSrc = classification.isComponentPrimitive ? deriveDefinitionSource(frames) : null;
+  const subSources = collectSubElementSources(element);
   return {
-    reactStack: getReactComponentStack(element),
+    reactStack: frames,
     domSelector: buildDomSelector(element),
     domContextHtml: buildDomContextHtml(element),
     targetHtml: buildTargetHtml(element),
@@ -2169,36 +2326,80 @@ function getElementLocator(element) {
     tagName: elementInfo.tagName,
     id: elementInfo.id,
     classList: elementInfo.classList,
-    domSource: domSource ?? void 0
+    domSource: domSource ?? void 0,
+    reactComponentName: componentName,
+    authoredProps: authoredProps && Object.keys(authoredProps).length > 0 ? authoredProps : void 0,
+    subElementSources: Object.keys(subSources).length > 0 ? subSources : void 0,
+    callSiteSource: callSite ?? void 0,
+    definitionSource: definitionSrc ?? void 0,
+    isComponentPrimitive: nearestComponentFiber || elementSourceFile ? classification.isComponentPrimitive : void 0
   };
 }
 function getLocatorHeader(locator) {
   const primaryFrame = getPrimaryFrame(locator);
-  const componentLabel = primaryFrame?.name ? primaryFrame.name : locator.tagName;
-  const formattedSource = locator.domSource?.file ? formatSourceLocation(locator.domSource.file, locator.domSource.line, locator.domSource.column) : primaryFrame?.file ? formatSourceLocation(primaryFrame.file, primaryFrame.line, primaryFrame.column) : null;
-  return { componentLabel, formattedSource };
+  const componentLabel = locator.reactComponentName ?? primaryFrame?.name ?? locator.tagName;
+  let formattedSource;
+  if (locator.isComponentPrimitive && locator.definitionSource?.file) {
+    formattedSource = formatSourceLocation(
+      locator.definitionSource.file,
+      locator.definitionSource.line,
+      locator.definitionSource.column
+    );
+  } else {
+    formattedSource = locator.domSource?.file ? formatSourceLocation(locator.domSource.file, locator.domSource.line, locator.domSource.column) : primaryFrame?.file ? formatSourceLocation(primaryFrame.file, primaryFrame.line, primaryFrame.column) : null;
+  }
+  const formattedCallSite = locator.callSiteSource?.file ? formatSourceLocation(locator.callSiteSource.file, locator.callSiteSource.line, locator.callSiteSource.column) : null;
+  return { componentLabel, formattedSource, formattedCallSite };
+}
+function formatComponentTree(reactStack) {
+  const names = reactStack.map((f) => f.name).filter(Boolean);
+  if (names.length === 0) return null;
+  if (names.length === 1) return names[0];
+  const [component, ...ancestors] = names;
+  return `${component} (in ${ancestors.join(" > ")})`;
 }
 function buildLocatorContextLines(locator, options) {
   const lines = [];
-  const { componentLabel, formattedSource } = getLocatorHeader(locator);
+  const { componentLabel, formattedSource, formattedCallSite } = getLocatorHeader(locator);
   const target = (locator.targetHtml || locator.domContextHtml || "").trim();
   const context = locator.domContextHtml?.trim() || "";
-  const selector = locator.domSelector?.trim();
+  const path = locator.domSelector?.trim();
   const text = locator.textPreview?.trim();
   lines.push(`@<${componentLabel}>`);
   lines.push("");
+  const tree = formatComponentTree(locator.reactStack);
+  if (tree) {
+    lines.push(`react: ${tree}`);
+  }
+  if (locator.authoredProps && Object.keys(locator.authoredProps).length > 0) {
+    lines.push(`props: ${JSON.stringify(locator.authoredProps)}`);
+  }
+  if (locator.isComponentPrimitive != null) {
+    lines.push(`type: ${locator.isComponentPrimitive ? "component" : "instance"}`);
+  }
+  lines.push(`source: ${formattedSource ?? "(file not available)"}`);
+  if (formattedCallSite && formattedCallSite !== formattedSource) {
+    lines.push(`call-site: ${formattedCallSite}`);
+  }
+  if (locator.subElementSources && Object.keys(locator.subElementSources).length > 0) {
+    lines.push("source-map:");
+    for (const [label, source] of Object.entries(locator.subElementSources)) {
+      lines.push(`  - ${label}: ${formatSourceLocation(source.file, source.line, source.column)}`);
+    }
+  }
+  if (path) {
+    lines.push(`path: ${path}`);
+  }
   if (target) {
+    lines.push("");
     lines.push("target:");
     lines.push(target);
   }
   if (!options?.skipContext && context && context !== target) {
+    lines.push("");
     lines.push("context:");
     lines.push(context);
   }
-  lines.push(`in ${formattedSource ?? "(file not available)"}`);
-  if (selector) {
-    lines.push(`selector: ${selector}`);
-  }
   if (text) {
     lines.push(`text: ${text}`);
   }
@@ -2994,6 +3195,7 @@ export {
   findTextOwnerAtPoint,
   findTextOwnerByRangeScan,
   flexPropertyToCSSMap,
+  formatComponentTree,
   formatPropertyValue,
   getAllComputedStyles,
   getChildBriefInfo,
@@ -3011,6 +3213,7 @@ export {
   getElementSource,
   getExportContentProfile,
   getFlexDirection,
+  getLocatorHeader,
   getMoveIntentForEdit,
   getOriginalInlineStyles,
   getSelectionColors,