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

package/src/range-control.ts

@@ -0,0 +1,207 @@
+import * as types from '@babel/types'
+import {
+  DEFAULT_RANGE_TEMPLATE,
+  PAGINATION_CONTROL_ATTR,
+  RANGE_TEMPLATE_ATTR,
+  readJSXAttributeString,
+} from './pagination-controls'
+
+/**
+ * The `range` control: a text element ("Showing 1–8 of 12") filled with the
+ * live row range of the mapper it belongs to.
+ *
+ * The author's words stay theirs — they are read off `data-tq-range-template`
+ * with `{from}`, `{to}` and `{total}` standing for the numbers — and the drawn
+ * text is kept, verbatim, until the count endpoint has answered: `ds_N_total`
+ * is `null` until then, and a range of `NaN` or `undefined` is worse than the
+ * placeholder the designer chose.
+ *
+ *   buttons / numbered   from = total === 0 ? 0 : (page − 1) × perPage + 1
+ *   infinite scroll      from = total === 0 ? 0 : 1
+ *   both                 to   = min(page × perPage, total)
+ *
+ * In an appending list `page` is the number of pages loaded so far, so the
+ * same `to` counts the rows on screen. Numbers go through
+ * `toLocaleString("en-US")`, the way the canvas prints them.
+ *
+ * ⛔ The arithmetic must agree with the canvas renderer's
+ * (`packages/renderer/src/node-types/array-mapper-pagination.ts`): a builder
+ * styling "Showing 1–8 of 12" must see the same words on the published page.
+ */
+
+// tslint:disable:no-any
+
+export interface RangeControlVars {
+  /** `ds_N_total` — `null` until counted. */
+  totalVar: string
+  /** The page the list stands on: `ds_N_page`, or `ds_N_state.page` beside a search. */
+  currentPageExpr: types.Expression
+  perPage: number
+  /** An appending list always shows from the first row. */
+  infiniteScroll: boolean
+}
+
+const PLACEHOLDER = /\{(from|to|total)\}/g
+
+const total = (vars: RangeControlVars): types.Identifier => types.identifier(vars.totalVar)
+
+const page = (vars: RangeControlVars): types.Expression =>
+  types.cloneNode(vars.currentPageExpr, true) as types.Expression
+
+/** `total === 0 ? 0 : <firstRow>` */
+const unlessEmpty = (vars: RangeControlVars, firstRow: types.Expression): types.Expression =>
+  types.conditionalExpression(
+    types.binaryExpression('===', total(vars), types.numericLiteral(0)),
+    types.numericLiteral(0),
+    firstRow
+  )
+
+const buildFrom = (vars: RangeControlVars): types.Expression =>
+  unlessEmpty(
+    vars,
+    vars.infiniteScroll
+      ? types.numericLiteral(1)
+      : types.binaryExpression(
+          '+',
+          types.binaryExpression(
+            '*',
+            types.binaryExpression('-', page(vars), types.numericLiteral(1)),
+            types.numericLiteral(vars.perPage)
+          ),
+          types.numericLiteral(1)
+        )
+  )
+
+/** `Math.min(page * perPage, total)` */
+const buildTo = (vars: RangeControlVars): types.Expression =>
+  types.callExpression(types.memberExpression(types.identifier('Math'), types.identifier('min')), [
+    types.binaryExpression('*', page(vars), types.numericLiteral(vars.perPage)),
+    total(vars),
+  ])
+
+const buildNumber = (placeholder: string, vars: RangeControlVars): types.Expression => {
+  const value =
+    placeholder === 'from' ? buildFrom(vars) : placeholder === 'to' ? buildTo(vars) : total(vars)
+  return types.callExpression(types.memberExpression(value, types.identifier('toLocaleString')), [
+    types.stringLiteral('en-US'),
+  ])
+}
+
+const templateElement = (text: string, tail: boolean): types.TemplateElement =>
+  types.templateElement(
+    { raw: text.replace(/\\|`|\$\{/g, (match) => `\\${match}`), cooked: text },
+    tail
+  )
+
+/**
+ * The JSX printer writes a brace inside a static attribute as `&#123;` /
+ * `&#125;` so it is never read as an expression; the placeholders are braces,
+ * so the template is read back through that escaping.
+ */
+const decodeBraces = (text: string): string =>
+  text
+    .replace(/&#123;|&#x7b;|&lbrace;/gi, '{')
+    .replace(/&#125;|&#x7d;|&rbrace;/gi, '}')
+    .replace(/&amp;/g, '&')
+
+/** The author's template as a template literal, each placeholder a live number. */
+const buildLiveText = (template: string, vars: RangeControlVars): types.TemplateLiteral => {
+  const quasis: types.TemplateElement[] = []
+  const expressions: types.Expression[] = []
+  const placeholder = new RegExp(PLACEHOLDER.source, 'g')
+  let last = 0
+  let match = placeholder.exec(template)
+  while (match) {
+    quasis.push(templateElement(template.slice(last, match.index), false))
+    expressions.push(buildNumber(match[1], vars))
+    last = match.index + match[0].length
+    match = placeholder.exec(template)
+  }
+  quasis.push(templateElement(template.slice(last), true))
+  return types.templateLiteral(quasis, expressions)
+}
+
+/**
+ * Every `range` control under a component body, in document order. The body is
+ * a `BlockStatement`, so the walk has to cross statements, ternaries and the
+ * `cond && <jsx/>` of a gated section, not only JSX children.
+ */
+export const findRangeControls = (root: any): any[] => {
+  const found: any[] = []
+  const traverse = (node: any): void => {
+    if (!node || typeof node !== 'object') {
+      return
+    }
+    if (
+      node.type === 'JSXElement' &&
+      readJSXAttributeString(node, PAGINATION_CONTROL_ATTR) === 'range'
+    ) {
+      found.push(node)
+    }
+    if (Array.isArray(node.children)) {
+      node.children.forEach(traverse)
+    }
+    if (Array.isArray(node.body)) {
+      node.body.forEach(traverse)
+    } else {
+      traverse(node.body)
+    }
+    traverse(node.consequent)
+    traverse(node.alternate)
+    traverse(node.left)
+    traverse(node.right)
+    traverse(node.test)
+    traverse(node.expression)
+    traverse(node.argument)
+  }
+  traverse(root)
+  return found
+}
+
+/**
+ * The element's own children as one expression, so they can be the fallback of
+ * a ternary: plain text becomes a string, anything richer rides along in a
+ * fragment.
+ */
+const drawnText = (children: any[]): types.Expression => {
+  const texts: string[] = []
+  for (const child of children) {
+    if (child.type === 'JSXText') {
+      texts.push(child.value)
+    } else if (
+      child.type === 'JSXExpressionContainer' &&
+      child.expression?.type === 'StringLiteral'
+    ) {
+      texts.push(child.expression.value)
+    } else {
+      return types.jsxFragment(types.jsxOpeningFragment(), types.jsxClosingFragment(), children)
+    }
+  }
+  return types.stringLiteral(texts.join('').replace(/\s+/g, ' ').trim())
+}
+
+/**
+ * `{total === null ? <drawn text> : `<template with live numbers>`}` in place of
+ * the element's children. The marker and template attributes stay on the
+ * element, so the published DOM carries the same contract the canvas reads.
+ */
+export const wireRangeControl = (node: any, vars: RangeControlVars): void => {
+  const template =
+    decodeBraces(readJSXAttributeString(node, RANGE_TEMPLATE_ATTR)) || DEFAULT_RANGE_TEMPLATE
+  const drawn = drawnText(Array.isArray(node.children) ? node.children : [])
+  node.children = [
+    types.jsxExpressionContainer(
+      types.conditionalExpression(
+        types.binaryExpression('===', total(vars), types.nullLiteral()),
+        drawn,
+        buildLiveText(template, vars)
+      )
+    ),
+  ]
+  if (node.openingElement) {
+    node.openingElement.selfClosing = false
+  }
+  if (!node.closingElement && node.openingElement?.name) {
+    node.closingElement = types.jsxClosingElement(types.cloneNode(node.openingElement.name, true))
+  }
+}

package/src/row-order.ts

@@ -1,4 +1,4 @@
-import { supportsProductPriceSort } from './product-price-sort'
+import { isListingTableWithId } from './list-sort-order'
 
 interface ColumnLike {
   name?: unknown
@@ -7,8 +7,9 @@ interface ColumnLike {
 
 /**
  * The column that tells a table's rows apart, read from the table the project
- * saved: its primary key, else a column named `id`. The products table has `id`
- * from its first migration. Null when neither is known — then nothing is added,
+ * saved: its primary key, else a column named `id`. The platform listing
+ * tables (products, blog posts, booking items) have `id` from their first
+ * migration. Null when neither is known — then nothing is added,
  * rather than a column that may not exist.
  */
 export const rowIdentityColumn = (
@@ -27,7 +28,7 @@ export const rowIdentityColumn = (
   if (typeof key === 'string') {
     return key
   }
-  return supportsProductPriceSort(tableName) ? 'id' : null
+  return isListingTableWithId(tableName) ? 'id' : null
 }
 
 /**

package/src/search-input.ts

@@ -0,0 +1,190 @@
+import * as types from '@babel/types'
+import { readJSXAttributeString } from './pagination-controls'
+
+/**
+ * The search inputs of a page, and the mapper each one searches.
+ *
+ * Two kinds exist. The platform's own `DataSourceSearchInputNode` renders with
+ * a `search-input` class and is paired with a search-enabled mapper BY ORDER
+ * — the first such input searches the first such mapper. A page's OWN text
+ * input, kept where its author drew it, is marked `data-tq-search-for` with
+ * the node id of the mapper it searches — the marker the editor writes
+ * (`listing-search-field.ts`) and the canvas renderer binds by
+ * (`mapper-search-registry.ts`). Marked inputs are paired by that id and
+ * never take a place in the order, so a template's toolbar box beside a
+ * platform listing shifts nothing.
+ *
+ * Both are wired the same way: controlled by the mapper's search query state,
+ * which the mapper debounces into its fetch and keeps in the address.
+ */
+
+export const SEARCH_FOR_ATTR = 'data-tq-search-for'
+
+// tslint:disable:no-any
+
+export interface SearchInput {
+  node: any
+  /** The mapper node id a marked input names; undefined for a platform input paired by order. */
+  forNodeId?: string
+}
+
+function isInput(node: any): boolean {
+  return node?.type === 'JSXElement' && node.openingElement?.name?.name === 'input'
+}
+
+function hasSearchInputClass(node: any): boolean {
+  return readJSXAttributeString(node, 'className').includes('search-input')
+}
+
+/** Every search input under `root`, in document order. */
+export function findAllSearchInputsInJSX(root: any): SearchInput[] {
+  const results: SearchInput[] = []
+
+  const traverse = (node: any): void => {
+    if (!node) {
+      return
+    }
+
+    if (isInput(node)) {
+      const forNodeId = readJSXAttributeString(node, SEARCH_FOR_ATTR)
+      if (forNodeId) {
+        results.push({ node, forNodeId })
+      } else if (hasSearchInputClass(node)) {
+        results.push({ node })
+      }
+    }
+
+    if (node.children && Array.isArray(node.children)) {
+      node.children.forEach((c: any) => traverse(c))
+    }
+    if (node.body) {
+      if (Array.isArray(node.body)) {
+        node.body.forEach((s: any) => traverse(s))
+      } else {
+        traverse(node.body)
+      }
+    }
+    if (node.consequent) {
+      traverse(node.consequent)
+    }
+    if (node.alternate) {
+      traverse(node.alternate)
+    }
+    // `{activeTabIndex === 0 && (<div>…<DataProvider/>…</div>)}` — a tab
+    // panel, a gated section: the provider sits on the RIGHT of a logical
+    // expression (or in a ternary's `test`), which is not a child, a body or
+    // an argument. Left unvisited, the products list under the first tab of
+    // a shop was never paginated or seeded, and rendered nothing.
+    if (node.left) {
+      traverse(node.left)
+    }
+    if (node.right) {
+      traverse(node.right)
+    }
+    if (node.test) {
+      traverse(node.test)
+    }
+    if (node.expression) {
+      traverse(node.expression)
+    }
+    if (node.argument) {
+      traverse(node.argument)
+    }
+  }
+
+  traverse(root)
+  return results
+}
+
+/**
+ * The search-enabled usage each input searches: a marked input's by the mapper
+ * node id it names, a platform input's by its place among the platform inputs.
+ */
+export function pairSearchInputs<Usage extends { searchEnabled: boolean; nodeId?: string }>(
+  inputs: SearchInput[],
+  usages: Usage[]
+): Map<any, Usage> {
+  const searchable = usages.filter((usage) => usage.searchEnabled)
+  const paired = new Map<any, Usage>()
+  let position = 0
+  for (const input of inputs) {
+    if (input.forNodeId) {
+      const named = searchable.find((candidate) => candidate.nodeId === input.forNodeId)
+      if (named) {
+        paired.set(input.node, named)
+      }
+      continue
+    }
+    const next = searchable[position]
+    position += 1
+    if (next) {
+      paired.set(input.node, next)
+    }
+  }
+  return paired
+}
+
+/**
+ * Controls the input by the mapper's query: `value` reads it, `onChange`
+ * writes it. A marked input may sit inside a form of the page's own; Enter
+ * in it must not submit that form and reload the filtered list away.
+ */
+export function wireSearchInput(
+  input: SearchInput,
+  vars: { searchQueryVar: string; setSearchQueryVar: string }
+): void {
+  const attributes = input.node.openingElement.attributes.filter(
+    (attr: any) => !['onChange', 'value', 'onKeyDown'].includes(attr.name?.name)
+  )
+  attributes.push(
+    types.jsxAttribute(
+      types.jsxIdentifier('onChange'),
+      types.jsxExpressionContainer(
+        types.arrowFunctionExpression(
+          [types.identifier('e')],
+          types.callExpression(types.identifier(vars.setSearchQueryVar), [
+            types.memberExpression(
+              types.memberExpression(types.identifier('e'), types.identifier('target')),
+              types.identifier('value')
+            ),
+          ])
+        )
+      )
+    ),
+    types.jsxAttribute(
+      types.jsxIdentifier('value'),
+      types.jsxExpressionContainer(types.identifier(vars.searchQueryVar))
+    )
+  )
+  if (input.forNodeId) {
+    attributes.push(
+      types.jsxAttribute(
+        types.jsxIdentifier('onKeyDown'),
+        types.jsxExpressionContainer(
+          types.arrowFunctionExpression(
+            [types.identifier('e')],
+            types.blockStatement([
+              types.ifStatement(
+                types.binaryExpression(
+                  '===',
+                  types.memberExpression(types.identifier('e'), types.identifier('key')),
+                  types.stringLiteral('Enter')
+                ),
+                types.expressionStatement(
+                  types.callExpression(
+                    types.memberExpression(
+                      types.identifier('e'),
+                      types.identifier('preventDefault')
+                    ),
+                    []
+                  )
+                )
+              ),
+            ])
+          )
+        )
+      )
+    )
+  }
+  input.node.openingElement.attributes = attributes
+}

package/src/sort-utils.ts

@@ -1,6 +1,11 @@
 import * as types from '@babel/types'
 import { ASTUtils } from '@teleporthq/teleport-plugin-common'
-import { UIDLExpressionValue, UIDLStaticValue } from '@teleporthq/teleport-types'
+import { JSIdentifiers } from '@teleporthq/teleport-shared'
+import {
+  UIDLExpressionValue,
+  UIDLStateDefinition,
+  UIDLStaticValue,
+} from '@teleporthq/teleport-types'
 
 export interface DynamicSortAST {
   field: types.Expression
@@ -18,22 +23,26 @@ const SKIP_IDENTIFIERS = new Set([
   'console',
 ])
 
-const collectIdentifiers = (node: types.Node | null | undefined, acc: Set<string>): void => {
+const collectIdentifiers = (
+  node: types.Node | null | undefined,
+  acc: Set<string>,
+  skip: ReadonlySet<string> = SKIP_IDENTIFIERS
+): void => {
   if (!node || typeof node !== 'object') {
     return
   }
 
   if (node.type === 'Identifier') {
-    if (!SKIP_IDENTIFIERS.has(node.name)) {
+    if (!skip.has(node.name)) {
       acc.add(node.name)
     }
     return
   }
 
   if (node.type === 'MemberExpression') {
-    collectIdentifiers(node.object, acc)
+    collectIdentifiers(node.object, acc, skip)
     if (node.computed) {
-      collectIdentifiers(node.property, acc)
+      collectIdentifiers(node.property, acc, skip)
     }
     return
   }
@@ -43,9 +52,9 @@ const collectIdentifiers = (node: types.Node | null | undefined, acc: Set<string
     // tslint:disable-next-line:no-any
     const child = (node as any)[key]
     if (Array.isArray(child)) {
-      child.forEach((c) => collectIdentifiers(c, acc))
+      child.forEach((c) => collectIdentifiers(c, acc, skip))
     } else if (child && typeof child === 'object' && typeof child.type === 'string') {
-      collectIdentifiers(child, acc)
+      collectIdentifiers(child, acc, skip)
     }
   }
 }
@@ -111,24 +120,158 @@ export const extractDynamicSort = (
   }
 }
 
-// Build the AST for `sorts: JSON.stringify([{ field: <fieldExpr>, order: <orderExpr> }])`
-const buildDynamicSortsProperty = (dynamicSort: DynamicSortAST): types.ObjectProperty => {
-  return types.objectProperty(
-    types.identifier('sorts'),
-    types.callExpression(
-      types.memberExpression(types.identifier('JSON'), types.identifier('stringify')),
-      [
-        types.arrayExpression([
-          types.objectExpression([
-            types.objectProperty(types.identifier('field'), types.cloneNode(dynamicSort.field)),
-            types.objectProperty(types.identifier('order'), types.cloneNode(dynamicSort.order)),
-          ]),
+// `JSON.stringify([{ field: <fieldExpr>, order: <orderExpr> }])`
+const buildDynamicSortsValue = (dynamicSort: DynamicSortAST): types.CallExpression =>
+  types.callExpression(
+    types.memberExpression(types.identifier('JSON'), types.identifier('stringify')),
+    [
+      types.arrayExpression([
+        types.objectExpression([
+          types.objectProperty(types.identifier('field'), types.cloneNode(dynamicSort.field, true)),
+          types.objectProperty(types.identifier('order'), types.cloneNode(dynamicSort.order, true)),
         ]),
-      ]
-    )
+      ]),
+    ]
   )
+
+// Build the AST for `sorts: JSON.stringify([{ field: <fieldExpr>, order: <orderExpr> }])`
+const buildDynamicSortsProperty = (dynamicSort: DynamicSortAST): types.ObjectProperty =>
+  types.objectProperty(types.identifier('sorts'), buildDynamicSortsValue(dynamicSort))
+
+/**
+ * A page state a state-bound sort reads, at the value the visitor starts with.
+ */
+export interface SortStateDefault {
+  /** The state's binding in the component: the name the sort expressions read. */
+  binding: string
+  value: string | number | boolean
 }
 
+// Names a sort expression may read besides its states: they mean the same on
+// the server and in the browser.
+const CONSTANT_IDENTIFIERS: ReadonlySet<string> = new Set(['undefined', 'NaN', 'Infinity'])
+
+const isStartingValue = (value: unknown): value is SortStateDefault['value'] =>
+  typeof value === 'string' ||
+  typeof value === 'boolean' ||
+  (typeof value === 'number' && Number.isFinite(value))
+
+/**
+ * The states a state-bound sort reads, at their defaults: the sort a visitor
+ * starts with, which the build can fetch the first page by.
+ *
+ * Only when every name the column and the direction read is a state of this
+ * component starting at a fixed value. Anything else they read — a prop, the
+ * router, `window` — or a state the page seeds from its data leaves the build
+ * unable to know the starting sort: `undefined`, and the list fetches its first
+ * page in the browser. An empty list is a sort that reads nothing.
+ */
+export const readSortStateDefaults = (
+  dynamicSort: DynamicSortAST,
+  stateDefinitions: Record<string, UIDLStateDefinition> | undefined
+): SortStateDefault[] | undefined => {
+  const read = new Set<string>()
+  collectIdentifiers(dynamicSort.field, read, CONSTANT_IDENTIFIERS)
+  collectIdentifiers(dynamicSort.order, read, CONSTANT_IDENTIFIERS)
+
+  // A state's binding is its sanitised name, as the component declares it.
+  const stateByBinding = new Map<string, UIDLStateDefinition>()
+  Object.entries(stateDefinitions ?? {}).forEach(([key, definition]) => {
+    stateByBinding.set(JSIdentifiers.createSafeJSIdentifier(key), definition)
+  })
+
+  const defaults: SortStateDefault[] = []
+  for (const binding of Array.from(read)) {
+    const definition = stateByBinding.get(binding)
+    if (
+      !definition ||
+      definition.dataSourceBinding ||
+      definition.query ||
+      !isStartingValue(definition.defaultValue)
+    ) {
+      return undefined
+    }
+    defaults.push({ binding, value: definition.defaultValue })
+  }
+  return defaults
+}
+
+/**
+ * A list repeater's own sort, read the one way for every part of the plugin
+ * that fetches the list's rows — the build's fetch for a page and the
+ * browser's: a column the editor fixed (`fixed`), or one bound to state
+ * (`dynamic`) with, when the build can know them, the values a visitor starts
+ * with (`starting`, see `readSortStateDefaults`). Empty without a sort.
+ */
+export interface RepeaterSort {
+  fixed?: { field: string; order: 'asc' | 'desc' }
+  dynamic?: DynamicSortAST
+  starting?: SortStateDefault[]
+}
+
+export const readRepeaterSort = (
+  sort: UIDLStaticValue | UIDLExpressionValue | undefined,
+  sortDirection: UIDLStaticValue | UIDLExpressionValue | undefined,
+  stateDefinitions: Record<string, UIDLStateDefinition> | undefined
+): RepeaterSort => {
+  if (!sort) {
+    return {}
+  }
+  const fixed = readFixedSort(sort, sortDirection)
+  if (fixed) {
+    return { fixed }
+  }
+  const dynamic = extractDynamicSort(sort, sortDirection)
+  return dynamic ? { dynamic, starting: readSortStateDefaults(dynamic, stateDefinitions) } : {}
+}
+
+/**
+ * The `sorts` param of the build-time fetch: the browser's own expression,
+ * evaluated with every state it reads at its default —
+ *
+ *   ((sortBy) => JSON.stringify([{ field: sortBy.split("-")?.[0] || '', order: … }]))("name-asc")
+ *
+ * — so it is the very string the browser sends while the sort is untouched, and
+ * the data source orders the first page exactly as it orders every later one
+ * (the same columns, empty values last, the row's id breaking ties).
+ */
+export const buildStartingSortsValue = (
+  dynamicSort: DynamicSortAST,
+  defaults: SortStateDefault[]
+): types.Expression => {
+  const sorts = buildDynamicSortsValue(dynamicSort)
+  if (defaults.length === 0) {
+    return sorts
+  }
+  return types.callExpression(
+    types.arrowFunctionExpression(
+      defaults.map((state) => types.identifier(state.binding)),
+      sorts
+    ),
+    defaults.map((state) => types.valueToNode(state.value) as types.Expression)
+  )
+}
+
+/**
+ * `sortBy === "name-asc"`: the sort is still the one the visitor starts with,
+ * so the rows fetched at build time are its first page. `null` for a sort that
+ * reads nothing, which never moves.
+ */
+export const buildSortAtStartGuard = (defaults: SortStateDefault[]): types.Expression | null =>
+  defaults
+    .map(
+      (state): types.Expression =>
+        types.binaryExpression(
+          '===',
+          types.identifier(state.binding),
+          types.valueToNode(state.value) as types.Expression
+        )
+    )
+    .reduce<types.Expression | null>(
+      (all, guard) => (all ? types.logicalExpression('&&', all, guard) : guard),
+      null
+    )
+
 // Build the AST for the legacy static sorts array form.
 // tslint:disable-next-line:no-any
 const buildLegacySortsProperty = (sorts: any[]): types.ObjectProperty => {