perf: opt runtime

Author: Linkontoask

frameworks/keyed/gyron/package-lock.json

@@ -20,12 +20,12 @@
     "url": "https://github.com/krausest/js-framework-benchmark.git"
   },
   "devDependencies": {
-    "@gyron/babel-plugin-jsx": "0.0.13",
+    "@gyron/babel-plugin-jsx": "0.0.16",
     "babel-loader": "8.2.5",
     "webpack": "5.49.0",
     "webpack-cli": "4.7.2"
   },
   "dependencies": {
-    "gyron": "0.0.13"
+    "gyron": "0.0.16"
   }
 }

frameworks/keyed/gyron/package.json

@@ -113,10 +113,16 @@ function swap() {
     const d998 = _rows[998];
     _rows[1] = d998;
     _rows[998] = d1;
-    rows.value = _rows.slice();
   }
 }
 
+function remove(id) {
+  rows.value.splice(
+    rows.value.findIndex((d) => d.id === id),
+    1
+  );
+}
+
 const Button = FC(({ text, id, onClick }) => {
   return (
     <div class="col-sm-6 smallpad">
@@ -144,19 +150,16 @@ const ButtonGroup = FC(() => {
 });
 
 const Table = FC(() => {
-  function remove(id) {
-    rows.value.splice(
-      rows.value.findIndex((d) => d.id === id),
-      1
-    );
-  }
-
   return (
     <table class="table table-hover table-striped test-data">
       <tbody>
         {rows.value.map(({ id, label }) => {
           return (
-            <tr key={id} class={id === selected.value ? "danger" : null}>
+            <tr
+              key={id}
+              class={id === selected.value ? "danger" : null}
+              memo={[id === selected.value, label]}
+            >
               <td class="col-md-1">{id}</td>
               <td class="col-md-4">
                 <a onClick={() => select(id)}>{label}</a>
@@ -185,7 +188,10 @@ const Main = FC(() => {
         <ButtonGroup />
       </div>
       <Table />
-      <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
+      <span
+        class="preloadicon glyphicon glyphicon-remove"
+        aria-hidden="true"
+      ></span>
     </div>
   );
 });

frameworks/keyed/gyron/src/main.jsx

@@ -1,5 +1,4 @@
 const path = require("path");
-const webpack = require("webpack");
 
 module.exports = {
   mode: "production",

frameworks/keyed/gyron/webpack.config.js

@@ -20,12 +20,12 @@
     "url": "https://github.com/krausest/js-framework-benchmark.git"
   },
   "devDependencies": {
-    "@gyron/babel-plugin-jsx": "0.0.13",
+    "@gyron/babel-plugin-jsx": "0.0.16",
     "babel-loader": "8.2.5",
     "webpack": "5.49.0",
     "webpack-cli": "4.7.2"
   },
   "dependencies": {
-    "gyron": "0.0.13"
+    "gyron": "0.0.16"
   }
 }

frameworks/non-keyed/gyron/package-lock.json

@@ -113,10 +113,16 @@ function swap() {
     const d998 = _rows[998];
     _rows[1] = d998;
     _rows[998] = d1;
-    rows.value = _rows.slice();
   }
 }
 
+function remove(id) {
+  rows.value.splice(
+    rows.value.findIndex((d) => d.id === id),
+    1
+  );
+}
+
 const Button = FC(({ text, id, onClick }) => {
   return (
     <div class="col-sm-6 smallpad">
@@ -130,7 +136,7 @@ const Button = FC(({ text, id, onClick }) => {
 const ButtonGroup = FC(() => {
   return (
     <div class="row">
-      <h1 class="col-md-6">Gyron.js NonKeyed</h1>
+      <h1 class="col-md-6">Gyron.js Keyed</h1>
       <div class="col-md-6 row">
         <Button text="Create 1,000 rows" id="run" onClick={run} />
         <Button text="Create 10,000 rows" id="runlots" onClick={addLots} />
@@ -144,19 +150,15 @@ const ButtonGroup = FC(() => {
 });
 
 const Table = FC(() => {
-  function remove(id) {
-    rows.value.splice(
-      rows.value.findIndex((d) => d.id === id),
-      1
-    );
-  }
-
   return (
     <table class="table table-hover table-striped test-data">
       <tbody>
         {rows.value.map(({ id, label }) => {
           return (
-            <tr class={id === selected.value ? "danger" : null}>
+            <tr
+              class={id === selected.value ? "danger" : null}
+              memo={[id === selected.value, label]}
+            >
               <td class="col-md-1">{id}</td>
               <td class="col-md-4">
                 <a onClick={() => select(id)}>{label}</a>
@@ -185,7 +187,10 @@ const Main = FC(() => {
         <ButtonGroup />
       </div>
       <Table />
-      <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
+      <span
+        class="preloadicon glyphicon glyphicon-remove"
+        aria-hidden="true"
+      ></span>
     </div>
   );
 });