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

package/src/filter-utils.ts

@@ -1,5 +1,22 @@
 import * as types from '@babel/types'
 
+/**
+ * One entry of the filter TREE the inspector authors: a condition leaf, or a
+ * group of further entries joined with `and` / `or`. The generated fetchers
+ * read this same tree (`normalizeFilterTree` in utils.ts), so the group
+ * operator must reach them intact — flattening an `or` group into its leaves
+ * turns "any of" into "all of" on the published site.
+ */
+export type FilterCondition = { source?: string; operand?: string; destination: unknown }
+export type FilterGroup = { type: 'group'; operator?: string; children: FilterEntry[] }
+export type FilterEntry = FilterCondition | FilterGroup
+
+export const isFilterGroup = (entry: unknown): entry is FilterGroup =>
+  !!entry &&
+  typeof entry === 'object' &&
+  (entry as { type?: string }).type === 'group' &&
+  Array.isArray((entry as { children?: unknown }).children)
+
 // Build a single filter entry: { source: '<src>', destination: <destExpr>, operand: '<op>' }
 const buildFilterEntry = (
   source: string,
@@ -12,10 +29,25 @@ const buildFilterEntry = (
     types.objectProperty(types.identifier('operand'), types.stringLiteral(operand)),
   ])
 
+// { type: 'group', operator: 'and' | 'or', children: <childrenExpr> }
+const buildFilterGroup = (
+  operator: string | undefined,
+  childrenExpr: types.Expression
+): types.ObjectExpression =>
+  types.objectExpression([
+    types.objectProperty(types.identifier('type'), types.stringLiteral('group')),
+    types.objectProperty(
+      types.identifier('operator'),
+      types.stringLiteral(operator === 'or' ? 'or' : 'and')
+    ),
+    types.objectProperty(types.identifier('children'), childrenExpr),
+  ])
+
 // Predicate:
-//   (__f) => __f.destination !== '' && __f.destination !== null &&
-//            __f.destination !== undefined &&
-//            !(Array.isArray(__f.destination) && __f.destination.filter(Boolean).length === 0)
+//   (__f) => __f.type === 'group' ||
+//            (__f.destination !== '' && __f.destination !== null &&
+//             __f.destination !== undefined &&
+//             !(Array.isArray(__f.destination) && __f.destination.filter(Boolean).length === 0))
 // Used at runtime to drop filter conditions whose destination resolves to an
 // empty value. Keeps the page generic: state-bound filters (e.g.
 // `selectedCategory === ''` after picking "All Categories") and url-bound
