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

package/src/request-locale.ts

@@ -0,0 +1,113 @@
+import * as types from '@babel/types'
+import type { UIDLDependency } from '@teleporthq/teleport-types'
+
+/**
+ * How a generated data-source fetch says which language it is for.
+ *
+ * A multi-language project stores a translatable column once per language
+ * (`name`, `es_name`, …) and the generated fetcher resolves each row against
+ * ONE of them (see `transformations/` and `localized-columns.ts`). Nothing
+ * about the API route knows the page it serves — an API route has no locale
+ * segment in its URL — so the page tells it, through this query parameter:
+ *
+ *   - a client-side fetch (`DataProvider` `params`) sends `router.locale`;
+ *   - a build-time fetch inside `getStaticProps` sends `context.locale`.
+ *
+ * Both are what Next.js resolved from the `/es/...` route, so the rows a page
+ * renders are in the language the page is in. The same name the details-page
+ * fetch (`teleport-plugin-next-static-props`) has always sent.
+ */
+export const REQUEST_LOCALE_PARAM = 'locale'
+
+/** The dependency behind the `router` every client-side locale read closes over. */
+const USE_ROUTER_DEPENDENCY: UIDLDependency = {
+  type: 'library',
+  path: 'next/router',
+  version: '^12.1.10',
+  meta: { namedImport: true },
+}
+
+/**
+ * `router?.locale` — the client's current locale. Optional-chained like every
+ * other generated `router` read: `useRouter()` answers `null` during a static
+ * export's first paint.
+ */
+export const buildClientLocaleExpression = (): types.Expression =>
+  types.optionalMemberExpression(
+    types.identifier('router'),
+    types.identifier('locale'),
+    false,
+    true
+  )
+
+/** `locale: router?.locale` — the param of a client-side fetch. */
+export const buildClientLocaleParam = (): types.ObjectProperty =>
+  types.objectProperty(types.identifier(REQUEST_LOCALE_PARAM), buildClientLocaleExpression())
+
+/** `locale: context.locale` — the param of a fetch inside getStaticProps. */
+export const buildServerLocaleParam = (): types.ObjectProperty =>
+  types.objectProperty(
+    types.identifier(REQUEST_LOCALE_PARAM),
+    types.memberExpression(types.identifier('context'), types.identifier('locale'))
+  )
+
+/** Whether an object literal already carries the locale param. */
+export const hasLocaleParam = (properties: types.ObjectExpression['properties']): boolean =>
+  properties.some(
+    (property) =>
+      property.type === 'ObjectProperty' &&
+      ((property.key.type === 'Identifier' && property.key.name === REQUEST_LOCALE_PARAM) ||
+        (property.key.type === 'StringLiteral' && property.key.value === REQUEST_LOCALE_PARAM))
+  )
+
+/**
+ * Adds the client locale to a fetch's params, once, and to the `useMemo` deps
+ * that must rebuild them: a locale switch is a client-side transition on the
+ * SAME page instance, so only a dependency change refetches the rows in the
+ * new language.
+ */
+export const appendClientLocaleParam = (
+  paramsProps: types.ObjectExpression['properties'],
+  memoDeps: types.Expression[]
+): void => {
+  if (!hasLocaleParam(paramsProps)) {
+    paramsProps.push(buildClientLocaleParam())
+  }
+  memoDeps.push(buildClientLocaleExpression())
+}
+
+/** Any declaration of `router` — a second one, however it is initialised, is a syntax error. */
+const declaresRouter = (statement: types.Statement): boolean =>
+  statement.type === 'VariableDeclaration' &&
+  statement.declarations.some(
+    (declaration) => declaration.id.type === 'Identifier' && declaration.id.name === 'router'
+  )
+
+/**
+ * Puts `const router = useRouter()` (and its import) in scope, once.
+ *
+ * Idempotent with every sibling plugin that declares the same hook — the i18n
+ * locale mapper, the URL search-params plugin and the base component plugin
+ * all guard on the same identifier, so whichever runs first wins and the rest
+ * find it in place. Unshifted to the top of the body: nothing reads it before
+ * an effect runs, and hooks must not sit below a conditional return.
+ */
+export const ensureRouterDeclaration = (
+  body: types.Statement[],
+  dependencies: Record<string, UIDLDependency>
+): void => {
+  if (!dependencies.useRouter) {
+    dependencies.useRouter = { ...USE_ROUTER_DEPENDENCY }
+  }
+  if (body.some(declaresRouter)) {
+    return
+  }
+  body.unshift(
+    types.variableDeclaration('const', [
+      types.variableDeclarator(
+        types.identifier('router'),
+        types.callExpression(types.identifier('useRouter'), [])
+      ),
+    ])
+  )
+}

