Skip to content
This repository has been archived by the owner on Dec 31, 2020. It is now read-only.

Commit

Permalink
useLocalStore -> useObservable
Browse files Browse the repository at this point in the history
  • Loading branch information
@mweststrate
mweststrate committed Aug 26, 2020
1 parent b3749e8 commit 06a130e
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 29 deletions.
2 changes: 1 addition & 1 deletion src/index.ts
View file
Expand Up @@ -3,5 +3,5 @@ import "./assertEnvironment"
export { isUsingStaticRendering, useStaticRendering } from "./staticRendering"
export { observer, IObserverOptions } from "./observer"
export { Observer } from "./ObserverComponent"
export { useLocalStore } from "./useLocalStore"
export { useObservable } from "./useObservable"
export { observerBatching } from "./observerBatching"
2 changes: 1 addition & 1 deletion src/useLocalStore.ts → src/useObservable.ts
View file
Expand Up @@ -3,7 +3,7 @@ import React from "react"

import { AnnotationsMap } from "mobx"

export function useLocalStore<TStore extends Record<string, any>>(
export function useObservable<TStore extends Record<string, any>>(
initializer: () => TStore,
annotations?: AnnotationsMap<TStore, never>
): TStore {
Expand Down
24 changes: 12 additions & 12 deletions test/useAsObservableSource.test.tsx
View file
Expand Up @@ -5,7 +5,7 @@ import { autorun, configure, observable } from "mobx"
import * as React from "react"
import { useEffect, useState } from "react"

import { Observer, observer, useLocalStore } from "../src"
import { Observer, observer, useObservable } from "../src"
import { resetMobx } from "./utils"
import { useObserver } from "../src/useObserver"

Expand All @@ -19,9 +19,9 @@ describe("base useAsObservableSource should work", () => {

function Counter({ multiplier }: { multiplier: number }) {
counterRender++
const observableProps = useLocalStore(() => ({ multiplier }))
const observableProps = useObservable(() => ({ multiplier }))
Object.assign(observableProps, { multiplier })
const store = useLocalStore(() => ({
const store = useObservable(() => ({
count: 10,
get multiplied() {
return observableProps.multiplier * this.count
Expand Down Expand Up @@ -84,7 +84,7 @@ describe("base useAsObservableSource should work", () => {

function Counter({ multiplier }: { multiplier: number }) {
counterRender++
const store = useLocalStore(() => ({
const store = useObservable(() => ({
multiplier,
count: 10,
get multiplied() {
Expand Down Expand Up @@ -153,7 +153,7 @@ describe("base useAsObservableSource should work", () => {
const Counter = observer(({ multiplier }: { multiplier: number }) => {
counterRender++

const store = useLocalStore(() => ({
const store = useObservable(() => ({
multiplier,
count: 10,
get multiplied() {
Expand Down Expand Up @@ -214,7 +214,7 @@ test("useAsObservableSource with effects should work", () => {
const thingsSeenByEffect: Array<[number, number, number]> = []

function Counter({ multiplier }: { multiplier: number }) {
const store = useLocalStore(() => ({
const store = useObservable(() => ({
multiplier,
count: 10,
get multiplied() {
Expand Down Expand Up @@ -291,7 +291,7 @@ test("useAsObservableSource with effects should work", () => {
describe("combining observer with props and stores", () => {
it("keeps track of observable values", () => {
const TestComponent = observer((props: any) => {
const localStore = useLocalStore(() => ({
const localStore = useObservable(() => ({
get value() {
return props.store.x + 5 * props.store.y
}
Expand All @@ -317,7 +317,7 @@ describe("combining observer with props and stores", () => {
const renderedValues: number[] = []

const TestComponent = observer((props: any) => {
const localStore = useLocalStore(() => ({
const localStore = useObservable(() => ({
y: props.y,
get value() {
return props.store.x + 5 * this.y
Expand Down Expand Up @@ -348,7 +348,7 @@ describe("enforcing actions", () => {
configure({ enforceActions: "never" })
const { result } = renderHook(() => {
const [thing, setThing] = React.useState("world")
useLocalStore(() => ({ hello: thing }))
useObservable(() => ({ hello: thing }))
useEffect(() => setThing("react"), [])
})
expect(result.error).not.toBeDefined()
Expand All @@ -357,7 +357,7 @@ describe("enforcing actions", () => {
configure({ enforceActions: "observed" })
const { result } = renderHook(() => {
const [thing, setThing] = React.useState("world")
useLocalStore(() => ({ hello: thing }))
useObservable(() => ({ hello: thing }))
useEffect(() => setThing("react"), [])
})
expect(result.error).not.toBeDefined()
Expand All @@ -366,7 +366,7 @@ describe("enforcing actions", () => {
configure({ enforceActions: "always" })
const { result } = renderHook(() => {
const [thing, setThing] = React.useState("world")
useLocalStore(() => ({ hello: thing }))
useObservable(() => ({ hello: thing }))
useEffect(() => setThing("react"), [])
})
expect(result.error).not.toBeDefined()
Expand All @@ -377,7 +377,7 @@ it("doesn't update a component while rendering a different component - #274", ()
// https://github.com/facebook/react/pull/17099

const Parent = observer((props: any) => {
const observableProps = useLocalStore(() => props)
const observableProps = useObservable(() => props)
useEffect(() => {
Object.assign(observableProps, props)
}, [props])
Expand Down
30 changes: 15 additions & 15 deletions test/useLocalStore.test.tsx
View file
Expand Up @@ -3,7 +3,7 @@ import * as React from "react"
import { renderHook } from "@testing-library/react-hooks"
import { act, cleanup, fireEvent, render } from "@testing-library/react"

import { Observer, observer, useLocalStore } from "../src"
import { Observer, observer, useObservable } from "../src"
import { useEffect, useState } from "react"
import { autorun } from "mobx"
import { useObserver } from "../src/useObserver"
Expand All @@ -19,7 +19,7 @@ test("base useLocalStore should work", () => {

function Counter() {
counterRender++
const store = (outerStoreRef = useLocalStore(() => ({
const store = (outerStoreRef = useObservable(() => ({
count: 0,
count2: 0, // not used in render
inc() {
Expand Down Expand Up @@ -70,7 +70,7 @@ test("base useLocalStore should work", () => {
describe("is used to keep observable within component body", () => {
it("value can be changed over renders", () => {
const TestComponent = () => {
const obs = useLocalStore(() => ({
const obs = useObservable(() => ({
x: 1,
y: 2
}))
Expand All @@ -95,7 +95,7 @@ describe("is used to keep observable within component body", () => {
const TestComponent = observer(() => {
renderCount++

const obs = useLocalStore(() => ({
const obs = useObservable(() => ({
x: 1,
y: 2
}))
Expand All @@ -118,7 +118,7 @@ describe("is used to keep observable within component body", () => {

it("actions can be used", () => {
const TestComponent = observer(() => {
const obs = useLocalStore(() => ({
const obs = useObservable(() => ({
x: 1,
y: 2,
inc() {
Expand All @@ -140,7 +140,7 @@ describe("is used to keep observable within component body", () => {

it("computed properties works as well", () => {
const TestComponent = observer(() => {
const obs = useLocalStore(() => ({
const obs = useObservable(() => ({
x: 1,
y: 2,
get z() {
Expand All @@ -158,7 +158,7 @@ describe("is used to keep observable within component body", () => {

it("computed properties can use local functions", () => {
const TestComponent = observer(() => {
const obs = useLocalStore(() => ({
const obs = useObservable(() => ({
x: 1,
y: 2,
getMeThatX() {
Expand All @@ -181,7 +181,7 @@ describe("is used to keep observable within component body", () => {
const seen: number[] = []

const TestComponent = observer(() => {
const obs = useLocalStore(() => ({
const obs = useObservable(() => ({
x: 1,
inc(delta: number) {
this.x += delta
Expand Down Expand Up @@ -215,7 +215,7 @@ describe("is used to keep observable within component body", () => {

it("Map can used instead of object", () => {
const TestComponent = observer(() => {
const map = useLocalStore(() => new Map([["initial", 10]]))
const map = useObservable(() => new Map([["initial", 10]]))
return (
<div onClick={() => map.set("later", 20)}>
{Array.from(map).map(([key, value]) => (
Expand All @@ -241,7 +241,7 @@ describe("is used to keep observable within component body", () => {
function Counter({ multiplier }: { multiplier: number }) {
counterRender++

const store = useLocalStore(() => ({
const store = useObservable(() => ({
multiplier,
count: 10,
get multiplied() {
Expand Down Expand Up @@ -309,7 +309,7 @@ describe("is used to keep observable within component body", () => {
function Counter({ multiplier }: { multiplier: number }) {
counterRender++

const store = useLocalStore(() => ({
const store = useObservable(() => ({
multiplier,
count: 10,
get multiplied() {
Expand Down Expand Up @@ -378,7 +378,7 @@ describe("is used to keep observable within component body", () => {
const Counter = observer(({ multiplier }: { multiplier: number }) => {
counterRender++

const store = useLocalStore(() => ({
const store = useObservable(() => ({
multiplier,
count: 10,
get multiplied() {
Expand Down Expand Up @@ -437,7 +437,7 @@ describe("enforcing actions", () => {
mobx.configure({ enforceActions: "never" })
const { result } = renderHook(() => {
const [multiplier, setMultiplier] = React.useState(2)
const store = useLocalStore(() => ({
const store = useObservable(() => ({
multiplier,
count: 10,
get multiplied() {
Expand All @@ -458,7 +458,7 @@ describe("enforcing actions", () => {
mobx.configure({ enforceActions: "observed" })
const { result } = renderHook(() => {
const [multiplier, setMultiplier] = React.useState(2)
const store = useLocalStore(() => ({
const store = useObservable(() => ({
multiplier,
count: 10,
get multiplied() {
Expand All @@ -479,7 +479,7 @@ describe("enforcing actions", () => {
mobx.configure({ enforceActions: "always" })
const { result } = renderHook(() => {
const [multiplier, setMultiplier] = React.useState(2)
const store = useLocalStore(() => ({
const store = useObservable(() => ({
multiplier,
count: 10,
get multiplied() {
Expand Down

0 comments on commit 06a130e

Please sign in to comment.