feat: init benchmark demo
This commit is contained in:
iandxssxx
parent
109746acef
commit
627a8b7785
|
|
@ -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>
|
||||
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
@ -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}' })],
|
||||
});
|
||||
Loading…
Reference in New Issue