@teleporthq/teleport-plugin-next-data-source 0.42.35 → 0.43.3

package/dist/cjs/pagination-plugin.js

@@ -62,10 +62,220 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createNextArrayMapperPaginationPlugin = void 0;
 var teleport_types_1 = require("@teleporthq/teleport-types");
 var types = __importStar(require("@babel/types"));
+var parser_1 = require("@babel/parser");
 var teleport_shared_1 = require("@teleporthq/teleport-shared");
 var teleport_plugin_common_1 = require("@teleporthq/teleport-plugin-common");
 var utils_1 = require("./utils");
 var data_source_fetchers_1 = require("./data-source-fetchers");
+var sort_utils_1 = require("./sort-utils");
+var filter_utils_1 = require("./filter-utils");
+// tslint:disable-next-line:no-any
+function parseSearchDefaultValue(raw) {
+    if (!raw || typeof raw !== 'object') {
+        return undefined;
+    }
+    if (raw.type === 'static' && typeof raw.content === 'string' && raw.content.length > 0) {
+        return { kind: 'static', value: raw.content };
+    }
+    if ((raw.type === 'expr' || raw.type === 'dynamic') && typeof raw.content === 'string') {
+        var src = raw.content.trim();
+        if (src.length === 0) {
+            return undefined;
+        }
+        try {
+            var ast = (0, parser_1.parseExpression)(src, { sourceType: 'module', plugins: ['jsx'] });
+            return { kind: 'expression', ast: ast };
+        }
+        catch (_a) {
+            // Fall back to no seed if the expression is malformed — better to
+            // render an empty input than to emit broken code.
+            return undefined;
+        }
+    }
+    return undefined;
+}
+function searchDefaultValueInitAST(value) {
+    if (!value) {
+        return types.stringLiteral('');
+    }
+    if (value.kind === 'static') {
+        return types.stringLiteral(value.value);
+    }
+    // Clone so multiple `useState(...)` call sites each get an
+    // independent AST node — Babel does not support shared references.
+    return types.cloneNode(value.ast, /* deep */ true);
+}
+// The UIDL's `filters.content` array can wrap one or more conditions inside
+// a `{ type: 'group', operator: 'and' | 'or', children: [...] }` entry — the
+// GUI builds this shape when the inspector adds a logical group. The data
+// source API endpoint (`processFilters` in the generated data-source module)
+// only knows how to consume a FLAT array of `{ source, destination, operand }`
+// conditions, so we walk groups recursively here and collect their leaf
+// conditions in order. Anything that isn't a group AND isn't a condition is
+// dropped — defensive against partially-built filter entries that would
+// otherwise emit `{ source: '', destination: '', operand: '' }` rows the
+// API ignores anyway.
+//
+// `or`-grouped conditions are flattened just like `and`-grouped ones — the
+// downstream SQL builder always joins flat filters with `AND`, so emitting
+// the conditions side-by-side approximates AND semantics. A future API
+// upgrade that respects group operators would key off the original tree
+// directly; until then, AND-flattening is the closest correct behaviour and
+// matches what the inspector preview shows for the common single-group case
+// the GUI emits today.
+function flattenFilterGroups(filters) {
+    if (!Array.isArray(filters)) {
+        return [];
+    }
+    var out = [];
+    var walk = function (entry) {
+        if (!entry || typeof entry !== 'object') {
+            return;
+        }
+        if (entry.type === 'group' && Array.isArray(entry.children)) {
+            for (var _i = 0, _a = entry.children; _i < _a.length; _i++) {
+                var child = _a[_i];
+                walk(child);
+            }
+            return;
+        }
+        // Backwards-compatible: entries without an explicit `type` (legacy flat
+        // form) and entries explicitly tagged `condition` are both treated as
+        // condition leaves.
+        if (entry.type === undefined || entry.type === 'condition') {
+            out.push(entry);
+        }
+    };
+    for (var _i = 0, filters_1 = filters; _i < filters_1.length; _i++) {
+        var entry = filters_1[_i];
+        walk(entry);
+    }
+    return out;
+}
+// Walks a flat filter list to extract every `urlSearchParams` reference key
+// (e.g. `'categoryFilter'`). Used to (a) inject `const router = useRouter()`
+// once at the top of the component, (b) wire `router.query.<key>` into the
+// `useMemo` dependency array so the client-side fetch reruns whenever the
+// buyer navigates to a URL with a different `?key=value`. Returned in the
+// order keys first appear so the generated dep array stays stable.
+function collectFilterUrlSearchParamKeys(filters) {
+    var seen = new Set();
+    var out = [];
+    for (var _i = 0, filters_2 = filters; _i < filters_2.length; _i++) {
+        var f = filters_2[_i];
+        var dest = f === null || f === void 0 ? void 0 : f.destination;
+        if (!teleport_plugin_common_1.ASTUtils.isUIDLDynamicReference(dest)) {
+            continue;
+        }
+        var content = dest.content;
+        if (!content || content.referenceType !== 'urlSearchParams' || !content.id) {
+            continue;
+        }
+        if (seen.has(content.id)) {
+            continue;
+        }
+        seen.add(content.id);
+        out.push(content.id);
+    }
+    return out;
+}
+// Returns true when any filter destination is a `urlSearchParams` dynamic
+// reference — used by the plugin to know it needs to import `useRouter` and
+// emit `const router = useRouter()` at the top of the component. Cheaper to
+// test against the precomputed key list once than to walk all filters on
+// every check.
+function hasUrlSearchParamFilters(usage) {
+    return usage.filterUrlSearchParamKeys.length > 0;
+}
+// Appends `router.query.<key>` member expressions to a useMemo deps array so
+// every client-side fetch refires when the buyer navigates between URLs
+// that differ only by `?key=value`. React's shallow-compare semantics treat
+// the member expression as a distinct value per render, so the array stays
+// stable across paints with the same query string and changes the moment
+// the URL does. Skip the bare-identifier dedupe `filterStateIds` uses —
+// member expressions never collide with state identifiers, and the deps
+// array allows duplicates without harm.
+function pushUrlSearchParamMemoDeps(memoDeps, usage) {
+    for (var _i = 0, _a = usage.filterUrlSearchParamKeys; _i < _a.length; _i++) {
+        var key = _a[_i];
+        memoDeps.push(types.memberExpression(types.memberExpression(types.identifier('router'), types.identifier('query')), types.identifier(key)));
+    }
+}
+// Builds the AST for `!router.query.<key1> && !router.query.<key2> && ...`,
+// used as a runtime guard around `initialData={props.X}` so the server-
+// prefetched (unfiltered) data is only handed to `DataProvider` when the
+// URL has no active filter. Without this guard, navigating to
+// `/products-list?categoryFilter=Rings` (especially via soft Next.js
+// transitions where the page component remounts with fresh getStaticProps
+// but the buyer's URL filter is still in scope) shows the unfiltered list
+// for the first paint AND keeps it on screen because `DataProvider`'s
+// `passFetchBecauseWeHaveInitialData` ref skips the very first fetch when
+// `initialData !== undefined`. By emitting `undefined` here whenever ANY
+// url-search-param filter is set, the DataProvider's mount-time fetch runs
+// immediately with the filtered params instead of presenting stale data.
+//
+// Returns `null` when the usage has no url-search-param filters at all —
+// callers fall back to the existing `props.X` expression unchanged so
+// non-filtered pages still benefit from the SSR prefetch.
+function buildNoUrlFilterGuard(usage) {
+    if (usage.filterUrlSearchParamKeys.length === 0 && usage.filterStateIds.length === 0) {
+        return null;
+    }
+    var guards = [];
+    for (var _i = 0, _a = usage.filterUrlSearchParamKeys; _i < _a.length; _i++) {
+        var key = _a[_i];
+        guards.push(types.unaryExpression('!', types.memberExpression(types.memberExpression(types.identifier('router'), types.identifier('query')), types.identifier(key)), true));
+    }
+    // State-bound filter destinations (e.g. `selectedCategory`) emit as bare
+    // identifiers, so the corresponding guard is `!selectedCategory`. An empty
+    // string ('') for the state — which the GUI emits when the user picks the
+    // "All Categories" reset option — is falsy and so passes through the guard
+    // exactly like a missing URL param: initialData (unfiltered prefetch) wins
+    // until the user picks a real value.
+    for (var _b = 0, _c = usage.filterStateIds; _b < _c.length; _b++) {
+        var id = _c[_b];
+        guards.push(types.unaryExpression('!', types.identifier(id), true));
+    }
+    return guards.reduce(function (acc, next) { return types.logicalExpression('&&', acc, next); });
+}
+// Wraps an existing `initialData` condition with the additional "no URL
+// filter active" guard so server-prefetched data is only handed to
+// DataProvider when both (a) the original guard (page === 1, no search
+// query, etc.) AND (b) every relevant `router.query.<key>` is falsy. See
+// `buildNoUrlFilterGuard` for the rationale on why bare-identity feature
+// detection is safer than the `dynamicSort`-style "always undefined" path.
+function wrapInitialDataWithUrlFilterGuard(baseCondition, usage) {
+    var noFilterGuard = buildNoUrlFilterGuard(usage);
+    if (!noFilterGuard) {
+        return baseCondition;
+    }
+    return types.logicalExpression('&&', baseCondition, noFilterGuard);
+}
+// Builds the destination AST for a single filter entry. Replaces the bare
+// `ASTUtils.convertFilterDestinationToExpression(filter.destination)` call
+// at every emit site so `urlSearchParams` references resolve to
+// `router?.query?.<key>` instead of falling through to a bare identifier
+// (which the existing helper would emit, leaving the client-side fetch
+// referencing an undeclared symbol).
+//
+// State and prop references delegate back to the shared helper so the
+// existing inspector behaviour (state-bound filter destinations) keeps
+// working unchanged. `router?.query?.<key>` is the same shape the
+// `createNextUrlSearchParamsPlugin`-driven `dynamicReferencePrefixMap`
+// emits for page-level navlink reads.
+function buildFilterDestinationExpression(destination) {
+    if (teleport_plugin_common_1.ASTUtils.isUIDLDynamicReference(destination)) {
+        var content = destination.content;
+        if ((content === null || content === void 0 ? void 0 : content.referenceType) === 'urlSearchParams' && (content === null || content === void 0 ? void 0 : content.id)) {
+            // router?.query?.<id> — the optional-chain survives the first paint
+            // where Next.js's `useRouter()` returns `null` during static export
+            // hydration, so the fetch doesn't crash with "Cannot read properties
+            // of null" before the router is ready.
+            return types.optionalMemberExpression(types.optionalMemberExpression(types.identifier('router'), types.identifier('query'), false, true), types.identifier(content.id), false, true);
+        }
+    }
+    return teleport_plugin_common_1.ASTUtils.convertFilterDestinationToExpression(destination);
+}
 // Scan UIDL to find all data source usages and build a registry
 function buildStateRegistry(uidlNode) {
     var usages = [];
@@ -112,20 +322,48 @@ function buildStateRegistry(uidlNode) {
                 if ((_h = (_g = parentDataSource.resourceParams) === null || _g === void 0 ? void 0 : _g.queryColumns) === null || _h === void 0 ? void 0 : _h.content) {
                     queryColumns = parentDataSource.resourceParams.queryColumns.content;
                 }
-                // Extract sorts from parent's resource params
+                // Extract sorts from parent's resource params (legacy static array form)
                 var sorts = [];
                 if ((_k = (_j = parentDataSource.resourceParams) === null || _j === void 0 ? void 0 : _j.sorts) === null || _k === void 0 ? void 0 : _k.content) {
                     sorts = parentDataSource.resourceParams.sorts.content;
                 }
-                // Extract filters from parent's resource params
+                // If legacy sorts aren't set, fall back to the new dynamic single-column
+                // sort fields on the cms-list-repeater (used by admin-panel listing pages).
+                var dynamicSort = void 0;
+                if ((!sorts || sorts.length === 0) && content.sort) {
+                    dynamicSort = (0, sort_utils_1.extractDynamicSort)(content.sort, content.sortDirection);
+                }
+                // Extract filters from parent's resource params. The inspector wraps
+                // every condition in a `{ type: 'group' }` envelope (single-group or
+                // nested), so flatten to leaf conditions before the downstream emit
+                // sites consume `.source` / `.destination` / `.operand` directly —
+                // they expect a flat condition array. See `flattenFilterGroups`'s
+                // header comment for why AND-flattening is the correct fallback for
+                // the API endpoint's flat-condition contract.
                 var filters = [];
                 if ((_m = (_l = parentDataSource.resourceParams) === null || _l === void 0 ? void 0 : _l.filters) === null || _m === void 0 ? void 0 : _m.content) {
-                    filters = parentDataSource.resourceParams.filters.content;
+                    filters = flattenFilterGroups(parentDataSource.resourceParams.filters.content);
+                }
+                // Split dynamic destination keys by reference type. `state`/`prop`
+                // refs resolve to bare identifiers (so they're useMemo deps as-is);
+                // `urlSearchParams` refs resolve to `router.query.<key>` and need a
+                // `useRouter()` declaration injected separately.
+                var filterStateIds = [];
+                for (var _i = 0, filters_3 = filters; _i < filters_3.length; _i++) {
+                    var f = filters_3[_i];
+                    if (!teleport_plugin_common_1.ASTUtils.isUIDLDynamicReference(f.destination)) {
+                        continue;
+                    }
+                    var destinationContent = f.destination.content;
+                    if (!destinationContent || !destinationContent.id) {
+                        continue;
+                    }
+                    if (destinationContent.referenceType === 'urlSearchParams') {
+                        continue;
+                    }
+                    filterStateIds.push(destinationContent.id);
                 }
-                // Extract state IDs from dynamic filter destinations
-                var filterStateIds = filters
-                    .filter(function (f) { return teleport_plugin_common_1.ASTUtils.isUIDLDynamicReference(f.destination); })
-                    .map(function (f) { return f.destination.content.id; });
+                var filterUrlSearchParamKeys = collectFilterUrlSearchParamKeys(filters);
                 // Extract limit from parent's resource params (for plain array mappers)
                 var limit = 0;
                 if ((_p = (_o = parentDataSource.resourceParams) === null || _o === void 0 ? void 0 : _o.limit) === null || _p === void 0 ? void 0 : _p.content) {
@@ -134,6 +372,7 @@ function buildStateRegistry(uidlNode) {
                 // For paginated mappers, use perPage from cms-list-repeater
                 // For plain mappers, use limit from data-source-list resource params
                 var effectivePerPage = content.paginated ? content.perPage : limit || content.perPage;
+                var searchDefaultValue = parseSearchDefaultValue(content.searchDefaultValue);
                 var usage = {
                     index: index++,
                     dataSourceIdentifier: parentDataSource.identifier,
@@ -147,10 +386,13 @@ function buildStateRegistry(uidlNode) {
                     perPage: effectivePerPage,
                     searchEnabled: !!content.searchEnabled,
                     searchDebounce: content.searchDebounce || 300,
+                    searchDefaultValue: searchDefaultValue,
                     queryColumns: queryColumns,
                     sorts: sorts,
+                    dynamicSort: dynamicSort,
                     filters: filters,
                     filterStateIds: filterStateIds,
+                    filterUrlSearchParamKeys: filterUrlSearchParamKeys,
                     category: 'plain',
                 };
                 // Determine category
@@ -179,8 +421,8 @@ function buildStateRegistry(uidlNode) {
         }
         // Recurse into children
         if (((_r = node.content) === null || _r === void 0 ? void 0 : _r.children) && Array.isArray(node.content.children)) {
-            for (var _i = 0, _u = node.content.children; _i < _u.length; _i++) {
-                var child = _u[_i];
+            for (var _u = 0, _v = node.content.children; _u < _v.length; _u++) {
+                var child = _v[_u];
                 traverse(child, parentDataSource);
             }
         }
@@ -205,8 +447,8 @@ function buildStateRegistry(uidlNode) {
             }
         }
         if (Array.isArray(node.children)) {
-            for (var _v = 0, _w = node.children; _v < _w.length; _v++) {
-                var child = _w[_v];
+            for (var _w = 0, _x = node.children; _w < _x.length; _w++) {
+                var child = _x[_w];
                 traverse(child, parentDataSource);
             }
         }
@@ -236,8 +478,9 @@ function getStateVarsForUsage(usage) {
 // ==================== MAIN PLUGIN ====================
 var createNextArrayMapperPaginationPlugin = function () {
     var paginationPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
-        var uidl, chunks, dependencies, options, componentChunk, variableDeclaration, declarator, arrowFunction, blockStatement, registry, getStaticPropsChunk, isPage, stateDeclarations, effectStatements, returnIndex, insertIndex, dataProviders, dataProvidersWithRepeaters, usageIndexByDataSourceId, dataProvidersWithoutRepeaters, searchInputs, searchEnabledUsages, paginationNodes, paginatedUsages;
-        return __generator(this, function (_a) {
+        var uidl, chunks, dependencies, options, componentChunk, variableDeclaration, declarator, arrowFunction, blockStatement, registry, getStaticPropsChunk, isPage, stateDeclarations, effectStatements, needsUseRouter, hasRouterDecl, returnIndex, insertIndex, dataProviders, dataProvidersWithRepeaters, usageIndexByDataSourceId, dataProvidersWithoutRepeaters, searchInputs, searchEnabledUsages, paginationNodes, paginatedUsages;
+        var _a;
+        return __generator(this, function (_b) {
             uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies, options = structure.options;
             componentChunk = chunks.find(function (chunk) { return chunk.name === 'jsx-component'; });
             if (!componentChunk || componentChunk.type !== teleport_types_1.ChunkType.AST) {
@@ -347,16 +590,19 @@ var createNextArrayMapperPaginationPlugin = function () {
                         ]), types.callExpression(types.identifier('useState'), [
                             types.objectExpression([
                                 types.objectProperty(types.identifier('page'), types.numericLiteral(1)),
-                                types.objectProperty(types.identifier('debouncedQuery'), types.stringLiteral('')),
+                                types.objectProperty(types.identifier('debouncedQuery'), searchDefaultValueInitAST(usage.searchDefaultValue)),
                             ]),
                         ])),
                     ]));
-                    // Immediate search query state
+                    // Immediate search query state — seeded with `searchDefaultValue`
+                    // when provided so the input is pre-filled on mount.
                     stateDeclarations.push(types.variableDeclaration('const', [
                         types.variableDeclarator(types.arrayPattern([
                             types.identifier(vars.searchQueryVar),
                             types.identifier(vars.setSearchQueryVar),
-                        ]), types.callExpression(types.identifier('useState'), [types.stringLiteral('')])),
+                        ]), types.callExpression(types.identifier('useState'), [
+                            searchDefaultValueInitAST(usage.searchDefaultValue),
+                        ])),
                     ]));
                     // Debounce effect
                     effectStatements.push(types.expressionStatement(types.callExpression(types.identifier('useEffect'), [
@@ -404,17 +650,7 @@ var createNextArrayMapperPaginationPlugin = function () {
                         ])));
                     }
                     // Add filters to count fetch params if present
-                    if (usage.filters && usage.filters.length > 0) {
-                        urlParams.push(types.objectProperty(types.identifier('filters'), types.callExpression(types.memberExpression(types.identifier('JSON'), types.identifier('stringify')), [
-                            types.arrayExpression(usage.filters.map(function (filter) {
-                                return types.objectExpression([
-                                    types.objectProperty(types.identifier('source'), types.stringLiteral(filter.source || '')),
-                                    types.objectProperty(types.identifier('destination'), teleport_plugin_common_1.ASTUtils.convertFilterDestinationToExpression(filter.destination)),
-                                    types.objectProperty(types.identifier('operand'), types.stringLiteral(filter.operand || '')),
-                                ]);
-                            })),
-                        ])));
-                    }
+                    (0, filter_utils_1.appendFiltersParam)(urlParams, usage.filters, buildFilterDestinationExpression);
                     // Build the count fetch effect body
                     var countFetchEffectBody = [];
                     // Only add skip-on-mount check for pages (where we have server-side count)
@@ -450,11 +686,21 @@ var createNextArrayMapperPaginationPlugin = function () {
                             ])),
                         ])),
                     ])));
