Jason Miller developit

About

Highly Experimental

If you are using this already, consider changes soon due the discussion around current ESX proposal.

Feel free to keep an eye on udomsay as that will be the implementation reference for consumers.

import { hook, OptionsTypes } from './preact-options-helper.ts';

hook(OptionsTypes.RENDER, (old, vnode) => {
    let component = vnode.__c;
    if (component) {
        // do stuff with the component instance
    } else {
        console.log(vnode.props);
 }

`preact-root-fragment`: partial root rendering for Preact

This is a standalone Preact 10+ implementation of the deprecated replaceNode parameter from Preact 10.

It provides a way to render or hydrate a Preact tree using a subset of the children within the parent element passed to render():

<body>
  <div id="root">  ⬅ we pass this to render() as the parent DOM element...

Based on Evan You's comparison which included Svelte and Vue. https://github.com/yyx990803/vue-svelte-size-analysis

For Preact, React, and Solid I took their official TodoMVC and ran them through Vite (2.3.6) to get vendor. For the components I grabbed the unminified source, ran it through Terser Repl, removed the imports, and ran through Brotli.

I wanted to use hooks for React and Preact since those are much smaller but all the official demos use classes. Adding Hooks adds library weight to Preact but it is worth it for this comparison(Preact with classes was 1.60kb and 3.81kb). Honestly I couldn't find a good hooks implementation for React/Preact that was small so I made one myself based on Solid.

	Preact	React	Solid	Svelte	Vue
component size (brotli)	1.21kb	1.23kb	1.26kb	1.88kb	1.10kb

	import { options } from "preact";
	import { Signal } from "@preact/signals";

	// Add `bind:value` to JSX types
	declare global {
	namespace preact.createElement.JSX {
	interface HTMLAttributes {
	"bind:value"?: Signal<string \| string[] \| number \| undefined>;
	}
	}

	import { useSignal, signal, effect } from '@preact/signals';
	import { useLayoutEffect, useMemo, useRef } from 'preact/hooks';

	/** @template T @typedef {T extends (infer U)[] ? U : never} Items */

	/** @param {{ v, k?, f }} props */
	const Item = ({ v, k, f }) => f(v, k);

	/**
	* Like signal.value.map(fn), but doesn't re-render.

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>bare-bones exhaust() vs ternary #jsbench #jsperf #jsbench #jsperf</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>exhaust() vs ternary #jsbench #jsperf</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>

	/*
	* With [email protected], Effect-A is triggered, then Effect-B is triggered. (expected)
	* With [email protected], Effect-B is triggered, then Effect-A is triggered.
	*
	* `useLayoutEffect` is more appropriate for Effect-A, maybe.
	*
	* BTW, behaviours will be same if removing React.memo call (line.39)
	*/

	const EditorWrapper_: React.VFC<{

Jason Miller developit

About

Highly Experimental

preact-root-fragment: partial root rendering for Preact

`preact-root-fragment`: partial root rendering for Preact