juno-w / unctx

🍦 Composition-api in vanilla js

🍦 unctx

Composition-api in Vanilla js

What is it?

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.

Integration

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()
}

Using Namespaces

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.

Typescript

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>()

Under the hood

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)

Pitfalls

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!
  })
})

License

MIT. Made with 💖