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

package/COUNT_API_FIX.md

@@ -0,0 +1,185 @@
+# Count API Route Fix
+
+## Problem
+
+When pages with pagination + search functionality were generated, the code included `useEffect` hooks that fetched from count API endpoints (e.g., `/api/cockroachdb-users-eab38133-count`), but these count API route files were not being created. This resulted in 404 errors when users searched.
+
+### Affected Code
+
+In the generated page `index.js`:
+```javascript
+useEffect(() => {
+  if (skipCountFetchOnMount_pg_1.current) {
+    skipCountFetchOnMount_pg_1.current = false
+    return
+  }
+  fetch(
+    `/api/cockroachdb-users-eab38133-count?${new URLSearchParams({
+      query: paginationState_pg_1.debouncedQuery,
+      queryColumns: JSON.stringify(['name']),
+    })}`
+  )
+    .then((res) => res.json())
+    .then((data) => {
+      if (data && 'count' in data) {
+        setPagination_pg_1_maxPages(
+          data.count === 0 ? 0 : Math.ceil(data.count / 3)
+        )
+      }
+    })
+}, [paginationState_pg_1.debouncedQuery])
+```
+
+But `/api/cockroachdb-users-eab38133-count.js` did **not exist**.
+
+## Root Cause
+
+In `pagination-plugin.ts`, the `createAPIRoutesForPaginatedDataSources()` function:
+```typescript
+// OLD CODE (line 2354)
+if (isComponent) {  // ❌ Only created for components!
+  // Create count API route
+  extractedResources[`api/${countFileName}`] = { ... }
+}
+```
+
+The count API route was only being created for **components**, but pages with search functionality also need it to refetch count when the search query changes.
+
+## Why Pages with Search Need Count Routes
+
+### Different Scenarios:
+
+1. **Pages with pagination ONLY (no search)**:
+   - Initial count fetched in `getStaticProps`
+   - Count is static - doesn't change during user interaction
+   - ✅ No count API route needed
+
+2. **Pages with pagination + SEARCH**:
+   - Initial count fetched in `getStaticProps` (for page 1, no search)
+   - Count changes when user searches
+   - Need to refetch count with search parameters
+   - ❌ **NEEDS count API route** (was missing!)
+
+3. **Components with pagination (with or without search)**:
+   - No `getStaticProps`
+   - Always fetch count client-side
+   - ✅ **NEEDS count API route** (was already working)
+
+4. **Search-only (no pagination)**:
+   - No pagination, no maxPages calculation needed
+   - ✅ No count route needed
+
+## Solution
+
+Changed the condition from "only components" to "components OR pages with search":
+
+```typescript
+// NEW CODE (lines 2344-2364)
+const searchEnabledDataSources = new Set(
+  paginationInfos
+    .filter((info) => info.searchEnabled)
+    .map((info) => info.dataSourceIdentifier)
+)
+
+const createdCountRoutes = new Set<string>()
+
+// ... in traverseForDataSources:
+const hasSearch = searchEnabledDataSources.has(renderProp)
+const needsCountRoute = isComponent || hasSearch  // ✅ Now checks both!
+
+if (needsCountRoute) {
+  const resourceDef = node.content.resourceDefinition
+  if (resourceDef) {
+    // ... create count route
+    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)
+    }
+  }
+}
+```
+
+## Additional Improvements
+
+1. **Deduplication**: Added `createdCountRoutes` Set to prevent creating the same count route multiple times when the same data source is used with different perPage settings
+
+2. **Clear Logic**: The condition `needsCountRoute = isComponent || hasSearch` makes it explicit when count routes are needed
+
+## Generated Files
+
+After the fix, for a page with search, the following files are generated:
+
+```
+pages/
+  api/
+    cockroachdb-users-eab38133.js      ✅ Main data API route
+    cockroachdb-users-eab38133-count.js ✅ Count API route (NOW CREATED!)
+  
+utils/
+  data-sources/
+    cockroachdb-users-eab38133.js       ✅ Data source module with fetchData, fetchCount, handler, getCount
+```
+
+## Testing
+
+Verified with the provided UIDL containing:
+- Table with pagination + search
+- Array mapper with pagination + search
+- Both bound to the same CockroachDB data source
+
+Results:
+- ✅ Count API route created: `/api/cockroachdb-users-eab38133-count.js`
+- ✅ File exports `dataSource.getCount` handler
+- ✅ Search functionality works without 404 errors
+- ✅ Count updates correctly when search query changes
+
+## Edge Cases Handled
+
+1. ✅ **Multiple data sources with search**: Each gets its own count route
+2. ✅ **Same data source, different perPage**: Count route created once, shared
+3. ✅ **Pages without search**: Count route not created (unnecessary)
+4. ✅ **Components**: Count route still created (backward compatible)
+5. ✅ **Search-only (no pagination)**: No count route created (correct)
+
+## Files Modified
+
+- `packages/teleport-plugin-next-data-source/src/pagination-plugin.ts`:
+  - `createAPIRoutesForPaginatedDataSources()`: Updated condition to create count routes for pages with search
+  - Added `searchEnabledDataSources` Set
+  - Added `createdCountRoutes` Set for deduplication
+  - Changed `if (isComponent)` to `if (needsCountRoute)`
+
+## Regression Prevention
+
+This fix aligns with the comment on line 353 of the same file:
+```typescript
+// Add useEffect to refetch count when search changes (for both pages and components)
+```
+
+The useEffect was already being created for both pages and components, but the count API route was only being created for components. Now both are consistent.
+
+## Related Issues
+
+This issue was introduced when search functionality was added to pages. The original pagination implementation (without search) correctly didn't create count routes for pages because:
+- Pages got initial count in `getStaticProps`
+- Count never changed during user interaction (no search)
+
+When search was added, the requirement changed:
+- Count now needs to be refetched when search query changes
+- But the count API route creation wasn't updated
+
+## Future Considerations
+
+If additional features are added that require dynamic count updates (e.g., filters, sorting), the same pattern should be followed:
+1. Create the useEffect to refetch count
+2. Ensure the count API route is created
+3. Add the feature to the `searchEnabledDataSources` check (or create a new check)
+

