Skip to content

Instantly share code, notes, and snippets.

Avatar

Ryan Carniato ryansolid

2.4k followers · 26 following
View GitHub Profile
@ryansolid
ryansolid / solid-js-framework-benchmark.jsx
Created January 31, 2019 05:34
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; };
@ryansolid
ryansolid / todos-localstate.jsx
Created April 9, 2019 04:13
LocalState Hook
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
);
@ryansolid
ryansolid / todos-create-store.js
Created April 9, 2019 04:15
Todos: createTodosStore
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,
@ryansolid
ryansolid / todos-list-item.jsx
Last active August 2, 2019 06:49
Todos: List & Item
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,
@ryansolid
ryansolid / todos-app.jsx
Last active August 2, 2019 06:50
Todos: TodoApp
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);
@ryansolid
ryansolid / todos-header-footer.jsx
Last active September 26, 2019 14:24
Todos: Header and Footer
View todos-header-footer.jsx
@ryansolid
ryansolid / index.html
Last active December 14, 2019 07:46 — forked from jridgewell/index.html
Native TreeWalker vs Handwritten TreeWalker (https://jsbench.github.io/#5d907b7fc0f75d2e39c5f70a2da6df0d) #jsbench #jsperf
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>
@ryansolid
ryansolid / index.html
Created March 3, 2020 09:04 — forked from RubaXa/index.html
Remove All Children: removeChild vs. innerHTML vs. Range vs. innerText vs. textContent (http://jsbench.github.io/#b80fc169aa8c7b31c71604ac9e2a3aa6) #jsbench #jsperf
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>
@ryansolid
ryansolid / vite-solid-plugin.js
Created July 11, 2020 20:14
Example of Solid plugin for Vite
View vite-solid-plugin.js
import { join } from "path";
import { Plugin } from "vite";
import { babel } from "@rollup/plugin-babel";
import { transformFileSync } from "@babel/core";
const presets = ["solid", "@babel/preset-typescript"];
export const solidPlugin: Plugin = {
rollupInputOptions: {
plugins: [
@ryansolid
ryansolid / react-hooks-js-framework-benchmark.jsx
Created March 11, 2019 23:31
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",