1.0.3 • Published 3 years ago
wow-mum-component v1.0.3
🤷 wow-mum-component
Enhance your web site/app/whatever with the majestic powers of wow-mum-look-no-hands.
Development
Clone this repository, then run:
npm install
npm start
To build the component for production, run:
npm run build
To execute the tests, run:
npm test
Using this component on an HTML page
Step 1: import the component
Add the following script tag:
<script type="module" src="https://unpkg.com/wow-mum-component"></script>
Or install the package:
npm install wow-mum-component
Then add the following script tag:
<script type="module" src="node_modules/wow-mum-component/dist/wow-mum-component/wow-mum-component.esm.js"></script>
Step 2: create the component instance
Option 1: set the messages directly
<wow-mum-component />
<script>
(async () => {
await customElements.whenDefined('wow-mum-component');
const component = document.querySelector('wow-mum-component');
component.setMessages([
{
'logLevel': 'warn',
'message': '💾 Defragment Windows 95 C:\ drive. This might take a while...'
},
{
'delayInMS': 1000,
'logLevel': 'error',
'message': '🙈 Discovered year 2020. Aborting unnecessary Windows 95 operations...'
},
{
'delayInMS': 2000,
'message': '⚙️ Processing super-vortex decision algorithm...'
}
]);
})();
</script>
Option 2: load the messages from a JSON string
<wow-mum-component
message-data='[
{
"logLevel": "warn",
"message": "💾 Defragment Windows 95 C:\\ drive. This might take a while..."
},
{
"delayInMS": 1000,
"logLevel": "error",
"message": "🙈 Discovered year 2020. Aborting unnecessary Windows 95 operations..."
},
{
"delayInMS": 2000,
"message": "⚙️ Processing super-vortex decision algorithm..."
}
]' />
Make sure to use single quotes around the value and escape any backslashes inside.
Option 3: load the messages from a JSON file
<wow-mum-component message-data-url="messages.json" />
Make sure the URL is accessible from the domain of the hosting page.