@solid-primitives/mutation-observer
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    Solid Primitives Mutation Observer

    @solid-primitives/mutation-observer

    lerna size size stage

    Primitive providing the ability to watch for changes made to the DOM tree. A wrapper for Browser's MutationObserver API.

    Installation

    npm install @solid-primitives/mutation-observer
    # or
    yarn add @solid-primitives/mutation-observer
    

    How to use it

    createMutationObserver

    import { createMutationObserver } from "@solid-primitives/mutation-observer";
    
    // Simple usage with on a single parent element.
    let ref!: HTMLElement;
    createMutationObserver(
      () => ref,
      { attributes: true, subtree: true },
      records => console.log(records)
    );
    
    // Observing multiple parent elements:
    createMutationObserver(
      () => [el1, el2, el3],
      { attributes: true, subtree: true },
      e => {...}
    );
    
    // Set individual MutationObserver options:
    createMutationObserver(
      [
        [el, { attributes: true, subtree: true }],
        [el1, { childList: true }]
      ],
      e => {...}
    );
    
    // Primitive return usefull values:
    const [observe, {start, stop, instance}] = createMutationObserver(el, options, handler)
    
    observe(el1, { childList: true })
    stop()

    Directive Usage

    // You have to name it as "mutationObserver" when using typescript
    const [mutationObserver] = createMutationObserver([], e => {...})
    
    <div use:mutationObserver={{ childList: true }}>...</div>

    Standalone Directive Usage

    import { mutationObserver } from "@solid-primitives/mutation-observer";
    
    // has to be used in code to avoid tree-shaking it:
    mutationObserver;
    
    <div use:mutationObserver={[{ childList: true }, e => {...}]}>...</div>

    Types

    function createMutationObserver(
      initial: MaybeAccessor<Node | Node[]>,
      options: MutationObserverInit,
      callback: MutationCallback
    ): MutationObserverReturn;
    function createMutationObserver(
      initial: MaybeAccessor<[Node, MutationObserverInit][]>,
      callback: MutationCallback
    ): MutationObserverReturn;
    
    type MutationObserverReturn = [
      add: MutationObserverAdd,
      rest: {
        start: Fn;
        stop: Fn;
        instance: MutationObserver;
        isSupported: boolean;
      }
    ];
    
    type MutationObserverAdd = (target: Node, options?: MaybeAccessor<MutationObserverInit>) => void;

    Demo

    https://codesandbox.io/s/solid-mutation-observer-p59tu?file=/index.tsx

    Changelog

    Expand Changelog

    1.0.0

    Initial release as a Stage-2 primitive.

    1.0.2

    Added support for CJS and cleaned up docs.

    1.0.3

    Updated utility package dependency.

    1.0.4

    Updated to Solid 1.3

    Install

    npm i @solid-primitives/mutation-observer

    DownloadsWeekly Downloads

    5

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    12.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • thetarnav.
    • lexlohr
    • davedbase