package/src/search-clear.ts

@@ -0,0 +1,102 @@
+import * as types from '@babel/types'
+import { setJSXExpressionAttribute } from './pagination-controls'
+
+/**
+ * The "clear search" button a listing's search field carries — marked
+ * `data-tq-search-clear` by the editor (`listing-search-field.ts`), the same
+ * marker the canvas renderer acts on. The search keyword is the mapper's own
+ * React state, which no authored workflow can reach, so the generator wires
+ * the button here: a click empties the query, and the button renders only
+ * while the query is non-empty.
+ *
+ * A button belongs to the search input it shares a parent with — the field
+ * wrapper — never to "the next search-enabled mapper": a page with two lists
+ * and one clear button would otherwise wire it to the wrong list.
+ */
+
+export const SEARCH_CLEAR_ATTR = 'data-tq-search-clear'
+
+// tslint:disable:no-any
+
+export interface SearchClearButton {
+  node: any
+  parent: any
+  index: number
+}
+
+function hasSearchClearMarker(node: any): boolean {
+  return !!node?.openingElement?.attributes?.some(
+    (attr: any) => attr.type === 'JSXAttribute' && attr.name?.name === SEARCH_CLEAR_ATTR
+  )
+}
+
+/** Every marked button under `root`, with the JSX parent and child index it sits at. */
+export function findAllSearchClearButtonsInJSX(root: any): SearchClearButton[] {
+  const results: SearchClearButton[] = []
+  const traverse = (node: any): void => {
+    if (!node) {
+      return
+    }
+    if (node.type === 'JSXElement' && Array.isArray(node.children)) {
+      node.children.forEach((child: any, index: number) => {
+        if (child?.type === 'JSXElement' && hasSearchClearMarker(child)) {
+          results.push({ node: child, parent: node, index })
+        }
+        traverse(child)
+      })
+      return
+    }
+    if (node.body) {
+      if (Array.isArray(node.body)) {
+        node.body.forEach((statement: any) => traverse(statement))
+      } else {
+        traverse(node.body)
+      }
+    }
+    if (node.consequent) {
+      traverse(node.consequent)
+    }
+    if (node.alternate) {
+      traverse(node.alternate)
+    }
+    if (node.expression) {
+      traverse(node.expression)
+    }
+    if (node.argument) {
+      traverse(node.argument)
+    }
+  }
+  traverse(root)
+  return results
+}
+
+/** The search input the button shares its parent with, or null. */
+export function findSiblingSearchInput(button: SearchClearButton, searchInputs: any[]): any | null {
+  const siblings: any[] = button.parent.children ?? []
+  return siblings.find((sibling) => searchInputs.includes(sibling)) ?? null
+}
+
+/**
+ * Wires one button: `onClick` empties the query, and the element is replaced
+ * in its parent by `{query ? <button…/> : null}`.
+ */
+export function wireSearchClearButton(
+  button: SearchClearButton,
+  vars: { searchQueryVar: string; setSearchQueryVar: string }
+): void {
+  setJSXExpressionAttribute(
+    button.node,
+    'onClick',
+    types.arrowFunctionExpression(
+      [],
+      types.callExpression(types.identifier(vars.setSearchQueryVar), [types.stringLiteral('')])
+    )
+  )
+  button.parent.children[button.index] = types.jsxExpressionContainer(
+    types.conditionalExpression(
+      types.identifier(vars.searchQueryVar),
+      button.node,
+      types.nullLiteral()
+    )
+  )
+}

