implement inheritance with classes

Author: yanick

src/pure.js

@@ -7,85 +7,61 @@ import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
 import * as Svelte from 'svelte'
 
 const IS_SVELTE_5 = /^5\./.test(SVELTE_VERSION)
-export const targetCache = new Set()
-export const componentCache = new Set()
-
-const svelteComponentOptions = [
-  'accessors',
-  'anchor',
-  'props',
-  'hydrate',
-  'intro',
-  'context',
-]
-
-export const buildCheckProps = (svelteComponentOptions) => (options) => {
-  const isProps = !Object.keys(options).some((option) =>
-    svelteComponentOptions.includes(option)
-  )
-
-  // Check if any props and Svelte options were accidentally mixed.
-  if (!isProps) {
-    const unrecognizedOptions = Object.keys(options).filter(
-      (option) => !svelteComponentOptions.includes(option)
+
+class SvelteTestingLibrary {
+  svelteComponentOptions = [
+    'accessors',
+    'anchor',
+    'props',
+    'hydrate',
+    'intro',
+    'context',
+  ]
+
+  targetCache = new Set()
+  componentCache = new Set()
+
+  checkProps(options) {
+    const isProps = !Object.keys(options).some((option) =>
+      this.svelteComponentOptions.includes(option)
     )
 
-    if (unrecognizedOptions.length > 0) {
-      throw Error(`
+    // Check if any props and Svelte options were accidentally mixed.
+    if (!isProps) {
+      const unrecognizedOptions = Object.keys(options).filter(
+        (option) => !this.svelteComponentOptions.includes(option)
+      )
+
+      if (unrecognizedOptions.length > 0) {
+        throw Error(`
           Unknown options were found [${unrecognizedOptions}]. This might happen if you've mixed
           passing in props with Svelte options into the render function. Valid Svelte options
-          are [${svelteComponentOptions}]. You can either change the prop names, or pass in your
+          are [${this.svelteComponentOptions}]. You can either change the prop names, or pass in your
           props for that component via the \`props\` option.\n\n
           Eg: const { /** Results **/ } = render(MyComponent, { props: { /** props here **/ } })\n\n
         `)
-    }
-
-    return options
-  }
-
-  return { props: options }
-}
+      }
 
-const checkProps = buildCheckProps(svelteComponentOptions)
-
-const buildRenderComponent =
-  ({ target, ComponentConstructor }) =>
-  (options) => {
-    options = { target, ...checkProps(options) }
-
-    if (IS_SVELTE_5)
-      throw new Error('for Svelte 5, use `@testing-library/svelte/svelte5`')
-
-    const component = new ComponentConstructor(options)
-
-    componentCache.add(component)
-
-    // TODO(mcous, 2024-02-11): remove this behavior in the next major version
-    // It is unnecessary has no path to implementation in Svelte v5
-    if (!IS_SVELTE_5) {
-      component.$$.on_destroy.push(() => {
-        componentCache.delete(component)
-      })
+      return options
     }
 
-    return component
+    return { props: options }
   }
 
-export const buildRender =
-  (buildRenderComponent) =>
-  (Component, { target, ...options } = {}, { container, queries } = {}) => {
+  render(Component, { target, ...options } = {}, { container, queries } = {}) {
     container = container || document.body
     target = target || container.appendChild(document.createElement('div'))
-    targetCache.add(target)
+    this.targetCache.add(target)
 
     const ComponentConstructor = Component.default || Component
 
-    const renderComponent = buildRenderComponent({
-      target,
-      ComponentConstructor,
-    })
-
-    let component = renderComponent(options)
+    const component = this.renderComponent(
+      {
+        target,
+        ComponentConstructor,
+      },
+      options
+    )
 
     return {
       container,
@@ -108,29 +84,59 @@ export const buildRender =
     }
   }
 
-export const render = buildRender(buildRenderComponent)
+  renderComponent({ target, ComponentConstructor }, options) {
+    options = { target, ...this.checkProps(options) }
+
+    if (IS_SVELTE_5)
+      throw new Error('for Svelte 5, use `@testing-library/svelte/svelte5`')
+
+    const component = new ComponentConstructor(options)
 
-export const cleanupComponent = (component) => {
-  const inCache = componentCache.delete(component)
+    this.componentCache.add(component)
 
-  if (inCache) {
-    component.$destroy()
+    // TODO(mcous, 2024-02-11): remove this behavior in the next major version
+    // It is unnecessary has no path to implementation in Svelte v5
+    if (!IS_SVELTE_5) {
+      component.$$.on_destroy.push(() => {
+        this.componentCache.delete(component)
+      })
+    }
+
+    return component
   }
-}
 
-const cleanupTarget = (target) => {
-  const inCache = targetCache.delete(target)
+  cleanupComponent(component) {
+    const inCache = this.componentCache.delete(component)
 
-  if (inCache && target.parentNode === document.body) {
-    document.body.removeChild(target)
+    if (inCache) {
+      component.$destroy()
+    }
+  }
+
+  cleanupTarget(target) {
+    const inCache = this.targetCache.delete(target)
+
+    if (inCache && target.parentNode === document.body) {
+      document.body.removeChild(target)
+    }
   }
-}
 
-export const cleanup = () => {
-  componentCache.forEach(cleanupComponent)
-  targetCache.forEach(cleanupTarget)
+  cleanup() {
+    this.componentCache.forEach(cleanupComponent)
+    this.targetCache.forEach(cleanupTarget)
+  }
 }
 
+const instance = new SvelteTestingLibrary()
+
+export const render = instance.render.bind(instance)
+
+export const cleanupComponent = instance.cleanupComponent.bind(instance)
+
+const cleanupTarget = instance.cleanupTarget.bind(instance)
+
+export const cleanup = instance.cleanup.bind(instance)
+
 export const act = async (fn) => {
   if (fn) {
     await fn()