campfire.js
    Preparing search index...

    Class CfDom

    DOMShim provides a configurable interface for core DOM operations.

    This allows Campfire to work in both browser environments (using native DOM) and server environments (using a DOM implementation like jsdom or happy-dom).

    Usage examples:

    1. Browser environment (automatic initialization):

      import { CfDom } from './dom/config';

      // Methods are already initialized with browser DOM
      const element = CfDom.createElement('div');
      element.innerHTML = 'Hello world';

    2. Server-side rendering with custom DOM implementation:

      import { CfDom } from './dom/config';
      import { JSDOM } from 'jsdom';

      // Setup a custom DOM environment
      const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');

      // Configure CfDom to use jsdom
      CfDom.configure({
        document: dom.window.document,
        window: dom.window,
        HTMLElement: dom.window.HTMLElement
      });

      // Now use the shim methods with jsdom backing
      const element = CfDom.createElement('div');

    Note: This implementation uses a "minimal API" approach, where only document-level methods (createElement, querySelector, etc.) are provided by CfDom, and element-level operations are performed directly on the elements themselves.

    Index

    Constructors

    constructor

    Properties

    ssr

    Accessors

    body document

    Methods

    addElEventListener configure createDocumentFragment createElement initialize isBrowser isHTMLElement isSsr isUsingCustomDOMImplementation querySelector querySelectorAll

    Constructors

    Properties

    ssr: boolean = false

    Accessors

    Staticbody

    • get document(): null | CfDocumentInterface

      Returns null | CfDocumentInterface

    Methods

    • Add event listener with SSR protection This is one of the few element methods we keep as it has special SSR handling

      Parameters

      • el: EventTarget
      • type: string
      • listener: EventListenerOrEventListenerObject
      • Optionaloptions: boolean | AddEventListenerOptions

      Returns void

    • Configure the shim with custom DOM implementation.

      Parameters

      • options: {
            document?: CfDocumentInterface;
            HTMLElement?: CfHTMLElementConstructor;
            ssr?: boolean;
            window?: CfWindowInterface;
        }

      Returns void

    • Parameters

      • tagName: string

      Returns HTMLElement

    • Initialize the shim by attempting to detect browser environment. If in a browser, use the native DOM objects; otherwise, leave them unset.

      Returns void

    • Check if code is running in a browser environment. This can be useful for conditional logic based on environment.

      Returns boolean

    • Parameters

      • obj: any

      Returns obj is HTMLElement

    • Parameters

      • Optionalvalue: boolean

      Returns boolean

    • Check if DOM shim is using a custom (non-browser) implementation.

      Returns boolean

    • Parameters

      • selector: string
      • Optionalnode: ParentNode

      Returns null | Element

    • Parameters

      • selector: string
      • Optionalnode: ParentNode

      Returns NodeListOf<Element>

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods