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

ryanflorence

import crypto from "crypto";
import { renderToStaticMarkup } from "react-dom/server";
import createMailgun from "mailgun-js";
import type { ActionFunction, LoaderFunction, Session } from "remix";
import { createCookieSessionStorage, json, redirect } from "remix";

/*******************************************************************************
 * Before we can do anything, we need to make sure the environment has
 * everything we need. If anything is missing, we just prevent the app from
 * starting up.

icanzilb

extension Result where Failure == Error {
  init(_ task: @escaping () async throws -> Success) async {
    self = await withCheckedContinuation { [task] continuation in
      Task {
        do {
          continuation.resume(returning: .success(try await task()))
        } catch {
          continuation.resume(returning: .failure(error))
        }
      }

donnywals

import UIKit
import SwiftUI

// Hacky workaround, use at your own risk and all that
struct BottomSheetPresenter<Content>: UIViewRepresentable where Content: View{
    let label: String
    let content: Content
    let detents: [UISheetPresentationController.Detent]
    
    init(_ label: String, detents: [UISheetPresentationController.Detent], @ViewBuilder content: () -> Content) {

edubart

##[[
cflags '-I/usr/include/tensorflow'
linklib 'tensorflow'
cinclude '<tensorflow/c/c_api.h>'
]]
global TF_AttrType: type <cimport, nodecl, using> = @enum(cint){
  TF_ATTR_STRING = 0,
  TF_ATTR_INT = 1,
  TF_ATTR_FLOAT = 2,
  TF_ATTR_BOOL = 3,

levelsio

<?

	//
	// AUTO KEYWORD-BASED FOLLOWER CURATION BOT (by @levelsio)
	//
	// File: twitterFollowerCuratorBot.php
	//
	// Created: May 2021
	// License: MIT
	//

NSExceptional

import Cocoa
import Foundation

class Person {
    var age: Int
    var name: String
    
    init(age: Int, name: String) {
        self.age = age
        self.name = name

ryanflorence

import ReactDOMServer from "react-dom/server";
import type { EntryContext } from "@remix-run/core";
import Remix from "@remix-run/react/server";
import { renderToString } from "react-dom/server";
import { ServerStyleSheet } from "styled-components";

import StylesContext from "./stylesContext";

export default function handleRequest(
  request: Request,

ben-rogerson

{
  // Snippits that make working with Twin a little easier
  // https://github.com/ben-rogerson/twin.macro
  "Add react import": {
    "scope": "javascript,typescript,typescriptreact",
    "prefix": "react",
    "body": "import React from 'react'",
    "description": "Add react import"
  },
  "Add twin imports": {

davidsteppenbeck

import SwiftUI

enum PreviewProviderMode: CaseIterable {
    
    /// Use for a light appearance preview.
    case lightMode
    
    /// Use for a dark appearance preview.
    case darkMode