@teleporthq/teleport-plugin-next-data-source 0.43.69 → 0.43.71

package/src/fetchers/rest-api.ts

@@ -78,12 +78,38 @@ interface RESTAPIConfig {
   url?: string
   method?: string
   headers?: Record<string, string>
+  queryParams?: Record<string, string>
   authorization?: Authorization
   bodyType?: string
   body?: string
   cache?: RESTAPICacheConfig
 }
 
+/**
+ * The URL with the data source's query params appended, built the way the
+ * editor's own fetch builds it (`RestApiService.constructUrl` in the
+ * data-fetcher worker: `searchParams.append` per param).
+ *
+ * The params used to be dropped here, so the published site asked the API a
+ * different question than the editor did — `?per_page=10` or `?category=x`
+ * configured on the source, and every row of the unfiltered response came back.
+ */
+const buildRequestURL = (
+  url: string | undefined,
+  queryParams?: Record<string, string>
+): string | undefined => {
+  const params = Object.entries(queryParams || {}).filter(
+    ([key, value]) => key.trim() !== '' && typeof value === 'string'
+  )
+  if (!url || params.length === 0) {
+    return url
+  }
+
+  const requestURL = new URL(url)
+  params.forEach(([key, value]) => requestURL.searchParams.append(key, value))
+  return requestURL.toString()
+}
+
 export const generateRESTAPIFetcher = (config: Record<string, unknown>): string => {
   const restConfig = config as RESTAPIConfig
   const authCode = generateAuthCode(restConfig.authorization || {})
@@ -110,7 +136,7 @@ export default async function handler(req, res) {
   try {
     const { query, queryColumns, limit, page, perPage, sortBy, sortOrder, filters, sorts, offset, collectionPath, itemsPath } = req.query
     
-    const url = ${JSON.stringify(restConfig.url)}
+    const url = ${JSON.stringify(buildRequestURL(restConfig.url, restConfig.queryParams))}
     const method = ${JSON.stringify(restConfig.method || 'GET')}
     
     const headers = ${JSON.stringify(restConfig.headers || {})}

package/src/index.ts

@@ -15,6 +15,7 @@ import {
   hasUnresolvableDynamicParams,
 } from './utils'
 import { createNextArrayMapperPaginationPlugin } from './pagination-plugin'
+import { resolveRepeaterPerPage } from './repeater-page-size'
 import { buildProductTransformOptions } from './transformations'
 import { DATA_SOURCE_ISR_REVALIDATE_SECONDS } from './isr'
 import { ensureRouterDeclaration } from './request-locale'
@@ -416,8 +417,8 @@ function extractPaginationConfigEarly(uidlNode: any, resources: any): Pagination
       const searchEnabled = node.content?.searchEnabled
       const searchDebounce = node.content?.searchDebounce
 
-      if (paginated && perPage && renderProp) {
-        perPageMap.set(renderProp, perPage)
+      if (paginated && renderProp) {
+        perPageMap.set(renderProp, resolveRepeaterPerPage(perPage))
       }
 
       if (searchEnabled && renderProp) {

package/src/infinite-scroll.ts

@@ -109,20 +109,124 @@ export const buildInfiniteScrollDeclarations = (
   return declarations
 }
 
+const isIndexSegment = (segment: string): boolean => /^\d+$/.test(segment)
+
+const readSegment = (object: types.Expression, segment: string): types.OptionalMemberExpression =>
+  isIndexSegment(segment)
+    ? types.optionalMemberExpression(object, types.numericLiteral(Number(segment)), true, true)
+    : types.isValidIdentifier(segment)
+    ? types.optionalMemberExpression(object, types.identifier(segment), false, true)
+    : types.optionalMemberExpression(object, types.stringLiteral(segment), true, true)
+
+/** `payload?.data?.items` for `['data', 'items']`. */
+const readAtPath = (payload: types.Expression, path: string[]): types.Expression =>
+  path.reduce<types.Expression>((object, segment) => readSegment(object, segment), payload)
+
+/**
+ * A copy of `node` with `value` at `path`, every level around it kept:
+ * `{ ...payload, data: { ...payload?.data, items: value } }`. An index segment
+ * copies the list it indexes instead of spreading it into an object.
+ */
+const writeAtPath = (
+  node: types.Expression,
+  path: string[],
+  value: types.Expression
+): types.Expression => {
+  if (path.length === 0) {
+    return value
+  }
+  const [segment, ...rest] = path
+  const child = writeAtPath(readSegment(types.cloneNode(node, true), segment), rest, value)
+  if (isIndexSegment(segment)) {
+    return types.callExpression(
+      types.memberExpression(types.identifier('Object'), types.identifier('assign')),
+      [
+        types.arrayExpression([
+          types.spreadElement(
+            types.logicalExpression('||', types.cloneNode(node, true), types.arrayExpression([]))
+          ),
+        ]),
+        types.objectExpression([
+          types.objectProperty(types.numericLiteral(Number(segment)), child),
+        ]),
+      ]
+    )
+  }
+  return types.objectExpression([
+    types.spreadElement(types.cloneNode(node, true)),
+    types.objectProperty(
+      types.isValidIdentifier(segment) ? types.identifier(segment) : types.stringLiteral(segment),
+      child
+    ),
+  ])
+}
+
 /**
  * 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.
+ *
+ * `itemsPath` is where the rows sit inside a payload that wraps them
+ * (`{ items: [...], total }`): the rows are read there and the accumulated list
+ * is put back there, so the page keeps reading it through the same path. The
+ * wrapper itself counted as one "row" before, which ended the list after its
+ * first page and rendered nothing.
  */
 export const buildAccumulatingResponseHandler = (
   vars: InfiniteScrollVars,
-  perPage: number
+  perPage: number,
+  itemsPath?: string[]
 ): types.ArrowFunctionExpression => {
   const accumCurrent = (): types.MemberExpression =>
     types.memberExpression(types.identifier(vars.accumRefVar), types.identifier('current'))
   const accumPages = (): types.MemberExpression =>
     types.memberExpression(accumCurrent(), types.identifier('pages'))
+  const payload = (): types.OptionalMemberExpression =>
+    types.optionalMemberExpression(
+      types.identifier('response'),
+      types.identifier('data'),
+      false,
+      true
+    )
+  const rowsPath = itemsPath?.length ? itemsPath : undefined
+
+  const accumulatedRows = types.callExpression(
+    types.memberExpression(
+      types.callExpression(
+        types.memberExpression(
+          types.callExpression(
+            types.memberExpression(
+              types.callExpression(
+                types.memberExpression(types.identifier('Object'), types.identifier('keys')),
+                [accumPages()]
+              ),
+              types.identifier('map')
+            ),
+            [types.identifier('Number')]
+          ),
+          types.identifier('sort')
+        ),
+        [
+          types.arrowFunctionExpression(
+            [types.identifier('a'), types.identifier('b')],
+            types.binaryExpression('-', types.identifier('a'), types.identifier('b'))
+          ),
+        ]
+      ),
+      types.identifier('reduce')
+    ),
+    [
+      types.arrowFunctionExpression(
+        [types.identifier('acc'), types.identifier('p')],
+        types.callExpression(
+          types.memberExpression(types.identifier('acc'), types.identifier('concat')),
+          [types.memberExpression(accumPages(), types.identifier('p'), true)]
+        )
+      ),
+      types.arrayExpression([]),
+    ]
+  )
 
   return types.arrowFunctionExpression(
     [types.identifier('response')],
@@ -132,12 +236,7 @@ export const buildAccumulatingResponseHandler = (
           types.identifier('rows'),
           types.logicalExpression(
             '||',
-            types.optionalMemberExpression(
-              types.identifier('response'),
-              types.identifier('data'),
-              false,
-              true
-            ),
+            rowsPath ? readAtPath(payload(), rowsPath) : payload(),
             types.arrayExpression([])
           )
         ),
@@ -211,42 +310,7 @@ export const buildAccumulatingResponseHandler = (
       // page 10 does not land between 1 and 2. This is what DataProvider stores
       // as its data, and so what the list renders.
       types.returnStatement(
-        types.callExpression(
-          types.memberExpression(
-            types.callExpression(
-              types.memberExpression(
-                types.callExpression(
-                  types.memberExpression(
-                    types.callExpression(
-                      types.memberExpression(types.identifier('Object'), types.identifier('keys')),
-                      [accumPages()]
-                    ),
-                    types.identifier('map')
-                  ),
-                  [types.identifier('Number')]
-                ),
-                types.identifier('sort')
-              ),
-              [
-                types.arrowFunctionExpression(
-                  [types.identifier('a'), types.identifier('b')],
-                  types.binaryExpression('-', types.identifier('a'), types.identifier('b'))
-                ),
-              ]
-            ),
-            types.identifier('reduce')
-          ),
-          [
-            types.arrowFunctionExpression(
-              [types.identifier('acc'), types.identifier('p')],
-              types.callExpression(
-                types.memberExpression(types.identifier('acc'), types.identifier('concat')),
-                [types.memberExpression(accumPages(), types.identifier('p'), true)]
-              )
-            ),
-            types.arrayExpression([]),
-          ]
-        )
+        rowsPath ? writeAtPath(payload(), rowsPath, accumulatedRows) : accumulatedRows
       ),
     ])
   )

package/src/items-path.ts

@@ -16,7 +16,7 @@ import * as types from '@babel/types'
  * render prop — an expression this cannot read is left exactly as before.
  */
 const SEGMENT_RE =
-  /^(?:\?\.([A-Za-z_$][\w$]*)|\.([A-Za-z_$][\w$]*)|(?:\?\.)?\[\s*(?:"([^"]*)"|'([^']*)')\s*\])/
+  /^(?:\?\.([A-Za-z_$][\w$]*)|\.([A-Za-z_$][\w$]*)|(?:\?\.)?\[\s*(?:"([^"]*)"|'([^']*)'|(\d+))\s*\])/
 
 const PATH_AWARE_SOURCE_TYPES = new Set(['rest-api', 'javascript'])
 
@@ -47,7 +47,8 @@ export const extractItemsPath = (
     if (!match) {
       return undefined
     }
-    path.push(match[1] ?? match[2] ?? match[3] ?? match[4])
+    // An index (`?.[0]`) is kept as its digits; the handler reads it off a list.
+    path.push(match[1] ?? match[2] ?? match[3] ?? match[4] ?? match[5])
     rest = rest.slice(match[0].length)
   }
 

package/src/pagination-plugin.ts

@@ -14,6 +14,7 @@ import { buildProductTransformOptions, type EntityTransformOptions } from './tra
 import { appendSortsParam, DynamicSortAST, extractDynamicSort } from './sort-utils'
 import { appendFiltersParam, pushStateIdsAsDeps, pushPropIdsAsDeps } from './filter-utils'
 import { appendItemsPathParam, extractItemsPath } from './items-path'
+import { resolveRepeaterPerPage } from './repeater-page-size'
 import {
   applyLoadingStateToDataProvider,
   buildLoadingStateDeclarations,
@@ -606,7 +607,9 @@ function buildStateRegistry(uidlNode: any): StateRegistry {
 
         // For paginated mappers, use perPage from cms-list-repeater
         // For plain mappers, use limit from data-source-list resource params
-        const effectivePerPage = content.paginated ? content.perPage : limit || content.perPage
+        const effectivePerPage = content.paginated
+          ? resolveRepeaterPerPage(content.perPage)
+          : limit || content.perPage
 
         const searchDefaultValue = parseSearchDefaultValue(content.searchDefaultValue)
 
@@ -2952,7 +2955,8 @@ function createFetchDataAttribute(
   const responseTail = accumulate
     ? buildAccumulatingResponseHandler(
         getInfiniteScrollVars(accumulate.usage.index),
-        accumulate.usage.perPage
+        accumulate.usage.perPage,
+        accumulate.usage.itemsPath
       )
     : cache
     ? buildCacheStoreThen(cache)

package/src/repeater-page-size.ts

@@ -0,0 +1,24 @@
+/**
+ * Rows per page a paginated list gets when its UIDL names none: the editor's
+ * own default (`DEFAULT_ARRAY_MAPPER_PER_PAGE`), which is also what the canvas
+ * pages by.
+ */
+export const DEFAULT_REPEATER_PER_PAGE = 10
+
+/**
+ * The page size of a paginated `cms-list-repeater`: its `perPage` when that is
+ * a whole positive number, else the editor's default.
+ *
+ * ⛔ A paginated list without a usable page size used to take the whole project
+ * down with it ("Property value expected type of number but got undefined"),
+ * and a NaN one paged nothing — while the canvas showed ten rows per page.
+ */
+export const resolveRepeaterPerPage = (perPage: unknown): number => {
+  const parsed =
+    typeof perPage === 'number'
+      ? perPage
+      : typeof perPage === 'string'
+      ? parseInt(perPage, 10)
+      : NaN
+  return Number.isFinite(parsed) && parsed >= 1 ? Math.floor(parsed) : DEFAULT_REPEATER_PER_PAGE
+}

package/src/utils.ts

@@ -644,7 +644,15 @@ export const generateCollectionPathHelperCode = (): string => {
 const readPayloadPath = (payload, path) => {
   let current = payload
   for (const segment of path) {
-    if (!current || typeof current !== 'object' || Array.isArray(current) || !(segment in current)) {
+    if (Array.isArray(current)) {
+      const index = Number(segment)
+      if (!Number.isInteger(index) || index < 0 || index >= current.length) {
+        return undefined
+      }
+      current = current[index]
+      continue
+    }
+    if (!current || typeof current !== 'object' || !(segment in current)) {
       return undefined
     }
     current = current[segment]
@@ -668,8 +676,16 @@ const openItemsEnvelope = (payload, rawPath) => {
   if (!path) return null
   const items = readPayloadPath(payload, path)
   if (!Array.isArray(items)) return null
-  const rebuild = (node, depth, next) =>
-    depth === path.length ? next : { ...node, [path[depth]]: rebuild(node[path[depth]], depth + 1, next) }
+  const rebuild = (node, depth, next) => {
+    if (depth === path.length) return next
+    const child = rebuild(node[path[depth]], depth + 1, next)
+    if (Array.isArray(node)) {
+      const copy = node.slice()
+      copy[Number(path[depth])] = child
+      return copy
+    }
+    return { ...node, [path[depth]]: child }
+  }
   return { items, close: (next) => rebuild(payload, 0, next) }
 }`
 }
@@ -1217,17 +1233,20 @@ export const extractDataSourceIntoGetStaticProps = (
     )
     const baseKey = `${sanitizedDsName}_${sanitizedTableName}_data`
 
-    let propKey: string
+    let resourcePropKey: string
     if (renderPropIdentifier && resourceId) {
       // Include resource ID to differentiate between same renderProp but different params
       const sanitizedResourceId = StringUtils.dashCaseToCamelCase(
         sanitizeFileName(resourceId).replace(/^TQ_/, '')
       )
-      propKey = `${renderPropIdentifier}_${sanitizedResourceId}`
+      resourcePropKey = `${renderPropIdentifier}_${sanitizedResourceId}`
     } else {
       // Use base key for uniqueness (even if renderPropIdentifier exists, base key ensures uniqueness across different data sources)
-      propKey = baseKey
+      resourcePropKey = baseKey
     }
+    // tslint:disable-next-line:no-any
+    const nodeResource = (node.content as any).resource
+    const propKey = claimParamsPropKey(componentChunk, resourcePropKey, nodeResource)
 
     // Find matching JSX nodes for this data source
     // Strategy depends on whether we have a unique resource ID:
@@ -1821,6 +1840,35 @@ interface ParallelFetchMeta {
   declaration?: types.VariableDeclaration
 }
 
+/**
+ * The getStaticProps prop a provider's prefetch lands in: `resourcePropKey`,
+ * suffixed when a provider with DIFFERENT params already holds it on this page.
+ *
+ * Every provider bound to the same table carries the same resource id
+ * (`TQ_<source><table>`) and its own params, so the resource-derived key alone
+ * gave a list limited to 10 rows and a text bound to the same source ONE
+ * prefetch — whichever ran first. The other rendered its rows (`initialData`
+ * skips the provider's own first fetch): every row in the limited list, or ten
+ * where the text read the fifteenth. Providers with equal params still share
+ * one key, and one fetch.
+ */
+const claimParamsPropKey = (
+  componentChunk: ChunkDefinition,
+  resourcePropKey: string,
+  resource: { params?: Record<string, unknown> } | undefined
+): string => {
+  const meta = componentChunk.meta as { dataSourcePropKeyParams?: Record<string, string> }
+  const claimed = meta.dataSourcePropKeyParams ?? (meta.dataSourcePropKeyParams = {})
+  const signature = JSON.stringify(resource?.params ?? {})
+
+  let propKey = resourcePropKey
+  for (let suffix = 2; claimed[propKey] !== undefined && claimed[propKey] !== signature; suffix++) {
+    propKey = `${resourcePropKey}_${suffix}`
+  }
+  claimed[propKey] = signature
+  return propKey
+}
+
 const createSafeFetchExpression = (
   fetchCallExpression: types.CallExpression,
   label: string