tdash – a vanilla JS translation solution using WebComponents/CustomElements

image

So recently rather than my usual Angular/React I have been toying with pure JS, especially newer APIs for Web Components and CustomElements.

Kind of blown away at how “reactive” and powerful plain, vanilla JS now a days. Anyhow, to use a few newer APIs I decided to make a nifty little translation library.

The goals for it are be as HTML “native” as possible. This means trying to use tagging for translation and limit required JS- luckily CustomElements works great for this use case.

In the end we get something you can use to translate and switch language just by wrapping ` <t-></t->` around a key or content.

It also utilizes the HTML element’s lang attribute as the single-source-of-truth on what language it should be displaying.

SEO is still ~. This should be good on Google and… maybe ASK? But BING is outtie.

All in all it is small and simple but fully functional, and was great fun building. I’d love feedback because I now am attached to this little tyke I birthed.

Author: Shantun Parmar

Comments are closed.