@teleporthq/teleport-plugin-next-data-source 0.43.46 → 0.43.48

package/dist/esm/loading-state.d.ts

@@ -0,0 +1,92 @@
+import * as types from '@babel/types';
+/**
+ * ------------------------------------------------------------------
+ * Refetch loading state for array-mapper `DataProvider`s
+ * ------------------------------------------------------------------
+ *
+ * `DataProvider` (from `@teleporthq/react-components`) renders its LOADING
+ * slot only when it has no data to show:
+ *
+ *   case "idle":
+ *   case "loading":
+ *     return props.persistDataDuringLoading && data
+ *       ? renderSuccess(data, true)
+ *       : renderLoading()
+ *
+ * Every generated array-mapper list ships `persistDataDuringLoading={true}`,
+ * and that flag is load-bearing on the FIRST paint: when the page prefetches
+ * rows in `getStaticProps` and hands them over as `initialData`, the provider
+ * deliberately skips its first client fetch and therefore never leaves the
+ * `idle` status. Without the flag that page would render the loading slot
+ * forever instead of the prefetched rows.
+ *
+ * The side effect is that once the provider owns data, EVERY later refetch is
+ * invisible: changing the category filter, the sort order or the search term
+ * re-runs the query while the stale rows stay on screen, so the buyer gets no
+ * feedback until the new rows pop in. (Page changes and search changes also
+ * remount the provider through its `key`, which resets `data` — but a filter
+ * or sort change keeps the same key, so nothing at all happens visually.)
+ *
+ * The provider does pass an `isLoading` flag as the second argument of
+ * `renderSuccess`, but it is `true` for the `idle` status as well — i.e.
+ * permanently true on any page that skipped its first fetch because it had
+ * `initialData` — so it cannot be used to decide what to paint.
+ *
+ * Fix: track the in-flight fetches of each data source in the PAGE component
+ * and hand `persistDataDuringLoading` the negated flag. `fetchData` is the one
+ * function the generator owns and the provider calls exactly once per fetch, so
+ * it is where the flag is raised (`true` when the request starts) and lowered
+ * (`false` once it settles, success or failure). While a refetch is in flight
+ * `persistDataDuringLoading` is `false`, so the provider falls through to
+ * `renderLoading()` and the array mapper's designed loading state shows; when
+ * the request settles the flag drops back to `true` and the rows return.
+ *
+ * Why not branch inside `renderSuccess` instead: the loading JSX would have to
+ * be duplicated into the success render prop, and `styled-jsx` only scopes JSX
+ * that lives inside the component's returned tree — every workaround that
+ * hoists the loading markup into a shared local helper silently loses its
+ * `jsx-<hash>` class and therefore all of its styles.
+ *
+ * Nothing changes for a provider that is idle or mounting: `isFetching` starts
+ * at `false`, so the server render and the first client render are identical
+ * (no hydration mismatch) and the `initialData` fast path is untouched.
+ */
+export interface LoadingStateVars {
+    /** Boolean state: `true` while at least one fetch for this data source is in flight. */
+    isFetchingVar: string;
+    /** Setter for `isFetchingVar`. */
+    setIsFetchingVar: string;
+    /**
+     * Ref holding the number of fetches currently in flight. A boolean alone is
+     * not enough: two controls changed in quick succession (e.g. category then
+     * sort) start two overlapping requests, and the first one to settle would
+     * otherwise lower the flag while the second is still running — flashing the
+     * stale rows back for the rest of the second request.
+     */
+    inFlightRefVar: string;
+}
+export declare function getLoadingStateVars(index: number): LoadingStateVars;
+/**
+ * `const ds_N_fetchesInFlight = useRef(0)`
+ * `const [ds_N_isFetching, setDs_N_isFetching] = useState(false)`
+ *
+ * Both are stable across renders (a ref object and a `useState` setter), which
+ * is what lets the wrapped `fetchData` keep its empty `useCallback` dependency
+ * array — a changing `fetchData` identity would retrigger the provider's fetch
+ * effect on every render.
+ */
+export declare function buildLoadingStateDeclarations(vars: LoadingStateVars): types.Statement[];
+/**
+ * Wires the refetch loading state into a single `DataProvider` JSX element.
+ *
+ * No-ops (returning `false`, so the caller emits no state declarations) when
+ * the provider cannot benefit from it:
+ *   - no `renderLoading` slot — the array mapper has no loading state designed,
+ *     so falling through to it would blank the list out instead of showing
+ *     something; keeping the stale rows is the better of the two.
+ *   - `fetchData` missing, not memoized, or not an expression-bodied promise
+ *     chain — see `findMemoizedFetchDataArrow`.
+ *   - already wired — keeps a second pass over the same AST idempotent.
+ */
+export declare function applyLoadingStateToDataProvider(dataProvider: any, vars: LoadingStateVars): boolean;
+//# sourceMappingURL=loading-state.d.ts.map

