observue v1.0.0
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
5 years ago