Merge remote-tracking branch 'upstream/master'

Author: lxsmnsyc

Chrome_Results.ods

@@ -22,9 +22,9 @@
     "url": "https://github.com/krausest/js-framework-benchmark.git"
   },
   "dependencies": {
+    "jotai": "1.3.3",
     "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "jotai": "1.0.0"
+    "react-dom": "17.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.14.5",

frameworks/keyed/jotai/package-lock.json

@@ -15,7 +15,6 @@ const createRowsAtom = atom(null, (_, set, amount: number) => {
 
 const appendRowsAtom = atom(null, (_, set) => {
   set(dataAtom, (data) => data.concat(buildDataAtoms(1000)));
-  set(selectedAtom, null);
 });
 
 const updateRowsAtom = atom(null, (get, set) => {
@@ -32,7 +31,15 @@ const removeRowAtom = atom(null, (_, set, item: PrimitiveAtom<Data>) =>
   })
 );
 
-const selectRowAtom = atom(null, (_, set, selected: PrimitiveAtom<Data>) => {
+const selectRowAtom = atom(null, (get, set, selected: PrimitiveAtom<Data>) => {
+  const prevSelected = get(selectedAtom);
+  if (prevSelected === selected) {
+    return;
+  }
+  if (prevSelected) {
+    set(prevSelected, (prev) => ({ ...prev, isSelected: false }))
+  }
+  set(selected, (prev) => ({ ...prev, isSelected: true }))
   set(selectedAtom, selected);
 });
 
@@ -54,11 +61,10 @@ const GlyphIcon = (
 
 interface RowProps {
   item: PrimitiveAtom<Data>;
-  isSelected: boolean;
 }
 
-const Row = memo<RowProps>(({ item, isSelected }) => {
-  const [{ id, label }] = useAtom(item);
+const Row = memo<RowProps>(({ item }) => {
+  const [{ id, label, isSelected }] = useAtom(item);
   const selectRow = useUpdateAtom(selectRowAtom);
   const removeRow = useUpdateAtom(removeRowAtom);
   return (
@@ -78,14 +84,12 @@ const Row = memo<RowProps>(({ item, isSelected }) => {
 
 const RowList = memo(() => {
   const [data] = useAtom(dataAtom);
-  const [selected] = useAtom(selectedAtom);
   return (
     <>
       {data.map((item) => (
         <Row
           key={String(item)}
           item={item}
-          isSelected={item === selected}
         />
       ))}
     </>

frameworks/keyed/jotai/package.json

@@ -13,16 +13,17 @@ let nextId = 1;
 export interface Data {
   id: number;
   label: string;
+  isSelected?: boolean;
 }
 
 export function buildDataAtoms(count: number): PrimitiveAtom<Data>[] {
   const data = new Array(count);
   for (let i = 0; i < count; i++) {
     data[i] = atom({
-    id: nextId++,
-    label: `${A[random(A.length)]} ${C[random(C.length)]} ${
-      N[random(N.length)]
-    }`,
+      id: nextId++,
+      label: `${A[random(A.length)]} ${C[random(C.length)]} ${
+        N[random(N.length)]
+      }`,
     });
   }
   return data;

frameworks/keyed/jotai/src/main.tsx

@@ -10,7 +10,7 @@ crate-type = ["cdylib"]
 [dependencies]
 getrandom = {version = "0.2", features = ["js"]}
 rand = {version = "0.8", features = ["small_rng"]}
-sycamore = "0.5.1"
+sycamore = "0.6.0"
 wasm-bindgen = "0.2.74"
 web-sys = {version = "0.3.51", features = ["Window", "Document"]}
 

frameworks/keyed/jotai/src/utils.ts

@@ -1,4 +1,3 @@
-import { set_node_id, get_node_id } from './snippets/sycamore-691cfdd254ccd52d/inline0.js';
 
 let wasm;
 
@@ -197,7 +196,7 @@ function makeClosure(arg0, arg1, dtor, f) {
     return real;
 }
 function __wbg_adapter_22(arg0, arg1, arg2) {
-    wasm._dyn_core__ops__function__Fn__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hdc56c7723f7bb8c8(arg0, arg1, addHeapObject(arg2));
+    wasm._dyn_core__ops__function__Fn__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h0cde0dcb15c683bf(arg0, arg1, addHeapObject(arg2));
 }
 
 /**
@@ -274,99 +273,92 @@ async function init(input) {
         var ret = getObject(arg0);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbg_setclassName_09e9074a6eb1e2cb = function(arg0, arg1, arg2) {
+    imports.wbg.__wbg_setclassName_81bd6ad837f8dd1d = function(arg0, arg1, arg2) {
         var v0 = getCachedStringFromWasm0(arg1, arg2);
         getObject(arg0).className = v0;
     };
-    imports.wbg.__wbg_appendChild_6ed236bb79c198df = function() { return handleError(function (arg0, arg1) {
+    imports.wbg.__wbg_appendChild_d1a880b4e5296331 = function() { return handleError(function (arg0, arg1) {
         var ret = getObject(arg0).appendChild(getObject(arg1));
         return addHeapObject(ret);
     }, arguments) };
-    imports.wbg.__wbg_parentNode_e1dd029be06cee39 = function(arg0) {
+    imports.wbg.__wbg_parentNode_d3f0ad18dd306142 = function(arg0) {
         var ret = getObject(arg0).parentNode;
         return isLikeNone(ret) ? 0 : addHeapObject(ret);
     };
-    imports.wbg.__wbg_is_a973b4c0e9019083 = function(arg0, arg1) {
+    imports.wbg.__wbg_is_5530a9697a80e568 = function(arg0, arg1) {
         var ret = Object.is(getObject(arg0), getObject(arg1));
         return ret;
     };
-    imports.wbg.__wbg_replaceChild_5e5033ada0d5000a = function() { return handleError(function (arg0, arg1, arg2) {
+    imports.wbg.__wbg_replaceChild_aea0de7b3c796868 = function() { return handleError(function (arg0, arg1, arg2) {
         var ret = getObject(arg0).replaceChild(getObject(arg1), getObject(arg2));
         return addHeapObject(ret);
     }, arguments) };
-    imports.wbg.__wbg_insertBefore_7159f24556965e30 = function() { return handleError(function (arg0, arg1, arg2) {
-        var ret = getObject(arg0).insertBefore(getObject(arg1), getObject(arg2));
-        return addHeapObject(ret);
-    }, arguments) };
-    imports.wbg.__wbg_settextContent_2e55253528a044b7 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbg_settextContent_f29ac095d4de10dd = function(arg0, arg1, arg2) {
         var v0 = getCachedStringFromWasm0(arg1, arg2);
         getObject(arg0).textContent = v0;
     };
-    imports.wbg.__wbg_nextSibling_4b55e0cb3bf3d56d = function(arg0) {
+    imports.wbg.__wbg_insertBefore_4dbbe994929814b0 = function() { return handleError(function (arg0, arg1, arg2) {
+        var ret = getObject(arg0).insertBefore(getObject(arg1), getObject(arg2));
+        return addHeapObject(ret);
+    }, arguments) };
+    imports.wbg.__wbg_nextSibling_3610543ecb3a8bf1 = function(arg0) {
         var ret = getObject(arg0).nextSibling;
         return isLikeNone(ret) ? 0 : addHeapObject(ret);
     };
-    imports.wbg.__wbg_removeChild_f633f19eb895b696 = function() { return handleError(function (arg0, arg1) {
+    imports.wbg.__wbg_removeChild_22e35af355343e7f = function() { return handleError(function (arg0, arg1) {
         var ret = getObject(arg0).removeChild(getObject(arg1));
         return addHeapObject(ret);
     }, arguments) };
-    imports.wbg.__wbg_getnodeid_7b0fb517dc8eae96 = function(arg0, arg1) {
-        var ret = get_node_id(getObject(arg1));
+    imports.wbg.__wbg_nodeId_9c193b7f673c9cea = function(arg0, arg1) {
+        var ret = getObject(arg1).$$$nodeId;
         getInt32Memory0()[arg0 / 4 + 1] = isLikeNone(ret) ? 0 : ret;
         getInt32Memory0()[arg0 / 4 + 0] = !isLikeNone(ret);
     };
-    imports.wbg.__wbg_setnodeid_bbf10d38dc233bea = function(arg0, arg1) {
-        set_node_id(getObject(arg0), arg1 >>> 0);
+    imports.wbg.__wbg_setnodeId_06732b31f5d90067 = function(arg0, arg1) {
+        getObject(arg0).$$$nodeId = arg1 >>> 0;
     };
-    imports.wbg.__wbg_instanceof_Window_11e25482011fc506 = function(arg0) {
+    imports.wbg.__wbg_instanceof_Window_c4e9146e14ca4a40 = function(arg0) {
         var ret = getObject(arg0) instanceof Window;
         return ret;
     };
-    imports.wbg.__wbg_document_5aff8cd83ef968f5 = function(arg0) {
+    imports.wbg.__wbg_document_40cc17d69aad887e = function(arg0) {
         var ret = getObject(arg0).document;
         return isLikeNone(ret) ? 0 : addHeapObject(ret);
     };
-    imports.wbg.__wbg_querySelector_be2ba71c84a94384 = function() { return handleError(function (arg0, arg1, arg2) {
+    imports.wbg.__wbg_querySelector_a3cc75665ad376ac = function() { return handleError(function (arg0, arg1, arg2) {
         var v0 = getCachedStringFromWasm0(arg1, arg2);
         var ret = getObject(arg0).querySelector(v0);
         return isLikeNone(ret) ? 0 : addHeapObject(ret);
     }, arguments) };
-    imports.wbg.__wbg_self_bb69a836a72ec6e9 = function() { return handleError(function () {
+    imports.wbg.__wbg_self_bce917bbd61b0be0 = function() { return handleError(function () {
         var ret = self.self;
         return addHeapObject(ret);
     }, arguments) };
-    imports.wbg.__wbg_window_3304fc4b414c9693 = function() { return handleError(function () {
+    imports.wbg.__wbg_window_08048ce184ae3496 = function() { return handleError(function () {
         var ret = window.window;
         return addHeapObject(ret);
     }, arguments) };
-    imports.wbg.__wbg_globalThis_e0d21cabc6630763 = function() { return handleError(function () {
+    imports.wbg.__wbg_globalThis_d6f1ff349571af81 = function() { return handleError(function () {
         var ret = globalThis.globalThis;
         return addHeapObject(ret);
     }, arguments) };
-    imports.wbg.__wbg_global_8463719227271676 = function() { return handleError(function () {
+    imports.wbg.__wbg_global_63b22b64d239db75 = function() { return handleError(function () {
         var ret = global.global;
         return addHeapObject(ret);
     }, arguments) };
     imports.wbg.__wbindgen_is_undefined = function(arg0) {
         var ret = getObject(arg0) === undefined;
         return ret;
     };
-    imports.wbg.__wbg_newnoargs_9fdd8f3961dd1bee = function(arg0, arg1) {
+    imports.wbg.__wbg_newnoargs_ac91a24e57fcaec8 = function(arg0, arg1) {
         var v0 = getCachedStringFromWasm0(arg0, arg1);
         var ret = new Function(v0);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbg_call_ba36642bd901572b = function() { return handleError(function (arg0, arg1) {
+    imports.wbg.__wbg_call_9e1eb05d905a21d9 = function() { return handleError(function (arg0, arg1) {
         var ret = getObject(arg0).call(getObject(arg1));
         return addHeapObject(ret);
     }, arguments) };
-    imports.wbg.__wbindgen_debug_string = function(arg0, arg1) {
-        var ret = debugString(getObject(arg1));
-        var ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-        var len0 = WASM_VECTOR_LEN;
-        getInt32Memory0()[arg0 / 4 + 1] = len0;
-        getInt32Memory0()[arg0 / 4 + 0] = ptr0;
-    };
     imports.wbg.__wbg_process_2f24d6544ea7b200 = function(arg0) {
         var ret = getObject(arg0).process;
         return addHeapObject(ret);
@@ -396,7 +388,7 @@ async function init(input) {
         var ret = getObject(arg0).msCrypto;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbg_newwithlength_a8d1dbcbe703a5c6 = function(arg0) {
+    imports.wbg.__wbg_newwithlength_a9f6c1fd1bf4e5e4 = function(arg0) {
         var ret = new Uint8Array(arg0 >>> 0);
         return addHeapObject(ret);
     };
@@ -408,57 +400,57 @@ async function init(input) {
     imports.wbg.__wbg_randomFillSync_64cc7d048f228ca8 = function() { return handleError(function (arg0, arg1, arg2) {
         getObject(arg0).randomFillSync(getArrayU8FromWasm0(arg1, arg2));
     }, arguments) };
-    imports.wbg.__wbg_subarray_901ede8318da52a6 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbg_subarray_e80c85d931be89c4 = function(arg0, arg1, arg2) {
         var ret = getObject(arg0).subarray(arg1 >>> 0, arg2 >>> 0);
         return addHeapObject(ret);
     };
     imports.wbg.__wbg_getRandomValues_98117e9a7e993920 = function() { return handleError(function (arg0, arg1) {
         getObject(arg0).getRandomValues(getObject(arg1));
     }, arguments) };
-    imports.wbg.__wbg_length_2d56cb37075fcfb1 = function(arg0) {
+    imports.wbg.__wbg_length_82dd1e63e9c75f09 = function(arg0) {
         var ret = getObject(arg0).length;
         return ret;
     };
     imports.wbg.__wbindgen_memory = function() {
         var ret = wasm.memory;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbg_buffer_9e184d6f785de5ed = function(arg0) {
+    imports.wbg.__wbg_buffer_fbad716641c158a5 = function(arg0) {
         var ret = getObject(arg0).buffer;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbg_new_e8101319e4cf95fc = function(arg0) {
+    imports.wbg.__wbg_new_c9e78bd69716df92 = function(arg0) {
         var ret = new Uint8Array(getObject(arg0));
         return addHeapObject(ret);
     };
-    imports.wbg.__wbg_set_e8ae7b27314e8b98 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbg_set_2fd4486048716f38 = function(arg0, arg1, arg2) {
         getObject(arg0).set(getObject(arg1), arg2 >>> 0);
     };
-    imports.wbg.__wbg_createElement_ac65a6ce60c4812c = function() { return handleError(function (arg0, arg1, arg2) {
+    imports.wbg.__wbg_createElement_2b9dbef12990d2d6 = function() { return handleError(function (arg0, arg1, arg2) {
         var v0 = getCachedStringFromWasm0(arg1, arg2);
         var ret = getObject(arg0).createElement(v0);
         return addHeapObject(ret);
     }, arguments) };
-    imports.wbg.__wbg_instanceof_Node_97f1c5650b36a093 = function(arg0) {
+    imports.wbg.__wbg_instanceof_Node_55b512cad91bb884 = function(arg0) {
         var ret = getObject(arg0) instanceof Node;
         return ret;
     };
-    imports.wbg.__wbg_createTextNode_442392ad92e75695 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbg_createTextNode_eaf6df3dd186d5bf = function(arg0, arg1, arg2) {
         var v0 = getCachedStringFromWasm0(arg1, arg2);
         var ret = getObject(arg0).createTextNode(v0);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbg_createComment_f2cbcf92ef9a57ef = function(arg0, arg1, arg2) {
+    imports.wbg.__wbg_createComment_e39ec80e93b5b3c6 = function(arg0, arg1, arg2) {
         var v0 = getCachedStringFromWasm0(arg1, arg2);
         var ret = getObject(arg0).createComment(v0);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbg_setAttribute_27ca65e30a1c3c4a = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
+    imports.wbg.__wbg_setAttribute_3caf282df384d72c = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
         var v0 = getCachedStringFromWasm0(arg1, arg2);
         var v1 = getCachedStringFromWasm0(arg3, arg4);
         getObject(arg0).setAttribute(v0, v1);
     }, arguments) };
-    imports.wbg.__wbg_addEventListener_936431894dca4639 = function() { return handleError(function (arg0, arg1, arg2, arg3) {
+    imports.wbg.__wbg_addEventListener_ba672fd0a86ea7c0 = function() { return handleError(function (arg0, arg1, arg2, arg3) {
         var v0 = getCachedStringFromWasm0(arg1, arg2);
         getObject(arg0).addEventListener(v0, getObject(arg3));
     }, arguments) };
@@ -471,15 +463,22 @@ async function init(input) {
         var ret = false;
         return ret;
     };
+    imports.wbg.__wbindgen_debug_string = function(arg0, arg1) {
+        var ret = debugString(getObject(arg1));
+        var ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        var len0 = WASM_VECTOR_LEN;
+        getInt32Memory0()[arg0 / 4 + 1] = len0;
+        getInt32Memory0()[arg0 / 4 + 0] = ptr0;
+    };
     imports.wbg.__wbindgen_throw = function(arg0, arg1) {
         throw new Error(getStringFromWasm0(arg0, arg1));
     };
     imports.wbg.__wbindgen_string_new = function(arg0, arg1) {
         var ret = getStringFromWasm0(arg0, arg1);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper728 = function(arg0, arg1, arg2) {
-        var ret = makeClosure(arg0, arg1, 27, __wbg_adapter_22);
+    imports.wbg.__wbindgen_closure_wrapper746 = function(arg0, arg1, arg2) {
+        var ret = makeClosure(arg0, arg1, 26, __wbg_adapter_22);
         return addHeapObject(ret);
     };
 

frameworks/keyed/sycamore/Cargo.toml

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <title>Maple</title>
+    <title>Sycamore</title>
     <base href="bundled-dist/"></base>
     <link href="/css/currentStyle.css" rel="stylesheet"/>
     <link rel="modulepreload" href="./js-framework-benchmark-sycamore.js" />