package/SEARCH_FIX_SUMMARY.md

@@ -0,0 +1,96 @@
+# Search State Bug Fix Summary
+
+## Problem
+When multiple data providers with search functionality were bound to the same data source in a project, all search inputs were incorrectly writing to the same state variable, causing search functionality to interfere between different list/table components.
+
+## Root Causes
+
+### 1. Fallback Matching Logic
+The `modifySearchInputs` function had a problematic fallback:
+```typescript
+} else if (className && className.includes('search-input')) {
+  // Fallback: match any input with 'search-input' in class
+  addSearchInputHandlers(node, info)
+}
+```
+This caused EVERY search input to match EVERY pagination info, with the last match overwriting previous handlers.
+
+### 2. No Duplicate Prevention
+The function didn't track which inputs had already been modified, allowing multiple matches to overwrite handlers.
+
+### 3. Limited Detection Scope
+The detection logic only looked at immediate siblings of DataProviders, missing search inputs in nested structures (e.g., table layouts where the search input is at a different nesting level).
+
+## Solutions Implemented
+
+### 1. Removed Fallback Logic
+Changed from `forEach` to `for` loop with `break` statement to ensure only ONE match per input:
+```typescript
+for (let index = 0; index < detectedPaginations.length; index++) {
+  const detected = detectedPaginations[index]
+  const info = paginationInfos[index]
+  
+  if (className === detected.searchInputClass) {
+    addSearchInputHandlers(node, info)
+    modifiedInputs.add(node)
+    break  // Stop after first match
+  }
+}
+```
+
+### 2. Added Duplicate Tracking
+Introduced a `Set` to track modified inputs:
+```typescript
+const modifiedInputs = new Set<any>()
+// ...
+if (className && !modifiedInputs.has(node)) {
+  // Only process if not already modified
+}
+```
+
+### 3. Improved Detection for Nested Structures
+Enhanced the detection logic to walk up the JSX tree to find search inputs and pagination controls that aren't direct siblings:
+```typescript
+const findSearchAndPaginationInScope = (scopeNode: any, skipNode: any = null): void => {
+  // Recursively search through children
+}
+
+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++
+}
+```
+
+### 4. Applied Same Fix to Pagination Buttons
+Applied the same pattern to `modifyPaginationButtons` for consistency and to prevent similar issues with button handlers.
+
+## Edge Cases Handled
+
+1. ✅ **Multiple data sources on same page**: Each gets unique state variables (e.g., `search_pg_0_query`, `search_pg_1_query`)
+2. ✅ **Nested structures (tables)**: Detection walks up the tree to find search inputs
+3. ✅ **Same data source, different components**: Each instance maintains independent state
+4. ✅ **Mixed pagination + search**: Proper state management with combined `paginationState` object
+5. ✅ **Search-only mappers**: Separate handling preserves functionality
+
+## Testing
+
+Verified with UIDL containing:
+- Table with search and pagination
+- Array mapper with search and pagination
+- Both bound to the same CockroachDB data source
+
+Result: Each search input now has its own state variable and handlers, functioning independently without interference.
+
+## Files Modified
+
+1. `packages/teleport-plugin-next-data-source/src/pagination-plugin.ts`
+   - `modifySearchInputs()`: Removed fallback, added tracking, break on match
+   - `modifyPaginationButtons()`: Applied same pattern for consistency
+   - `detectPaginationsAndSearchFromJSX()`: Enhanced detection for nested structures
+   - `findParentNode()`: New helper to walk up the tree
+