+                    var countEffectDeps = [
+                        types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('debouncedQuery')),
+                    ];
+                    // Refresh the count whenever a state-bound filter destination changes
+                    // (e.g. user picks a category) so pagination tracks the filtered
+                    // result-set, not the mount-time unfiltered total. Without these
+                    // deps, ds_0_maxPages stays at the original count and the "Next"
+                    // button stays enabled past the actual last page of the filtered
+                    // results — letting the user click into empty pages.
+                    (0, filter_utils_1.pushStateIdsAsDeps)(countEffectDeps, new Set(), usage.filterStateIds);
+                    // Same goes for URL-driven filters (already documented above).
+                    pushUrlSearchParamMemoDeps(countEffectDeps, usage);
                     effectStatements.push(types.expressionStatement(types.callExpression(types.identifier('useEffect'), [
                         types.arrowFunctionExpression([], types.blockStatement(countFetchEffectBody)),
-                        types.arrayExpression([
-                            types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('debouncedQuery')),
-                        ]),
+                        types.arrayExpression(countEffectDeps),
                     ])));
                 }
                 else if (usage.category === 'paginated-only') {
@@ -496,7 +742,16 @@ var createNextArrayMapperPaginationPlugin = function () {
                                     ])),
                                 ])),
                             ])),
-                            types.arrayExpression([]), // Empty dependency array - fetch on mount only
+                            // Default to mount-only; refresh when ANY filter destination
+                            // changes — state-bound (e.g. `selectedCategory`) and
+                            // URL-driven — so the pagination control reflects the current
+                            // filtered count instead of the unfiltered mount-time total.
+                            types.arrayExpression((function () {
+                                var deps = [];
+                                (0, filter_utils_1.pushStateIdsAsDeps)(deps, new Set(), usage.filterStateIds);
+                                pushUrlSearchParamMemoDeps(deps, usage);
+                                return deps;
+                            })()),
                         ])));
                     }
                 }
