Next, get a 3rd-party library for formatting string durations.

The timeago npm package accepts a date, and returns a string describing the time that has elapsed since that date in human-readable form, like "just now" or "5 minutes ago" or "3 years ago", etc..

Add the package to package.json:

  // package.json
  "dependencies": {
    ...
    "timeago.js": "^4.0.2"

Then import the format helper into your directive module:

time-ago.

Permalink to "time-ago."

...
import {format} from 'timeago.js';

...
import {format} from 'timeago.js';

Last, update the render method to use format:

    return format(time);

You should now see the string updated to say "just now". But notice that it doesn't yet update on its own.

Note that standard Directives like what we created with here have a lot more powers than we're using so far: they are stateful between renders and can access the underlying DOM they are associated with. See Custom directives for more details.

Still, if all we wanted to do was format the time when we render, we didn't need to use a directive at all; we could have just called the format function directly in the template:

// So far our directive is just equivalent to:
return html`<p>The page was rendered ${format(timeCreated)}`;

However, plain functions can't update the value they rendered after the fact -- our directive will need to periodically update the rendered string as time passes. This is where asynchronous directives come in.

In order to make a template helper that keeps the elapsed time up-to-date, the next steps will show how to use AsyncDirective to periodically re-render the elapsed time asynchronously.