Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commite395540

Browse files
committed
improve dot notation
1 parent0145962 commite395540

File tree

3 files changed

+31
-22
lines changed

3 files changed

+31
-22
lines changed

‎observableStateTree/dotNotation.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,16 @@ import { createDotNotationProxy } from './dotNotationProxy'
33

44
exportconstcreateStore=(initial:any)=>{
55
const{ get, set, listen}=createStateTree(initial)
6-
constspecialKeys=newSet(['val','listen'])
7-
constonGet=(key:string,path:string[])=>{
8-
if(key==='val')returnget(path)
9-
if(key==='listen')return(callback:Callback)=>listen(path,callback)
6+
constlistenKey=Symbol()
7+
constvalKey=Symbol()
8+
constspecialKeys=newSet([valKey,listenKey])
9+
constonGet=(key:symbol,path:string[])=>{
10+
if(key===valKey)returnget(path)
11+
if(key===listenKey)return(callback:Callback)=>listen(path,callback)
12+
}
13+
return{
14+
tree:createDotNotationProxy(onGet,set,specialKeys)asany,
15+
listen:(node:any,callback:Callback)=>node[listenKey](callback),
16+
val:(node:any)=>node[valKey],
1017
}
11-
returncreateDotNotationProxy(onGet,set,specialKeys)asany
1218
}

‎observableStateTree/dotNotationProxy.ts‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
11
exportconstcreateDotNotationProxy=(
2-
onGet:(key:string,path:string[])=>unknown,
2+
onGet:(key:symbol,path:string[])=>unknown,
33
onSet:(path:string[],value:unknown)=>void,
4-
specialKeys:Set<string>,
4+
specialKeys:Set<symbol>,
55
path:string[]=[]
66
):typeofProxy=>{
77
returnnewProxy(
88
{},
99
{
10-
get:(target,key:string)=>{
10+
get:(target,key:string|symbol)=>{
11+
if(typeofkey==='string'){
12+
returncreateDotNotationProxy(onGet,onSet,specialKeys,[...path,key])
13+
}
1114
if(specialKeys.has(key))returnonGet(key,path)
12-
returncreateDotNotationProxy(onGet,onSet,specialKeys,[...path,key])
15+
thrownewError('symbol keys are not supported')
1316
},
14-
set:(target:any,key:string,value:unknown)=>{
15-
if(specialKeys.has(key)){
16-
thrownewError(`sorry you may not use "${key}" as a key`)
17+
set:(target:any,key:string|symbol,value:unknown)=>{
18+
if(typeofkey==='string'){
19+
onSet([...path,key],value)
20+
returntrue
1721
}
18-
onSet([...path,key],value)
19-
returntrue
22+
thrownewError('symbol keys are not supported')
2023
},
2124
}
2225
)

‎pages/dotNotationExample.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,21 @@ import { createStore } from '../observableStateTree/dotNotation'
33

44
consttest=()=>{
55
console.clear()
6-
consttree=createStore({a:{b:{c:1,d:1}}})
6+
const{tree, listen, val}=createStore({a:{b:{c:1,d:1}}})
77
// the tree behaves like a normal object e.g
8-
console.log('tree',tree.val)
8+
console.log('tree',val(tree))
99
// prints the object 👉 { a: { b: { c : 1, d: 1 }}}
1010

1111
// we can setup listeners
12-
constdestroyRoot=tree.listen((root:any)=>console.log('root',root))
12+
constdestroyRoot=listen(tree,(root:any)=>console.log('root',root))
1313
// on initial setup prints the full tree 👉 root { a: { b: { c: 1, d: 1 }}}
14-
constdestroyA=tree.a.listen((a:any)=>console.log('a',a))
14+
constdestroyA=listen(tree.a,(a:any)=>console.log('a',a))
1515
// 👉 a { b: { c: 1 }}
16-
constdestroyB=tree.a.b.listen((b:any)=>console.log('b',b))
16+
constdestroyB=listen(tree.a.b,(b:any)=>console.log('b',b))
1717
// 👉 b { c: 1 }
18-
constdestroyC=tree.a.b.c.listen((c:any)=>console.log('c',c))
18+
constdestroyC=listen(tree.a.b.c,(c:any)=>console.log('c',c))
1919
// 👉 c 1
20-
constdestroyD=tree.a.b.c.listen((d:any)=>console.log('d',d))
20+
constdestroyD=listen(tree.a.b.c,(d:any)=>console.log('d',d))
2121
// 👉 d 1
2222

2323
// should also support sending the prev value
@@ -36,7 +36,7 @@ const test = () => {
3636

3737
// 🙋‍♂️
3838
// 2. Modifying a parent notifies the relevant children listeners.
39-
tree.a={ ...tree.a.val}
39+
tree.a={ ...val(tree.a)}
4040
// 👉 a { b: { c: 2 }}
4141
// a is fired but b, c and d are not fired
4242
tree.a={e:1}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp