@designfever/web-review-kit 0.7.2 → 0.8.0

package/dist/vite.cjs

@@ -374,6 +374,16 @@ function compareReviewFigmaSnapshotImages(a, b) {
 // src/vite/figma-image-store.image.ts
 var import_promises = require("fs/promises");
 var import_node_path = __toESM(require("path"), 1);
+var reviewImageStoreTaskQueues = /* @__PURE__ */ new Map();
+function runExclusiveReviewImageStoreTask(dataFile, task) {
+  const previous = reviewImageStoreTaskQueues.get(dataFile) ?? Promise.resolve();
+  const result = previous.then(task, task);
+  reviewImageStoreTaskQueues.set(
+    dataFile,
+    result.catch(() => void 0)
+  );
+  return result;
+}
 function requireReviewFigmaRequestToken({
   enabled,
   env,
@@ -700,12 +710,19 @@ async function readReviewFigmaImageStoreFile(dataFile) {
 }
 async function writeReviewFigmaImageStoreFile(dataFile, data) {
   await (0, import_promises.mkdir)(import_node_path.default.dirname(dataFile), { recursive: true });
+  const tempFile = `${dataFile}.${process.pid}.${Date.now()}.tmp`;
   await (0, import_promises.writeFile)(
-    dataFile,
+    tempFile,
     `${JSON.stringify({ version: 1, images: data.images }, null, 2)}
 `,
     "utf8"
   );
+  try {
+    await (0, import_promises.rename)(tempFile, dataFile);
+  } catch (error) {
+    await (0, import_promises.rm)(tempFile, { force: true });
+    throw error;
+  }
 }
 function getNextImageOrder(images, target) {
   const targetImages = listImagesForTarget(images, target);
@@ -782,19 +799,21 @@ async function handleReviewFigmaImageStoreRequest({
     if (!isAllowedProjectTarget(input.target, options.projectId)) {
       return jsonError(403, "target project is not allowed.");
     }
-    const data = await readReviewFigmaImageStoreFile(dataFile);
-    const image = await createReviewFigmaImage({
-      assetDir,
-      assetEndpoint,
-      currentImages: data.images,
-      env,
-      input,
-      options,
-      requestToken
+    return runExclusiveReviewImageStoreTask(dataFile, async () => {
+      const data = await readReviewFigmaImageStoreFile(dataFile);
+      const image = await createReviewFigmaImage({
+        assetDir,
+        assetEndpoint,
+        currentImages: data.images,
+        env,
+        input,
+        options,
+        requestToken
+      });
+      data.images = [image, ...data.images];
+      await writeReviewFigmaImageStoreFile(dataFile, data);
+      return { status: 201, body: image };
     });
-    data.images = [image, ...data.images];
-    await writeReviewFigmaImageStoreFile(dataFile, data);
-    return { status: 201, body: image };
   }
   if (method === "PATCH" && pathname === `${endpoint}/reorder`) {
     const input = parseReorderImagesInput(body);
@@ -802,49 +821,109 @@ async function handleReviewFigmaImageStoreRequest({
     if (!isAllowedProjectTarget(input.target, options.projectId)) {
       return jsonError(403, "target project is not allowed.");
     }
-    const data = await readReviewFigmaImageStoreFile(dataFile);
-    const images = reorderReviewFigmaImages(data.images, input);
-    data.images = images.allImages;
-    await writeReviewFigmaImageStoreFile(dataFile, data);
-    return { status: 200, body: images.targetImages };
+    return runExclusiveReviewImageStoreTask(dataFile, async () => {
+      const data = await readReviewFigmaImageStoreFile(dataFile);
+      const images = reorderReviewFigmaImages(data.images, input);
+      data.images = images.allImages;
+      await writeReviewFigmaImageStoreFile(dataFile, data);
+      return { status: 200, body: images.targetImages };
+    });
   }
   const id = getEndpointItemId(pathname, endpoint);
   if (id && method === "PATCH") {
     const patch = parseUpdateImageInput(body);
     if (!patch) return jsonError(400, "valid update patch is required.");
-    const data = await readReviewFigmaImageStoreFile(dataFile);
-    const result = updateReviewFigmaImage(data.images, id, patch);
-    if (!result) return jsonError(404, `Figma image not found: ${id}`);
-    if (!isAllowedProjectTarget(result.image.target, options.projectId)) {
-      return jsonError(403, "target project is not allowed.");
-    }
-    data.images = result.images;
-    await writeReviewFigmaImageStoreFile(dataFile, data);
-    return { status: 200, body: result.image };
+    return runExclusiveReviewImageStoreTask(dataFile, async () => {
+      const data = await readReviewFigmaImageStoreFile(dataFile);
+      const result = updateReviewFigmaImage(data.images, id, patch);
+      if (!result) return jsonError(404, `Figma image not found: ${id}`);
+      if (!isAllowedProjectTarget(result.image.target, options.projectId)) {
+        return jsonError(403, "target project is not allowed.");
+      }
+      data.images = result.images;
+      await writeReviewFigmaImageStoreFile(dataFile, data);
+      return { status: 200, body: result.image };
+    });
   }
   if (id && method === "DELETE") {
-    const data = await readReviewFigmaImageStoreFile(dataFile);
-    const image = data.images.find((item) => item.id === id);
-    if (!image) return jsonError(404, `Figma image not found: ${id}`);
-    if (!isAllowedProjectTarget(image.target, options.projectId)) {
-      return jsonError(403, "target project is not allowed.");
-    }
-    data.images = data.images.filter((item) => item.id !== id);
-    await writeReviewFigmaImageStoreFile(dataFile, data);
-    await deleteReviewFigmaImageAsset(assetDir, image.storageKey);
-    return { status: 200, body: { ok: true } };
+    return runExclusiveReviewImageStoreTask(dataFile, async () => {
+      const data = await readReviewFigmaImageStoreFile(dataFile);
+      const image = data.images.find((item) => item.id === id);
+      if (!image) return jsonError(404, `Figma image not found: ${id}`);
+      if (!isAllowedProjectTarget(image.target, options.projectId)) {
+        return jsonError(403, "target project is not allowed.");
+      }
+      data.images = data.images.filter((item) => item.id !== id);
+      await writeReviewFigmaImageStoreFile(dataFile, data);
+      await deleteReviewFigmaImageAsset(assetDir, image.storageKey);
+      return { status: 200, body: { ok: true } };
+    });
   }
   return jsonError(405, "method not allowed.");
 }
-async function readJsonRequestBody(req) {
+var DEFAULT_REVIEW_IMAGE_STORE_MAX_BODY_BYTES = 25 * 1024 * 1024;
+var ReviewImageStoreRequestError = class extends Error {
+  constructor(status, message) {
+    super(message);
+    this.status = status;
+    this.name = "ReviewImageStoreRequestError";
+  }
+};
+function isReviewImageStoreRequestError(error) {
+  return error instanceof ReviewImageStoreRequestError;
+}
+function assertTrustedReviewImageStoreRequest(req) {
+  const origin = req.headers.origin;
+  if (!origin || typeof origin !== "string") return;
+  let originUrl;
+  try {
+    originUrl = new URL(origin);
+  } catch {
+    throw new ReviewImageStoreRequestError(
+      403,
+      "Cross-origin request is not allowed."
+    );
+  }
+  const host = req.headers.host;
+  if (host && originUrl.host === host) return;
+  if (isLoopbackHostname(originUrl.hostname)) return;
+  throw new ReviewImageStoreRequestError(
+    403,
+    "Cross-origin request is not allowed."
+  );
+}
+function isLoopbackHostname(hostname) {
+  return hostname === "localhost" || hostname === "127.0.0.1" || hostname === "::1" || hostname === "[::1]";
+}
+async function readJsonRequestBody(req, maxBytes = DEFAULT_REVIEW_IMAGE_STORE_MAX_BODY_BYTES) {
   if (req.method === "GET" || req.method === "DELETE") return null;
   const chunks = [];
+  let totalBytes = 0;
   for await (const chunk of req) {
-    chunks.push(typeof chunk === "string" ? Buffer.from(chunk) : chunk);
+    const buffer = typeof chunk === "string" ? Buffer.from(chunk) : chunk;
+    totalBytes += buffer.length;
+    if (totalBytes > maxBytes) {
+      throw new ReviewImageStoreRequestError(
+        413,
+        `Request body exceeds ${maxBytes} bytes.`
+      );
+    }
+    chunks.push(buffer);
   }
   const raw = Buffer.concat(chunks).toString("utf8").trim();
   if (!raw) return null;
-  return JSON.parse(raw);
+  const contentType = req.headers["content-type"];
+  if (typeof contentType !== "string" || !contentType.split(";")[0].trim().toLowerCase().endsWith("/json")) {
+    throw new ReviewImageStoreRequestError(
+      415,
+      "Request body must be application/json."
+    );
+  }
+  try {
+    return JSON.parse(raw);
+  } catch {
+    throw new ReviewImageStoreRequestError(400, "Invalid JSON request body.");
+  }
 }
 function sendJson(res, status, body) {
   res.statusCode = status;
@@ -1082,6 +1161,7 @@ var reviewFigmaImageStore = (options = {}) => {
           return;
         }
         try {
+          assertTrustedReviewImageStoreRequest(req);
           const response = await handleReviewFigmaImageStoreRequest({
             dataFile,
             assetDir,
@@ -1092,11 +1172,15 @@ var reviewFigmaImageStore = (options = {}) => {
             pathname,
             requestUrl,
             method: req.method ?? "GET",
-            body: await readJsonRequestBody(req),
+            body: await readJsonRequestBody(req, options.maxRequestBytes),
             requestToken: readRequestFigmaToken(req)
           });
           sendJson(res, response.status, response.body);
         } catch (error) {
+          if (isReviewImageStoreRequestError(error)) {
+            sendJson(res, error.status, { error: error.message });
+            return;
+          }
           sendJson(res, 500, {
             error: error instanceof Error ? error.message : "Figma image store request failed."
           });
@@ -1117,6 +1201,7 @@ function getServerEnv() {
 
 // src/vite.ts
 var VIRTUAL_JSX_DEV_RUNTIME_ID = "\0@designfever/web-review-kit/source-locator/jsx-dev-runtime";
+var typescriptModulePromise;
 var REVIEW_SOURCE_ENV_DEFINE_KEYS = [
   ["__DF_WRK_REVIEW_SOURCE_ROOT__", "VITE_REVIEW_SOURCE_ROOT"],
   ["__DF_WRK_REVIEW_SOURCE_EDITOR__", "VITE_REVIEW_SOURCE_EDITOR"],
@@ -1160,9 +1245,11 @@ var reviewSourceLocator = (options = {}) => {
       if (id !== VIRTUAL_JSX_DEV_RUNTIME_ID) return null;
       return createJsxDevRuntime(runtimeOptions);
     },
-    transform(code) {
+    async transform(code, id) {
       const injectedCode = injectReviewSourceEnv(code, sourceEnvReplacements);
-      return injectedCode ? { code: injectedCode, map: null } : null;
+      const inputCode = injectedCode ?? code;
+      const componentInjectedCode = runtimeOptions.enabled ? await injectReviewSourceComponentHints(inputCode, id, runtimeOptions) : null;
+      return injectedCode || componentInjectedCode ? { code: componentInjectedCode ?? inputCode, map: null } : null;
     }
   };
 };
@@ -1215,6 +1302,112 @@ var reviewDataLocator = (options = {}) => {
     }
   };
 };
+async function injectReviewSourceComponentHints(code, id, options) {
+  const file = normalizePath(id.split("?")[0]);
+  if (!isJsxSourceFile(file, code)) return null;
+  const relativeFile = options.root && file.startsWith(options.root + "/") ? file.slice(options.root.length + 1) : file;
+  if (options.include.length > 0 && !options.include.some((matcher) => matchesPath(matcher, file, relativeFile))) {
+    return null;
+  }
+  if (options.exclude.some((matcher) => matchesPath(matcher, file, relativeFile))) {
+    return null;
+  }
+  const ts = await loadTypeScript();
+  if (!ts) return null;
+  const sourceFile = ts.createSourceFile(
+    file,
+    code,
+    ts.ScriptTarget.Latest,
+    true,
+    file.endsWith(".jsx") ? ts.ScriptKind.JSX : ts.ScriptKind.TSX
+  );
+  const insertions = getSourceComponentInsertions(
+    ts,
+    sourceFile,
+    options.componentAttribute,
+    options.parentComponentAttribute
+  );
+  if (insertions.length === 0) return null;
+  return applySourceComponentInsertions(code, insertions);
+}
+async function loadTypeScript() {
+  const importTypeScript = new Function(
+    "specifier",
+    "return import(specifier)"
+  );
+  typescriptModulePromise ?? (typescriptModulePromise = importTypeScript("typescript").then((module2) => module2).catch(() => null));
+  return typescriptModulePromise;
+}
+function isJsxSourceFile(file, code) {
+  return /\.[cm]?[jt]sx$/.test(file) && code.includes("<");
+}
+function getSourceComponentInsertions(ts, sourceFile, componentAttribute, parentComponentAttribute) {
+  const insertions = [];
+  const visit = (node, currentComponent) => {
+    const component = getComponentNameForNode(ts, node) ?? currentComponent;
+    if (component && isIntrinsicJsxElement(ts, node, sourceFile) && !hasJsxAttribute(ts, node, componentAttribute) && !hasJsxAttribute(ts, node, "data-component")) {
+      insertions.push({
+        offset: node.tagName.end,
+        value: ` ${componentAttribute}=${JSON.stringify(component)}`
+      });
+    }
+    if (component && isCustomJsxElement(ts, node, sourceFile) && !hasJsxAttribute(ts, node, parentComponentAttribute)) {
+      insertions.push({
+        offset: node.tagName.end,
+        value: ` ${parentComponentAttribute}=${JSON.stringify(component)}`
+      });
+    }
+    ts.forEachChild(node, (child) => visit(child, component));
+  };
+  visit(sourceFile, void 0);
+  return insertions;
+}
+function getComponentNameForNode(ts, node) {
+  if (ts.isFunctionDeclaration(node) || ts.isClassDeclaration(node)) {
+    const name = node.name?.text;
+    return isComponentName(name) ? name : void 0;
+  }
+  if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name)) {
+    const name = node.name.text;
+    return isComponentName(name) && node.initializer ? name : void 0;
+  }
+  return void 0;
+}
+function isIntrinsicJsxElement(ts, node, sourceFile) {
+  if (!ts.isJsxOpeningElement(node) && !ts.isJsxSelfClosingElement(node)) {
+    return false;
+  }
+  const tagName = node.tagName.getText(sourceFile);
+  return /^[a-z]/.test(tagName) || tagName.includes("-");
+}
+function isCustomJsxElement(ts, node, sourceFile) {
+  if (!ts.isJsxOpeningElement(node) && !ts.isJsxSelfClosingElement(node)) {
+    return false;
+  }
+  const tagName = node.tagName.getText(sourceFile);
+  if (isReactRuntimeElementName(tagName)) return false;
+  return /^[A-Z]/.test(tagName);
+}
+function isReactRuntimeElementName(tagName) {
+  const name = tagName.startsWith("React.") ? tagName.slice("React.".length) : tagName;
+  return name === "Fragment" || name === "StrictMode" || name === "Profiler";
+}
+function hasJsxAttribute(ts, node, name) {
+  return node.attributes.properties.some(
+    (property) => ts.isJsxAttribute(property) && property.name.getText() === name
+  );
+}
+function isComponentName(name) {
+  return Boolean(name && /^[A-Z][A-Za-z0-9_$]*$/.test(name));
+}
+function applySourceComponentInsertions(code, insertions) {
+  return insertions.slice().sort((a, b) => b.offset - a.offset).reduce(
+    (nextCode, insertion) => `${nextCode.slice(0, insertion.offset)}${insertion.value}${nextCode.slice(
+      insertion.offset
+    )}`,
+    code
+  );
+}
 function matchesPath(matcher, absoluteFile, relativeFile) {
   if (matcher.type === "regex") {
     const regex = new RegExp(matcher.value, matcher.flags);
@@ -1242,7 +1435,12 @@ function createRuntimeOptions(options, config) {
     column: options.column ?? true,
     fileAttribute: `${attributePrefix}-file`,
     lineAttribute: `${attributePrefix}-line`,
-    columnAttribute: `${attributePrefix}-column`
+    columnAttribute: `${attributePrefix}-column`,
+    componentAttribute: `${attributePrefix}-component`,
+    parentFileAttribute: `${attributePrefix}-parent-file`,
+    parentLineAttribute: `${attributePrefix}-parent-line`,
+    parentColumnAttribute: `${attributePrefix}-parent-column`,
+    parentComponentAttribute: `${attributePrefix}-parent-component`
   };
 }
 function createRuntimeMatcher(pattern) {
@@ -1259,13 +1457,17 @@ function createJsxDevRuntime(options) {
 import { Fragment, jsxDEV as baseJsxDEV } from 'react/jsx-dev-runtime';
 
 const OPTIONS = ${JSON.stringify(options)};
+const sourceUsageStack = [];
+const sourceUsageWrapperCache = new WeakMap();
 
 export { Fragment };
 
 export function jsxDEV(type, props, key, isStaticChildren, source, self) {
+  const sourceUsage = getSourceUsage(type, props, source);
+  const nextType = sourceUsage ? getSourceUsageWrapper(type, sourceUsage) : type;
   return baseJsxDEV(
-    type,
-    injectSourceProps(type, props, source),
+    nextType,
+    injectSourceProps(type, props, source, sourceUsage),
     key,
     isStaticChildren,
     source,
@@ -1273,14 +1475,18 @@ export function jsxDEV(type, props, key, isStaticChildren, source, self) {
   );
 }
 
-function injectSourceProps(type, props, source) {
-  if (typeof type !== 'string') return props;
+function injectSourceProps(type, props, source, sourceUsage) {
   if (!source || typeof source.fileName !== 'string') return props;
 
   const sourceFile = getSourceFile(source.fileName);
   if (!sourceFile) return props;
 
   const nextProps = props ? { ...props } : {};
+  if (typeof type !== 'string') {
+    injectParentSourceProps(nextProps, sourceUsage);
+    return nextProps;
+  }
+
   if (nextProps[OPTIONS.fileAttribute] == null) {
     nextProps[OPTIONS.fileAttribute] = sourceFile;
   }
@@ -1290,10 +1496,100 @@ function injectSourceProps(type, props, source) {
   if (OPTIONS.column && source.columnNumber != null && nextProps[OPTIONS.columnAttribute] == null) {
     nextProps[OPTIONS.columnAttribute] = String(source.columnNumber);
   }
+  injectParentSourceProps(nextProps, getCurrentSourceUsage());
 
   return nextProps;
 }
 
+function getSourceUsage(type, props, source) {
+  if (!isSourceUsageComponentType(type)) return null;
+  if (!source || typeof source.fileName !== 'string') return null;
+
+  const sourceFile = getSourceFile(source.fileName);
+  if (!sourceFile) return null;
+
+  return {
+    file: sourceFile,
+    line: OPTIONS.line && source.lineNumber != null ? String(source.lineNumber) : '',
+    column: OPTIONS.column && source.columnNumber != null ? String(source.columnNumber) : '',
+    component: readSourceUsageComponent(props),
+  };
+}
+
+function isSourceUsageComponentType(type) {
+  return (
+    typeof type === 'function' &&
+    !isClassComponent(type)
+  );
+}
+
+function isClassComponent(type) {
+  return Boolean(type?.prototype?.isReactComponent);
+}
+
+function getSourceUsageWrapper(type, usage) {
+  let wrappers = sourceUsageWrapperCache.get(type);
+  if (!wrappers) {
+    wrappers = new Map();
+    sourceUsageWrapperCache.set(type, wrappers);
+  }
+
+  const key = getSourceUsageKey(usage);
+  const existing = wrappers.get(key);
+  if (existing) return existing;
+
+  const wrapped = function ReviewSourceUsageWrapper(props) {
+    sourceUsageStack.push(usage);
+    try {
+      return type(props);
+    } finally {
+      sourceUsageStack.pop();
+    }
+  };
+  wrapped.displayName = 'ReviewSourceUsage(' + getComponentDisplayName(type) + ')';
+  wrappers.set(key, wrapped);
+  return wrapped;
+}
+
+function getComponentDisplayName(type) {
+  return type.displayName || type.name || 'Component';
+}
+
+function getSourceUsageKey(usage) {
+  return [
+    usage.file,
+    usage.line,
+    usage.column,
+    usage.component,
+  ].join('|');
+}
+
+function getCurrentSourceUsage() {
+  return sourceUsageStack[sourceUsageStack.length - 1] || null;
+}
+
+function readSourceUsageComponent(props) {
+  const value = props?.[OPTIONS.parentComponentAttribute];
+  return typeof value === 'string' ? value : '';
+}
+
+function injectParentSourceProps(props, usage) {
+  if (!usage?.file) return;
+
+  if (props[OPTIONS.parentFileAttribute] == null) {
+    props[OPTIONS.parentFileAttribute] = usage.file;
+  }
+  if (usage.line && props[OPTIONS.parentLineAttribute] == null) {
+    props[OPTIONS.parentLineAttribute] = usage.line;
+  }
+  if (usage.column && props[OPTIONS.parentColumnAttribute] == null) {
+    props[OPTIONS.parentColumnAttribute] = usage.column;
+  }
+  if (usage.component && props[OPTIONS.parentComponentAttribute] == null) {
+    props[OPTIONS.parentComponentAttribute] = usage.component;
+  }
+}
+
 function getSourceFile(fileName) {
   const absoluteFile = normalizePath(fileName);
   const relativeFile = getRelativeFile(absoluteFile);