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

package/src/infinite-scroll.ts

@@ -6,15 +6,30 @@ 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
  * and re-enter it. The ref is keyed by a SIGNATURE of every fetch param except
  * the page, so a filter, sort or search change starts a fresh list instead of
  * interleaving rows from two different queries.
+ *
+ * `fetchData` records the query and the page the list stands on BEFORE it
+ * requests them (`latest`), and only the answer to that request changes the
+ * list. A filter, sort or search change made past page 1 fires the old page
+ * under the new query first, then page 1 once the page is reset: kept, the
+ * stray page sat in the list, the page counter said 1, and the next "Load
+ * 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
@@ -25,6 +40,7 @@ export interface InfiniteScrollVars {
   setHasMoreFlagVar: string
   hasMoreVar: string
   sentinelRefVar: string
+  firstPageVar: string
 }
 
 export const getInfiniteScrollVars = (index: number): InfiniteScrollVars => ({
@@ -33,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`,
 })
 
 /**
@@ -62,6 +79,7 @@ export const buildInfiniteScrollDeclarations = (
           types.objectExpression([
             types.objectProperty(types.identifier('sig'), types.stringLiteral('')),
             types.objectProperty(types.identifier('pages'), types.objectExpression([])),
+            types.objectProperty(types.identifier('latest'), types.nullLiteral()),
           ]),
         ])
       ),
@@ -161,11 +179,226 @@ const writeAtPath = (
   ])
 }
 
+/** `JSON.stringify({ ...params, page: 0 })`: everything that identifies the query but the page. */
+const buildQuerySignature = (paramsVar: string = 'params'): types.CallExpression =>
+  types.callExpression(
+    types.memberExpression(types.identifier('JSON'), types.identifier('stringify')),
+    [
+      types.objectExpression([
+        types.spreadElement(types.identifier(paramsVar)),
+        types.objectProperty(types.identifier('page'), types.numericLiteral(0)),
+      ]),
+    ]
+  )
+
+/** `Number(params.page) || 1` */
+const buildRequestedPage = (): types.LogicalExpression =>
+  types.logicalExpression(
+    '||',
+    types.callExpression(types.identifier('Number'), [
+      types.memberExpression(types.identifier('params'), types.identifier('page')),
+    ]),
+    types.numericLiteral(1)
+  )
+
+const accumCurrentOf = (vars: InfiniteScrollVars): types.MemberExpression =>
+  types.memberExpression(types.identifier(vars.accumRefVar), types.identifier('current'))
+
+/**
+ * What `fetchData` runs before its request: the query and the page the list
+ * now stands on.
+ *
+ *   ds_0_accumRef.current.latest = { sig: JSON.stringify({ ...params, page: 0 }), page: Number(params.page) || 1 }
+ */
+export const buildAccumulatingRequestMark = (vars: InfiniteScrollVars): types.Statement =>
+  types.expressionStatement(
+    types.assignmentExpression(
+      '=',
+      types.memberExpression(accumCurrentOf(vars), types.identifier('latest')),
+      types.objectExpression([
+        types.objectProperty(types.identifier('sig'), buildQuerySignature()),
+        types.objectProperty(types.identifier('page'), buildRequestedPage()),
+      ])
+    )
+  )
+
+/**
+ * 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.
  *
  * Returned as the resolved value of `fetchData`, so `DataProvider` stores the
- * whole accumulated list as its data.
+ * whole accumulated list as its data: the pages of the query on show, first
+ * to the page it stands on. An answer to anything but the latest request
+ * (`buildAccumulatingRequestMark`) is not kept, and gets the list as it is.
  *
  * `itemsPath` is where the rows sit inside a payload that wraps them
  * (`{ items: [...], total }`): the rows are read there and the accumulated list
@@ -178,10 +411,11 @@ export const buildAccumulatingResponseHandler = (
   perPage: number,
   itemsPath?: string[]
 ): types.ArrowFunctionExpression => {
-  const accumCurrent = (): types.MemberExpression =>
-    types.memberExpression(types.identifier(vars.accumRefVar), types.identifier('current'))
+  const accumCurrent = (): types.MemberExpression => accumCurrentOf(vars)
   const accumPages = (): types.MemberExpression =>
     types.memberExpression(accumCurrent(), types.identifier('pages'))
+  const latestOf = (key: string): types.MemberExpression =>
+    types.memberExpression(types.identifier('latest'), types.identifier(key))
   const payload = (): types.OptionalMemberExpression =>
     types.optionalMemberExpression(
       types.identifier('response'),
@@ -191,6 +425,8 @@ export const buildAccumulatingResponseHandler = (
     )
   const rowsPath = itemsPath?.length ? itemsPath : undefined
 
+  // Every page held up to `last`, flattened in page order — a numeric sort, so
+  // page 10 does not land between 1 and 2.
   const accumulatedRows = types.callExpression(
     types.memberExpression(
       types.callExpression(
@@ -198,12 +434,23 @@ export const buildAccumulatingResponseHandler = (
           types.callExpression(
             types.memberExpression(
               types.callExpression(
-                types.memberExpression(types.identifier('Object'), types.identifier('keys')),
-                [accumPages()]
+                types.memberExpression(
+                  types.callExpression(
+                    types.memberExpression(types.identifier('Object'), types.identifier('keys')),
+                    [accumPages()]
+                  ),
+                  types.identifier('map')
+                ),
+                [types.identifier('Number')]
               ),
-              types.identifier('map')
+              types.identifier('filter')
             ),
-            [types.identifier('Number')]
+            [
+              types.arrowFunctionExpression(
+                [types.identifier('p')],
+                types.binaryExpression('<=', types.identifier('p'), types.identifier('last'))
+              ),
+            ]
           ),
           types.identifier('sort')
         ),
@@ -242,73 +489,97 @@ export const buildAccumulatingResponseHandler = (
         ),
       ]),
       types.variableDeclaration('const', [
-        types.variableDeclarator(
-          types.identifier('page'),
-          types.logicalExpression(
-            '||',
-            types.callExpression(types.identifier('Number'), [
-              types.memberExpression(types.identifier('params'), types.identifier('page')),
-            ]),
-            types.numericLiteral(1)
-          )
-        ),
+        types.variableDeclarator(types.identifier('page'), buildRequestedPage()),
       ]),
       // Everything that identifies the QUERY, with the page zeroed out: two
       // fetches that differ only by page belong to the same accumulated list.
+      types.variableDeclaration('const', [
+        types.variableDeclarator(types.identifier('sig'), buildQuerySignature()),
+      ]),
+      // The request the list stands on now, recorded when it was made.
       types.variableDeclaration('const', [
         types.variableDeclarator(
-          types.identifier('sig'),
-          types.callExpression(
-            types.memberExpression(types.identifier('JSON'), types.identifier('stringify')),
-            [
-              types.objectExpression([
-                types.spreadElement(types.identifier('params')),
-                types.objectProperty(types.identifier('page'), types.numericLiteral(0)),
-              ]),
-            ]
+          types.identifier('latest'),
+          types.logicalExpression(
+            '||',
+            types.memberExpression(accumCurrent(), types.identifier('latest')),
+            types.objectExpression([
+              types.objectProperty(types.identifier('sig'), types.identifier('sig'), false, true),
+              types.objectProperty(types.identifier('page'), types.identifier('page'), false, true),
+            ])
           )
         ),
       ]),
+      // Only its answer is kept: an earlier query's, or a page past the one a
+      // filter / sort / search change restarted the list at, changes nothing.
       types.ifStatement(
-        types.binaryExpression(
-          '!==',
-          types.memberExpression(accumCurrent(), types.identifier('sig')),
-          types.identifier('sig')
+        types.logicalExpression(
+          '&&',
+          types.binaryExpression('===', types.identifier('sig'), latestOf('sig')),
+          types.binaryExpression('<=', types.identifier('page'), latestOf('page'))
         ),
         types.blockStatement([
+          types.ifStatement(
+            types.binaryExpression(
+              '!==',
+              types.memberExpression(accumCurrent(), types.identifier('sig')),
+              types.identifier('sig')
+            ),
+            types.blockStatement([
+              types.expressionStatement(
+                types.assignmentExpression(
+                  '=',
+                  types.memberExpression(accumCurrent(), types.identifier('sig')),
+                  types.identifier('sig')
+                )
+              ),
+              types.expressionStatement(
+                types.assignmentExpression('=', accumPages(), types.objectExpression([]))
+              ),
+            ])
+          ),
           types.expressionStatement(
             types.assignmentExpression(
               '=',
-              accumCurrent(),
-              types.objectExpression([
-                types.objectProperty(types.identifier('sig'), types.identifier('sig'), false, true),
-                types.objectProperty(types.identifier('pages'), types.objectExpression([])),
-              ])
+              types.memberExpression(accumPages(), types.identifier('page'), true),
+              types.identifier('rows')
             )
           ),
-        ])
-      ),
-      types.expressionStatement(
-        types.assignmentExpression(
-          '=',
-          types.memberExpression(accumPages(), types.identifier('page'), true),
-          types.identifier('rows')
-        )
-      ),
-      // A page that came back short is the last one. This is the only
-      // end-of-data signal a data source that cannot count ever gives.
-      types.expressionStatement(
-        types.callExpression(types.identifier(vars.setHasMoreFlagVar), [
-          types.binaryExpression(
-            '>=',
-            types.memberExpression(types.identifier('rows'), types.identifier('length')),
-            types.numericLiteral(perPage)
+          // A page that came back short is the last one. This is the only
+          // end-of-data signal a data source that cannot count ever gives.
+          types.ifStatement(
+            types.binaryExpression('===', types.identifier('page'), latestOf('page')),
+            types.blockStatement([
+              types.expressionStatement(
+                types.callExpression(types.identifier(vars.setHasMoreFlagVar), [
+                  types.binaryExpression(
+                    '>=',
+                    types.memberExpression(types.identifier('rows'), types.identifier('length')),
+                    types.numericLiteral(perPage)
+                  ),
+                ])
+              ),
+            ])
           ),
         ])
       ),
-      // Every page held so far, flattened in page order — a numeric sort, so
-      // page 10 does not land between 1 and 2. This is what DataProvider stores
-      // as its data, and so what the list renders.
+      // The pages of the query on show, up to the page the list stands on; all
+      // of them while the latest query has not answered yet.
+      types.variableDeclaration('const', [
+        types.variableDeclarator(
+          types.identifier('last'),
+          types.conditionalExpression(
+            types.binaryExpression(
+              '===',
+              types.memberExpression(accumCurrent(), types.identifier('sig')),
+              latestOf('sig')
+            ),
+            latestOf('page'),
+            types.identifier('Infinity')
+          )
+        ),
+      ]),
+      // This is what DataProvider stores as its data, and so what the list renders.
       types.returnStatement(
         rowsPath ? writeAtPath(payload(), rowsPath, accumulatedRows) : accumulatedRows
       ),
@@ -431,35 +702,103 @@ export const buildSentinelObserverEffect = (
     ])
   )
 
+const styleAttribute = (entries: Record<string, string | number>): types.JSXAttribute =>
+  types.jsxAttribute(
+    types.jsxIdentifier('style'),
+    types.jsxExpressionContainer(
+      types.objectExpression(
+        Object.entries(entries).map(([key, value]) =>
+          types.objectProperty(
+            types.identifier(key),
+            typeof value === 'number' ? types.numericLiteral(value) : types.stringLiteral(value)
+          )
+        )
+      )
+    )
+  )
+
+const sentinelTag = (
+  tag: string,
+  attributes: types.JSXAttribute[],
+  children: types.JSXElement[] = []
+): types.JSXElement =>
+  types.jsxElement(
+    types.jsxOpeningElement(types.jsxIdentifier(tag), attributes, children.length === 0),
+    children.length === 0 ? null : types.jsxClosingElement(types.jsxIdentifier(tag)),
+    children,
+    children.length === 0
+  )
+
+/** Parents whose content is phrasing only: a `<div>` in one closes it in the parser. */
+const PHRASING_PARENTS: ReadonlySet<string> = new Set([
+  'p',
+  'span',
+  'a',
+  'button',
+  'label',
+  'legend',
+  'caption',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'strong',
+  'em',
+  'b',
+  'i',
+  'small',
+])
+
 /**
  * `<div ref={ds_N_sentinelRef} aria-hidden="true" style={{ height: '1px' }} />`
  *
  * An invisible one-pixel row after the list. It is generated rather than
  * authored because it is not a control — there is nothing to style or click,
  * only a position in the document for the observer to watch.
+ *
+ * It takes the element its parent may hold: a table section holds rows, a
+ * list holds items, a paragraph holds phrasing. A `<div>` among a table's
+ * rows is moved out of the table by the parser, so the server's markup and
+ * the client's tree differ and React's hydration fails on every such list.
  */
-export const buildSentinelElement = (vars: InfiniteScrollVars): types.JSXElement =>
-  types.jsxElement(
-    types.jsxOpeningElement(
-      types.jsxIdentifier('div'),
-      [
-        types.jsxAttribute(
-          types.jsxIdentifier('ref'),
-          types.jsxExpressionContainer(types.identifier(vars.sentinelRefVar))
-        ),
-        types.jsxAttribute(types.jsxIdentifier('aria-hidden'), types.stringLiteral('true')),
-        types.jsxAttribute(
-          types.jsxIdentifier('style'),
-          types.jsxExpressionContainer(
-            types.objectExpression([
-              types.objectProperty(types.identifier('height'), types.stringLiteral('1px')),
-            ])
-          )
-        ),
-      ],
-      true
+export const buildSentinelElement = (
+  vars: InfiniteScrollVars,
+  parentTag: string | null = null
+): types.JSXElement => {
+  const observed = [
+    types.jsxAttribute(
+      types.jsxIdentifier('ref'),
+      types.jsxExpressionContainer(types.identifier(vars.sentinelRefVar))
     ),
-    null,
-    [],
-    true
-  )
+    types.jsxAttribute(types.jsxIdentifier('aria-hidden'), types.stringLiteral('true')),
+  ]
+  const emptyCell = () => sentinelTag('td', [styleAttribute({ padding: 0, border: 0 })])
+  switch (parentTag) {
+    case 'tbody':
+    case 'thead':
+    case 'tfoot':
+      return sentinelTag('tr', [...observed, styleAttribute({ height: '1px' })], [emptyCell()])
+    case 'table':
+      return sentinelTag(
+        'tbody',
+        [...observed, styleAttribute({ height: '1px' })],
+        [sentinelTag('tr', [], [emptyCell()])]
+      )
+    case 'tr':
+      return sentinelTag('td', [...observed, styleAttribute({ height: '1px', padding: 0 })])
+    case 'ul':
+    case 'ol':
+    case 'menu':
+      return sentinelTag('li', [...observed, styleAttribute({ height: '1px', listStyle: 'none' })])
+    default:
+      if (parentTag && PHRASING_PARENTS.has(parentTag)) {
+        return sentinelTag('span', [
+          ...observed,
+          styleAttribute({ display: 'block', height: '1px' }),
+        ])
+      }
+      return sentinelTag('div', [...observed, styleAttribute({ height: '1px' })])
+  }
+}

package/src/list-sort-order.ts

@@ -0,0 +1,34 @@
+import { PRODUCTS_TABLE_NAME } from './product-price-sort'
+
+/**
+ * How a generated list route orders the rows a visitor's sort leaves tied or
+ * empty, in the SQL fetchers that serve the platform's listing pages
+ * (`teleport.ts`, `postgresql.ts`).
+ */
+
+/**
+ * The platform tables whose listing pages offer visitors a sort — the
+ * products page, the blog listing, the booking page — each with an `id` from
+ * its first migration.
+ */
+const LISTING_TABLES_WITH_ID: ReadonlySet<string> = new Set([
+  PRODUCTS_TABLE_NAME,
+  'teleport_blog_posts',
+  'teleport_booking_items',
+])
+
+/**
+ * Whether a table is one of those listing tables, so its rows are told apart
+ * by `id` even when the project saved no columns for it (see `row-order.ts`).
+ */
+export const isListingTableWithId = (tableName: string): boolean =>
+  LISTING_TABLES_WITH_ID.has(tableName)
+
+/**
+ * Appended to every sorted column: a row without a value comes after the
+ * rows with one, whichever the direction. PostgreSQL puts NULLs FIRST in a
+ * descending order, so "longest read first" opened on the posts without a
+ * reading time. Only on the ORDER BY a fetcher tries first — its plain-column
+ * fallback leaves it out, for a database that rejects the clause.
+ */
+export const SORT_NULLS_LAST_SQL = ' NULLS LAST'