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

package/__tests__/array-mapper-cache-wiring.test.ts

@@ -285,6 +285,17 @@ describe('array-mapper cache — client wiring', () => {
     expect(hitReturn).toBeLessThan(raise)
   })
 
+  it('counts a cache hit as the newest settled result', async () => {
+    const { code } = await runPlugin({ cache: CACHE })
+
+    // A hit answers synchronously with THIS request's rows; without advancing
+    // the sequence, an older network request still in flight would resolve
+    // after it and paint over it.
+    expect(code).toMatch(
+      /if \(__tqHit !== undefined\) \{\s*\+\+ds_0_fetchSeq\.current;?\s*ds_0_latestData\.current = __tqHit;?\s*return Promise\.resolve\(__tqHit\)/
+    )
+  })
+
   it('still tracks in-flight fetches on a cache MISS', async () => {
     const { code } = await runPlugin({ cache: CACHE })
 

package/__tests__/data-source-request-locale.test.ts

@@ -0,0 +1,313 @@
+import * as types from '@babel/types'
+import generator from '@babel/generator'
+import {
+  ChunkType,
+  FileType,
+  ComponentStructure,
+  ChunkDefinition,
+  GeneratorOptions,
+  UIDLDataSource,
+  UIDLDependency,
+} from '@teleporthq/teleport-types'
+import { createNextPagesDataSourcePlugin, createNextComponentDataSourcePlugin } from '../src/index'
+
+/**
+ * A page in a multi-language project renders rows in ITS language: every
+ * data-source fetch — the build-time prefetch in getStaticProps and the
+ * client-side refetch behind pagination, search and filters — says which
+ * locale it is for, and a locale switch (a client-side transition on the same
+ * page instance) refetches. A single-language project generates exactly what
+ * it generated before: no locale, no router.
+ */
+
+const DS_ID = 'ds1'
+const TABLE = 'teleport_products'
+/** A page writes the fetcher to `utils/`, a component straight into `api/`. */
+const FETCHER_KEYS = ['utils/teleport-teleport_products-ds1', 'api/teleport-teleport_products-ds1']
+
+const I18N: GeneratorOptions['internationalization'] = {
+  main: { name: 'English', locale: 'en' },
+  languages: { en: 'English', es: 'Spanish' },
+}
+
+const dataSource: UIDLDataSource = {
+  id: DS_ID,
+  name: 'TeleportHQ database',
+  type: 'teleport',
+  config: {
+    selectedTables: {
+      [TABLE]: {
+        columns: [{ name: 'id' }, { name: 'name' }, { name: 'slug' }, { name: 'es_name' }],
+      },
+    },
+  },
+}
+
+const jsx = (name: string, attrs: types.JSXAttribute[], children: types.JSXElement[] = []) =>
+  types.jsxElement(
+    types.jsxOpeningElement(types.jsxIdentifier(name), attrs, children.length === 0),
+    children.length === 0 ? null : types.jsxClosingElement(types.jsxIdentifier(name)),
+    children,
+    children.length === 0
+  )
+
+const resourceDefinitionAttr = () =>
+  types.jsxAttribute(
+    types.jsxIdentifier('resourceDefinition'),
+    types.jsxExpressionContainer(
+      types.objectExpression([
+        types.objectProperty(types.stringLiteral('dataSourceId'), types.stringLiteral(DS_ID)),
+        types.objectProperty(types.stringLiteral('tableName'), types.stringLiteral(TABLE)),
+        types.objectProperty(
+          types.stringLiteral('dataSourceType'),
+          types.stringLiteral('teleport')
+        ),
+      ])
+    )
+  )
+
+/** `<DataProvider name={'items'} resourceDefinition={…} renderSuccess={(items) => <Repeater …/>} />` */
+const makeListProvider = (): types.JSXElement => {
+  const repeater = jsx('Repeater', [
+    types.jsxAttribute(
+      types.jsxIdentifier('items'),
+      types.jsxExpressionContainer(types.identifier('items'))
+    ),
+    types.jsxAttribute(
+      types.jsxIdentifier('renderItem'),
+      types.jsxExpressionContainer(
+        types.arrowFunctionExpression([types.identifier('product')], jsx('div', []))
+      )
+    ),
+  ])
+  return jsx('DataProvider', [
+    types.jsxAttribute(
+      types.jsxIdentifier('name'),
+      types.jsxExpressionContainer(types.stringLiteral('items'))
+    ),
+    resourceDefinitionAttr(),
+    types.jsxAttribute(
+      types.jsxIdentifier('renderSuccess'),
+      types.jsxExpressionContainer(
+        types.arrowFunctionExpression([types.identifier('items')], repeater)
+      )
+    ),
+  ])
+}
+
+/** `<DataProvider name={'item'} resourceDefinition={…} renderSuccess={(item) => <div/>} />` */
+const makeItemProvider = (): types.JSXElement =>
+  jsx('DataProvider', [
+    types.jsxAttribute(
+      types.jsxIdentifier('name'),
+      types.jsxExpressionContainer(types.stringLiteral('item'))
+    ),
+    resourceDefinitionAttr(),
+    types.jsxAttribute(
+      types.jsxIdentifier('renderSuccess'),
+      types.jsxExpressionContainer(
+        types.arrowFunctionExpression([types.identifier('item')], jsx('div', []))
+      )
+    ),
+  ])
+
+const makeComponentChunk = (provider: types.JSXElement): ChunkDefinition => ({
+  name: 'jsx-component',
+  type: ChunkType.AST,
+  fileType: FileType.JS,
+  linkAfter: [],
+  content: types.variableDeclaration('const', [
+    types.variableDeclarator(
+      types.identifier('ProductsList'),
+      types.arrowFunctionExpression(
+        [types.identifier('props')],
+        types.blockStatement([types.returnStatement(jsx('div', [], [provider]))])
+      )
+    ),
+  ]),
+  meta: { nodesLookup: { provider } },
+})
+
+// tslint:disable-next-line:no-any
+const makeListNode = (paginated: boolean): any => ({
+  type: 'data-source-list',
+  content: {
+    renderPropIdentifier: 'items',
+    resourceDefinition: { dataSourceId: DS_ID, tableName: TABLE, dataSourceType: 'teleport' },
+    resource: {
+      id: 'TQ_products',
+      params: { queryColumns: { type: 'static', content: ['name', 'es_name'] } },
+    },
+    nodes: {
+      success: {
+        type: 'cms-list-repeater',
+        content: {
+          renderPropIdentifier: 'product',
+          paginated,
+          perPage: 20,
+          searchEnabled: false,
+          nodes: { list: { type: 'element', content: { elementType: 'div' } } },
+        },
+      },
+    },
+  },
+})
+
+/** An item whose params cannot be resolved at build time, so it fetches client-side. */
+// tslint:disable-next-line:no-any
+const makeDynamicItemNode = (withParams: boolean): any => ({
+  type: 'data-source-item',
+  content: {
+    renderPropIdentifier: 'item',
+    resourceDefinition: { dataSourceId: DS_ID, tableName: TABLE, dataSourceType: 'teleport' },
+    resource: {
+      params: withParams
+        ? { limit: { type: 'dynamic', content: { referenceType: 'prop', id: 'limit' } } }
+        : {},
+    },
+    children: [{ type: 'element', content: { elementType: 'div' } }],
+  },
+})
+
+const run = async (
+  plugin: ReturnType<typeof createNextPagesDataSourcePlugin>,
+  // tslint:disable-next-line:no-any
+  node: any,
+  provider: types.JSXElement,
+  localized: boolean
+) => {
+  const chunk = makeComponentChunk(provider)
+  const dependencies: Record<string, UIDLDependency> = {}
+  // tslint:disable-next-line:no-any
+  const extractedResources: Record<string, any> = {}
+  const structure: ComponentStructure = {
+    uidl: { name: 'ProductsList', node, outputOptions: { folderPath: [] } },
+    chunks: [chunk],
+    dependencies,
+    options: {
+      dataSources: { [DS_ID]: dataSource },
+      extractedResources,
+      ...(localized ? { internationalization: I18N } : {}),
+    },
+  } as never
+  await plugin(structure)
+  const getStaticProps = structure.chunks.find((c) => c.name === 'getStaticProps')
+  return {
+    code: generator(chunk.content as types.Node).code,
+    staticProps: getStaticProps ? generator(getStaticProps.content as types.Node).code : '',
+    dependencies,
+    fetcher: FETCHER_KEYS.map((key) => extractedResources[key]?.content).find(Boolean) as string,
+  }
+}
+
+const collapse = (code: string): string => code.replace(/\s+/g, ' ')
+
+describe('data-source fetches in a multi-language project', () => {
+  const pagesPlugin = createNextPagesDataSourcePlugin()
+  const componentPlugin = createNextComponentDataSourcePlugin()
+
+  describe('a paginated list page', () => {
+    it('fetches the first page for the language getStaticProps runs for', async () => {
+      const { staticProps } = await run(pagesPlugin, makeListNode(true), makeListProvider(), true)
+      expect(collapse(staticProps)).toContain(
+        'fetchData({ page: 1, perPage: 20, queryColumns: JSON.stringify(["name", "es_name"]), locale: context.locale })'
+      )
+      // The count is the same in every language.
+      expect(collapse(staticProps)).toContain('fetchCount().catch')
+    })
+
+    it('sends the client locale with every refetch and refetches when it changes', async () => {
+      const { code, dependencies } = await run(
+        pagesPlugin,
+        makeListNode(true),
+        makeListProvider(),
+        true
+      )
+      const flat = collapse(code)
+      expect(flat).toContain(
+        'params={useMemo(() => ({ page: ds_0_page, perPage: 20, locale: router?.locale }), [ds_0_page, router?.locale])}'
+      )
+      expect(code).toContain('const router = useRouter()')
+      expect(dependencies.useRouter).toMatchObject({ type: 'library', path: 'next/router' })
+    })
+
+    it('bakes the per-language columns into the fetcher it emits', async () => {
+      const { fetcher } = await run(pagesPlugin, makeListNode(true), makeListProvider(), true)
+      expect(fetcher).toContain('var LOCALIZED_COLUMNS = {"name":{"es":"es_name"}}')
+      expect(fetcher).toContain('mainLanguage: "en"')
+    })
+  })
+
+  describe('a plain list page', () => {
+    it('prefetches and refetches in the page language', async () => {
+      const { code, staticProps } = await run(
+        pagesPlugin,
+        makeListNode(false),
+        makeListProvider(),
+        true
+      )
+      expect(collapse(staticProps)).toContain(
+        'fetchData({ "queryColumns": JSON.stringify(["name", "es_name"]), locale: context.locale })'
+      )
+      expect(collapse(code)).toContain(
+        'params={useMemo(() => ({ locale: router?.locale }), [router?.locale])}'
+      )
+      expect(code).toContain('const router = useRouter()')
+    })
+  })
+
+  describe('a component item that fetches client-side', () => {
+    it('adds the locale to the params it already sends', async () => {
+      const { code, dependencies } = await run(
+        componentPlugin,
+        makeDynamicItemNode(true),
+        makeItemProvider(),
+        true
+      )
+      const flat = collapse(code)
+      expect(flat).toContain('locale: router?.locale')
+      // The route is a template literal that interpolates the params.
+      expect(flat).toContain(
+        'fetch(`/api/teleport-teleport_products-ds1?$' + '{new URLSearchParams(params)}`'
+      )
+      expect(code).toContain('const router = useRouter()')
+      expect(dependencies.useRouter).toBeDefined()
+    })
+
+    it('creates the params when the node declared none', async () => {
+      const { code } = await run(
+        componentPlugin,
+        makeDynamicItemNode(false),
+        makeItemProvider(),
+        true
+      )
+      const flat = collapse(code)
+      expect(flat).toContain('params={{ locale: router?.locale }}')
+      expect(flat).toContain('new URLSearchParams(params)')
+    })
+  })
+
+  describe('a single-language project', () => {
+    it.each([
+      ['a paginated list page', pagesPlugin, makeListNode(true), makeListProvider],
+      ['a plain list page', pagesPlugin, makeListNode(false), makeListProvider],
+      ['a component item', componentPlugin, makeDynamicItemNode(true), makeItemProvider],
+    ])(
+      'generates %s exactly as before — no locale, no router',
+      async (_, plugin, node, provider) => {
+        const { code, staticProps, dependencies, fetcher } = await run(
+          plugin,
+          node,
+          provider(),
+          false
+        )
+        expect(code).not.toContain('locale')
+        expect(code).not.toContain('useRouter')
+        expect(staticProps).not.toContain('locale')
+        expect(dependencies.useRouter).toBeUndefined()
+        expect(fetcher).toContain('var LOCALIZED_COLUMNS = {}')
+        expect(fetcher).toContain('mainLanguage: null')
+      }
+    )
+  })
+})

package/__tests__/gated-data-provider.test.ts

@@ -0,0 +1,88 @@
+import * as types from '@babel/types'
+import generator from '@babel/generator'
+import { parse } from '@babel/parser'
+import {
+  ChunkType,
+  FileType,
+  ComponentStructure,
+  ChunkDefinition,
+} from '@teleporthq/teleport-types'
+import { createNextArrayMapperPaginationPlugin } from '../src/pagination-plugin'
+
+/**
+ * A paginated list under a tab panel — `{activeTabIndex === 0 && (…)}` — is a
+ * DataProvider on the RIGHT of a logical expression. The plugin's JSX walkers
+ * visited children, bodies, arguments and ternary branches, never `left` /
+ * `right`, so the provider was never wired: no page params, no fetcher, and a
+ * shop whose grid sat under its first tab rendered nothing.
+ */
+const makeComponentChunk = (): ChunkDefinition => {
+  const program = parse(
+    `const TestComponent = (props) => {
+      return (
+        <div>
+          {activeTabIndex === 0 && (
+            <div className="panel">
+              <DataProvider name={'items'} renderSuccess={(items) => (
+                <Repeater items={items || []} renderItem={(product) => <div>{product.name}</div>} />
+              )} />
+            </div>
+          )}
+        </div>
+      )
+    }`,
+    { sourceType: 'module', plugins: ['jsx'] }
+  )
+  return {
+    name: 'jsx-component',
+    type: ChunkType.AST,
+    fileType: FileType.JS,
+    linkAfter: [],
+    content: program.program.body[0] as types.VariableDeclaration,
+    meta: {},
+  }
+}
+
+// tslint:disable-next-line:no-any
+const makeUidlNode = (): any => ({
+  type: 'data-source-list',
+  content: {
+    renderPropIdentifier: 'items',
+    resourceDefinition: {
+      dataSourceId: 'ds1',
+      tableName: 'products',
+      dataSourceType: 'postgresql',
+    },
+    resource: { params: { queryColumns: { content: ['name'] } } },
+    nodes: {
+      success: {
+        type: 'cms-list-repeater',
+        content: {
+          renderPropIdentifier: 'product',
+          paginated: true,
+          perPage: 20,
+          searchEnabled: false,
+          nodes: { list: { type: 'element', content: { elementType: 'div' } } },
+        },
+      },
+    },
+  },
+})
+
+describe('pagination plugin — a provider gated by a logical expression', () => {
+  it('wires the page params and the fetcher onto a DataProvider under `cond && (…)`', async () => {
+    const chunk = makeComponentChunk()
+    const structure: ComponentStructure = {
+      uidl: { name: 'TestComponent', node: makeUidlNode() },
+      chunks: [chunk],
+      dependencies: {},
+      options: { dataSources: {}, extractedResources: {} },
+    } as never
+    await createNextArrayMapperPaginationPlugin()(structure)
+    const code = generator(chunk.content as types.Node).code.replace(/\s+/g, ' ')
+
+    expect(code).toContain('page: ds_0_page')
+    expect(code).toContain('perPage: 20')
+    expect(code).toContain('fetchData={')
+  })
+})

package/__tests__/localized-columns.test.ts

@@ -0,0 +1,217 @@
+import { parse } from '@babel/parser'
+import {
+  collectLocalizedColumns,
+  generateLocalizedColumnsHelper,
+  type LocalizedColumnMap,
+} from '../src/localized-columns'
+import { resolveContentLocalization, isLocalizedProject } from '../src/content-localization'
+import { buildProductTransformOptions, getTransformWrapperCode } from '../src/transformations'
+import { generateTeleportFetcher } from '../src/fetchers/teleport'
+
+/**
+ * A Spanish listing links to `es_slug` and sorts by `es_name`, so the SQL a
+ * fetch runs has to know about the per-language columns — otherwise the
+ * details page 404s on the very slug the card linked to. The helper is pinned
+ * here by RUNNING the emitted JavaScript, the same way the runtime does.
+ */
+
+const LOCALIZATION = { mainLocale: 'en', secondaryLocales: ['es', 'fr'] }
+
+const PRODUCT_COLUMNS = [
+  'id',
+  'name',
+  'slug',
+  'description',
+  'price',
+  'og_title',
+  'es_name',
+  'es_slug',
+  'es_description',
+  'fr_name',
+]
+
+interface Helper {
+  localizedEqualityClause: (
+    field: string,
+    operand: string,
+    value: unknown,
+    pushParam: (param: unknown) => string
+  ) => string | null
+  localizedSortFieldSql: (field: string, locale: unknown) => string | null
+}
+
+const loadHelper = (families: LocalizedColumnMap): Helper => {
+  // tslint:disable-next-line:function-constructor
+  const factory = new Function(
+    `${generateLocalizedColumnsHelper(
+      families
+    )}\nreturn { localizedEqualityClause, localizedSortFieldSql }`
+  )
+  return factory()
+}
+
+const bindParams = () => {
+  const params: unknown[] = []
+  const pushParam = (param: unknown) => {
+    params.push(param)
+    return '$' + params.length
+  }
+  return { params, pushParam }
+}
+
+describe('resolveContentLocalization', () => {
+  it('splits the project languages into the main locale and the copies', () => {
+    expect(
+      resolveContentLocalization({
+        internationalization: {
+          main: { name: 'English', locale: 'en' },
+          languages: { en: 'English', es: 'Spanish', fr: 'French' },
+        },
+      })
+    ).toEqual({ mainLocale: 'en', secondaryLocales: ['es', 'fr'] })
+  })
+
+  it('is absent for a single-language project', () => {
+    expect(resolveContentLocalization({})).toBeUndefined()
+    expect(isLocalizedProject({})).toBe(false)
+  })
+
+  it('reaches the fetcher through the shared transform options', () => {
+    const options = buildProductTransformOptions({
+      internationalization: {
+        main: { name: 'English', locale: 'en' },
+        languages: { en: 'English', es: 'Spanish' },
+      },
+    })
+    expect(options.localization).toEqual({ mainLocale: 'en', secondaryLocales: ['es'] })
+    expect(buildProductTransformOptions({}).localization).toBeUndefined()
+  })
+})
+
+describe('collectLocalizedColumns', () => {
+  it('pairs a column with the copies the schema actually holds', () => {
+    expect(collectLocalizedColumns(PRODUCT_COLUMNS, LOCALIZATION)).toEqual({
+      name: { es: 'es_name', fr: 'fr_name' },
+      slug: { es: 'es_slug' },
+      description: { es: 'es_description' },
+    })
+  })
+
+  it('never mistakes a prefix for a language', () => {
+    // `og_title` is Open Graph, and `og` is not a project language.
+    const families = collectLocalizedColumns(['title', 'og_title'], LOCALIZATION)
+    expect(families).toEqual({})
+  })
+
+  it('has nothing to say for a single-language project', () => {
+    expect(collectLocalizedColumns(PRODUCT_COLUMNS, undefined)).toEqual({})
+    expect(
+      collectLocalizedColumns(PRODUCT_COLUMNS, { mainLocale: 'en', secondaryLocales: [] })
+    ).toEqual({})
+  })
+
+  it('refuses a column it could not quote', () => {
+    const families = collectLocalizedColumns(['slug', 'es_slug', 'pt-BR_slug'], {
+      mainLocale: 'en',
+      secondaryLocales: ['es', 'pt-BR'],
+    })
+    expect(families).toEqual({ slug: { es: 'es_slug' } })
+  })
+})
+
+describe('generateLocalizedColumnsHelper', () => {
+  const families = collectLocalizedColumns(PRODUCT_COLUMNS, LOCALIZATION)
+  const helper = loadHelper(families)
+
+  it('emits plain source the fetcher template can embed', () => {
+    const source = generateLocalizedColumnsHelper(families)
+    expect(source).not.toContain('`')
+    expect(source).not.toContain('${')
+    expect(() => parse(source, { sourceType: 'script' })).not.toThrow()
+  })
+
+  it('matches equality on a translatable column in every language, binding once', () => {
+    const { params, pushParam } = bindParams()
+    const clause = helper.localizedEqualityClause('slug', '=', 'bolso-tote', pushParam)
+    expect(clause).toBe('("slug" = $1 OR "es_slug" = $1)')
+    expect(params).toEqual(['bolso-tote'])
+  })
+
+  it('answers an `in` set (already normalised to an array) the same way', () => {
+    const { params, pushParam } = bindParams()
+    const clause = helper.localizedEqualityClause('name', '=', ['A', 'B'], pushParam)
+    expect(clause).toBe(
+      '("name"::text = ANY($1::text[]) OR "es_name"::text = ANY($1::text[]) OR "fr_name"::text = ANY($1::text[]))'
+    )
+    expect(params).toEqual([['A', 'B']])
+  })
+
+  it('leaves every other column and operand to the ordinary branches', () => {
+    const { params, pushParam } = bindParams()
+    expect(helper.localizedEqualityClause('price', '=', '10', pushParam)).toBeNull()
+    expect(helper.localizedEqualityClause('slug', '!=', 'x', pushParam)).toBeNull()
+    expect(helper.localizedEqualityClause('slug', '=', null, pushParam)).toBeNull()
+    // An empty set means "no filter", as it does in the ordinary array branch.
+    expect(helper.localizedEqualityClause('slug', '=', [], pushParam)).toBeNull()
+    expect(params).toEqual([])
+  })
+
+  it("orders by the request's language, falling back to the base column", () => {
+    expect(helper.localizedSortFieldSql('name', 'es')).toBe(
+      `COALESCE(NULLIF("es_name", ''), "name")`
+    )
+    // The main language and a language without a copy order by the column itself.
+    expect(helper.localizedSortFieldSql('name', 'en')).toBeNull()
+    expect(helper.localizedSortFieldSql('slug', 'fr')).toBeNull()
+    expect(helper.localizedSortFieldSql('price', 'es')).toBeNull()
+    expect(helper.localizedSortFieldSql('name', null)).toBeNull()
+  })
+
+  it('is inert without families', () => {
+    const inert = loadHelper({})
+    const { pushParam } = bindParams()
+    expect(inert.localizedEqualityClause('slug', '=', 'x', pushParam)).toBeNull()
+    expect(inert.localizedSortFieldSql('name', 'es')).toBeNull()
+  })
+})
+
+describe('teleport fetcher — localized columns', () => {
+  const config = {
+    selectedTables: {
+      teleport_products: { columns: PRODUCT_COLUMNS.map((name) => ({ name })) },
+    },
+  }
+
+  it('bakes the column map from the table schema and the project languages', () => {
+    const route = generateTeleportFetcher(config, 'teleport_products', {
+      localization: LOCALIZATION,
+    })
+    expect(route).toContain(
+      'var LOCALIZED_COLUMNS = {"name":{"es":"es_name","fr":"fr_name"},"slug":{"es":"es_slug"},"description":{"es":"es_description"}}'
+    )
+    expect(route).toContain('const localizedClause = localizedEqualityClause(field, operand, value')
+    expect(route).toContain(
+      "const requestLocale = typeof req.query.locale === 'string' ? req.query.locale : null"
+    )
+    expect(route).toContain(
+      'localizedSortFieldSql(sort.field, requestLocale) || sortFieldSql(sort.field)'
+    )
+    expect(route).toContain('localizedSortFieldSql(sortBy, requestLocale) || sortBy')
+  })
+
+  it('bakes an empty map for a single-language project', () => {
+    const route = generateTeleportFetcher(config, 'teleport_products')
+    expect(route).toContain('var LOCALIZED_COLUMNS = {}')
+  })
+
+  it('resolves the row transform against the request locale and the baked main locale', () => {
+    const wrapper = getTransformWrapperCode('teleport_products', { localization: LOCALIZATION })
+    expect(wrapper).toContain(
+      "var currentLanguage = reqQuery && typeof reqQuery.locale === 'string' && reqQuery.locale ? reqQuery.locale : null"
+    )
+    expect(wrapper).toContain('mainLanguage: "en"')
+    expect(wrapper).not.toContain('reqQuery.lang')
+
+    expect(getTransformWrapperCode('teleport_products')).toContain('mainLanguage: null')
+  })
+})

package/__tests__/numbered-pagination.test.ts

@@ -89,6 +89,21 @@ describe('pagination plugin — numbered mode', () => {
     expect(code).toContain('setDs_0_maxPages(data.count === 0 ? 0 : Math.ceil(data.count / 20))')
   })
 
+  it('drops a count response a newer count request has overtaken', async () => {
+    // Two filter changes in quick succession start two counts; the older,
+    // slower one landing last must not paint a strip for rows no longer shown.
+    const code = await runPlugin({ paginationMode: 'numbered' }, NUMBERED_CONTROLS)
+    const flat = collapse(code)
+
+    expect(flat).toContain('const ds_0_countSeq = useRef(0)')
+    expect(flat).toContain('const __tqCountSeq = ++ds_0_countSeq.current')
+    expect(flat).toContain('if (__tqCountSeq !== ds_0_countSeq.current) return;')
+    // The guard sits before the setter, inside the response handler.
+    expect(flat.indexOf('if (__tqCountSeq !== ds_0_countSeq.current) return;')).toBeLessThan(
+      flat.indexOf('setDs_0_maxPages(data.count === 0')
+    )
+  })
+
   it('removes a numbered strip left over from a mode switch', async () => {
     // The builder never deletes controls on a mode switch (that would discard
     // the author's styling), so a Previous/Next list can still carry them.