@teleporthq/teleport-plugin-next-data-source 0.43.59 → 0.43.60

package/src/infinite-scroll.ts

@@ -0,0 +1,401 @@
+import * as types from '@babel/types'
+
+/**
+ * Infinite scroll: the list APPENDS pages instead of replacing them.
+ *
+ * The accumulation lives inside the generated `fetchData` closure rather than
+ * around the provider. `DataProvider` renders whatever `fetchData` resolves
+ * with, so returning "every page fetched so far, in order" is enough to make it
+ * append — no change to the runtime component library, and the existing
+ * `persistDataDuringLoading` keeps the rows already on screen while the next
+ * page is in flight.
+ *
+ * A `useRef` holds the pages rather than a state, because writing accumulated
+ * rows into state from inside `fetchData` would re-render the provider mid-fetch
+ * and re-enter it. The ref is keyed by a SIGNATURE of every fetch param except
+ * the page, so a filter, sort or search change starts a fresh list instead of
+ * interleaving rows from two different queries.
+ */
+
+// tslint:disable:no-any
+
+export interface InfiniteScrollVars {
+  accumRefVar: string
+  hasMoreFlagVar: string
+  setHasMoreFlagVar: string
+  hasMoreVar: string
+  sentinelRefVar: string
+}
+
+export const getInfiniteScrollVars = (index: number): InfiniteScrollVars => ({
+  accumRefVar: `ds_${index}_accumRef`,
+  hasMoreFlagVar: `ds_${index}_hasMoreFlag`,
+  setHasMoreFlagVar: `setDs_${index}_hasMoreFlag`,
+  hasMoreVar: `ds_${index}_hasMore`,
+  sentinelRefVar: `ds_${index}_sentinelRef`,
+})
+
+/**
+ * The three declarations behind an appending list:
+ *
+ *   const ds_0_accumRef = useRef({ sig: '', pages: {} })
+ *   const [ds_0_hasMoreFlag, setDs_0_hasMoreFlag] = useState(true)
+ *   const ds_0_hasMore = ds_0_hasMoreFlag && (ds_0_maxPages === 0 || <page> < ds_0_maxPages)
+ *
+ * Two independent signals for "is there more", because either can be missing.
+ * `hasMoreFlag` comes from the last response being a SHORT page, which is the
+ * only end-of-data signal available from a data source that cannot count.
+ * `maxPages` comes from the count endpoint and is the one that stops a request
+ * being made at all; it is `0` while unknown, hence the explicit escape.
+ */
+export const buildInfiniteScrollDeclarations = (
+  vars: InfiniteScrollVars,
+  maxPagesVar: string,
+  currentPageExpr: types.Expression,
+  includeSentinel: boolean
+): types.Statement[] => {
+  const declarations: types.Statement[] = [
+    types.variableDeclaration('const', [
+      types.variableDeclarator(
+        types.identifier(vars.accumRefVar),
+        types.callExpression(types.identifier('useRef'), [
+          types.objectExpression([
+            types.objectProperty(types.identifier('sig'), types.stringLiteral('')),
+            types.objectProperty(types.identifier('pages'), types.objectExpression([])),
+          ]),
+        ])
+      ),
+    ]),
+    types.variableDeclaration('const', [
+      types.variableDeclarator(
+        types.arrayPattern([
+          types.identifier(vars.hasMoreFlagVar),
+          types.identifier(vars.setHasMoreFlagVar),
+        ]),
+        types.callExpression(types.identifier('useState'), [types.booleanLiteral(true)])
+      ),
+    ]),
+    types.variableDeclaration('const', [
+      types.variableDeclarator(
+        types.identifier(vars.hasMoreVar),
+        types.logicalExpression(
+          '&&',
+          types.identifier(vars.hasMoreFlagVar),
+          types.logicalExpression(
+            '||',
+            types.binaryExpression('===', types.identifier(maxPagesVar), types.numericLiteral(0)),
+            types.binaryExpression(
+              '<',
+              types.cloneNode(currentPageExpr, true) as types.Expression,
+              types.identifier(maxPagesVar)
+            )
+          )
+        )
+      ),
+    ]),
+  ]
+
+  if (includeSentinel) {
+    declarations.push(
+      types.variableDeclaration('const', [
+        types.variableDeclarator(
+          types.identifier(vars.sentinelRefVar),
+          types.callExpression(types.identifier('useRef'), [types.nullLiteral()])
+        ),
+      ])
+    )
+  }
+
+  return declarations
+}
+
+/**
+ * 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.
+ */
+export const buildAccumulatingResponseHandler = (
+  vars: InfiniteScrollVars,
+  perPage: number
+): 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'))
+
+  return types.arrowFunctionExpression(
+    [types.identifier('response')],
+    types.blockStatement([
+      types.variableDeclaration('const', [
+        types.variableDeclarator(
+          types.identifier('rows'),
+          types.logicalExpression(
+            '||',
+            types.optionalMemberExpression(
+              types.identifier('response'),
+              types.identifier('data'),
+              false,
+              true
+            ),
+            types.arrayExpression([])
+          )
+        ),
+      ]),
+      types.variableDeclaration('const', [
+        types.variableDeclarator(
+          types.identifier('page'),
+          types.logicalExpression(
+            '||',
+            types.callExpression(types.identifier('Number'), [
+              types.memberExpression(types.identifier('params'), types.identifier('page')),
+            ]),
+            types.numericLiteral(1)
+          )
+        ),
+      ]),
+      // Everything that identifies the QUERY, with the page zeroed out: two
+      // fetches that differ only by page belong to the same accumulated list.
+      types.variableDeclaration('const', [
+        types.variableDeclarator(
+          types.identifier('sig'),
+          types.callExpression(
+            types.memberExpression(types.identifier('JSON'), types.identifier('stringify')),
+            [
+              types.objectExpression([
+                types.spreadElement(types.identifier('params')),
+                types.objectProperty(types.identifier('page'), types.numericLiteral(0)),
+              ]),
+            ]
+          )
+        ),
+      ]),
+      types.ifStatement(
+        types.binaryExpression(
+          '!==',
+          types.memberExpression(accumCurrent(), types.identifier('sig')),
+          types.identifier('sig')
+        ),
+        types.blockStatement([
+          types.expressionStatement(
+            types.assignmentExpression(
+              '=',
+              accumCurrent(),
+              types.objectExpression([
+                types.objectProperty(types.identifier('sig'), types.identifier('sig'), false, true),
+                types.objectProperty(types.identifier('pages'), types.objectExpression([])),
+              ])
+            )
+          ),
+        ])
+      ),
+      types.expressionStatement(
+        types.assignmentExpression(
+          '=',
+          types.memberExpression(accumPages(), types.identifier('page'), true),
+          types.identifier('rows')
+        )
+      ),
+      // A page that came back short is the last one. This is the only
+      // end-of-data signal a data source that cannot count ever gives.
+      types.expressionStatement(
+        types.callExpression(types.identifier(vars.setHasMoreFlagVar), [
+          types.binaryExpression(
+            '>=',
+            types.memberExpression(types.identifier('rows'), types.identifier('length')),
+            types.numericLiteral(perPage)
+          ),
+        ])
+      ),
+      // Every page held so far, flattened in page order — a numeric sort, so
+      // 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([]),
+          ]
+        )
+      ),
+    ])
+  )
+}
+
+/**
+ * The IntersectionObserver that loads the next page when the sentinel scrolls
+ * into view. Emitted only in auto mode (no Load More button).
+ *
+ * `rootMargin` starts the fetch a screenful early so the list rarely shows a
+ * gap. The observer is rebuilt whenever `hasMore` or `maxPages` change and
+ * disconnected on cleanup; when there is nothing more to load the effect exits
+ * before observing, so a finished list costs nothing.
+ */
+export const buildSentinelObserverEffect = (
+  vars: InfiniteScrollVars,
+  maxPagesVar: string,
+  buildAdvancePageStatement: () => types.Statement
+): types.ExpressionStatement =>
+  types.expressionStatement(
+    types.callExpression(types.identifier('useEffect'), [
+      types.arrowFunctionExpression(
+        [],
+        types.blockStatement([
+          types.variableDeclaration('const', [
+            types.variableDeclarator(
+              types.identifier('el'),
+              types.memberExpression(
+                types.identifier(vars.sentinelRefVar),
+                types.identifier('current')
+              )
+            ),
+          ]),
+          // No element yet, no observer support (older browsers, jsdom), or
+          // nothing left to load.
+          types.ifStatement(
+            types.logicalExpression(
+              '||',
+              types.logicalExpression(
+                '||',
+                types.unaryExpression('!', types.identifier('el'), true),
+                types.binaryExpression(
+                  '===',
+                  types.unaryExpression('typeof', types.identifier('IntersectionObserver')),
+                  types.stringLiteral('undefined')
+                )
+              ),
+              types.unaryExpression('!', types.identifier(vars.hasMoreVar), true)
+            ),
+            types.returnStatement()
+          ),
+          types.variableDeclaration('const', [
+            types.variableDeclarator(
+              types.identifier('observer'),
+              types.newExpression(types.identifier('IntersectionObserver'), [
+                types.arrowFunctionExpression(
+                  [types.identifier('entries')],
+                  types.blockStatement([
+                    types.expressionStatement(
+                      types.callExpression(
+                        types.memberExpression(
+                          types.identifier('entries'),
+                          types.identifier('forEach')
+                        ),
+                        [
+                          types.arrowFunctionExpression(
+                            [types.identifier('entry')],
+                            types.blockStatement([
+                              types.ifStatement(
+                                types.unaryExpression(
+                                  '!',
+                                  types.memberExpression(
+                                    types.identifier('entry'),
+                                    types.identifier('isIntersecting')
+                                  ),
+                                  true
+                                ),
+                                types.returnStatement()
+                              ),
+                              buildAdvancePageStatement(),
+                            ])
+                          ),
+                        ]
+                      )
+                    ),
+                  ])
+                ),
+                types.objectExpression([
+                  types.objectProperty(
+                    types.identifier('rootMargin'),
+                    types.stringLiteral('200px')
+                  ),
+                ]),
+              ])
+            ),
+          ]),
+          types.expressionStatement(
+            types.callExpression(
+              types.memberExpression(types.identifier('observer'), types.identifier('observe')),
+              [types.identifier('el')]
+            )
+          ),
+          types.returnStatement(
+            types.arrowFunctionExpression(
+              [],
+              types.callExpression(
+                types.memberExpression(
+                  types.identifier('observer'),
+                  types.identifier('disconnect')
+                ),
+                []
+              )
+            )
+          ),
+        ])
+      ),
+      types.arrayExpression([types.identifier(vars.hasMoreVar), types.identifier(maxPagesVar)]),
+    ])
+  )
+
+/**
+ * `<div ref={ds_N_sentinelRef} aria-hidden="true" style={{ height: '1px' }} />`
+ *
+ * An invisible one-pixel row after the list. It is generated rather than
+ * authored because it is not a control — there is nothing to style or click,
+ * only a position in the document for the observer to watch.
+ */
+export const buildSentinelElement = (vars: InfiniteScrollVars): types.JSXElement =>
+  types.jsxElement(
+    types.jsxOpeningElement(
+      types.jsxIdentifier('div'),
+      [
+        types.jsxAttribute(
+          types.jsxIdentifier('ref'),
+          types.jsxExpressionContainer(types.identifier(vars.sentinelRefVar))
+        ),
+        types.jsxAttribute(types.jsxIdentifier('aria-hidden'), types.stringLiteral('true')),
+        types.jsxAttribute(
+          types.jsxIdentifier('style'),
+          types.jsxExpressionContainer(
+            types.objectExpression([
+              types.objectProperty(types.identifier('height'), types.stringLiteral('1px')),
+            ])
+          )
+        ),
+      ],
+      true
+    ),
+    null,
+    [],
+    true
+  )

