Merge branch '16' of https://github.com/titoBouzout/js-framework-benchmark into titoBouzout-16

krausest · krausest · commit 97a86ed5e213 · 2024-10-24T19:03:41.000Z
diff --git a/frameworks/keyed/pota/index.html b/frameworks/keyed/pota/index.html
@@ -3,7 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <title>Pota</title>
-    <link href="/css/currentStyle.css" rel="stylesheet" />
+    <link
+      href="/css/currentStyle.css"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="main"></div>
diff --git a/frameworks/keyed/pota/package.json b/frameworks/keyed/pota/package.json
@@ -1,6 +1,6 @@
 {
   "name": "js-framework-benchmark-pota",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
   "main": "dist/main.js",
   "js-framework-benchmark": {
@@ -20,13 +20,28 @@
     "url": "https://github.com/krausest/js-framework-benchmark.git"
   },
   "dependencies": {
-    "pota": "^0.14.132"
+    "pota": "^0.16.156"
   },
   "devDependencies": {
     "@babel/core": "7.25.2",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-terser": "0.4.4",
     "rollup": "4.21.2"
+  },
+  "prettier": {
+    "printWidth": 70,
+    "useTabs": true,
+    "semi": false,
+    "singleQuote": true,
+    "quoteProps": "as-needed",
+    "jsxSingleQuote": false,
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "bracketSameLine": false,
+    "arrowParens": "avoid",
+    "proseWrap": "never",
+    "endOfLine": "lf",
+    "singleAttributePerLine": true
   }
 }
diff --git a/frameworks/keyed/pota/rollup.config.js b/frameworks/keyed/pota/rollup.config.js
@@ -1,25 +1,25 @@
-import { babel } from "@rollup/plugin-babel";
-import { nodeResolve } from "@rollup/plugin-node-resolve";
-import terser from "@rollup/plugin-terser";
+import { babel } from '@rollup/plugin-babel'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import terser from '@rollup/plugin-terser'
 
-const isProduction = process.env.BUILD === "production";
+const isProduction = process.env.BUILD === 'production'
 
 /** @type {import('rollup').RollupOptions} */
 export default {
-  input: "./src/main.jsx",
+  input: './src/main.jsx',
   plugins: [
     nodeResolve(),
     babel({
-      babelHelpers: "bundled",
-      presets: [["pota/babel-preset"]],
+      babelHelpers: 'bundled',
+      presets: [['pota/babel-preset']],
     }),
     isProduction && terser(),
   ],
   output: [
     {
-      format: "es",
+      format: 'es',
       sourcemap: false,
-      file: "./dist/main.js",
+      file: './dist/main.js',
     },
   ],
-};
+}
diff --git a/frameworks/keyed/pota/src/main.jsx b/frameworks/keyed/pota/src/main.jsx
@@ -1,4 +1,4 @@
-import { render, signal, batch } from 'pota'
+import { render, signal } from 'pota'
 import { For } from 'pota/web'
 
 import { useSelector } from 'pota/plugin/useSelector'
@@ -68,9 +68,7 @@ function buildData(count) {
   let data = new Array(count)
   for (let i = 0; i < count; i++) {
     const [label, setLabel, updateLabel] = signal(
-      `${adjectives[_random(adjectives.length)]} ${
-        colours[_random(colours.length)]
-      } ${nouns[_random(nouns.length)]}`,
+      `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`,
     )
     data[i] = {
       id: idCounter++,
@@ -97,16 +95,19 @@ const Button = ({ id, text, fn }) => (
 const App = () => {
   const [data, setData, updateData] = signal([]),
     [selected, setSelected] = signal(null),
-    run = () => setData(buildData(1000)),
+    run = () => {
+      setData(buildData(1000))
+    },
     runLots = () => {
       setData(buildData(10000))
     },
-    add = () => updateData(d => [...d, ...buildData(1000)]),
-    update = () =>
-      batch(() => {
-        for (let i = 0, d = data(), len = d.length; i < len; i += 10)
-          d[i].updateLabel(l => l + ' !!!')
-      }),
+    add = () => {
+      updateData(d => [...d, ...buildData(1000)])
+    },
+    update = () => {
+      for (let i = 0, d = data(), len = d.length; i < len; i += 10)
+        d[i].updateLabel(l => l + ' !!!')
+    },
     swapRows = () => {
       const d = data().slice()
       if (d.length > 998) {
@@ -116,13 +117,16 @@ const App = () => {
         setData(d)
       }
     },
-    clear = () => setData([]),
-    remove = id =>
+    clear = () => {
+      setData([])
+    },
+    remove = id => {
       updateData(d => {
         const idx = d.findIndex(datum => datum.id === id)
         d.splice(idx, 1)
         return [...d]
-      }),
+      })
+    },
     isSelected = useSelector(selected)
 
   return (
@@ -186,7 +190,7 @@ const App = () => {
               const { id, label } = row
 
               return (
-                <tr class:danger={isSelected(id)}>
+                <tr class={{ danger: isSelected(id) }}>
                   <td
                     class="col-md-1"
                     textContent={id}
