View 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'} | |
} |
View 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; }; |
View 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", |
View 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 | |
); | |
View 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, |
View 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, |
View 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); |
View 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> |
View 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> |
OlderNewer