package/src/transformations/index.ts

@@ -7,6 +7,12 @@ import {
   generateEcommerceProductTransformationCode,
   type EcommerceProductTransformOptions,
 } from './ecommerce-product'
+import { REQUEST_LOCALE_PARAM } from '../request-locale'
+import {
+  resolveContentLocalization,
+  type ContentLocalization,
+  type LocalizedProjectOptions,
+} from '../content-localization'
 
 export type { EcommerceProductTransformOptions }
 
@@ -19,6 +25,13 @@ export type { EcommerceProductTransformOptions }
 export interface EntityTransformOptions extends EcommerceProductTransformOptions {
   /** Blog post-category taxonomy — see `blogSettings.categories`. */
   blogCategories?: UIDLEcommerceCategory[]
+  /**
+   * The languages the rows are stored in — absent for a single-language
+   * project. The transform resolves every translatable field against the
+   * request's locale (`?locale=es` → `es_name`, falling back to `name`), and
+   * the fetcher matches and sorts translatable columns the same way.
+   */
+  localization?: ContentLocalization
 }
 
 /**
@@ -47,12 +60,14 @@ const resolveAllowBackorders = (
  * "stock never blocks a purchase" flag — see `resolveAllowBackorders`.
  */
 export const buildProductTransformOptions = (
-  options: Pick<GeneratorOptions, 'ecommerceSettings' | 'invoiceSettings' | 'blogSettings'>
+  options: Pick<GeneratorOptions, 'ecommerceSettings' | 'invoiceSettings' | 'blogSettings'> &
+    LocalizedProjectOptions
 ): EntityTransformOptions => ({
   categories: options.ecommerceSettings?.categories,
   blogCategories: options.blogSettings?.categories,
   storefrontTaxRate: StorefrontTax.resolveStorefrontTaxRate(options.invoiceSettings),
   allowBackorders: resolveAllowBackorders(options.ecommerceSettings),
+  localization: resolveContentLocalization(options),
 })
 
 export type TransformationType = 'blog-post' | 'ecommerce-product' | 'custom-page' | null
@@ -165,13 +180,24 @@ export const REVIEWS_PER_PRODUCT = 5
  * Returns the transform wrapper function code that handles asset map loading
  * and calls the appropriate transformer.
  * Returns empty string if no transformation is needed.
+ *
+ * The request's `locale` (see `REQUEST_LOCALE_PARAM`) is what every
+ * translatable field resolves against; the MAIN locale it falls back to is a
+ * project constant and is baked in from `options.localization` rather than
+ * asked of every caller. Without a localization every row reads as before —
+ * the base columns.
  */