package/src/numbered-pagination.ts

@@ -0,0 +1,292 @@
+import * as types from '@babel/types'
+import {
+  convertControlToButton,
+  findPaginationControl,
+  setJSXExpressionAttribute,
+} from './pagination-controls'
+
+/**
+ * Numbered pagination: First / Prev / 1 … 4 5 6 … 12 / Next / Last.
+ *
+ * The builder authors ONE page-number button and a container to repeat it into;
+ * this module turns that template into a `.map` over a windowed token list, so
+ * every number the visitor sees is the author's own styled node rather than
+ * something the generator invented.
+ */
+
+// tslint:disable:no-any
+
+/** `ds_N_pageTokens` — the windowed list of page numbers and ellipsis markers. */
+export const getPageTokensVar = (index: number): string => `ds_${index}_pageTokens`
+
+/**
+ * Builds the `useMemo` that decides which page numbers are visible.
+ *
+ * The window is deliberately small and fixed (first, last, and one neighbour
+ * either side of the current page, so at most seven entries): an unbounded
+ * strip is unusable at 300 pages and wraps the layout the author styled. The
+ * two ellipsis markers are distinct strings because React needs unique keys and
+ * a list can legitimately need a gap on both sides.
+ *
+ * ⛔ Keep this in step with `computePageWindow` in the editor's renderer — the
+ * canvas and the published page must agree on which numbers are shown, or the
+ * author styles a strip they will never see.
+ */
+export const buildPageTokensDeclaration = (
+  index: number,
+  maxPagesVar: string,
+  currentPageExpr: types.Expression
+): types.VariableDeclaration => {
+  const total = types.identifier('total')
+  const current = types.identifier('current')
+  const tokens = types.identifier('tokens')
+  const start = types.identifier('start')
+  const end = types.identifier('end')
+  const pageVar = types.identifier('p')
+
+  const body = types.blockStatement([
+    types.variableDeclaration('const', [
+      types.variableDeclarator(total, types.identifier(maxPagesVar)),
+    ]),
+    types.variableDeclaration('const', [
+      types.variableDeclarator(current, types.cloneNode(currentPageExpr, true) as types.Expression),
+    ]),
+    // Nothing matched at all — the empty branch of the list is what renders.
+    types.ifStatement(
+      types.binaryExpression('<=', types.cloneNode(total, true), types.numericLiteral(0)),
+      types.returnStatement(types.arrayExpression([]))
+    ),
+    types.ifStatement(
+      types.binaryExpression('===', types.cloneNode(total, true), types.numericLiteral(1)),
+      types.returnStatement(types.arrayExpression([types.numericLiteral(1)]))
+    ),
+    types.variableDeclaration('const', [
+      types.variableDeclarator(tokens, types.arrayExpression([types.numericLiteral(1)])),
+    ]),
+    types.variableDeclaration('const', [
+      types.variableDeclarator(
+        start,
+        types.callExpression(
+          types.memberExpression(types.identifier('Math'), types.identifier('max')),
+          [
+            types.numericLiteral(2),
+            types.binaryExpression('-', types.cloneNode(current, true), types.numericLiteral(1)),
+          ]
+        )
+      ),
+    ]),
+    types.variableDeclaration('const', [
+      types.variableDeclarator(
+        end,
+        types.callExpression(
+          types.memberExpression(types.identifier('Math'), types.identifier('min')),
+          [
+            types.binaryExpression('-', types.cloneNode(total, true), types.numericLiteral(1)),
+            types.binaryExpression('+', types.cloneNode(current, true), types.numericLiteral(1)),
+          ]
+        )
+      ),
+    ]),
+    types.ifStatement(
+      types.binaryExpression('>', types.cloneNode(start, true), types.numericLiteral(2)),
+      types.expressionStatement(
+        types.callExpression(
+          types.memberExpression(types.cloneNode(tokens, true), types.identifier('push')),
+          [types.stringLiteral('start-ellipsis')]
+        )
+      )
+    ),
+    types.forStatement(
+      types.variableDeclaration('let', [
+        types.variableDeclarator(pageVar, types.cloneNode(start, true)),
+      ]),
+      types.binaryExpression('<=', types.cloneNode(pageVar, true), types.cloneNode(end, true)),
+      types.assignmentExpression('+=', types.cloneNode(pageVar, true), types.numericLiteral(1)),
+      types.expressionStatement(
+        types.callExpression(
+          types.memberExpression(types.cloneNode(tokens, true), types.identifier('push')),
+          [types.cloneNode(pageVar, true)]
+        )
+      )
+    ),
+    types.ifStatement(
+      types.binaryExpression(
+        '<',
+        types.cloneNode(end, true),
+        types.binaryExpression('-', types.cloneNode(total, true), types.numericLiteral(1))
+      ),
+      types.expressionStatement(
+        types.callExpression(
+          types.memberExpression(types.cloneNode(tokens, true), types.identifier('push')),
+          [types.stringLiteral('end-ellipsis')]
+        )
+      )
+    ),
+    types.expressionStatement(
+      types.callExpression(
+        types.memberExpression(types.cloneNode(tokens, true), types.identifier('push')),
+        [types.cloneNode(total, true)]
+      )
+    ),
+    types.returnStatement(types.cloneNode(tokens, true)),
+  ])
+
+  return types.variableDeclaration('const', [
+    types.variableDeclarator(
+      types.identifier(getPageTokensVar(index)),
+      types.callExpression(types.identifier('useMemo'), [
+        types.arrowFunctionExpression([], body),
+        types.arrayExpression([
+          types.identifier(maxPagesVar),
+          types.cloneNode(currentPageExpr, true) as types.Expression,
+        ]),
+      ])
+    ),
+  ])
+}
+
+export interface NumberedPaginationVars {
+  index: number
+  maxPagesVar: string
+  /** How this usage reads its current page (`ds_N_state.page` or `ds_N_page`). */
+  currentPageExpr: () => types.Expression
+  /** How it writes a page number back. */
+  buildSetPageStatement: (pageExpr: types.Expression) => types.Expression
+}
+
+/** `<setter>(<page>)` wrapped so an already-current page does not re-render. */
+const buildJumpHandler = (
+  vars: NumberedPaginationVars,
+  targetExpr: types.Expression
+): types.Expression => types.arrowFunctionExpression([], vars.buildSetPageStatement(targetExpr))
+
+/**
+ * Wires the First / Last buttons and expands the page-number template.
+ *
+ * Prev / Next are left to `wirePaginationButtons`, which already emits them and
+ * whose output must stay byte-identical for every project that never switches
+ * mode.
+ */
+export const wireNumberedPagination = (paginationNode: any, vars: NumberedPaginationVars): void => {
+  const firstButton = findPaginationControl(paginationNode, 'first')
+  const lastButton = findPaginationControl(paginationNode, 'last')
+  const pagesContainer = findPaginationControl(paginationNode, 'pages')
+
+  if (firstButton) {
+    convertControlToButton(firstButton)
+    setJSXExpressionAttribute(
+      firstButton,
+      'onClick',
+      buildJumpHandler(vars, types.numericLiteral(1))
+    )
+    setJSXExpressionAttribute(
+      firstButton,
+      'disabled',
+      types.binaryExpression('<=', vars.currentPageExpr(), types.numericLiteral(1))
+    )
+  }
+
+  if (lastButton) {
+    convertControlToButton(lastButton)
+    setJSXExpressionAttribute(
+      lastButton,
+      'onClick',
+      buildJumpHandler(vars, types.identifier(vars.maxPagesVar))
+    )
+    // `maxPages === 0` is "no results", where jumping to the last page would
+    // mean jumping to page 0.
+    setJSXExpressionAttribute(
+      lastButton,
+      'disabled',
+      types.logicalExpression(
+        '||',
+        types.binaryExpression('===', types.identifier(vars.maxPagesVar), types.numericLiteral(0)),
+        types.binaryExpression('>=', vars.currentPageExpr(), types.identifier(vars.maxPagesVar))
+      )
+    )
+  }
+
+  if (!pagesContainer) {
+    return
+  }
+
+  const template = findPaginationControl(pagesContainer, 'page')
+  if (!template) {
+    // A container with no template to repeat: leave whatever the author put
+    // there alone rather than inventing an unstyled strip.
+    return
+  }
+
+  const ellipsisTemplate = findPaginationControl(pagesContainer, 'ellipsis')
+  const tokenId = types.identifier('token')
+
+  // The author's own button, cloned per visible page: their class name (and so
+  // every style they applied) rides along.
+  const numberButton = types.cloneNode(template, true) as any
+  convertControlToButton(numberButton)
+  setJSXExpressionAttribute(
+    numberButton,
+    'onClick',
+    buildJumpHandler(vars, types.cloneNode(tokenId, true))
+  )
+  // The current page is marked, not disabled: `[aria-current='page']` is
+  // styleable and keeps the button reachable for screen readers.
+  setJSXExpressionAttribute(
+    numberButton,
+    'aria-current',
+    types.conditionalExpression(
+      types.binaryExpression('===', vars.currentPageExpr(), types.cloneNode(tokenId, true)),
+      types.stringLiteral('page'),
+      types.identifier('undefined')
+    )
+  )
+  setJSXExpressionAttribute(
+    numberButton,
+    'key',
+    types.templateLiteral(
+      [
+        types.templateElement({ raw: 'page-', cooked: 'page-' }),
+        types.templateElement({ raw: '', cooked: '' }, true),
+      ],
+      [types.cloneNode(tokenId, true)]
+    )
+  )
+  // Whatever label the template carried ('1') is replaced by the real number.
+  numberButton.children = [types.jsxExpressionContainer(types.cloneNode(tokenId, true))]
+
+  const gapNode = ellipsisTemplate
+    ? (types.cloneNode(ellipsisTemplate, true) as any)
+    : types.jsxElement(
+        types.jsxOpeningElement(types.jsxIdentifier('span'), [], false),
+        types.jsxClosingElement(types.jsxIdentifier('span')),
+        [types.jsxText('…')],
+        false
+      )
+  setJSXExpressionAttribute(gapNode, 'key', types.cloneNode(tokenId, true))
+
+  // {ds_N_pageTokens.map(token => typeof token === 'number' ? <button…> : <span…>)}
+  pagesContainer.children = [
+    types.jsxExpressionContainer(
+      types.callExpression(
+        types.memberExpression(
+          types.identifier(getPageTokensVar(vars.index)),
+          types.identifier('map')
+        ),
+        [
+          types.arrowFunctionExpression(
+            [types.cloneNode(tokenId, true)],
+            types.conditionalExpression(
+              types.binaryExpression(
+                '===',
+                types.unaryExpression('typeof', types.cloneNode(tokenId, true)),
+                types.stringLiteral('number')
+              ),
+              numberButton,
+              gapNode
+            )
+          ),
+        ]
+      )
+    ),
+  ]
+}