feat: init benchmark demo

This commit is contained in:
iandxssxx 2024-04-07 23:08:50 -04:00
parent 109746acef
commit 627a8b7785
4 changed files with 152 additions and 0 deletions

View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Dlight.JS</title>
<link rel="stylesheet" href="/src/App.css"/>
</head>
<body>
<div id="main"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

View File

@ -0,0 +1,25 @@
{
"name": "dev",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@babel/standalone": "^7.22.4",
"@inula/next": "workspace:*",
"@iandx/easy-css": "^0.10.14",
"babel-preset-inula-next": "workspace:*"
},
"devDependencies": {
"typescript": "^5.2.2",
"vite": "^4.4.9",
"vite-plugin-inula-next": "workspace:*"
},
"keywords": [
"dlight.js"
]
}

View File

@ -0,0 +1,102 @@
import { createSignal, createSelector, batch } from 'solid-js';
import { render } from 'solid-js/web';
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;
}
function buildData(count) {
let data = new Array(count);
for (let i = 0; i < count; i++) {
const [label, setLabel] = createSignal(`${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`);
data[i] = {
id: idCounter++,
label, setLabel
};
}
return data;
}
function Button ({ id, text, fn }) {
return (
<div class='col-sm-6 smallpad'>
<button id={ id } class='btn btn-primary btn-block' type='button' onClick={ fn }>{ text }</button>
</div>
);
}
function App () {
let data = [];
let selected = null;
function run() {
data = buildData(1000);
}
function runLots() {
data = buildData(10000);
}
function add() {
data.push(...buildData(1000));
}
function update() {
for (let i = 0; i < data.length; i += 10) {
data[i].label += ' !!!';
}
}
function swapRows() {
if (data.length > 998) {
[data[1], data[998]] = [data[998], data[1]];
}
}
function clear() {
data = [];
}
function remove(id) {
data = data.filter(d => d.id !== id);
}
function select(id) {
selected = id;
}
return (
<div class='container'>
<div class='jumbotron'><div class='row'>
<div class='col-md-6'><h1>SolidJS Keyed</h1></div>
<div class='col-md-6'><div class='row'>
<Button id='run' text='Create 1,000 rows' fn={ run } />
<Button id='runlots' text='Create 10,000 rows' fn={ runLots } />
<Button id='add' text='Append 1,000 rows' fn={ add } />
<Button id='update' text='Update every 10th row' fn={ update } />
<Button id='clear' text='Clear' fn={ clear } />
<Button id='swaprows' text='Swap Rows' fn={ swapRows } />
</div></div>
</div></div>
<table class='table table-hover table-striped test-data'><tbody>
<for array={ data } item={ { id, label } } key={ id }>
<tr class={ selected === id ? 'danger': '' }>
<td class='col-md-1' textContent={ id } />
<td class='col-md-4'><a onClick={select.bind(this, id)} textContent={ label } /></td>
<td class='col-md-1'><a onClick={remove.bind(this, id)}><span class='glyphicon glyphicon-remove' aria-hidden="true" /></a></td>
<td class='col-md-6'/>
</tr>
</for>
{/*for const { id, label } of data*/}
<for array={ data } item={ { id, label } } key={ id }>
<tr class={ selected === id ? 'danger': '' }>
<td class='col-md-1' textContent={ id } />
<td class='col-md-4'><a onClick={select.bind(this, id)} textContent={ label } /></td>
<td class='col-md-1'><a onClick={remove.bind(this, id)}><span class='glyphicon glyphicon-remove' aria-hidden="true" /></a></td>
<td class='col-md-6'/>
</tr>
</for>
</tbody></table>
<span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
</div>
);
}
render('main', App);

View File

@ -0,0 +1,13 @@
import { defineConfig } from 'vite';
import inula from 'vite-plugin-inula-next';
export default defineConfig({
server: {
port: 4320,
},
base: '',
optimizeDeps: {
disabled: true,
},
plugins: [inula({ files: '**/*.{tsx,jsx}' })],
});