@codeyam/codeyam-cli 0.1.0-bleeding-edge.8afd3ee

package/analyzer-template/packages/ai/src/lib/dataStructure/equivalencyManagers/frameworks/ReactFrameworkManager.ts

@@ -0,0 +1,1173 @@
+import { functionArguments } from '../../../splitOutsideParentheses';
+import { ScopeDataStructure, ScopeNode } from '../../ScopeDataStructure';
+import {
+  AddEquivalenciesInfo,
+  EquivalencyManager,
+} from '../EquivalencyManager';
+import getFunctionCallSignature from '../../helpers/getFunctionCallSignature';
+
+interface UseStateInfo {
+  useStateCall: string;
+  scopeNodeName: string;
+  value?: string;
+  setter?: string;
+  schema: Record<string, any>;
+}
+
+export class ReactFrameworkManager implements EquivalencyManager {
+  private useStateInfos: UseStateInfo[] = [];
+  private useCallbackEquivalents: Record<string, string> = {};
+
+  postProcess(scopeNode: ScopeNode, scopeDataStructure: ScopeDataStructure) {
+    this.handleUseState(scopeNode, scopeDataStructure);
+  }
+
+  isInterestedInSubpath(
+    subPathParts: string[],
+    _scopeNode: ScopeNode,
+    scopeDataStructure: ScopeDataStructure,
+  ): boolean {
+    // We're interested in React-specific patterns
+    const path = scopeDataStructure.joinPathParts(subPathParts);
+
+    // Look for React hook patterns
+    const hasReactHooks =
+      path.includes('useState') ||
+      path.includes('useCallback') ||
+      path.includes('useMemo') ||
+      path.includes('useEffect') ||
+      path.includes('forwardRef');
+
+    // Look for function call return values (common in React patterns)
+    const hasFunctionCallReturnValue = subPathParts.includes(
+      'functionCallReturnValue',
+    );
+
+    // Be conservative for now - React patterns can be complex
+    return (
+      hasReactHooks || hasFunctionCallReturnValue || subPathParts.length <= 3
+    );
+  }
+
+  addEquivalencies(addEquivalenciesInfo: AddEquivalenciesInfo): boolean {
+    let propagated = false;
+
+    const useStateGettersAndSettersPropagated =
+      this.handleUseStateGettersAndSetters(addEquivalenciesInfo);
+
+    if (useStateGettersAndSettersPropagated) {
+      propagated = true;
+    }
+
+    const useCallbackPropagated = this.handleUseCallback(addEquivalenciesInfo);
+
+    if (useCallbackPropagated) {
+      propagated = true;
+    }
+
+    const useMemoFunctionCallReturnValuePropagated =
+      this.handleUseMemoFunctionCallReturnValue(addEquivalenciesInfo);
+
+    if (useMemoFunctionCallReturnValuePropagated) {
+      propagated = true;
+    }
+
+    const handleForwardRefPropagation =
+      this.handleForwardRef(addEquivalenciesInfo);
+
+    if (handleForwardRefPropagation) {
+      propagated = true;
+    }
+
+    const handleParentForwardRefPropagation =
+      this.handleParentForwardRef(addEquivalenciesInfo);
+
+    if (handleParentForwardRefPropagation) {
+      propagated = true;
+    }
+
+    const handleSpecificAttributesPropagated =
+      this.handleSpecificAttributes(addEquivalenciesInfo);
+
+    if (handleSpecificAttributesPropagated) {
+      propagated = true;
+    }
+
+    return propagated;
+  }
+
+  internalFunctions: Set<string> = new Set([
+    'useState',
+    'useEffect',
+    'useMemo',
+    'useCallback',
+    'useRef',
+    'createRef',
+    'forwardRef',
+    'div',
+    'a',
+    'span',
+    'p',
+    'img',
+    'button',
+    'input',
+    'form',
+    'label',
+    'select',
+    'option',
+    'textarea',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'ul',
+    'ol',
+    'li',
+    'table',
+    'thead',
+    'tbody',
+    'tr',
+    'td',
+    'th',
+    'header',
+    'footer',
+    'section',
+    'article',
+    'nav',
+    'main',
+  ]);
+
+  finalize(_scopeNode: ScopeNode, _scopeDataStructure: ScopeDataStructure) {}
+
+  private findUseStateInfo(useStateCall: string) {
+    return this.useStateInfos.find(
+      (useStateInfo) => useStateInfo.useStateCall === useStateCall,
+    );
+  }
+
+  private findOrAddUseStateInfo(useStateCall: string, scopeNodeName: string) {
+    let useStateInfo = this.findUseStateInfo(useStateCall);
+    if (!useStateInfo) {
+      useStateInfo = {
+        useStateCall,
+        scopeNodeName,
+        schema: {},
+      };
+      this.useStateInfos.push(useStateInfo);
+    }
+    return useStateInfo;
+  }
+
+  private handleUseState(
+    scopeNode: ScopeNode,
+    scopeDataStructure: ScopeDataStructure,
+  ) {
+    for (const [equivalentKey, equivalentValues] of Object.entries(
+      scopeNode.equivalencies,
+    )) {
+      for (const equivalentValue of equivalentValues) {
+        if (equivalentValue.schemaPath.startsWith('useState')) {
+          const equivalentValueParts = scopeDataStructure.splitPath(
+            equivalentValue.schemaPath,
+          );
+          const useStateCall = equivalentValueParts[0];
+
+          const useStateInfo = this.findOrAddUseStateInfo(
+            useStateCall,
+            scopeNode.name,
+          );
+
+          if (equivalentValueParts.length !== 3) continue;
+
+          const lastPart =
+            equivalentValueParts[equivalentValueParts.length - 1];
+          if (lastPart === '[0]') {
+            useStateInfo.value = equivalentKey;
+          } else if (lastPart === '[1]') {
+            useStateInfo.setter = equivalentKey;
+          }
+        }
+      }
+    }
+
+    for (const [equivalentKey, equivalentValues] of Object.entries(
+      scopeNode.equivalencies,
+    )) {
+      if (equivalentKey.startsWith('useState')) {
+        const equivalentKeyParts = scopeDataStructure.splitPath(equivalentKey);
+        if (
+          equivalentKeyParts.length === 2 &&
+          equivalentKeyParts[equivalentKeyParts.length - 1] === 'signature[0]'
+        ) {
+          const relevantUseStateInfo = this.useStateInfos.find(
+            (useStateInfo) =>
+              useStateInfo.useStateCall === equivalentKeyParts[0],
+          );
+
+          if (!relevantUseStateInfo) {
+            console.warn('Missing relevantUseStateInfo', {
+              equivalentKey,
+              equivalentValues,
+            });
+          }
+
+          scopeDataStructure.addEquivalency(
+            relevantUseStateInfo.value,
+            equivalentValues[0].schemaPath,
+            scopeNode.name,
+            scopeNode,
+            'useState value equivalency',
+          );
+        }
+      }
+    }
+  }
+
+  private handleUseCallback({
+    path,
+    scopeNode,
+    scopeDataStructure,
+    equivalencyValueChain,
+    traceId,
+  }: AddEquivalenciesInfo) {
+    let modifiedEquivalencies = false;
+    for (const useCallbackScopeInfoName in this.useCallbackEquivalents) {
+      for (let equivalentPath in scopeNode.equivalencies) {
+        const equivalentPathParts =
+          scopeDataStructure.splitPath(equivalentPath);
+
+        const existingFunctionName = equivalentPathParts[0].split('(')[0];
+        if (
+          equivalentPathParts.length > 1 &&
+          existingFunctionName === useCallbackScopeInfoName &&
+          equivalentPathParts[1].startsWith('signature[')
+        ) {
+          const actualFunctionName =
+            this.useCallbackEquivalents[useCallbackScopeInfoName];
+          const newEquivalentPath = scopeDataStructure.joinPathParts([
+            actualFunctionName +
+              equivalentPathParts[0].replace(existingFunctionName, ''),
+            ...equivalentPathParts.slice(1),
+          ]);
+          for (const equivalentValue of scopeNode.equivalencies[
+            equivalentPath
+          ]) {
+            scopeDataStructure.removeEquivalency(
+              equivalentPath,
+              equivalentValue,
+              scopeNode,
+            );
+
+            scopeDataStructure.addEquivalency(
+              newEquivalentPath,
+              equivalentValue.schemaPath,
+              equivalentValue.scopeNodeName,
+              scopeNode,
+              `${equivalentValue.equivalencyReason} - rerouted via useCallback`,
+              equivalencyValueChain,
+              traceId,
+            );
+          }
+          equivalentPath = newEquivalentPath;
+        }
+
+        for (const equivalentValue of scopeNode.equivalencies[equivalentPath]) {
+          if (equivalentValue.scopeNodeName === useCallbackScopeInfoName) {
+            modifiedEquivalencies = true;
+            equivalentValue.scopeNodeName =
+              this.useCallbackEquivalents[useCallbackScopeInfoName];
+          }
+        }
+
+        if (modifiedEquivalencies) {
+          scopeNode.equivalencies[equivalentPath] = scopeNode.equivalencies[
+            equivalentPath
+          ].filter(
+            (ev, index, self) =>
+              self.findIndex(
+                (e) =>
+                  e.schemaPath === ev.schemaPath &&
+                  e.scopeNodeName === ev.scopeNodeName,
+              ) === index,
+          );
+        }
+      }
+    }
+
+    const equivalencies = scopeNode.equivalencies[path] ?? [];
+    for (const equivalentValue of equivalencies) {
+      if (path === equivalentValue.schemaPath) continue;
+
+      if (equivalentValue.schemaPath.startsWith('useCallback')) {
+        const equivalentValueParts = scopeDataStructure.splitPath(
+          equivalentValue.schemaPath,
+        );
+
+        const useCallbackArguments = functionArguments(equivalentValueParts[0]);
+        this.useCallbackEquivalents[path] =
+          useCallbackArguments[0].split('(')[0];
+
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  private handleUseMemoFunctionCallReturnValue({
+    path,
+    subPathParts,
+    scopeNode,
+    scopeDataStructure,
+  }: AddEquivalenciesInfo) {
+    if (!scopeNode.tree || scopeNode.tree.length < 1) return false;
+    if (subPathParts[0] !== 'returnValue') return false;
+
+    const parentScopeInfo = scopeDataStructure.getScopeOrFunctionCallInfo(
+      scopeNode.tree[scopeNode.tree.length - 1],
+    ) as ScopeNode;
+
+    const useMemoPath = Object.keys(parentScopeInfo.equivalencies).find(
+      (path) =>
+        path.includes('useMemo') && path.includes(`${scopeNode.name}()`),
+    );
+    if (!useMemoPath) {
+      return false;
+    }
+
+    const useMemoPathParts = scopeDataStructure.splitPath(useMemoPath);
+    const useMemoFunctionCallReturnValuePath = scopeDataStructure.joinPathParts(
+      [useMemoPathParts[0], 'functionCallReturnValue'],
+    );
+
+    for (const [equivalentKey, equivalentValues] of Object.entries(
+      parentScopeInfo.equivalencies,
+    )) {
+      for (const equivalentValue of equivalentValues) {
+        if (
+          equivalentValue.schemaPath.startsWith(
+            useMemoFunctionCallReturnValuePath,
+          )
+        ) {
+          scopeDataStructure.removeEquivalency(
+            equivalentKey,
+            equivalentValue,
+            parentScopeInfo,
+          );
+
+          scopeDataStructure.addEquivalency(
+            equivalentKey,
+            'returnValue',
+            scopeNode.name,
+            parentScopeInfo,
+            'useMemo return value equivalent to first argument return value',
+          );
+        }
+      }
+    }
+  }
+
+  private handleUseStateGettersAndSetters({
+    scopeDataStructure,
+    path,
+    subPathParts,
+    value,
+    equivalencyValueChain,
+    traceId,
+  }: AddEquivalenciesInfo) {
+    let propagated = false;
+    const functionCallSignature = getFunctionCallSignature(subPathParts);
+
+    const relevantUseStateInfo = this.findUseStateInfo(functionCallSignature);
+
+    if (relevantUseStateInfo) {
+      const pathParts = scopeDataStructure.splitPath(path);
+      if (pathParts.length < 3) return false;
+
+      const basePath = scopeDataStructure.joinPathParts([
+        ...pathParts.slice(0, 2),
+        pathParts[2],
+      ]);
+
+      const expectedSetterBasePath = scopeDataStructure.joinPathParts([
+        functionCallSignature,
+        'functionCallReturnValue[1]',
+      ]);
+
+      // if (traceId) {
+      //   console.info(
+      //     'Debug Propagation: useState base path',
+      //     JSON.stringify(
+      //       {
+      //         traceId,
+      //         basePath,
+      //         expectedValueBasePath,
+      //         expectedSetterBasePath,
+      //       },
+      //       null,
+      //       2,
+      //     ),
+      //   );
+      // }
+
+      if (basePath === expectedSetterBasePath) {
+        const originScopeInfoName =
+          equivalencyValueChain[0].currentPath?.scopeNodeName;
+        const setterScope =
+          scopeDataStructure.getScopeOrFunctionCallInfo(originScopeInfoName);
+        const setterEquivalencyPath = Object.keys(
+          setterScope.equivalencies,
+        ).find((p) => {
+          if (!p.startsWith(relevantUseStateInfo.setter)) return false;
+          const pParts = scopeDataStructure.splitPath(p);
+
+          const valid = pathParts
+            .slice(3)
+            .reverse()
+            .every((part, index) => pParts.reverse()[index] === part);
+
+          // if (p.includes('.title') && valid)
+          //   console.info({ p, pParts, pathParts: pathParts.slice(3) });
+
+          return valid;
+        });
+
+        if (!setterEquivalencyPath) return;
+
+        const setterEquivalencyPathParts = scopeDataStructure.splitPath(
+          setterEquivalencyPath,
+        );
+        const setterEquivalentVariable =
+          setterScope.equivalencies[setterEquivalencyPath][0].schemaPath;
+
+        if (setterEquivalentVariable === expectedSetterBasePath) return;
+
+        propagated = true;
+        const valuePath = `${functionCallSignature}.functionCallReturnValue[0]`;
+        const useStateScopeInfo = scopeDataStructure.getScopeOrFunctionCallInfo(
+          relevantUseStateInfo.scopeNodeName,
+        ) as ScopeNode;
+
+        const fullValuePath = scopeDataStructure.joinPathParts([
+          valuePath,
+          ...setterEquivalencyPathParts.slice(2),
+        ]);
+
+        scopeDataStructure.addEquivalency(
+          fullValuePath,
+          setterEquivalentVariable,
+          originScopeInfoName,
+          useStateScopeInfo,
+          'useState setter call equivalency',
+          equivalencyValueChain,
+          traceId,
+        );
+      }
+    }
+
+    return propagated;
+  }
+
+  private handleForwardRef({
+    scopeDataStructure,
+    scopeNode,
+    subPathParts,
+    equivalencyValueChain,
+    traceId,
+  }: AddEquivalenciesInfo) {
+    let propagated = false;
+
+    let forwardRefPart = subPathParts[0];
+    if (forwardRefPart === 'React') {
+      forwardRefPart = subPathParts[1];
+    }
+
+    if (forwardRefPart?.startsWith('forwardRef<')) {
+      const typeMatch = forwardRefPart.match(/<(\w+)/);
+      if (!typeMatch || !typeMatch[1]) return false;
+
+      propagated = true;
+
+      const typeName = typeMatch[1];
+
+      const tagMatch = typeName.match(/HTML([A-Z][a-zA-Z]*)Element/);
+      let tagName = (tagMatch ? tagMatch[1] : typeName).toLowerCase();
+
+      // Normalize common variations (e.g., HTMLAnchorElement -> a)
+      if (HTML_ALIASES[tagName]) {
+        tagName = HTML_ALIASES[tagName];
+      }
+
+      let htmlTag = HTML_TAG_LIST.find((a) =>
+        Array.isArray(a.tag) ? a.tag.includes(tagName) : a.tag === tagName,
+      );
+
+      if (!htmlTag) htmlTag = HTML_TAG_LIST.find((a) => a.tag === 'div');
+
+      for (const attribute of Array.from(htmlTag.attributes) as string[]) {
+        let value: string | undefined;
+        if (attribute === 'children') {
+          value = 'ReactNode';
+        } else if (attribute === 'style') {
+          value = 'object';
+        } else if (['hidden', 'disabled'].includes(attribute)) {
+          value = 'boolean';
+        } else {
+          value = 'string';
+        }
+
+        if (value && scopeNode?.analysis?.isolatedStructure) {
+          scopeNode.analysis.isolatedStructure[attribute] = value;
+        }
+
+        scopeDataStructure.addEquivalency(
+          attribute,
+          `signature[0].${attribute}`,
+          scopeNode.name,
+          scopeNode,
+          'forwardRef equivalency',
+          equivalencyValueChain,
+          traceId,
+        );
+      }
+    }
+
+    return propagated;
+  }
+
+  private handleSpecificAttributes({
+    scopeDataStructure,
+    scopeNode,
+    path,
+    subPathParts,
+  }: AddEquivalenciesInfo) {
+    let propagated = false;
+    for (let i = 0; i < subPathParts.length; i++) {
+      if (subPathParts[i] === 'signature[0]') {
+        if (i !== subPathParts.length - 2) {
+          continue;
+        }
+
+        const signatureProp = subPathParts[i + 1];
+        if (signatureProp === 'ref') {
+          propagated = true;
+
+          delete scopeNode.schema[path];
+        }
+      }
+    }
+
+    for (const [equivalentPath, equivalentValues] of Object.entries(
+      scopeNode.equivalencies,
+    )) {
+      for (const equivalentValue of equivalentValues) {
+        const equivalentValueParts = scopeDataStructure.splitPath(
+          equivalentValue.schemaPath,
+        );
+
+        for (let i = 0; i < equivalentValueParts.length; i++) {
+          if (equivalentValueParts[i] === 'signature[0]') {
+            if (i !== equivalentValueParts.length - 2) {
+              continue;
+            }
+
+            const signatureProp = equivalentValueParts[i + 1];
+            if (signatureProp === 'ref') {
+              propagated = true;
+
+              scopeDataStructure.removeEquivalency(
+                equivalentPath,
+                equivalentValue,
+                scopeNode,
+              );
+            }
+          }
+        }
+      }
+    }
+
+    return propagated;
+  }
+
+  private handleParentForwardRef({
+    scopeDataStructure,
+    scopeNode,
+    equivalencyValueChain,
+    traceId,
+  }: AddEquivalenciesInfo) {
+    if (!scopeNode.tree || scopeNode.tree.length < 1) return false;
+
+    const parentScopeInfoName = scopeNode.tree[scopeNode.tree.length - 1];
+
+    const parentScopeInfo = scopeDataStructure.getScopeOrFunctionCallInfo(
+      parentScopeInfoName,
+    ) as ScopeNode;
+
+    if (
+      !Object.keys(parentScopeInfo.equivalencies).some(
+        (path) =>
+          path.includes('forwardRef') && path.includes(`${scopeNode.name}()`),
+      )
+    ) {
+      return false;
+    }
+
+    const functionSignature = scopeDataStructure.getFunctionSignature({
+      functionName: scopeNode.name,
+    });
+
+    for (const signaturePath in functionSignature) {
+      const signaturePathParts = scopeDataStructure.splitPath(signaturePath);
+
+      if (signaturePathParts.length !== 2) continue;
+      if (signaturePathParts[0] !== 'signature[0]') continue;
+      if (['key', 'ref'].includes(signaturePathParts[1])) continue;
+
+      const parentSignaturePath = scopeDataStructure.joinPathParts([
+        `${scopeNode.name}()`,
+        signaturePath,
+      ]);
+
+      if (
+        Object.values(parentScopeInfo.equivalencies).some((values) =>
+          values.some((value) => value.schemaPath === signaturePath),
+        )
+      ) {
+        continue;
+      }
+
+      scopeDataStructure.addEquivalency(
+        parentSignaturePath,
+        signaturePath,
+        parentScopeInfoName,
+        parentScopeInfo,
+        'forwardRef signature to child signature equivalency',
+        equivalencyValueChain,
+        traceId,
+      );
+    }
+  }
+
+  toString() {
+    return 'ReactFrameworkManager';
+  }
+}
+
+const HTML_ALIASES: { [key: string]: string } = {
+  anchor: 'a',
+  image: 'img',
+  header: 'h1',
+  paragraph: 'p',
+  quote: 'blockquote',
+  list: 'ul',
+  orderedList: 'ol',
+  listItem: 'li',
+};
+
+const HTML_TAG_LIST = [
+  {
+    tag: 'Global',
+    description:
+      'These attributes are common to nearly all HTML tags and impact their visual display.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'id',
+      'tabIndex',
+      'role',
+    ],
+  },
+  {
+    tag: 'a',
+    description: 'Defines a hyperlink.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'target',
+      'rel',
+      'download',
+      'children',
+    ],
+  },
+  {
+    tag: ['article', 'aside', 'main', 'nav', 'section', 'header', 'footer'],
+    description: 'Semantic HTML5 layout elements used to structure a page.',
+    attributes: ['className', 'style', 'hidden', 'title', 'children'],
+  },
+  {
+    tag: 'audio',
+    description: 'Embeds sound content in a document.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'autoPlay',
+      'controls',
+      'loop',
+      'muted',
+      'children',
+    ],
+  },
+  {
+    tag: 'body',
+    description: 'The main content of the document.',
+    attributes: ['className', 'style', 'children'],
+  },
+  {
+    tag: 'br',
+    description: 'Represents a line break. A void element.',
+    attributes: ['className', 'style', 'hidden', 'title'],
+  },
+  {
+    tag: 'button',
+    description: 'An interactive button.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'disabled',
+      'type',
+      'name',
+      'value',
+      'children',
+    ],
+  },
+  {
+    tag: 'canvas',
+    description:
+      'Used to draw graphics via scripting (usually JavaScript). Can contain fallback content.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'height',
+      'width',
+      'children',
+    ],
+  },
+  {
+    tag: 'caption',
+    description: 'Specifies the caption (or title) of a table.',
+    attributes: ['className', 'style', 'hidden', 'title', 'children'],
+  },
+  {
+    tag: 'col',
+    description:
+      'Specifies column properties for each column within a <colgroup> element. A void element.',
+    attributes: ['className', 'style', 'span', 'width'],
+  },
+  {
+    tag: 'colgroup',
+    description:
+      'Specifies a group of one or more columns in a table for formatting.',
+    attributes: ['className', 'style', 'span', 'children'],
+  },
+  {
+    tag: 'details',
+    description:
+      "Creates a disclosure widget in which information is visible only when the widget is toggled into an 'open' state.",
+    attributes: ['className', 'style', 'hidden', 'title', 'open', 'children'],
+  },
+  {
+    tag: 'dialog',
+    description:
+      'Represents a dialog box or other interactive component, such as a dismissible alert or sub-window.',
+    attributes: ['className', 'style', 'hidden', 'title', 'open', 'children'],
+  },
+  {
+    tag: 'div',
+    description:
+      'A generic container for flow content. It has no effect on the content or layout until styled.',
+    attributes: ['className', 'style', 'hidden', 'title', 'children'],
+  },
+  {
+    tag: 'embed',
+    description:
+      'Embeds external content at a specified point in the document. A void element.',
+    attributes: ['className', 'style', 'height', 'width', 'type'],
+  },
+  {
+    tag: 'fieldset',
+    description:
+      'Used to group several controls as well as labels within a web form.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'disabled',
+      'name',
+      'children',
+    ],
+  },
+  {
+    tag: 'form',
+    description:
+      'Represents a document section containing interactive controls for submitting information.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'action',
+      'method',
+      'target',
+      'encType',
+      'children',
+    ],
+  },
+  {
+    tag: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+    description:
+      'Heading elements. `h1` is the highest level, `h6` is the lowest.',
+    attributes: ['className', 'style', 'hidden', 'title', 'children'],
+  },
+  {
+    tag: 'hr',
+    description:
+      'Represents a thematic break between paragraph-level elements. A void element.',
+    attributes: ['className', 'style', 'hidden', 'title'],
+  },
+  {
+    tag: 'iframe',
+    description:
+      'Represents a nested browsing context, embedding another HTML page into the current one.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'height',
+      'width',
+      'loading',
+      'allowFullScreen',
+      'children',
+    ],
+  },
+  {
+    tag: 'img',
+    description: 'Represents an image in the document. A void element.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'alt',
+      'height',
+      'width',
+      'loading',
+      'sizes',
+    ],
+  },
+  {
+    tag: 'input',
+    description:
+      'Used to create interactive controls for web-based forms. A void element.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'type',
+      'alt',
+      'checked',
+      'disabled',
+      'height',
+      'width',
+      'max',
+      'maxLength',
+      'min',
+      'minLength',
+      'multiple',
+      'pattern',
+      'placeholder',
+      'readOnly',
+      'required',
+      'size',
+      'step',
+      'value',
+      'name',
+    ],
+  },
+  {
+    tag: 'label',
+    description: 'Represents a caption for an item in a user interface.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'htmlFor',
+      'children',
+    ],
+  },
+  {
+    tag: 'legend',
+    description:
+      'Represents a caption for the content of its parent <fieldset>.',
+    attributes: ['className', 'style', 'hidden', 'title', 'children'],
+  },
+  {
+    tag: 'li',
+    description: 'Represents an item in a list.',
+    attributes: ['className', 'style', 'hidden', 'title', 'value', 'children'],
+  },
+  {
+    tag: 'link',
+    description:
+      'Specifies relationships between the current document and an external resource. A void element.',
+    attributes: ['rel', 'type', 'media', 'sizes'],
+  },
+  {
+    tag: 'meter',
+    description:
+      'Represents either a scalar value within a known range or a fractional value.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'value',
+      'min',
+      'max',
+      'low',
+      'high',
+      'optimum',
+      'children',
+    ],
+  },
+  {
+    tag: 'ol',
+    description: 'Represents an ordered list of items.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'reversed',
+      'start',
+      'type',
+      'children',
+    ],
+  },
+  {
+    tag: 'optgroup',
+    description: 'Creates a grouping of options within a <select> element.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'disabled',
+      'label',
+      'children',
+    ],
+  },
+  {
+    tag: 'option',
+    description:
+      'Represents an option in a <select>, <optgroup>, or <datalist> element.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'disabled',
+      'label',
+      'selected',
+      'value',
+      'children',
+    ],
+  },
+  {
+    tag: 'p',
+    description: 'Represents a paragraph.',
+    attributes: ['className', 'style', 'hidden', 'title', 'children'],
+  },
+  {
+    tag: 'progress',
+    description:
+      'Displays an indicator showing the completion progress of a task.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'max',
+      'value',
+      'children',
+    ],
+  },
+  {
+    tag: 'select',
+    description: 'Represents a control that provides a menu of options.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'disabled',
+      'multiple',
+      'required',
+      'size',
+      'value',
+      'name',
+      'children',
+    ],
+  },
+  {
+    tag: 'source',
+    description:
+      'Specifies multiple media resources for <video>, <audio>, or <picture>. A void element.',
+    attributes: ['type', 'media', 'sizes'],
+  },
+  {
+    tag: 'span',
+    description:
+      'A generic inline container for phrasing content, which does not inherently represent anything.',
+    attributes: ['className', 'style', 'hidden', 'title', 'children'],
+  },
+  {
+    tag: [
+      'strong',
+      'b',
+      'em',
+      'i',
+      'u',
+      'code',
+      'pre',
+      'blockquote',
+      'sub',
+      'sup',
+    ],
+    description: 'Text-level semantic and formatting elements.',
+    attributes: ['className', 'style', 'hidden', 'title', 'children'],
+  },
+  {
+    tag: 'summary',
+    description:
+      "Specifies a summary, caption, or legend for a <details> element's disclosure box.",
+    attributes: ['className', 'style', 'hidden', 'title', 'children'],
+  },
+  {
+    tag: 'svg',
+    description: 'A container for SVG graphics.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'height',
+      'width',
+      'viewBox',
+      'fill',
+      'stroke',
+      'strokeWidth',
+      'children',
+    ],
+  },
+  {
+    tag: 'table',
+    description: 'Represents tabular data.',
+    attributes: ['className', 'style', 'hidden', 'title', 'width', 'children'],
+  },
+  {
+    tag: ['tbody', 'thead', 'tfoot'],
+    description:
+      'Table section elements used to group the body, header, and footer content in a table.',
+    attributes: ['className', 'style', 'hidden', 'title', 'children'],
+  },
+  {
+    tag: 'td',
+    description: 'Defines a cell of a table that contains data.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'colSpan',
+      'rowSpan',
+      'headers',
+      'children',
+    ],
+  },
+  {
+    tag: 'textarea',
+    description:
+      "A multi-line text input control. In React, use the 'value' or 'defaultValue' prop instead of children.",
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'cols',
+      'rows',
+      'disabled',
+      'placeholder',
+      'readOnly',
+      'required',
+      'value',
+      'name',
+    ],
+  },
+  {
+    tag: 'th',
+    description: 'Defines a cell as a header of a group of table cells.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'colSpan',
+      'rowSpan',
+      'scope',
+      'abbr',
+      'children',
+    ],
+  },
+  {
+    tag: 'tr',
+    description: 'Defines a row of cells in a table.',
+    attributes: ['className', 'style', 'hidden', 'title', 'children'],
+  },
+  {
+    tag: 'track',
+    description:
+      'Specifies text tracks for <video> or <audio>. A void element.',
+    attributes: ['kind', 'label', 'srclang', 'default'],
+  },
+  {
+    tag: 'ul',
+    description:
+      'Represents an unordered list of items, typically rendered as a bulleted list.',
+    attributes: ['className', 'style', 'hidden', 'title', 'children'],
+  },
+  {
+    tag: 'video',
+    description: 'Embeds a media player which supports video playback.',
+    attributes: [
+      'className',
+      'style',
+      'hidden',
+      'title',
+      'poster',
+      'width',
+      'height',
+      'autoPlay',
+      'controls',
+      'loop',
+      'muted',
+      'playsInline',
+      'children',
+    ],
+  },
+];