@teleporthq/teleport-plugin-next-data-source 0.42.0 → 0.42.3

package/src/pagination-plugin.ts

@@ -123,6 +123,8 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
     const searchConfigMap = opts.paginationConfig?.searchConfigMap || new Map<string, any>()
     const queryColumnsMap = opts.paginationConfig?.queryColumnsMap || new Map<string, string[]>()
 
+    const stateDeclarations: types.Statement[] = []
+
     detectedPaginations.forEach((detected, index) => {
       const paginationNodeId = `pg_${index}`
       // Use arrayMapperRenderProp if available, otherwise fall back to dataSourceIdentifier
@@ -141,55 +143,27 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
       )
       paginationInfos.push(info)
 
-      // If both pagination and search are enabled, combine them into a single state object
-      if (info.searchEnabled && info.searchQueryVar && info.setSearchQueryVar) {
-        // Combined state: { page: 1, debouncedQuery: '' }
-        const combinedStateVar = `paginationState_pg_${index}`
-        const setCombinedStateVar = `setPaginationState_pg_${index}`
-
-        const combinedStateAST = types.variableDeclaration('const', [
-          types.variableDeclarator(
-            types.arrayPattern([
-              types.identifier(combinedStateVar),
-              types.identifier(setCombinedStateVar),
-            ]),
-            types.callExpression(types.identifier('useState'), [
-              types.objectExpression([
-                types.objectProperty(types.identifier('page'), types.numericLiteral(1)),
-                types.objectProperty(types.identifier('debouncedQuery'), types.stringLiteral('')),
-              ]),
-            ])
-          ),
-        ])
-        blockStatement.body.unshift(combinedStateAST)
-
-        // Still need the immediate search query state for the input
-        const searchStateAST = types.variableDeclaration('const', [
+      // Add refs to track first render for each useEffect (add first)
+      if (info.searchEnabled) {
+        const skipCountFetchOnMountRefVar = `skipCountFetchOnMount_pg_${index}`
+        const skipCountFetchRefAST = types.variableDeclaration('const', [
           types.variableDeclarator(
-            types.arrayPattern([
-              types.identifier(info.searchQueryVar),
-              types.identifier(info.setSearchQueryVar),
-            ]),
-            types.callExpression(types.identifier('useState'), [types.stringLiteral('')])
+            types.identifier(skipCountFetchOnMountRefVar),
+            types.callExpression(types.identifier('useRef'), [types.booleanLiteral(true)])
           ),
         ])
-        blockStatement.body.unshift(searchStateAST)
+        stateDeclarations.push(skipCountFetchRefAST)
+        ;(info as any).skipCountFetchOnMountRefVar = skipCountFetchOnMountRefVar
 
-        // Store the combined state var names
-        ;(info as any).combinedStateVar = combinedStateVar
-        ;(info as any).setCombinedStateVar = setCombinedStateVar
-      } else {
-        // If search is not enabled, just add regular page state
-        const pageStateAST = types.variableDeclaration('const', [
+        const skipDebounceOnMountRefVar = `skipDebounceOnMount_pg_${index}`
+        const skipDebounceRefAST = types.variableDeclaration('const', [
           types.variableDeclarator(
-            types.arrayPattern([
-              types.identifier(info.pageStateVar),
-              types.identifier(info.setPageStateVar),
-            ]),
-            types.callExpression(types.identifier('useState'), [types.numericLiteral(1)])
+            types.identifier(skipDebounceOnMountRefVar),
+            types.callExpression(types.identifier('useRef'), [types.booleanLiteral(true)])
           ),
         ])
-        blockStatement.body.unshift(pageStateAST)
+        stateDeclarations.push(skipDebounceRefAST)
+        ;(info as any).skipDebounceOnMountRefVar = skipDebounceOnMountRefVar
       }
 
       // Add maxPages state
@@ -221,36 +195,69 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
           types.callExpression(types.identifier('useState'), [maxPagesInitValue])
         ),
       ])
-      blockStatement.body.unshift(maxPagesStateAST)
+      stateDeclarations.push(maxPagesStateAST)
 
       // Store these for later use
       ;(info as any).maxPagesStateVar = maxPagesStateVar
       ;(info as any).setMaxPagesStateVar = setMaxPagesStateVar
 
-      // Add refs to track first render for each useEffect
-      if (info.searchEnabled) {
-        const skipDebounceOnMountRefVar = `skipDebounceOnMount_pg_${index}`
-        const skipDebounceRefAST = types.variableDeclaration('const', [
+      // If both pagination and search are enabled, combine them into a single state object
+      if (info.searchEnabled && info.searchQueryVar && info.setSearchQueryVar) {
+        // Combined state: { page: 1, debouncedQuery: '' }
+        const combinedStateVar = `paginationState_pg_${index}`
+        const setCombinedStateVar = `setPaginationState_pg_${index}`
+
+        const combinedStateAST = types.variableDeclaration('const', [
           types.variableDeclarator(
-            types.identifier(skipDebounceOnMountRefVar),
-            types.callExpression(types.identifier('useRef'), [types.booleanLiteral(true)])
+            types.arrayPattern([
+              types.identifier(combinedStateVar),
+              types.identifier(setCombinedStateVar),
+            ]),
+            types.callExpression(types.identifier('useState'), [
+              types.objectExpression([
+                types.objectProperty(types.identifier('page'), types.numericLiteral(1)),
+                types.objectProperty(types.identifier('debouncedQuery'), types.stringLiteral('')),
+              ]),
+            ])
           ),
         ])
-        blockStatement.body.unshift(skipDebounceRefAST)
-        ;(info as any).skipDebounceOnMountRefVar = skipDebounceOnMountRefVar
+        stateDeclarations.push(combinedStateAST)
 
-        const skipCountFetchOnMountRefVar = `skipCountFetchOnMount_pg_${index}`
-        const skipCountFetchRefAST = types.variableDeclaration('const', [
+        // Still need the immediate search query state for the input
+        const searchStateAST = types.variableDeclaration('const', [
           types.variableDeclarator(
-            types.identifier(skipCountFetchOnMountRefVar),
-            types.callExpression(types.identifier('useRef'), [types.booleanLiteral(true)])
+            types.arrayPattern([
+              types.identifier(info.searchQueryVar),
+              types.identifier(info.setSearchQueryVar),
+            ]),
+            types.callExpression(types.identifier('useState'), [types.stringLiteral('')])
           ),
         ])
-        blockStatement.body.unshift(skipCountFetchRefAST)
-        ;(info as any).skipCountFetchOnMountRefVar = skipCountFetchOnMountRefVar
+        stateDeclarations.push(searchStateAST)
+
+        // Store the combined state var names
+        ;(info as any).combinedStateVar = combinedStateVar
+        ;(info as any).setCombinedStateVar = setCombinedStateVar
+      } else {
+        // If search is not enabled, just add regular page state
+        const pageStateAST = types.variableDeclaration('const', [
+          types.variableDeclarator(
+            types.arrayPattern([
+              types.identifier(info.pageStateVar),
+              types.identifier(info.setPageStateVar),
+            ]),
+            types.callExpression(types.identifier('useState'), [types.numericLiteral(1)])
+          ),
+        ])
+        stateDeclarations.push(pageStateAST)
       }
     })
 
+    // Add all state declarations at once to the beginning in correct order
+    stateDeclarations.reverse().forEach((stateDecl) => {
+      blockStatement.body.unshift(stateDecl)
+    })
+
     // Add useEffect dependency if any pagination has search enabled
     const hasSearchEnabled = paginationInfos.some((info) => info.searchEnabled)
     if (hasSearchEnabled && !dependencies.useEffect) {
@@ -351,201 +358,203 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
         blockStatement.body.splice(insertIndex, 0, debounceEffect)
 
         // Add useEffect to refetch count when search changes (for both pages and components)
-        if (info.queryColumns && info.queryColumns.length > 0) {
-          const detected = detectedPaginations.find(
-            (d) => d.dataSourceIdentifier === info.dataSourceIdentifier
-          )
-          if (!detected) {
-            return
-          }
+        const detected = detectedPaginations.find(
+          (d) => d.dataSourceIdentifier === info.dataSourceIdentifier
+        )
+        if (!detected) {
+          return
+        }
 
-          const resourceDefAttr = detected.dataProviderJSX.openingElement.attributes.find(
-            (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'resourceDefinition'
-          )
+        const resourceDefAttr = detected.dataProviderJSX.openingElement.attributes.find(
+          (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'resourceDefinition'
+        )
 
-          if (
-            resourceDefAttr &&
-            resourceDefAttr.value &&
-            resourceDefAttr.value.type === 'JSXExpressionContainer'
-          ) {
-            const resourceDef = resourceDefAttr.value.expression
-            if (resourceDef.type === 'ObjectExpression') {
-              const dataSourceIdProp = (resourceDef.properties as any[]).find(
-                (p: any) => p.type === 'ObjectProperty' && p.key.value === 'dataSourceId'
-              )
-              const tableNameProp = (resourceDef.properties as any[]).find(
-                (p: any) => p.type === 'ObjectProperty' && p.key.value === 'tableName'
-              )
-              const dataSourceTypeProp = (resourceDef.properties as any[]).find(
-                (p: any) => p.type === 'ObjectProperty' && p.key.value === 'dataSourceType'
-              )
+        if (
+          resourceDefAttr &&
+          resourceDefAttr.value &&
+          resourceDefAttr.value.type === 'JSXExpressionContainer'
+        ) {
+          const resourceDef = resourceDefAttr.value.expression
+          if (resourceDef.type === 'ObjectExpression') {
+            const dataSourceIdProp = (resourceDef.properties as any[]).find(
+              (p: any) => p.type === 'ObjectProperty' && p.key.value === 'dataSourceId'
+            )
+            const tableNameProp = (resourceDef.properties as any[]).find(
+              (p: any) => p.type === 'ObjectProperty' && p.key.value === 'tableName'
+            )
+            const dataSourceTypeProp = (resourceDef.properties as any[]).find(
+              (p: any) => p.type === 'ObjectProperty' && p.key.value === 'dataSourceType'
+            )
 
-              if (dataSourceIdProp && tableNameProp && dataSourceTypeProp) {
-                const dataSourceId = dataSourceIdProp.value.value
-                const tableName = tableNameProp.value.value
-                const dataSourceType = dataSourceTypeProp.value.value
-                const fileName = `${dataSourceType}-${tableName}-${dataSourceId.substring(0, 8)}`
-                const setMaxPagesStateVar = (info as any).setMaxPagesStateVar
+            if (dataSourceIdProp && tableNameProp && dataSourceTypeProp) {
+              const dataSourceId = dataSourceIdProp.value.value
+              const tableName = tableNameProp.value.value
+              const dataSourceType = dataSourceTypeProp.value.value
+              const fileName = `${dataSourceType}-${tableName}-${dataSourceId.substring(0, 8)}`
+              const setMaxPagesStateVar = (info as any).setMaxPagesStateVar
+
+              // Create useEffect to refetch count when debounced search changes
+              const skipCountFetchOnMountRefVar = (info as any).skipCountFetchOnMountRefVar
+              const combinedStateVar = (info as any).combinedStateVar
+
+              // Build URLSearchParams properties - query is always included, queryColumns is optional
+              const urlSearchParamsProperties: any[] = [
+                types.objectProperty(
+                  types.identifier('query'),
+                  types.memberExpression(
+                    types.identifier(combinedStateVar),
+                    types.identifier('debouncedQuery')
+                  )
+                ),
+              ]
 
-                // Create useEffect to refetch count when debounced search changes
-                const skipCountFetchOnMountRefVar = (info as any).skipCountFetchOnMountRefVar
-                const combinedStateVar = (info as any).combinedStateVar
+              // Add queryColumns only if they exist
+              if (info.queryColumns && info.queryColumns.length > 0) {
+                urlSearchParamsProperties.push(
+                  types.objectProperty(
+                    types.identifier('queryColumns'),
+                    types.callExpression(
+                      types.memberExpression(
+                        types.identifier('JSON'),
+                        types.identifier('stringify')
+                      ),
+                      [
+                        types.arrayExpression(
+                          info.queryColumns.map((col) => types.stringLiteral(col))
+                        ),
+                      ]
+                    )
+                  )
+                )
+              }
 
-                const refetchCountEffect = types.expressionStatement(
-                  types.callExpression(types.identifier('useEffect'), [
-                    types.arrowFunctionExpression(
-                      [],
-                      types.blockStatement([
-                        types.ifStatement(
-                          types.memberExpression(
-                            types.identifier(skipCountFetchOnMountRefVar),
-                            types.identifier('current')
-                          ),
-                          types.blockStatement([
-                            types.expressionStatement(
-                              types.assignmentExpression(
-                                '=',
-                                types.memberExpression(
-                                  types.identifier(skipCountFetchOnMountRefVar),
-                                  types.identifier('current')
-                                ),
-                                types.booleanLiteral(false)
-                              )
-                            ),
-                            types.returnStatement(),
-                          ])
+              const refetchCountEffect = types.expressionStatement(
+                types.callExpression(types.identifier('useEffect'), [
+                  types.arrowFunctionExpression(
+                    [],
+                    types.blockStatement([
+                      types.ifStatement(
+                        types.memberExpression(
+                          types.identifier(skipCountFetchOnMountRefVar),
+                          types.identifier('current')
                         ),
-                        types.expressionStatement(
-                          types.callExpression(
-                            types.memberExpression(
-                              types.callExpression(
-                                types.memberExpression(
-                                  types.callExpression(types.identifier('fetch'), [
-                                    types.templateLiteral(
-                                      [
-                                        types.templateElement({
-                                          raw: `/api/${fileName}-count?`,
-                                          cooked: `/api/${fileName}-count?`,
-                                        }),
-                                        types.templateElement({ raw: '', cooked: '' }),
-                                      ],
-                                      [
-                                        types.newExpression(types.identifier('URLSearchParams'), [
-                                          types.objectExpression([
-                                            types.objectProperty(
-                                              types.identifier('query'),
-                                              types.memberExpression(
-                                                types.identifier(combinedStateVar),
-                                                types.identifier('debouncedQuery')
-                                              )
-                                            ),
-                                            types.objectProperty(
-                                              types.identifier('queryColumns'),
-                                              types.callExpression(
-                                                types.memberExpression(
-                                                  types.identifier('JSON'),
-                                                  types.identifier('stringify')
-                                                ),
-                                                [
-                                                  types.arrayExpression(
-                                                    info.queryColumns.map((col) =>
-                                                      types.stringLiteral(col)
-                                                    )
-                                                  ),
-                                                ]
-                                              )
-                                            ),
-                                          ]),
-                                        ]),
-                                      ]
+                        types.blockStatement([
+                          types.expressionStatement(
+                            types.assignmentExpression(
+                              '=',
+                              types.memberExpression(
+                                types.identifier(skipCountFetchOnMountRefVar),
+                                types.identifier('current')
+                              ),
+                              types.booleanLiteral(false)
+                            )
+                          ),
+                          types.returnStatement(),
+                        ])
+                      ),
+                      types.expressionStatement(
+                        types.callExpression(
+                          types.memberExpression(
+                            types.callExpression(
+                              types.memberExpression(
+                                types.callExpression(types.identifier('fetch'), [
+                                  types.templateLiteral(
+                                    [
+                                      types.templateElement({
+                                        raw: `/api/${fileName}-count?`,
+                                        cooked: `/api/${fileName}-count?`,
+                                      }),
+                                      types.templateElement({ raw: '', cooked: '' }),
+                                    ],
+                                    [
+                                      types.newExpression(types.identifier('URLSearchParams'), [
+                                        types.objectExpression(urlSearchParamsProperties),
+                                      ]),
+                                    ]
+                                  ),
+                                ]),
+                                types.identifier('then')
+                              ),
+                              [
+                                types.arrowFunctionExpression(
+                                  [types.identifier('res')],
+                                  types.callExpression(
+                                    types.memberExpression(
+                                      types.identifier('res'),
+                                      types.identifier('json')
                                     ),
-                                  ]),
-                                  types.identifier('then')
+                                    []
+                                  )
                                 ),
-                                [
-                                  types.arrowFunctionExpression(
-                                    [types.identifier('res')],
-                                    types.callExpression(
-                                      types.memberExpression(
-                                        types.identifier('res'),
-                                        types.identifier('json')
-                                      ),
-                                      []
+                              ]
+                            ),
+                            types.identifier('then')
+                          ),
+                          [
+                            types.arrowFunctionExpression(
+                              [types.identifier('data')],
+                              types.blockStatement([
+                                types.ifStatement(
+                                  types.logicalExpression(
+                                    '&&',
+                                    types.identifier('data'),
+                                    types.binaryExpression(
+                                      'in',
+                                      types.stringLiteral('count'),
+                                      types.identifier('data')
                                     )
                                   ),
-                                ]
-                              ),
-                              types.identifier('then')
-                            ),
-                            [
-                              types.arrowFunctionExpression(
-                                [types.identifier('data')],
-                                types.blockStatement([
-                                  types.ifStatement(
-                                    types.logicalExpression(
-                                      '&&',
-                                      types.identifier('data'),
-                                      types.binaryExpression(
-                                        'in',
-                                        types.stringLiteral('count'),
-                                        types.identifier('data')
-                                      )
-                                    ),
-                                    types.blockStatement([
-                                      types.expressionStatement(
-                                        types.callExpression(
-                                          types.identifier(setMaxPagesStateVar),
-                                          [
-                                            types.conditionalExpression(
+                                  types.blockStatement([
+                                    types.expressionStatement(
+                                      types.callExpression(types.identifier(setMaxPagesStateVar), [
+                                        types.conditionalExpression(
+                                          types.binaryExpression(
+                                            '===',
+                                            types.memberExpression(
+                                              types.identifier('data'),
+                                              types.identifier('count')
+                                            ),
+                                            types.numericLiteral(0)
+                                          ),
+                                          types.numericLiteral(0),
+                                          types.callExpression(
+                                            types.memberExpression(
+                                              types.identifier('Math'),
+                                              types.identifier('ceil')
+                                            ),
+                                            [
                                               types.binaryExpression(
-                                                '===',
+                                                '/',
                                                 types.memberExpression(
                                                   types.identifier('data'),
                                                   types.identifier('count')
                                                 ),
-                                                types.numericLiteral(0)
+                                                types.numericLiteral(info.perPage)
                                               ),
-                                              types.numericLiteral(0),
-                                              types.callExpression(
-                                                types.memberExpression(
-                                                  types.identifier('Math'),
-                                                  types.identifier('ceil')
-                                                ),
-                                                [
-                                                  types.binaryExpression(
-                                                    '/',
-                                                    types.memberExpression(
-                                                      types.identifier('data'),
-                                                      types.identifier('count')
-                                                    ),
-                                                    types.numericLiteral(info.perPage)
-                                                  ),
-                                                ]
-                                              )
-                                            ),
-                                          ]
-                                        )
-                                      ),
-                                    ])
-                                  ),
-                                ])
-                              ),
-                            ]
-                          )
-                        ),
-                      ])
-                    ),
-                    types.arrayExpression([
-                      types.memberExpression(
-                        types.identifier(combinedStateVar),
-                        types.identifier('debouncedQuery')
+                                            ]
+                                          )
+                                        ),
+                                      ])
+                                    ),
+                                  ])
+                                ),
+                              ])
+                            ),
+                          ]
+                        )
                       ),
-                    ]),
-                  ])
-                )
+                    ])
+                  ),
+                  types.arrayExpression([
+                    types.memberExpression(
+                      types.identifier(combinedStateVar),
+                      types.identifier('debouncedQuery')
+                    ),
+                  ]),
+                ])
+              )
 
-                blockStatement.body.splice(insertIndex, 0, refetchCountEffect)
-              }
+              blockStatement.body.splice(insertIndex, 0, refetchCountEffect)
             }
           }
         }
@@ -623,6 +632,9 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
       })
 
       // Create ONE useEffect per unique data source
+      // Collect all useEffect statements first
+      const componentUseEffects: types.Statement[] = []
+
       dataSourceToInfos.forEach((infos) => {
         const { fileName } = infos[0]
 
@@ -702,7 +714,20 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
           ])
         )
 
-        blockStatement.body.unshift(useEffectAST)
+        componentUseEffects.push(useEffectAST)
+      })
+
+      // Insert all component useEffect hooks after state declarations but before return
+      // Find the first return statement
+      const componentReturnIndex = blockStatement.body.findIndex(
+        (stmt: any) => stmt.type === 'ReturnStatement'
+      )
+      const componentEffectsInsertIndex =
+        componentReturnIndex !== -1 ? componentReturnIndex : blockStatement.body.length
+
+      // Insert in reverse order to maintain correct order
+      componentUseEffects.reverse().forEach((effect) => {
+        blockStatement.body.splice(componentEffectsInsertIndex, 0, effect)
       })
     }
 
@@ -736,7 +761,6 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
         searchOnlyDataSources,
         searchConfigMap,
         queryColumnsMap,
-        insertIndex,
         dependencies
       )
 
@@ -756,6 +780,61 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
   return paginationPlugin
 }
 
+function findParentNode(root: any, target: any, currentParent: any = null): any | null {
+  if (!root || !target) {
+    return null
+  }
+
+  if (root === target) {
+    return currentParent
+  }
+
+  if (root.type === 'JSXElement' || root.type === 'JSXFragment') {
+    if (root.children && Array.isArray(root.children)) {
+      for (const child of root.children) {
+        const found = findParentNode(child, target, root)
+        if (found !== null) {
+          return found
+        }
+      }
+    }
+  } else if (root.type === 'JSXExpressionContainer') {
+    if (root.expression) {
+      const found = findParentNode(root.expression, target, root)
+      if (found !== null) {
+        return found
+      }
+    }
+  } else if (root.type === 'BlockStatement') {
+    if (root.body && Array.isArray(root.body)) {
+      for (const stmt of root.body) {
+        const found = findParentNode(stmt, target, root)
+        if (found !== null) {
+          return found
+        }
+      }
+    }
+  } else if (root.type === 'ReturnStatement') {
+    if (root.argument) {
+      const found = findParentNode(root.argument, target, root)
+      if (found !== null) {
+        return found
+      }
+    }
+  } else if (root.type === 'ConditionalExpression') {
+    const foundConsequent = findParentNode(root.consequent, target, root)
+    if (foundConsequent !== null) {
+      return foundConsequent
+    }
+    const foundAlternate = findParentNode(root.alternate, target, root)
+    if (foundAlternate !== null) {
+      return foundAlternate
+    }
+  }
+
+  return null
+}
+
 function detectPaginationsAndSearchFromJSX(
   blockStatement: types.BlockStatement,
   uidlNode: any
@@ -775,7 +854,7 @@ function detectPaginationsAndSearchFromJSX(
     hasSearch: boolean
   }
 
-  const dataProviderMap = new Map<string, DataProviderInfo>()
+  const dataProviderList: DataProviderInfo[] = []
 
   // First pass: collect array mapper info from UIDL, keyed by array mapper render prop (unique)
   interface ArrayMapperInfo {
@@ -970,24 +1049,27 @@ function detectPaginationsAndSearchFromJSX(
     } | null = null
     let searchInputInfo: { class: string | null; jsx: any } | null = null
 
-    // Look through parent's children for siblings
-    if (parent && parent.children && Array.isArray(parent.children)) {
-      parent.children.forEach((sibling: any) => {
-        if (sibling === dataProvider) {
+    const findSearchAndPaginationInScope = (scopeNode: any, skipNode: any = null): void => {
+      if (!scopeNode || !scopeNode.children || !Array.isArray(scopeNode.children)) {
+        return
+      }
+
+      scopeNode.children.forEach((child: any) => {
+        if (child === skipNode) {
           return
         }
 
-        if (sibling.type === 'JSXElement') {
-          const siblingClassName = getClassName(sibling.openingElement?.attributes || [])
-          const siblingElementName = sibling.openingElement?.name?.name
+        if (child.type === 'JSXElement') {
+          const childClassName = getClassName(child.openingElement?.attributes || [])
+          const childElementName = child.openingElement?.name?.name
 
           // Found pagination node
-          if (siblingClassName && siblingClassName.includes('cms-pagination-node')) {
-            const prevClass = findChildWithClass(sibling, 'previous')
-            const nextClass = findChildWithClass(sibling, 'next')
+          if (childClassName && childClassName.includes('cms-pagination-node')) {
+            const prevClass = findChildWithClass(child, 'previous')
+            const nextClass = findChildWithClass(child, 'next')
             if (prevClass || nextClass) {
               paginationNodeInfo = {
-                class: siblingClassName,
+                class: childClassName,
                 prevClass,
                 nextClass,
               }
@@ -995,9 +1077,9 @@ function detectPaginationsAndSearchFromJSX(
           }
 
           // Found search container - search for input inside it
-          if (siblingClassName && siblingClassName.includes('data-source-search-node')) {
-            if (sibling.children && Array.isArray(sibling.children)) {
-              sibling.children.forEach((searchChild: any) => {
+          if (childClassName && childClassName.includes('data-source-search-node')) {
+            if (child.children && Array.isArray(child.children)) {
+              child.children.forEach((searchChild: any) => {
                 if (searchChild.type === 'JSXElement') {
                   const searchChildElementName = searchChild.openingElement?.name?.name
                   const searchChildClassName = getClassName(
@@ -1018,24 +1100,38 @@ function detectPaginationsAndSearchFromJSX(
             }
           }
 
-          // Also check if search input is a direct sibling
+          // Also check if search input is a direct child
           if (
-            siblingClassName &&
-            siblingClassName.includes('search-input') &&
-            siblingElementName === 'input'
+            childClassName &&
+            childClassName.includes('search-input') &&
+            childElementName === 'input'
           ) {
             searchInputInfo = {
-              class: siblingClassName,
-              jsx: sibling,
+              class: childClassName,
+              jsx: child,
             }
           }
+
+          if (!searchInputInfo || !paginationNodeInfo) {
+            findSearchAndPaginationInScope(child, skipNode)
+          }
         }
       })
     }
 
+    let currentScope = parent
+    let depth = 0
+    const maxDepth = 5
+
+    while (currentScope && (!searchInputInfo || !paginationNodeInfo) && depth < maxDepth) {
+      findSearchAndPaginationInScope(currentScope, depth === 0 ? dataProvider : null)
+      currentScope = findParentNode(blockStatement, currentScope)
+      depth++
+    }
+
     // Record the DataProvider with its pagination/search info
-    const uniqueKey = `${dataProviderIdentifier}__${arrayMapperRenderProp}`
-    dataProviderMap.set(uniqueKey, {
+    // Use array instead of Map to handle multiple DataProviders with same name
+    dataProviderList.push({
       identifier: dataProviderIdentifier,
       dataProvider,
       arrayMapperRenderProp,
@@ -1052,8 +1148,17 @@ function detectPaginationsAndSearchFromJSX(
   const paginationOnlyMappers: DetectedPagination[] = []
   const plainMappers: DetectedPagination[] = []
 
-  dataProviderMap.forEach((info) => {
-    if (info.hasPagination && info.hasSearch) {
+  dataProviderList.forEach((info) => {
+    // Check UIDL flags for this array mapper
+    const uidlInfo = info.arrayMapperRenderProp
+      ? arrayMapperInfoMap.get(info.arrayMapperRenderProp)
+      : null
+
+    // Only process pagination/search if UIDL explicitly enables it
+    const shouldHavePagination = uidlInfo?.paginated && info.hasPagination
+    const shouldHaveSearch = uidlInfo?.searchEnabled && info.hasSearch
+
+    if (shouldHavePagination && shouldHaveSearch) {
       // Pagination + Search
       paginatedMappers.push({
         paginationNodeClass: info.paginationNode!.class,
@@ -1065,7 +1170,7 @@ function detectPaginationsAndSearchFromJSX(
         searchInputClass: info.searchInput?.class,
         searchInputJSX: info.searchInput?.jsx,
       })
-    } else if (info.hasPagination && !info.hasSearch) {
+    } else if (shouldHavePagination && !shouldHaveSearch) {
       // Pagination only
       paginationOnlyMappers.push({
         paginationNodeClass: info.paginationNode!.class,
@@ -1077,7 +1182,7 @@ function detectPaginationsAndSearchFromJSX(
         searchInputClass: undefined,
         searchInputJSX: undefined,
       })
-    } else if (!info.hasPagination && info.hasSearch) {
+    } else if (!shouldHavePagination && shouldHaveSearch) {
       // Search only
       searchOnlyMappers.push({
         paginationNodeClass: '',
@@ -1090,7 +1195,7 @@ function detectPaginationsAndSearchFromJSX(
         searchInputJSX: info.searchInput?.jsx,
       })
     } else {
-      // Plain (no pagination, no search)
+      // Plain (no pagination, no search) - UIDL doesn't enable it or no controls found
       plainMappers.push({
         paginationNodeClass: '',
         prevButtonClass: null,
@@ -1112,9 +1217,11 @@ function handleSearchOnlyArrayMappers(
   searchOnlyDataSources: DetectedPagination[],
   searchConfigMap: Map<string, any>,
   queryColumnsMap: Map<string, string[]>,
-  insertIndex: number,
   dependencies: any
 ): void {
+  const searchOnlyStates: types.Statement[] = []
+  const searchOnlyEffects: types.Statement[] = []
+
   searchOnlyDataSources.forEach((detected, index) => {
     const searchId = `search_${index}`
     const searchQueryVar = `${searchId}_query`
@@ -1133,14 +1240,14 @@ function handleSearchOnlyArrayMappers(
     const searchDebounce = searchConfig?.searchDebounce || 300
     const queryColumns = queryColumnsMap.get(detected.dataSourceIdentifier)
 
-    // Add search query state
-    const searchStateAST = types.variableDeclaration('const', [
+    // Add skip ref
+    const skipRefAST = types.variableDeclaration('const', [
       types.variableDeclarator(
-        types.arrayPattern([types.identifier(searchQueryVar), types.identifier(setSearchQueryVar)]),
-        types.callExpression(types.identifier('useState'), [types.stringLiteral('')])
+        types.identifier(skipDebounceOnMountRefVar),
+        types.callExpression(types.identifier('useRef'), [types.booleanLiteral(true)])
       ),
     ])
-    blockStatement.body.unshift(searchStateAST)
+    searchOnlyStates.push(skipRefAST)
 
     // Add debounced search state
     const debouncedSearchStateAST = types.variableDeclaration('const', [
@@ -1152,16 +1259,16 @@ function handleSearchOnlyArrayMappers(
         types.callExpression(types.identifier('useState'), [types.stringLiteral('')])
       ),
     ])
-    blockStatement.body.unshift(debouncedSearchStateAST)
+    searchOnlyStates.push(debouncedSearchStateAST)
 
-    // Add skip ref
-    const skipRefAST = types.variableDeclaration('const', [
+    // Add search query state
+    const searchStateAST = types.variableDeclaration('const', [
       types.variableDeclarator(
-        types.identifier(skipDebounceOnMountRefVar),
-        types.callExpression(types.identifier('useRef'), [types.booleanLiteral(true)])
+        types.arrayPattern([types.identifier(searchQueryVar), types.identifier(setSearchQueryVar)]),
+        types.callExpression(types.identifier('useState'), [types.stringLiteral('')])
       ),
     ])
-    blockStatement.body.unshift(skipRefAST)
+    searchOnlyStates.push(searchStateAST)
 
     // Add useEffect for debouncing
     if (!dependencies.useEffect) {
@@ -1228,7 +1335,7 @@ function handleSearchOnlyArrayMappers(
         types.arrayExpression([types.identifier(searchQueryVar)]),
       ])
     )
-    blockStatement.body.splice(insertIndex, 0, debounceEffect)
+    searchOnlyEffects.push(debounceEffect)
 
     // Modify DataProvider to include search params (even without queryColumns)
     if (detected.dataProviderJSX) {
@@ -1247,6 +1354,22 @@ function handleSearchOnlyArrayMappers(
       } as any)
     }
   })
+
+  // Add all state declarations at the beginning in correct order
+  searchOnlyStates.reverse().forEach((stateDecl) => {
+    blockStatement.body.unshift(stateDecl)
+  })
+
+  // Recalculate insertIndex after adding states (since unshift shifted everything)
+  const newInsertIndex = blockStatement.body.findIndex(
+    (stmt: any) => stmt.type === 'ReturnStatement'
+  )
+  const finalInsertIndex = newInsertIndex !== -1 ? newInsertIndex : blockStatement.body.length
+
+  // Add all useEffect hooks before the return statement
+  searchOnlyEffects.reverse().forEach((effect) => {
+    blockStatement.body.splice(finalInsertIndex, 0, effect)
+  })
 }
 
 function addSearchParamsToDataProvider(
@@ -1669,6 +1792,8 @@ function modifyPaginationButtons(
   detectedPaginations: DetectedPagination[],
   paginationInfos: ArrayMapperPaginationInfo[]
 ): void {
+  const modifiedButtons = new Set<any>()
+
   const modifyNode = (node: any): void => {
     if (!node) {
       return
@@ -1679,19 +1804,25 @@ function modifyPaginationButtons(
       if (openingElement && openingElement.name && openingElement.name.type === 'JSXIdentifier') {
         const className = getClassName(openingElement.attributes)
 
-        if (className) {
-          detectedPaginations.forEach((detected, index) => {
+        if (className && !modifiedButtons.has(node)) {
+          for (let index = 0; index < detectedPaginations.length; index++) {
+            const detected = detectedPaginations[index]
             const info = paginationInfos[index]
+
             if (!info) {
-              return
+              continue
             }
 
             if (className === detected.prevButtonClass) {
               convertToButton(node, info, 'prev')
+              modifiedButtons.add(node)
+              break
             } else if (className === detected.nextButtonClass) {
               convertToButton(node, info, 'next')
+              modifiedButtons.add(node)
+              break
             }
-          })
+          }
         }
       }
     }
@@ -1715,6 +1846,8 @@ function modifySearchInputs(
   detectedPaginations: DetectedPagination[],
   paginationInfos: ArrayMapperPaginationInfo[]
 ): void {
+  const modifiedInputs = new Set<any>()
+
   const modifyNode = (node: any): void => {
     if (!node) {
       return
@@ -1725,20 +1858,21 @@ function modifySearchInputs(
       if (openingElement && openingElement.name && openingElement.name.type === 'JSXIdentifier') {
         const className = getClassName(openingElement.attributes)
 
-        if (className) {
-          detectedPaginations.forEach((detected, index) => {
+        if (className && !modifiedInputs.has(node)) {
+          for (let index = 0; index < detectedPaginations.length; index++) {
+            const detected = detectedPaginations[index]
             const info = paginationInfos[index]
+
             if (!info || !info.searchEnabled) {
-              return
+              continue
             }
 
             if (className === detected.searchInputClass) {
               addSearchInputHandlers(node, info)
-            } else if (className && className.includes('search-input')) {
-              // Fallback: match any input with 'search-input' in class
-              addSearchInputHandlers(node, info)
+              modifiedInputs.add(node)
+              break
             }
-          })
+          }
         }
       }
     }
@@ -2256,6 +2390,12 @@ function createAPIRoutesForPaginatedDataSources(
 ): void {
   const paginatedDataSourceIds = new Set(paginationInfos.map((info) => info.dataSourceIdentifier))
 
+  const searchEnabledDataSources = new Set(
+    paginationInfos.filter((info) => info.searchEnabled).map((info) => info.dataSourceIdentifier)
+  )
+
+  const createdCountRoutes = new Set<string>()
+
   const traverseForDataSources = (node: any): void => {
     if (!node) {
       return
@@ -2267,8 +2407,10 @@ function createAPIRoutesForPaginatedDataSources(
       if (renderProp && paginatedDataSourceIds.has(renderProp)) {
         extractDataSourceIntoNextAPIFolder(node, dataSources, componentChunk, extractedResources)
 
-        // For components, also create count API route
-        if (isComponent) {
+        const hasSearch = searchEnabledDataSources.has(renderProp)
+        const needsCountRoute = isComponent || hasSearch
+
+        if (needsCountRoute) {
           const resourceDef = node.content.resourceDefinition
           if (resourceDef) {
             const dataSourceId = resourceDef.dataSourceId
@@ -2277,15 +2419,17 @@ function createAPIRoutesForPaginatedDataSources(
             const fileName = `${dataSourceType}-${tableName}-${dataSourceId.substring(0, 8)}`
             const countFileName = `${fileName}-count`
 
-            // Create count API route that exports getCount handler
-            extractedResources[`api/${countFileName}`] = {
-              fileName: countFileName,
-              fileType: FileType.JS,
-              path: ['pages', 'api'],
-              content: `import dataSource from '../../utils/data-sources/${fileName}'
+            if (!createdCountRoutes.has(countFileName)) {
+              extractedResources[`api/${countFileName}`] = {
+                fileName: countFileName,
+                fileType: FileType.JS,
+                path: ['pages', 'api'],
+                content: `import dataSource from '../../utils/data-sources/${fileName}'
 
 export default dataSource.getCount
 `,
+              }
+              createdCountRoutes.add(countFileName)
             }
           }
         }