Best practice for enhancement(s)

[paskainos]

I’ve added clipboard.js support, and added contenteditable to certain elements. I used npm install clipboard --save (per guidance) to install clipboard.js, but I have a ‘utils.js’ file (linked in document head), residing outside the root directory, which:

1. makes certain elements editable…
2. removes ‘contentEditable’ attribute before copy…
3. copies text (html)…
4. reinstates contentEditable after copy…
5. displays alert("Copied!")

In an effort to make this available and reusable, I’m wondering where to include the utils.js file (code). Any guidance is appreciated.

[danmindru]

Hi @paskainos, that sounds quite interesting. Some sort of interactive view I reckon?

In my mind it should work like an enhancement that starts up a small server in parallel with the gulp task.
The server returns an HTML file with util.js included and loads up the email templates in some sort of view (more on why this could be a good idea below).
This way the 'legacy' build way would still work like it does and the 'interactive mode' becomes some sort of add-on. It's also a good idea to not mix things up, methinks :-)

This would allow for more enhancements later, like:

• viewing one or more templates at a time
• showing a preview of desktop, tablet & mobile side-by-side in the same view
• ...even adding the ability to generate configs back to save the edits

Does that make sense?
Implementation-wise, this server doesn't have to do much except for serving a html file and watching for template re-generation. There are a lot of solutions here:

• gulp-based (new task with browser sync for updates)
• rollup or webpack based (they'll come with their own watch/server tech)
• npm scripts with some sort of light server, like http-server

Let me know if this makes sense or if you have any other questions :-)
I can also go into detail with some of the options if you'd like.