
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
wc-context
Advanced tools
A comprehensive context implementation for web components
✓ Small and fast. No Internet Explorer support
✓ Flexible ways to define context providers and consumers
✓ Ability to provide or consume one or more contexts per element
✓ Context can be provided or consumed by any HTML element
✓ Context can be identified by string or unique identifier
✓ Works with shadow dom and slotted content (handles timing issues)
✓ Easy to implement unit tests. Most of the time, same as components without context
✓ Builtin integration with LitElement
✓ Builtin ContextProvider (Reactive Controller) with primitives for lazy loading
✓ Builtin context-provider and context-consumer elements
Context can be identified by string or an unique identifier returned by a call to createContext
import { createContext } from 'wc-context'
const themeContext = createContext('theme') // or just a string like 'theme'
To define how a context is provided or consumed, use one of the methods described below. It is possible to mix different methods. For example, a context provided using Lit integration can be consumed by a dedicated custom element and vice versa.
The easiest way to use wc-context
is with the Lit integration exported in the lit namespace (wc-context/lit
). It provides a withContext
class mixin that hooks into the property reactivity system allowing to define context using the property declaration. The context is automatically propagated when the property is updated.
To provide a context add providedContext
to the property declaration
import { withContext } from 'wc-context/lit'
import { LitElement } from 'lit'
class Provider extends withContext(LitElement) {
static properties = {
value: { type: String, providedContext: 'theme' },
activeTitle: { type: String, providedContext: 'title' },
}
toggleTheme() {
this.value = 'newtheme'
}
toggleTitle() {
this.activeTitle = 'New title'
}
}
To consume a context add context
to the property declaration
import { withContext } from 'wc-context/lit'
import { LitElement, html } from 'lit'
class Consumer extends withContext(LitElement) {
static properties = {
theme: { type: String, context: 'theme' },
titleProp: { type: String, context: 'title' },
}
render() {
return html`<div>Theme is ${this.theme}, title is ${this.titleProp}</div>`
}
}
The withContext
class mixin exported in the root namespace, implements an API similar to DOM observedAttributes
/attributeChangedCallback
.
Contexts are defined in an custom element through static providedContexts
field where the key is the context name and value holds a configuration object. The configuration can have a value
property defining the default context value or a property
one defining from what component property the context will retrieve its value.
This mixin can be used in any web component including the created with Lit or other libraries
import { withContext } from 'wc-context'
class Provider extends withContext(HTMLElement) {
static providedContexts = {
theme: { value: 'blue' },
title: 'activeTitle', // shorthand for { property: 'activeTitle' }
}
get activeTitle() {
return this._activeTitle
}
set activeTitle(value) {
this._activeTitle = value
this.updateContext('title')
}
toggleTheme() {
this.updateContext('theme', 'newtheme')
}
toggleTitle() {
this.activeTitle = 'New title'
}
}
import { withContext } from 'wc-context'
class Consumer extends withContext(HTMLElement) {
static observedContexts = ['theme', ['title', 'titleProp']]
contextChangedCallback(name, oldValue, value) {
console.log(`theme changed from "${oldValue}" to "${value}"`)
// updates el accordingly
}
connectedCallback() {
super.connectedCallback()
this.innerHTML = `<div>Theme is ${this.theme}, title is ${this.titleProp}</div>`
}
}
The context-provider
and context-consumer
custom elements allows to provide and consume contexts declaratively.
In both elements, the context
attribute / property defines the context. Setting the value
property of context-provider
will change the context value propagating to context-consumer
value
property (or any other context consumer)
An context-update
event is triggered on context-consumer
when context value changes
import 'wc-context/context-provider.js'
import 'wc-context/context-consumer.js'
document.body.innerHTML = `
<context-provider context="theme" value="light">
<div>
<context-consumer context="theme"></context-consumer>
</div>
</context-provider>`
const provider = document.querySelector('context-provider')
const consumer = document.querySelector('context-consumer')
consumer.addEventListener('context-update', ({ context, value }) => {
console.log(`Context ${context}:${value}`)
})
provider.value = 'dark'
The low level functions are exported in wc-context/core
and can be used to handle specific cases or create a new interface / integration.
For example, is possible to provide a context in body element to be consumed anywhere in the page.
import { registerContext, updateContext } from 'wc-context/core'
registerContext(document.body, 'theme', 'light')
document.querySelector('#theme-toggle-button').addEventListener('click', () => {
updateContext(document.body, 'theme', 'dark')
})
MIT Copyright © 2022 Luiz Américo Pereira Câmara
FAQs
Context for HTML custom elements / web components
The npm package wc-context receives a total of 1,272 weekly downloads. As such, wc-context popularity was classified as popular.
We found that wc-context demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.