Ryan Carniato ryansolid

## cr-react.jsx
import { register, compose } from 'component-register'
import withReact from 'component-register-react'
import React, { Component }  from 'react'

// Normal React Component
class MyComponent extends Component
  constructor(props) {
    this.state = {greeting: 'Hello'}
  }

## solid-js-framework-benchmark.jsx
import { root, useState } from 'solid-js';
import { r, selectWhen } from 'solid-js/dom';

let idCounter = 1;
const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"],
  colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"],
  nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];

function _random (max) { return Math.round(Math.random() * 1000) % max; };

## react-hooks-js-framework-benchmark.jsx
import React, { memo, useReducer, useCallback } from 'react';
import ReactDOM from 'react-dom';

function random(max) { return Math.round(Math.random() * 1000) % max; }

const A = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean",
  "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive",
  "cheap", "expensive", "fancy"];
const C = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
const N = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse",

## todos-localstate.jsx
import { createState, createEffect } from 'solid-js';
const LOCAL_STORAGE_KEY = 'todos-solid';

function createLocalState(value) {
  // load stored todos on init
  const stored = localStorage.getItem(LOCAL_STORAGE_KEY),
    [state, setState] = createState(
      stored ? JSON.parse(stored) : value
    );


## todos-create-store.js
function createTodosStore() {
  const [state, setState] = createLocalState({
    counter: 1, todos: [], showMode: 'all'
  });
  createEffect(() => {
    const completedCount = state.todos.filter(
      todo => todo.completed
    ).length;
    setState({
      completedCount,

## todos-list-item.jsx
const TodoList = ({ store, editTodo, removeTodo, toggleAll }) => {
  const [state, setState] = createState(),
    filterList = todos => {
      if (store.showMode === 'active')
        return todos.filter(todo => !todo.completed);
      else if (store.showMode === 'completed')
        return todos.filter(todo => todo.completed);
      else return todos
    },
    isEditing = todoId => state.editingTodoId === todoId,

## todos-app.jsx
const TodoApp = () => {
  const [store, {
      addTodo, toggleAll, editTodo,
      removeTodo, clearCompleted, setVisibility
    }] = createTodosStore(),
    locationHandler = () =>
      setVisibility(location.hash.slice(2) || 'all'
    );

  window.addEventListener('hashchange', locationHandler);

## todos-header-footer.jsx
const TodoHeader = ({ addTodo }) => (
  <header class='header'>
    <h1>todos</h1>
    <input
      class='new-todo'
      placeholder='What needs to be done?'
      onKeyUp={({target, keyCode}) => {
        let title;
        if (!(keyCode === ENTER_KEY
          && (title = target.value.trim()))) return;

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Native TreeWalker vs Handwritten TreeWalker</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>

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Remove All Children: removeChild vs. innerHTML vs. Range vs. innerText vs. textContent</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>
	import { register, compose } from 'component-register'
	import withReact from 'component-register-react'
	import React, { Component } from 'react'

	// Normal React Component
	class MyComponent extends Component
	constructor(props) {
	this.state = {greeting: 'Hello'}
	}
	import { root, useState } from 'solid-js';
	import { r, selectWhen } from 'solid-js/dom';

	let idCounter = 1;
	const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"],
	colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"],
	nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];

	function _random (max) { return Math.round(Math.random() * 1000) % max; };
	import React, { memo, useReducer, useCallback } from 'react';
	import ReactDOM from 'react-dom';

	function random(max) { return Math.round(Math.random() * 1000) % max; }

	const A = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean",
	"elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive",
	"cheap", "expensive", "fancy"];
	const C = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
	const N = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse",
	import { createState, createEffect } from 'solid-js';
	const LOCAL_STORAGE_KEY = 'todos-solid';

	function createLocalState(value) {
	// load stored todos on init
	const stored = localStorage.getItem(LOCAL_STORAGE_KEY),
	[state, setState] = createState(
	stored ? JSON.parse(stored) : value
	);
	function createTodosStore() {
	const [state, setState] = createLocalState({
	counter: 1, todos: [], showMode: 'all'
	});
	createEffect(() => {
	const completedCount = state.todos.filter(
	todo => todo.completed
	).length;
	setState({
	completedCount,
	const TodoList = ({ store, editTodo, removeTodo, toggleAll }) => {
	const [state, setState] = createState(),
	filterList = todos => {
	if (store.showMode === 'active')
	return todos.filter(todo => !todo.completed);
	else if (store.showMode === 'completed')
	return todos.filter(todo => todo.completed);
	else return todos
	},
	isEditing = todoId => state.editingTodoId === todoId,
	const TodoApp = () => {
	const [store, {
	addTodo, toggleAll, editTodo,
	removeTodo, clearCompleted, setVisibility
	}] = createTodosStore(),
	locationHandler = () =>
	setVisibility(location.hash.slice(2) \|\| 'all'
	);

	window.addEventListener('hashchange', locationHandler);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>Native TreeWalker vs Handwritten TreeWalker</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>