… and stop worrying about the bomb.

Why does everyone keep talking about contexts … ?

A bit of … well, context 🤭

Note: skip this section if you wanna dive straight away.

React contexts is a very cool feature, and extremely practical to use with the hooks API. You’ve surely met some, and probably recognize them right way.

Today I’d like to share what I learned when creating my own React contexts: what I consider to be a good context and how to write one.

There’s another exploration I’d like to share later that won’t be in this post: how and when to split a context in 2 or more.

Let’s dive


Heard about export map ? It’s quite powerful !

TL;DR

The documentation for the exports package.json field is here, it comes from this proposal. I won’t cover everything, so check out the proposal if you need any additional information.
Plus I did not cover the mirror imports field that is very interesting in the ESModule world.

Seriously, how ?!

“Export” what ?

The exports field (or “export map”) provides a way to expose your package modules for different environments and JavaScript flavors WHILE restricting access to its internal parts.

  • Environments like NodeJS, browser, of even node-env-like filters production/development, for instance React could (or does ?) …


🧶

Let’s face it, hooks have been wandering around for a while now. Yet it feels like I discover new stuff every day. Today, I’d like to share a new discovery because it is very far from obvious − to say the least!

So you think you master hooks … ?

Small recap: an async effect

An async effect is an effect calling a promise and setting some state based on that promise.

With an example − Fetching a user

First approach

The problem


Part 3: Events

If you come from the React world, it’s kind of the equivalent of callback props

Write a completely useless − yet experimental − component <events-demo />

The specs:

  • Emit the event 'change' using a button
  • Emit a custom event 'sayhello' using another button
  • Be able to use listeners shorthand .onchange and .onsayhello .
The component we are about to build

The template (HTML)

First, let’s start with our web component template:

<!-- index.html -->
<body>
<template id="events-demo-template">
<div>
<button id="dispatch-change">
Trigger change Event
</button>
</div>
<div>
<button id="dispatch-sayhello">
Trigger custom event "sayhello"
</button>
</div>
<style>…</style>
</template>

</body>

The component constructor

Now let’s see how we can dispatch those events using our buttons:

As always, let’s start with the boilerplate:

// events-demo.js
export…


Part 2: Using slots

If you come from the React world, slots are an approximate equivalent of render props, although they are not functions 😅

Today, we’ll write a <page-layout /> web component

The specs. The <page-layout /> component :

  • can have an aside part, piloted by an attribute
  • must have in its layout: a header, a footer, a main part, and optionally an aside part
Where to start…? Ah yes.

Step 1/4 − The skeleton

// page-layout.jsexport const PAGE_LAYOUT_TAGNAME = 'page-layout';const template = document.createElement('template);
template.innerHTML = `

`
export class HTMLPageLayoutElement extends HTMLElement { static get observedAttributes () { return []; // I don't need to observe the aside attribute since the display // is piloted by the…

Part 1: Using Attributes

First things first, MDN is our friend.

According to MDN, Web Components aims at achieving code re-usability. It consists of three main technologies − I’m completely paraphrasing here −:
- Custom Elements (see MDN tutorial)
- Shadow DOM (see MDN tutorial)
- HTML Template and Slot (see MDN tutorial)

MDN also has a repository containing a lot of examples.

Let’s begin.

Today, we will focus on using attributes. If you come from the React world, attributes can be used to pass on primitive type variables (strings, booleans, numbers, …)

Building a badge/chip component

Let’s start small and easy by building a chip component:

Thomas Juster

Front-end Developer; I‘m not sure who I am.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store