Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

unctx

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

unctx

Composition-api in Vanilla js

  • 0.0.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
658K
increased by1.62%
Maintainers
1
Weekly downloads
 
Created
Source

🍦 unctx

Composition-api in Vanilla js

npm version npm downloads package phobia bundle phobia codecov

What is it?

Vue.js introduced an amazing pattern called Composition API that allows organizing complex logic by spliting 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

Composition of functions is possible using temporary context injection. Under the hood a temporary singleton variable is kept (per context)

To avoid issues with multiple instances of library, unctx provides a safe global namespace to access contexts with (kept in globalThis)

Important: Please use a verbose name for key to avoid conflict with other js libraries. Using npm package name is recommended.

import { useContext } from 'unctx'

const { use: useAwesome, call } = useContext('awesome-lib')

You can also create your own internal namespace with createNamespace utility for more advanced usecases.

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

Pitfalls

context can be only used before first await:

To avoid leaking context, call method synchronously sets context and unsets 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 💖

FAQs

Package last updated on 30 Mar 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc