Comparing version 0.0.1 to 0.0.2
@@ -5,2 +5,9 @@ # Changelog | ||
### [0.0.2](https://github.com/unjs/unctx/compare/v0.0.1...v0.0.2) (2021-03-30) | ||
### Features | ||
* simplify useContext ([4a740bc](https://github.com/unjs/unctx/commit/4a740bc9c7c6013569859018ef5d622acbb6b55a)) | ||
### 0.0.1 (2021-03-30) | ||
@@ -7,0 +14,0 @@ |
@@ -13,4 +13,5 @@ interface UseContext<T> { | ||
declare const defaultNamespace: ContextNamespace; | ||
declare const useContext: <T>(key: string) => UseContext<T>; | ||
declare const getContext: <T>(key: string) => UseContext<T>; | ||
declare const useContext: <T>(key: string) => () => T; | ||
export { ContextNamespace, UseContext, createContext, createNamespace, defaultNamespace, useContext }; | ||
export { ContextNamespace, UseContext, createContext, createNamespace, defaultNamespace, getContext, useContext }; |
@@ -29,3 +29,4 @@ 'use strict'; | ||
const defaultNamespace = _globalThis[globalKey] || (_globalThis[globalKey] = createNamespace()); | ||
const useContext = (key) => defaultNamespace.get(key); | ||
const getContext = (key) => defaultNamespace.get(key); | ||
const useContext = (key) => getContext(key).use; | ||
@@ -35,2 +36,3 @@ exports.createContext = createContext; | ||
exports.defaultNamespace = defaultNamespace; | ||
exports.getContext = getContext; | ||
exports.useContext = useContext; |
{ | ||
"name": "unctx", | ||
"version": "0.0.1", | ||
"version": "0.0.2", | ||
"description": "Composition-api in Vanilla js", | ||
@@ -5,0 +5,0 @@ "repository": "unjs/unctx", |
@@ -13,3 +13,3 @@ # 🍦 unctx | ||
[Vue.js](https://vuejs.org) introduced an amazing pattern called [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html) 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. | ||
[Vue.js](https://vuejs.org) introduced an amazing pattern called [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html) 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. | ||
@@ -53,15 +53,14 @@ ## Integration | ||
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 version of library, `unctx` provides a safe global namespace to access context by key (kept in [`globalThis`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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. | ||
To avoid issues with multiple instances of library, `unctx` provides a safe global namespace to access contexts with (kept in [`globalThis`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis)) | ||
```js | ||
import { useContext, getContext } from 'unctx' | ||
**Important:** Please use a verbose name for key to avoid conflict with other js libraries. Using npm package name is recommended. | ||
const useAwesome = useContext('awesome-lib') | ||
```js | ||
import { useContext } from 'unctx' | ||
const { use: useAwesome, call } = useContext('awesome-lib') | ||
// or | ||
// const awesomeContext = getContext('awesome-lib') | ||
``` | ||
You can also create your own internal namespace with `createNamespace` utility for more advanced usecases. | ||
You can also create your own internal namespace with `createNamespace` utility for more advanced use cases. | ||
@@ -77,2 +76,6 @@ ## Typescript | ||
## 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 | ||
@@ -82,3 +85,3 @@ | ||
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. | ||
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. | ||
@@ -85,0 +88,0 @@ ```js |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
8854
75
125