EmailsInput - A compiled Vanilla JS component with ZERO imports

author: Gilson Cavalcanti

An experiment towards a "vanilla" web component with Typescript + webpack ie11 compatible. The challenge involved 0% imports of existing external libs. 🤯

Features & Tasks

• Clipboard pasting - pastes comma separated text as emails
• Email block should be created by pressing Enter, entering comma, or by losing focus on the input field. A Block can be deleted.
• Adjusts itself to the space available in the mount node
• Done with Typescript + Webpack (i know... not a feature, but a technical trait)
• Auto scrolling if many emails
• API with convenient methods
• Isolated component: can use multiple in the same form
• Styling with SASS
• A prop to attach a listener to the list change events onMailsListChange
• Fix - SVG fix in IE11
• Fix - IE11 event listener for adding a new email not working properly

The compiled component is a complete vanilla JS with cool features

Live Examples:

Link to the single sample

Link to the multiple component sample

API draft:

How to Use:

Put the compiled file found in /dist/emails-input.js reachable to your html file

You'll have to construct the EmailsInput object passing the "mounting node" (the HTML element you pretend to mount the component on):

    (...)
    <script src="./emails-input.js"></script>
    <script>
      var options = {
        labelHTMLContent: 'Share <strong>Board Name</strong> with others',
        inputPlaceholderText: 'add more people...',
        // subscribing to changes
        onMailsListChange: (mailsBlockList) => {
          console.log(
            'This is how i listen to changes in the gct-emails-input component...'
          );
          mailsBlockList.forEach((eB) => console.log(eB.address));
        },
      };
      var inputContainerNode = document.querySelector('#emails-input');
      var input = new EmailsInput(inputContainerNode, { ...options });
      (...)

Features overview

Copy & Pasting emails from clipboard	Email validation visual cue

Typescript OOP Inner Guts	Email validation visual cue

GLOSSARY

gct

You will stumble many times in this project with a "gct" namespace or prefix. GCT stands for "Gilson Cavalcanti Technology" a ficiticious company that is runned me, myself and i

Email Block

It's how we're calling the visual chip that represents the added email.