@@ -509,13 +764,17 @@ var createNextArrayMapperPaginationPlugin = function () {
                         types.variableDeclarator(types.arrayPattern([
                             types.identifier(vars.debouncedSearchQueryVar),
                             types.identifier(vars.setDebouncedSearchQueryVar),
-                        ]), types.callExpression(types.identifier('useState'), [types.stringLiteral('')])),
+                        ]), types.callExpression(types.identifier('useState'), [
+                            searchDefaultValueInitAST(usage.searchDefaultValue),
+                        ])),
                     ]));
                     stateDeclarations.push(types.variableDeclaration('const', [
                         types.variableDeclarator(types.arrayPattern([
                             types.identifier(vars.searchQueryVar),
                             types.identifier(vars.setSearchQueryVar),
-                        ]), types.callExpression(types.identifier('useState'), [types.stringLiteral('')])),
+                        ]), types.callExpression(types.identifier('useState'), [
+                            searchDefaultValueInitAST(usage.searchDefaultValue),
+                        ])),
                     ]));
                     // Debounce effect
                     effectStatements.push(types.expressionStatement(types.callExpression(types.identifier('useEffect'), [
@@ -542,6 +801,36 @@ var createNextArrayMapperPaginationPlugin = function () {
             });
             // Insert state declarations at the beginning
             stateDeclarations.reverse().forEach(function (s) { return blockStatement.body.unshift(s); });
+            needsUseRouter = registry.usages.some(function (u) { return hasUrlSearchParamFilters(u); });
+            if (needsUseRouter) {
+                if (!dependencies.useRouter) {
+                    // Match the shape the sibling Next.js plugins use (i18n locale mapper,
+                    // search-params plugin) so the deduped import line is identical and
+                    // the dependency-resolver merges instead of emitting a second one.
+                    dependencies.useRouter = {
+                        type: 'library',
+                        path: 'next/router',
+                        version: '^12.1.10',
+                        meta: { namedImport: true },
+                    };
+                }
+                hasRouterDecl = blockStatement.body.some(function (statement) {
+                    return statement.type === 'VariableDeclaration' &&
+                        statement.declarations.some(function (decl) {
+                            var _a;
+                            return decl.id.type === 'Identifier' &&
+                                decl.id.name === 'router' &&
+                                ((_a = decl.init) === null || _a === void 0 ? void 0 : _a.type) === 'CallExpression' &&
+                                decl.init.callee.type === 'Identifier' &&
+                                decl.init.callee.name === 'useRouter';
+                        });
+                });
+                if (!hasRouterDecl) {
+                    blockStatement.body.unshift(types.variableDeclaration('const', [
+                        types.variableDeclarator(types.identifier('router'), types.callExpression(types.identifier('useRouter'), [])),
+                    ]));
+                }
+            }
             returnIndex = blockStatement.body.findIndex(function (s) { return s.type === 'ReturnStatement'; });
             insertIndex = returnIndex !== -1 ? returnIndex : blockStatement.body.length;
             effectStatements.reverse().forEach(function (e) { return blockStatement.body.splice(insertIndex, 0, e); });
@@ -615,7 +904,7 @@ var createNextArrayMapperPaginationPlugin = function () {
             });
             // STEP 6: Update getStaticProps if this is a page
             if (isPage) {
-                updateGetStaticProps(chunks, registry, dependencies);
+                updateGetStaticProps(chunks, registry, dependencies, (_a = uidl.outputOptions) === null || _a === void 0 ? void 0 : _a.folderPath);
             }
             return [2 /*return*/, structure];
         });
