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

package/src/infinite-scroll.ts

@@ -15,6 +15,15 @@ import * as types from '@babel/types'
  * 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.
  */
 
 // tslint:disable:no-any
@@ -62,6 +71,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 +171,56 @@ const writeAtPath = (
   ])
 }
 
+/** `JSON.stringify({ ...params, page: 0 })`: everything that identifies the query but the page. */
+const buildQuerySignature = (): types.CallExpression =>
+  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)),
+      ]),
+    ]
+  )
+
+/** `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()),
+      ])
+    )
+  )
+
 /**
  * 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 +233,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 +247,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 +256,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 +311,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 +524,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'

package/src/pagination-controls.ts

@@ -17,7 +17,9 @@ export const PAGINATION_CONTROL_ATTR = 'data-tq-pagination-control'
  * `'pages'` is the container the page-number buttons are repeated into and
  * `'page'` the single template button inside it. `'ellipsis'` and `'sentinel'`
  * are reserved for an authored gap marker / scroll sentinel; until a builder
- * emits them both runtimes fall back to generating their own.
+ * emits them both runtimes fall back to generating their own. `'range'` is a
+ * TEXT element ("Showing 1–8 of 12") both runtimes fill with the live row
+ * range — see `range-control.ts`.
  */
 export type PaginationControlKind =
   | 'first'
@@ -29,6 +31,26 @@ export type PaginationControlKind =
   | 'last'
   | 'load-more'
   | 'sentinel'
+  | 'range'
+
+/**
+ * Which mapper a `range` control belongs to, when it does not sit inside that
+ * mapper's pagination container: the array mapper's editor node id, which the
+ * UIDL carries as `nodeId` on the `cms-list-repeater`. A template's footer
+ * ("Showing 1–8 of 12") is laid out by the author, not inside a widget, so the
+ * container-ownership rule the buttons use cannot reach it.
+ *
+ * ⛔ Both attribute names must stay identical to the editor's
+ * (`array-mapper-pagination-settings.ts`) and the canvas renderer's
+ * (`array-mapper-pagination.ts`) copies.
+ */
+export const PAGINATION_FOR_ATTR = 'data-tq-pagination-for'
+
+/** The words of a `range` control, with `{from}`, `{to}` and `{total}` placeholders. */
+export const RANGE_TEMPLATE_ATTR = 'data-tq-range-template'
+
+/** What a `range` control reads when it carries no template. */
+export const DEFAULT_RANGE_TEMPLATE = '{from}–{to} of {total}'
 
 // tslint:disable:no-any
 
@@ -152,13 +174,14 @@ export function removeJSXAttribute(node: any, attrName: string): void {
  *
  * Children carrying NO marker are always kept: they are the author's own
  * additions (a page counter, a spacer) and the generator has no business
- * deciding whether they belong.
+ * deciding whether they belong. A `range` text is kept in every mode too: the
+ * row range is meaningful whether the list pages or appends.
  */
 export function dropInactivePaginationControls(
   paginationNode: any,
   activeKinds: PaginationControlKind[]
 ): void {
-  const active = new Set<string>(activeKinds)
+  const active = new Set<string>([...activeKinds, 'range'])
   const prune = (node: any): void => {
     if (!node || !Array.isArray(node.children)) {
       return