@teleporthq/teleport-plugin-next-data-source 0.42.34 → 0.43.0

package/src/sort-utils.ts

@@ -0,0 +1,150 @@
+import * as types from '@babel/types'
+import { ASTUtils } from '@teleporthq/teleport-plugin-common'
+import { UIDLExpressionValue, UIDLStaticValue } from '@teleporthq/teleport-types'
+
+export interface DynamicSortAST {
+  field: types.Expression
+  order: types.Expression
+  depStateIds: string[]
+}
+
+const SKIP_IDENTIFIERS = new Set([
+  'undefined',
+  'NaN',
+  'Infinity',
+  'globalThis',
+  'window',
+  'document',
+  'console',
+])
+
+const collectIdentifiers = (node: types.Node | null | undefined, acc: Set<string>): void => {
+  if (!node || typeof node !== 'object') {
+    return
+  }
+
+  if (node.type === 'Identifier') {
+    if (!SKIP_IDENTIFIERS.has(node.name)) {
+      acc.add(node.name)
+    }
+    return
+  }
+
+  if (node.type === 'MemberExpression') {
+    collectIdentifiers(node.object, acc)
+    if (node.computed) {
+      collectIdentifiers(node.property, acc)
+    }
+    return
+  }
+
+  // tslint:disable-next-line:no-any
+  for (const key of Object.keys(node as any)) {
+    // tslint:disable-next-line:no-any
+    const child = (node as any)[key]
+    if (Array.isArray(child)) {
+      child.forEach((c) => collectIdentifiers(c, acc))
+    } else if (child && typeof child === 'object' && typeof child.type === 'string') {
+      collectIdentifiers(child, acc)
+    }
+  }
+}
+
+const toExpressionAndDeps = (
+  value: UIDLStaticValue | UIDLExpressionValue
+): { expr: types.Expression; deps: string[] } => {
+  if (value.type === 'static') {
+    return { expr: types.stringLiteral(String(value.content ?? '')), deps: [] }
+  }
+
+  const parsed = ASTUtils.getExpressionFromUIDLExpressionNode(value)
+  const deps = new Set<string>()
+  collectIdentifiers(parsed, deps)
+  return { expr: parsed, deps: Array.from(deps) }
+}
+
+export const extractDynamicSort = (
+  sort: UIDLStaticValue | UIDLExpressionValue | undefined,
+  sortDirection: UIDLStaticValue | UIDLExpressionValue | undefined
+): DynamicSortAST | undefined => {
+  if (!sort) {
+    return undefined
+  }
+
+  const field = toExpressionAndDeps(sort)
+
+  const order: { expr: types.Expression; deps: string[] } = sortDirection
+    ? toExpressionAndDeps(sortDirection)
+    : { expr: types.stringLiteral('asc'), deps: [] }
+
+  const depSet = new Set<string>([...field.deps, ...order.deps])
+
+  return {
+    field: field.expr,
+    order: order.expr,
+    depStateIds: Array.from(depSet),
+  }
+}
+
+// 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)),
+          ]),
+        ]),
+      ]
+    )
+  )
+}
+
+// Build the AST for the legacy static sorts array form.
+// tslint:disable-next-line:no-any
+const buildLegacySortsProperty = (sorts: any[]): types.ObjectProperty => {
+  return types.objectProperty(
+    types.identifier('sorts'),
+    types.callExpression(
+      types.memberExpression(types.identifier('JSON'), types.identifier('stringify')),
+      [
+        types.arrayExpression(
+          // tslint:disable-next-line:no-any
+          sorts.map((sort: any) =>
+            types.objectExpression([
+              types.objectProperty(
+                types.identifier('field'),
+                types.stringLiteral(sort.field || '')
+              ),
+              types.objectProperty(
+                types.identifier('order'),
+                types.stringLiteral(sort.order || '')
+              ),
+            ])
+          )
+        ),
+      ]
+    )
+  )
+}
+
+// Push the `sorts` param to paramsProps. Legacy static-array form wins when present.
+export const appendSortsParam = (
+  paramsProps: types.ObjectProperty[],
+  // tslint:disable-next-line:no-any
+  legacySorts: any[] | undefined,
+  dynamicSort: DynamicSortAST | undefined
+): void => {
+  if (legacySorts && legacySorts.length > 0) {
+    paramsProps.push(buildLegacySortsProperty(legacySorts))
+    return
+  }
+
+  if (dynamicSort) {
+    paramsProps.push(buildDynamicSortsProperty(dynamicSort))
+  }
+}

