Skip to content
Permalink
Browse files

release 0.2.0

  • Loading branch information...
jamesknelson committed Oct 26, 2019
1 parent e57497e commit b18d59ece6a63e46bfe18cac27ecd691c2e11794
@@ -15,7 +15,7 @@ What?
Currently, react-zen contains just two utilities:

- `createMirror(fetcher)`
- `useSnapshot(mirror, key)`
- `useSnapshot(handle)`

Together, these two functions let you easily consume asynchronous data in your React components. For example, here's how you'd load and display data from a REST API:

@@ -32,7 +32,7 @@ const api = createMirror(async url => {
function Screen() {
// useSnapshot returns your data, loading status, etc.
let { data } = useSnapshot(api, '/todos/1')
let { data } = useSnapshot(api.key('/todos/1'))
return <div><input checked={data.completed} /> {data.title}</div>
}
@@ -58,12 +58,11 @@ API

### `useSnapshot()`

Returns a snapshot of one key's data within a mirror.
Returns a snapshot of the data specified by the given handle.

```typescript
export function useSnapshot(
mirror: Mirror,
key: string,
handle: MirrorHandle,
): {
data: Data
key: Key
@@ -130,7 +129,13 @@ interface Mirror {
* Return a handle for the specified key, from which you can get
* and subscribe to its value.
*/
key(key: string): MirrorHandle
key(key: string): MirrorKeyHandle
/**
* Return a handle for the specified keys, from which you can get
* and subscribe to all their values at once.
*/
key(keys: string[]): MirrorKeyListHandle
/**
* Return a list of the keys currently stored in the mirror for the given
@@ -143,7 +148,7 @@ interface Mirror {

### `MirrorHandle`

As returned by `mirror.key(key)`
As returned by `mirror.key(key)` and `mirror.keys(keys)`

```typescript
interface MirrorHandle {
@@ -13,7 +13,7 @@ const api = createMirror(async url => {

function Screen({ id }) {
// useSnapshot returns your data, loading status, etc.
let snapshot = useSnapshot(api, `/todos/${id}`)
let snapshot = useSnapshot(api.key(`/todos/${id}`))

const handleToggle = async () => {
let request = await fetch(BaseURL + `/todos/${id}`, {
@@ -1,6 +1,6 @@
{
"name": "react-zen",
"version": "0.1.1",
"version": "0.2.0",
"description": "A collection of simple hooks, components and functions for React",
"author": "James K Nelson <james@jamesknelson.com>",
"license": "MIT",
@@ -5,4 +5,4 @@ export * from './MirrorHandles'
export * from './MirrorSnapshots'
export * from './MirrorSnapshots'
export * from './useDocument'
export * from './useHandle'
export * from './useSnapshot'
@@ -1,22 +1,17 @@
import { useContext } from 'react'
import { Mirror } from './Mirror'
import { MirrorContext } from './MirrorContext'
import { useHandle, UseHandleOptions } from './useHandle'

export interface UseSnapshotOptions {
suspend?: boolean
throwFailures?: boolean
}
import { useSnapshot, UseSnapshotOptions } from './useSnapshot'

export function useDocument<Data, Key>(
mirror: Mirror<Data, Key>,
key: Key,
options: UseHandleOptions = {},
options: UseSnapshotOptions = {},
) {
const mirrorContext = useContext(MirrorContext)
const namespacedMirror = getNamespacedMirror(mirrorContext, mirror)
const handle = namespacedMirror.key(key)
return useHandle(handle, options)
return useSnapshot(handle, options)
}

function getNamespacedMirror<Data, Key>(
@@ -3,28 +3,28 @@ import { MirrorActions } from './MirrorActions'
import { MirrorHandle } from './MirrorHandles'
import { MirrorSnapshot } from './MirrorSnapshots'

export interface UseHandleOptions {
export interface UseSnapshotOptions {
suspend?: boolean
throwFailures?: boolean
}

useHandle.defaultOptions = {
useSnapshot.defaultOptions = {
suspend: true,
throwFailures: false,
} as UseHandleOptions
} as UseSnapshotOptions

export function useHandle<
export function useSnapshot<
Output extends MirrorSnapshot<any, Key>,
UpdateData,
Key,
Handle extends MirrorHandle<Key, UpdateData, Output>
>(
handle: MirrorHandle<Key, UpdateData, Output>,
options: UseHandleOptions = {},
options: UseSnapshotOptions = {},
): Output & MirrorActions<UpdateData, Key> {
const {
suspend = useHandle.defaultOptions.suspend,
throwFailures = useHandle.defaultOptions.throwFailures,
suspend = useSnapshot.defaultOptions.suspend,
throwFailures = useSnapshot.defaultOptions.throwFailures,
} = options
let [snapshot, setSnapshot] = useState(handle.getLatest())

@@ -1,6 +1,6 @@
import React, { Suspense } from 'react'
import TestRenderer from 'react-test-renderer'
import { createMirror, useDocument } from '../src'
import { createMirror, useSnapshot } from '../src'

const act = TestRenderer.act

@@ -15,7 +15,7 @@ describe('useSnapshot', () => {
await mirror.key(2).get()

function App() {
let snapshot = useDocument(mirror, 2)
let snapshot = useSnapshot(mirror.key(2))
return <>{snapshot.data.test}</>
}

@@ -32,7 +32,7 @@ describe('useSnapshot', () => {
})

function App() {
let snapshot = useDocument(mirror, 2, { suspend: false })
let snapshot = useSnapshot(mirror.key(2), { suspend: false })
return (
<>
{JSON.stringify({

0 comments on commit b18d59e

Please sign in to comment.
You can’t perform that action at this time.