@@ -800,42 +1089,37 @@ function updateDataProviderForPaginatedSearch(dp, usage, vars, fileName) {
     if (usage.queryColumns.length > 0) {
         paramsProps.push(types.objectProperty(types.identifier('queryColumns'), types.callExpression(types.memberExpression(types.identifier('JSON'), types.identifier('stringify')), [types.arrayExpression(usage.queryColumns.map(function (c) { return types.stringLiteral(c); }))])));
     }
-    // Add sorts if present
-    if (usage.sorts && usage.sorts.length > 0) {
-        paramsProps.push(types.objectProperty(types.identifier('sorts'), types.callExpression(types.memberExpression(types.identifier('JSON'), types.identifier('stringify')), [
-            types.arrayExpression(usage.sorts.map(function (sort) {
-                return types.objectExpression([
-                    types.objectProperty(types.identifier('field'), types.stringLiteral(sort.field || '')),
-                    types.objectProperty(types.identifier('order'), types.stringLiteral(sort.order || '')),
-                ]);
-            })),
-        ])));
-    }
+    // Add sorts if present (legacy static array wins; otherwise dynamic state-bound sort)
+    (0, sort_utils_1.appendSortsParam)(paramsProps, usage.sorts, usage.dynamicSort);
     // Add filters if present
-    if (usage.filters && usage.filters.length > 0) {
-        paramsProps.push(types.objectProperty(types.identifier('filters'), types.callExpression(types.memberExpression(types.identifier('JSON'), types.identifier('stringify')), [
-            types.arrayExpression(usage.filters.map(function (filter) {
-                return types.objectExpression([
-                    types.objectProperty(types.identifier('source'), types.stringLiteral(filter.source || '')),
-                    types.objectProperty(types.identifier('destination'), teleport_plugin_common_1.ASTUtils.convertFilterDestinationToExpression(filter.destination)),
-                    types.objectProperty(types.identifier('operand'), types.stringLiteral(filter.operand || '')),
-                ]);
-            })),
-        ])));
-    }
-    // Build useMemo dependencies including filter state IDs
+    (0, filter_utils_1.appendFiltersParam)(paramsProps, usage.filters, buildFilterDestinationExpression);
+    // Build useMemo dependencies including filter state IDs and dynamic sort state IDs
     var memoDeps = [types.identifier(vars.combinedStateVar)];
-    usage.filterStateIds.forEach(function (stateId) {
-        memoDeps.push(types.identifier(stateId));
-    });
+    var seenDeps = new Set([vars.combinedStateVar]);
+    (0, filter_utils_1.pushStateIdsAsDeps)(memoDeps, seenDeps, usage.filterStateIds);
+    if (usage.dynamicSort) {
+        (0, filter_utils_1.pushStateIdsAsDeps)(memoDeps, seenDeps, usage.dynamicSort.depStateIds);
+    }
+    pushUrlSearchParamMemoDeps(memoDeps, usage);
     dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('params'), types.jsxExpressionContainer(types.callExpression(types.identifier('useMemo'), [
         types.arrowFunctionExpression([], types.objectExpression(paramsProps)),
         types.arrayExpression(memoDeps),
     ]))));
