… and stop worrying about the bomb.
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.
“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!
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
.onchangeand.onsayhello.
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
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.
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.
