Refactor caching of nth checks

Author: wooorm

lib/parse.js

@@ -1,86 +1,34 @@
 /**
- * @typedef {import('./types.js').Selector} Selector
  * @typedef {import('./types.js').Selectors} Selectors
- * @typedef {import('./types.js').RuleSet} RuleSet
- * @typedef {import('./types.js').Rule} Rule
  */
 
 import {CssSelectorParser} from 'css-selector-parser'
-import fauxEsmNthCheck from 'nth-check'
-import {zwitch} from 'zwitch'
-
-/** @type {import('nth-check').default} */
-// @ts-expect-error
-const nthCheck = fauxEsmNthCheck.default || fauxEsmNthCheck
-
-const nth = new Set([
-  'nth-child',
-  'nth-last-child',
-  'nth-of-type',
-  'nth-last-of-type'
-])
 
 const parser = new CssSelectorParser()
 
-/** @type {(query: Selectors | RuleSet | Rule | undefined) => void} */
-const compile = zwitch('type', {handlers: {selectors, ruleSet, rule}})
-
 parser.registerAttrEqualityMods('~', '|', '^', '$', '*')
 parser.registerSelectorPseudos('any', 'matches', 'not', 'has')
 parser.registerNestingOperators('>', '+', '~')
 
 /**
  * @param {string} selector
- * @returns {Selector}
+ * @returns {Selectors}
  */
 export function parse(selector) {
   if (typeof selector !== 'string') {
     throw new TypeError('Expected `string` as selector, not `' + selector + '`')
   }
 
-  const parsed = parser.parse(selector)
-  compile(parsed)
-  return parsed
-}
-
-/**
- * @param {Selectors} query
- * @returns {void}
- */
-function selectors(query) {
-  let index = -1
+  const query = parser.parse(selector)
 
-  while (++index < query.selectors.length) {
-    compile(query.selectors[index])
+  // Empty selectors object doesn’t match anything.
+  if (!query) {
+    return {type: 'selectors', selectors: []}
   }
-}
-
-/**
- * @param {RuleSet} query
- * @returns {void}
- */
-function ruleSet(query) {
-  rule(query.rule)
-}
-
-/**
- * @param {Rule} query
- * @returns {void}
- */
-function rule(query) {
-  const pseudos = query.pseudos || []
-  let index = -1
-
-  while (++index < pseudos.length) {
-    const pseudo = pseudos[index]
 
-    if (nth.has(pseudo.name)) {
-      // @ts-expect-error Patch a non-primitive type.
-      pseudo.value = nthCheck(pseudo.value)
-      // @ts-expect-error Patch a non-primitive type.
-      pseudo.valueType = 'function'
-    }
+  if (query.type === 'selectors') {
+    return query
   }
 
-  compile(query.rule)
+  return {type: 'selectors', selectors: [query]}
 }

lib/pseudo.js

@@ -1,7 +1,6 @@
 /**
  * @typedef {import('./types.js').Rule} Rule
  * @typedef {import('./types.js').RulePseudo} RulePseudo
- * @typedef {import('./types.js').RulePseudoNth} RulePseudoNth
  * @typedef {import('./types.js').RulePseudoSelector} RulePseudoSelector
  * @typedef {import('./types.js').Parent} Parent
  * @typedef {import('./types.js').Selector} Selector
@@ -16,9 +15,14 @@ import {parse as commas} from 'comma-separated-tokens'
 import {hasProperty} from 'hast-util-has-property'
 import {isElement} from 'hast-util-is-element'
 import {whitespace} from 'hast-util-whitespace'
+import fauxEsmNthCheck from 'nth-check'
 import {zwitch} from 'zwitch'
 import {any} from './any.js'
 
+/** @type {import('nth-check').default} */
+// @ts-expect-error
+const nthCheck = fauxEsmNthCheck.default || fauxEsmNthCheck
+
 /** @type {(rule: Rule | RulePseudo, element: Element, index: number | undefined, parent: Parent | undefined, state: SelectState) => boolean} */
 const handle = zwitch('name', {
   unknown: unknownPseudo,
@@ -375,64 +379,66 @@ function onlyChild(query, _1, _2, _3, state) {
 }
 
 /**
- * @param {RulePseudoNth} query
+ * @param {RulePseudo} query
  * @param {Element} _1
  * @param {number | undefined} _2
  * @param {Parent | undefined} _3
  * @param {SelectState} state
  * @returns {boolean}
  */
 function nthChild(query, _1, _2, _3, state) {
+  const fn = getCachedNthCheck(query)
   assertDeep(state, query)
-  return (
-    typeof state.elementIndex === 'number' && query.value(state.elementIndex)
-  )
+  return typeof state.elementIndex === 'number' && fn(state.elementIndex)
 }
 
 /**
- * @param {RulePseudoNth} query
+ * @param {RulePseudo} query
  * @param {Element} _1
  * @param {number | undefined} _2
  * @param {Parent | undefined} _3
  * @param {SelectState} state
  * @returns {boolean}
  */
 function nthLastChild(query, _1, _2, _3, state) {
+  const fn = getCachedNthCheck(query)
   assertDeep(state, query)
   return Boolean(
     typeof state.elementCount === 'number' &&
       typeof state.elementIndex === 'number' &&
-      query.value(state.elementCount - state.elementIndex - 1)
+      fn(state.elementCount - state.elementIndex - 1)
   )
 }
 
 /**
- * @param {RulePseudoNth} query
+ * @param {RulePseudo} query
  * @param {Element} _1
  * @param {number | undefined} _2
  * @param {Parent | undefined} _3
  * @param {SelectState} state
  * @returns {boolean}
  */
 function nthOfType(query, _1, _2, _3, state) {
+  const fn = getCachedNthCheck(query)
   assertDeep(state, query)
-  return typeof state.typeIndex === 'number' && query.value(state.typeIndex)
+  return typeof state.typeIndex === 'number' && fn(state.typeIndex)
 }
 
 /**
- * @param {RulePseudoNth} query
+ * @param {RulePseudo} query
  * @param {Element} _1
  * @param {number | undefined} _2
  * @param {Parent | undefined} _3
  * @param {SelectState} state
  * @returns {boolean}
  */
 function nthLastOfType(query, _1, _2, _3, state) {
+  const fn = getCachedNthCheck(query)
   assertDeep(state, query)
   return (
     typeof state.typeCount === 'number' &&
     typeof state.typeIndex === 'number' &&
-    query.value(state.typeCount - 1 - state.typeIndex)
+    fn(state.typeCount - 1 - state.typeIndex)
   )
 }
 
@@ -517,7 +523,7 @@ function unknownPseudo(query) {
 
 /**
  * @param {SelectState} state
- * @param {RulePseudo | RulePseudoNth} query
+ * @param {RulePseudo} query
  */
 function assertDeep(state, query) {
   if (state.shallow) {
@@ -581,3 +587,22 @@ function appendScope(value) {
 
   return selector
 }
+
+/**
+ * @param {RulePseudo} query
+ * @returns {(value: number) => boolean}
+ */
+function getCachedNthCheck(query) {
+  /** @type {(value: number) => boolean} */
+  // @ts-expect-error: cache.
+  let fn = query._cachedFn
+
+  if (!fn) {
+    // @ts-expect-error: always string.
+    fn = nthCheck(query.value)
+    // @ts-expect-error: cache.
+    query._cachedFn = fn
+  }
+
+  return fn
+}

lib/types.js

@@ -50,15 +50,6 @@
  * @property {Selector} value
  *   Selector.
  *
- * @typedef RulePseudoNth
- *   Overwrite to compile nth-checks once.
- * @property {string} name
- *   Name of pseudo, such as `'nth-child'`.
- * @property {'function'} valueType
- *   Set to `'function'`, because `value` is a compiled check.
- * @property {(index: number) => boolean} value
- *   Compiled function from `nth-check`.
- *
  * @typedef {'html' | 'svg'} Space
  *   Name of namespace.
  * @typedef {'auto' | 'ltr' | 'rtl'} Direction