-export const getTransformWrapperCode = (tableName: string): string => {
+export const getTransformWrapperCode = (
+  tableName: string,
+  options: Pick<EntityTransformOptions, 'localization'> = {}
+): string => {
   const type = detectTransformationType(tableName)
   if (!type) {
     return ''
   }
 
+  const mainLanguageLiteral = JSON.stringify(options.localization?.mainLocale ?? null)
+
   const transformFn =
     type === 'blog-post'
       ? 'transformBlogPosts'
@@ -289,9 +315,8 @@ async function transformRecords(records, getClientFn, reqQuery) {
   } catch (e) {
     // Asset resolution is best-effort; continue without it
   }${relatedEnrichment}${variantEnrichment}
-  var currentLanguage = (reqQuery && reqQuery.lang) || null
-  var mainLanguage = (reqQuery && reqQuery.mainLang) || null
-  var options = { assetMap: assetMap, currentLanguage: currentLanguage, mainLanguage: mainLanguage${variantOption}${relatedOption} }
+  var currentLanguage = reqQuery && typeof reqQuery.${REQUEST_LOCALE_PARAM} === 'string' && reqQuery.${REQUEST_LOCALE_PARAM} ? reqQuery.${REQUEST_LOCALE_PARAM} : null
+  var options = { assetMap: assetMap, currentLanguage: currentLanguage, mainLanguage: ${mainLanguageLiteral}${variantOption}${relatedOption} }
   return ${transformFn}(records, options)
 }
 `

package/src/utils.ts

@@ -14,6 +14,7 @@ import { GenericUtils, StringUtils } from '@teleporthq/teleport-shared'
 import { generateDataSourceFetcherWithCore } from './data-source-fetchers'
 import type { EntityTransformOptions } from './transformations'
 import { DATA_SOURCE_ISR_REVALIDATE_SECONDS } from './isr'
+import { buildServerLocaleParam, hasLocaleParam, buildClientLocaleParam } from './request-locale'
 
 const VALID_DATA_SOURCE_TYPES: DataSourceType[] = [
   'rest-api',
@@ -187,18 +188,28 @@ export const generateSafeFileName = (
   return StringUtils.camelCaseToDashCase(baseName)
 }
 
+/**
+ * Wires a `DataProvider` to a client-side fetch of its API route.
+ *
+ * In a localized project (`transformOptions.localization`) the fetch carries
+ * the visitor's locale: it is added to the provider's `params` — created when
+ * the node declares none — so it reaches the route AND keys the client cache.
+ * The caller puts `router` in scope when this answers `true`.
+ *
+ * @returns `true` when a provider was wired to a client fetch.
+ */
 export const extractDataSourceIntoNextAPIFolder = (
   node: UIDLDataSourceItemNode | UIDLDataSourceListNode,
   dataSources: Record<string, UIDLDataSource>,
   componentChunk: ChunkDefinition,
   extractedResources: GeneratorOptions['extractedResources'],
   transformOptions: EntityTransformOptions = {}
-) => {
+): boolean => {
   try {
     // Validate node content structure
     const contentValidation = validateNodeContent(node.content)
     if (!contentValidation.isValid) {
-      return
+      return false
     }
 
     const { resourceDefinition } = node.content
@@ -206,31 +217,31 @@ export const extractDataSourceIntoNextAPIFolder = (
     // Validate resource definition
     const resourceValidation = validateResourceDefinition(resourceDefinition)
     if (!resourceValidation.isValid) {
-      return
+      return false
     }
 
     const { dataSourceId, tableName, dataSourceType } = resourceDefinition
 
     // Check if dataSources object exists
     if (!dataSources || typeof dataSources !== 'object') {
-      return
+      return false
     }
 
     // Check if data source exists
     const dataSource = dataSources[dataSourceId]
     if (!dataSource) {
-      return
+      return false
     }
 
     // Validate data source configuration
     const configValidation = validateDataSourceConfig(dataSource)
     if (!configValidation.isValid) {
-      return
+      return false
     }
 
     // Check if component chunk has meta and nodesLookup
     if (!componentChunk.meta || !componentChunk.meta.nodesLookup) {
-      return
+      return false
     }
 
     // Generate safe file name
@@ -238,7 +249,7 @@ export const extractDataSourceIntoNextAPIFolder = (
 
     // Check if file name is valid
     if (!fileName || fileName === 'unknown') {
-      return
+      return false
     }
 
     // Find JSX node by searching through nodesLookup
@@ -322,12 +333,12 @@ export const extractDataSourceIntoNextAPIFolder = (
     }
 
     if (!jsxNode || jsxNode.type !== 'JSXElement') {
-      return
+      return false
     }
 
     // Ensure opening element and attributes exist
     if (!jsxNode.openingElement || !Array.isArray(jsxNode.openingElement.attributes)) {
-      return
+      return false
     }
 
     // Check if this node has already been processed (has fetchData attribute)
@@ -336,12 +347,16 @@ export const extractDataSourceIntoNextAPIFolder = (
     )
 
     if (existingFetchData) {
-      return
+      return false
     }
 
     // Check if there are resource params
     const resourceParams = node.content.resource?.params || {}
-    const hasParams = Object.keys(resourceParams).length > 0
+    const localized = transformOptions.localization !== undefined
+    if (localized) {
+      addClientLocaleToParams(jsxNode)
+    }
+    const hasParams = localized || Object.keys(resourceParams).length > 0
 
     // Build resource path - use template literal if params exist
     let resourcePath: types.StringLiteral | types.TemplateLiteral
@@ -423,7 +438,7 @@ export const extractDataSourceIntoNextAPIFolder = (
 
     // Ensure extracted resources object exists
     if (!extractedResources || typeof extractedResources !== 'object') {
-      return
+      return true
     }
 
     // Check if a utils file already exists for this data source (from getStaticProps)
@@ -440,7 +455,7 @@ export default dataSourceModule.handler
         path: ['pages', 'api'],
         content: apiRouteCode,
       }
-      return
+      return true
     }
 
     // Generate fetcher code for API route (exports just the handler)
@@ -453,7 +468,7 @@ export default dataSourceModule.handler
         transformOptions
       )
     } catch (error) {
-      return
+      return true
     }
 
     extractedResources[`api/${fileName}`] = {
@@ -462,9 +477,41 @@ export default dataSourceModule.handler
       path: ['pages', 'api'],
       content: fetcherCode,
     }
+    return true
   } catch (error) {
     // Catch any unexpected errors to prevent plugin from crashing
+    return false
+  }
+}
+
+/**
+ * Puts `locale: router?.locale` into a provider's `params` object literal,
+ * creating the attribute when the node declared no params at all.
+ */
+const addClientLocaleToParams = (jsxNode: types.JSXElement): void => {
+  const attrs = jsxNode.openingElement.attributes
+  let paramsAttr = attrs.find(
+    (attr): attr is types.JSXAttribute =>
+      attr.type === 'JSXAttribute' &&
+      attr.name.type === 'JSXIdentifier' &&
+      attr.name.name === 'params'
+  )
+  if (!paramsAttr) {
+    paramsAttr = types.jsxAttribute(
+      types.jsxIdentifier('params'),
+      types.jsxExpressionContainer(types.objectExpression([]))
+    )
+    attrs.push(paramsAttr)
+  }
+  const value = paramsAttr.value
+  if (
+    value?.type !== 'JSXExpressionContainer' ||
+    value.expression.type !== 'ObjectExpression' ||
+    hasLocaleParam(value.expression.properties)
+  ) {
+    return
   }
+  value.expression.properties.push(buildClientLocaleParam())
 }
 
 export const isEmbeddedDataSource = (dataSourceType: string): boolean => {
@@ -766,6 +813,22 @@ const buildFilterTreeClause = (node, buildCondition) => {
   return buildCondition(node)
 }
 
+// The generic multi-value operand. The editor sends the destination either as
+// an array or as one comma-joined string (a URL-bound state such as
+// "acme,globex"); both become an array, and "in" becomes "=" so every
+// fetcher's existing array branch answers with IN (...). An empty set means
+// "no filter", never "match nothing".
+const normalizeInOperand = (operand, value) => {
+  if (operand !== 'in') return { operand, value }
+  const entries = Array.isArray(value) ? value : [value]
+  const values = entries
+    .flatMap((entry) => (typeof entry === 'string' ? entry.split(',') : [entry]))
+    .map((entry) => (typeof entry === 'string' ? entry.trim() : entry))
+    .filter((entry) => entry !== '' && entry !== null && entry !== undefined)
+  if (values.length === 0) return null
+  return { operand: '=', value: values }
+}
+
 const flattenFilterConditions = (node) => {
   if (!node) return []
   if (node.type === 'group') {
@@ -1588,6 +1651,11 @@ export const extractDataSourceIntoGetStaticProps = (
       }
     })
 
+    // getStaticProps runs once per language: the prefetch is for that language.
+    if (transformOptions.localization !== undefined) {
+      paramsProperties.push(buildServerLocaleParam())
+    }
+
     const fetchCallExpression = types.callExpression(
       types.memberExpression(types.identifier(fetcherImportName), types.identifier('fetchData')),
       [types.objectExpression(paramsProperties)]