@teleporthq/teleport-plugin-next-data-source 0.43.75 → 0.44.1

package/dist/esm/pagination-plugin.js

@@ -47,22 +47,24 @@ import { ChunkType, FileType, } from '@teleporthq/teleport-types';
 import * as types from '@babel/types';
 import { parseExpression } from '@babel/parser';
 import { ASTStatementOrder, GenericUtils, StringUtils } from '@teleporthq/teleport-shared';
-import { ASTUtils, URLQueryWriter, URLSearchParamSync } from '@teleporthq/teleport-plugin-common';
+import { ASTUtils, RouteUtils, URLQueryWriter, URLSearchParamSync, } from '@teleporthq/teleport-plugin-common';
 import { collectFilterLeafConditions, generateSafeFileName, pruneFilterTree } from './utils';
 import { generateDataSourceFetcherWithCore } from './data-source-fetchers';
 import { buildProductTransformOptions } from './transformations';
-import { appendSortsParam, extractDynamicSort, readFixedSort } from './sort-utils';
+import { appendSortsParam, buildSortAtStartGuard, buildStartingSortsValue, readRepeaterSort, } from './sort-utils';
 import { appendFiltersParam, buildStaticFiltersStringifyCall, pushStateIdsAsDeps, pushPropIdsAsDeps, } from './filter-utils';
 import { appendItemsPathParam, extractItemsPath } from './items-path';
 import { resolveRepeaterPerPage } from './repeater-page-size';
 import { applyLoadingStateToDataProvider, buildLoadingStateDeclarations, getLoadingStateVars, } from './loading-state';
 import { mergeServerCacheOptions, resolveCacheFromRepeaterContent } from './cache/config';
-import { buildCacheHydrationEffect, buildCacheStoreThen, buildCachedFetchBody, buildCachedParamsDeclarations, registerCacheClientImports, } from './cache/ast';
-import { convertControlToButton, dropInactivePaginationControls, findPaginationControl, setJSXExpressionAttribute, } from './pagination-controls';
+import { buildCacheHydrationEffect, buildCacheStoreThen, buildCachedFetchBody, buildCachedParamsDeclarations, paramsVarFor, registerCacheClientImports, } from './cache/ast';
+import { convertControlToButton, dropInactivePaginationControls, findAllPaginationControls, findPaginationControl, PAGINATION_FOR_ATTR, readJSXAttributeString, setJSXExpressionAttribute, } from './pagination-controls';
+import { findRangeControls, wireRangeControl } from './range-control';
+import { findAllSearchInputsInJSX, pairSearchInputs, wireSearchInput } from './search-input';
 import { buildCountFetchEffect, buildCountSeqDeclaration } from './count-effect';
 import { findAllSearchClearButtonsInJSX, findSiblingSearchInput, wireSearchClearButton, } from './search-clear';
 import { buildPageTokensDeclaration, wireNumberedPagination, } from './numbered-pagination';
-import { buildAccumulatingResponseHandler, buildInfiniteScrollDeclarations, buildSentinelElement, buildSentinelObserverEffect, getInfiniteScrollVars, } from './infinite-scroll';
+import { buildAccumulatingRequestMark, buildAccumulatingResponseHandler, buildAppendingRequestCheck, buildFirstPageDeclaration, buildFirstPageSeedEffect, buildInfiniteScrollDeclarations, buildSentinelElement, buildSentinelObserverEffect, buildServerRowsExpression, getInfiniteScrollVars, } from './infinite-scroll';
 import { buildFilterSortPageResetEffect, buildPageResetRefDeclaration, hasNoPageResetDeps, } from './page-reset';
 import { buildPageUrlRefDeclaration, buildPageUrlSyncEffect } from './page-url-sync';
 import { isLocalizedProject } from './content-localization';
@@ -273,7 +275,7 @@ function buildFilterDestinationExpression(destination) {
     return ASTUtils.convertFilterDestinationToExpression(destination);
 }
 // Scan UIDL to find all data source usages and build a registry
