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

Commit18a4013

Browse files
committed
added minified version
1 parenta4d1376 commit18a4013

File tree

5 files changed

+2126
-62
lines changed

5 files changed

+2126
-62
lines changed

‎README.md‎

Lines changed: 54 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -13,40 +13,40 @@ Reef.js TODO example
1313
##Setup
1414
Add the package to your project either with:
1515
```bash
16-
# npm
17-
npm install juicr.js
16+
# npm
17+
npm install juicr.js
1818

19-
# yarn
20-
yarn add juicr.js
19+
# yarn
20+
yarn add juicr.js
2121
```
2222

2323
or for browsers:
2424
```html
25-
<scriptsrc="https://cdn.jsdelivr.net/npm/juicr.js" >
25+
<scriptsrc="https://cdn.jsdelivr.net/npm/juicr.js" >
2626
```
2727
2828
## Simple example
2929
1) Create a new Juicr with some initial state:
3030
```javascript
31-
constjuicr=newJuicr({ initialState: { count:0 } })
31+
constjuicr=newJuicr({ initialState: { count:0 } })
3232
```
3333
2) Add an action with a name and a function that returns the changed state:
3434
```javascript
35-
juicr.action("count", (amount,_state)=> {
36-
return { count: count+= amount }
37-
})
35+
juicr.action("count", (amount,_state)=> {
36+
return { count: count+= amount }
37+
})
3838
```
3939
3) Listen to state changes. You can either listen to a single property, an array or use`*` to listen to all changes:
4040
```javascript
41-
juicr.listen("count", (changedState,_state)=> {
42-
console.log(changedState.count)
43-
})
41+
juicr.listen("count", (changedState,_state)=> {
42+
console.log(changedState.count)
43+
})
4444
```
4545
4) Dispatch actions to the Juicr:
4646
```javascript
47-
setInterval(()=> {
48-
juicr.dispatch("count",1)
49-
},1000)
47+
setInterval(()=> {
48+
juicr.dispatch("count",1)
49+
},1000)
5050
```
5151
Play with this example in CodePen.
5252
@@ -59,56 +59,56 @@ Initializes a new Juicr. Pass in an `initialState` object and an optional `dev`
5959
###`juicr.action('actionName', (data,_state)=> { })`
6060
Adds a dispatchable **action** to the Juicr. Specify the`actionName` and a`function` that returns the state changes. The `data` is passed in from the **dispatch** call as well as the current Juicr `_state`. For example:
6161
```javascript
62-
juicr.action('delete', ({ id },_state)=> {
63-
return { items:_state.items.filter(t=>t.id!== id ) }
64-
})
62+
juicr.action('delete', ({ id },_state)=> {
63+
return { items:_state.items.filter(t=>t.id!== id ) }
64+
})
6565
```
6666
6767
### `juicr.dispatch('actionName', data)`
6868
Dispatches an **action** with `data` on your Juicr. For example:
6969
```javascript
70-
juicr.dispatch("delete", { id:1 })
70+
juicr.dispatch("delete", { id:1 })
7171
```
7272
7373
###`juicr.listen('propName', (changedState,_state)=> { })`
7474
Listens to changes to the **state** either from an action, or a reaction. You can either specify a single property:
7575
```javascript
76-
juicr.listen("items", (changedState,_state)=> { })
76+
juicr.listen("items", (changedState,_state)=> { })
7777
```
7878
An array of properties:
7979
```javascript
80-
juicr.listen(["propA","propB"], (changedState,_state)=> {})
80+
juicr.listen(["propA","propB"], (changedState,_state)=> {})
8181
```
8282
Or use the special character`*` to listen to any changes on the state:
8383
```javascript
84-
juicr.listen("*", (changedState,_state)=> {})
84+
juicr.listen("*", (changedState,_state)=> {})
8585
```
8686
###`juicr.reaction('propName', (changedState,_state)=> { })`
8787
Reacts to changes in the state and returns new state changes, essentially like a computed property. Similar to **listen** you can react to changes on a single property, an array of properties, or any change using`*`.
8888
8989
```javascript
90-
juicr.reaction('count', ({ count },_state)=> {
91-
return { countIsPositive: count>0 }
92-
})
90+
juicr.reaction('count', ({ count },_state)=> {
91+
return { countIsPositive: count>0 }
92+
})
9393
```
9494
9595
## Asynchronous actions
9696
Actions can return a`Promise` which resolves with the state changes. When dispatching use`.then` for triggering other actions or`.catch` for errors. Eg.
9797
9898
```javascript
99-
juicr.action("setText", (text)=> {
100-
returnnewPromise((resolve)=> {
101-
setTimeout(()=> {
102-
resolve({ text })
103-
},100)
104-
})
99+
juicr.action("setText", (text)=> {
100+
returnnewPromise((resolve)=> {
101+
setTimeout(()=> {
102+
resolve({ text })
103+
},100)
105104
})
105+
})
106106
107-
juicr.dispatch("setLoading",true)
108-
juicr.dispatch("setText","hello").then((changedState)=> {
109-
juicr.dispatch("setLoading",false)
110-
// changedState.text === "hello"
111-
})
107+
juicr.dispatch("setLoading",true)
108+
juicr.dispatch("setText","hello").then((changedState)=> {
109+
juicr.dispatch("setLoading",false)
110+
// changedState.text === "hello"
111+
})
112112
```
113113
114114
## Multiple Juicrs
@@ -117,28 +117,28 @@ Larger projects may benefit from using multiple Juicrs for different parts of yo
117117
## Use with React & React Native
118118
Using juicr.js with React.js & React Native is easy. The simplest approach is to listen to all changes`*` in your main app component and use`setState` to update your state:
119119
```javascript
120-
// App.js
121-
constructor() {
122-
...
123-
this.juicr.listen("*", (changedState,_state)=> {
124-
this.setState({...changedState })
125-
})
126-
...
127-
}
120+
// App.js
121+
constructor() {
122+
...
123+
this.juicr.listen("*", (changedState,_state)=> {
124+
this.setState({...changedState })
125+
})
126+
...
127+
}
128128
```
129129
Then pass the`juicr.dispatch` function to components:
130130
```javascript
131-
<MyComponent dispatch={this.juicr.dispatch}/>
131+
<MyComponent dispatch={this.juicr.dispatch}/>
132132
```
133133
Alternatively you could pass the entire juicr to your components and let them handle their own internal state and listen for changes, e.g:
134134
```javascript
135-
// UserHeader.js
136-
constructor(props) {
137-
...
138-
this.state= { username:'', photoUrl:'' }
139-
props.userJuicr.listen(["username","photoUrl", (changedState,_state)=> {
140-
this.setState({...changedState })
141-
})
142-
...
143-
}
135+
// UserHeader.js
136+
constructor(props) {
137+
...
138+
this.state= { username:'', photoUrl:'' }
139+
props.userJuicr.listen(["username","photoUrl", (changedState,_state)=> {
140+
this.setState({...changedState })
141+
})
142+
...
143+
}
144144
```

