DEV Community: Ivan

.ltag__user__id__171460 .follow-action-button { background-color: #093656 !important; color: #FFFFFF !important; border-color: #093656 !important; }

Paul Thompson

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

Introduction, wire/bind
Events and components
Moar about components and simple state management
Wire types and custom definitions (intents)
Custom elements with hyper
Customizing my custom elements
Testing!
Async loading, placeholder and a Typeahead with hyper
Handling routes
3rd party libraries

There are a few common problems we deal with on a routine basis, when to brush our teeth, whether 3 day old pizza sitting on the counter is still good, and how to show users that something is happening when what is happening can’t be seen. And in a world driven by data, we often want to filter that data to only see what we want. We aren’t going to be able to help you with brushing your teeth or eating habits, but we can do something about the other problems.

If you’ve been following this tutorial, you already know how powerful hyperHTML combined with custom elements can be. We’ll be able to asynchronously load data while showing placeholder information, and create a typeahead that can filter the date we receive.

So let’s build a little app that solves these problems. For this part we are going to show a list of top 10 cryptocoins and the conversion to another currency. We will be using the cryptocompare api, you can read the documentation here. You don’t need to learn the full API if you don’t want, just follow along.

This is what we are going to build:

Filter on the top right to choose the rate to show.

Table with the top 10 coins and the rate.

Button to refresh the top 10.

Let’s reuse some of our code from part 6. Recall in part 6 we made a table with some random data and a few intents. We’ll build upon this table.

Typeahead

Typeaheads are complex elements. For our current project, we’ll use a simplified typeahead. Normally we’d need a lot more code to make this element complete, but for now, a simplified version will work. Whenever the user focuses on the dropdown the list appears, you type and the list filters, click on one of the options and you get the option selected and at that moment we trigger and on change event.

Be sure to review this code carefully, as we won’t go in depth about it here.

Notes on the typeahead code:

We defined a get/set for options, to allow the user to pass options. We’re using an internal variable to store them. This helps avoid loops if we ever want to set options in our code.
We’re using Bootstrap classes for styling. dropdown-menu-right will make sure the dropdown of our typeahead is visible on the screen.
The open() and close() functions will set the state so when we next render, our typeahead will get the proper CSS class to show or hide. Remember, every time we call setState hyperHTML re-renders our element.
We’re rendering an input that will be inside our element. This is very common thing to do with custom elements — to wrap a native element within our element. By doing this, it’s as if we are extending the native element with additional features.
We don’t use (or need!) partial attributes. That’s why we need to wrap the class inside a ${}.
We map over any options we find and return a wire() for each one. Returning the wire() is important; otherwise, hyperHTML won’t be able to attach the DOM nodes.
Events let us listen for clicks on the input and open the dropdown, and clicks on the body to close it.

Before we can use the typeahead, we need to import it in index.js

// index.js
import "./Typeahead.js";

const input = document.querySelector("hyper-input");

And place the custom element in the HTML:

With the basic typeahead out of the way, it’s time to fetch the list of coins. Cryptocompare FTW. We’ll do the fetch here in index.js, and pass parts of the response to our typeahead.

const input = document.querySelector("hyper-input");

fetch(`https://min-api.cryptocompare.com/data/all/coinlist`)
 .then(b => b.json())
 .then(data => {
 input.options = data.Data;
 });

We should start options with an empty array so we don’t get undefined errors.

// typeahead.js
created() {
 this.options = [];
}

Now let’s take a look at the table.

Table

Cryptocompare has an endpoint to get a number of top coins by their total volume across all markets in the last 24 hours. We will use that one to set our table data, so let’s update index.js to do that.

fetch(`https://min-api.cryptocompare.com/data/top/totalvol?limit=10&tsym=USD`)
 .then(b => b.json())
 .then(data => {
 table.data = data.Data.map(coin => coin.CoinInfo);
 });

The table is empty. We need to update the html to target the real attributes

<hyper-table coin="USD">
 <hyper-column label="ID" attribute="Id"></hyper-column>
 <hyper-column label="Name" attribute="FullName"></hyper-column>
 <hyper-column label="Rate" attribute="data" sortable="false"></hyper-column>
</hyper-table>

We don’t really have a data attribute, but we will see why soon.

If we reload the page we see the table is empty and then all of a sudden we have the top 10 coins in the table. We should show some loading text so people know things are happening. A good place for this is inside the <tbody> of our table element.

Now to get the rate, we have to make another call to the server. Just to make it cool we are going to call once for every row in the table. In real production code you probably want to make a call once for everything instead of individual calls.

We added coin=”USD” to our table above. Since this is a value that can change, let’s put add an observed attribute called coin. When we start the app, it will start the hyper-input with this default value.

static get observedAttributes() {
 return ["coin"];
}

In our _renderCell function, let’s check if data is the attribute we are showing and then use the placeholder functionality of hyperHTML. This way we can show some loading text while fetch is loading, and afteward, the rate for the coin.

There’s a lot going on in this code. We’ve primarily encountered wires that look like this:

return wire()`<div class=${this.state.open}></div>`

However, in the above code, notice that we’re giving the wire a weak map and id: wire(item,:col${item.Id}) Hyper will use this to more efficiently use and render the wires. Also, for this wire we are passing an object, instead of HTML. Note that the “any” property is a promise that returns a wire, and the “placeholder” property is a wire. Hyper will use what is in the placeholder property until the promise in any is fulfilled. Whenever fetch is done, we are o return the rate and hyper will remove the placeholder wire and update our element with the new information. Pretty cool!

Success! We can see our table loading the coins then making 10 more requests to get the rate for each coin.

Putting it all Together

The next step is to connect the input with the table, we will do that in index.js

input.addEventListener("change", e => {
 table.coin = input.value;
 table.render();
});

Everytime our input changes, we will update the table coin with the new value and the re-render the table, which will make the rate column make new requests with the new coin and show the new data :D.

Oh no, we lose the sorting whenever we refresh the data… kind of makes sense since it’s new data. To fix that, let’s move the sorting piece outside our headerclick to its own function, and whenever we add new data we will just re-sort.

Alright! Lastly, for our table we will put a last-updated time in the footer. We have a date intent already, but for this we want to show the time also. Making a dateTime intent will help us with that

Very similar to our previous one but now we are showing the time too.

In the set data function, we are going to add a date so we have it for the footer

set data() {
 this._last = Date.now()
 ...
}

And of course the footer now looks like this

Code so far

Refresh

Since the top 10 changes rather often, let’s add a refresh button. With this button, the table can be updated without refreshing the whole page.

First, index.html, under the hyper-table add

<p class="text-center"><button class="btn btn-outline-secondary">Refresh</button></p>

Then in index.js, let’s wrap the fetch call for the table in a function called update. This way we can keep calling that every time we click the refresh button. We will also call it when we load the page so that we can get initial data to display.

And that’s it! Clicking on refresh updates the table and we can see the new timestamp in the footer.

I tried to focus more on the new parts, but if you need a more in-depth explanation of any part let me know in the comments and we can extend that part. Thanks for reading.

One last O Rly book :D

Easy apps with hyperHTML — 7, Testing

Ivan — Tue, 04 Jun 2019 16:27:08 +0000

Part 7 written by Trevor Ganus,

.ltag__user__id__60874 .follow-action-button { background-color: #353638 !important; color: #FFFFFF !important; border-color: #353638 !important; }

Ivan

standard geek

.ltag__user__id__171460 .follow-action-button { background-color: #093656 !important; color: #FFFFFF !important; border-color: #093656 !important; }

Paul Thompson

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

I’m not a big fan of having 100% code coverage, etc, etc, etc. But if we are writing components, they probably need to be tested as much as possible. We won't go super deep into testing, but we do want to show a few ways you can test your components and elements.

A small caveat before we begin: this post isn’t intended to cover everything you need to know about unit testing. Many other tutorials can teach you the basics of how to write code that tests well. Our goal is to show you how to use specific testing tools, with the understanding that you have a basic understanding of unit tests in general. With that out of the way, let’s get started!

Enter Tressa

Yup, YAAT — Yet Another Andrea Tool. Tressa is a very simple testing utility that we are going to use to test our stuff. It gives us the ability to do synchronized tests and asynchronous tests. It also comes with a basic assert function. Tressa requires consolemd, a module that lets us print using markdown to the console, which is pretty neat. Let’s see an example:

Note : we have to load tressa and consolemd with unpkg because for some reason stackblitz never finds echomd even if installed. Open the real console to see errors, the inner console from stackblitz doesn’t show them for some reason.

Let's dissect the code a bit to understand all the pieces

tressa.title Starts a “section” of tests, by default title adds (“#”) for you
tressa.end Ends the section of tests and returns the time spent on them
tressa and tressa.assert This where you put your assertions with an optional comment as a second argument. You can use either one, there is no difference between them.
tressa.log console out with markdown, useful to separate parts of your tests
tressa.async Need to wait for an async operation? Use this wrapper. It returns a promise to test those cases.

You can see that tressa makes it very easy to test our code. Hopefully, you remember our table created with only hyper.Component. If not, here’s a quick refresh:

Open the real console to see errors, the inner console from stackblitz doesn’t show them for some reason.

Components

First let’s load consolemd and tressa. Then, let’s add a test for the footer component in our table. This component doesn’t really do much, so testing should be straightforward. Open the console to see the test results. If you are doing async tests, don’t forget to call the done() callback when your test is finished.

Cool, let’s move on to the header component. For this one, let’s see if the <thead> is getting icons when we pass the sorted property

Let’s also test the clicking on an <a> tag:

And now, all the code together:

So far, our tests have been on components separated from the DOM. We instantiate the elements with the new keyword. Let’s wrap up the table testing with a test directly on the component already rendered:

We don’t need to write all the tests in this asynchronous way, but I like it since it separates sections of our tests better. Being familiar with the asynchronous tests now will help us later, when we write more complex tests.

Intents

In our component project, we also have a couple of intents — one for icons and one for dates. Let’s test those now. For now, let’s remove the component testing so it’s easier to focus on the intents.

Well… we found our first bug. If we pass “a”, which is an icon that doesn’t exist in Octicons, we get:

TypeError: Cannot read property ‘toSVG’ of undefined

Let’s fix the intent:

Sweet, our test passes with the updated code. Now let’s test the date intent:

Err… that last test shows batman! NaN/NaN/NaN, let’s fix that:

if (!isNaN(newdate.getTime()) && typeof newdate.getMonth === ‘function’)

Yay! Let’s see the result:

Custom elements

This is our table as a custom element:

Since we are already using the functions of the table, let’s rewrite those as tests. But first let’s add some utilities and then put all the tests in a single file.

Let’s see if we are actually loading a table first:

It’s there, cool! Notice we get the same result from tressa() as when we were using tressa.assert() in our previous tests. Now let’s test data:

There are a couple of things we want to look at here. First, data will make a row appear, but since it doesn’t have any real data everything will be “-”… except date… lets update the intent to fix that with:

let formatted = ‘-’,

Second, data is more real and we see that we have data in our rows and the footer is updated.

Now let’s test the column functions: add/remove/update

Add

Remove

Update

Last but not least, sorting:

Let’s see everything working together:

Coverage

We tested our code, but what if we want to see how much was tested? For this, Istanbul is our friend. We can’t run Istanbul from stackblitz (that I’m aware of), but let’s create a project in github to run it, and that will generate a coverage report.

For this kind of test we’ll need to have Node.js and npminstalled. If you’re not familiar with these tools, here is a great place to start.

First, we need to change a couple of things. Code-wise we need to remove the tests from index.js and created a file called test.js (clever right?). Then, we need to remove all the imports except intents and table. With those changes, our index.js file looks like:

We also will need to setup the test environment, since we are not going to use a browser for our tests. Instead, we are going to use basicHTML. BasicHTML is a lightweight, dumb, and simple implementation of the HTML standard” — and yes it’s a YAAT.

So our start of the test file looks like this:

We bring tressa, then basicHTML, and we set it up. We are also bringing sizzle so we can make complex queries (sizzle is the selector engine used by JQuery so it’s a powerful tool). Then we load hyperHTML, and finally our tests with index.js.

Then, we setup our fake browser by making it ready and DOMContentLoaded. We can then add our table — just like regular HTML — by using a wire. That’s it! Let’s grab our table and run the same test we wrote previously.

Now, to run all of this we need a bunch more of dev dependencies. Add this to the package.json file and npm i away

The first part is just our dependencies for the tests. We added a script for running our test — nyc is the istanbul cli. Lastly, we setup nyc so it loads babel to transpile our code, and we add a couple of handy reporters. The HTML reporter will make it so we can look at a pretty web page.

Since we don’t need the classes to be transpiled lets add a .babelrc to customize the behavior.

When testing we use Istanbul and we target firefox 52… why 52?? IDK, sounds like a good number and it was the old ESR :D.

aaaand then fire up a console terminal, navigate to the folder with your package.json, and enter the command

npm test

Hopefully you will see something like this:

Open the coverage folder and open index.html to see the report… almost 100%… mm what are we missing? Take a peek at the Table.js file:

if (ElOrObj.nodeName === "HYPER-COLUMN") {

Apparently basicHTML is case sensitive. No problem, it’s an easy fix. Let’s do:

if (ElOrObj.nodeName && ElOrObj.nodeName.toLowerCase() === "hyper-column") {

npm test again, open the report… 100%

Yay! We did it! You can clone the full project here:

pinguxx/easyapps-7-test1

Integration tests

For integration testing, I really like cypress. It’s very easy to use and powerful. It lets us create unit, end-to-end, and integration tests. Cypress also gives you the ability to see the state of your web page/app at each stage of the tests.

With integration testing, we are testing the page directly, so we need to add some things to make that happen. Time does not permit me to explain everything for this, but if you want a more detailed explanation, let me know and I can create a post detailing the process.

The tl;dr; goes like this:

Add cypress/rollup/babel and plugins to package.json
Add test/build scripts in package.json
run cypress for the first time
build (babel/bundle) index.js with all the modules used
start a local server http-server -p 8081
create a new integration test, table_spec.js is what I called mine
replicate tressa test and/or add more
profit!!

Test passed :D

For more information, check out the cypress docs. You can also clone and run the tests yourself with this project:

pinguxx/easyapps-7-test2

I’m not the best at testing, but this shows a couple of ways to test our components and elements.

As always, let us know your feedback and what else you want to see in this series. Thanks for reading!

Easy apps with hyperHTML — 6, Customizing my custom elements

Ivan — Mon, 03 Jun 2019 17:52:19 +0000

Part 6 written by Trevor Ganus,

.ltag__user__id__60874 .follow-action-button { background-color: #353638 !important; color: #FFFFFF !important; border-color: #353638 !important; }

Ivan

standard geek

.ltag__user__id__171460 .follow-action-button { background-color: #093656 !important; color: #FFFFFF !important; border-color: #093656 !important; }

Paul Thompson

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

Introduction, wire/bind
Events and components
Moar about components and simple state management
Wire types and custom definitions (intents)
Custom elements with hyper
Customizing my custom elements
Testing!
Async loading, placeholder and a Typeahead with hyper
Handling routes
3rd party libraries

Recap

In parts 1–5, we talked about the basics of hyperHTML. We also learned about an amazing feature called hyper.Component. We dove into “intents ” that let us extend hyperHTML and simplify our templates. While learning all this we created a simple table:

Finally, we learned the basics of custom elements and a nice little utility called hyperHTML-Element, which gives us some of the hyper.Component features out of the box, and so much more.

In part 6, we’re going to discover how we can convert our table from a component to a custom element. We’ll also see how easy it is to add functionality to our custom element, extending it to be even more useful. Using custom elements makes it so easy to reuse our code, a baby could do it — if the baby knew HTML, and JavaScript, of course. Also, once we have a custom element, we don’t need hyperHTML anywhere else in our app unless we want it. This makes the custom elements plug-and-play with any framework. When was the last time a React component could say that?

Columns

Let’s start thinking about the elements of the table: header, footer and body. For our case, header and footer are the important parts. We will generate the footer based on the data just like before.

Let’s start with a custom element for the columns. This element will contain the information necessary to render:

the label (for the header)
the attribute used for this column (from the data)
if it’s sortable or not
the type of data to display

Simple right? We don’t even render anything, all the heavy lifting will be in the table itself.

Table

Now let’s generate a custom element with a simple table.

Let’s first add a hyper-column to our HTML

Then, we need to update our created function to read the columns and store them in an array that we can reuse later:

(used [].slice.call instead of […this.querySelectorAll(“hyper-column”)] because of an error using stackblitz)

And lastly, let’s update our template to use the columns.

Well cool. But we are not really using data from anywhere… let’s fix that. We’ll add a data property.

We now need to update our <tbody> part of the template to show one row for each item in the data.

(if wire(column, `col${item.id}`) looks unfamiliar to you, review part 4!)

Of course, we still need to pass data to the table. The index file is where we’ll do that.

Let’s see our full code so far:

To finish off the table, we need to add the rest of the columns. Notice, this is very similar to what we’ve done in previous parts of this tutorial!

Intents

Recall intents from part 4? Let’s use intents to display icons and dates correctly. We happen to like the octicon library of icons, but you can feel free to bring your own icon set.

Then extract the rendering of the <td>’s and <th>’s for easier reading.

(Note that, for user-provided values, you should be sure to use the ‘text’ type. Otherwise, use of ‘html’ could lead to potential HTML injection issues. Normally, hyperHTML will escape HTML used in expressions ${...}).

We are using state so let’s make sure we have a defaultState set:

And again update our template

Much easier to follow :D.

State & Events

We need to be able to sort the data when a user clicks on the table header. Let’s add onclick="${this}" data-call="headerClick" to our a tags so we can do this. We will also need to add the headerClick function to handle the event.

Remember calling setState will call render(), so we don’t need to explicitly call render() here. Let’s see our table with the sorting and icons working.

Footer

Then at the bottom of the table, we will add our footer.

Nothing fancy here. Aaannddd we are done… or at least we replicated the component we had with custom elements. This is no small thing. Now, we can just use <hyper-table> with some <hyper-column> inside and you have a simple yet functional table.

Customization

Every good table should be able to add/update/remove columns, right? Glad you asked! Let’s add some functions to our table that will allow us to do just that.

First let’s add to our column element a new attribute called name. This will be used to update/remove columns. If no name is passed we’ll just use the attribute.

addColumn

We will let the developer add a column by passing a new <hyper-column>. We’ll also allow an object to be passed with the attributes needed. This will update our columns array.

removeColumn

Based on the newly added name to the column, we can easily remove columns from the table. In theory we could use index instead of name, but I wanted to show that we can do either with the elements.

updateColumn

Again using the name attribute, we can update the column details.

Let’s see how it looks:

Well, that was easy, and we enhanced our table with very useful functionality!.

Now you are a custom element/hyperHTML master :D. Or, at least you can start creating your own elements! In the next part we are going to add testing to our table element and maybe add the ability to filter the table display. Please send us your feedback to improve this tutorial.

Easy apps with hyperHTML — 5, Custom elements

Ivan — Fri, 31 May 2019 14:50:46 +0000

Part 5 written by

IvanFollow

standard geek

Paul ThompsonFollow

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

Introduction, wire/bind
Events and components
Moar about components and simple state management
Wire types and custom definitions (intents)
Custom elements with hyper
Customizing my custom elements
Testing!
Async loading, placeholder and a Typeahead with hyper
Handling routes
3rd party libraries

My very own tag

If you’ve been developing web pages or apps for any amount of time, chances are you’ve seen custom components or HTML tags, especially if you’ve worked with one of the newer JavaScript frameworks. Whatever the name, these components usually all have a similar goal: encapsulate functions and logic into re-usable chunks of code. After a lot of discussion and development by the community, we finally brought these ideas under the canopy of Web Components.

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps. — MDN

In order to achieve this, the specification addresses the following technologies:

Custom elements : A set of JavaScript APIs that lets you define the logic of the element. You can create a function like open() and then you can just call that function from the element document.querySelector(‘custom-dialog’).open().
Shadow Dom : Utilizing the shadow DOM enables you to use other HTML elements inside your custom element, even other custom elements! Whatever code is inside the custom element with shadow DOM enabled will be rendered and styled separately. This can be both a bug and a feature, depending on your use case.
HTML templates : Two tags <template> and <slot> let you write HTML inside the custom element, but they are not rendered or displayed until you activate them. <template> and <slot> can also be re-used for other things.

Not every one of these are ready to use in all browsers, and certain aspects are harder to polyfill than others, but we are getting close.

For now we will concentrate on the basics of custom elements, but at the end we’ll show you how to use the shadow DOM. We’ll also see that hyperHTML can create highly efficient templates. We’ll be able to do everything with hyperHTML that <template> can, except for native use of <slot>.

<custom-element awesome=”true”>

To get started making custom elements, we need need 3 things:

A browser that supports custom elements, or a polyfill. We recommend using document-register-element. This polyfill has been used in production for a while by projects like amp. Alternatively, Google also has a polyfill worth checking out.
A class that extends the HTMLElement object. This class will contain all the logic for our element. We can also extend from a normal HTML element.
Finally, we will need to “define” the element. This is how we’ll register our element in the browser, and give it a name.

In 2 above, we mentioned that there are two ways to extend your custom element class, either by extending HTMLElement, or a build-in HTML tag like span. When we extend HTMLElement, our custom element will be autonomous. However, extending built-ins is a bit controversial, and while the specs describe how to do it, not all browsers are on board. We will see how do both, but for our use case in this blog we are only going to extend from HTMLElement.

Enough jibber-jabber, show me the code!

(A tiny, huge thing in the index.html, since Stackblitz is automagically transpiling our code, we need to include the es5-adapter)

Lets dissect the code a bit:

First we name our class and extend HTMLElement. This will be an autonomous element. Then, we have a function called connectedCallback(). connectedCallback() will be called after the browser has appended the custom element to the document. We’ll talk more about the custom element lifecycle later on. Inside connectedCallback() we are just adding text to our custom element.

On line 9 we are defining our element name. Whatever name you choose, you must include a hyphen. In our case, to use this element in HTML we will use the tag <custom-element></custom-element>. The define function also takes a second parameter which is the class describing the element.

Internally, the browser keeps a registry of all the custom elements we define. One of the things we can do with the CustomElementRegistry is wait for the elements to be defined. However, we can do a lot of other things. So be sure to take a look at the docs.

Just for funz lets see how to extend a built-in:

Life cycle

Besides connectedCallback() there are other lifecycle hooks we can use. Let’s see what they do:

connectedCallback : called when your element is connected to the document DOM.
disconnectedCallback : called when your element is detached from the DOM. You will be able to react to that disconnection in this function.
adoptedCallback : is called when you move the element to a new page.
attributeChangedCallback : this is called whenever attributes that you are monitoring change. Not every attribute on your custom element will automatically be monitored. To pick which attributes are, you will have to add another function:

static get observedAttributes() {return ['attr1', 'attr2']; }

Let’s see these functions in action in our custom-element:

This is cool! We’re well on our way to having a powerful new element. But what about templating? With hyperHTML, we can render whatever we want inside the element and boom, custom elements with all the power of hyperHTML :D

Let’s make a few changes. Of course, we first need to load hyperHTML. Then we will bind to the current element with this.html = bind(this); We also need a render() function which will be charged with rendering the template. And finally, we need to update our attributeChangedCallback() to change new attribute values to actual properties:

Enter hyperHTML-element

There is a lot more to learn about custom elements, but fortunately the master Andrea Giammarchi created another utility that abstracts much of the custom element API. It’s called hyperHTML-element.

This is a class that you can extend instead of the HTMLElement, and it gives you a few new functions and properties.

Functions

Besides the regular observedAttributes we now also have booleanAttributes. This is where we’ll want to put the attributes that don’t need an actual value. For example, <custom-element required>. “Required” either exists or it doesn’t, so it is a great candidate for being a boolean attribute.
observedAttributes and booleanAttributes both will also define getters and setters for every attribute observed. This means we no longer need to do this[name] = newValue inside attributeChangedCallback.
created. This is a new callback that will be invoked right before connectedCallback or attributeChangedCallback
defaultState(). Whenever you use this.state, the defaultState() function returns an object that becomes, you guessed it, the default state.
setState. Updates the state object (you don’t need to define defaultState to use setState). setState includes a little bonus: it will call render() for you, so your element is automatically updated when you change its state!
render(). This function should return the HTML you want to display inside your custom element.
Event handlers. In your template, we can now pass ‘this’ to our event handlers: <div onclick=${this}></div>. If we then define an onclick function inside the element, it will get called with the proper context. You can also use data-call to call any function: data-call=onAnyEvent onclick=${this}… in this case onAnyEvent will be called when a user clicks. Even more cool, custom events are super easy: onMyCustomEvent=${this} and you define a onMyCustomEvent(e) function, done!
define(). This static method is just a helper. Instead of using customElements.define you use this one MyElement.define('my-element')
All the hyperHTML functions, bind, component and wire. The only hyper function we don’t get is define for intents, since we’re already using it to register the element. To define intents you will use HyperHTMLElement.intent(…). We looked at intents in another part 4 of this blog, so be sure to brush up on them if you need to.

Observant readers will notice some of these functions are used in hyper.Component. Hopefully you are familiar with some of them now :D

Properties

this.html. In our example above we did this.html = bind(this); in the constructor. With hyperHTML-elemet we now can use this.html directly.
state. State is an object that holds the…er…state of the element. It’s empty by default, or it will hold whatever object is returned by defaultState, if you’ve defined that function.
As mention before, every attribute in observedAttributes and booleanAttributes will have its getter and setter, so you can use this.attr and the value will reflect the attribute. For example, <my-element parent="your mom"/>, using this.parent will give you the value, “your mom.”

Sweet! Let’s update our previous element to use all of these new features:

What about the shadow DOM?… oh yeah, it’s super easy:

Check line 8 this.attachShadow({mode: ‘open’});, if you inspect the element you’ll see that the shadow DOM is there!

There is more to learn about custom elements and web components in general. In the next part we will write some custom logic and update our table from part 4 to be a custom element. And as always, feedback is welcome!

Easy apps with hyperHTML — 4, wire types and intents

Ivan — Thu, 30 May 2019 16:38:44 +0000

Part 4 written by

IvanFollow

standard geek

Paul ThompsonFollow

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

Introduction, wire/bind
Events and components
Moar about components and simple state management
Wire types and custom definitions (intents)
Custom elements with hyper
Customizing my custom elements
Testing!
Async loading, placeholder and a Typeahead with hyper
Handling routes
3rd party libraries

In previous parts of this tutorial, we’ve seen how to use components with hyperHTML. We built a simple table that could sort, but now it’s time to look at some additional features hyperHTML brings us. The feature we’ll look at next is the ability to customize wire(). With a custom wire() function, we’ll be able to transform our templates, or load parts of them asynchronously. Before we dive into this, let’s explore the standard wire() function a little more.

Built-in Types

HyperHTML wire() comes with two built-in types. Its default is html, but hyperHTML also supports svg. As we’ve seen, using the html type requires no additional work on our part. However, if we want to wire an svg node, we need to explicitly say so:

hyperHTML.wire(data, 'svg')`<rect width=${data.width} height=${data.height} />`

The second parameter passed to wire is the type. Let’s see the example running:

Recall all the way back to part 1. In our clock example, we used wire() two ways. First, we used it without a reference:

hyperHTML.wire()`…`

But then we also used it by passing an object to the function:

hyperHTML.wire(user)`…`

In that first example we mentioned that the object passed to wire() will not be updated each time it renders. This is because by passing it to wire() we are creating a a relationship between wire and the contents of the object. This relationship does more than just speed up renders, we can also re-use this object in different places, with different templates. We might then give this object an id for each place we want to use it:

hyperHTML.wire(user, ':address')`…`
hyperHTML.wire(user, ':profile')`…`
hyperHTML.wire(user, ':login')`…`

We can also specify a type alongside the id:

hyperHTML.wire(user, 'svg:avatar')

Content Values

We also talked a bit about the different content values in part 1. Let’s dive deeper into them now.

Think about template literals. Inside a template literal we use ${…} to evaluate expressions. Whatever expression you pass into the ${…} will be added to your template depending on it’s evaluated type. For example, hyperHTML is injection-safe by default since passing strings will be injected to the template as textContent.

<p>Hola ${'<script src="http://badguy.com"></script>'}</p> // whew, safe!

But you can also force it to be text. In order to do that, you have to pass an object to hyperHTML:

<p>Hola ${{text: 'Mundo'}}</p>

And yes, if you pass a node it will be appended:

<p>Hola ${node}</p>

or you can force it by passing an object, like above:

<p>Hola ${{html: '<strong>Mundo</strong>'}}</p>

You can even pass a promise! If you do pass a promise, then whenever the promise is resolved it will be resolved to any of the understood types. There is also a type, any. Any usually takes a promise, but can take any other type as well, and hyperHTML will try to match it.

See them in action:

But wait, that’s not all! You can also pass arrays! The only thing to keep in mind is the items in the array must be of the same type: strings or numbers or nodes, or even a list of promises. You’ll get unexpected results if your array is populated with different types.

We typically use promises when we don’t have data now, but are promised to have in the future. HyperHTML provides a placeholder that displays while the data is loading. Let’s see an example.

Attributes

Element attributes can be regular attributes, booleans, or events. If you’re coming to hyperHTML from another framework, you might be expecting to use partial attributes, but you don’t actually need them. There are two more attribute types we need to talk about — style and data. These attributes will help us easily build interfaces.

The style attribute can take a string like any other attribute, or you can also pass an object:

wire(ref)`<p style=${{fontSize: 32}}>${'BIG CONTENT'}</p>`;

The data attribute lets you pass raw JavaScript data to an element:

wire(ref)`<p data=${user} />`;

Let’s see them in action

Custom types

We can tap into that object functionality and create our custom render parts. And depending on the name, it will be interpreted as an attribute (if it has ‘-’), or as a new intent.

Custom intent

To define a new type, we will use hyperHTML.define() . Convenient, right? Define() takes two parameters, a string name and a callback.

define(intentName, callback)

The callback receives any interpolated data as parameters, and returns data that we’ll use in the display. The callback can return any of the known data types.

For example, let’s define an intent for dates. Whenever we receive a date, we will return a nicely formatted date. Let’s also use an asynchronous intent:

HyperHTML will first try to match on any known intents like html, text or any. If it cannot find a match, it will try with the ones it has in its registry, that is, the ones defined with hyperHTML.define(). If hyper finds it there, it will use your custom intent.

Custom attributes

As mentioned before, if you define the intent with a ‘-’ in the name, it will be treated as an attribute. This means we can add any custom attribute to any element.

Whoah. Seriously?

Yep, you bet.

In our next example, the callback will receive the node element and whatever value passed to the attribute. If you return something, it will be used as the value for the attribute. Be sure to note, that to make the custom attribute work you must use ${…} for the attribute value.

With what we now know, let’s update our table from part 3.

We’ll add an svg icon, so we know what column is currently sorted and if it’s ascending or descending. Let’s also update our data array with more accurate user information, as well as a date so we can put our date intent to good use.

We are using the Octicons icon pack. Now for the rest of the code. Be especially sure to take a look at the Header and the Table files.

Sweet! Now you know how powerful hyperHTML can be. This is pretty much everything there is to learn about the library itself, but we are going to tap into some other utilities provided by Andrea Giammarchi to add more tools to our belt. With all these tools combined, we’ll be able to create awesome and high-performing web applications.

Easy apps with hyperHTML — 3, components and state

Ivan — Wed, 29 May 2019 14:20:32 +0000

Moar about components and simple state management

Part 3 written by

.ltag__user__id__60874 .follow-action-button { background-color: #353638 !important; color: #FFFFFF !important; border-color: #353638 !important; }

Ivan

standard geek

.ltag__user__id__171460 .follow-action-button { background-color: #093656 !important; color: #FFFFFF !important; border-color: #093656 !important; }

Paul Thompson

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

Introduction, wire/bind
Events and components
Moar about components and simple state management
Wire types and custom definitions (intents)
Custom elements with hyper
Customizing my custom elements
Testing!
Async loading, placeholder and a Typeahead with hyper
Handling routes
3rd party libraries

In part 2, we used hyper Components to create a table that can be sorted. Before we add to our table, let’s review the code we previously wrote.

Table components

Did you notice there are parts of the code we can reuse? If we refactor our code, we can use parts for other tables and it will be easier to maintain those parts instead of updating the entire table for every change. These parts are great candidates for such a refactor:

The main table definition
The header (row and columns)
Body (rows and columns)
Footer… well we don’t have a footer yet but we will add one just for fun

Let’s look at how we can change these parts to be more maintainable and reusable.

Table

First, let’s create a Table.js file and move most of the code there. We won’t need to use bind() in this file, instead we’ll export our Table.

Next, let’s update index.js to import our table. This is where we’ll use the bind() function. Recall that bind() works on existing domNodes like document.body. Also note how we’re passing information to the Table: through an object in the constructor.

Header

Our Header class will extend Component as well.

Let’s first move the <thead> element of our table to render(), making it look like this:

In this template we have onclick listeners attached to our <th> tags. Since we don’t want to manage the state in this class, we are going to dispatch a custom event called sort. This custom event will have some details about the sorting like the column we are sorting on and if it is ascending or descending.

We are going to add an update function as well. By using this function, we can be sure we’re always rendering with the current data. If the data changes in the parent, our header will receive the new data. It will look like this:

Dispatch is a function provided by Component. It will create a custom event with a name based on the first parameter, and the details object based on the second parameter. This is a pretty useful function. Learn more about dispatch() in the documentation. Our onclick event handler now looks like this:

And here’s the complete Header class:

Now let’s update Table to load the header component. Import again is our friend. Then, in place of the <thead> mark-up in the render, let’s use the Header class ${Header.for(this).update(this.state)}.

Component.for its a utility that helps you create components in render(). Instead of creating the component somewhere else, you can create it right there in the function itself. Header.for(object) will then tie the header to the object passed, in this case our current table class, then call update to re-render the header with the state, this will passed on every render. We will use other ways to instantiate the modules later on. Read more in the documentation.

Lastly, we will add an event listener called onsort to the table: onsort="${this}". This function will listen to the sorting event we dispatched from the Header. We need to change the onclick function to onsort, and we’ll also simplify it a little. The information about the sort is coming in the event detail object. We can then sort the array like before and update the state of the table. Remember, we are passing this state down to the Header class.

Let’s take a look at the full code to this point:

Body

For our body component, let’s do the same thing — move the tbody from the render function of the Table to a new component called Body. Body will have its own render function; we’ll put the tbody code here:

Despite being the component that renders most of our table, this component is actually pretty compact. Let’s see the full file:

Notice the line:

this.props = props;

We’ll use this to pass data to the Body component. The information we pass will be the information shown in our Table.

Now, let’s update Table to load the Body component, using import just like before:

import { Body } from './Body';

In this case, let’s mix it up a little bit. Instead of Component.for, let’s create a new Body in the constructor. We don’t need to pass data on instantiation.

this.body = new Body();

With that, we have a table that will work correctly. It will sort, but our data is not really changing (adding or removing). But what if the data does change? We can add the update function inside Body to receive data, just like in Header.

This way we always receive the latest data from the Table. Now, we call the update() function on the Body component directly:

this.body.update(this.data)

Let’s see how it looks.

Footer

And as promised… we are going to add a little footer to our table. The footer will show the total number of records. Beside the html for the footer, there is nothing new in this class. Take a look:

We’ll update the Table component to load the Footer component. Let’s use Component.for and the update function since we always want to receive the latest data. Otherwise, our count of the items in the table will not be accurate.

Footer.for(this).update(this.data).

Aaannddd we are done! We have our simple table with simple state management: we pass data down and events up. We could have used a state management library, Redux or Flux. For our Table, we don’t really need to use anything more complex than what we currently have.

Before we move on to part 4, let’s explore a small library called ProppyJS. ProppyJS isn’t a state management library, but a library that allows us to compose properties. This is useful to compose props from various sources and use them in any component — in essence, we’re allowing ourselves a vast amount of freedom with our apps. With proppy, we could easily attach a redux store if we needed it later, when our component state gets more complex.

We created a prop factory and we use that p everywhere. It condensed our code a lot, and now the header is updating the sort directly. Let us know in the comments if you have questions about implementing ProppyJS.

We want these tutorials to be as awesome as they can be! If you have feedback, please be sure to leave it in the comments. Thanks for reading, and stay tuned for the next part where we’ll explore a powerful feature called “intents.” Intents will let us expand hyperHTML with custom definitions for our templates.

Easy apps with hyperHTML — 2, Events and components

Ivan — Tue, 28 May 2019 14:04:21 +0000

中文版

Part 2 written by

.ltag__user__id__60874 .follow-action-button { background-color: #353638 !important; color: #FFFFFF !important; border-color: #353638 !important; }

Ivan

standard geek

.ltag__user__id__171460 .follow-action-button { background-color: #093656 !important; color: #FFFFFF !important; border-color: #093656 !important; }

Paul Thompson

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

If you followed along in part 1, you now know the basics to begin working with hyperHTML. We can now dive into more complex topics. Recall the table we made in part 1:

Let’s start by enabling sorting in our column headers.

Events

First, we are going to move the render part of our previous example to a function so we can reuse it. We started with this:

We’ll change it to this:

The next thing we need to do is update our column headers to contain an <a> tag so the user knows it can be clicked. We’ll also need an event listener to capture the onclick event. For simplicity, let’s also add a data-target attribute so we know what attribute the user is trying to sort. With these pieces in place, our <thead> template will end up like this:

What is that onclickthing? HyperHTML lets us pass a function to the event and it will be called for us. Let’s create a simple sort function to see what we are getting:

The target and ‘this’ are the same in this example. Great! Now we have the anchor tag, which contains the data-target, that we will use to sort our table. Let’s update our sort function:

While that is all cool and nice, if the user clicks a second time on the header, it’s not going to reverse the sorting. This is functionality we expect our table to have, so let’s fix that and see how it all works.

If you inspect the table code, you’ll see that only the body rows are being re-painted even tough we are calling display every time. HyperHTML is smart enough to just update the parts that were changed. This illustrates how fast it is, and how cheap its render function is to use.

Components

Now that we have our table, it will be easier if we put all of our code related to it in a single place. In addition to cleaning up our code, we’ll be able to re-use this table in other projects. We can accomplish this with a simple object:

We have a basic JavaScript object with html as our render variable before, data as our array variable and state. We moved the render() out of the display() function, and notice that we no longer have sort(). Instead, we pass ‘this’ to the onclick event:

onclick=${this}

and handle it with…

HandleEvent

This very special function is part of the EcmaScript standard. If an object has it, it will be invoked as obj.handleEvent(e). This means we can attach an event listener

el.addEventListener('click', Table)

and the click event will be passed to handleEvent function. this will be the current object (not the element!). This solves a lot of the typical problems we encounter when handling events. For more information you can read all the amazing things handleEvent does here handleEvent

In our case, we are passing the current object to handleEvent. Now, we just move all the sort functionality inside of this function. Of course we can do more things with this, but this gives us all the functionality we need for sorting the table.

As an aside, you can also use a function to construct your object, just like you’d expect.

Pretty much the same as above, the only change is that we added an Id to the table. If you don’t want to use classes, you can go with this approach and hyperHTML wont get in your way.

Classes

“That’s all nice and good but what about classes?” you may be thinking. Well, you can use them too.

And now you have a class, the only thing we changed (besides making it a class) was to call the arguments props, and pass the Id inside an object. Nothing fancy, this just makes it just easier to enhance later on.

And yes, hyperHTML also has a way to create components in a very easy way. It’s called hyper.Component. This function gives you a few extras I think you’ll find helpful:

state handling
default html attribute binded to itself
handleEvent, but even easier!
onconnected and ondisconnected functions
and more

For more information about hyper.Component you can read the docs hyper.Component

Enough selling the idea, lets see an actual demo using all the things!!

First we added Component to our import (hyper.Component that is), then we extend it with the Table. The Component class takes care of “this.html”, so we removed it.

Handling events with Component

Where is our handleEvent function?, well component already implements it so we no longer need it either! The way Component defines handleEvent is like this:

this[‘on’ + event.type](e)

This means if you are listening for a onclick event, handleEvent will receive the event type of “click” and will call this.onclick(e), and now we can have our own functions per event type onclick(e) {…}.

You can even have functions defined to handle custom events! For example, say you are emitting a custom event, “enroll”. You can attach the listener:

onenroll=${this}

and then handle it inside the component with:

onenroll(e){ /* do stuff with the enroll event! */}

Back in our Table, we now have onclick to handle the click event on the column headers and do the sort.

State

Notice we added get defaultState(){...}. This is a function to return the initial state, so if you haven’t set or updated the state, you’ll get this default object. Read more about it in the documentation

We also added the onclick (sort function), and a call to the setState function. SetState will update the state object and will call render for you auto-magically. Other frameworks will update the state asynchronously for “reasons”, but since updates are very fast in hyperHTML setState will fire right away. If you need to update several things, I would recommend constructing an object and then call setState(newobj).

We saw a lot of code this time. Hang in there, we are just beginning to scratch the surface of hyperHTML. In the next part, we will see how to use several components in an app, how to do conditional rendering and more details about components.

Easy apps with hyperHTML — 1, wire/bind

Ivan — Fri, 24 May 2019 20:25:47 +0000

hyper what? An introduction to a blazing fast, lightweight JS library.

中文版

Part 1 written by

.ltag__user__id__60874 .follow-action-button { background-color: #353638 !important; color: #FFFFFF !important; border-color: #353638 !important; }

Ivan

standard geek

.ltag__user__id__171460 .follow-action-button { background-color: #093656 !important; color: #FFFFFF !important; border-color: #093656 !important; }

Paul Thompson

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