Latest Threat Research:SANDWORM_MODE: Shai-Hulud-Style npm Worm Hijacks CI Workflows and Poisons AI Toolchains.Details →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@cafebazaar/async-actions

Package Overview
Dependencies
Maintainers
4
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cafebazaar/async-actions - npm Package Compare versions

Comparing version
0.4.0
 to
0.4.1
+18
-12
LICENSE

@@ -1,15 +0,21 @@

The MIT License (MIT)
MIT License
Copyright (c) 2019, CafeBazaar Front-End Chapter Team <>
Copyright (c) 2019-present CafeBazaar Front-End Chapter Team
Permission to use, copy, modify, and/or distribute this software for any purpose
with or without fee is hereby granted, provided that the above copyright notice
and this permission notice appear in all copies.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
THIS SOFTWARE.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
+12
-1
package.json
{
"name": "@cafebazaar/async-actions",
"version": "0.4.0",
"version": "0.4.1",
"description": "",
"author": "Bazaar Front-End Chapter",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/cafebazaar/async-actions.git"
},
"keywords": [
"vue",
"svelte",
"async",
"promise",
"loading"
],
"scripts": {

@@ -8,0 +19,0 @@ "lint": "eslint --cache --ignore-path .gitignore .",

+45
-32
README.md

@@ -9,16 +9,16 @@ ## Overview

Actions are just simple functions. Async-Actions adds `state`, `error` and `data` properties to your functions and updates these properties dynamically.
Actions are just simple functions. Async-Actions adds `state`, `error`, and `data` properties to your functions and dynamically updates these properties.
#### Action lifecycle and possible values of the `state` property
| Value | Description |
| ------------ | ---------------------------------------------------------------------------------------------------- |
| notInitiated | Action has not called yet |
| pending | Action has called, but it has not been completed yet. |
| fulfilled | Action has been completed successfully, and the result value is accessible using the `data` property |
| rejected | Action has been rejected with an error which is accessible using `error` property |
| Value | Description |
| ------------ | ----------------------------------------------------------------------------------------------------- |
| notInitiated | Action has not been called yet. |
| pending | Action has been called, but it has not been completed yet. |
| fulfilled | Action has been completed successfully, and the result value is accessible using the `data` property. |
| rejected | Action has been rejected with an error which is accessible using `error` property. |
## Instalation
## Installation
You can install Async-Actions with NPM, Yarn.
You can install Async-Actions with NPM or Yarn.

@@ -37,7 +37,7 @@ ```bash

You can use Async-Actions in [pure JS](#pure-js). Also there are built in extension for [Vue.js](#vuejs) and [svelte](#svelte).
You can use Async-Actions in [pure JS](#pure-js). Also there are built in extensions for [Vue.js](#vuejs) and [Svelte](#svelte).
### Pure JS
You can define an async-action using `asyncAction` method which gets a handler function and configuration options as its parameters. When using the pure version, you must provide an observable function which used for updating action properties.
You can define an async-action using the `asyncAction` method, which gets a handler function and configuration options as its parameters. When using the pure version, you must provide an observable function which used for updating action properties.

@@ -61,8 +61,8 @@ ```javascript

| immediate | determines handler function should be called immediately after creation | boolean | false | false |
| debounce | debounce time in miliseconds | number | false | 0 |
| initialData | initial value of `data` property of action | any | false | null |
| debounce | debounce time in milliseconds | number | false | 0 |
| initialData | the initial value of `data` property of action | any | false | null |
### Vue.js
In the Vue version, `Vue.observable` provided by default as the observable function and you don't need to pass it. There are two ways for using Async-Actions in a Vue.js project.
`Vue.observable` provided by default as the observable function in the Vue version, and you don't need to pass it. There are two ways to use Async-Actions in a Vue.js project.

@@ -80,3 +80,3 @@ #### 1. Define actions in component options

then, you can define async-actions in all components using `asyncActions` property.
Then, you can define async-actions in all components using `asyncActions` property.

@@ -86,11 +86,13 @@ ```javascript

<div>
<div v-if="fetchUsers.state === 'pending'">
<div v-if="getUsers.state === 'pending'">
Fetching Users List. Please Wait...
</div>
<div v-else-if="fetchUsers.error">
<div v-else-if="getUsers.error">
Oops. Somthing Went Wrong :(
</div>
<div v-else>
<ul v-for="user in fetchUsers.data">
<li>{{ user.name }}</li>
<ul>
<li v-for="user in getUsers.data" :key="user.id">
{{ user.name }}
</li>
</ul>

@@ -105,3 +107,3 @@ </div>

asyncActions: {
fetchUsers: {
getUsers: {
handler() {

@@ -119,8 +121,10 @@ return someApiCall();

List of all options are available [here](#options).
The List of all options is available [here](#options).
If an actions does not need any options, you can define it as a function.
If an action does not need any options, you can define it as a function for the sake of simplicity.
```javascript
<script>
import { loginApi } from './api';
export default {

@@ -139,3 +143,3 @@ name: 'Login',

In this way you can create asyncActions anywhere and use them as normal functions.
In this way, you can create asyncActions anywhere and use them as regular functions.

@@ -146,4 +150,7 @@ ```javascript

import { asyncAction } from '@cafebazaar/async-actions/vue';
import { someApiCall } from './api';
export const getUsers = asyncAction(() => someApiCall(), options);
export const getUsers = asyncAction(() => someApiCall(), {
initialData: [],
});
```

@@ -156,11 +163,13 @@

<div>
<div v-if="getUsers.state === 'pending'">
<div v-if="getUsersAction.state === 'pending'">
Fetching Users List. Please Wait...
</div>
<div v-else-if="getUsers.error">
<div v-else-if="getUsersAction.error">
Oops. Somthing Went Wrong :(
</div>
<div v-else>
<ul v-for="user in getUsers.data">
<li>{{ user.name }}</li>
<ul>
<li v-for="user in getUsersAction.data" :key="user.id">
{{ user.name }}
</li>
</ul>

@@ -177,3 +186,3 @@ </div>

computed: {
getUsers(){
getUsersAction(){
return getUsers;

@@ -183,3 +192,3 @@ }

created(){
this.getUsers();
getUsers();
}

@@ -191,3 +200,3 @@ };

In the Svelte version, `Store.writable` is used for every observable prop(`state`, `data`, and `error`) and you don't need to provide `observableFn`. You can simply do:
In the Svelte version, `Store.writable` is used for every observable prop(`state`, `data`, and `error`) and, you don't need to provide `observableFn`. You can simply do:

@@ -224,4 +233,8 @@ ```html

List of all options are available [here](#options).
The List of all options is available [here](#options).
You can use asyncAction outside of svelte file and import it and use it directly inside DOM.
## License
[MIT](https://github.com/cafebazaar/async-actions/blob/master/LICENSE)