-    // Add initialData
-    var initialDataCondition = types.logicalExpression('&&', types.binaryExpression('===', types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('page')), types.numericLiteral(1)), types.unaryExpression('!', types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('debouncedQuery')), true));
-    dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('initialData'), types.jsxExpressionContainer(types.conditionalExpression(initialDataCondition, types.optionalMemberExpression(types.identifier('props'), types.identifier(vars.propsPrefix), false, true), types.identifier('undefined')))));
-    // Add key
+    // Add initialData. Skip the server-prefetched data entirely when a dynamic
+    // state-bound sort is active — the prefetch ran without sort parameters, so
+    // reusing it would mask the current sort state AND cause DataProvider to skip
+    // the first client fetch (its internal guard only skips when initialData is
+    // defined on mount). Without that skip, toggling sort correctly triggers a
+    // refetch via the useMemo params dependency chain.
+    if (!usage.dynamicSort) {
+        var initialDataCondition = wrapInitialDataWithUrlFilterGuard(types.logicalExpression('&&', types.binaryExpression('===', types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('page')), types.numericLiteral(1)), types.unaryExpression('!', types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('debouncedQuery')), true)), usage);
+        dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('initialData'), types.jsxExpressionContainer(types.conditionalExpression(initialDataCondition, types.optionalMemberExpression(types.identifier('props'), types.identifier(vars.propsPrefix), false, true), types.identifier('undefined')))));
+    }
+    // Add key. Sort is intentionally NOT part of the key — a key change would
+    // remount the DataProvider, and a fresh mount re-arms the internal
+    // "skip-first-fetch-when-we-have-initialData" guard, which would prevent the
+    // new sort params from reaching the fetcher. Leaving sort out of the key
+    // lets the useMemo params identity change alone drive refetch.
     dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('key'), types.jsxExpressionContainer(types.templateLiteral([
         types.templateElement({
             raw: "".concat(usage.dataSourceIdentifier, "-"),
@@ -863,42 +1147,29 @@ function updateDataProviderForPaginationOnly(dp, usage, vars, fileName) {
         types.objectProperty(types.identifier('page'), types.identifier(vars.pageStateVar)),
         types.objectProperty(types.identifier('perPage'), types.numericLiteral(usage.perPage)),
     ];
-    // Add sorts if present
-    if (usage.sorts && usage.sorts.length > 0) {
-        paramsProps.push(types.objectProperty(types.identifier('sorts'), types.callExpression(types.memberExpression(types.identifier('JSON'), types.identifier('stringify')), [
-            types.arrayExpression(usage.sorts.map(function (sort) {
-                return types.objectExpression([
-                    types.objectProperty(types.identifier('field'), types.stringLiteral(sort.field || '')),
-                    types.objectProperty(types.identifier('order'), types.stringLiteral(sort.order || '')),
-                ]);
-            })),
-        ])));
-    }
+    // Add sorts if present (legacy static array wins; otherwise dynamic state-bound sort)
+    (0, sort_utils_1.appendSortsParam)(paramsProps, usage.sorts, usage.dynamicSort);
     // Add filters if present
-    if (usage.filters && usage.filters.length > 0) {
-        paramsProps.push(types.objectProperty(types.identifier('filters'), types.callExpression(types.memberExpression(types.identifier('JSON'), types.identifier('stringify')), [
-            types.arrayExpression(usage.filters.map(function (filter) {
-                return types.objectExpression([
-                    types.objectProperty(types.identifier('source'), types.stringLiteral(filter.source || '')),
-                    types.objectProperty(types.identifier('destination'), teleport_plugin_common_1.ASTUtils.convertFilterDestinationToExpression(filter.destination)),
-                    types.objectProperty(types.identifier('operand'), types.stringLiteral(filter.operand || '')),
-                ]);
-            })),
-        ])));
-    }
-    // Build useMemo dependencies including filter state IDs
+    (0, filter_utils_1.appendFiltersParam)(paramsProps, usage.filters, buildFilterDestinationExpression);
+    // Build useMemo dependencies including filter state IDs and dynamic sort state IDs
     var memoDeps = [types.identifier(vars.pageStateVar)];
-    usage.filterStateIds.forEach(function (stateId) {
-        memoDeps.push(types.identifier(stateId));
-    });
+    var seenDeps = new Set([vars.pageStateVar]);
+    (0, filter_utils_1.pushStateIdsAsDeps)(memoDeps, seenDeps, usage.filterStateIds);
+    if (usage.dynamicSort) {
+        (0, filter_utils_1.pushStateIdsAsDeps)(memoDeps, seenDeps, usage.dynamicSort.depStateIds);
+    }
+    pushUrlSearchParamMemoDeps(memoDeps, usage);
     // Add params
     dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('params'), types.jsxExpressionContainer(types.callExpression(types.identifier('useMemo'), [
         types.arrowFunctionExpression([], types.objectExpression(paramsProps)),
         types.arrayExpression(memoDeps),
     ]))));
-    // Add initialData
-    dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('initialData'), types.jsxExpressionContainer(types.conditionalExpression(types.binaryExpression('===', types.identifier(vars.pageStateVar), types.numericLiteral(1)), types.optionalMemberExpression(types.identifier('props'), types.identifier(vars.propsPrefix), false, true), types.identifier('undefined')))));
-    // Add key
+    // Add initialData. See paginated+search updater for why we skip prefetch
+    // reuse when a dynamic state-bound sort is active.
+    if (!usage.dynamicSort) {
+        dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('initialData'), types.jsxExpressionContainer(types.conditionalExpression(wrapInitialDataWithUrlFilterGuard(types.binaryExpression('===', types.identifier(vars.pageStateVar), types.numericLiteral(1)), usage), types.optionalMemberExpression(types.identifier('props'), types.identifier(vars.propsPrefix), false, true), types.identifier('undefined')))));
+    }
+    // Add key — sort is intentionally NOT included; see paginated+search updater.
     dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('key'), types.jsxExpressionContainer(types.templateLiteral([
         types.templateElement({
             raw: "".concat(usage.dataSourceIdentifier, "-page-"),
@@ -923,41 +1194,28 @@ function updateDataProviderForSearchOnly(dp, usage, vars, fileName) {
     if (usage.queryColumns.length > 0) {
         paramsProps.push(types.objectProperty(types.identifier('queryColumns'), types.callExpression(types.memberExpression(types.identifier('JSON'), types.identifier('stringify')), [types.arrayExpression(usage.queryColumns.map(function (c) { return types.stringLiteral(c); }))])));
     }
-    // Add sorts if present
-    if (usage.sorts && usage.sorts.length > 0) {
-        paramsProps.push(types.objectProperty(types.identifier('sorts'), types.callExpression(types.memberExpression(types.identifier('JSON'), types.identifier('stringify')), [
-            types.arrayExpression(usage.sorts.map(function (sort) {
-                return types.objectExpression([
-                    types.objectProperty(types.identifier('field'), types.stringLiteral(sort.field || '')),
-                    types.objectProperty(types.identifier('order'), types.stringLiteral(sort.order || '')),
-                ]);
-            })),
-        ])));
-    }
+    // Add sorts if present (legacy static array wins; otherwise dynamic state-bound sort)
+    (0, sort_utils_1.appendSortsParam)(paramsProps, usage.sorts, usage.dynamicSort);
     // Add filters if present
-    if (usage.filters && usage.filters.length > 0) {
-        paramsProps.push(types.objectProperty(types.identifier('filters'), types.callExpression(types.memberExpression(types.identifier('JSON'), types.identifier('stringify')), [
-            types.arrayExpression(usage.filters.map(function (filter) {
-                return types.objectExpression([
-                    types.objectProperty(types.identifier('source'), types.stringLiteral(filter.source || '')),
-                    types.objectProperty(types.identifier('destination'), teleport_plugin_common_1.ASTUtils.convertFilterDestinationToExpression(filter.destination)),
-                    types.objectProperty(types.identifier('operand'), types.stringLiteral(filter.operand || '')),
-                ]);
-            })),
-        ])));
-    }
-    // Build useMemo dependencies including filter state IDs
+    (0, filter_utils_1.appendFiltersParam)(paramsProps, usage.filters, buildFilterDestinationExpression);
+    // Build useMemo dependencies including filter state IDs and dynamic sort state IDs
     var memoDeps = [types.identifier(vars.debouncedSearchQueryVar)];
-    usage.filterStateIds.forEach(function (stateId) {
-        memoDeps.push(types.identifier(stateId));
-    });
+    var seenDeps = new Set([vars.debouncedSearchQueryVar]);
+    (0, filter_utils_1.pushStateIdsAsDeps)(memoDeps, seenDeps, usage.filterStateIds);
+    if (usage.dynamicSort) {
+        (0, filter_utils_1.pushStateIdsAsDeps)(memoDeps, seenDeps, usage.dynamicSort.depStateIds);
+    }
+    pushUrlSearchParamMemoDeps(memoDeps, usage);
     dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('params'), types.jsxExpressionContainer(types.callExpression(types.identifier('useMemo'), [
         types.arrowFunctionExpression([], types.objectExpression(paramsProps)),
         types.arrayExpression(memoDeps),
     ]))));
-    // Add initialData
-    dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('initialData'), types.jsxExpressionContainer(types.conditionalExpression(types.unaryExpression('!', types.identifier(vars.debouncedSearchQueryVar), true), types.optionalMemberExpression(types.identifier('props'), types.identifier(vars.propsPrefix), false, true), types.identifier('undefined')))));
-    // Add key
+    // Add initialData. See paginated+search updater for why we skip prefetch
+    // reuse when a dynamic state-bound sort is active.
+    if (!usage.dynamicSort) {
+        dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('initialData'), types.jsxExpressionContainer(types.conditionalExpression(wrapInitialDataWithUrlFilterGuard(types.unaryExpression('!', types.identifier(vars.debouncedSearchQueryVar), true), usage), types.optionalMemberExpression(types.identifier('props'), types.identifier(vars.propsPrefix), false, true), types.identifier('undefined')))));
+    }
+    // Add key — sort is intentionally NOT included; see paginated+search updater.
     dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('key'), types.jsxExpressionContainer(types.templateLiteral([
         types.templateElement({ raw: 'search-', cooked: 'search-' }),
         types.templateElement({ raw: '', cooked: '' }),
@@ -1003,9 +1261,8 @@ function updateDataProviderForPlain(dp, fileName, usage) {
     }
     // Build useMemo dependencies including filter state IDs
     var memoDeps = [];
-    usage.filterStateIds.forEach(function (stateId) {
-        memoDeps.push(types.identifier(stateId));
-    });
+    (0, filter_utils_1.pushStateIdsAsDeps)(memoDeps, new Set(), usage.filterStateIds);
+    pushUrlSearchParamMemoDeps(memoDeps, usage);
     // Wrap params in useMemo with filter state dependencies
     var memoizedParams = types.callExpression(types.identifier('useMemo'), [
         types.arrowFunctionExpression([], paramsExpression),
@@ -1225,7 +1482,7 @@ function ensureAPIRouteExists(extractedResources, usage, dataSources) {
         };
     }
 }
-function updateGetStaticProps(chunks, registry, dependencies) {
+function updateGetStaticProps(chunks, registry, dependencies, folderPath) {
     var _a;
     var getStaticPropsChunk = chunks.find(function (c) { return c.name === 'getStaticProps'; });
     if (!getStaticPropsChunk || getStaticPropsChunk.type !== teleport_types_1.ChunkType.AST) {
@@ -1335,9 +1592,11 @@ function updateGetStaticProps(chunks, registry, dependencies) {
             ]));
             // Add import dependency for the fetcher
             if (!dependencies[fetcherImportName]) {
+                var depth = (folderPath ? folderPath.length : 0) + 1;
+                var relativePrefix = '../'.repeat(depth);
                 dependencies[fetcherImportName] = {
                     type: 'local',
-                    path: "../utils/data-sources/".concat(fileName),
+                    path: "".concat(relativePrefix, "utils/data-sources/").concat(fileName),
                 };
             }
             // Add to props
@@ -1448,9 +1707,11 @@ function updateGetStaticProps(chunks, registry, dependencies) {
                 }
                 // Add import dependency for the fetcher
                 if (!dependencies[fetcherImportName]) {
+                    var depth = (folderPath ? folderPath.length : 0) + 1;
+                    var relativePrefix = '../'.repeat(depth);
                     dependencies[fetcherImportName] = {
                         type: 'local',
-                        path: "../utils/data-sources/".concat(fileName),
+                        path: "".concat(relativePrefix, "utils/data-sources/").concat(fileName),
                     };
                 }
             }