@teleporthq/teleport-plugin-next-data-source 0.43.66 → 0.43.67

package/src/index.ts

@@ -4,6 +4,7 @@ import {
   FileType,
   ChunkType,
   UIDLComponentSEO,
+  UIDLDependency,
   UIDLDynamicReference,
 } from '@teleporthq/teleport-types'
 import { UIDLUtils, StringUtils } from '@teleporthq/teleport-shared'
@@ -16,6 +17,7 @@ import {
 import { createNextArrayMapperPaginationPlugin } from './pagination-plugin'
 import { buildProductTransformOptions } from './transformations'
 import { DATA_SOURCE_ISR_REVALIDATE_SECONDS } from './isr'
+import { ensureRouterDeclaration } from './request-locale'
 import * as types from '@babel/types'
 
 interface SearchConfig {
@@ -55,6 +57,41 @@ interface WrapContext {
 // from user-defined or standard renderPropIdentifier values
 const WRAPPED_DS_EXPR_PREFIX = '__dsExpr_'
 
+/**
+ * The statements of the component function the `jsx-component` chunk declares
+ * (`const Page = (props) => { … }`), or `null` when the chunk holds another
+ * shape — a test may hand the plugin a bare element.
+ */
+const findComponentBody = (componentChunk: { content: unknown }): types.Statement[] | null => {
+  const content = componentChunk.content as types.Node | undefined
+  if (content?.type !== 'VariableDeclaration') {
+    return null
+  }
+  const init = content.declarations[0]?.init
+  if (
+    (init?.type !== 'ArrowFunctionExpression' && init?.type !== 'FunctionExpression') ||
+    init.body.type !== 'BlockStatement'
+  ) {
+    return null
+  }
+  return init.body.body
+}
+
+/**
+ * A client-side fetch in a localized project reads `router.locale` (see
+ * `extractDataSourceIntoNextAPIFolder`), so the router has to be declared in
+ * the component that fetches.
+ */
+const ensureRouterForClientFetches = (
+  componentChunk: { content: unknown },
+  dependencies: Record<string, UIDLDependency>
+): void => {
+  const body = findComponentBody(componentChunk)
+  if (body) {
+    ensureRouterDeclaration(body, dependencies)
+  }
+}
+
 function containsDataSourceDataReference(astNode: any): boolean {
   if (!astNode || typeof astNode !== 'object') {
     return false
@@ -490,6 +527,11 @@ export const createNextPagesDataSourcePlugin: ComponentPluginFactory<{}> = () =>
 
     let getStaticPropsChunk = chunks.find((chunk) => chunk.name === 'getStaticProps')
 
+    const transformOptions = buildProductTransformOptions(options)
+    // Whether a provider on this page fetches client-side — in a localized
+    // project that fetch reads `router.locale`.
+    let wiredClientFetch = false
+
     // Track the first data source info for wrapping dataSourceData expressions
     let firstDataSourceInfo: DataSourceInfo | null = null
     // Track fetcher import name for wrapped providers
@@ -609,7 +651,7 @@ export const createNextPagesDataSourcePlugin: ComponentPluginFactory<{}> = () =>
           dependencies,
           dynamicRouteAttr,
           uidl.outputOptions?.folderPath,
-          buildProductTransformOptions(options)
+          transformOptions
         )
 
         if (result.success && result.chunk) {
@@ -641,17 +683,23 @@ export const createNextPagesDataSourcePlugin: ComponentPluginFactory<{}> = () =>
             }
           }
         }
-      } else {
+      } else if (
         extractDataSourceIntoNextAPIFolder(
           dataSourceNode,
           dataSources,
           componentChunk,
           options.extractedResources,
-          buildProductTransformOptions(options)
+          transformOptions
         )
+      ) {
+        wiredClientFetch = true
       }
     })
 
+    if (wiredClientFetch && transformOptions.localization) {
+      ensureRouterForClientFetches(componentChunk, dependencies)
+    }
+
     // After processing all data source nodes, wrap any element props containing dataSourceData
     // expressions in a DataProvider
     if (firstDataSourceInfo && componentChunk.content) {
@@ -1207,6 +1255,11 @@ export const createNextComponentDataSourcePlugin: ComponentPluginFactory<{}> = (
       return structure
     }
 
+    const transformOptions = buildProductTransformOptions(options)
+    // Whether a provider in this component fetches client-side — in a
+    // localized project that fetch reads `router.locale`.
+    let wiredClientFetch = false
+
     // Track the first data source info for wrapping dataSourceData expressions
     let firstDataSourceInfo: DataSourceInfo | null = null
 
@@ -1264,15 +1317,23 @@ export const createNextComponentDataSourcePlugin: ComponentPluginFactory<{}> = (
         }
       }
 
