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

package/dist/cjs/pagination-plugin.js

@@ -85,6 +85,8 @@ var loading_state_1 = require("./loading-state");
 var config_1 = require("./cache/config");
 var ast_1 = require("./cache/ast");
 var pagination_controls_1 = require("./pagination-controls");
+var range_control_1 = require("./range-control");
+var search_input_1 = require("./search-input");
 var count_effect_1 = require("./count-effect");
 var search_clear_1 = require("./search-clear");
 var numbered_pagination_1 = require("./numbered-pagination");
@@ -433,6 +435,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 || '',
@@ -528,6 +531,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"),
@@ -605,19 +610,27 @@ function pushSearchUrlSyncEffects(effectStatements, usage, vars) {
     effectStatements.push(teleport_plugin_common_1.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(teleport_plugin_common_1.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([
@@ -626,10 +639,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]);
@@ -792,7 +806,7 @@ function pushFilterSortPageResetEffect(stateDeclarations, effectStatements, usag
 // ==================== 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, 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, 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;
@@ -816,6 +830,8 @@ var createNextArrayMapperPaginationPlugin = function () {
                 return [2 /*return*/, structure];
             }
             blockStatement = arrowFunction.body;
+            rangeControls = (0, range_control_1.findRangeControls)(blockStatement);
+            hasRangeControl = rangeControls.length > 0;
             registry = buildStateRegistry(uidl.node);
             if (registry.usages.length === 0) {
                 return [2 /*return*/, structure];
@@ -984,11 +1000,15 @@ var createNextArrayMapperPaginationPlugin = function () {
                     (0, filter_utils_1.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((0, count_effect_1.buildCountSeqDeclaration)(vars.countSeqRefVar));
                     effectStatements.push((0, count_effect_1.buildCountFetchEffect)({
                         fileName: fileName,
                         perPage: usage.perPage,
                         setMaxPagesVar: vars.setMaxPagesStateVar,
+                        setTotalVar: hasRangeControl ? vars.setTotalStateVar : undefined,
                         urlParams: urlParams,
                         deps: countEffectDeps,
                         countSeqRefVar: vars.countSeqRefVar,
@@ -1030,7 +1050,9 @@ 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 = (0, utils_1.generateSafeFileName)(usage.resourceDefinition.dataSourceType, usage.resourceDefinition.tableName, usage.resourceDefinition.dataSourceId);
                         // ⛔ This list has no search input, so no `query` param — but it may
@@ -1052,11 +1074,15 @@ var createNextArrayMapperPaginationPlugin = function () {
                         (0, filter_utils_1.pushStateIdsAsDeps)(countDeps, countDepsSeen, usage.filterStateIds);
                         (0, filter_utils_1.pushPropIdsAsDeps)(countDeps, countDepsSeen, usage.filterPropIds);
                         pushUrlSearchParamMemoDeps(countDeps, usage);
+                        if (hasRangeControl) {
+                            stateDeclarations.push(buildTotalDeclaration(vars));
+                        }
                         stateDeclarations.push((0, count_effect_1.buildCountSeqDeclaration)(vars.countSeqRefVar));
                         effectStatements.push((0, count_effect_1.buildCountFetchEffect)({
                             fileName: fileName,
                             perPage: usage.perPage,
                             setMaxPagesVar: vars.setMaxPagesStateVar,
+                            setTotalVar: hasRangeControl ? vars.setTotalStateVar : undefined,
                             urlParams: countUrlParams,
                             deps: countDeps,
                             countSeqRefVar: vars.countSeqRefVar,
@@ -1187,7 +1213,9 @@ 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, (0, infinite_scroll_1.buildSentinelElement)((0, infinite_scroll_1.getInfiniteScrollVars)(usage.index)));
+                    insertSentinelAfterProvider(blockStatement, dp, function (parentTag) {
+                        return (0, infinite_scroll_1.buildSentinelElement)((0, infinite_scroll_1.getInfiniteScrollVars)(usage.index), parentTag);
+                    });
                 }
                 // Create API route for all categories (including 'plain' for components)
                 ensureAPIRouteExists(options.extractedResources, usage, options.dataSources, (0, transformations_1.buildProductTransformOptions)(options));
@@ -1228,18 +1256,15 @@ var createNextArrayMapperPaginationPlugin = function () {
             dataProvidersWithoutRepeaters.forEach(function (dp) {
                 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;
+            searchInputs = (0, search_input_1.findAllSearchInputsInJSX)(blockStatement);
+            usageBySearchInput = (0, search_input_1.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) {
+                    (0, search_input_1.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.
             (0, search_clear_1.findAllSearchClearButtonsInJSX)(blockStatement).forEach(function (button) {
                 var input = (0, search_clear_1.findSiblingSearchInput)(button, searchInputs.map(function (entry) { return entry.node; }));
@@ -1266,6 +1291,24 @@ var createNextArrayMapperPaginationPlugin = function () {
                 }
                 wirePaginationWidget(node, usage, getStateVarsForUsage(usage), usagesWithLoadingState.has(usage.index));
             });
+            // 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 = (0, pagination_controls_1.readJSXAttributeString)(control, pagination_controls_1.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
             if (isPage) {
                 updateGetStaticProps(chunks, registry, dependencies, (_b = uidl.outputOptions) === null || _b === void 0 ? void 0 : _b.folderPath, localized);
@@ -1284,39 +1327,59 @@ exports.createNextArrayMapperPaginationPlugin = createNextArrayMapperPaginationP
  * 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
@@ -1324,22 +1387,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) {
@@ -1434,61 +1497,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.
  *
@@ -1933,21 +1941,18 @@ accumulate) {
             ? (0, ast_1.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')], (0, ast_1.buildCachedFetchBody)(networkChain, cache))
-        : types.arrowFunctionExpression([types.identifier('params')], networkChain);
+        : accumulate
+            ? types.arrowFunctionExpression([types.identifier('params')], types.blockStatement([
+                (0, infinite_scroll_1.buildAccumulatingRequestMark)((0, infinite_scroll_1.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.
  *
@@ -1963,6 +1968,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;
+    (0, range_control_1.wireRangeControl)(control, {
+        totalVar: vars.totalStateVar,
+        currentPageExpr: currentPageExpr(),
+        perPage: usage.perPage,
+        infiniteScroll: usage.infiniteScroll,
+    });
+}
 /**
  * Wires the authored Load More button of an appending list.
  *
@@ -2002,6 +2033,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.
+    (0, pagination_controls_1.findAllPaginationControls)(paginationNode, 'range')
+        .filter(function (control) { return !(0, pagination_controls_1.readJSXAttributeString)(control, pagination_controls_1.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.