Mutation Observer

Watch for changes being made to the DOM tree.

Usage

<script>
    import { mutationObserver } from "@sveu/browser"

    let target = null

    $: target, mutationObserver(
        target,
        (mutations) => {
            //    do something
        },
        { attributes: true }
    )
</script>
<script>
    import { mutationObserver } from "@sveu/browser"

    let target = null

    $: target, mutationObserver(
        target,
        (mutations) => {
            //    do something
        },
        { attributes: true }
    )
</script>
svelte

Example

Hello From Svelte Utility

<script>
    import { mutationObserver } from "@sveu/browser"
    import { timeoutFn } from "@sveu/shared"

    let messages = []

    function observer(target) {

        const { cleanup } = mutationObserver(
            target,
            (mutations) => {
                for (const mutation of mutations) {
                    messages = [...messages, mutation.attributeName]
                }
            },
            { attributes: true }
        )

        timeoutFn(() => {
            target.classList.add("text-red")
        }, 2)

        timeoutFn(() => {
            target.classList.remove("text-red")
        }, 4)

        timeoutFn(() => {
            target.setAttribute("svelte", "U")
            target.classList.add("text-red")
        }, 6)

        return {
            destroy() {
                cleanup()
            },
        }
    }
</script>

<h1 use:observer class="text-center">Hello From Svelte Utility</h1>

{#each messages as message}
    <p class="text-center">
        Mutation Attribute: {message}
    </p>
{/each}

<style>
    .text-red {
        color: red;
    }
</style>
<script>
    import { mutationObserver } from "@sveu/browser"
    import { timeoutFn } from "@sveu/shared"

    let messages = []

    function observer(target) {

        const { cleanup } = mutationObserver(
            target,
            (mutations) => {
                for (const mutation of mutations) {
                    messages = [...messages, mutation.attributeName]
                }
            },
            { attributes: true }
        )

        timeoutFn(() => {
            target.classList.add("text-red")
        }, 2)

        timeoutFn(() => {
            target.classList.remove("text-red")
        }, 4)

        timeoutFn(() => {
            target.setAttribute("svelte", "U")
            target.classList.add("text-red")
        }, 6)

        return {
            destroy() {
                cleanup()
            },
        }
    }
</script>

<h1 use:observer class="text-center">Hello From Svelte Utility</h1>

{#each messages as message}
    <p class="text-center">
        Mutation Attribute: {message}
    </p>
{/each}

<style>
    .text-red {
        color: red;
    }
</style>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
Click fold/expand code

API

Arguments

Name Description Type Required
target The target node HTMLElement or SVGElement Yes
fn The function to call MutationCallback Yes


Options

See MutationObserver Options

Returns

Name Description Type
supported Whether the browser supports the MutationObserver API. Readable<boolean>
cleanup A function to stop watching for changes. () => void
Last update at: Invalid Date