observue

A simple implementation of the proposed advanced reactivity API for Vue 3.

Installation

$ npm install observue
# or
$ yarn add observue
# or
$ pnpm install observue

Usage

Formats

| | Format | Minified? | Export | Main use case | | ------------------------ | ------------------ |:------------------:| ------------------- | -------------- | | esm | ES 2015 module | :x: | Named + individual | Bundler | | esm.min | ES 2015 module | :heavy_check_mark: | Named + individual | Modern browser | | lib | CommonJS | :x: | Static + individual | Node | | dist | Global var export | :heavy_check_mark: | Static | Browser |

Minifed formats are sourcemapped.

Unminified esm

Unminified esm code resides in the esm directory. This is the format pointed to by the module field in package.json.

The main use case is for being bundled by an esm-aware bundler since those work better using unminfied source.

Minified esm

Minifed esm code resides in the esm directory and is suffixed .min.js. Sourcemaps are available as .min.js.map.

The main use case is direct include on pages for modern browsers as a <script type=module>.

CommonJS

CommonJS code (require and module.exports) resides in the lib directory. This is the format pointed to by the main field in package.json.

The main use case is use with Node.js.

Global variable

IIFE-style global variable export code (a.k.a. revealing module) resides in the dist directory. This is the format available on unpkg.com as the "bare" URL. Sourcemaps are available.

This format assigns the observue namespace to the variable observue in the top-level scope. Functions are named properties of observue.

The main use case is direct include on pages as a <script>.

In browsers

Observue can be loaded from pages directly via unpkg.com. See unpkg's documentation for more details on its usage.

In browsers that support ES modules, you may import the minified esm code directly.

Read Google's primer on ES modules if you need one.

<script type="module">
import { value, watch } from '//unpkg.com/observue/esm/index.min.js'
// ...
</script>

For widest support, use the global variable export script.

<script src="//unpkg.com/observue"></script>
<script>
const pointer = observue.value(0)
// ...
</script>

In Node.js

In Node.js, simply require('observue')

const { value, watch } = require('observue')

API

The API is the same as specified in the advanced reactivity API RFC with the following modifications/implementation details:

• Vue-specific parts of the RFC are ignored. (E.g. the "Exposing Pointers to Components" section)
• Assigning to readonly computed pointers' .value property will error only in strict mode and will fail silently in non-strict mode. That is, a readonly computed pointer's .value property behaves like a non-writable attribute.

Todos

• [ ] Unit tests

License

ISC