@tomorrowevening/theatre-dataverse 1.0.6 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -18
- package/package.json +5 -5
- package/dist/index.mjs +0 -1564
- package/dist/index.mjs.map +0 -7
- package/dist/prism/asyncIterateOver.d.ts +0 -1
- package/dist/prism/asyncIterateOver.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# @theatre
|
|
1
|
+
# @tomorrowevening/theatre-dataverse
|
|
2
2
|
|
|
3
3
|
Dataverse is the reactive dataflow library
|
|
4
4
|
[Theatre.js](https://www.theatrejs.com) is built on. It is inspired by ideas in
|
|
@@ -8,16 +8,16 @@ and it is optimised for interactivity and animation.
|
|
|
8
8
|
## Installation
|
|
9
9
|
|
|
10
10
|
```sh
|
|
11
|
-
$ npm install @theatre
|
|
11
|
+
$ npm install @tomorrowevening/theatre-dataverse
|
|
12
12
|
# and the react bindings
|
|
13
|
-
$ npm install @theatre
|
|
13
|
+
$ npm install @tomorrowevening/theatre-react
|
|
14
14
|
```
|
|
15
15
|
|
|
16
16
|
## Usage with React
|
|
17
17
|
|
|
18
18
|
```tsx
|
|
19
|
-
import {Atom} from '@theatre
|
|
20
|
-
import {useVal} from '@theatre
|
|
19
|
+
import {Atom} from '@tomorrowevening/theatre-dataverse'
|
|
20
|
+
import {useVal} from '@tomorrowevening/theatre-react'
|
|
21
21
|
import {useEffect} from 'react'
|
|
22
22
|
|
|
23
23
|
// Atoms hold state
|
|
@@ -45,7 +45,7 @@ Alternatively, we could have defined our atom inside the component, making its
|
|
|
45
45
|
state local to that component instance:
|
|
46
46
|
|
|
47
47
|
```tsx
|
|
48
|
-
import {useAtom} form '@theatre
|
|
48
|
+
import {useAtom} form '@tomorrowevening/theatre-react'
|
|
49
49
|
|
|
50
50
|
function Component() {
|
|
51
51
|
const atom = useAtom({count: 0, ready: false})
|
|
@@ -72,7 +72,7 @@ Atoms are state holders. They can be used to manage either component state or
|
|
|
72
72
|
the global state of your application.
|
|
73
73
|
|
|
74
74
|
```ts
|
|
75
|
-
import {Atom} from '@theatre
|
|
75
|
+
import {Atom} from '@tomorrowevening/theatre-dataverse'
|
|
76
76
|
|
|
77
77
|
const atom = new Atom({intensity: 1, position: {x: 0, y: 0}})
|
|
78
78
|
```
|
|
@@ -105,7 +105,7 @@ atom.getByPointer(atom.pointer.intensity) // 4
|
|
|
105
105
|
#### Reading the state of an atom _reactively, in React_
|
|
106
106
|
|
|
107
107
|
```ts
|
|
108
|
-
import {useVal} from '@theatre
|
|
108
|
+
import {useVal} from '@tomorrowevening/theatre-react'
|
|
109
109
|
|
|
110
110
|
function Component() {
|
|
111
111
|
const intensity = useVal(atom.pointer.intensity) // 4
|
|
@@ -121,7 +121,7 @@ we talk about [prisms](#prisms).
|
|
|
121
121
|
Pointers are a type-safe way to refer to specific properties of atoms.
|
|
122
122
|
|
|
123
123
|
```ts
|
|
124
|
-
import {Atom} from '@theatre
|
|
124
|
+
import {Atom} from '@tomorrowevening/theatre-dataverse'
|
|
125
125
|
|
|
126
126
|
const atom = new Atom({intensity: 1, position: {x: 0, y: 0}})
|
|
127
127
|
|
|
@@ -145,8 +145,8 @@ Pointers are a great way to pass data down the component tree while keeping
|
|
|
145
145
|
re-renders only to the components that actually need to re-render.
|
|
146
146
|
|
|
147
147
|
```tsx
|
|
148
|
-
import {useVal, useAtom} from '@theatre
|
|
149
|
-
import type {Pointer} from '@theatre
|
|
148
|
+
import {useVal, useAtom} from '@tomorrowevening/theatre-react'
|
|
149
|
+
import type {Pointer} from '@tomorrowevening/theatre-dataverse'
|
|
150
150
|
|
|
151
151
|
function ParentComponent() {
|
|
152
152
|
const atom = useAtom({
|
|
@@ -185,7 +185,7 @@ function Light({intensityP}) {
|
|
|
185
185
|
Prisms are functions that derive a value from an atom or from another prism.
|
|
186
186
|
|
|
187
187
|
```ts
|
|
188
|
-
import {Atom, prism, val} from '@theatre
|
|
188
|
+
import {Atom, prism, val} from '@tomorrowevening/theatre-dataverse'
|
|
189
189
|
|
|
190
190
|
const atom = new Atom({a: 1, b: 2, foo: 10})
|
|
191
191
|
|
|
@@ -241,7 +241,7 @@ Tickers are a way to schedule and synchronise computations. They're useful when
|
|
|
241
241
|
reacting to changes in atoms or prisms _outside of React's renderloop_.
|
|
242
242
|
|
|
243
243
|
```ts
|
|
244
|
-
import {Ticker, onChange} from '@theatre
|
|
244
|
+
import {Ticker, onChange} from '@tomorrowevening/theatre-dataverse'
|
|
245
245
|
|
|
246
246
|
const ticker = new Ticker()
|
|
247
247
|
|
|
@@ -356,7 +356,7 @@ key to be passed into it, whlie `useMemo()` doesn't. This means that we can call
|
|
|
356
356
|
key.
|
|
357
357
|
|
|
358
358
|
```ts
|
|
359
|
-
import {Atom, prism, val} from '@theatre
|
|
359
|
+
import {Atom, prism, val} from '@tomorrowevening/theatre-dataverse'
|
|
360
360
|
|
|
361
361
|
const atom = new Atom(0)
|
|
362
362
|
|
|
@@ -421,8 +421,8 @@ and how [`useState()`](https://reactjs.org/docs/hooks-state.html) work. But
|
|
|
421
421
|
here's a quick example:
|
|
422
422
|
|
|
423
423
|
```tsx
|
|
424
|
-
import {prism} from '@theatre
|
|
425
|
-
import {useVal} from '@theatre
|
|
424
|
+
import {prism} from '@tomorrowevening/theatre-dataverse'
|
|
425
|
+
import {useVal} from '@tomorrowevening/theatre-react'
|
|
426
426
|
|
|
427
427
|
// This prism holds the current mouse position and updates when the mouse moves
|
|
428
428
|
const mousePositionPr = prism(() => {
|
|
@@ -536,7 +536,7 @@ component. This way, we can optimize our React components in a fine-grained way
|
|
|
536
536
|
by moving their computations outside of React's render loop.
|
|
537
537
|
|
|
538
538
|
```tsx
|
|
539
|
-
import {usePrism} from '@theatre
|
|
539
|
+
import {usePrism} from '@tomorrowevening/theatre-react'
|
|
540
540
|
|
|
541
541
|
function Component() {
|
|
542
542
|
const value = usePrism(() => {
|
|
@@ -705,5 +705,5 @@ val(double)
|
|
|
705
705
|
in VSCode and look up references to `Atom`, `prism()` and other dataverse
|
|
706
706
|
methods. Since dataverse is used internally in Theatre.js, there are a lot of
|
|
707
707
|
examples of how to use it.
|
|
708
|
-
- Also see [`@theatre
|
|
708
|
+
- Also see [`@tomorrowevening/theatre-react`](../react/README.md) to learn more about the React
|
|
709
709
|
bindings.
|
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tomorrowevening/theatre-dataverse",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"author": {
|
|
6
|
-
"name": "
|
|
7
|
-
"email": "
|
|
8
|
-
"url": "https://
|
|
6
|
+
"name": "Colin Duffy",
|
|
7
|
+
"email": "colin@tomorrowevening.com",
|
|
8
|
+
"url": "https://tomorrowevening.com/"
|
|
9
9
|
},
|
|
10
10
|
"repository": {
|
|
11
11
|
"type": "git",
|
|
12
|
-
"url": "https://github.com/
|
|
12
|
+
"url": "https://github.com/tomorrowevening/theatre",
|
|
13
13
|
"directory": "packages/dataverse"
|
|
14
14
|
},
|
|
15
15
|
"main": "dist/index.js",
|