# content-blocks-builder/trunk/src/utils/dom/observer.js

Content Blocks Builder – Create blocks, repeater blocks with carousel, grid, popup layouts, version trunk. 69 lines.

- Page: https://pluginprobe.com/plugins/content-blocks-builder/trunk/code/src/utils/dom/observer.js
- Raw: https://pluginprobe.com/plugins/content-blocks-builder/trunk/raw/src/utils/dom/observer.js
- Modified: 2026-05-25T05:13:14+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/content-blocks-builder/trunk/code/src/utils/dom/observer.js#L10-L20`.

```javascript
import { triggerEvent } from "./event";

class Observer {
  constructor() {
    this.observedContainers = new WeakMap();
    this.pendingFrames = new WeakMap();
  }

  update(scope = document, args) {
    triggerEvent(document, "cbb.observer.updated", { container: scope, args });
  }

  observe(container, args = {}) {
    if (typeof container === "string") {
      container = document.querySelector(container);
    }

    if (!(container instanceof HTMLElement)) {
      return;
    }

    if (this.observedContainers.has(container)) {
      return;
    }

    const observer = new MutationObserver((mutations) => {
      /**
       * Already scheduled
       */
      if (this.pendingFrames.has(container)) {
        return;
      }

      const frame = requestAnimationFrame(() => {
        this.pendingFrames.delete(container);

        this.update(container, args);
      });

      this.pendingFrames.set(container, frame);
    });

    observer.observe(container, {
      childList: true,
      subtree: true,
    });

    this.observedContainers.set(container, observer);
  }
}

const CBBObserver = new Observer();

/**
 * Handle dynamic rendering
 */
const observerUpdated = (fc) => {
  document.addEventListener("cbb.observer.updated", (event) => {
    const {
      detail: { container, args },
    } = event;
    if (container) {
      fc(container, args, event);
    }
  });
};

export { CBBObserver, observerUpdated };

```