# jobserve.js

> A lightweight JavaScript library that allows developers to keep track of changes to JavaScript objects and/or DOM elements.

Latest version **1.1.0** (published 2024-09-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install jobserve.js
pnpm add jobserve.js
yarn add jobserve.js
bun add jobserve.js
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2024-09-11 |
| First published | 2024-01-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 138.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 35 |
| Author | Bunoon |
| Maintainers | williamtroup |
| Keywords | typescript, javascript, css, observe.js, observe, observable, watcher, object, changes, watch, event, events, trigger, triggers, handler |

## Links

- npm: https://www.npmjs.com/package/jobserve.js
- Repository: https://github.com/williamtroup/Observe.js
- Homepage: https://www.william-troup.com/observe-js/
- Issues: https://github.com/williamtroup/Observe.js/issues
- npm.io page: https://npm.io/package/jobserve.js

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 1.1.0 (latest) — 2024-09-11
- 1.0.1 — 2024-07-23
- 1.0.0 — 2024-07-16
- 0.8.2 — 2024-06-18
- 0.8.1 — 2024-03-19
- 0.8.0 — 2024-03-14
- 0.7.1 — 2024-02-20
- 0.7.0 — 2024-02-07
- 0.6.1 — 2024-01-17
- 0.6.0 — 2024-01-08
- 0.5.1 — 2024-01-05
- 0.5.0 — 2024-01-05
- 0.4.0 — 2024-01-03
- 0.3.0 — 2024-01-03
- 0.2.0 — 2024-01-02
- … 1 more at https://npm.io/package/jobserve.js/versions

## README

<h1 align="center">
Observe.js

[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Observe.js%2C%20a%20free%20JavaScript%observe%builder&url=https://github.com/williamtroup/Observe.js&hashtags=javascript,html,observe)
[![npm](https://img.shields.io/badge/npmjs-v1.1.0-blue)](https://www.npmjs.com/package/jobserve.js)
[![nuget](https://img.shields.io/badge/nuget-v1.1.0-purple)](https://www.nuget.org/packages/jObserve.js/)
[![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/Observe.js/blob/main/LICENSE.txt)
[![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/Observe.js/discussions)
[![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://www.william-troup.com/)
</h1>

> <p align="center">A lightweight JavaScript library that allows developers to keep track of changes to JavaScript objects and/or DOM elements.</p>
> <p align="center">v1.1.0</p>
<br />
<br>

<h1>What features does Observe.js have?</h1>

- 😏 Zero-dependencies and extremely lightweight!
- 🦾 Written in TypeScript, allowing greater support for React, Angular, and other libraries!
- 💻 Full API available via public functions.
- 🎥 JS Object and HTML DOM Element watching!
- 🔍 Watch for specific property changes!
- 🚀 Cancel, Pause, and Resume support!
- ☑️ Fully configurable!
- ☑️ Fully configurable per watch!
- ❓ Custom triggers for actions (when changes are detected, on cancellation, etc).
<br />
<br />


<h1>What browsers are supported?</h1>

All modern browsers (such as Google Chrome, FireFox, and Opera) are fully supported.
<br>
<br>


<h1>What are the most recent changes?</h1>

To see a list of all the most recent changes, click [here](docs/CHANGE_LOG.md).
<br>
<br>


<h1>How do I install Observe.js?</h1>

You can install the library with npm into your local modules directory using the following command:

```markdown
npm install jobserve.js
```
<br>
<br>


<h1>How do I get started?</h1>

To get started using Observe.js, do the following steps:
<br>
<br>

### 1. Prerequisites:

Make sure you include the "DOCTYPE html" tag at the top of your HTML, as follows:

```markdown
<!DOCTYPE html>
```
<br>

### 2. Include Files:

```markdown
<script src="dist/observe.js"></script>
```
<br>

### 3. DOM Element Binding / Object Watching:

```markdown
<div data-observe-js="{ 'onChange': yourCustomJsFunction }">
    Your HTML.
</div>
```

```markdown
<script> 
    var id = $observe.watch( yourObject, {
        onChange: yourCustomJsFunction
    } );
</script>
```

To see a list of all the available binding options you can use for "data-observe-js", and "watch()", click [here](docs/binding/options/OPTIONS.md).

To see a list of all the available custom triggers you can use for "data-observe-js", and "watch()", click [here](docs/binding/options/CUSTOM_TRIGGERS.md).

<br>

### 4. Finishing Up:

That's it! Nice and simple. Please refer to the code if you need more help (fully documented).
<br>
<br>

<h1>How do I go about customizing Observe.js?</h1>

To customize, and get more out of Observe.js, please read through the following documentation.
<br>
<br>

### 1. Public Functions:

To see a list of all the public functions available, click [here](docs/PUBLIC_FUNCTIONS.md).
<br>
<br>


### 2. Configuration:

Configuration options allow you to customize how Observe.js will function.  You can set them as follows:

```markdown
<script> 
  $observe.setConfiguration( {
      safeMode: false
  } );
</script>
```

To see a list of all the available configuration options you can use, click [here](docs/configuration/OPTIONS.md).

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