Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
willeastcott authored Jun 15, 2024
1 parent fc76f58 commit d3fbd27
Showing 1 changed file with 41 additions and 17 deletions.
58 changes: 41 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,33 +1,57 @@
# Overview

This repository contains classes used across the PlayCanvas Editor and PCUI. These classes are used in data binding and history (undo, redo).
The PlayCanvas Observer is a powerful JavaScript library for managing and observing changes to objects. It allows tracking modifications to nested properties, emitting events on changes, and maintaining state consistency. This is particularly useful in applications where state management and change tracking are critical, such as in data-driven interfaces or collaborative applications.

# Installing
## Installing

To build a UMD module of the library run:
```
npm install
npm run build
To install the NPM package, do:

npm install @playcanvas/observer --save-dev

## Usage

### Creating an Observer

```javascript
import Observer from 'playcanvas-observer';

const data = {
name: 'John',
age: 30,
address: {
city: 'New York',
zip: '10001'
}
};

const observer = new Observer(data);
```

The built file will be a UMD module located at `dist/index.js`.
### Listening for Changes

# Events
You can listen for changes to specific properties using the `on` method:

Base class for event emitters. Allows emitting events and attaching event handlers.
```javascript
observer.on('address.city:set', (newValue, oldValue) => {
console.log(`City changed from ${oldValue} to ${newValue}`);
});

observer.set('address.city', 'San Francisco'); // Logs: City changed from New York to San Francisco
```

# Observer
## Building

Responsible for editing an object that contains JSON data. The class emits events when properties change.
To generate a UMD and ESM build of the Observer library, run:

# ObserverList
npm install
npm run build

A list of observers with similar functionality and events.
The UMD build is `dist/index.js`. The ESM build is `dist/index.mjs`.

# ObserverHistory
## API Docs

Records undo / redo when an Observer changes.
To build the API reference manual, run:

# History
npm run docs

Responsible for keeping track of history actions (for undo / redo).
A pre-built API reference many is hosted [here](https://api.playcanvas.com/modules/Observer.html).

0 comments on commit d3fbd27

Please sign in to comment.