@vonage/vvd-core
Advanced tools
Vivid content may be consumed on different levels.
One may consume a single component, like vwc-button, vwc-dialog etc.
Another use might be to init a common context via vvd-context service to style a common HTML native semantics like H1, p etc.
Any of those involves internal mechanics initialization: fetching fonts for typography, initializing schemes for a theming / scheme management etc. We call those vivid core.
There is a lifecycle here. We've designed Vivid lifecycle to be self-contained, agnostic to other contexts and to not interfere nor require alignment to the existing application lifecycle or any other framework in place.
The chart below represents a general runtime initialization flow, while separating the system into the consumer-visible realm and the underlying platform.
Consumer realm's items are to be consumed by the hosting applications directly (API / imports etc). Below the line are the core parts of our system which are transparent to the consumer in vast majority of cases.
vivid core initialization may go 2 main paths:
In order to allow ourselves and consuming applications to run code after initialization is done, vivid core exposes a settled Promise. This Promise will resolve once all the core services are done and ready.
Important: in case of manual initialization,
settledwill be immediately rejected.
import vvdCore from '@vonage/vvd-core.js';
...
vvdCore.settled.then(() => {
// do whatever after the init, eg remove the loading "curtain"
});
Most obvious use of the settled is to remove the loading veil, which could be put over the site in order to prevent FOUC (flash of unstyled content).
If consuming application took no special action, the first use of the Vivid's component/s will auto initialize the vivid core.
All the vivid core services auto-initialize to default values if not specified otherwise.
In order to help Vivid to initialize itself to some specific state, consuming application should use data-vvd-context attribute on html element.
The below example will auto-initialize vivid core with the dark theme.
<html data-vvd-context="theme:dark">
...
Important: the attribute is being examined at the moment of initialization ONLY, so it should be in place BEFORE the initialization performed. We suggest using this feature as a purely static setup OOTB.
Advanced consumer might like to manage the visual application state (we mean Vivid's part, eg theming) as per user setting.
This case would involve an async work to be done client side, eg fetching personalized settings from the server or from a local storage like IndexedDB.
Init with none keyword designed exactly for that. It will prevent auto init of the vivid core. It can be done in the following manner:
Set the data-vvd-context to none in HTML:
<html data-vvd-context="none">
...
Use the vivid core API to set configuration dynamically:
import vvdCore from '@vonage/vvd-core.js';
vividCore
.set({
scheme: 'dark'
})
.then(() => {
// do whatever after applying configuration
});
Pay attention: set API is not limited to the init use case only, it may be used for any runtime (re-)configuration of the Vivid overlay.
Reminder:
settledPromise of the vivid core is immediately rejected when none initialization flavor is used.
2.25.10 (2022-03-07)
FAQs
> TODO: description
We found that @vonage/vvd-core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 51 open source maintainers 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
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.