Boris Serdiuk just-boris

Web Components trade-offs

Desired state

Before we begin talking about the trade-offs, let's look at the desired state, why someone should use Web Components and what benefits it provides. This standard allows you to create framework-independent UI components. Instead of re-inventing the same concept of UI component for every framework, there could be a universal solution using Web Components standard. They will also be more simple and lightweight, as the API is already built into browsers and you do not need to load additional runtime to your web page.

Web Components are defined as custom HTML elements where you can attach your custom behavior. You do not need to learn additional proprietary framework conventions, as you can think about using Web Component same way as you would use <button> or <input>.

Now let's check how these expectations match with the real state.

File size checker

Prevents you from accidentially commenting very big assets. Make sure that you have optimized all your assets.

Installation

Add the script to your repo
Configure lint-staged

	const { join } = require("path");
	const {
	buildThemedComponents,
	} = require("@cloudscape-design/components-themeable/theming");

	/** @type import('@cloudscape-design/components-themeable/theming').Theme */
	const theme = {
	tokens: {
	fontFamilyBase: "'Helvetica Neue', Roboto, Arial, sans-serif",
	},

	import { createStateLifter } from './state-lifter'

	const { Provider, useLiftedState } = createStateLifter("all");

	export const LiftedCounter = () => (
	<Provider>
	<Filter />
	<List />
	</Provider>
	);

	import React, { useEffect, useRef } from 'react';

	// Credits to
	// https://github.com/theKashey/focus-lock/blob/33f8b4bd9675d2605b15e2e4015b77fe35fbd6d0/src/utils/tabbables.ts
	const tabbables = [
	'button:enabled',
	'select:enabled',
	'textarea:enabled',
	'input:enabled',

	function sliceItems(items, limit) {
	if (items.length <= limit + 1) {
	return { visible: items, hidden: [] };
	}
	return {
	visible: items.slice(0, limit),
	hidden: items.slice(limit)
	};
	}

	import { useCallback, useEffect, useRef } from 'react';

	/**
	* A callback that stays stable between renders even as the dependencies change.
	*
	* @see https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
	*/
	export function useStableEventHandler<T extends (...args: any[]) => any>(fn: T): T {
	const ref = useRef<T>();

	import { NestedWeakMap } from './nested-weak-map';

	const key1 = {};
	const key2 = {};
	const map = new NestedWeakMap();

	map.get([key1, key2]); // undefined
	map.getOrCreate([key1, key2], () => 'default'); // "default"
	map.get([key1, key2]); // "default"

	import path from 'path';

	function shouldApply(url) {
	return path.extname(url) === '.css';
	}

	export function getFormat(url, context, defaultGetFormat) {
	if (shouldApply(url)) {
	return {
	format: 'module',

	export const DEBOUNCE_DEFAULT_DELAY = 200;

	export default function debounce(func, delay = DEBOUNCE_DEFAULT_DELAY) {
	let timeout;

	return function(...args) {
	if (timeout) {
	clearTimeout(timeout);
	}
	timeout = setTimeout(() => {