Easy apps with hyperHTML — 10, 3rd party libraries

Part 10 written by

Ivan

standard geek

pinguxx pinguxx

Paul Thompson

lover of dogs and javascript. and coffee. and writing.

paritho

1. Introduction, wire/bind
2. Events and components
3. Moar about components and simple state management
4. Wire types and custom definitions (intents)
5. Custom elements with hyper
6. Customizing my custom elements
7. Testing!
8. Async loading, placeholder and a Typeahead with hyper
9. Handling routes
10. 3rd party libraries

Combining third-party libraries with your framework can often be challenging. Because hyperHTML is built on JavaScript standards, using it with other libraries is generally pain-free and easy. This is one of the chief beauties of hyper: it plays well with others.

In part 4 we saw how to define and use intents. In part 2, we worked with components, and in part 5 we looked at custom elements.

If you missed any of those parts, head back now and review them. We’ll build on what we learned there.

Today, we are going to use 3rd party libraries to spice up all three of these. Just load ‘n use.

Time 📅 and intents 😉

To start, we are going to use dayjs. Dayjs is a simpler and smaller alternative to moment.js. If you’re looking for a datetime library with a smaller footprint, a familiar and logical API, dayjs is a great choice. Back in part 4 we had a date format intent that was printing a date in a specific format. It looked like this:

Now lets update it to use dayjs.

import dayjs from 'dayjs';

Here’s our first attempt to use the intent:

But we now have the full power of dayjs, so why stop here? We can add formatting options to our intent. Check this out:

If you were expecting another step or two, prepare to be disappointed! That’s all there is to using dayjs inside your intents.

Emojis 😊 and Components ✔️

We’ve already covered the basics of including 3rd party libraries. To add some fun to our components, we are going to convert some text strings to emojis using the emojify library. If you’re following along at home, go ahead and import the library into a new file.

Emojify will detect things like :) and 😄 and convert it to an emoji image. See this cheat sheet for more information on what it can do.

Let’s start with a simple component using hyper.Component. This component is going to receive some text, and then onclick we are going to use emojify to parse and show emojis. The magic happens in this line

emojify.replace(this.text);

This component is very simple. We pass in text when we construct the component, and save in two places: this.text is what we will transform, and we’ll keep it around in this._original so we can revert if we need to.

That too, was easy! Nothing else to do. The full source code:

Charts 📊 and Custom Elements 🎉

Lastly, we are going to create charts with the amazing library chartist. Chartist allows us to easily create simple or advanced charts. Just give it data and options, start a new chart of the type you want, and voila! This chart element is not complicated, but it is more involved than the intent and component we made earlier. We’ll just hit the highlights of it here.

As always, first load the package. For chartist to work, we also need to load some CSS.

import "chartist/dist/chartist.css";
import Chartist from "chartist";

The only attribute we are going to observe is the type; everything else will be plain getters and setters. We’ll need a get/set for data and for options. We’ll also include a get/set for both called details to make it easy to update everything in one call.

As you can see, we are calling update on every attribute change. This update function is going to either create a chart, or if we already have one, update it. Variables are created in the created() function and updated in render() .

All we’re doing here is creating and storing a <div> in this._el, and starting a chart instance.

To use this element, we will have a custom-chart element in the page with the type.

<custom-chart type="Line"></custom-chart>
<custom-chart type="Bar"></custom-chart>

Then we can pass data and options to make it render the actual chart

Full code for the element and example of usage

What? We’re already done with this part? There’s no crazy hoops to jump through to add 3rd-party libraries to hyperHTML? There’s no magic code dance we have to do? No library-author to ping for an update/change/bugfix? Nope. HyperHTML does a fantastic job of incorporating other libraries. And why would we expect anything different — hyper is standards-based vanilla JavaScript.

Hopefully we’ve done a good job helping you see the power of combining hyperHTML with some of your favorite libraries. Let us know in the comments what amazing applications you create using hyperHTML.

This is the last part of our series on hyperHTML. We will keep writing about hyperHTML in other posts, so let us know if there are topics you want to see covered. We hope you enjoyed this journey as much as we enjoyed writing it. Thanks for reading.