package/dist/esm/loading-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-state.d.ts","sourceRoot":"","sources":["../../src/loading-state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,cAAc,CAAA;AAErC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,wFAAwF;IACxF,aAAa,EAAE,MAAM,CAAA;IACrB,kCAAkC;IAClC,gBAAgB,EAAE,MAAM,CAAA;IACxB;;;;;;OAMG;IACH,cAAc,EAAE,MAAM,CAAA;CACvB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,gBAAgB,CAMnE;AAED;;;;;;;;GAQG;AACH,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,gBAAgB,GAAG,KAAK,CAAC,SAAS,EAAE,CAkBvF;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,+BAA+B,CAE7C,YAAY,EAAE,GAAG,EACjB,IAAI,EAAE,gBAAgB,GACrB,OAAO,CAyBT"}

package/dist/esm/loading-state.js

@@ -0,0 +1,157 @@
+import * as types from '@babel/types';
+export function getLoadingStateVars(index) {
+    return {
+        isFetchingVar: "ds_".concat(index, "_isFetching"),
+        setIsFetchingVar: "setDs_".concat(index, "_isFetching"),
+        inFlightRefVar: "ds_".concat(index, "_fetchesInFlight"),
+    };
+}
+/**
+ * `const ds_N_fetchesInFlight = useRef(0)`
+ * `const [ds_N_isFetching, setDs_N_isFetching] = useState(false)`
+ *
+ * Both are stable across renders (a ref object and a `useState` setter), which
+ * is what lets the wrapped `fetchData` keep its empty `useCallback` dependency
+ * array — a changing `fetchData` identity would retrigger the provider's fetch
+ * effect on every render.
+ */
+export function buildLoadingStateDeclarations(vars) {
+    return [
+        types.variableDeclaration('const', [
+            types.variableDeclarator(types.identifier(vars.inFlightRefVar), types.callExpression(types.identifier('useRef'), [types.numericLiteral(0)])),
+        ]),
+        types.variableDeclaration('const', [
+            types.variableDeclarator(types.arrayPattern([
+                types.identifier(vars.isFetchingVar),
+                types.identifier(vars.setIsFetchingVar),
+            ]), types.callExpression(types.identifier('useState'), [types.booleanLiteral(false)])),
+        ]),
+    ];
+}
+/**
+ * Wires the refetch loading state into a single `DataProvider` JSX element.
+ *
+ * No-ops (returning `false`, so the caller emits no state declarations) when
+ * the provider cannot benefit from it:
+ *   - no `renderLoading` slot — the array mapper has no loading state designed,
+ *     so falling through to it would blank the list out instead of showing
+ *     something; keeping the stale rows is the better of the two.
+ *   - `fetchData` missing, not memoized, or not an expression-bodied promise
+ *     chain — see `findMemoizedFetchDataArrow`.
+ *   - already wired — keeps a second pass over the same AST idempotent.
+ */
+export function applyLoadingStateToDataProvider(
+// tslint:disable-next-line:no-any
+dataProvider, vars) {
+    var _a;
+    var attributes = (_a = dataProvider === null || dataProvider === void 0 ? void 0 : dataProvider.openingElement) === null || _a === void 0 ? void 0 : _a.attributes;
+    if (!Array.isArray(attributes)) {
+        return false;
+    }
+    if (!findAttribute(attributes, 'renderLoading')) {
+        return false;
+    }
+    var fetchDataAttr = findAttribute(attributes, 'fetchData');
+    if (!fetchDataAttr) {
+        return false;
+    }
+    var fetchArrow = findMemoizedFetchDataArrow(fetchDataAttr);
+    if (!fetchArrow || fetchArrow.body.type !== 'CallExpression') {
+        return false;
+    }
+    fetchArrow.body = buildTrackedFetchBody(fetchArrow.body, vars);
+    setPersistDataDuringLoading(attributes, vars);
+    return true;
+}
+// tslint:disable-next-line:no-any
+function findAttribute(attributes, name) {
+    return attributes.find(
+    // tslint:disable-next-line:no-any
+    function (attr) { var _a; return (attr === null || attr === void 0 ? void 0 : attr.type) === 'JSXAttribute' && ((_a = attr.name) === null || _a === void 0 ? void 0 : _a.name) === name; });
+}
+/**
+ * The `useCallback(fn, [])`-wrapped arrow behind a `fetchData` attribute, or
+ * `undefined` when the value has any other shape.
+ *
+ * Requiring the memoized form is a safety condition, not a convenience.
+ * `DataProvider` refetches whenever the `fetchData` identity changes
+ * (`useEffect(..., [params, fetchData])`), so wrapping a fetcher that is
+ * re-created on every render with something that sets state would build a
+ * self-sustaining loop: fetch → setState → render → new fetcher identity →
+ * fetch. The array-mapper providers this plugin owns are always memoized; the
+ * few unmemoized `fetchData` values other plugins emit are left exactly as they
+ * are today.
+ */
+function findMemoizedFetchDataArrow(attribute) {
+    var _a;
+    var value = attribute.value;
+    if (!value || value.type !== 'JSXExpressionContainer') {
+        return undefined;
+    }
+    var expression = value.expression;
+    if (expression.type !== 'CallExpression' ||
+        expression.callee.type !== 'Identifier' ||
+        expression.callee.name !== 'useCallback' ||
+        ((_a = expression.arguments[0]) === null || _a === void 0 ? void 0 : _a.type) !== 'ArrowFunctionExpression') {
+        return undefined;
+    }
+    return expression.arguments[0];
+}
+/**
+ * Turns `(params) => fetch(...).then(...)` into
+ *
+ *   (params) => {
+ *     ds_N_fetchesInFlight.current += 1
+ *     setDs_N_isFetching(true)
+ *     return fetch(...).then(...).finally(() => {
+ *       ds_N_fetchesInFlight.current -= 1
+ *       if (ds_N_fetchesInFlight.current <= 0) {
+ *         ds_N_fetchesInFlight.current = 0
+ *         setDs_N_isFetching(false)
+ *       }
+ *     })
+ *   }
+ *
+ * `finally` (rather than a `then` pair) keeps the flag honest when the request
+ * rejects: the provider switches to its error status and the loading state must
+ * not stay on screen. The counter is clamped at 0 so a late settle from a
+ * provider instance that was remounted through its `key` can never drive it
+ * negative and wedge the flag on.
+ *
+ * `fetchExpression` is the `fetch(...).then(...).then(...)` chain the generator
+ * emitted, so `.finally` is always available on it — the caller only reaches
+ * here for a call-expression body.
+ */
+function buildTrackedFetchBody(fetchExpression, vars) {
+    var inFlightCount = types.memberExpression(types.identifier(vars.inFlightRefVar), types.identifier('current'));
+    var settleHandler = types.arrowFunctionExpression([], types.blockStatement([
+        types.expressionStatement(types.assignmentExpression('-=', types.cloneNode(inFlightCount, true), types.numericLiteral(1))),
+        types.ifStatement(types.binaryExpression('<=', types.cloneNode(inFlightCount, true), types.numericLiteral(0)), types.blockStatement([
+            types.expressionStatement(types.assignmentExpression('=', types.cloneNode(inFlightCount, true), types.numericLiteral(0))),
+            types.expressionStatement(types.callExpression(types.identifier(vars.setIsFetchingVar), [
+                types.booleanLiteral(false),
+            ])),
+        ])),
+    ]));
+    return types.blockStatement([
+        types.expressionStatement(types.assignmentExpression('+=', types.cloneNode(inFlightCount, true), types.numericLiteral(1))),
+        types.expressionStatement(types.callExpression(types.identifier(vars.setIsFetchingVar), [types.booleanLiteral(true)])),
+        types.returnStatement(types.callExpression(types.memberExpression(fetchExpression, types.identifier('finally')), [
+            settleHandler,
+        ])),
+    ]);
+}
+/** `persistDataDuringLoading={!ds_N_isFetching}`, replacing any existing value. */
+// tslint:disable-next-line:no-any
+function setPersistDataDuringLoading(attributes, vars) {
+    var attribute = types.jsxAttribute(types.jsxIdentifier('persistDataDuringLoading'), types.jsxExpressionContainer(types.unaryExpression('!', types.identifier(vars.isFetchingVar), true)));
+    var existingIndex = attributes.findIndex(
+    // tslint:disable-next-line:no-any
+    function (attr) { var _a; return (attr === null || attr === void 0 ? void 0 : attr.type) === 'JSXAttribute' && ((_a = attr.name) === null || _a === void 0 ? void 0 : _a.name) === 'persistDataDuringLoading'; });
+    if (existingIndex === -1) {
+        attributes.push(attribute);
+        return;
+    }
+    attributes[existingIndex] = attribute;
+}
+//# sourceMappingURL=loading-state.js.map