‎lib/juicr.js‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
"use strict";
2+
3+
function_objectSpread(target){for(vari=1;i<arguments.length;i++){varsource=arguments[i]!=null ?arguments[i] :{};varownKeys=Object.keys(source);if(typeofObject.getOwnPropertySymbols==='function'){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){returnObject.getOwnPropertyDescriptor(source,sym).enumerable;}));}ownKeys.forEach(function(key){_defineProperty(target,key,source[key]);});}returntarget;}
4+
5+
function_defineProperty(obj,key,value){if(keyinobj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}returnobj;}
6+
7+
function_classCallCheck(instance,Constructor){if(!(instanceinstanceofConstructor)){thrownewTypeError("Cannot call a class as a function");}}
8+
9+
function_defineProperties(target,props){for(vari=0;i<props.length;i++){vardescriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"indescriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}
10+
11+
function_createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);returnConstructor;}
12+
13+
(function(){
14+
varJuicr=
15+
/*#__PURE__*/
16+
function(){
17+
functionJuicr(){
18+
varo=arguments.length>0&&arguments[0]!==undefined ?arguments[0] :{};
19+
20+
_classCallCheck(this,Juicr);
21+
22+
this.actions={};
23+
this.listeners=[];
24+
this.reactions=[];
25+
this._state=o.initialState||{};
26+
this.dev=o.dev;
27+
28+
if(this.dev){
29+
this.listen("*",function(changedState){
30+
console.log(changedState);
31+
});
32+
}
33+
34+
this.dispatch=this.dispatch.bind(this);
35+
this.action=this.action.bind(this);
36+
this.listen=this.listen.bind(this);
37+
this.reaction=this.reaction.bind(this);
38+
}
39+
40+
_createClass(Juicr,[{
41+
key:"action",
42+
value:functionaction(actionName,fn){
43+
this.actions[actionName]=function(o,_state){
44+
returnnewPromise(function(resolve,reject){
45+
varres=fn(o,_state);
46+
47+
if(res||res===undefined){
48+
resolve(res);
49+
}else{
50+
reject();
51+
}
52+
});
53+
};
54+
}
55+
},{
56+
key:"listen",
57+
value:functionlisten(props,fn){
58+
var_this=this;
59+
60+
varlistener={
61+
props:typeofprops==='string' ?[props] :props,
62+
fn:fn
63+
};
64+
65+
listener.unsubscribe=function(){
66+
vari=_this.listeners.indexOf(listener);
67+
68+
_this.listeners.splice(i,1);
69+
};
70+
71+
this.listeners.push(listener);
72+
returnlistener.unsubscribe;
73+
}
74+
},{
75+
key:"reaction",
76+
value:functionreaction(props,fn){
77+
var_this2=this;
78+
79+
varreaction={
80+
props:typeofprops==='string' ?[props] :props,
81+
fn:fn
82+
};
83+
this.reactions.push(reaction);// run reaction first time
84+
85+
vars={};
86+
reaction.props.forEach(function(p){
87+
s[p]=_this2._state[p];
88+
});
89+
varcomputedState=fn(s,this._state);
90+
91+
this._updateState(computedState);//////
92+
93+
94+
returnreaction;
95+
}
96+
},{
97+
key:"_updateState",
98+
value:function_updateState(changedState){
99+
var_this3=this;
100+
101+
this._state=_objectSpread({},this._state,changedState);
102+
varchangedKeys=Object.keys(changedState);
103+
this.listeners.forEach(function(_ref){
104+
varprops=_ref.props,
105+
fn=_ref.fn;
106+
107+
if(props[0]&&props[0]==="*"){
108+
fn(changedState,_this3._state);
109+
}else{
110+
varemit=props.filter(function(element){
111+
returnchangedKeys.includes(element);
112+
}).length>0;
113+
114+
if(emit){
115+
fn(changedState,_this3._state);
116+
}
117+
}
118+
});
119+
this.reactions.forEach(function(_ref2){
120+
varprops=_ref2.props,
121+
fn=_ref2.fn;
122+
vardoReaction=props.filter(function(element){
123+
returnchangedKeys.includes(element);
124+
}).length>0;
125+
126+
if(doReaction){
127+
varcomputedState=fn(changedState,_this3._state);
128+
if(computedState)_this3._updateState(computedState);
129+
}
130+
});
131+
}
132+
},{
133+
key:"dispatch",
134+
value:functiondispatch(actionName,o){
135+
var_this4=this;
136+
137+
varaction=this.actions[actionName];
138+
139+
if(!action){
140+
console.error("no action with name ".concat(actionName));
141+
return;
142+
}
143+
144+
returnaction(o||{},this._state).then(function(changedState){
145+
if(changedState){
146+
_this4._updateState(changedState);
147+
148+
returnchangedState;
149+
}else{
150+
return{};
151+
}
152+
})["catch"](function(e){
153+
console.error("error in action '".concat(actionName,"'"),e);
154+
return{};
155+
});
156+
}
157+
}]);
158+
159+
returnJuicr;
160+
}();
161+
162+
if(typeofmodule!=='undefined'&&typeofmodule.exports!=='undefined')module.exports=Juicr;elsewindow.Juicr=Juicr;
163+
})();

‎lib/juicr.min.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎lib/juicr.min.js.gz‎

1.01 KB
Binary file not shown.

0 commit comments

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