https://github.com/daleblackwood/observational

A front-end observable framework for javascript projects.
https://github.com/daleblackwood/observational

Last synced: 15 days ago
JSON representation

A front-end observable framework for javascript projects.

• Host: GitHub
• URL: https://github.com/daleblackwood/observational
• Owner: daleblackwood
• Created: 2021-01-22T00:50:31.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2024-11-29T00:11:30.000Z (about 1 month ago)
• Last Synced: 2024-12-15T20:57:11.203Z (21 days ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/observational
• Size: 3.4 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# observational

observational is a lightweight observable utility or framework for Javascript projects.

Observable comes with two main types:

- Dispatcher: an event dispatcher that can publish a value

- Subject: a Dispatcher that retains a value.

Subjects are best used with Service-like classes, like this:

```

// CountService.js

import { Subject } from "observable";

class CountService {

  constructor() {

    this.subCounter = new Subject(0);

  }

  increase() {

    this.subCounter.setValue(this.subCounter.value + 1);

  }

}

export const countService = new CountService();

```

That can be used anywhere like so:

```

import { countService } from "./CountService";

// listen for changes

countService.subCounter.listen(this, x => console.log("count is " + x));

// a timeout to cause the change to happen every second

setTimeout(x => countService.increase(), 1000);

```

## Hooks

Subjects can be used with React-like hooks. Hooks from any React-like framework should work, though will need bootstrapping.

To initialise hooks:

```

import { useState, useEffect } from "react";

import { initHooks } from "observable/hooks";

initHooks({ useState, useEffect });

```

To use hooks in components, assuming we have the CountService class from the first example, try this:

```

import { useSubject } from "observable/hooks";

import { countService } from "./CountService";

function CountComponent() {

  const [value] = useSubject(countService.subCount);

  return (

    
{count}

  );

}