This project is designed to be a small library for adding a modal to an existing application for sharing content to a set of email addresses. It uses TypeScript, Webpack for the build pipeline, and a simplified bespoke DOM rendering and state management setup. The production bundle size is ~30KB and could be much smaller.
The modal component can be controlled via Window
with the following API:
({ container: Element, initialList: string[] }) => Editor
Name | Type | Description |
---|---|---|
container |
Element |
A container DOM Element that is the target of the modal render |
initialList |
string[] |
An array of strings containing the initial emails to render |
Object
Name | Type |
---|---|
getEmailList |
() => string[] |
setEmailList |
(emailList: string[]) => void |
subscribeToEmailList |
((pl: string[], cl: string[]) => void) => void |
The index.html
file contains an example script that runs the following:
const container = document.querySelector("#emails-editor");
const editor = EmailsEditor({ container, initialList: ["jford8820@gmail.com"] });
editor.subscribeToEmailList(function(previousList, currentList) {
console.log(`Previous List: ${previousList}. Current List: ${currentList}.`);
});
const list = editor.getEmailList();
list.push("foo@bar.com");
editor.setEmailList(list);
First run npm install
and then npm run ${command}
This is a vanilla webpack build. The results are saved in dist/emails-editor.js
This opens a connect
web server with gzip
support on port 3000
A Webpack server for development that includes Redux logging
Runs the TypeScript compiler to check static types without emitting files
Same as the above command, except that it will also watch for file changes