Jason Miller developit

Note

This gist has graduated to a proper repo: preactjs/preact-root-fragment

`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():

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

Rendering Interactive HTML using Preact

It's possible to render HTML in Preact using the dangerouslySetInnerHTML prop, however doing so bypasses the Virtual DOM entirely. This may be reasonable for static HTML, but interactivity can be a little painful to graft on without VDOM.

There is another technique available that melds HTML to Virtual DOM without such limitations.

Enter `DOMParser`

The "exports" field allows defining the entry points of a package. Through the use of conditional exports loader specific entries can be defined.

It can be a string an object or an array

If package.exports is a string an import or require of your package will always resolve to that string

If package.exports is an object you can define two types of fields.

Horrible JSX Transform

import { jsx } from './jsx.js';

const out = jsx(`
  const App = props => (
    <div class="app">
      <h1>Hello {"World"}</h1>
      <ul>{['a','b','c'].map(item => <li>{item}</li>)}</ul>

	<!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<{

	import { h, hydrate } from 'preact';

	let C = 0;
	export function Root({ href, data, children }) {
	let json = data && JSON.stringify(data);
	let id = 'root:'+++C;
	return [
	h(`!--${id}--`),
	children,
	h('component-root', { href, id },

	import { options } from 'preact';

	// Fix Preact rendering when Google Translate breaks the DOM
	const FONT_AS_TEXT = {
	localName: {
	value: null
	},
	nodeType: {
	value: 3
	},

Jason Miller developit

preact-root-fragment: partial root rendering for Preact

Rendering Interactive HTML using Preact

Enter DOMParser

Horrible JSX Transform

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

Enter `DOMParser`