package/src/transformations/blog-post.ts

@@ -0,0 +1,128 @@
+/**
+ * Generates JavaScript code for blog post data transformation.
+ * Transforms raw snake_case database records into the camelCase shape
+ * that UIDL components expect.
+ */
+export const generateBlogPostTransformationCode = (): string => {
+  return `
+// ============================================================
+// Blog Post Transformation
+// ============================================================
+
+function buildBlogPost(record, options) {
+  if (!record || typeof record !== 'object') return record
+  options = options || {}
+  var currentLang = options.currentLanguage || null
+  var mainLang = options.mainLanguage || null
+  var assetMap = options.assetMap || {}
+
+  var id = record.id !== undefined && record.id !== null ? record.id : null
+
+  // i18n-resolved text fields
+  var title = resolveI18nField(record, 'title', 'title', currentLang, mainLang) || ''
+  var slug = resolveI18nField(record, 'slug', 'slug', currentLang, mainLang) || ''
+  var content = resolveI18nField(record, 'content', 'content', currentLang, mainLang) || ''
+  var excerpt = resolveI18nField(record, 'excerpt', 'excerpt', currentLang, mainLang) || ''
+  var category = resolveI18nField(record, 'category', 'category', currentLang, mainLang) || null
+  var metaTitle = resolveI18nField(record, 'meta_title', 'metaTitle', currentLang, mainLang) || null
+  var metaDescription = resolveI18nField(record, 'meta_description', 'metaDescription', currentLang, mainLang) || null
+  var featuredImageAlt = resolveI18nField(record, 'featured_image_alt', 'featuredImageAlt', currentLang, mainLang) || null
+
+  // Status
+  var status = record.status || 'draft'
+
+  // Asset fields - resolve IDs to URLs
+  var rawFeaturedImage = pickFirst(record.featured_image_url, record.featuredImageUrl)
+  var TELEPORT_DEFAULT_FEATURED_IMG = 'https://play.teleporthq.io/static/svg/default-img.svg'
+  var featuredImageUrl = resolveAssetUrl(rawFeaturedImage, assetMap)
+  if (
+    !featuredImageUrl ||
+    rawFeaturedImage === TELEPORT_DEFAULT_FEATURED_IMG ||
+    featuredImageUrl === TELEPORT_DEFAULT_FEATURED_IMG
+  ) {
+    featuredImageUrl =
+      'data:image/svg+xml;charset=utf-8,' +
+      encodeURIComponent(
+        '<svg xmlns="http://www.w3.org/2000/svg" width="400" height="240" viewBox="0 0 400 240"><rect fill="#e5e7eb" width="400" height="240"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#9ca3af" font-family="system-ui,sans-serif" font-size="13">No image</text></svg>'
+      )
+  }
+
+  var rawAuthorAvatar = pickFirst(record.author_avatar_url, record.authorAvatarUrl)
+  var authorAvatarUrl = resolveAssetUrl(rawAuthorAvatar, assetMap)
+
+  // Simple pass-through fields
+  var authorName = pickFirst(record.author_name, record.authorName)
+  var authorEmail = pickFirst(record.author_email, record.authorEmail)
+  var readingTimeMinutes = safeNumber(pickFirst(record.reading_time_minutes, record.readingTimeMinutes), null)
+
+  // Tags - i18n-resolved then parsed as JSON array
+  var rawTags = resolveI18nField(record, 'tags', 'tags', currentLang, mainLang)
+  var tags = parseJsonArray(rawTags)
+
+  // Gallery images - parse JSON array then resolve each asset URL
+  var rawGalleryImages = pickFirst(record.gallery_images, record.galleryImages)
+  var parsedGalleryImages = parseJsonArray(rawGalleryImages)
+  var galleryImages = resolveAssetUrls(parsedGalleryImages, assetMap)
+
+  // Computed: allImages = [featuredImageUrl, ...galleryImages] (skip null featured)
+  var allImages = []
+  if (featuredImageUrl) allImages.push(featuredImageUrl)
+  allImages = allImages.concat(galleryImages)
+
+  // Boolean fields
+  var isFeatured = coerceBoolean(pickFirst(record.is_featured, record.isFeatured), false)
+  var allowComments = record.allow_comments !== undefined
+    ? coerceBoolean(record.allow_comments, true)
+    : record.allowComments !== undefined
+      ? coerceBoolean(record.allowComments, true)
+      : true
+
+  // Timestamps
+  var rawPublishedAt = pickFirst(record.published_at, record.publishedAt)
+  var publishedAt = rawPublishedAt != null ? normalizeTimestamp(rawPublishedAt) : null
+
+  var rawCreatedAt = pickFirst(record.created_at, record.createdAt, record.created)
+  var createdAt = normalizeTimestamp(rawCreatedAt)
+
+  var rawUpdatedAt = pickFirst(record.updated_at, record.updatedAt, record.updated)
+  var updatedAt = rawUpdatedAt != null ? normalizeTimestamp(rawUpdatedAt) : createdAt
+
+  // Computed: created = Unix seconds from createdAt milliseconds
+  var created = Math.floor(createdAt / 1000)
+
+  return {
+    id: id,
+    title: title,
+    slug: slug,
+    content: content,
+    excerpt: excerpt,
+    status: status,
+    category: category,
+    tags: tags,
+    featuredImageUrl: featuredImageUrl,
+    featuredImageAlt: featuredImageAlt,
+    galleryImages: galleryImages,
+    allImages: allImages,
+    authorName: authorName,
+    authorEmail: authorEmail,
+    author_name: authorName,
+    author_email: authorEmail,
+    authorAvatarUrl: authorAvatarUrl,
+    metaTitle: metaTitle,
+    metaDescription: metaDescription,
+    readingTimeMinutes: readingTimeMinutes,
+    isFeatured: isFeatured,
+    allowComments: allowComments,
+    publishedAt: publishedAt,
+    createdAt: createdAt,
+    updatedAt: updatedAt,
+    created: created,
+  }
+}
+
+function transformBlogPosts(records, options) {
+  if (!Array.isArray(records)) return []
+  return records.map(function(record) { return buildBlogPost(record, options) })
+}
+`
+}

