Merge branch 'master' of https://github.com/Thisen/js-framework-benchmark

Author: krausest

frameworks/keyed/jotai/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "browsers": ["last 1 chrome versions"]
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ]
+}

frameworks/keyed/jotai/package-lock.json

@@ -7,8 +7,8 @@
     "frameworkVersionFromPackage": "react:jotai"
   },
   "scripts": {
-    "build-dev": "rollup -c -w",
-    "build-prod": "rollup -c"
+    "build-dev": "webpack --watch",
+    "build-prod": "webpack"
   },
   "keywords": [
     "react",
@@ -24,18 +24,18 @@
   "dependencies": {
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "jotai": "0.16.8"
+    "jotai": "1.0.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^17.1.0",
-    "@rollup/plugin-node-resolve": "^11.2.0",
-    "@rollup/plugin-replace": "^2.4.1",
-    "@rollup/plugin-typescript": "^8.2.0",
+    "@babel/core": "^7.14.5",
+    "@babel/preset-env": "^7.14.5",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.14.5",
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.1",
-    "rollup": "^2.40.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "tslib": "^2.1.0",
-    "typescript": "4.2.2"
+    "babel-loader": "^8.2.2",
+    "typescript": "4.2.2",
+    "webpack": "^5.39.0",
+    "webpack-cli": "^4.7.2"
   }
 }

frameworks/keyed/jotai/package.json

@@ -1,111 +1,91 @@
-import { memo, FC } from "react";
+import React, { memo, FC } from "react";
 import ReactDOM from "react-dom";
-import { atom, useAtom } from "jotai";
+import { atom, useAtom, PrimitiveAtom } from "jotai";
 import { useUpdateAtom } from "jotai/utils";
 
-import { buildData, Data } from "./utils";
+import { Data, buildDataAtoms } from "./utils";
 
-const stateAtom = atom<{ data: Data[]; selected: number }>({
-  data: [],
-  selected: 0,
-});
+const dataAtom = atom<PrimitiveAtom<Data>[]>([]);
+const selectedAtom = atom<PrimitiveAtom<Data> | null>(null);
 
-const createRowsAtom = atom(null, (_, set, amount: number) =>
-  set(stateAtom, { data: buildData(amount), selected: 0 })
-);
+const createRowsAtom = atom(null, (_, set, amount: number) => {
+  set(dataAtom, buildDataAtoms(amount));
+  set(selectedAtom, null);
+});
 
-const appendRowsAtom = atom(null, (_, set) =>
-  set(stateAtom, (state) => ({
-    data: state.data.concat(buildData(1000)),
-    selected: 0,
-  }))
-);
+const appendRowsAtom = atom(null, (_, set) => {
+  set(dataAtom, (data) => data.concat(buildDataAtoms(1000)));
+  set(selectedAtom, null);
+});
 
-const updateRowsAtom = atom(null, (_, set) =>
-  set(stateAtom, ({ data, selected }) => {
-    const newData = data.slice(0);
-    for (let i = 0; i < newData.length; i += 10) {
-      const r = newData[i];
-      newData[i] = { id: r.id, label: r.label + " !!!" };
-    }
-    return { data: newData, selected };
-  })
-);
+const updateRowsAtom = atom(null, (get, set) => {
+  const data = get(dataAtom);
+  for (let i = 0; i < data.length; i += 10) {
+    set(data[i], (r) => ({ id: r.id, label: r.label + " !!!" }));
+  }
+});
 