package/dist/esm/loading-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-state.js","sourceRoot":"","sources":["../../src/loading-state.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"pagination-plugin.d.ts","sourceRoot":"","sources":["../../src/pagination-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,sBAAsB,EAIvB,MAAM,4BAA4B,CAAA;AA0tBnC,eAAO,MAAM,qCAAqC,EAAE,sBAAsB,CAAC,EAAE,CAq2B5E,CAAA"}
+{"version":3,"file":"pagination-plugin.d.ts","sourceRoot":"","sources":["../../src/pagination-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,sBAAsB,EAIvB,MAAM,4BAA4B,CAAA;AA+tBnC,eAAO,MAAM,qCAAqC,EAAE,sBAAsB,CAAC,EAAE,CAy3B5E,CAAA"}

package/dist/esm/pagination-plugin.js

@@ -43,6 +43,7 @@ import { generateSafeFileName } from './utils';
 import { generateDataSourceFetcherWithCore } from './data-source-fetchers';
 import { appendSortsParam, extractDynamicSort } from './sort-utils';
 import { appendFiltersParam, pushStateIdsAsDeps, pushPropIdsAsDeps } from './filter-utils';
+import { applyLoadingStateToDataProvider, buildLoadingStateDeclarations, getLoadingStateVars, } from './loading-state';
 // tslint:disable-next-line:no-any
 function parseSearchDefaultValue(raw) {
     if (!raw || typeof raw !== 'object') {
@@ -551,7 +552,7 @@ function pushSearchUrlSyncEffects(effectStatements, usage, vars) {
 // ==================== 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, stateDeclarations, effectStatements, needsUseRouter, hasRouterDecl, returnIndex, insertIndex, dataProviders, dataProvidersWithRepeaters, usageIndexByDataSourceId, dataProvidersWithoutRepeaters, searchInputs, searchEnabledUsages, paginationNodes, paginatedUsages;
+        var uidl, chunks, dependencies, options, componentChunk, variableDeclaration, declarator, arrowFunction, blockStatement, registry, getStaticPropsChunk, isPage, stateDeclarations, effectStatements, needsUseRouter, hasRouterDecl, returnIndex, insertIndex, dataProviders, dataProvidersWithRepeaters, usageIndexByDataSourceId, loadingStateDeclarations, dataProvidersWithoutRepeaters, searchInputs, searchEnabledUsages, paginationNodes, paginatedUsages;
         var _a;
         return __generator(this, function (_b) {
             uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies, options = structure.options;
@@ -914,6 +915,7 @@ export var createNextArrayMapperPaginationPlugin = function () {
                 return hasRepeater;
             });
             usageIndexByDataSourceId = new Map();
+            loadingStateDeclarations = [];
             dataProvidersWithRepeaters.forEach(function (dp) {
                 var _a, _b, _c;
                 var nameAttr = dp.openingElement.attributes.find(function (attr) { return attr.type === 'JSXAttribute' && attr.name.name === 'name'; });
@@ -944,9 +946,21 @@ export var createNextArrayMapperPaginationPlugin = function () {
                 else if (usage.category === 'plain') {
                     updateDataProviderForPlain(dp, fileName, usage);
                 }
+                // Show the array mapper's loading state while a category/sort/search
+                // 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.
+                var loadingVars = getLoadingStateVars(usage.index);
+                if (applyLoadingStateToDataProvider(dp, loadingVars)) {
+                    loadingStateDeclarations.push.apply(loadingStateDeclarations, buildLoadingStateDeclarations(loadingVars));
+                }
                 // Create API route for all categories (including 'plain' for components)
                 ensureAPIRouteExists(options.extractedResources, usage, options.dataSources, (_c = options.ecommerceSettings) === null || _c === void 0 ? void 0 : _c.categories);
             });
+            // Declare the loading-state hooks alongside the other data-source state, at
+            // the top of the component body. Unconditional and in a fixed order, so the
+            // hook order stays stable across renders.
+            loadingStateDeclarations.reverse().forEach(function (s) { return blockStatement.body.unshift(s); });
             dataProvidersWithoutRepeaters = dataProviders.filter(function (dp) {
                 var hasRepeater = findArrayMapperRenderPropInDataProvider(dp) !== undefined;
                 return !hasRepeater;