-      extractDataSourceIntoNextAPIFolder(
-        dataSourceNode,
-        dataSources,
-        componentChunk,
-        options.extractedResources,
-        buildProductTransformOptions(options)
-      )
+      if (
+        extractDataSourceIntoNextAPIFolder(
+          dataSourceNode,
+          dataSources,
+          componentChunk,
+          options.extractedResources,
+          transformOptions
+        )
+      ) {
+        wiredClientFetch = true
+      }
     })
 
+    if (wiredClientFetch && transformOptions.localization) {
+      ensureRouterForClientFetches(componentChunk, dependencies)
+    }
+
     // If no data source nodes were found but there are dataSources available,
     // use the first available dataSource to create firstDataSourceInfo
     // This handles the case where a component has element props with dataSourceData expressions
@@ -1355,7 +1416,7 @@ export const createNextComponentDataSourcePlugin: ComponentPluginFactory<{}> = (
               dataSource,
               firstDataSourceInfo.tableName,
               false,
-              buildProductTransformOptions(options)
+              transformOptions
             )
             options.extractedResources[`utils/${fileName}`] = {
               fileName,
@@ -1399,8 +1460,15 @@ export * from './utils'
 export * from './array-mapper-pagination'
 export * from './pagination-plugin'
 export * from './count-fetchers'
+export * from './product-price-sort'
+export * from './product-filter-fields'
 // The product transform's build-time options (category taxonomy + storefront
 // tax rate) — every package that emits a data-source fetcher has to derive
 // them the same way.
 export { buildProductTransformOptions } from './transformations'
 export type { EcommerceProductTransformOptions, EntityTransformOptions } from './transformations'
+// How a fetch says which language it is for, and when a project needs it to —
+// shared with every other package that emits a data-source fetch.
+export { isLocalizedProject, resolveContentLocalization } from './content-localization'
+export type { ContentLocalization } from './content-localization'
+export { REQUEST_LOCALE_PARAM, buildServerLocaleParam } from './request-locale'

package/src/loading-state.ts

@@ -67,6 +67,19 @@ export interface LoadingStateVars {
    * stale rows back for the rest of the second request.
    */
   inFlightRefVar: string
+  /**
+   * Ref counting the requests STARTED, so a response can tell whether a newer
+   * request has overtaken it. `DataProvider` keeps whatever resolves last:
+   * two controls changed in quick succession (a "Clear all" emptying several
+   * filter states, one state write after another) start two requests, and
+   * when the older, slower one settles after the newer it painted the OLDER
+   * rows over the newer — a list showing two products for a URL that filters
+   * nothing. Each request notes its sequence number and, if overtaken, hands
+   * over the newest settled rows instead of its own.
+   */
+  fetchSeqRefVar: string
+  /** Ref holding the rows of the newest request that settled — what an overtaken one resolves with. */
+  latestDataRefVar: string
 }
 
 export function getLoadingStateVars(index: number): LoadingStateVars {
@@ -74,14 +87,18 @@ export function getLoadingStateVars(index: number): LoadingStateVars {
     isFetchingVar: `ds_${index}_isFetching`,
     setIsFetchingVar: `setDs_${index}_isFetching`,
     inFlightRefVar: `ds_${index}_fetchesInFlight`,
+    fetchSeqRefVar: `ds_${index}_fetchSeq`,
+    latestDataRefVar: `ds_${index}_latestData`,
   }
 }
 
 /**
  * `const ds_N_fetchesInFlight = useRef(0)`
+ * `const ds_N_fetchSeq = useRef(0)`
+ * `const ds_N_latestData = useRef(undefined)`
  * `const [ds_N_isFetching, setDs_N_isFetching] = useState(false)`
  *
- * Both are stable across renders (a ref object and a `useState` setter), which
+ * All are stable across renders (ref objects and a `useState` setter), which
  * is what lets the wrapped `fetchData` keep its empty `useCallback` dependency
  * array — a changing `fetchData` identity would retrigger the provider's fetch
  * effect on every render.
@@ -94,6 +111,18 @@ export function buildLoadingStateDeclarations(vars: LoadingStateVars): types.Sta
         types.callExpression(types.identifier('useRef'), [types.numericLiteral(0)])
       ),
     ]),
+    types.variableDeclaration('const', [
+      types.variableDeclarator(
+        types.identifier(vars.fetchSeqRefVar),
+        types.callExpression(types.identifier('useRef'), [types.numericLiteral(0)])
+      ),
+    ]),
+    types.variableDeclaration('const', [
+      types.variableDeclarator(
+        types.identifier(vars.latestDataRefVar),
+        types.callExpression(types.identifier('useRef'), [types.identifier('undefined')])
+      ),
+    ]),
     types.variableDeclaration('const', [
       types.variableDeclarator(
         types.arrayPattern([
@@ -183,10 +212,54 @@ function injectTrackingIntoCachedBody(body: types.BlockStatement, vars: LoadingS
 
   const tracked = buildTrackedFetchBody(networkChain.statement.argument as types.Expression, vars)
   body.body.splice(networkChain.index, 1, ...tracked.body)
+  markCacheHitAsNewest(body, vars)
 
   return true
 }
 
+/**
+ * A cache hit answers synchronously with the rows of THIS request, so it is
+ * the newest settled result too: it advances the sequence and records its rows,
+ * or an older network request still in flight would resolve after it and paint
+ * over it. Adds the two statements at the head of the hit branch — before its
+ * `return Promise.resolve(__tqHit)` — and nothing else, so the flag the branch
+ * deliberately never raises stays untouched.
+ */
+function markCacheHitAsNewest(body: types.BlockStatement, vars: LoadingStateVars): void {
+  const hit = body.body.find(
+    (statement): statement is types.IfStatement =>
+      statement.type === 'IfStatement' &&
+      statement.test.type === 'BinaryExpression' &&
+      statement.test.left.type === 'Identifier' &&
+      statement.test.left.name === CACHE_HIT_IDENTIFIER &&
+      statement.consequent.type === 'BlockStatement'
+  )
+  if (!hit || hit.consequent.type !== 'BlockStatement') {
+    return
+  }
+  hit.consequent.body.unshift(
+    types.expressionStatement(types.updateExpression('++', refCurrent(vars.fetchSeqRefVar), true)),
+    types.expressionStatement(
+      types.assignmentExpression(
+        '=',
+        refCurrent(vars.latestDataRefVar),
+        types.identifier(CACHE_HIT_IDENTIFIER)
+      )
+    )
+  )
+}
+
+/** The identifier the cache wiring binds a hit to — see `cache/ast.ts`. */
+const CACHE_HIT_IDENTIFIER = '__tqHit'
+/** The rows a tracked request resolved with, inside its own `then`. */
+const TRACKED_ROWS_IDENTIFIER = '__tqRows'
+/** This request's sequence number. */
+const TRACKED_SEQ_IDENTIFIER = '__tqSeq'
+
+function refCurrent(refVar: string): types.MemberExpression {
+  return types.memberExpression(types.identifier(refVar), types.identifier('current'))
+}
+
 // tslint:disable-next-line:no-any
 function containsIdentifier(node: any, name: string): boolean {
   if (!node || typeof node !== 'object') {
@@ -257,9 +330,16 @@ function findMemoizedFetchDataArrow(
  * Turns `(params) => fetch(...).then(...)` into
  *
  *   (params) => {
+ *     const __tqSeq = ++ds_N_fetchSeq.current
  *     ds_N_fetchesInFlight.current += 1
  *     setDs_N_isFetching(true)
- *     return fetch(...).then(...).finally(() => {
+ *     return fetch(...).then(...).then((__tqRows) => {
+ *       if (__tqSeq !== ds_N_fetchSeq.current) {
+ *         return ds_N_latestData.current !== undefined ? ds_N_latestData.current : __tqRows
+ *       }
+ *       ds_N_latestData.current = __tqRows
+ *       return __tqRows
+ *     }).finally(() => {
  *       ds_N_fetchesInFlight.current -= 1
  *       if (ds_N_fetchesInFlight.current <= 0) {
  *         ds_N_fetchesInFlight.current = 0
@@ -268,6 +348,12 @@ function findMemoizedFetchDataArrow(
  *     })
  *   }
  *
+ * The `then` is the stale guard (see `fetchSeqRefVar`): a request overtaken by
+ * a newer one resolves with the newest settled rows rather than its own, so
+ * the provider — which keeps whatever resolves LAST — never paints older rows
+ * over newer ones. An overtaken request whose successor has not settled yet
+ * resolves with its own rows; the successor then replaces them.
+ *
  * `finally` (rather than a `then` pair) keeps the flag honest when the request
  * rejects: the provider switches to its error status and the loading state must
  * not stay on screen. The counter is clamped at 0 so a late settle from a
@@ -317,7 +403,52 @@ function buildTrackedFetchBody(
     ])
   )
 
+  const latestData = refCurrent(vars.latestDataRefVar)
+  const staleGuard = types.arrowFunctionExpression(
+    [types.identifier(TRACKED_ROWS_IDENTIFIER)],
+    types.blockStatement([
+      types.ifStatement(
+        types.binaryExpression(
+          '!==',
+          types.identifier(TRACKED_SEQ_IDENTIFIER),
+          refCurrent(vars.fetchSeqRefVar)
+        ),
+        types.blockStatement([
+          types.returnStatement(
+            types.conditionalExpression(
+              types.binaryExpression(
+                '!==',
+                types.cloneNode(latestData, true),
+                types.identifier('undefined')
+              ),
+              types.cloneNode(latestData, true),
+              types.identifier(TRACKED_ROWS_IDENTIFIER)
+            )
+          ),
+        ])
+      ),
+      types.expressionStatement(
+        types.assignmentExpression(
+          '=',
+          types.cloneNode(latestData, true),
+          types.identifier(TRACKED_ROWS_IDENTIFIER)
+        )
+      ),
+      types.returnStatement(types.identifier(TRACKED_ROWS_IDENTIFIER)),
+    ])
+  )
+  const guardedFetch = types.callExpression(
+    types.memberExpression(fetchExpression, types.identifier('then')),
+    [staleGuard]
+  )
+
   return types.blockStatement([
+    types.variableDeclaration('const', [
+      types.variableDeclarator(
+        types.identifier(TRACKED_SEQ_IDENTIFIER),
+        types.updateExpression('++', refCurrent(vars.fetchSeqRefVar), true)
+      ),
+    ]),
     types.expressionStatement(
       types.assignmentExpression(
         '+=',
@@ -329,7 +460,7 @@ function buildTrackedFetchBody(
       types.callExpression(types.identifier(vars.setIsFetchingVar), [types.booleanLiteral(true)])
     ),
     types.returnStatement(
-      types.callExpression(types.memberExpression(fetchExpression, types.identifier('finally')), [
+      types.callExpression(types.memberExpression(guardedFetch, types.identifier('finally')), [
         settleHandler,
       ])
     ),

package/src/localized-columns.ts

@@ -0,0 +1,133 @@
+/**
+ * Filtering and sorting a translatable column in the visitor's language.
+ *
+ * A translatable column of a platform table exists once per language:
+ * `slug` holds the main language and `es_slug` the Spanish copy (see
+ * `ContentLocalization`). The row transform resolves what a page DISPLAYS —
+ * a Spanish listing shows `es_name` and links to `es_slug` — but the SQL a
+ * fetch runs still names the base column, so without this file:
+ *
+ *   - the details page a Spanish card links to (`/es/products/<es_slug>`)
+ *     looks the row up with `slug = $1` and answers 404;
+ *   - "sort by name" on the Spanish listing orders the Spanish names by
+ *     their ENGLISH counterparts.
+ *
+ * The teleport fetcher (`fetchers/teleport.ts`) therefore embeds the helper
+ * emitted here:
+ *
+ *   - equality on a translatable column matches the value in ANY language:
+ *     `("slug" = $1 OR "es_slug" = $1)`. Deliberately every language, not the
+ *     request's: the language switcher keeps the URL and changes the locale,
+ *     so `/products/<es_slug>` (English page, Spanish slug) has to resolve as
+ *     well as `/es/products/<slug>`. Only `=` (and the `in` it is normalised
+ *     to) — a translatable column is never compared with `<`, and `!=` on one
+ *     has no sensible cross-language reading;
+ *   - ordering by a translatable column orders by the REQUEST's language,
+ *     falling back to the base column exactly like the transform does:
+ *     `COALESCE(NULLIF("es_name", ''), "name")`.
+ *
+ * Which columns take part is decided at GENERATION time from the table's
+ * schema and the project's languages — never by prefix-sniffing column names,
+ * which would mistake `og_title` for a translation. A copy the schema does not
+ * list (a language added before a column became translatable) is simply not
+ * referenced, so the SQL can only ever name columns that exist.
+ */
+
+import type { ContentLocalization } from './content-localization'
+
+/**
+ * Base column → `{ locale: copy column }`, for every translatable column of a
+ * table that has at least one per-language copy in the schema.
+ */
+export type LocalizedColumnMap = Record<string, Record<string, string>>
+
+/** The only identifiers the generated SQL is allowed to quote — same rule as the search columns. */
+const SQL_IDENTIFIER_PATTERN = /^[a-zA-Z_][a-zA-Z0-9_]*$/
+
+/** The column holding `column` in `locale` — the editor's `getI18nColumnName`. */
+const localizedColumnName = (locale: string, column: string): string => `${locale}_${column}`
+
+/**
+ * Pairs every column with the per-language copies the schema actually holds.
+ * Empty (no families) when the project has one language or the table has no
+ * translated column — the emitted helper is then inert.
+ */
+export const collectLocalizedColumns = (
+  columnNames: string[],
+  localization: ContentLocalization | undefined
+): LocalizedColumnMap => {
+  const families: LocalizedColumnMap = {}
+  if (!localization || localization.secondaryLocales.length === 0) {
+    return families
+  }
+  const present = new Set(columnNames.filter((name) => SQL_IDENTIFIER_PATTERN.test(name)))
+  present.forEach((column) => {
+    localization.secondaryLocales.forEach((locale) => {
+      const copy = localizedColumnName(locale, column)
+      if (!present.has(copy)) {
+        return
+      }
+      if (!families[column]) {
+        families[column] = {}
+      }
+      families[column][locale] = copy
+    })
+  })
+  return families
+}
+
+/**
+ * The `localizedEqualityClause` / `localizedSortFieldSql` helpers a fetcher
+ * embeds, with the column map baked in.
+ *
+ * Emitted as plain source with no backtick and no `${`, because the fetcher
+ * interpolates it into a template literal. Every identifier it quotes comes
+ * from the baked map, so a request can only ever name a column the schema had.
+ */
+export const generateLocalizedColumnsHelper = (families: LocalizedColumnMap): string => {
+  const lines = [
+    '// Per-language copies of the translatable columns, base column -> locale -> copy.',
+    '// Baked from the table schema and the project languages at generation time.',
+    `var LOCALIZED_COLUMNS = ${JSON.stringify(families)}`,
+    '',
+    'function quoteLocalizedColumn(column) {',
+    "  return '\"' + column + '\"'",
+    '}',
+    '',
+    '// Equality on a translatable column matches the value in ANY language, so a',
+    '// localized slug resolves whichever locale the URL is under. Answers null',
+    '// for every other column and operand, leaving them to the ordinary branches.',
+    'function localizedEqualityClause(field, operand, value, pushParam) {',
+    '  var copies = LOCALIZED_COLUMNS[field]',
+    "  if (!copies || operand !== '=' || value === null || value === undefined) return null",
+    '  // An empty set means "no filter", as it does in the ordinary array branch.',
+    '  if (Array.isArray(value) && value.length === 0) return null',
+    '  var columns = [field]',
+    '  for (var locale in copies) {',
+    '    if (Object.prototype.hasOwnProperty.call(copies, locale)) columns.push(copies[locale])',
+    '  }',
+    '  var param = Array.isArray(value) ? pushParam(value.map(String)) : pushParam(value)',
+    '  var clauses = []',
+    '  for (var i = 0; i < columns.length; i++) {',
+    '    clauses.push(',
+    '      Array.isArray(value)',
+    "        ? quoteLocalizedColumn(columns[i]) + '::text = ANY(' + param + '::text[])'",
+    "        : quoteLocalizedColumn(columns[i]) + ' = ' + param",
+    '    )',
+    '  }',
+    "  return '(' + clauses.join(' OR ') + ')'",
+    '}',
+    '',
+    "// ORDER BY a translatable column in the request's language, falling back to",
+    '// the base column for a row with no translation — the same resolution the',
+    '// row transform applies to what is displayed. Null when the field or the',
+    '// locale has no copy, so the ordinary sort runs.',
+    'function localizedSortFieldSql(field, locale) {',
+    '  var copies = LOCALIZED_COLUMNS[field]',
+    "  var copy = copies && typeof locale === 'string' ? copies[locale] : null",
+    '  if (!copy) return null',
+    "  return 'COALESCE(NULLIF(' + quoteLocalizedColumn(copy) + \", ''), \" + quoteLocalizedColumn(field) + ')'",
+    '}',
+  ]
+  return lines.join('\n')
+}