sajadmsNew

uce vs lit-element

A very simple comparison table between these two libraries.

	uce	lit-element
version	1.11.9	2.4.0
license	ISC (simplified MIT)	BSD-3-Clause License
language	JS w/ TS definition	TS w/ JS transpilation
size ^{_{( brotli )}}	9437b ES5 / 6811b ES2015+	8634b ES5 / 6708b ES2015+

What's SWR?

It's React Hooks for Remote Data Fetching, a hook designed to render data on demand.

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher);

async / return await explained

This is yet another explanation of why async and return await is pointless, coming from this post.

// async means that this:
const fn = async (...args) => {/* stuff */};

// is basically the equivalent of this:

Toward better libraries

I am recently re-branding my libraries as µ ^(micro), refactoring these when necessary, dropping IE < 11 support, improving the logic where possible, or providing a better, more robust, or faster, API.

In few words, on the right there is the modern version of libraries I've used for the last ~5 years in production or for side projects, and I suggest anyone having one of the earlier dependencies, to have a look at their modern, micro, counterpart.

How to read these tables

All sizes are minified, brotli compressed, and representing these two files, when possible:

	((global, _log = console.log.bind(console)) => {
	function log(id, methodName, desc) {
	_log(`TIMER #${id}: ${methodName} - ${desc}`);
	}

	global.setTimeout = (setTimeout => (callback, timeout, ...params) => {
	const id = setTimeout((...params) => {
	log(id, 'setTimeout', 'create call stack');
	callback(...params);
	log(id, 'setTimeout', 'end of call stack');

	function promiseChain(list, getPromise) {
	return list.reduce((accPromise, entry) => {
	return accPromise.then(acc => {
	return getPromise(entry).then(result => {
	return acc.concat(result);
	});
	});
	}, Promise.resolve([]));
	}

	/**
	* The shape we are building.
	*/
	interface IPoint {
	x: number;
	y: number;
	z?: number;
	}

	class Point implements IPoint {

	import React from 'react';
	import Route from 'react-router-dom/Route';
	import Link from 'react-router-dom/Link';
	import Switch from 'react-router-dom/Switch';

	const App = ({ routes, initialData }) => {
	return routes
	? <div>
	<Switch>
	{routes.map((route, index) => {

	function useState(value) {
	const {caller} = arguments.callee;
	const {arguments: a} = caller;
	const {stack} = useState;
	if (!stack.has(caller))
	stack.set(caller, {a, i: 0, s: []});
	const state = stack.get(caller);
	state.a = a;
	const {i, s} = state;
	if (i === s.length) {

	const {isArray} = Array;

	const sync = async values => {
	for (let {length} = values, i = 0; i < length; i++) {
	const value = await values[i];
	values[i] = isArray(value) ? await sync(value) : value;
	}
	return values;
	};