Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
stencil-wormhole
Advanced tools
This is a super simple and lightweight library, that helps pass props down Stencil
component trees easily. It's similar to React.Context
and stencil-state-tunnel
.
Why not just use stencil-state-tunnel
? Simply because it's not instance scoped at this time
(issue #8). In addition, this library
prefers injecting props instead of consuming them in JSX because:
There's only two concepts to learn for this library:
Context.Provider
in react
and Tunnel.Provider
in stencil-state-tunnel
.
It holds the current state of the sub-tree, and it's responsible for updating all of its children when
the state changes.Context.Consumer
in react
and Tunnel.injectProps
in stencil-state-tunnel
. It simply opens a connection to its closest ancestor universe and requests
props to be injected.This is a simple diagram on what this library achieves:
This is a simple diagram on how a multiverse works, in which a universe's nested inside another one:
Important to note, you can only nest universes if they live inside separate components.
# npm
$: npm install stencil-wormhole
# yarn
$: yarn add stencil-wormhole
# pnpm
$: pnpm install stencil-wormhole
import { h, State, Component } from '@stencil/core'
import { Universe } from 'stencil-wormhole'
@Component({
tag: 'my-parent'
})
export class MyParent {
// 1. Setup your state.
@State() state: Record<string, any> = {
message: 'apples',
data: { content: 1 },
// ...
};
componentWillLoad() {
// 2. Create the universe (it has to be called in this lifecycle method).
Universe.create(this, this.state);
}
// 3. Update your state as usual.
render() {
return (
// 4. Create the universe provider.
<Universe.Provider state={this.state}>
<my-child />
</Universe.Provider>
);
}
}
import { h, Prop, Component } from '@stencil/core'
import { openWormhole } from 'stencil-wormhole'
@Component({
tag: 'my-child'
})
export class MyChild {
// 1. Setup all props that are being injected.
@Prop() message!: string;
@Prop() data!: object;
render() {
return (
<div>{this.message}</div>
);
}
}
// 2. Open the wormhole and pass in the props to be injected.
openWormhole(MyChild, ['message', 'data']);
If you want stricter typing on the openWormhole
function then simply create a higher-order function.
import { openWormhole, WormholeConsumerConstructor } from 'stencil-wormhole'
interface SpecialProps {
apples: string
}
export const openSpecialWormhole = (
Component: WormholeConsumerConstructor,
props: (keyof SpecialProps)[]
) => openWormhole(Component, props);
FAQs
Pass props down component trees easily via wormholes.
The npm package stencil-wormhole receives a total of 3,084 weekly downloads. As such, stencil-wormhole popularity was classified as popular.
We found that stencil-wormhole 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
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.