use-singleton
v1.0.0
Published
Create the powerful singleton easily
Downloads
1,351
Maintainers
Readme
use-singleton
Create the powerful singleton easily.
- Lazy or Immediately
- Refresh
- Cache value
- Support cjs, ejs, umd
- Typescript
- Zero dependence
- Side-effect free
- Only ~.5kb after gzipped
Install
NPM
npm install use-singleton --save
Browser
<script src="https://cdn.jsdelivr.net/npm/use-singleton/dist/index.min.js"></script>
<script>
var useSingle = UseSingleton.useSingle;
var useSingleton = UseSingleton.useSingleton;
</script>
// es2015+
<script type="module">
import { useSingle } from "https://esm.sh/use-singleton";
</script>
Usage
import { useSingleton, useSingle } from "use-singleton";
// the simple
const [getter, setter] = useSingle(initialValue);
// the powerful
const getSingleton = useSingleton(createInstance, options);
Example
useSingle
const [getCount, setCount] = useSingle(0);
getCount(); // -> 0
setCount(1);
getCount(1); // -> 1
// vue
const [getCount, setCount] = useSingle(ref(0));
watch(getCount, (val) => console.log(val));
setCount(1);
// log -> 1
getCount().value; // -> 1
useSingleton
Lazy
const getNumber = useSingleton(() => {
console.log("created");
return 1;
});
getNumber();
// log -> 'created'
// -> 1
getNumber(); // -> 1
Immediately
const getNumber = useSingleton(
() => {
console.log("created");
return 1;
},
{
immediately: true,
}
);
// log -> 'created'
getNumber();
// -> 1
Async
const getServerInfo = useSingleton(
() => {
console.log('fetch data')
return await api.get(`https://foo.bar/api/server-info`)
}
);
await getServerKey()
// log -> 'fetch data'
// -> server-info
await getServerKey()
// -> server-info
await getServerKey(null,{ refresh: true})
// log -> 'fetch data'
// -> server-info_new
await getServerKey()
// -> server-info_new
With key
const getUserInfo = useSingleton(
async (key) => {
const userId = key;
console.log(`fetch user info: ${userId}`);
userInfo = await api.get(`https://foo.bar/api/user?id=${userId}`);
return userInfo;
},
{
withKey: true,
}
);
await Promise.all[(getUserInfo(1), getUserInfo(1), getUserInfo(2))];
// log -> 'fetch user info: 1'
// log -> 'fetch user info: 2'
// -> [userInfo_1, userInfo_1, userInfo_2]
await getUserInfo(1);
// log -> 'fetch user info: 1'
// -> userInfo_1
Key cache
To use the key cache,
withKey
must be set totrue
.
const getUserInfo = useSingleton(
async (key) => {
const userId = key;
console.log(`fetch user info: ${userId}`);
userInfo = await api.get(`https://foo.bar/api/user?id=${userId}`);
return userInfo;
},
{
withKey: true,
keyCache: true,
}
);
await Promise.all[(getUserInfo(1), getUserInfo(1), getUserInfo(2))];
// log -> 'fetch user info: 1'
// log -> 'fetch user info: 2'
// -> [userInfo_1, userInfo_1, userInfo_2]
await getUserInfo(1);
// form cache -> userInfo_1
await getUserInfo(1, { refresh: false });
// log -> 'fetch user info: 1'
// -> userInfo_1