-const removeRowAtom = atom(null, (_, set, id: number) =>
-  set(stateAtom, ({ data, selected }) => {
-    const idx = data.findIndex((d) => d.id === id);
-    return { data: [...data.slice(0, idx), ...data.slice(idx + 1)], selected };
+const removeRowAtom = atom(null, (_, set, item: PrimitiveAtom<Data>) =>
+  set(dataAtom, (data) => {
+    const idx = data.findIndex((d) => d === item);
+    return [...data.slice(0, idx), ...data.slice(idx + 1)];
   })
 );
 
-const selectRowAtom = atom(null, (_, set, selected: number) =>
-  set(stateAtom, (state) => ({ data: state.data, selected }))
-);
+const selectRowAtom = atom(null, (_, set, selected: PrimitiveAtom<Data>) => {
+  set(selectedAtom, selected);
+});
 
-const clearStateAtom = atom(null, (_, set) =>
-  set(stateAtom, () => ({
-    data: [],
-    selected: 0,
-  }))
-);
+const clearStateAtom = atom(null, (_, set) => {
+  set(dataAtom, []);
+  set(selectedAtom, null);
+});
 
-const swapRowsAtom = atom(null, (_, set) =>
-  set(stateAtom, (state) => {
-    const { data, selected } = state;
-    return data.length > 998
-      ? {
-          data: [data[0], data[998], ...data.slice(2, 998), data[1], data[999]],
-          selected,
-        }
-      : state;
-  })
-);
+const swapRowsAtom = atom(null, (get, set) => {
+  const data = get(dataAtom);
+  if (data.length > 998) {
+    set(dataAtom, [data[0], data[998], ...data.slice(2, 998), data[1], data[999]])
+  }
+});
 
 const GlyphIcon = (
   <span className="glyphicon glyphicon-remove" aria-hidden="true"></span>
 );
 
 interface RowProps {
-  id: number;
-  label: string;
+  item: PrimitiveAtom<Data>;
   isSelected: boolean;
-  selectRow: (id: number) => void;
-  removeRow: (id: number) => void;
 }
 
-const Row = memo<RowProps>(({ id, label, isSelected, selectRow, removeRow }) => {
+const Row = memo<RowProps>(({ item, isSelected }) => {
+  const [{ id, label }] = useAtom(item);
+  const selectRow = useUpdateAtom(selectRowAtom);
+  const removeRow = useUpdateAtom(removeRowAtom);
   return (
     <tr className={isSelected ? "danger" : ""}>
       <td className="col-md-1">{id}</td>
       <td className="col-md-4">
-        <a onClick={() => selectRow(id)}>{label}</a>
+        <a onClick={() => selectRow(item)}>{label}</a>
       </td>
       <td className="col-md-1">
-        <a onClick={() => removeRow(id)}>{GlyphIcon}</a>
+        <a onClick={() => removeRow(item)}>{GlyphIcon}</a>
       </td>
       <td className="col-md-6"></td>
     </tr>
   );
 });
 
-interface RowListProp {
-  selectRow: (id: number) => void;
-  removeRow: (id: number) => void;
-}
 
-const RowList = memo<RowListProp>(({ selectRow, removeRow }) => {
-  const [{ data, selected }] = useAtom(stateAtom);
+const RowList = memo(() => {
+  const [data] = useAtom(dataAtom);
+  const [selected] = useAtom(selectedAtom);
   return (
     <>
       {data.map((item) => (
         <Row
-          key={item.id}
-          id={item.id}
-          label={item.label}
-          isSelected={selected === item.id}
-          selectRow={selectRow}
-          removeRow={removeRow}
+          key={String(item)}
+          item={item}
+          isSelected={item === selected}
         />
       ))}
     </>
@@ -137,8 +117,7 @@ const Main: FC = () => {
   const updateRows = useUpdateAtom(updateRowsAtom);
   const clearState = useUpdateAtom(clearStateAtom);
   const swapRows = useUpdateAtom(swapRowsAtom);
-  const selectRow = useUpdateAtom(selectRowAtom);
-  const removeRow = useUpdateAtom(removeRowAtom);
+  
   return (
     <div className="container">
       <div className="jumbotron">
@@ -172,7 +151,7 @@ const Main: FC = () => {
       </div>
       <table className="table table-hover table-striped test-data">
         <tbody>
-          <RowList selectRow={selectRow} removeRow={removeRow} />
+          <RowList />
         </tbody>
       </table>
       <span

frameworks/keyed/jotai/rollup.config.js

@@ -1,62 +1,12 @@
-export function random(max: number) {
+import { atom, PrimitiveAtom } from "jotai";
+
+function random(max: number) {
   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",
-  "keyboard",
-];
+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", "keyboard"];
 
 let nextId = 1;
 
@@ -65,15 +15,15 @@ export interface Data {
   label: string;
 }
 
-export function buildData(count: number): Data[] {
+export function buildDataAtoms(count: number): PrimitiveAtom<Data>[] {
   const data = new Array(count);
   for (let i = 0; i < count; i++) {
-    data[i] = {
-      id: nextId++,
-      label: `${A[random(A.length)]} ${C[random(C.length)]} ${
-        N[random(N.length)]
-      }`,
-    };
+    data[i] = atom({
+    id: nextId++,
+    label: `${A[random(A.length)]} ${C[random(C.length)]} ${
+      N[random(N.length)]
+    }`,
+    });
   }
   return data;
 }

frameworks/keyed/jotai/src/main.tsx

@@ -0,0 +1,30 @@
+const path = require("path");
+const webpack = require("webpack");
+
+module.exports = {
+  mode: "production",
+  entry: {
+    main: path.join(__dirname, "src", "main.tsx"),
+  },
+  output: {
+    path: path.join(__dirname, "dist"),
+    filename: "main.js",
+  },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js", ".jsx"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: "babel-loader",
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      "process.env": { NODE_ENV: JSON.stringify("production") },
+    }),
+  ],
+};