diff --git a/frameworks/keyed/sonnet/index.html b/frameworks/keyed/sonnet/index.html new file mode 100644 index 000000000..08acb054c --- /dev/null +++ b/frameworks/keyed/sonnet/index.html @@ -0,0 +1,13 @@ + + + + Benchmarks for SonnetJS + + + +
+ + + + + diff --git a/frameworks/keyed/sonnet/package-lock.json b/frameworks/keyed/sonnet/package-lock.json new file mode 100644 index 000000000..f02238306 --- /dev/null +++ b/frameworks/keyed/sonnet/package-lock.json @@ -0,0 +1,269 @@ +{ + "name": "js-framework-benchmark-sonnet", + "version": "0.0.1", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "basic", + "version": "0.0.1", + "dependencies": { + "@sonnetjs/core": "0.0.29" + }, + "devDependencies": { + "vite": "^5.2.6" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz", + "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.0.tgz", + "integrity": "sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@sonnetjs/core": { + "version": "0.0.29", + "resolved": "https://registry.npmjs.org/@sonnetjs/core/-/core-0.0.29.tgz", + "integrity": "sha512-SkrjZ2qH0Eyip1jyQ6byx+P4GglMnssUdxkY3vBo8nC1CDzhCZKF0C8j/exUehYgvGxJY8pfrK1zIU2jNcA3Ng==", + "dependencies": { + "@sonnetjs/shared": "*" + } + }, + "node_modules/@sonnetjs/shared": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/@sonnetjs/shared/-/shared-0.0.4.tgz", + "integrity": "sha512-GEnorhheUGpgp+MzKqPPwvuKM3N5nZ5WfjQsi3f9z+YD2T3r4Zf5yg1aYKtzU8vK7a68B+Sgs6woMIZiZjobUw==" + }, + "node_modules/@types/estree": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", + "dev": true + }, + "node_modules/esbuild": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz", + "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.20.2", + "@esbuild/android-arm": "0.20.2", + "@esbuild/android-arm64": "0.20.2", + "@esbuild/android-x64": "0.20.2", + "@esbuild/darwin-arm64": "0.20.2", + "@esbuild/darwin-x64": "0.20.2", + "@esbuild/freebsd-arm64": "0.20.2", + "@esbuild/freebsd-x64": "0.20.2", + "@esbuild/linux-arm": "0.20.2", + "@esbuild/linux-arm64": "0.20.2", + "@esbuild/linux-ia32": "0.20.2", + "@esbuild/linux-loong64": "0.20.2", + "@esbuild/linux-mips64el": "0.20.2", + "@esbuild/linux-ppc64": "0.20.2", + "@esbuild/linux-riscv64": "0.20.2", + "@esbuild/linux-s390x": "0.20.2", + "@esbuild/linux-x64": "0.20.2", + "@esbuild/netbsd-x64": "0.20.2", + "@esbuild/openbsd-x64": "0.20.2", + "@esbuild/sunos-x64": "0.20.2", + "@esbuild/win32-arm64": "0.20.2", + "@esbuild/win32-ia32": "0.20.2", + "@esbuild/win32-x64": "0.20.2" + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/nanoid": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/picocolors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", + "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", + "dev": true + }, + "node_modules/postcss": { + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.2.0" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/rollup": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz", + "integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==", + "dev": true, + "dependencies": { + "@types/estree": "1.0.5" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "@rollup/rollup-android-arm-eabi": "4.18.0", + "@rollup/rollup-android-arm64": "4.18.0", + "@rollup/rollup-darwin-arm64": "4.18.0", + "@rollup/rollup-darwin-x64": "4.18.0", + "@rollup/rollup-linux-arm-gnueabihf": "4.18.0", + "@rollup/rollup-linux-arm-musleabihf": "4.18.0", + "@rollup/rollup-linux-arm64-gnu": "4.18.0", + "@rollup/rollup-linux-arm64-musl": "4.18.0", + "@rollup/rollup-linux-powerpc64le-gnu": "4.18.0", + "@rollup/rollup-linux-riscv64-gnu": "4.18.0", + "@rollup/rollup-linux-s390x-gnu": "4.18.0", + "@rollup/rollup-linux-x64-gnu": "4.18.0", + "@rollup/rollup-linux-x64-musl": "4.18.0", + "@rollup/rollup-win32-arm64-msvc": "4.18.0", + "@rollup/rollup-win32-ia32-msvc": "4.18.0", + "@rollup/rollup-win32-x64-msvc": "4.18.0", + "fsevents": "~2.3.2" + } + }, + "node_modules/source-map-js": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/vite": { + "version": "5.2.12", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.12.tgz", + "integrity": "sha512-/gC8GxzxMK5ntBwb48pR32GGhENnjtY30G4A0jemunsBkiEZFw60s8InGpN8gkhHEkjnRK1aSAxeQgwvFhUHAA==", + "dev": true, + "dependencies": { + "esbuild": "^0.20.1", + "postcss": "^8.4.38", + "rollup": "^4.13.0" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^18.0.0 || >=20.0.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^18.0.0 || >=20.0.0", + "less": "*", + "lightningcss": "^1.21.0", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + } + } +} diff --git a/frameworks/keyed/sonnet/package.json b/frameworks/keyed/sonnet/package.json new file mode 100644 index 000000000..79d901190 --- /dev/null +++ b/frameworks/keyed/sonnet/package.json @@ -0,0 +1,33 @@ +{ + "name": "js-framework-benchmark-sonnet", + "version": "0.0.1", + "description": "SonnetJS Demo", + "private": true, + "js-framework-benchmark": { + "frameworkVersionFromPackage": "@sonnetjs/core", + "frameworkHomeURL": "https://sonnet.js.org/", + "customURL": "/dist" + }, + "scripts": { + "dev": "vite", + "build-prod": "vite build", + "preview": "vite preview" + }, + "keywords": [ + "sonnetjs", + "javascript" + ], + "author": "Talha Mujahid", + "license": "MIT", + "homepage": "sonnet.js.org", + "repository": { + "type": "git", + "url": "https://github.com/sonnetjs/sonnet.git" + }, + "devDependencies": { + "vite": "^5.2.6" + }, + "dependencies": { + "@sonnetjs/core": "0.0.29" + } +} diff --git a/frameworks/keyed/sonnet/src/App.js b/frameworks/keyed/sonnet/src/App.js new file mode 100644 index 000000000..27bb6fba7 --- /dev/null +++ b/frameworks/keyed/sonnet/src/App.js @@ -0,0 +1,262 @@ +import { $component, SonnetComponent } from '@sonnetjs/core'; + +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', +]; +const COLOURS = [ + 'red', + 'yellow', + 'blue', + 'green', + 'pink', + 'brown', + 'purple', + 'brown', + 'white', + 'black', + 'orange', +]; +const NOUNS = [ + 'table', + 'chair', + 'house', + 'bbq', + 'desk', + 'car', + 'pony', + 'cookie', + 'sandwich', + 'burger', + 'pizza', + 'mouse', + 'keyboard', +]; + +const nts = (n) => Math.round(n / 100); + +class App extends SonnetComponent { + script = () => { + this.index = 1; + this.data = []; + this.labels = null; + this.invalidLabels = true; + this.selected = null; + + this.TBODY = document.getElementsByTagName('tbody')[0]; + + this.adjectivesLength = ADJECTIVES.length; + this.coloursLength = COLOURS.length; + this.nounsLength = NOUNS.length; + + this.TBODY.onclick = (e) => { + e.stopPropagation; + if (e.target.matches('a.lbl')) { + e.preventDefault; + const element = e.target.parentNode.parentNode; + if (element === this.selected) + this.selected.className = this.selected.className ? '' : 'danger'; + else { + if (this.selected) this.selected.className = ''; + element.className = 'danger'; + this.selected = element; + } + } else if (e.target.matches('span.remove')) { + const element = e.target.parentNode.parentNode.parentNode; + const index = Array.prototype.indexOf.call(this.TBODY.children, element); + element.remove(); + this.data.splice(index, 1); + this.invalidLabels = true; + } + }; + + for (let [key, value] of Object.entries({ + run: this.run, + runlots: () => this.run(10000), + add: this.add, + update: this.update, + clear: this.clear, + swaprows: this.swaprows, + })) { + document.getElementById(key).onclick = (e) => { + e.stopPropagation(); + value(); + }; + } + } + + run = (n = 1000) => { + if (this.data.length) this.clear(); + this.add(n); + } + + add = (n = 1000) => { + const nt = nts(n); + let i, + j = 0, + r1, + r2, + r3; + + const itemTemplates = document.getElementById(`t${n}`).content; // .cloneNode(true); + if (itemTemplates.children.length < nt) { + const itemTemplate = itemTemplates.firstElementChild; + while (nt >= itemTemplates.children.length * 2) + itemTemplates.appendChild(itemTemplates.cloneNode(true)); + while (nt > itemTemplates.children.length) + itemTemplates.appendChild(itemTemplate.cloneNode(true)); + } + const ids = Array.prototype.map.call( + itemTemplates.querySelectorAll(`td:first-child`), + (i) => i.firstChild, + ); + const labels = Array.prototype.map.call( + itemTemplates.querySelectorAll(`a.lbl`), + (i) => i.firstChild, + ); + + while ((n -= nt) >= 0) { + for (i = 0; i < nt; i++, j++) { + r1 = Math.round(Math.random() * 1000) % this.adjectivesLength; + r2 = Math.round(Math.random() * 1000) % this.coloursLength; + r3 = Math.round(Math.random() * 1000) % this.nounsLength; + ids[i].nodeValue = this.index++; + this.data.push( + (labels[ + i + ].nodeValue = `${ADJECTIVES[r1]} ${COLOURS[r2]} ${NOUNS[r3]}`), + ); + } + this.TBODY.appendChild(itemTemplates.cloneNode(true)); + } + this.invalidLabels = true; + } + + update = () => { + if (this.invalidLabels) this.labels = this.TBODY.querySelectorAll('a.lbl'); + this.invalidLabels = false; + const length = this.labels.length; + let i; + for (i = 0; i < length; i += 10) + this.labels[i].firstChild.nodeValue = this.data[i] += ' !!!'; + } + + clear = () => { + this.TBODY.textContent = ''; + this.data = []; + this.invalidLabels = true; + } + + swaprows = () => { + if (this.TBODY.children.length < 999) return; + this.invalidLabels = true; + const first = this.TBODY.firstElementChild; + [this.data[1], this.data[998]] = [this.data[998], this.data[1]]; + this.TBODY.insertBefore( + this.TBODY.insertBefore(first.nextElementSibling, this.TBODY.children[998]) + .nextElementSibling, + first.nextElementSibling, + ); + } + + get = () => { + return /*html*/ ` +
+
+
+
+

Vanillajs-3-"keyed"

+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + +
+ +
+ `; + } +} + +export default $component(App); diff --git a/frameworks/keyed/sonnet/src/Main.js b/frameworks/keyed/sonnet/src/Main.js new file mode 100644 index 000000000..5a357214c --- /dev/null +++ b/frameworks/keyed/sonnet/src/Main.js @@ -0,0 +1,6 @@ +import { createApp } from '@sonnetjs/core'; +import App from './App'; + +const app = createApp(); +app.root(App); +app.mount('#main'); diff --git a/frameworks/keyed/sonnet/vite.config.js b/frameworks/keyed/sonnet/vite.config.js new file mode 100644 index 000000000..62d16fa57 --- /dev/null +++ b/frameworks/keyed/sonnet/vite.config.js @@ -0,0 +1,5 @@ +import { defineConfig } from 'vite' + +export default defineConfig({ + base:'/frameworks/keyed/sonnet/dist/', +}) diff --git a/frameworks/non-keyed/sonnet/index.html b/frameworks/non-keyed/sonnet/index.html new file mode 100644 index 000000000..08acb054c --- /dev/null +++ b/frameworks/non-keyed/sonnet/index.html @@ -0,0 +1,13 @@ + + + + Benchmarks for SonnetJS + + + +
+ + + + + diff --git a/frameworks/non-keyed/sonnet/package-lock.json b/frameworks/non-keyed/sonnet/package-lock.json new file mode 100644 index 000000000..f02238306 --- /dev/null +++ b/frameworks/non-keyed/sonnet/package-lock.json @@ -0,0 +1,269 @@ +{ + "name": "js-framework-benchmark-sonnet", + "version": "0.0.1", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "basic", + "version": "0.0.1", + "dependencies": { + "@sonnetjs/core": "0.0.29" + }, + "devDependencies": { + "vite": "^5.2.6" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz", + "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.0.tgz", + "integrity": "sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@sonnetjs/core": { + "version": "0.0.29", + "resolved": "https://registry.npmjs.org/@sonnetjs/core/-/core-0.0.29.tgz", + "integrity": "sha512-SkrjZ2qH0Eyip1jyQ6byx+P4GglMnssUdxkY3vBo8nC1CDzhCZKF0C8j/exUehYgvGxJY8pfrK1zIU2jNcA3Ng==", + "dependencies": { + "@sonnetjs/shared": "*" + } + }, + "node_modules/@sonnetjs/shared": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/@sonnetjs/shared/-/shared-0.0.4.tgz", + "integrity": "sha512-GEnorhheUGpgp+MzKqPPwvuKM3N5nZ5WfjQsi3f9z+YD2T3r4Zf5yg1aYKtzU8vK7a68B+Sgs6woMIZiZjobUw==" + }, + "node_modules/@types/estree": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", + "dev": true + }, + "node_modules/esbuild": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz", + "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.20.2", + "@esbuild/android-arm": "0.20.2", + "@esbuild/android-arm64": "0.20.2", + "@esbuild/android-x64": "0.20.2", + "@esbuild/darwin-arm64": "0.20.2", + "@esbuild/darwin-x64": "0.20.2", + "@esbuild/freebsd-arm64": "0.20.2", + "@esbuild/freebsd-x64": "0.20.2", + "@esbuild/linux-arm": "0.20.2", + "@esbuild/linux-arm64": "0.20.2", + "@esbuild/linux-ia32": "0.20.2", + "@esbuild/linux-loong64": "0.20.2", + "@esbuild/linux-mips64el": "0.20.2", + "@esbuild/linux-ppc64": "0.20.2", + "@esbuild/linux-riscv64": "0.20.2", + "@esbuild/linux-s390x": "0.20.2", + "@esbuild/linux-x64": "0.20.2", + "@esbuild/netbsd-x64": "0.20.2", + "@esbuild/openbsd-x64": "0.20.2", + "@esbuild/sunos-x64": "0.20.2", + "@esbuild/win32-arm64": "0.20.2", + "@esbuild/win32-ia32": "0.20.2", + "@esbuild/win32-x64": "0.20.2" + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/nanoid": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/picocolors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", + "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", + "dev": true + }, + "node_modules/postcss": { + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.2.0" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/rollup": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz", + "integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==", + "dev": true, + "dependencies": { + "@types/estree": "1.0.5" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "@rollup/rollup-android-arm-eabi": "4.18.0", + "@rollup/rollup-android-arm64": "4.18.0", + "@rollup/rollup-darwin-arm64": "4.18.0", + "@rollup/rollup-darwin-x64": "4.18.0", + "@rollup/rollup-linux-arm-gnueabihf": "4.18.0", + "@rollup/rollup-linux-arm-musleabihf": "4.18.0", + "@rollup/rollup-linux-arm64-gnu": "4.18.0", + "@rollup/rollup-linux-arm64-musl": "4.18.0", + "@rollup/rollup-linux-powerpc64le-gnu": "4.18.0", + "@rollup/rollup-linux-riscv64-gnu": "4.18.0", + "@rollup/rollup-linux-s390x-gnu": "4.18.0", + "@rollup/rollup-linux-x64-gnu": "4.18.0", + "@rollup/rollup-linux-x64-musl": "4.18.0", + "@rollup/rollup-win32-arm64-msvc": "4.18.0", + "@rollup/rollup-win32-ia32-msvc": "4.18.0", + "@rollup/rollup-win32-x64-msvc": "4.18.0", + "fsevents": "~2.3.2" + } + }, + "node_modules/source-map-js": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/vite": { + "version": "5.2.12", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.12.tgz", + "integrity": "sha512-/gC8GxzxMK5ntBwb48pR32GGhENnjtY30G4A0jemunsBkiEZFw60s8InGpN8gkhHEkjnRK1aSAxeQgwvFhUHAA==", + "dev": true, + "dependencies": { + "esbuild": "^0.20.1", + "postcss": "^8.4.38", + "rollup": "^4.13.0" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^18.0.0 || >=20.0.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^18.0.0 || >=20.0.0", + "less": "*", + "lightningcss": "^1.21.0", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + } + } +} diff --git a/frameworks/non-keyed/sonnet/package.json b/frameworks/non-keyed/sonnet/package.json new file mode 100644 index 000000000..79d901190 --- /dev/null +++ b/frameworks/non-keyed/sonnet/package.json @@ -0,0 +1,33 @@ +{ + "name": "js-framework-benchmark-sonnet", + "version": "0.0.1", + "description": "SonnetJS Demo", + "private": true, + "js-framework-benchmark": { + "frameworkVersionFromPackage": "@sonnetjs/core", + "frameworkHomeURL": "https://sonnet.js.org/", + "customURL": "/dist" + }, + "scripts": { + "dev": "vite", + "build-prod": "vite build", + "preview": "vite preview" + }, + "keywords": [ + "sonnetjs", + "javascript" + ], + "author": "Talha Mujahid", + "license": "MIT", + "homepage": "sonnet.js.org", + "repository": { + "type": "git", + "url": "https://github.com/sonnetjs/sonnet.git" + }, + "devDependencies": { + "vite": "^5.2.6" + }, + "dependencies": { + "@sonnetjs/core": "0.0.29" + } +} diff --git a/frameworks/non-keyed/sonnet/src/App.js b/frameworks/non-keyed/sonnet/src/App.js new file mode 100644 index 000000000..27bb6fba7 --- /dev/null +++ b/frameworks/non-keyed/sonnet/src/App.js @@ -0,0 +1,262 @@ +import { $component, SonnetComponent } from '@sonnetjs/core'; + +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', +]; +const COLOURS = [ + 'red', + 'yellow', + 'blue', + 'green', + 'pink', + 'brown', + 'purple', + 'brown', + 'white', + 'black', + 'orange', +]; +const NOUNS = [ + 'table', + 'chair', + 'house', + 'bbq', + 'desk', + 'car', + 'pony', + 'cookie', + 'sandwich', + 'burger', + 'pizza', + 'mouse', + 'keyboard', +]; + +const nts = (n) => Math.round(n / 100); + +class App extends SonnetComponent { + script = () => { + this.index = 1; + this.data = []; + this.labels = null; + this.invalidLabels = true; + this.selected = null; + + this.TBODY = document.getElementsByTagName('tbody')[0]; + + this.adjectivesLength = ADJECTIVES.length; + this.coloursLength = COLOURS.length; + this.nounsLength = NOUNS.length; + + this.TBODY.onclick = (e) => { + e.stopPropagation; + if (e.target.matches('a.lbl')) { + e.preventDefault; + const element = e.target.parentNode.parentNode; + if (element === this.selected) + this.selected.className = this.selected.className ? '' : 'danger'; + else { + if (this.selected) this.selected.className = ''; + element.className = 'danger'; + this.selected = element; + } + } else if (e.target.matches('span.remove')) { + const element = e.target.parentNode.parentNode.parentNode; + const index = Array.prototype.indexOf.call(this.TBODY.children, element); + element.remove(); + this.data.splice(index, 1); + this.invalidLabels = true; + } + }; + + for (let [key, value] of Object.entries({ + run: this.run, + runlots: () => this.run(10000), + add: this.add, + update: this.update, + clear: this.clear, + swaprows: this.swaprows, + })) { + document.getElementById(key).onclick = (e) => { + e.stopPropagation(); + value(); + }; + } + } + + run = (n = 1000) => { + if (this.data.length) this.clear(); + this.add(n); + } + + add = (n = 1000) => { + const nt = nts(n); + let i, + j = 0, + r1, + r2, + r3; + + const itemTemplates = document.getElementById(`t${n}`).content; // .cloneNode(true); + if (itemTemplates.children.length < nt) { + const itemTemplate = itemTemplates.firstElementChild; + while (nt >= itemTemplates.children.length * 2) + itemTemplates.appendChild(itemTemplates.cloneNode(true)); + while (nt > itemTemplates.children.length) + itemTemplates.appendChild(itemTemplate.cloneNode(true)); + } + const ids = Array.prototype.map.call( + itemTemplates.querySelectorAll(`td:first-child`), + (i) => i.firstChild, + ); + const labels = Array.prototype.map.call( + itemTemplates.querySelectorAll(`a.lbl`), + (i) => i.firstChild, + ); + + while ((n -= nt) >= 0) { + for (i = 0; i < nt; i++, j++) { + r1 = Math.round(Math.random() * 1000) % this.adjectivesLength; + r2 = Math.round(Math.random() * 1000) % this.coloursLength; + r3 = Math.round(Math.random() * 1000) % this.nounsLength; + ids[i].nodeValue = this.index++; + this.data.push( + (labels[ + i + ].nodeValue = `${ADJECTIVES[r1]} ${COLOURS[r2]} ${NOUNS[r3]}`), + ); + } + this.TBODY.appendChild(itemTemplates.cloneNode(true)); + } + this.invalidLabels = true; + } + + update = () => { + if (this.invalidLabels) this.labels = this.TBODY.querySelectorAll('a.lbl'); + this.invalidLabels = false; + const length = this.labels.length; + let i; + for (i = 0; i < length; i += 10) + this.labels[i].firstChild.nodeValue = this.data[i] += ' !!!'; + } + + clear = () => { + this.TBODY.textContent = ''; + this.data = []; + this.invalidLabels = true; + } + + swaprows = () => { + if (this.TBODY.children.length < 999) return; + this.invalidLabels = true; + const first = this.TBODY.firstElementChild; + [this.data[1], this.data[998]] = [this.data[998], this.data[1]]; + this.TBODY.insertBefore( + this.TBODY.insertBefore(first.nextElementSibling, this.TBODY.children[998]) + .nextElementSibling, + first.nextElementSibling, + ); + } + + get = () => { + return /*html*/ ` +
+
+
+
+

Vanillajs-3-"keyed"

+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + +
+ +
+ `; + } +} + +export default $component(App); diff --git a/frameworks/non-keyed/sonnet/src/Main.js b/frameworks/non-keyed/sonnet/src/Main.js new file mode 100644 index 000000000..5a357214c --- /dev/null +++ b/frameworks/non-keyed/sonnet/src/Main.js @@ -0,0 +1,6 @@ +import { createApp } from '@sonnetjs/core'; +import App from './App'; + +const app = createApp(); +app.root(App); +app.mount('#main'); diff --git a/frameworks/non-keyed/sonnet/vite.config.js b/frameworks/non-keyed/sonnet/vite.config.js new file mode 100644 index 000000000..bc1f990ca --- /dev/null +++ b/frameworks/non-keyed/sonnet/vite.config.js @@ -0,0 +1,5 @@ +import { defineConfig } from 'vite' + +export default defineConfig({ + base:'/frameworks/non-keyed/sonnet/dist/', +})