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

package/src/index.ts

@@ -8,6 +8,7 @@ import {
   UIDLDynamicReference,
 } from '@teleporthq/teleport-types'
 import { UIDLUtils, StringUtils } from '@teleporthq/teleport-shared'
+import { RouteUtils } from '@teleporthq/teleport-plugin-common'
 import {
   extractDataSourceIntoNextAPIFolder,
   extractDataSourceIntoGetStaticProps,
@@ -652,7 +653,9 @@ export const createNextPagesDataSourcePlugin: ComponentPluginFactory<{}> = () =>
           dependencies,
           dynamicRouteAttr,
           uidl.outputOptions?.folderPath,
-          transformOptions
+          transformOptions,
+          () => RouteUtils.pageDataReadArguments(uidl, options.auth),
+          uidl.stateDefinitions
         )
 
         if (result.success && result.chunk) {
@@ -794,7 +797,10 @@ export const createNextPagesDataSourcePlugin: ComponentPluginFactory<{}> = () =>
                   types.identifier(fetcherImportName),
                   types.identifier('fetchData')
                 ),
-                [types.objectExpression([])]
+                [
+                  types.objectExpression([]),
+                  ...RouteUtils.pageDataReadArguments(uidl, options.auth),
+                ]
               )
 
               const safeFetchExpression = types.callExpression(

package/src/infinite-scroll.ts

@@ -6,9 +6,10 @@ import * as types from '@babel/types'
  * The accumulation lives inside the generated `fetchData` closure rather than
  * around the provider. `DataProvider` renders whatever `fetchData` resolves
  * with, so returning "every page fetched so far, in order" is enough to make it
- * append — no change to the runtime component library, and the existing
+ * append — no change to the runtime component library, and
  * `persistDataDuringLoading` keeps the rows already on screen while the next
- * page is in flight.
+ * page is in flight (`buildAppendingRequestCheck`: the loading slot replaces
+ * them only for a list loading afresh).
  *
  * A `useRef` holds the pages rather than a state, because writing accumulated
  * rows into state from inside `fetchData` would re-render the provider mid-fetch
@@ -24,6 +25,11 @@ import * as types from '@babel/types'
  * more" fetched a page already on show. `DataProvider` also renders whichever
  * answer arrives LAST, so a late answer to an earlier query must not replace
  * the list either.
+ *
+ * On a page, the list starts from the rows `getStaticProps` already fetched
+ * (`buildFirstPageDeclaration`, `buildFirstPageSeedEffect`): the server HTML
+ * carries them instead of the loading state, the accumulator holds them as
+ * page 1, and the browser's first request is page 2.
  */
 
 // tslint:disable:no-any
@@ -34,6 +40,7 @@ export interface InfiniteScrollVars {
   setHasMoreFlagVar: string
   hasMoreVar: string
   sentinelRefVar: string
+  firstPageVar: string
 }
 
 export const getInfiniteScrollVars = (index: number): InfiniteScrollVars => ({
@@ -42,6 +49,7 @@ export const getInfiniteScrollVars = (index: number): InfiniteScrollVars => ({
   setHasMoreFlagVar: `setDs_${index}_hasMoreFlag`,
   hasMoreVar: `ds_${index}_hasMore`,
   sentinelRefVar: `ds_${index}_sentinelRef`,
+  firstPageVar: `ds_${index}_firstPage`,
 })
 
 /**
@@ -172,12 +180,12 @@ const writeAtPath = (
 }
 
 /** `JSON.stringify({ ...params, page: 0 })`: everything that identifies the query but the page. */
-const buildQuerySignature = (): types.CallExpression =>
+const buildQuerySignature = (paramsVar: string = 'params'): types.CallExpression =>
   types.callExpression(
     types.memberExpression(types.identifier('JSON'), types.identifier('stringify')),
     [
       types.objectExpression([
-        types.spreadElement(types.identifier('params')),
+        types.spreadElement(types.identifier(paramsVar)),
         types.objectProperty(types.identifier('page'), types.numericLiteral(0)),
       ]),
     ]
@@ -214,6 +222,176 @@ export const buildAccumulatingRequestMark = (vars: InfiniteScrollVars): types.St
     )
   )
 
+/**
+ * Whether the request `fetchData` is about to make only adds a page to the rows
+ * on show: a page past the first, of the query the accumulator holds. Read
+ * after `buildAccumulatingRequestMark` has recorded that request.
+ *
+ *   ds_0_accumRef.current.latest.page > 1 && ds_0_accumRef.current.latest.sig === ds_0_accumRef.current.sig
+ *
+ * A filter, sort or search change is no append even past page 1 — the page it
+ * fires before the reset belongs to another query — and neither is a list's
+ * first page: both load the list afresh, behind its loading slot.
+ */
+export const buildAppendingRequestCheck = (vars: InfiniteScrollVars): types.Expression => {
+  const latestOf = (key: string): types.MemberExpression =>
+    types.memberExpression(
+      types.memberExpression(accumCurrentOf(vars), types.identifier('latest')),
+      types.identifier(key)
+    )
+  return types.logicalExpression(
+    '&&',
+    types.binaryExpression('>', latestOf('page'), types.numericLiteral(1)),
+    types.binaryExpression(
+      '===',
+      latestOf('sig'),
+      types.memberExpression(accumCurrentOf(vars), types.identifier('sig'))
+    )
+  )
+}
+
+/**
+ * The rows inside a server payload: the payload itself, or what sits at
+ * `itemsPath` in one that wraps them. `<rows>?.length > 0` is how the caller
+ * asks whether the server found any.
+ */
+export const buildServerRowsExpression = (
+  payload: types.Expression,
+  itemsPath?: string[]
+): types.Expression => (itemsPath?.length ? readAtPath(payload, itemsPath) : payload)
+
+/**
+ * The first page the list starts from, when its page already fetched it:
+ *
+ *   const ds_0_firstPage = useMemo(() => <starts> ? props?.items_ds_0 : undefined, [<instance deps>])
+ *
+ * Handed to `DataProvider` as `initialData`, so the server HTML holds the rows
+ * rather than the loading state, and the provider skips its own fetch of page 1.
+ *
+ * ⛔ Frozen for the provider's lifetime. `DataProvider` copies `initialData`
+ * into what it shows every time the value changes, so a value that moved with
+ * the page — the paged lists' `page === 1 ? … : undefined`, fine for them since
+ * they remount per page — would wipe the appended rows on the first scroll.
+ * `instanceDeps` are what remounts the provider (its `key`): nothing for a list
+ * without search, the applied query for one with search.
+ */
+export const buildFirstPageDeclaration = (
+  vars: InfiniteScrollVars,
+  startsFromServerRows: types.Expression,
+  serverPayload: types.Expression,
+  instanceDeps: types.Expression[]
+): types.Statement =>
+  types.variableDeclaration('const', [
+    types.variableDeclarator(
+      types.identifier(vars.firstPageVar),
+      types.callExpression(types.identifier('useMemo'), [
+        types.arrowFunctionExpression(
+          [],
+          types.conditionalExpression(
+            startsFromServerRows,
+            serverPayload,
+            types.identifier('undefined')
+          )
+        ),
+        types.arrayExpression(instanceDeps),
+      ])
+    ),
+  ])
+
+/**
+ * Makes the server rows page 1 of the accumulator whenever the provider is
+ * handed them instead of fetching:
+ *
+ *   useEffect(() => {
+ *     if (ds_0_firstPage === undefined) return
+ *     const rows = ds_0_firstPage || []
+ *     const sig = JSON.stringify({ ...ds_0_params, page: 0 })
+ *     ds_0_accumRef.current = { sig, pages: { 1: rows }, latest: { sig, page: 1 } }
+ *     setDs_0_hasMoreFlag(rows.length >= 20)
+ *   }, [ds_0_firstPage])
+ *
+ * Without it the accumulator never sees page 1 (the provider skipped that
+ * fetch), and the answer to page 2 would REPLACE the rows on screen with page 2
+ * alone. The signature is the one `fetchData` computes for the same params, so
+ * the next page appends to these rows while a filter, sort or search change
+ * still starts a fresh list; `latest` keeps an answer still in flight from an
+ * earlier query from changing anything. A short first page is the last one, as
+ * it would be had it been fetched.
+ */
+export const buildFirstPageSeedEffect = (
+  vars: InfiniteScrollVars,
+  paramsVar: string,
+  perPage: number,
+  itemsPath?: string[]
+): types.Statement =>
+  types.expressionStatement(
+    types.callExpression(types.identifier('useEffect'), [
+      types.arrowFunctionExpression(
+        [],
+        types.blockStatement([
+          types.ifStatement(
+            types.binaryExpression(
+              '===',
+              types.identifier(vars.firstPageVar),
+              types.identifier('undefined')
+            ),
+            types.returnStatement()
+          ),
+          types.variableDeclaration('const', [
+            types.variableDeclarator(
+              types.identifier('rows'),
+              types.logicalExpression(
+                '||',
+                buildServerRowsExpression(types.identifier(vars.firstPageVar), itemsPath),
+                types.arrayExpression([])
+              )
+            ),
+          ]),
+          types.variableDeclaration('const', [
+            types.variableDeclarator(types.identifier('sig'), buildQuerySignature(paramsVar)),
+          ]),
+          types.expressionStatement(
+            types.assignmentExpression(
+              '=',
+              accumCurrentOf(vars),
+              types.objectExpression([
+                types.objectProperty(types.identifier('sig'), types.identifier('sig'), false, true),
+                types.objectProperty(
+                  types.identifier('pages'),
+                  types.objectExpression([
+                    types.objectProperty(types.numericLiteral(1), types.identifier('rows')),
+                  ])
+                ),
+                types.objectProperty(
+                  types.identifier('latest'),
+                  types.objectExpression([
+                    types.objectProperty(
+                      types.identifier('sig'),
+                      types.identifier('sig'),
+                      false,
+                      true
+                    ),
+                    types.objectProperty(types.identifier('page'), types.numericLiteral(1)),
+                  ])
+                ),
+              ])
+            )
+          ),
+          types.expressionStatement(
+            types.callExpression(types.identifier(vars.setHasMoreFlagVar), [
+              types.binaryExpression(
+                '>=',
+                types.memberExpression(types.identifier('rows'), types.identifier('length')),
+                types.numericLiteral(perPage)
+              ),
+            ])
+          ),
+        ])
+      ),
+      types.arrayExpression([types.identifier(vars.firstPageVar)]),
+    ])
+  )
+
 /**
  * The `.then(...)` tail that accumulates a page and reports whether more exist.
  *

package/src/loading-state.ts

@@ -52,6 +52,14 @@ import { findCachedFetchNetworkChain } from './cache/ast'
  * 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.
+ *
+ * An appending list (infinite scroll, Load more) is the exception to "show the
+ * loading slot while a request is in flight": its next page belongs BELOW the
+ * rows on show. Swapping those rows for the loading slot until the page arrived
+ * collapsed the list on every append — the page jumped up under the visitor's
+ * scroll. Such a list also tracks whether the request in flight only appends
+ * (`isAppendingVar`) and keeps its rows through it; the loading slot replaces
+ * them only when the list loads afresh (a filter, sort or search change).
  */
 
 export interface LoadingStateVars {
@@ -80,6 +88,13 @@ export interface LoadingStateVars {
   fetchSeqRefVar: string
   /** Ref holding the rows of the newest request that settled — what an overtaken one resolves with. */
   latestDataRefVar: string
+  /**
+   * Boolean state of an appending list: `true` while the request it made last
+   * adds a page to the rows on show, so they stay there through it.
+   */
+  isAppendingVar: string
+  /** Setter for `isAppendingVar`. */
+  setIsAppendingVar: string
 }
 
 export function getLoadingStateVars(index: number): LoadingStateVars {
@@ -89,6 +104,8 @@ export function getLoadingStateVars(index: number): LoadingStateVars {
     inFlightRefVar: `ds_${index}_fetchesInFlight`,
     fetchSeqRefVar: `ds_${index}_fetchSeq`,
     latestDataRefVar: `ds_${index}_latestData`,
+    isAppendingVar: `ds_${index}_isAppending`,
+    setIsAppendingVar: `setDs_${index}_isAppending`,
   }
 }
 
@@ -97,14 +114,18 @@ export function getLoadingStateVars(index: number): LoadingStateVars {
  * `const ds_N_fetchSeq = useRef(0)`
  * `const ds_N_latestData = useRef(undefined)`
  * `const [ds_N_isFetching, setDs_N_isFetching] = useState(false)`
+ * `const [ds_N_isAppending, setDs_N_isAppending] = useState(false)` (an appending list)
  *
  * All are stable across renders (ref objects 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: LoadingStateVars): types.Statement[] {
-  return [
+export function buildLoadingStateDeclarations(
+  vars: LoadingStateVars,
+  appends: boolean = false
+): types.Statement[] {
+  const declarations: types.Statement[] = [
     types.variableDeclaration('const', [
       types.variableDeclarator(
         types.identifier(vars.inFlightRefVar),
@@ -133,6 +154,20 @@ export function buildLoadingStateDeclarations(vars: LoadingStateVars): types.Sta
       ),
     ]),
   ]
+  if (appends) {
+    declarations.push(
+      types.variableDeclaration('const', [
+        types.variableDeclarator(
+          types.arrayPattern([
+            types.identifier(vars.isAppendingVar),
+            types.identifier(vars.setIsAppendingVar),
+          ]),
+          types.callExpression(types.identifier('useState'), [types.booleanLiteral(false)])
+        ),
+      ])
+    )
+  }
+  return declarations
 }
 
 /**
@@ -146,11 +181,17 @@ export function buildLoadingStateDeclarations(vars: LoadingStateVars): types.Sta
  *   - `fetchData` missing, not memoized, or not an expression-bodied promise
  *     chain — see `findMemoizedFetchDataArrow`.
  *   - already wired — keeps a second pass over the same AST idempotent.
+ *
+ * `appendingRequest` makes it an appending list's: the expression telling,
+ * inside `fetchData`, whether the request about to be made only adds a page to
+ * the rows on show (see `isAppendingVar`). The caller declares the state with
+ * `buildLoadingStateDeclarations(vars, true)`.
  */
 export function applyLoadingStateToDataProvider(
   // tslint:disable-next-line:no-any
   dataProvider: any,
-  vars: LoadingStateVars
+  vars: LoadingStateVars,
+  appendingRequest?: types.Expression
 ): boolean {
   const attributes = dataProvider?.openingElement?.attributes
   if (!Array.isArray(attributes)) {
@@ -172,16 +213,16 @@ export function applyLoadingStateToDataProvider(
   }
 
   if (fetchArrow.body.type === 'CallExpression') {
-    fetchArrow.body = buildTrackedFetchBody(fetchArrow.body, vars)
+    fetchArrow.body = buildTrackedFetchBody(fetchArrow.body, vars, appendingRequest)
   } else if (fetchArrow.body.type === 'BlockStatement') {
-    if (!injectTrackingIntoCachedBody(fetchArrow.body, vars)) {
+    if (!injectTrackingIntoCachedBody(fetchArrow.body, vars, appendingRequest)) {
       return false
     }
   } else {
     return false
   }
 
-  setPersistDataDuringLoading(attributes, vars)
+  setPersistDataDuringLoading(attributes, vars, !!appendingRequest)
 
   return true
 }
@@ -199,7 +240,11 @@ export function applyLoadingStateToDataProvider(
  * Returns `false` when the body is not the shape this module knows how to wrap,
  * so the caller emits no state declarations rather than half-wiring it.
  */
-function injectTrackingIntoCachedBody(body: types.BlockStatement, vars: LoadingStateVars): boolean {
+function injectTrackingIntoCachedBody(
+  body: types.BlockStatement,
+  vars: LoadingStateVars,
+  appendingRequest?: types.Expression
+): boolean {
   // Idempotent: a second pass over the same AST must not double-count.
   if (containsIdentifier(body, vars.setIsFetchingVar)) {
     return false
@@ -210,7 +255,11 @@ function injectTrackingIntoCachedBody(body: types.BlockStatement, vars: LoadingS
     return false
   }
 
-  const tracked = buildTrackedFetchBody(networkChain.statement.argument as types.Expression, vars)
+  const tracked = buildTrackedFetchBody(
+    networkChain.statement.argument as types.Expression,
+    vars,
+    appendingRequest
+  )
   body.body.splice(networkChain.index, 1, ...tracked.body)
   markCacheHitAsNewest(body, vars)
 
@@ -363,10 +412,14 @@ function findMemoizedFetchDataArrow(
  * `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.
+ *
+ * An appending list also records, as the flag goes up, whether this request
+ * only appends — `setDs_N_isAppending(<appendingRequest>)`, batched with it.
  */
 function buildTrackedFetchBody(
   fetchExpression: types.Expression,
-  vars: LoadingStateVars
+  vars: LoadingStateVars,
+  appendingRequest?: types.Expression
 ): types.BlockStatement {
   const inFlightCount = types.memberExpression(
     types.identifier(vars.inFlightRefVar),
@@ -456,6 +509,15 @@ function buildTrackedFetchBody(
         types.numericLiteral(1)
       )
     ),
+    ...(appendingRequest
+      ? [
+          types.expressionStatement(
+            types.callExpression(types.identifier(vars.setIsAppendingVar), [
+              types.cloneNode(appendingRequest, true),
+            ])
+          ),
+        ]
+      : []),
     types.expressionStatement(
       types.callExpression(types.identifier(vars.setIsFetchingVar), [types.booleanLiteral(true)])
     ),
@@ -467,13 +529,23 @@ function buildTrackedFetchBody(
   ])
 }
 
-/** `persistDataDuringLoading={!ds_N_isFetching}`, replacing any existing value. */
-// tslint:disable-next-line:no-any
-function setPersistDataDuringLoading(attributes: any[], vars: LoadingStateVars): void {
+/**
+ * `persistDataDuringLoading={!ds_N_isFetching}` — or, for an appending list,
+ * `{!ds_N_isFetching || ds_N_isAppending}` — replacing any existing value.
+ */
+function setPersistDataDuringLoading(
+  // tslint:disable-next-line:no-any
+  attributes: any[],
+  vars: LoadingStateVars,
+  appends: boolean
+): void {
+  const notFetching = types.unaryExpression('!', types.identifier(vars.isFetchingVar), true)
   const attribute = types.jsxAttribute(
     types.jsxIdentifier('persistDataDuringLoading'),
     types.jsxExpressionContainer(
-      types.unaryExpression('!', types.identifier(vars.isFetchingVar), true)
+      appends
+        ? types.logicalExpression('||', notFetching, types.identifier(vars.isAppendingVar))
+        : notFetching
     )
   )