@@ -25,7 +57,9 @@ const buildFilterEntry = (
 // string and returns zero rows. The array clause covers array-overlap filters
 // (e.g. category `CATEGORY_DESCENDANTS[selectedCategory] || []`) whose "All"
 // reset resolves to `[]` — an empty overlap set must mean "no filter", not
-// "match nothing".
+// "match nothing". A group has no destination of its own and is kept; its
+// children carry the same `.filter(...)`, and a group emptied that way is
+// dropped by the fetcher's `normalizeFilterTree`.
 const buildNonEmptyDestinationPredicate = (): types.ArrowFunctionExpression => {
   const f = types.identifier('__f')
   const dest = types.memberExpression(f, types.identifier('destination'))
@@ -49,25 +83,58 @@ const buildNonEmptyDestinationPredicate = (): types.ArrowFunctionExpression => {
   return types.arrowFunctionExpression(
     [f],
     types.logicalExpression(
-      '&&',
+      '||',
+      types.binaryExpression(
+        '===',
+        types.memberExpression(f, types.identifier('type')),
+        types.stringLiteral('group')
+      ),
       types.logicalExpression(
         '&&',
         types.logicalExpression(
           '&&',
-          types.binaryExpression('!==', dest, types.stringLiteral('')),
-          types.binaryExpression('!==', dest, types.nullLiteral())
+          types.logicalExpression(
+            '&&',
+            types.binaryExpression('!==', dest, types.stringLiteral('')),
+            types.binaryExpression('!==', dest, types.nullLiteral())
+          ),
+          types.binaryExpression('!==', dest, types.identifier('undefined'))
         ),
-        types.binaryExpression('!==', dest, types.identifier('undefined'))
-      ),
-      types.unaryExpression('!', isEmptyArray)
+        types.unaryExpression('!', isEmptyArray)
+      )
     )
   )
 }
 
+// `[ entry, ... ].filter(<non-empty destination>)`, recursing into groups so
+// every level of the tree drops its empty conditions at runtime.
+const buildFilteredEntriesArray = (
+  filters: FilterEntry[],
+  buildDestinationExpression: (destination: unknown) => types.Expression
+): types.CallExpression => {
+  const entries = filters.map((filter) =>
+    isFilterGroup(filter)
+      ? buildFilterGroup(
+          filter.operator,
+          buildFilteredEntriesArray(filter.children, buildDestinationExpression)
+        )
+      : buildFilterEntry(
+          filter.source || '',
+          buildDestinationExpression(filter.destination),
+          filter.operand || ''
+        )
+  )
+
+  return types.callExpression(
+    types.memberExpression(types.arrayExpression(entries), types.identifier('filter')),
+    [buildNonEmptyDestinationPredicate()]
+  )
+}
+
 // Build the AST for:
 //   JSON.stringify(
-//     [ {source, destination, operand}, ... ]
-//       .filter(__f => __f.destination !== '' && __f.destination !== null && __f.destination !== undefined)
+//     [ {source, destination, operand}, { type: 'group', operator, children: [...].filter(...) }, ... ]
+//       .filter(__f => __f.type === 'group' || (__f.destination !== '' && __f.destination !== null && __f.destination !== undefined))
 //   )
 //
 // The `.filter(...)` step is unconditional even when every entry is a static
@@ -76,32 +143,39 @@ const buildNonEmptyDestinationPredicate = (): types.ArrowFunctionExpression => {
 // type is added but its empty-value behavior is forgotten don't silently
 // re-introduce empty-string filters.
 export const buildFiltersStringifyCall = (
-  filters: Array<{ source?: string; operand?: string; destination: unknown }>,
+  filters: FilterEntry[],
   buildDestinationExpression: (destination: unknown) => types.Expression
-): types.CallExpression => {
-  const entries = filters.map((filter) =>
-    buildFilterEntry(
-      filter.source || '',
-      buildDestinationExpression(filter.destination),
-      filter.operand || ''
-    )
+): types.CallExpression =>
+  types.callExpression(
+    types.memberExpression(types.identifier('JSON'), types.identifier('stringify')),
+    [buildFilteredEntriesArray(filters, buildDestinationExpression)]
   )
 
-  const filteredArray = types.callExpression(
-    types.memberExpression(types.arrayExpression(entries), types.identifier('filter')),
-    [buildNonEmptyDestinationPredicate()]
-  )
+// The build-time counterpart for `getStaticProps`: every destination is a
+// literal (the dynamic ones were pruned — see `pruneFilterTree`), so the tree
+// is written out as plain string literals with no runtime `.filter(...)`.
+const buildStaticFilterEntryAST = (filter: FilterEntry): types.ObjectExpression =>
+  isFilterGroup(filter)
+    ? buildFilterGroup(
+        filter.operator,
+        types.arrayExpression(filter.children.map(buildStaticFilterEntryAST))
+      )
+    : buildFilterEntry(
+        filter.source || '',
+        types.stringLiteral(typeof filter.destination === 'string' ? filter.destination : ''),
+        filter.operand || ''
+      )
 
-  return types.callExpression(
+export const buildStaticFiltersStringifyCall = (filters: FilterEntry[]): types.CallExpression =>
+  types.callExpression(
     types.memberExpression(types.identifier('JSON'), types.identifier('stringify')),
-    [filteredArray]
+    [types.arrayExpression(filters.map(buildStaticFilterEntryAST))]
   )
-}
 
 // Convenience: push `filters: <call>` onto a paramsProps array.
 export const appendFiltersParam = (
   paramsProps: types.ObjectProperty[],
-  filters: Array<{ source?: string; operand?: string; destination: unknown }> | undefined,
+  filters: FilterEntry[] | undefined,
   buildDestinationExpression: (destination: unknown) => types.Expression
 ): void => {
   if (!filters || filters.length === 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'