package/src/transformations/ecommerce-product.ts

@@ -0,0 +1,173 @@
+/**
+ * Generates JavaScript code for e-commerce product data transformation.
+ * Transforms raw snake_case database records into the camelCase shape
+ * that UIDL components expect.
+ */
+export const generateEcommerceProductTransformationCode = (): string => {
+  return `
+// ============================================================
+// E-Commerce Product Transformation
+// ============================================================
+
+function buildEcommerceProduct(record, options) {
+  if (!record || typeof record !== 'object') return record
+  options = options || {}
+  var currentLang = options.currentLanguage || null
+  var mainLang = options.mainLanguage || null
+  var assetMap = options.assetMap || {}
+
+  var id = record.id !== undefined && record.id !== null ? record.id : null
+
+  // i18n-resolved text fields
+  var name = resolveI18nField(record, 'name', 'name', currentLang, mainLang) || ''
+  var slug = resolveI18nField(record, 'slug', 'slug', currentLang, mainLang) || ''
+  var description = resolveI18nField(record, 'description', 'description', currentLang, mainLang) || ''
+  var category = resolveI18nField(record, 'category', 'category', currentLang, mainLang) || null
+  var tagsRaw = resolveI18nField(record, 'tags', 'tags', currentLang, mainLang)
+  var imageAlt = resolveI18nField(record, 'image_alt', 'imageAlt', currentLang, mainLang) || null
+
+  // Computed: plain-text description (HTML stripped)
+  var descriptionText = stripHtmlTags(description)
+
+  // Numeric fields (with NaN protection)
+  var price = safeNumber(record.price, 0)
+  var quantity = safeNumber(record.quantity, null)
+
+  // Currency
+  var currency = (record.currency || 'USD').toUpperCase()
+  var rawCurrencySymbol = pickFirst(record.currency_symbol, record.currencySymbol)
+  var currencySymbol = rawCurrencySymbol || getCurrencySymbol(currency)
+
+  // Status and active (normalize case — DB / forms may send "Active", "Inactive", etc.)
+  var statusRaw = record.status
+  if (statusRaw == null || statusRaw === '') {
+    statusRaw = record.active ? 'active' : 'inactive'
+  }
+  var status =
+    typeof statusRaw === 'string'
+      ? statusRaw.trim().toLowerCase()
+      : String(statusRaw).toLowerCase()
+  var active = status === 'active'
+
+  // Payment fields
+  var paymentType = pickFirst(record.payment_type, record.paymentType) || 'one_time'
+  var recurringInterval = pickFirst(record.recurring_interval, record.recurringInterval) || null
+  var rawRecurringCount = pickFirst(record.recurring_interval_count, record.recurringIntervalCount)
+  var recurringIntervalCount = safeNumber(rawRecurringCount, null)
+
+  // Physical product fields
+  var sku = record.sku || null
+  var weight = safeNumber(record.weight, null)
+  var weightUnit = pickFirst(record.weight_unit, record.weightUnit) || null
+  var dimensions = record.dimensions || null
+
+  // Tags - parse as JSON array (handles JSON strings, arrays, comma-separated)
+  var tags = parseJsonArray(tagsRaw)
+
+  // Provider fields
+  var providerType = pickFirst(record.provider_type, record.providerType) || null
+  var providerProductId = pickFirst(record.provider_product_id, record.providerProductId) || null
+  var defaultPrice = pickFirst(record.default_price, record.defaultPrice) || null
+
+  // Metadata
+  var metadata = parseJsonObject(record.metadata)
+
+  // -------------------------------------------------------
+  // Image resolution (complex multi-step process)
+  // -------------------------------------------------------
+
+  // Step 1: Get raw image values
+  var rawImageUrl = pickFirst(record.image_url, record.mainImage, record.imageUrl)
+  var rawGalleryImages = pickFirst(record.gallery_images, record.galleryImages)
+  var legacyImages = Array.isArray(record.images)
+    ? record.images.filter(function(v) { return typeof v === 'string' })
+    : []
+
+  // Step 2: Parse gallery images from JSON
+  var parsedGalleryImages = parseJsonArray(rawGalleryImages)
+
+  // Step 3: Build combined raw images array
+  var allRawImages = []
+  if (rawImageUrl) allRawImages.push(rawImageUrl)
+  allRawImages = allRawImages.concat(parsedGalleryImages).concat(legacyImages)
+
+  // Step 4: Resolve all asset URLs first, then deduplicate
+  var resolvedAll = resolveAssetUrls(allRawImages, assetMap)
+  var resolvedImages = deduplicateStrings(resolvedAll)
+
+  // Step 5: Determine mainImage
+  var mainImage = rawImageUrl
+    ? resolveAssetUrl(rawImageUrl, assetMap)
+    : (resolvedImages.length > 0 ? resolvedImages[0] : null)
+
+  // Step 6: galleryImages = resolvedImages without mainImage
+  var galleryImages = mainImage
+    ? resolvedImages.filter(function(url) { return url !== mainImage })
+    : resolvedImages.slice()
+
+  // Step 7: images = full resolved deduplicated array
+  var images = resolvedImages
+
+  // Timestamps
+  var rawCreatedAt = pickFirst(record.created_at, record.createdAt, record.created)
+  var createdAt = normalizeTimestamp(rawCreatedAt)
+
+  var rawUpdatedAt = pickFirst(record.updated_at, record.updatedAt, record.updated)
+  var updatedAt = rawUpdatedAt != null ? normalizeTimestamp(rawUpdatedAt) : createdAt
+
+  // Computed: created = Unix seconds
+  var created = Math.floor(createdAt / 1000)
+
+  // Computed: outOfStock (emitted as a STRING — 'true' / 'false' — so it
+  // matches the strict equality check the AI generates on product
+  // cards/details pages: \`ecommerceProduct?.outOfStock === 'true'\`.
+  // A boolean here would silently fail that comparison (boolean !==
+  // string), leaving the Add to Cart button visible on out-of-stock
+  // products. NULL/NaN quantity → 'false' (treated as "unlimited
+  // stock", same as the upstream cart-availability rewriter).
+  var outOfStock = (quantity !== null && !isNaN(quantity) && quantity <= 0) ? 'true' : 'false'
+
+  return {
+    id: id,
+    name: name,
+    slug: slug,
+    description: description,
+    descriptionText: descriptionText,
+    price: price,
+    currency: currency,
+    currencySymbol: currencySymbol,
+    status: status,
+    active: active,
+    quantity: quantity,
+    paymentType: paymentType,
+    recurringInterval: recurringInterval,
+    recurringIntervalCount: recurringIntervalCount,
+    sku: sku,
+    weight: weight,
+    weightUnit: weightUnit,
+    dimensions: dimensions,
+    category: category,
+    tags: tags,
+    imageAlt: imageAlt,
+    providerType: providerType,
+    providerProductId: providerProductId,
+    default_price: defaultPrice,
+    metadata: metadata,
+    mainImage: mainImage,
+    imageUrl: mainImage,
+    image_url: mainImage,
+    galleryImages: galleryImages,
+    images: images,
+    createdAt: createdAt,
+    updatedAt: updatedAt,
+    created: created,
+    outOfStock: outOfStock,
+  }
+}
+
+function transformEcommerceProducts(records, options) {
+  if (!Array.isArray(records)) return []
+  return records.map(function(record) { return buildEcommerceProduct(record, options) })
+}
+`
+}

