# @knighttower/js-dom-observer

> Convert Object to proxy to protect the objects

Latest version **1.0.7** (published 2023-10-13) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @knighttower/js-dom-observer
pnpm add @knighttower/js-dom-observer
yarn add @knighttower/js-dom-observer
bun add @knighttower/js-dom-observer
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2023-10-13 |
| First published | 2023-09-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 42.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | knighttower |
| Maintainers | knighttower |
| Keywords | Utility, Vue, library, plugin, JsDomObserver, Vue 2, Vue 3, javascript, typescript, DOM, Observer |

## Links

- npm: https://www.npmjs.com/package/@knighttower/js-dom-observer
- Repository: https://github.com/knighttower/JsDomObserver
- Issues: https://github.com/knighttower/JsDomObserver/issues
- npm.io page: https://npm.io/package/@knighttower/js-dom-observer

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2023-10-13
- 1.0.6 — 2023-09-15
- 1.0.5 — 2023-09-12
- 1.0.4 — 2023-09-12
- 1.0.3 — 2023-09-12
- 1.0.2 — 2023-09-12
- 1.0.1 — 2023-09-12

## README

# Note:

**For better maintenance, this library has been placed along with JsUtilities (https://github.com/knighttower/JsUtility) to create an easier entry point for many resources that will collaborate together**
--> only the docs will remain here for now.

## Installation

```javascript
npm i @knighttower/js-utility-functions
```

```javascript
yarn add @knighttower/js-utility-functions
```

```javascript
import DomObserver from '@knighttower/js-utility-functions';
```

## In the browser

It loads as a 'window' object --> window.DomObserver

```html
<script src=" https://cdn.jsdelivr.net/npm/@knighttower/js-utility-functions@latest/dist/browser/DomObserver.min.js"></script>

// ---> Also available as ESM, UMD, CJS, JS // ESM
<script src="https://esm.run/@knighttower/js-utility-functions@latest/index.mjs"></script>
// UMD
<script src="https://cdn.jsdelivr.net/npm/@knighttower/js-utility-functions@latest/dist/umd/DomObserver.min.js"></script>
// CJS
<script src="https://cdn.jsdelivr.net/npm/@knighttower/js-utility-functions@latest/dist/cjs/DomObserver.min.js"></script>
```

---

# JsDomObserver

## Overview

`DomObserver` is a module designed to detect DOM changes. The module allows you to register callbacks that will be invoked when specific types of changes occur in the DOM, such as addition, deletion, or modification of nodes.

## Installation

```
yarn add @knighttower/js-dom-observer
```

```typescript
import DomObserver from '@knighttower/js-dom-observer';
```

or only some modules

```typescript
import { addOnNodeChange, removeOnNodeChange } from '@knighttower/js-dom-observer';
```

[![NPM published](https://github.com/knighttower/JsDomObserver/actions/workflows/to-npm.yml/badge.svg)](https://github.com/knighttower/JsDomObserver/actions/workflows/to-npm.yml)  
[![release version](https://github.com/knighttower/JsDomObserver/actions/workflows/pre-release.yml/badge.svg)](https://github.com/knighttower/JsDomObserver/actions/workflows/pre-release.yml)

## API

### `addOnNodeChange(id: string, callback: () => void): void`

Registers a callback function that will be invoked whenever a relevant DOM change occurs.

-   `id`: A unique identifier for the callback.
-   `callback`: The function to be executed when a DOM change occurs.

#### Example

```typescript
addOnNodeChange('elementIdentifier', () => {
    console.log('Node changed');
});
```

### `removeOnNodeChange(id: string): void`

Removes a previously registered callback function so that it will no longer be invoked when the DOM changes.

-   `id`: The unique identifier for the callback you wish to remove.

#### Example

```typescript
removeOnNodeChange('elementIdentifier');
```

### `cleanup(): void`

Removes all registered callback functions. Useful for deep cleanup.

#### Example

```typescript
cleanup();
```

## Internal Mechanism

The module uses `MutationObserver` to observe changes to the DOM. The observer is configured to look for changes in child elements (`childList`) and in the subtree (`subtree`).

## License

This module is under the MIT License. Created by [Knighttower](https://github.com/knighttower) in 2022.

---
_Source: https://npm.io/package/@knighttower/js-dom-observer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._