package/dist/cjs/pagination-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination-plugin.d.ts","sourceRoot":"","sources":["../../src/pagination-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,sBAAsB,EAGvB,MAAM,4BAA4B,CAAA;AAgBnC,eAAO,MAAM,qCAAqC,EAAE,sBAAsB,CAAC,EAAE,CA+tB5E,CAAA;;AA0iDD,wBAAsD"}
+{"version":3,"file":"pagination-plugin.d.ts","sourceRoot":"","sources":["../../src/pagination-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,sBAAsB,EAGvB,MAAM,4BAA4B,CAAA;AAgBnC,eAAO,MAAM,qCAAqC,EAAE,sBAAsB,CAAC,EAAE,CA+tB5E,CAAA;;AAuoDD,wBAAsD"}

package/dist/cjs/pagination-plugin.js

@@ -457,6 +457,64 @@ var createNextArrayMapperPaginationPlugin = function () {
     return paginationPlugin;
 };
 exports.createNextArrayMapperPaginationPlugin = createNextArrayMapperPaginationPlugin;
+function findParentNode(root, target, currentParent) {
+    if (currentParent === void 0) { currentParent = 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 (var _i = 0, _a = root.children; _i < _a.length; _i++) {
+                var child = _a[_i];
+                var found = findParentNode(child, target, root);
+                if (found !== null) {
+                    return found;
+                }
+            }
+        }
+    }
+    else if (root.type === 'JSXExpressionContainer') {
+        if (root.expression) {
+            var found = findParentNode(root.expression, target, root);
+            if (found !== null) {
+                return found;
+            }
+        }
+    }
+    else if (root.type === 'BlockStatement') {
+        if (root.body && Array.isArray(root.body)) {
+            for (var _b = 0, _c = root.body; _b < _c.length; _b++) {
+                var stmt = _c[_b];
+                var found = findParentNode(stmt, target, root);
+                if (found !== null) {
+                    return found;
+                }
+            }
+        }
+    }
+    else if (root.type === 'ReturnStatement') {
+        if (root.argument) {
+            var found = findParentNode(root.argument, target, root);
+            if (found !== null) {
+                return found;
+            }
+        }
+    }
+    else if (root.type === 'ConditionalExpression') {
+        var foundConsequent = findParentNode(root.consequent, target, root);
+        if (foundConsequent !== null) {
+            return foundConsequent;
+        }
+        var foundAlternate = findParentNode(root.alternate, target, root);
+        if (foundAlternate !== null) {
+            return foundAlternate;
+        }
+    }
+    return null;
+}
 function detectPaginationsAndSearchFromJSX(blockStatement, uidlNode) {
     var dataProviderMap = new Map();
     var arrayMapperInfoMap = new Map();
@@ -624,32 +682,35 @@ function detectPaginationsAndSearchFromJSX(blockStatement, uidlNode) {
         var dataProviderIdentifier = nameAttr.value.expression.value;
         var paginationNodeInfo = null;
         var searchInputInfo = null;
-        // Look through parent's children for siblings
-        if (parent && parent.children && Array.isArray(parent.children)) {
-            parent.children.forEach(function (sibling) {
+        var findSearchAndPaginationInScope = function (scopeNode, skipNode) {
+            if (skipNode === void 0) { skipNode = null; }
+            if (!scopeNode || !scopeNode.children || !Array.isArray(scopeNode.children)) {
+                return;
+            }
+            scopeNode.children.forEach(function (child) {
                 var _a, _b, _c;
-                if (sibling === dataProvider) {
+                if (child === skipNode) {
                     return;
                 }
-                if (sibling.type === 'JSXElement') {
-                    var siblingClassName = getClassName(((_a = sibling.openingElement) === null || _a === void 0 ? void 0 : _a.attributes) || []);
-                    var siblingElementName = (_c = (_b = sibling.openingElement) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c.name;
+                if (child.type === 'JSXElement') {
+                    var childClassName = getClassName(((_a = child.openingElement) === null || _a === void 0 ? void 0 : _a.attributes) || []);
+                    var childElementName = (_c = (_b = child.openingElement) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c.name;
                     // Found pagination node
-                    if (siblingClassName && siblingClassName.includes('cms-pagination-node')) {
-                        var prevClass = findChildWithClass(sibling, 'previous');
-                        var nextClass = findChildWithClass(sibling, 'next');
+                    if (childClassName && childClassName.includes('cms-pagination-node')) {
+                        var prevClass = findChildWithClass(child, 'previous');
+                        var nextClass = findChildWithClass(child, 'next');
                         if (prevClass || nextClass) {
                             paginationNodeInfo = {
-                                class: siblingClassName,
+                                class: childClassName,
                                 prevClass: prevClass,
                                 nextClass: nextClass,
                             };
                         }
                     }
                     // 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(function (searchChild) {
+                    if (childClassName && childClassName.includes('data-source-search-node')) {
+                        if (child.children && Array.isArray(child.children)) {
+                            child.children.forEach(function (searchChild) {
                                 var _a, _b, _c;
                                 if (searchChild.type === 'JSXElement') {
                                     var searchChildElementName = (_b = (_a = searchChild.openingElement) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b.name;
@@ -666,17 +727,28 @@ function detectPaginationsAndSearchFromJSX(blockStatement, uidlNode) {
                             });
                         }
                     }
-                    // Also check if search input is a direct sibling
-                    if (siblingClassName &&
-                        siblingClassName.includes('search-input') &&
-                        siblingElementName === 'input') {
+                    // Also check if search input is a direct child
+                    if (childClassName &&
+                        childClassName.includes('search-input') &&
+                        childElementName === 'input') {
                         searchInputInfo = {
-                            class: siblingClassName,
-                            jsx: sibling,
+                            class: childClassName,
+                            jsx: child,
                         };
                     }
+                    if (!searchInputInfo || !paginationNodeInfo) {
+                        findSearchAndPaginationInScope(child, skipNode);
+                    }
                 }
             });
+        };
+        var currentScope = parent;
+        var depth = 0;
+        var 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
         var uniqueKey = "".concat(dataProviderIdentifier, "__").concat(arrayMapperRenderProp);
@@ -1063,6 +1135,7 @@ function findChildWithClass(node, classSubstring) {
     return null;
 }
 function modifyPaginationButtons(blockStatement, detectedPaginations, paginationInfos) {
+    var modifiedButtons = new Set();
     var modifyNode = function (node) {
         if (!node) {
             return;
@@ -1070,20 +1143,25 @@ function modifyPaginationButtons(blockStatement, detectedPaginations, pagination
         if (node.type === 'JSXElement') {
             var openingElement = node.openingElement;
             if (openingElement && openingElement.name && openingElement.name.type === 'JSXIdentifier') {
-                var className_1 = getClassName(openingElement.attributes);
-                if (className_1) {
-                    detectedPaginations.forEach(function (detected, index) {
+                var className = getClassName(openingElement.attributes);
+                if (className && !modifiedButtons.has(node)) {
+                    for (var index = 0; index < detectedPaginations.length; index++) {
+                        var detected = detectedPaginations[index];
                         var info = paginationInfos[index];
                         if (!info) {
-                            return;
+                            continue;
                         }
-                        if (className_1 === detected.prevButtonClass) {
+                        if (className === detected.prevButtonClass) {
                             convertToButton(node, info, 'prev');
+                            modifiedButtons.add(node);
+                            break;
                         }
-                        else if (className_1 === detected.nextButtonClass) {
+                        else if (className === detected.nextButtonClass) {
                             convertToButton(node, info, 'next');
+                            modifiedButtons.add(node);
+                            break;
                         }
-                    });
+                    }
                 }
             }
         }
@@ -1101,6 +1179,7 @@ function modifyPaginationButtons(blockStatement, detectedPaginations, pagination
     modifyNode(blockStatement);
 }
 function modifySearchInputs(blockStatement, detectedPaginations, paginationInfos) {
+    var modifiedInputs = new Set();
     var modifyNode = function (node) {
         if (!node) {
             return;
@@ -1108,21 +1187,20 @@ function modifySearchInputs(blockStatement, detectedPaginations, paginationInfos
         if (node.type === 'JSXElement') {
             var openingElement = node.openingElement;
             if (openingElement && openingElement.name && openingElement.name.type === 'JSXIdentifier') {
-                var className_2 = getClassName(openingElement.attributes);
-                if (className_2) {
-                    detectedPaginations.forEach(function (detected, index) {
+                var className = getClassName(openingElement.attributes);
+                if (className && !modifiedInputs.has(node)) {
+                    for (var index = 0; index < detectedPaginations.length; index++) {
+                        var detected = detectedPaginations[index];
                         var info = paginationInfos[index];
                         if (!info || !info.searchEnabled) {
-                            return;
-                        }
-                        if (className_2 === detected.searchInputClass) {
-                            addSearchInputHandlers(node, info);
+                            continue;
                         }
-                        else if (className_2 && className_2.includes('search-input')) {
-                            // Fallback: match any input with 'search-input' in class
+                        if (className === detected.searchInputClass) {
                             addSearchInputHandlers(node, info);
+                            modifiedInputs.add(node);
+                            break;
                         }
-                    });
+                    }
                 }
             }
         }
@@ -1426,6 +1504,8 @@ function modifyGetStaticPropsForPagination(chunks, paginationInfos) {
 }
 function createAPIRoutesForPaginatedDataSources(uidlNode, dataSources, componentChunk, extractedResources, paginationInfos, isComponent) {
     var paginatedDataSourceIds = new Set(paginationInfos.map(function (info) { return info.dataSourceIdentifier; }));
+    var searchEnabledDataSources = new Set(paginationInfos.filter(function (info) { return info.searchEnabled; }).map(function (info) { return info.dataSourceIdentifier; }));
+    var createdCountRoutes = new Set();
     var traverseForDataSources = function (node) {
         var _a;
         if (!node) {
@@ -1435,8 +1515,9 @@ function createAPIRoutesForPaginatedDataSources(uidlNode, dataSources, component
             var renderProp = node.content.renderPropIdentifier;
             if (renderProp && paginatedDataSourceIds.has(renderProp)) {
                 (0, utils_1.extractDataSourceIntoNextAPIFolder)(node, dataSources, componentChunk, extractedResources);
-                // For components, also create count API route
-                if (isComponent) {
+                var hasSearch = searchEnabledDataSources.has(renderProp);
+                var needsCountRoute = isComponent || hasSearch;
+                if (needsCountRoute) {
                     var resourceDef = node.content.resourceDefinition;
                     if (resourceDef) {
                         var dataSourceId = resourceDef.dataSourceId;
@@ -1444,13 +1525,15 @@ function createAPIRoutesForPaginatedDataSources(uidlNode, dataSources, component
                         var dataSourceType = resourceDef.dataSourceType;
                         var fileName = "".concat(dataSourceType, "-").concat(tableName, "-").concat(dataSourceId.substring(0, 8));
                         var countFileName = "".concat(fileName, "-count");
-                        // Create count API route that exports getCount handler
-                        extractedResources["api/".concat(countFileName)] = {
-                            fileName: countFileName,
-                            fileType: teleport_types_1.FileType.JS,
-                            path: ['pages', 'api'],
-                            content: "import dataSource from '../../utils/data-sources/".concat(fileName, "'\n\nexport default dataSource.getCount\n"),
-                        };
+                        if (!createdCountRoutes.has(countFileName)) {
+                            extractedResources["api/".concat(countFileName)] = {
+                                fileName: countFileName,
+                                fileType: teleport_types_1.FileType.JS,
+                                path: ['pages', 'api'],
+                                content: "import dataSource from '../../utils/data-sources/".concat(fileName, "'\n\nexport default dataSource.getCount\n"),
+                            };
+                            createdCountRoutes.add(countFileName);
+                        }
                     }
                 }
             }