package/src/transformations/index.ts

@@ -0,0 +1,97 @@
+import { generateSharedTransformationCode } from './shared-utils'
+import { generateBlogPostTransformationCode } from './blog-post'
+import { generateEcommerceProductTransformationCode } from './ecommerce-product'
+
+export type TransformationType = 'blog-post' | 'ecommerce-product' | null
+
+/**
+ * Detects which transformation type to apply based on the table name.
+ * Returns null if no transformation is needed.
+ */
+export const detectTransformationType = (tableName: string): TransformationType => {
+  if (!tableName) {
+    return null
+  }
+  const lower = tableName.toLowerCase()
+  if (lower.includes('blog_posts') || lower.includes('blog-posts')) {
+    return 'blog-post'
+  }
+  if (lower.includes('products')) {
+    return 'ecommerce-product'
+  }
+  return null
+}
+
+/**
+ * Returns the full transformation code (shared utils + specific transformer)
+ * to be included in the generated data source fetcher file.
+ * Returns empty string if no transformation is needed for this table.
+ */
+export const getTransformationCode = (tableName: string): string => {
+  const type = detectTransformationType(tableName)
+  if (!type) {
+    return ''
+  }
+
+  const shared = generateSharedTransformationCode()
+
+  switch (type) {
+    case 'blog-post':
+      return shared + generateBlogPostTransformationCode()
+    case 'ecommerce-product':
+      return shared + generateEcommerceProductTransformationCode()
+    default:
+      return ''
+  }
+}
+
+/**
+ * Returns the JavaScript expression that transforms the data array.
+ * This expression assumes the data array variable is called `safeData`,
+ * that `getClient` is available for asset resolution, and that `req` is in scope.
+ * Returns null if no transformation is needed.
+ */
+export const getTransformExpression = (tableName: string): string | null => {
+  const type = detectTransformationType(tableName)
+  if (!type) {
+    return null
+  }
+
+  switch (type) {
+    case 'blog-post':
+      return 'await transformRecords(safeData, getClient, req.query)'
+    case 'ecommerce-product':
+      return 'await transformRecords(safeData, getClient, req.query)'
+    default:
+      return null
+  }
+}
+
+/**
+ * Returns the transform wrapper function code that handles asset map loading
+ * and calls the appropriate transformer.
+ * Returns empty string if no transformation is needed.
+ */
+export const getTransformWrapperCode = (tableName: string): string => {
+  const type = detectTransformationType(tableName)
+  if (!type) {
+    return ''
+  }
+
+  const transformFn = type === 'blog-post' ? 'transformBlogPosts' : 'transformEcommerceProducts'
+
+  return `
+async function transformRecords(records, getClientFn, reqQuery) {
+  var assetMap = {}
+  try {
+    assetMap = await getAssetMap(getClientFn)
+  } catch (e) {
+    // Asset resolution is best-effort; continue without it
+  }
+  var currentLanguage = (reqQuery && reqQuery.lang) || null
+  var mainLanguage = (reqQuery && reqQuery.mainLang) || null
+  var options = { assetMap: assetMap, currentLanguage: currentLanguage, mainLanguage: mainLanguage }
+  return ${transformFn}(records, options)
+}
+`
+}