🤷 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.