-function buildStateRegistry(uidlNode) {
+function buildStateRegistry(uidlNode, stateDefinitions) {
     var usages = [];
     var byDataSourceId = new Map();
     var byArrayMapperRenderProp = new Map();
@@ -330,16 +332,19 @@ function buildStateRegistry(uidlNode) {
                 // is skipped for a dynamic sort) — the pre-rendered HTML carried no
                 // posts, and the browser fetched page 1 a second time. Only a sort
                 // bound to state (the admin panel's sortable columns) is dynamic.
-                var dynamicSort = void 0;
-                if ((!sorts || sorts.length === 0) && content.sort) {
-                    var fixedSort = readFixedSort(content.sort, content.sortDirection);
-                    if (fixedSort) {
-                        sorts = [fixedSort];
-                    }
-                    else {
-                        dynamicSort = extractDynamicSort(content.sort, content.sortDirection);
-                    }
+                //
+                // A sort the visitor picks still starts somewhere — the store's sort
+                // dropdown at "Name A-Z". Known at build time, it orders the
+                // server-side first page, which the list then shows while the visitor
+                // leaves the sort alone. Read as a plain list's page fetch reads it.
+                var repeaterSort = !sorts || sorts.length === 0
+                    ? readRepeaterSort(content.sort, content.sortDirection, stateDefinitions)
+                    : {};
+                if (repeaterSort.fixed) {
+                    sorts = [repeaterSort.fixed];
                 }
+                var dynamicSort = repeaterSort.dynamic;
+                var startingSort = repeaterSort.starting;
                 // Extract filters from parent's resource params, keeping the group tree
                 // the inspector authored (see `readFilterTree`).
                 var filters = [];
@@ -407,6 +412,7 @@ function buildStateRegistry(uidlNode) {
                     index: index++,
                     dataSourceIdentifier: parentDataSource.identifier,
                     arrayMapperRenderProp: arrayMapperRenderProp,
+                    nodeId: typeof content.nodeId === 'string' ? content.nodeId : undefined,
                     resourceDefinition: {
                         dataSourceId: parentDataSource.resourceDef.dataSourceId || '',
                         tableName: parentDataSource.resourceDef.tableName || '',
@@ -421,6 +427,7 @@ function buildStateRegistry(uidlNode) {
                     queryColumns: queryColumns,
                     sorts: sorts,
                     dynamicSort: dynamicSort,
+                    startingSort: startingSort,
                     filters: filters,
                     filterStateIds: filterStateIds,
                     filterPropIds: filterPropIds,
@@ -502,6 +509,8 @@ function getStateVarsForUsage(usage) {
         setPageStateVar: "setDs_".concat(idx, "_page"),
         maxPagesStateVar: "ds_".concat(idx, "_maxPages"),
         setMaxPagesStateVar: "setDs_".concat(idx, "_maxPages"),
+        totalStateVar: "ds_".concat(idx, "_total"),
+        setTotalStateVar: "setDs_".concat(idx, "_total"),
         searchQueryVar: "ds_".concat(idx, "_searchQuery"),
         setSearchQueryVar: "setDs_".concat(idx, "_searchQuery"),
         debouncedSearchQueryVar: "ds_".concat(idx, "_debouncedQuery"),
@@ -579,19 +588,27 @@ function pushSearchUrlSyncEffects(effectStatements, usage, vars) {
     effectStatements.push(URLSearchParamSync.buildUrlWriteBackEffect(usage.searchUrlParamKey, buildDebouncedValueExpr(), buildDebouncedValueExpr(), undefined, adoptedRefVar));
     // read-back: `?<searchUrlParamKey>=` → the input AND the applied query at once
     // (`ds_N_adoptUrlSearch`), so an address is not a typed change: it skips the
-    // debounce and keeps the page — `?searchKeyword=x&page=3` lands on page 3.
+    // debounce and keeps a page the address carries — `?searchKeyword=x&page=3`
+    // lands on page 3.
     effectStatements.push(URLSearchParamSync.buildUrlReadBackEffect(usage.searchUrlParamKey, adopterVar, undefined, adoptedRefVar));
 }
 // `const ds_N_adoptUrlSearch = (update) => { … }`: the setter the search's URL
 // read-back calls with its `(prev) => next` updater. It moves the input and the
-// applied (debounced) query together; the combined paginated state keeps its
-// page, which a typed change resets to 1 in the debounce effect.
+// applied (debounced) query together. A list whose page is in the address
+// keeps its page — the page sync sets it from the same address. Any other
+// list starts the new query on page 1, as a typed change does in the debounce
+// effect: an appending list has usually advanced past page 1 by the time the
+// router is ready, and the query's first answer would otherwise be its page 2
+// — empty for a query only a few rows match.
 function buildUrlSearchAdopter(adopterVar, usage, vars) {
     var update = types.identifier('update');
+    var pageReset = usageHasPageUrlSync(usage)
+        ? []
+        : [types.objectProperty(types.identifier('page'), types.numericLiteral(1))];
     var applyToDebounced = usage.category === 'paginated+search'
         ? // setDs_N_state((state) => {
             //   const next = update(state.debouncedQuery)
-            //   return next === state.debouncedQuery ? state : { ...state, debouncedQuery: next }
+            //   return next === state.debouncedQuery ? state : { ...state, page: 1, debouncedQuery: next }
             // })
             types.callExpression(types.identifier(vars.setCombinedStateVar), [
                 types.arrowFunctionExpression([types.identifier('state')], types.blockStatement([
@@ -600,10 +617,11 @@ function buildUrlSearchAdopter(adopterVar, usage, vars) {
                             types.memberExpression(types.identifier('state'), types.identifier('debouncedQuery')),
                         ])),
                     ]),
-                    types.returnStatement(types.conditionalExpression(types.binaryExpression('===', types.identifier('next'), types.memberExpression(types.identifier('state'), types.identifier('debouncedQuery'))), types.identifier('state'), types.objectExpression([
-                        types.spreadElement(types.identifier('state')),
+                    types.returnStatement(types.conditionalExpression(types.binaryExpression('===', types.identifier('next'), types.memberExpression(types.identifier('state'), types.identifier('debouncedQuery'))), types.identifier('state'), types.objectExpression(__spreadArray(__spreadArray([
+                        types.spreadElement(types.identifier('state'))
+                    ], pageReset, true), [
                         types.objectProperty(types.identifier('debouncedQuery'), types.identifier('next')),
-                    ]))),
+                    ], false)))),
                 ])),
             ])
         : types.callExpression(types.identifier(vars.setDebouncedSearchQueryVar), [update]);
@@ -766,7 +784,7 @@ function pushFilterSortPageResetEffect(stateDeclarations, effectStatements, usag
 // ==================== MAIN PLUGIN ====================
 export 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, localized, stateDeclarations, effectStatements, needsUseRouter, returnIndex, insertIndex, dataProviders, dataProvidersWithRepeaters, usageIndexByDataSourceId, loadingStateDeclarations, usagesWithLoadingState, usageByProviderNode, cacheDeclarations, sharedOptions, cachedScopes, dataProvidersWithoutRepeaters, searchInputs, searchEnabledUsages, usageBySearchInput;
+        var uidl, chunks, dependencies, options, componentChunk, variableDeclaration, declarator, arrowFunction, blockStatement, rangeControls, hasRangeControl, registry, getStaticPropsChunk, isPage, localized, stateDeclarations, effectStatements, needsUseRouter, returnIndex, insertIndex, dataProviders, dataProvidersWithRepeaters, usageIndexByDataSourceId, loadingStateDeclarations, usagesWithLoadingState, usageByProviderNode, cacheDeclarations, firstPageDeclarations, sharedOptions, cachedScopes, dataProvidersWithoutRepeaters, searchInputs, usageBySearchInput, _i, searchInputs_1, input, usage;
         var _a, _b;
         return __generator(this, function (_c) {
             uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies, options = structure.options;
@@ -790,7 +808,9 @@ export var createNextArrayMapperPaginationPlugin = function () {
                 return [2 /*return*/, structure];
             }
             blockStatement = arrowFunction.body;
-            registry = buildStateRegistry(uidl.node);
+            rangeControls = findRangeControls(blockStatement);
+            hasRangeControl = rangeControls.length > 0;
+            registry = buildStateRegistry(uidl.node, uidl.stateDefinitions);
             if (registry.usages.length === 0) {
                 return [2 /*return*/, structure];
             }
@@ -958,11 +978,15 @@ export var createNextArrayMapperPaginationPlugin = function () {
                     pushPropIdsAsDeps(countEffectDeps, countEffectSeen, usage.filterPropIds);
                     // Same goes for URL-driven filters (already documented above).
                     pushUrlSearchParamMemoDeps(countEffectDeps, usage);
+                    if (hasRangeControl) {
+                        stateDeclarations.push(buildTotalDeclaration(vars));
+                    }
                     stateDeclarations.push(buildCountSeqDeclaration(vars.countSeqRefVar));
                     effectStatements.push(buildCountFetchEffect({
                         fileName: fileName,
                         perPage: usage.perPage,
                         setMaxPagesVar: vars.setMaxPagesStateVar,
+                        setTotalVar: hasRangeControl ? vars.setTotalStateVar : undefined,
                         urlParams: urlParams,
                         deps: countEffectDeps,
                         countSeqRefVar: vars.countSeqRefVar,
@@ -1004,7 +1028,9 @@ export var createNextArrayMapperPaginationPlugin = function () {
                     // "Next" button, but not to label a numbered strip or to know when an
                     // infinite list has reached its end, so those two modes fetch a live
                     // count as well.
-                    var needsLiveCount = !isPage || usage.paginationMode === 'numbered' || usage.infiniteScroll;
+                    // A range text needs the live count too: the build-time count only
+                    // ever became a page count, never the total it shows.
+                    var needsLiveCount = !isPage || usage.paginationMode === 'numbered' || usage.infiniteScroll || hasRangeControl;
                     if (needsLiveCount) {
                         var fileName = generateSafeFileName(usage.resourceDefinition.dataSourceType, usage.resourceDefinition.tableName, usage.resourceDefinition.dataSourceId);
                         // ⛔ This list has no search input, so no `query` param — but it may
@@ -1026,11 +1052,15 @@ export var createNextArrayMapperPaginationPlugin = function () {
                         pushStateIdsAsDeps(countDeps, countDepsSeen, usage.filterStateIds);
                         pushPropIdsAsDeps(countDeps, countDepsSeen, usage.filterPropIds);
                         pushUrlSearchParamMemoDeps(countDeps, usage);
+                        if (hasRangeControl) {
+                            stateDeclarations.push(buildTotalDeclaration(vars));
+                        }
                         stateDeclarations.push(buildCountSeqDeclaration(vars.countSeqRefVar));
                         effectStatements.push(buildCountFetchEffect({
                             fileName: fileName,
                             perPage: usage.perPage,
                             setMaxPagesVar: vars.setMaxPagesStateVar,
+                            setTotalVar: hasRangeControl ? vars.setTotalStateVar : undefined,
                             urlParams: countUrlParams,
                             deps: countDeps,
                             countSeqRefVar: vars.countSeqRefVar,
@@ -1115,6 +1145,7 @@ export var createNextArrayMapperPaginationPlugin = function () {
             usagesWithLoadingState = new Set();
             usageByProviderNode = new Map();
             cacheDeclarations = [];
+            firstPageDeclarations = isPage ? [] : undefined;
             dataProvidersWithRepeaters.forEach(function (dp) {
                 var _a, _b;
                 var nameAttr = dp.openingElement.attributes.find(function (attr) { return attr.type === 'JSXAttribute' && attr.name.name === 'name'; });
@@ -1135,10 +1166,10 @@ export var createNextArrayMapperPaginationPlugin = function () {
                 var fileName = generateSafeFileName(usage.resourceDefinition.dataSourceType, usage.resourceDefinition.tableName, usage.resourceDefinition.dataSourceId);
                 // Update DataProvider based on category
                 if (usage.category === 'paginated+search') {
-                    updateDataProviderForPaginatedSearch(dp, usage, vars, fileName, cacheDeclarations, localized);
+                    updateDataProviderForPaginatedSearch(dp, usage, vars, fileName, cacheDeclarations, localized, firstPageDeclarations);
                 }
                 else if (usage.category === 'paginated-only') {
-                    updateDataProviderForPaginationOnly(dp, usage, vars, fileName, cacheDeclarations, localized);
+                    updateDataProviderForPaginationOnly(dp, usage, vars, fileName, cacheDeclarations, localized, firstPageDeclarations);
                 }
                 else if (usage.category === 'search-only') {
                     updateDataProviderForSearchOnly(dp, usage, vars, fileName, cacheDeclarations, localized);
@@ -1150,9 +1181,14 @@ export var createNextArrayMapperPaginationPlugin = function () {
                 // change refetches, instead of leaving the previous rows on screen with
                 // no feedback. Runs last so it sees the `fetchData` and
                 // `persistDataDuringLoading` attributes the updaters above just wrote.
+                // An appending list keeps its rows on screen while its next page loads;
+                // only a list loading afresh falls through to the loading slot.
                 var loadingVars = getLoadingStateVars(usage.index);
-                if (applyLoadingStateToDataProvider(dp, loadingVars)) {
-                    loadingStateDeclarations.push.apply(loadingStateDeclarations, buildLoadingStateDeclarations(loadingVars));
+                var appendingRequest = usage.infiniteScroll && usage.paginated
+                    ? buildAppendingRequestCheck(getInfiniteScrollVars(usage.index))
+                    : undefined;
+                if (applyLoadingStateToDataProvider(dp, loadingVars, appendingRequest)) {
+                    loadingStateDeclarations.push.apply(loadingStateDeclarations, buildLoadingStateDeclarations(loadingVars, !!appendingRequest));
                     // Recorded because the loading state is only declared for a provider
                     // that HAS a loading slot; a Load More button wired later may only
                     // reference `ds_N_isFetching` if it actually exists.
@@ -1161,7 +1197,9 @@ export var createNextArrayMapperPaginationPlugin = function () {
                 // An auto-loading list needs something at the end of the rows for its
                 // IntersectionObserver to watch.
                 if (usage.infiniteScroll && usage.paginated && !usage.infiniteScrollLoadMore) {
-                    insertSentinelAfterProvider(blockStatement, dp, buildSentinelElement(getInfiniteScrollVars(usage.index)));
+                    insertSentinelAfterProvider(blockStatement, dp, function (parentTag) {
+                        return buildSentinelElement(getInfiniteScrollVars(usage.index), parentTag);
+                    });
                 }
                 // Create API route for all categories (including 'plain' for components)
                 ensureAPIRouteExists(options.extractedResources, usage, options.dataSources, buildProductTransformOptions(options));
@@ -1195,6 +1233,11 @@ export var createNextArrayMapperPaginationPlugin = function () {
                 ASTStatementOrder.insertStatementsAfterDependencies(blockStatement, cacheDeclarations);
                 registerCacheClientImports(dependencies, (_a = uidl.outputOptions) === null || _a === void 0 ? void 0 : _a.folderPath);
             }
+            // After the cache declarations: a cached list's first page reads the
+            // `ds_N_params` they hoisted.
+            if (firstPageDeclarations === null || firstPageDeclarations === void 0 ? void 0 : firstPageDeclarations.length) {
+                ASTStatementOrder.insertStatementsAfterDependencies(blockStatement, firstPageDeclarations);
+            }
             dataProvidersWithoutRepeaters = dataProviders.filter(function (dp) {
                 var hasRepeater = findArrayMapperRenderPropInDataProvider(dp) !== undefined;
                 return !hasRepeater;
@@ -1203,17 +1246,14 @@ export var createNextArrayMapperPaginationPlugin = function () {
                 stabilizeDataProviderWithoutRepeater(dp);
             });
             searchInputs = findAllSearchInputsInJSX(blockStatement);
-            searchEnabledUsages = registry.usages.filter(function (u) { return u.searchEnabled; });
-            usageBySearchInput = new Map();
-            searchInputs.forEach(function (input, idx) {
-                if (idx >= searchEnabledUsages.length) {
-                    return;
+            usageBySearchInput = pairSearchInputs(searchInputs, registry.usages);
+            for (_i = 0, searchInputs_1 = searchInputs; _i < searchInputs_1.length; _i++) {
+                input = searchInputs_1[_i];
+                usage = usageBySearchInput.get(input.node);
+                if (usage) {
+                    wireSearchInput(input, getStateVarsForUsage(usage));
                 }
-                var usage = searchEnabledUsages[idx];
-                var vars = getStateVarsForUsage(usage);
-                wireSearchInput(input.node, vars);
-                usageBySearchInput.set(input.node, usage);
-            });
+            }
             // STEP 4.5: Wire the clear buttons, each to the input it shares a parent with.
             findAllSearchClearButtonsInJSX(blockStatement).forEach(function (button) {
                 var input = findSiblingSearchInput(button, searchInputs.map(function (entry) { return entry.node; }));
@@ -1240,9 +1280,29 @@ export var createNextArrayMapperPaginationPlugin = function () {
                 }
                 wirePaginationWidget(node, usage, getStateVarsForUsage(usage), usagesWithLoadingState.has(usage.index));
             });
-            // STEP 6: Update getStaticProps if this is a page
+            // STEP 5b: Wire the range texts that name their mapper.
+            //
+            // A `range` control carrying `data-tq-pagination-for` belongs to the mapper
+            // whose editor node id it names, wherever it sits — a template's footer or
+            // toolbar is laid out by the author, not inside a pagination container, so
+            // the container-ownership rule above cannot reach it. One without the
+            // attribute was wired by its container in STEP 5; one naming a mapper this
+            // component does not render stays as drawn.
+            rangeControls.forEach(function (control) {
+                var ownerNodeId = readJSXAttributeString(control, PAGINATION_FOR_ATTR);
+                if (!ownerNodeId) {
+                    return;
+                }
+                var owner = registry.usages.find(function (usage) { return usage.nodeId === ownerNodeId; });
+                if (owner) {
+                    wireRangeControlFor(control, owner, getStateVarsForUsage(owner));
+                }
+            });
+            // STEP 6: Update getStaticProps if this is a page. Its rows are what the
+            // page renders, so they are read as a visitor is served them — unless only
+            // the store's trusted readers can open the page (`pageDataReadArguments`).
             if (isPage) {
-                updateGetStaticProps(chunks, registry, dependencies, (_b = uidl.outputOptions) === null || _b === void 0 ? void 0 : _b.folderPath, localized);
+                updateGetStaticProps(chunks, registry, dependencies, (_b = uidl.outputOptions) === null || _b === void 0 ? void 0 : _b.folderPath, localized, function () { return RouteUtils.pageDataReadArguments(uidl, options.auth); });
             }
             return [2 /*return*/, structure];
         });
@@ -1257,39 +1317,59 @@ export var createNextArrayMapperPaginationPlugin = function () {
  * It has to be a sibling: the provider's own child is a render-prop function,
  * and anything placed inside it would be re-created on every fetch — the
  * observer would then be watching an element that is no longer in the document.
+ * The sentinel is built for the element it lands in (`buildSentinelElement`):
+ * a fragment is transparent, a component's children may go anywhere.
  *
  * Returns false when the provider has no element parent to splice into (a
  * provider returned directly from the component), leaving the list on its
  * count-driven `hasMore` rather than injecting a stray node.
  */
-function insertSentinelAfterProvider(blockStatement, provider, sentinel) {
+function insertSentinelAfterProvider(blockStatement, provider, buildSentinel) {
     var inserted = false;
-    var traverse = function (node) {
+    var elementTagOf = function (node, enclosing) {
+        var _a;
+        if ((node === null || node === void 0 ? void 0 : node.type) === 'JSXFragment') {
+            return enclosing;
+        }
+        if ((node === null || node === void 0 ? void 0 : node.type) !== 'JSXElement') {
+            return enclosing;
+        }
+        var name = (_a = node.openingElement) === null || _a === void 0 ? void 0 : _a.name;
+        if ((name === null || name === void 0 ? void 0 : name.type) !== 'JSXIdentifier') {
+            return null;
+        }
+        if (name.name === 'Fragment') {
+            return enclosing;
+        }
+        return /^[a-z]/.test(name.name) ? name.name : null;
+    };
+    var traverse = function (node, enclosing) {
         if (!node || inserted) {
             return;
         }
+        var tag = elementTagOf(node, enclosing);
         if (Array.isArray(node.children)) {
             var at = node.children.indexOf(provider);
             if (at !== -1) {
-                node.children.splice(at + 1, 0, sentinel);
+                node.children.splice(at + 1, 0, buildSentinel(tag));
                 inserted = true;
                 return;
             }
-            node.children.forEach(traverse);
+            node.children.forEach(function (child) { return traverse(child, tag); });
         }
         if (node.body) {
             if (Array.isArray(node.body)) {
-                node.body.forEach(traverse);
+                node.body.forEach(function (child) { return traverse(child, tag); });
             }
             else {
-                traverse(node.body);
+                traverse(node.body, tag);
             }
         }
         if (node.consequent) {
-            traverse(node.consequent);
+            traverse(node.consequent, tag);
         }
         if (node.alternate) {
-            traverse(node.alternate);
+            traverse(node.alternate, tag);
         }
         // `{activeTabIndex === 0 && (<div>…<DataProvider/>…</div>)}` — a tab
         // panel, a gated section: the provider sits on the RIGHT of a logical
@@ -1297,22 +1377,22 @@ function insertSentinelAfterProvider(blockStatement, provider, sentinel) {
         // an argument. Left unvisited, the products list under the first tab of
         // a shop was never paginated or seeded, and rendered nothing.
         if (node.left) {
-            traverse(node.left);
+            traverse(node.left, tag);
         }
         if (node.right) {
-            traverse(node.right);
+            traverse(node.right, tag);
         }
         if (node.test) {
-            traverse(node.test);
+            traverse(node.test, tag);
         }
         if (node.expression) {
-            traverse(node.expression);
+            traverse(node.expression, tag);
         }
         if (node.argument) {
-            traverse(node.argument);
+            traverse(node.argument, tag);
         }
     };
-    traverse(blockStatement);
+    traverse(blockStatement, null);
     return inserted;
 }
 function findAllDataProvidersInJSX(blockStatement) {
@@ -1407,61 +1487,6 @@ function findArrayMapperRenderPropInDataProvider(dataProvider) {
     }
     return renderItemAttr.value.expression.params[0].name;
 }
-function findAllSearchInputsInJSX(blockStatement) {
-    var results = [];
-    var traverse = function (node) {
-        var _a, _b, _c, _d, _e, _f;
-        if (!node) {
-            return;
-        }
-        if (node.type === 'JSXElement' && ((_b = (_a = node.openingElement) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b.name) === 'input') {
-            var classAttr = (_c = node.openingElement.attributes) === null || _c === void 0 ? void 0 : _c.find(function (attr) { return attr.type === 'JSXAttribute' && attr.name.name === 'className'; });
-            var className = ((_d = classAttr === null || classAttr === void 0 ? void 0 : classAttr.value) === null || _d === void 0 ? void 0 : _d.value) || ((_f = (_e = classAttr === null || classAttr === void 0 ? void 0 : classAttr.value) === null || _e === void 0 ? void 0 : _e.expression) === null || _f === void 0 ? void 0 : _f.value) || '';
-            if (className.includes('search-input')) {
-                results.push({ node: node, className: className });
-            }
-        }
-        if (node.children && Array.isArray(node.children)) {
-            node.children.forEach(function (c) { return traverse(c); });
-        }
-        if (node.body) {
-            if (Array.isArray(node.body)) {
-                node.body.forEach(function (s) { return traverse(s); });
-            }
-            else {
-                traverse(node.body);
-            }
-        }
-        if (node.consequent) {
-            traverse(node.consequent);
-        }
-        if (node.alternate) {
-            traverse(node.alternate);
-        }
-        // `{activeTabIndex === 0 && (<div>…<DataProvider/>…</div>)}` — a tab
-        // panel, a gated section: the provider sits on the RIGHT of a logical
-        // expression (or in a ternary's `test`), which is not a child, a body or
-        // an argument. Left unvisited, the products list under the first tab of
-        // a shop was never paginated or seeded, and rendered nothing.
-        if (node.left) {
-            traverse(node.left);
-        }
-        if (node.right) {
-            traverse(node.right);
-        }
-        if (node.test) {
-            traverse(node.test);
-        }
-        if (node.expression) {
-            traverse(node.expression);
-        }
-        if (node.argument) {
-            traverse(node.argument);
-        }
-    };
-    traverse(blockStatement);
-    return results;
-}
 /**
  * Every pagination widget in the JSX, paired with the mapper it belongs to.
  *
@@ -1536,34 +1561,97 @@ function findPaginationNodesWithOwners(blockStatement, usageByProviderNode) {
  *
  * An uncached mapper keeps the inline `params={useMemo(...)}` it has always had,
  * byte for byte. A cached one hoists that memo into a component const so the
- * peek can depend on the same object identity instead of rebuilding it.
+ * peek can depend on the same object identity instead of rebuilding it; so does
+ * an appending list that starts from its page's rows (`hoistInto`), whose first
+ * page is filed in the accumulator under those params.
  *
- * Returns the identifier holding the peeked rows, or `undefined` when this
- * mapper does not cache.
+ * Returns the identifier holding the params when they were hoisted, and the one
+ * holding the peeked rows when this mapper caches.
  */
 function pushParamsAttribute(
 // tslint:disable-next-line:no-any
-dp, usage, paramsProps, memoDeps, cacheDeclarations) {
+dp, usage, paramsProps, memoDeps, cacheDeclarations, hoistInto) {
     var _a;
     var paramsMemo = types.callExpression(types.identifier('useMemo'), [
         types.arrowFunctionExpression([], types.objectExpression(paramsProps)),
         types.arrayExpression(memoDeps),
     ]);
-    // A state-bound sort deliberately suppresses `initialData` (see the comment at
-    // the call site): the prefetch ran without sort params, so reusing anything on
-    // mount would mask the current sort. The cache peek is `initialData` by
-    // another name, so it has to be suppressed for exactly the same reason.
+    // A state-bound sort gets no cache peek. The peek is `initialData` by another
+    // name, and such a list takes the server's rows only while its sort is still
+    // where the visitor starts (`buildStartingSortGuard`); the peek was never
+    // extended to it.
     var cache = ((_a = usage.cache) === null || _a === void 0 ? void 0 : _a.client) && !usage.dynamicSort ? usage.cache : undefined;
     if (!cache) {
-        dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('params'), types.jsxExpressionContainer(paramsMemo)));
-        return undefined;
+        if (!hoistInto) {
+            dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('params'), types.jsxExpressionContainer(paramsMemo)));
+            return {};
+        }
+        var paramsIdentifier = paramsVarFor(usage.index);
+        hoistInto.push(types.variableDeclaration('const', [
+            types.variableDeclarator(types.identifier(paramsIdentifier), paramsMemo),
+        ]));
+        dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('params'), types.jsxExpressionContainer(types.identifier(paramsIdentifier))));
+        return { paramsIdentifier: paramsIdentifier };
     }
     var hoisted = buildCachedParamsDeclarations({ index: usage.index, paramsMemo: paramsMemo, cache: cache });
     cacheDeclarations.push.apply(cacheDeclarations, hoisted.declarations);
     dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('params'), types.jsxExpressionContainer(types.identifier(hoisted.paramsIdentifier))));
-    return hoisted.cachedIdentifier;
+    return { paramsIdentifier: hoisted.paramsIdentifier, cachedIdentifier: hoisted.cachedIdentifier };
+}
+// Whether the rows `getStaticProps` fetched can be this list's first page at
+// all. A sort bound to state can only be served them when the build knows the
+// sort the visitor starts with (`startingSort`) and fetched by it; otherwise
+// the fetch has no sort, and its rows are not the list's first page.
+function prefetchFollowsSort(usage) {
+    return !usage.dynamicSort || !!usage.startingSort;
+}
+// `sortBy === "name-asc"`: the visitor has not moved the sort from where it
+// starts, so the build-time rows are still its first page. `null` for a list
+// whose sort the visitor cannot pick, or one that reads no state.
+function buildStartingSortGuard(usage) {
+    return usage.dynamicSort && usage.startingSort ? buildSortAtStartGuard(usage.startingSort) : null;
+}
+// `<condition> && <starting-sort guard>`, or the condition alone.
+function withStartingSortGuard(condition, usage) {
+    var sortGuard = buildStartingSortGuard(usage);
+    return sortGuard ? types.logicalExpression('&&', condition, sortGuard) : condition;
+}
+// An appending list on a page starts from the rows its `getStaticProps`
+// fetched, when they can be its first page (`prefetchFollowsSort`).
+function startsFromServerRows(usage) {
+    return usage.infiniteScroll && usage.paginated && prefetchFollowsSort(usage);
+}
+/**
+ * `initialData={ds_N_firstPage}` on an appending list, beside the frozen first
+ * page and the effect that files it as page 1 of the accumulator (see
+ * `infinite-scroll.ts`).
+ *
+ * The rows stand in for page 1 only while they answer the list's query: no
+ * search (`queryGuard`), the sort where the visitor starts, no filter set (the
+ * guards the paged lists use), and at least one row — an empty build-time
+ * answer, which a failed fetch also gives, leaves the browser to fetch page 1
+ * as before.
+ */
+function pushInfiniteScrollFirstPage(
+// tslint:disable-next-line:no-any
+dp, usage, vars, paramsIdentifier, declarations, queryGuard, instanceDeps) {
+    var infiniteVars = getInfiniteScrollVars(usage.index);
+    var serverPayload = function () {
+        return types.optionalMemberExpression(types.identifier('props'), types.identifier(vars.propsPrefix), false, true);
+    };
+    var hasServerRows = types.binaryExpression('>', types.optionalMemberExpression(buildServerRowsExpression(serverPayload(), usage.itemsPath), types.identifier('length'), false, true), types.numericLiteral(0));
+    var startsFromServer = [
+        queryGuard,
+        buildStartingSortGuard(usage),
+        buildNoUrlFilterGuard(usage),
+        hasServerRows,
+    ]
+        .filter(function (guard) { return guard !== null; })
+        .reduce(function (all, guard) { return types.logicalExpression('&&', all, guard); });
+    declarations.push(buildFirstPageDeclaration(infiniteVars, startsFromServer, serverPayload(), instanceDeps), buildFirstPageSeedEffect(infiniteVars, paramsIdentifier, usage.perPage, usage.itemsPath));
+    dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('initialData'), types.jsxExpressionContainer(types.identifier(infiniteVars.firstPageVar))));
 }
-function updateDataProviderForPaginatedSearch(dp, usage, vars, fileName, cacheDeclarations, localized) {
+function updateDataProviderForPaginatedSearch(dp, usage, vars, fileName, cacheDeclarations, localized, firstPageDeclarations) {
     var attrs = dp.openingElement.attributes;
     // Remove existing params, key, initialData, fetchData, persistDataDuringLoading
     dp.openingElement.attributes = attrs.filter(function (attr) {
@@ -1596,20 +1684,29 @@ function updateDataProviderForPaginatedSearch(dp, usage, vars, fileName, cacheDe
     if (localized) {
         appendClientLocaleParam(paramsProps, memoDeps);
     }
-    var cachedInitialData = pushParamsAttribute(dp, usage, paramsProps, memoDeps, cacheDeclarations);
-    // 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.
+    var seedInto = startsFromServerRows(usage) ? firstPageDeclarations : undefined;
+    var _a = pushParamsAttribute(dp, usage, paramsProps, memoDeps, cacheDeclarations, seedInto), paramsIdentifier = _a.paramsIdentifier, cachedInitialData = _a.cachedIdentifier;
+    // Add initialData: the server-prefetched page 1 while it is the page on show
+    // — page 1, no search, no filter set, and a sort the visitor picks still where
+    // they start (the prefetch ran by that sort). A list whose starting sort the
+    // build cannot know never takes it: that prefetch ran without a sort, so
+    // reusing it would mask the current sort AND make DataProvider skip its first
+    // client fetch (its internal guard only skips when initialData is defined on
+    // mount). Any other sort is fetched fresh, through the useMemo params.
     //
-    // An appending list skips it for a second reason: `initialData` makes
-    // DataProvider skip its first fetch, so page 1 would render from the prefetch
-    // and never enter the accumulator — appending page 2 would then REPLACE the
-    // visible rows with page 2 alone.
-    if (!usage.dynamicSort && !usage.infiniteScroll) {
-        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);
+    // An appending list takes its own: `initialData` makes DataProvider skip its
+    // first fetch, so the prefetched page 1 has to be filed in the accumulator
+    // too, or appending page 2 would REPLACE the visible rows with page 2 alone.
+    // The provider remounts per query (its `key`), so the first page is frozen
+    // per query.
+    if (seedInto && paramsIdentifier) {
+        var appliedQuery = function () {
+            return types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('debouncedQuery'));
+        };
+        pushInfiniteScrollFirstPage(dp, usage, vars, paramsIdentifier, seedInto, types.unaryExpression('!', appliedQuery(), true), [appliedQuery()]);
+    }
+    else if (prefetchFollowsSort(usage) && !usage.infiniteScroll) {
+        var initialDataCondition = wrapInitialDataWithUrlFilterGuard(withStartingSortGuard(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), 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), cachedInitialData ? types.identifier(cachedInitialData) : types.identifier('undefined')))));
     }
     // Add key. Sort is intentionally NOT part of the key — a key change would
@@ -1647,7 +1744,7 @@ function updateDataProviderForPaginatedSearch(dp, usage, vars, fileName, cacheDe
     // Add persistDataDuringLoading
     dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('persistDataDuringLoading'), types.jsxExpressionContainer(types.booleanLiteral(true))));
 }
-function updateDataProviderForPaginationOnly(dp, usage, vars, fileName, cacheDeclarations, localized) {
+function updateDataProviderForPaginationOnly(dp, usage, vars, fileName, cacheDeclarations, localized, firstPageDeclarations) {
     var attrs = dp.openingElement.attributes;
     dp.openingElement.attributes = attrs.filter(function (attr) {
         var _a;
@@ -1676,12 +1773,17 @@ function updateDataProviderForPaginationOnly(dp, usage, vars, fileName, cacheDec
         appendClientLocaleParam(paramsProps, memoDeps);
     }
     // Add params
-    var cachedInitialData = pushParamsAttribute(dp, usage, paramsProps, memoDeps, cacheDeclarations);
-    // Add initialData. See paginated+search updater for why we skip prefetch
-    // reuse when a dynamic state-bound sort is active, and why an appending list
-    // skips it too.
-    if (!usage.dynamicSort && !usage.infiniteScroll) {
-        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), cachedInitialData ? types.identifier(cachedInitialData) : types.identifier('undefined')))));
+    var seedInto = startsFromServerRows(usage) ? firstPageDeclarations : undefined;
+    var _a = pushParamsAttribute(dp, usage, paramsProps, memoDeps, cacheDeclarations, seedInto), paramsIdentifier = _a.paramsIdentifier, cachedInitialData = _a.cachedIdentifier;
+    // Add initialData. See paginated+search updater for when a sort the visitor
+    // picks may reuse the prefetch, and how an appending list takes its own. This
+    // provider never remounts (no `key`), so its first page is frozen for the
+    // page's lifetime.
+    if (seedInto && paramsIdentifier) {
+        pushInfiniteScrollFirstPage(dp, usage, vars, paramsIdentifier, seedInto, null, []);
+    }
+    else if (prefetchFollowsSort(usage) && !usage.infiniteScroll) {
+        dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('initialData'), types.jsxExpressionContainer(types.conditionalExpression(wrapInitialDataWithUrlFilterGuard(withStartingSortGuard(types.binaryExpression('===', types.identifier(vars.pageStateVar), types.numericLiteral(1)), usage), usage), types.optionalMemberExpression(types.identifier('props'), types.identifier(vars.propsPrefix), false, true), cachedInitialData ? types.identifier(cachedInitialData) : types.identifier('undefined')))));
     }
     // Add key — sort is intentionally NOT included; see paginated+search updater,
     // which also explains why an appending list keys on nothing at all (there is
@@ -1731,11 +1833,11 @@ function updateDataProviderForSearchOnly(dp, usage, vars, fileName, cacheDeclara
     if (localized) {
         appendClientLocaleParam(paramsProps, memoDeps);
     }
-    var cachedInitialData = pushParamsAttribute(dp, usage, paramsProps, memoDeps, cacheDeclarations);
-    // 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), cachedInitialData ? types.identifier(cachedInitialData) : types.identifier('undefined')))));
+    var cachedInitialData = pushParamsAttribute(dp, usage, paramsProps, memoDeps, cacheDeclarations).cachedIdentifier;
+    // Add initialData. See paginated+search updater for when a sort the visitor
+    // picks may reuse the prefetch.
+    if (prefetchFollowsSort(usage)) {
+        dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('initialData'), types.jsxExpressionContainer(types.conditionalExpression(wrapInitialDataWithUrlFilterGuard(withStartingSortGuard(types.unaryExpression('!', types.identifier(vars.debouncedSearchQueryVar), true), usage), usage), types.optionalMemberExpression(types.identifier('props'), types.identifier(vars.propsPrefix), false, true), cachedInitialData ? types.identifier(cachedInitialData) : 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([
@@ -1746,14 +1848,42 @@ function updateDataProviderForSearchOnly(dp, usage, vars, fileName, cacheDeclara
     dp.openingElement.attributes.push(createFetchDataAttribute(fileName, ((_a = usage.cache) === null || _a === void 0 ? void 0 : _a.client) ? usage.cache : undefined));
     dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('persistDataDuringLoading'), types.jsxExpressionContainer(types.booleanLiteral(true))));
 }
+/**
+ * A plain list on a page is seeded with the rows its `getStaticProps` fetched
+ * (`extractDataSourceIntoGetStaticProps`), and a seeded provider skips its first
+ * fetch. With a sort the visitor picks, those rows are the list's only while the
+ * sort is where a visitor starts — the build fetched them by it:
+ *
+ *   initialData={sortBy === "name-asc" ? props.items_products : undefined}
+ *
+ * — and any other sort is fetched fresh, through the params it changes. When the
+ * build cannot know where the sort starts (`prefetchFollowsSort`), it fetched
+ * the rows unsorted, and the list is never seeded with them. A plain list has no
+ * search, and is only seeded without a filter a visitor sets.
+ */
+function seedPlainListWhileSortStarts(dp, usage) {
+    if (!usage.dynamicSort) {
+        return;
+    }
+    var attrs = dp.openingElement.attributes;
+    var index = attrs.findIndex(function (attr) { var _a; return attr.type === 'JSXAttribute' && ((_a = attr.name) === null || _a === void 0 ? void 0 : _a.name) === 'initialData'; });
+    if (index === -1) {
+        return;
+    }
+    if (!prefetchFollowsSort(usage)) {
+        attrs.splice(index, 1);
+        return;
+    }
+    var sortGuard = buildStartingSortGuard(usage);
+    var seeded = attrs[index].value;
+    if (!sortGuard || (seeded === null || seeded === void 0 ? void 0 : seeded.type) !== 'JSXExpressionContainer') {
+        return;
+    }
+    attrs[index] = types.jsxAttribute(types.jsxIdentifier('initialData'), types.jsxExpressionContainer(types.conditionalExpression(sortGuard, seeded.expression, types.identifier('undefined'))));
+}
 function updateDataProviderForPlain(dp, fileName, usage, localized) {
     var _a, _b, _c, _d, _e, _f;
-    // A sort bound to state is the visitor's, which the server cannot know: rows
-    // pre-rendered in the table's order would stand in for it, since a seeded
-    // provider skips its first fetch — the paginated lists drop them the same way.
-    if (usage.dynamicSort) {
-        dp.openingElement.attributes = dp.openingElement.attributes.filter(function (attr) { var _a; return !(attr.type === 'JSXAttribute' && ((_a = attr.name) === null || _a === void 0 ? void 0 : _a.name) === 'initialData'); });
-    }
+    seedPlainListWhileSortStarts(dp, usage);
     var attrs = dp.openingElement.attributes;
     var clientCache = ((_a = usage.cache) === null || _a === void 0 ? void 0 : _a.client) ? usage.cache : undefined;
     // Check if fetchData already exists
@@ -1906,21 +2036,18 @@ accumulate) {
             ? buildCacheStoreThen(cache)
             : uncachedTail;
     var networkChain = types.callExpression(types.memberExpression(parsedJson, types.identifier('then')), [responseTail]);
+    // An appending list records the request it now stands on before making it
+    // (see `buildAccumulatingRequestMark`).
     var arrow = cache
         ? types.arrowFunctionExpression([types.identifier('params')], buildCachedFetchBody(networkChain, cache))
-        : types.arrowFunctionExpression([types.identifier('params')], networkChain);
+        : accumulate
+            ? types.arrowFunctionExpression([types.identifier('params')], types.blockStatement([
+                buildAccumulatingRequestMark(getInfiniteScrollVars(accumulate.usage.index)),
+                types.returnStatement(networkChain),
+            ]))
+            : types.arrowFunctionExpression([types.identifier('params')], networkChain);
     return types.jsxAttribute(types.jsxIdentifier('fetchData'), types.jsxExpressionContainer(types.callExpression(types.identifier('useCallback'), [arrow, types.arrayExpression([])])));
 }
-function wireSearchInput(inputNode, vars) {
-    // Remove existing onChange and value
-    inputNode.openingElement.attributes = inputNode.openingElement.attributes.filter(function (attr) { var _a; return !['onChange', 'value'].includes((_a = attr.name) === null || _a === void 0 ? void 0 : _a.name); });
-    // Add onChange
-    inputNode.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('onChange'), types.jsxExpressionContainer(types.arrowFunctionExpression([types.identifier('e')], types.callExpression(types.identifier(vars.setSearchQueryVar), [
-        types.memberExpression(types.memberExpression(types.identifier('e'), types.identifier('target')), types.identifier('value')),
-    ])))));
-    // Add value
-    inputNode.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('value'), types.jsxExpressionContainer(types.identifier(vars.searchQueryVar))));
-}
 /**
  * The `fetchData` attribute for one paginated usage.
  *
@@ -1936,6 +2063,32 @@ function buildFetchDataForUsage(fileName, usage) {
     }
     return createFetchDataAttribute(fileName, ((_a = usage.cache) === null || _a === void 0 ? void 0 : _a.client) ? usage.cache : undefined);
 }
+/** `const [ds_N_total, setDs_N_total] = useState(null)` — declared only beside a range control. */
+function buildTotalDeclaration(vars) {
+    return types.variableDeclaration('const', [
+        types.variableDeclarator(types.arrayPattern([
+            types.identifier(vars.totalStateVar),
+            types.identifier(vars.setTotalStateVar),
+        ]), types.callExpression(types.identifier('useState'), [types.nullLiteral()])),
+    ]);
+}
+/**
+ * Fills one `range` text with the live row range of `usage` (see
+ * `range-control.ts`). A mapper that does not page has no count to show, so
+ * its range text is left as drawn.
+ */
+function wireRangeControlFor(control, usage, vars) {
+    if (!usage.paginated) {
+        return;
+    }
+    var currentPageExpr = getPageAccessors(usage, vars).currentPageExpr;
+    wireRangeControl(control, {
+        totalVar: vars.totalStateVar,
+        currentPageExpr: currentPageExpr(),
+        perPage: usage.perPage,
+        infiniteScroll: usage.infiniteScroll,
+    });
+}
 /**
  * Wires the authored Load More button of an appending list.
  *
@@ -1975,6 +2128,11 @@ function wireLoadMoreButton(paginationNode, usage, vars, hasLoadingState) {
  * buttons beside its Load More.
  */
 function wirePaginationWidget(paginationNode, usage, vars, hasLoadingState) {
+    // A range text inside the container takes the container's owner, like the
+    // buttons beside it; one naming its own mapper is wired in STEP 5b instead.
+    findAllPaginationControls(paginationNode, 'range')
+        .filter(function (control) { return !readJSXAttributeString(control, PAGINATION_FOR_ATTR); })
+        .forEach(function (control) { return wireRangeControlFor(control, usage, vars); });
     if (usage.infiniteScroll) {
         // Only the Load More button survives; page controls make no sense for a
         // list the visitor never leaves.
@@ -2179,7 +2337,15 @@ function ensureAPIRouteExists(extractedResources, usage, dataSources, transformO
         };
     }
 }
-function updateGetStaticProps(chunks, registry, dependencies, folderPath, localized) {
+// `fetchCount(<params>, <read arguments>)`: the params may be left out only
+// when nothing follows them.
+var countReadArguments = function (countParams, readArguments) {
+    return countParams.length > 0 || readArguments.length > 0
+        ? __spreadArray([types.objectExpression(countParams)], readArguments, true) : [];
+};
+function updateGetStaticProps(chunks, registry, dependencies, folderPath, localized, 
+// The arguments every read hands the module after its params (fresh nodes per call).
+readArguments) {
     var _a;
     var getStaticPropsChunk = chunks.find(function (c) { return c.name === 'getStaticProps'; });
     if (!getStaticPropsChunk || getStaticPropsChunk.type !== ChunkType.AST) {
@@ -2260,6 +2426,12 @@ function updateGetStaticProps(chunks, registry, dependencies, folderPath, locali
                 })),
             ])));
         }
+        else if (usage.dynamicSort && usage.startingSort) {
+            // A sort the visitor picks: page 1 by the sort they start with, sent
+            // as the very string the browser sends for it, so page 2 continues
+            // this page exactly (see `buildStartingSortsValue`).
+            fetchParams.push(types.objectProperty(types.identifier('sorts'), buildStartingSortsValue(usage.dynamicSort, usage.startingSort)));
+        }
         // Add filters if present
         // Filter out dynamic destinations for getStaticProps (they can't be resolved at build time)
         var staticFilters = staticFiltersOf(usage);
@@ -2275,7 +2447,7 @@ function updateGetStaticProps(chunks, registry, dependencies, folderPath, locali
         var existingFetchIndex = arrayPattern.elements.findIndex(function (el) { return (el === null || el === void 0 ? void 0 : el.type) === 'Identifier' && el.name === vars.propsPrefix; });
         if (existingFetchIndex === -1) {
             arrayPattern.elements.push(types.identifier(vars.propsPrefix));
-            fetchesArray.elements.push(types.callExpression(types.memberExpression(types.callExpression(types.memberExpression(types.identifier(fetcherImportName), types.identifier('fetchData')), [types.objectExpression(fetchParams)]), types.identifier('catch')), [
+            fetchesArray.elements.push(types.callExpression(types.memberExpression(types.callExpression(types.memberExpression(types.identifier(fetcherImportName), types.identifier('fetchData')), __spreadArray([types.objectExpression(fetchParams)], readArguments(), true)), types.identifier('catch')), [
                 types.arrowFunctionExpression([types.identifier('error')], types.blockStatement([
                     types.expressionStatement(types.callExpression(types.memberExpression(types.identifier('console'), types.identifier('error')), [
                         types.stringLiteral("Error fetching ".concat(vars.propsPrefix, ":")),
@@ -2378,7 +2550,7 @@ function updateGetStaticProps(chunks, registry, dependencies, folderPath, locali
                     countParams.push(types.objectProperty(types.identifier('filters'), buildStaticFiltersStringifyCall(staticFiltersForCount)));
                 }
                 appendItemsPathParam(countParams, firstUsage.itemsPath, 'collectionPath');
-                fetchesArray.elements.push(types.callExpression(types.memberExpression(types.callExpression(types.memberExpression(types.identifier(fetcherImportName), types.identifier('fetchCount')), countParams.length > 0 ? [types.objectExpression(countParams)] : []), types.identifier('catch')), [
+                fetchesArray.elements.push(types.callExpression(types.memberExpression(types.callExpression(types.memberExpression(types.identifier(fetcherImportName), types.identifier('fetchCount')), countReadArguments(countParams, readArguments())), types.identifier('catch')), [
                     types.arrowFunctionExpression([types.identifier('error')], types.blockStatement([
                         types.expressionStatement(types.callExpression(types.memberExpression(types.identifier('console'), types.identifier('error')), [
                             types.stringLiteral("Error fetching ".concat(countVarName, ":")),