Composition-api in Vanilla js
Vue.js introduced an amazing pattern called Composition API that allows organizing complex logic by splitting it into reusable functions and grouping in logical order. unctx
allows easily implementing composition api pattern in your javascript libraries without hassle.
In you awesome library:
yarn add unctx
# or
npm install unctx
import { createContext } from 'unctx'
const ctx = createContext()
export const useAwesome = ctx.use
// ...
ctx.call({ test: 1 }, () => {
// This is similar to vue setup function
// Any function called here, can use `useAwesome` to get { test: 1 }
})
User code:
import { useAwesome } from 'awesome-lib'
// ...
function setup() {
const ctx = useAwesome()
}
To avoid issues with multiple version of library, unctx
provides a safe global namespace to access context by key (kept in globalThis
). Important: Please use a verbose name for key to avoid conflict with other js libraries. Using npm package name is recommended. Using symbols has no effect since it still causes multiple context issue.
import { useContext, getContext } from 'unctx'
const useAwesome = useContext('awesome-lib')
// or
// const awesomeContext = getContext('awesome-lib')
You can also create your own internal namespace with createNamespace
utility for more advanced use cases.
A generic type exists on all utilities to be set for instance/context type:
// Return type of useAwesome is Awesome | null
const { use: useAwesome } = createContext<Awesome>()
Composition of functions is possible using temporary context injection. When calling ctx.call(instance, cb)
, instance
argument will be stored in a temporary variable then cb
is called. Any function inside cb
, can then implicitly access instance by using ctx.use
(or useAwesome
)
context can be only used before first await:
To avoid leaking context, call
method synchronously sets context and unset it as soon as possible. Because of this, useAwesome
should happen before first await
call and reused if necessary.
async function setup() {
const awesome = useAwesome()
await someFunction()
// useAwesome() returns null here
}
Context conflict
error:
In your library, you should only keep one call()
running at a time (unless calling with same reference for first argument)
For instance this makes an error:
ctx.call({ test: 1 }, () => {
ctx.call({ test: 2 }, () => {
// Throws error!
})
})
MIT. Made with ๐