lbb00/use-singleton

Create the singleton easily by javascript.

use-singleton

Create the powerful singleton easily.

• Lazy or Immediately
• Refresh
• Cache value with key
• Clean value and cache
• 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 to true.

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

Clean value and cache

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, { clean: true });
// form cache -> userInfo_1

await getUserInfo(1);
// log -> 'fetch user info: 1'
// -> userInfo_1