processed_docs/pr_data_0_doc_49.txt

Pull Request Number: 4202
Title: docs: optimize code fold
Base Branch: canary
Head Branch: feat/optimize-code-fold
Author: winchesHe
URL: https://github.com/nextui-org/nextui/pull/4202
State: MERGED
Created At: 2024-12-01T09:47:29Z
Merged At: 2024-12-01T12:40:47Z
Participants: winchesHe, jrgarciadev, wingkwong

Description:
⛳️ Current behavior (updates)

Fold code block include function
🚀 New behavior

Fole object/array data which greater than 10 lines

Summary by CodeRabbit
Summary by CodeRabbit


New Features

Enhanced logic for transforming HTML tokens, improving clarity and efficiency.
Introduced new helper functions for better handling of element tags and names.



Bug Fixes

Simplified utility functions for improved functionality without special flags.



Refactor

Significant refactoring of the token transformation logic for better maintainability.

Commits:
- docs: optimize code fold\n- fix: code review\n

Labels:


Comments:
- vercel: [vc]: #Lyogd3PyEIfdCsgWv5KIKJiZq3s9tBOOiM1xd9dz8w8=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJuZXh0dWktZG9jcy12MiIsInJvb3REaXJlY3RvcnkiOiJhcHBzL2RvY3MiLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vbmV4dHVpLW9yZy9uZXh0dWktZG9jcy12Mi9qOHNjMnM0RVlOZWZvVEE2M016ZEtuNktnc0ZjIiwicHJldmlld1VybCI6Im5leHR1aS1kb2NzLXYyLWdpdC1mZWF0LW9wdGltaXplLWNvZGUtZm9sZC1uZXh0dWktb3JnLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoibmV4dHVpLWRvY3MtdjItZ2l0LWZlYXQtb3B0aW1pemUtY29kZS1mb2xkLW5leHR1aS1vcmcudmVyY2VsLmFwcCJ9fSx7Im5hbWUiOiJuZXh0dWktc3Rvcnlib29rLXYyIiwicm9vdERpcmVjdG9yeSI6InBhY2thZ2VzL3N0b3J5Ym9vayIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9uZXh0dWktb3JnL25leHR1aS1zdG9yeWJvb2stdjIvMlA5dHFtaGsxMnRGdUJlVURCRTl6UTZQdnh4TCIsInByZXZpZXdVcmwiOiJuZXh0dWktc3Rvcnlib29rLXYyLWdpdC1mZWF0LW9wdGltaXplLWNvZGUtZm9sZC1uZXh0dWktb3JnLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoibmV4dHVpLXN0b3J5Ym9vay12Mi1naXQtZmVhdC1vcHRpbWl6ZS1jb2RlLWZvbGQtbmV4dHVpLW9yZy52ZXJjZWwuYXBwIn19XX0=
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **nextui-docs-v2** | ✅ Ready ([Inspect](https://vercel.com/nextui-org/nextui-docs-v2/j8sc2s4EYNefoTA63MzdKn6KgsFc)) | [Visit Preview](https://nextui-docs-v2-git-feat-optimize-code-fold-nextui-org.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/nextui-docs-v2-git-feat-optimize-code-fold-nextui-org.vercel.app?via=pr-comment-feedback-link) | Dec 1, 2024 10:00am |
| **nextui-storybook-v2** | ✅ Ready ([Inspect](https://vercel.com/nextui-org/nextui-storybook-v2/2P9tqmhk12tFuBeUDBE9zQ6PvxxL)) | [Visit Preview](https://nextui-storybook-v2-git-feat-optimize-code-fold-nextui-org.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/nextui-storybook-v2-git-feat-optimize-code-fold-nextui-org.vercel.app?via=pr-comment-feedback-link) | Dec 1, 2024 10:00am |


\n- changeset-bot: ###  ⚠️  No Changeset found

Latest commit: 25f356c73504fd097fe1548bd23b596a80a23d39

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/nextui-org/nextui/new/feat/optimize-code-fold?filename=.changeset/plenty-lobsters-poke.md&value=---%0A%22%40nextui-org%2Fdocs%22%3A%20patch%0A---%0A%0Adocs%3A%20optimize%20code%20fold%0A)

\n- coderabbitai: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough
The pull request modifies the `helper.ts` file, focusing on the transformation logic for tokens from `prism-react-renderer`. It removes specific flags related to token visibility and folding behavior, replacing them with regular expressions for identifying HTML tags. The `transformTokens` function is refactored to enhance clarity and maintainability, and several new utility functions are introduced to streamline token processing. Existing functions are simplified by eliminating unnecessary parameters.

## Changes

| File Path                                          | Change Summary                                                                                          |
|----------------------------------------------------|--------------------------------------------------------------------------------------------------------|
| apps/docs/components/docs/components/helper.ts     | - Refactored `transformTokens` function logic for HTML element handling.                               |
|                                                    | - Removed `specialStartFlag`, `specialEndFlag`, `defaultFoldFlagList`, and `defaultShowFlagList`.    |
|                                                    | - Introduced `isElementStartRegex` and `isElementEndRegex` for tag detection.                         |
|                                                    | - Updated `checkIsFolder` and `findEndIndex` function signatures by removing special flag parameters.  |
|                                                    | - Added new functions: `checkIsElement`, `getElementName`, `getLineContent`, and `checkIsObjectContent`. |

## Possibly related PRs
- **#3922**: This PR involves modifications to the `Codeblock` component and introduces fold logic, which is relevant to the changes in the `helper.ts` file that also focus on token transformation and handling, particularly with respect to folder structures in code.

## Suggested labels
`📋 Scope : Docs`

## Suggested reviewers
- wingkwong
- jrgarciadev

<!-- walkthrough_end -->




<!-- internal state start -->


<!-- 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= -->

<!-- internal state end -->
<!-- tips_start -->

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->\n

Files Changed:
- apps/docs/components/docs/components/helper.ts (modified, 236 changes)\n  Patch: @@ -12,10 +12,8 @@ export type TransformTokensTypes = TransformTokens[0][0] & {
 
 const startFlag = ["{", "["];
 const endFlag = ["}", "]"];
-const specialStartFlag = ["("];
-const specialEndFlag = [")"];
-const defaultFoldFlagList = ["cn", "HTMLAttributes"];
-const defaultShowFlagList = ["Component", "forwardRef", "App", "Example", "AddForm", "SignupForm"];
+const isElementStartRegex = /^\s*</;
+const isElementEndRegex = /^\s*<\//;
 
 /**
  * Transform tokens from `prism-react-renderer` to wrap them in folder structure
@@ -26,156 +24,141 @@ const defaultShowFlagList = ["Component", "forwardRef", "App", "Example", "AddFo
 export function transformTokens(tokens: TransformTokens, folderLine = 10) {
   const result: TransformTokens = [];
   let lastIndex = 0;
-  let isShowFolder = false;
-  let fold = false;
+  let startElementName = "";
 
   tokens.forEach((token, index) => {
     if (index < lastIndex) {
       return;
     }
+    token.forEach((t) => {
+      (t as TransformTokensTypes).index = index;
+    });
+    result.push(token);
 
-    let startToken: TransformTokens[0][0] = null as any;
-    let mergedStartFlagList = [...startFlag];
+    const lineContent = getLineContent(token);
+    const {isStartTag, isEndTag} = checkIsElement(lineContent);
 
-    token.forEach((t) => {
-      if (defaultFoldFlagList.some((text) => t.content.includes(text))) {
-        // If cn then need to judge whether it is import token
-        if (t.content.includes("cn") && token.some((t) => t.content === "import")) {
-          return;
-        }
+    // If it has startElementName means it is within the element range
+    if (startElementName) {
+      if (isEndTag) {
+        // Judge whether it is the end tag of the element then reset startElementName
+        const {endElementName} = getElementName(lineContent);
 
-        // If HTMLAttributes then need to judge whether it have start flag
-        if (
-          t.content.includes("HTMLAttributes") &&
-          !token.some((t) => startFlag.includes(t.content))
-        ) {
-          return;
+        if (endElementName === startElementName) {
+          startElementName = "";
         }
-
-        fold = true;
-        mergedStartFlagList.push(...specialStartFlag);
       }
 
-      if (mergedStartFlagList.includes(t.content)) {
-        startToken = t;
+      return;
+    } else if (isStartTag) {
+      const {startElementName: elementName, endElementName} = getElementName(lineContent);
+
+      if (!endElementName) {
+        startElementName = elementName;
+
+        return;
       }
+    }
 
-      if (defaultShowFlagList.some((text) => t.content.includes(text))) {
-        isShowFolder = true;
+    let startToken: TransformTokens[0][0] = null as any;
+
+    token.forEach((t) => {
+      if (startFlag.includes(t.content)) {
+        startToken = t;
       }
     });
 
-    const mergedOptions = fold
-      ? {
-          specialEndFlag,
-          specialStartFlag,
-        }
-      : undefined;
-    const isFolder = checkIsFolder(token, mergedOptions);
+    const isFolder = checkIsFolder(token);
 
     if (isFolder && startToken) {
-      const endIndex = findEndIndex(tokens, index + 1, mergedOptions);
-
-      // Greater than or equal to folderLine then will folder otherwise it will show directly
-      if (endIndex !== -1 && (endIndex - index >= folderLine || isShowFolder || fold)) {
-        lastIndex = endIndex;
-        const folder = tokens.slice(index + 1, endIndex);
-        const endToken = tokens[endIndex];
-        const ellipsisToken: TransformTokensTypes = {
-          types: ["ellipsis"],
-          content: "",
-          class: "custom-folder ellipsis-token",
-        };
-        const copyContent: TransformTokensTypes = {
-          types: ["copy"],
-          content: "",
-          folderContent: folder,
-          class: "custom-folder copy-token",
-        };
-
-        endToken.forEach((t, _, arr) => {
-          let className = "";
-
-          className += "custom-folder";
-          if (t.content.trim() === "" && (arr.length === 3 || arr.length === 4)) {
-            // Add length check to sure it's added to } token
-            className += " empty-token";
-          }
-          (t as TransformTokensTypes).class = className;
-        });
-
-        startToken.types = ["folderStart"];
-        (startToken as TransformTokensTypes).folderContent = folder;
-        (startToken as TransformTokensTypes).summaryContent = [
-          ...token,
-          ellipsisToken,
-          copyContent,
-          ...endToken,
-        ];
-        (startToken as TransformTokensTypes).index = index;
-        if (isShowFolder && !fold) {
-          (startToken as TransformTokensTypes).open = true;
-        }
-
-        result.push([startToken]);
-
-        isShowFolder = false;
-        fold = false;
+      const nextLineContent = tokens.slice(index + 1, index + 2).reduce((acc, line) => {
+        return acc + getLineContent(line);
+      }, "");
+      const isNextLineObjectFolder = checkIsObjectContent(nextLineContent);
+      const isArrayFolder = lineContent.trim().endsWith("[");
+
+      if (isNextLineObjectFolder || isArrayFolder) {
+        const endIndex = findEndIndex(tokens, index + 1);
+
+        // Greater than or equal to folderLine then will folder otherwise it will show directly
+        if (endIndex !== -1 && endIndex - index >= folderLine) {
+          lastIndex = endIndex;
+          const folder = tokens.slice(index + 1, endIndex);
+          const endToken = tokens[endIndex];
+
+          (endToken[0] as TransformTokensTypes).class = "first-custom-folder";
+
+          const ellipsisToken: TransformTokensTypes = {
+            types: ["ellipsis"],
+            content: "",
+            class: "custom-folder ellipsis-token",
+          };
+          const copyContent: TransformTokensTypes = {
+            types: ["copy"],
+            content: "",
+            folderContent: folder,
+            class: "custom-folder copy-token",
+          };
+
+          endToken.forEach((t, _, arr) => {
+            let className = (t as TransformTokensTypes).class || "";
+
+            className += " custom-folder";
+            if (t.content.trim() === "" && (arr.length === 3 || arr.length === 4)) {
+              // Add length check to sure it's added to } token
+              className += " empty-token";
+            }
+            (t as TransformTokensTypes).class = className;
+          });
+
+          startToken.types = ["folderStart"];
+          (startToken as TransformTokensTypes).folderContent = folder;
+          (startToken as TransformTokensTypes).summaryContent = [
+            ...token,
+            ellipsisToken,
+            copyContent,
+            ...endToken,
+          ];
+          (startToken as TransformTokensTypes).index = index;
+          // isShowFolder && ((startToken as TransformTokensTypes).open = true);
+
+          result.splice(result.length - 1, 1, [startToken]);
 
-        return;
+          return;
+        }
       }
     }
-    token.forEach((t) => {
-      (t as TransformTokensTypes).index = index;
-    });
-    result.push(token);
   });
 
   return result;
 }
 
-interface SpecialOptions {
-  specialStartFlag?: string[];
-  specialEndFlag?: string[];
-}
-
-function checkIsFolder(
-  token: TransformTokens[0],
-  {specialStartFlag, specialEndFlag}: SpecialOptions = {},
-) {
+function checkIsFolder(token: TransformTokens[0]) {
   const stack: string[] = [];
-  const mergedStartFlagList = specialStartFlag ? [...startFlag, ...specialStartFlag] : startFlag;
-  const mergedEndFlagList = specialEndFlag ? [...endFlag, ...specialEndFlag] : endFlag;
 
   for (const t of token) {
-    if (mergedStartFlagList.includes(t.content)) {
+    if (startFlag.includes(t.content)) {
       stack.push(t.content);
-    } else if (mergedEndFlagList.includes(t.content)) {
+    } else if (endFlag.includes(t.content)) {
       stack.pop();
     }
   }
 
   return stack.length !== 0;
 }
 
-function findEndIndex(
-  tokens: TransformTokens,
-  startIndex: number,
-  {specialStartFlag, specialEndFlag}: SpecialOptions = {},
-) {
+function findEndIndex(tokens: TransformTokens, startIndex: number) {
   const stack: string[] = ["flag"];
-  const mergedStartFlagList = specialStartFlag ? [...startFlag, ...specialStartFlag] : startFlag;
-  const mergedEndFlagList = specialEndFlag ? [...endFlag, ...specialEndFlag] : endFlag;
 
   for (let i = startIndex; i < tokens.length; i++) {
     const token = tokens[i];
 
     for (const line of token) {
       const transformLine = line.content.replace(/\$/g, "");
 
-      if (mergedStartFlagList.includes(transformLine)) {
+      if (startFlag.includes(transformLine)) {
         stack.push("flag");
-      } else if (mergedEndFlagList.includes(transformLine)) {
+      } else if (endFlag.includes(transformLine)) {
         stack.pop();
       }
 
@@ -187,3 +170,40 @@ function findEndIndex(
 
   return -1;
 }
+
+function checkIsElement(lineContent: string) {
+  return {
+    isStartTag: isElementStartRegex.test(lineContent),
+    isEndTag: isElementEndRegex.test(lineContent),
+  };
+}
+
+function getElementName(lineContent: string) {
+  const startElementName = lineContent.match(/^\s*<([a-zA-Z.]+)/);
+  const endElementName = lineContent.match(/^\s*<\/([a-zA-Z.]+)>/);
+
+  return {
+    startElementName: startElementName?.[1] || (lineContent.includes("<>") ? "<>" : ""),
+    endElementName: endElementName?.[1] || (lineContent.includes("</>") ? "</>" : ""),
+  };
+}
+
+function getLineContent(token: TransformTokens[0]) {
+  return token.reduce((acc, t) => acc + t.content, "");
+}
+
+function checkIsObjectContent(lineContent: string) {
+  lineContent = lineContent.trim();
+  // first: match { a }
+  // second: match { a: b }
+  // third: match { a (b) }
+  // fourth: match /** */
+  const isObjectContent = /^([\w]+,?$)|([\w\[.\]]+:)|([\w]+\s?\(.*?\)$)|(^\/\*\*)/.test(
+    lineContent,
+  );
+  const hasEqual = /\s=\s/.test(lineContent);
+  const hasFunction = lineContent.includes("function");
+  const hasVariable = /var|let|const/.test(lineContent);
+
+  return isObjectContent && !hasEqual && !hasFunction && !hasVariable;
+}\n