ryansolid

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

developit

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 },

developit

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

MylesBorins

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.

developit

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>

developit

import { options } from 'preact';

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

developit

Preact: Progressive Hydration

Preact now supports seamless progressive hydration.

Any component can throw during hydration (or new tree creation like a route change!), and if a component somewhere higher in the tree catches that via componentDidCatch, hydration gets paused.

Re-rendering the tree (via setState, etc) simply resumes hydration where it left off.

jviide

A short-ish example of incremental & lazy alternative to Array#reduce when you have a bunch of rapidly changing values.

The basic idea is to use a normal array and push values to it, but also think of the array as a representation of a binary tree (using the scheme outlined in Wikipedia). Each tree node keeps track of the reduced value of the subtree under it, and whenever something changes (i.e. a value is pushed to the array, a value is removed etc.) the changed node and its ancestors are marked to be "dirty", i.e. needing recalculation. All the dirty nodes get refreshed lazily when the reduced value for the tree is needed.

Each single tree modification marks at most 2 * log N nodes dirty (where N is the number of nodes in the tree). Therefore calculating the reduced value takes at O(min(m log N, N)) time (where m is the number of single modifications done to the tree since the last time the reduced value was calculated), assuming the given red

littledan

Note: this document is subsumed by the module blocks proposal

Anonymous inline modules

Anonymous inline modules are syntax for the contents of a module, which can then be imported.

let inlineModule = module {
  export let y = 1;
};

mirisuzanne

Cascade Layers, a Proposal

A syntax proposal for Cascade Layers #4470. This does not include full discussion of the Cascade Layer purpose and use-cases, which can be found in the various linked issues, but attempts to answer many of the outstanding questions about how we might implement a layering feature.

Collaborators:

• Elika Etemad
• Florian Rivoal
• Miriam Suzanne
• Tab Atkins Jr.