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

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/transformations/booking-item.ts

@@ -0,0 +1,71 @@
+import type { UIDLEcommerceCategory } from '@teleporthq/teleport-types'
+import { generateCategoryTaxonomyCode } from './category-taxonomy'
+
+export interface BookingItemTransformOptions {
+  /** The booking items' category taxonomy — see `bookingSettings.categories`. */
+  categories?: UIDLEcommerceCategory[]
+}
+
+/**
+ * Generates JavaScript code for the `teleport_booking_items` row
+ * transformation — the things a Bookings site lets people book.
+ *
+ * The row is kept whole (every column, snake_case: the booking pages bind
+ * them as stored) and its translatable texts — `name`, `description` (rich
+ * text) and `location` — are the page's language when the row has them there
+ * (`es_name`, …), the main language otherwise. Its `category` is the name its
+ * first category has in the page's language, read off the taxonomy baked in
+ * here (the row's stored main name while none of its ids is a category). That
+ * is all a booking page needs to show an item in the visitor's language; the
+ * booking statements localise what they read on their own.
+ *
+ * MUST mirror `localizeBookingItem` in the editor
+ * (teleport-gui features/bookings/utils/localize-booking-item.ts), which is
+ * what the canvas renders from.
+ */
+export const generateBookingItemTransformationCode = (
+  options: BookingItemTransformOptions = {}
+): string => {
+  return `
+// ============================================================
+// Booking Item Transformation
+// ============================================================
+
+var BOOKING_ITEM_TRANSLATABLE_COLUMNS = ['name', 'description', 'location']
+${generateCategoryTaxonomyCode('BOOKING_CATEGORIES_BY_ID', options.categories)}
+
+function buildBookingItem(record, options) {
+  if (!record || typeof record !== 'object') return record
+  options = options || {}
+  var currentLang = options.currentLanguage || null
+  var mainLang = options.mainLanguage || null
+
+  var out = {}
+  for (var key in record) {
+    if (Object.prototype.hasOwnProperty.call(record, key)) out[key] = record[key]
+  }
+  for (var i = 0; i < BOOKING_ITEM_TRANSLATABLE_COLUMNS.length; i++) {
+    var column = BOOKING_ITEM_TRANSLATABLE_COLUMNS[i]
+    var value = resolveI18nField(record, column, column, currentLang, mainLang)
+    out[column] = value === null || value === undefined ? record[column] : value
+  }
+  if ('category' in record || 'category_ids' in record) {
+    var stored = typeof record.category === 'string' ? record.category : ''
+    var assigned = resolveAssignedCategories(
+      record.category_ids,
+      BOOKING_CATEGORIES_BY_ID,
+      currentLang,
+      mainLang,
+      stored
+    )
+    out.category = assigned.length > 0 ? assigned[0].name : stored
+  }
+  return out
+}
+
+function transformBookingItems(records, options) {
+  if (!Array.isArray(records)) return []
+  return records.map(function(record) { return buildBookingItem(record, options) })
+}
+`
+}

package/src/transformations/index.ts

@@ -8,6 +8,7 @@ import { ContentTables, StorefrontTax, TableAccess } from '@teleporthq/teleport-
 import { generateSharedTransformationCode } from './shared-utils'
 import { generateBlogPostTransformationCode } from './blog-post'
 import { generateCustomPageTransformationCode } from './custom-page'
+import { generateBookingItemTransformationCode } from './booking-item'
 import {
   generateEcommerceProductTransformationCode,
   type EcommerceProductTransformOptions,
@@ -45,6 +46,8 @@ export interface EntityTransformOptions extends EcommerceProductTransformOptions
   contentSettings?: Partial<Record<ContentTables.ContentPresetKey, ContentPresetTransformSettings>>
   /** Blog post-category taxonomy — see `blogSettings.categories`. */
   blogCategories?: UIDLEcommerceCategory[]
+  /** The booking items' category taxonomy — see `bookingSettings.categories`. */
+  bookingCategories?: UIDLEcommerceCategory[]
   /** Post content headings get ids and `#` links — see `blogSettings.headingAnchors`. */
   blogHeadingAnchors?: boolean
   /**
@@ -136,7 +139,12 @@ export const contentSettingsFor = (
 export const buildProductTransformOptions = (
   options: Pick<
     GeneratorOptions,
-    'ecommerceSettings' | 'invoiceSettings' | 'blogSettings' | 'helpCenterSettings' | 'auth'
+    | 'ecommerceSettings'
+    | 'invoiceSettings'
+    | 'blogSettings'
+    | 'bookingSettings'
+    | 'helpCenterSettings'
+    | 'auth'
   > &
     LocalizedProjectOptions & {
       /**
@@ -157,6 +165,7 @@ export const buildProductTransformOptions = (
     help: contentPresetTransformSettings(options.helpCenterSettings),
   },
   blogCategories: options.blogSettings?.categories,
+  bookingCategories: options.bookingSettings?.categories,
   blogHeadingAnchors: options.blogSettings?.headingAnchors === true,
   blogComments: options.blogSettings?.comments === true,
   storefrontTaxRate: StorefrontTax.resolveStorefrontTaxRate(options.invoiceSettings),
@@ -166,7 +175,12 @@ export const buildProductTransformOptions = (
   trustedReaderRoles: TableAccess.resolveTrustedReaderRoles(options.auth || options.authentication),
 })
 
-export type TransformationType = 'blog-post' | 'ecommerce-product' | 'custom-page' | null
+export type TransformationType =
+  | 'blog-post'
+  | 'ecommerce-product'
+  | 'custom-page'
+  | 'booking-item'
+  | null
 
 /**
  * Strips a leading `schema.` qualifier from a table name so that only the
@@ -207,6 +221,9 @@ export const detectTransformationType = (tableName: string): TransformationType
   if (bare === 'teleport_pages') {
     return 'custom-page'
   }
+  if (bare === 'teleport_booking_items') {
+    return 'booking-item'
+  }
   return null
 }
 
@@ -245,6 +262,10 @@ export const getTransformationCode = (
       return shared + generateEcommerceProductTransformationCode(options)
     case 'custom-page':
       return shared + generateCustomPageTransformationCode()
+    case 'booking-item':
+      return (
+        shared + generateBookingItemTransformationCode({ categories: options.bookingCategories })
+      )
     default:
       return ''
   }
@@ -380,6 +401,8 @@ export const getTransformWrapperCode = (
       ? 'transformBlogPosts'
       : type === 'custom-page'
       ? 'transformCustomPages'
+      : type === 'booking-item'
+      ? 'transformBookingItems'
       : 'transformEcommerceProducts'
 
   // Products additionally get their purchasable variant combinations attached in