📰 Rework dom text handling

KimlikDAO · Mar 1, 2025 · 439f2e6 · 439f2e6
1 parent c9d79b5
commit 439f2e6
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 43 deletions.
diff --git a/kastro/README.md b/kastro/README.md
@@ -42,7 +42,7 @@ const Button = ({ Lang }) => {
   const Text = dom.span(Css.Text);
 
   return (
-    <Root onClick={() => Text.innerText = "Clicked!"}>
+    <Root onClick={() => dom.text.update(Text, "Clicked!")}>
       <Text>Hello World!</Text>
     </Root>
   );
@@ -56,7 +56,7 @@ When compiled, this generates minimal client JavaScript:
 ```javascript
 const get = (a) => document.getElementById(a);
 const b = get("B");
-get("A").onclick = () => b.innerText = "Clicked!";
+get("A").onclick = () => b.firstChild.data = "Clicked!";
 ```
 
 ## Core Concepts
@@ -135,7 +135,7 @@ const LandingPage = ({ Lang }) => {
   return (
     <html lang={Lang}>
       <Css />
-      <Button onClick={() => Text.innerText = "Clicked!"}>
+      <Button onClick={() => dom.text.update(Text, "Clicked!")}>
         <ArrowSvg />Click here!
       </Button>
       <Text>Hello World!</Text>
@@ -167,7 +167,7 @@ a minified version of the following
 ```javascript:build/LandingPage-en.js
 const get = (a) => document.getElementById(a);
 const c = get("B");
-get("A").onclick = () => c.innerText = "Clicked!";
+get("A").onclick = () => c.firstChild.data = "Clicked!";
 ```
 and the following html will be generated (after de-minification):
 ```html:build/LandingPage-en.html
@@ -239,7 +239,7 @@ const StatelessComp = ({ id }) => {
   /** @type {!HTMLDivElement} */
   const Root = dom.div(id);
   return (
-    <Root onClick={() => Root.innerText = Root.innerText == "On" ? "Off" : "On"}>
+    <Root onClick={() => dom.text.update(Root, Root.innerText == "On" ? "Off" : "On")}>
       On
     </Root>
   );
@@ -257,7 +257,7 @@ When transpiled by Kastro (but before compilation by kdjs), the above jsx file w
 const StatelessComp = ({ id }) => {
   /** @type {!HTMLDivElement} */
   const Root = dom.div(id);
-  Root.onclick = () => Root.innerText = Root.innerText == "On" ? "Off" : "On";
+  Root.onclick = () => Root.firstChild.data = Root.firstChild.data == "On" ? "Off" : "On";
 }
 const Page = () => {
   StatelessComp({ id: "A" }); // Initialize the stateless component with id "A"
@@ -285,7 +285,7 @@ const CheckBox = function ({ id }) {
 }
 CheckBox.prototype.flip = function () {
   this.on = !this.on;
-  this.root.innerText = this.on ? "on" : "off";
+  dom.text.update(this.root, this.on ? "on" : "off");
 }
 
 const PageWithCheckBox = () => (
@@ -308,7 +308,7 @@ const CheckBox = ({ id }) => {
 }
 CheckBox.prototype.flip = function() {
   this.on = !this.on;
-  this.root.innerText = this.on ? "on" : "off";
+  this.root.firstChild.data = this.on ? "on" : "off";
 }
 
 const PageWithCheckBox = () => {

diff --git a/node/network.js b/node/network.js
@@ -31,7 +31,21 @@ const getNodes = (numNodes) => Promise.resolve([
  */
 const getPoWThreshold = () => Promise.resolve(20_000);
 
+/** @const */
+const nko = {
+  /**
+   * @param {string} commitmentPow
+   * @return {!Promise<string>}
+   */
+  getPDFCommitment(commitmentPow) {
+    return fetch(`https://node.kimlikdao.org/edevlet/nko/commit?${commitmentPow}`)
+      .then((res) => res.text())
+      .catch(console.log);
+  }
+}
+
 export default {
   getNodes,
   getPoWThreshold,
+  nko,
 };
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "mina-signer": "^3.0.7"
   },
   "dependencies": {
-    "@swc/core": "^1.11.1",
+    "@swc/core": "^1.11.5",
     "acorn": "^8.14.0",
     "acorn-jsx": "^5.3.2",
     "acorn-walk": "^8.3.4",

diff --git a/util/base58.js b/util/base58.js
@@ -12,6 +12,7 @@ for (let i = 0; i < Base58Chars.length; ++i)
   Base58Map[Base58Chars.charCodeAt(i)] = i;
 
 /**
+ * @nosideeffects
  * @param {!Uint8Array|!Array<number>} bytes
  * @return {string}
  */
@@ -38,6 +39,7 @@ const from = (bytes) => {
 }
 
 /**
+ * @nosideeffects
  * @param {string} str
  * @return {!Uint8Array}
  */

diff --git a/util/base64.js b/util/base64.js
@@ -40,10 +40,10 @@ const toBytes = (base64) => {
   /** @const {number} */
   const len = decoded.length;
   /** @const {!Uint8Array} */
-  const buffer = new Uint8Array(len);
+  const bytes = new Uint8Array(len);
   for (let i = 0; i < len; ++i)
-    buffer[i] = decoded.charCodeAt(i);
-  return buffer;
+    bytes[i] = decoded.charCodeAt(i);
+  return bytes;
 }
 
 /**

diff --git a/util/bench/base64.bench.js b/util/bench/base64.bench.js
@@ -21,9 +21,39 @@ const from_2 = (b) => btoa([...b].map((x) => String.fromCharCode(x)).join(""));
 
 const from_3 = (bytes) => btoa(Array.from(bytes, (b) => String.fromCharCode(b)).join(""));
 
+/**
+ * String concatenation version (fastest in JSC/Bun)
+ * @nosideeffects
+ * @param {!Uint8Array|!Array<number>} bytes
+ * @return {string}
+ */
+const from_4 = (bytes) => {
+  /** @type {string} */
+  let binary = "";
+  /** @const {number} */
+  const len = bytes.length;
+  for (let i = 0; i < len; ++i)
+    binary += String.fromCharCode(bytes[i]);
+  return btoa(binary);
+}
+
+/**
+ * Array join version (common assumption but slower in JSC/Bun)
+ * @nosideeffects
+ * @param {!Uint8Array|!Array<number>} bytes
+ * @return {string}
+ */
+const from_5 = (bytes) => {
+  /** @const {!Array<string>} */
+  const chars = new Array(bytes.length);
+  for (let i = 0; i < bytes.length; ++i)
+    chars[i] = String.fromCharCode(bytes[i]);
+  return btoa(chars.join(""));
+}
+
 /** @const {string} */
 const output = "U29tZSBiYXNlNjQgZGF0YS4=";
 /** @const {!Uint8Array} */
 const input = base64.toBytes(output);
 
-compareImpls([from, from_2, from_3], 1000, [input], output);
+compareImpls([from, from_2, from_3, from_4, from_5], 1000, [input], output);
diff --git a/util/dom.js b/util/dom.js
@@ -36,7 +36,7 @@ const hide = gizle;
 
 /**
  * @noinline
- * @param {Element} birim
+https://x.com/home * @param {Element} birim
  */
 const göster = (birim) => birim.style.display = "";
 
@@ -57,13 +57,7 @@ const gösterGizle = (birim, göster) => birim.style.display = göster ? "" : "n
  * @noinline
  * @param {string} ad
  */
-const adlaGizle = (ad) => byId(ad).style.display = "none";
-
-/**
- * @noinline
- * @param {string} ad
- */
-const hideById = adlaGizle;
+const hideById = (ad) => byId(ad).style.display = "none";;
 
 /**
  * @noinline
@@ -77,6 +71,46 @@ const adlaGöster = (ad) => byId(ad).style.display = "";
  */
 const toggleById = (ad, göster) => gösterGizle(byId(ad), göster);
 
+/** @const */
+const text = {
+  /**
+   * @param {!Element} element
+   * @param {string} text
+   * @return {string}
+   */
+  update: (element, text) => /** @type {!Text} */(element.firstChild).data = text,
+
+  /**
+   * @param {!Element} element
+   * @param {string=} text
+   */
+  setPreserve: (element, text) => {
+    /** @const {!Text} */
+    const textNode = /** @type {!Text} */(element.firstChild);
+    /** @const {string|undefined} */
+    const preserved = element["1"];
+    if (!preserved) {
+      if (!text) return;
+      element["1"] = textNode.data;
+    }
+    textNode.data = /** @type {string} */(text || preserved);
+  },
+
+  /**
+   * @param {!Element} element
+   * @param {string} text
+   */
+  appendPreserve: (element, text) => {
+    /** @const {!Text} */
+    const textNode = /** @type {!Text} */(element.firstChild);
+    /** @type {string|undefined} */
+    let preserved = element["1"];
+    if (!preserved)
+      element["1"] = preserved = textNode.data;
+    textNode.data = preserved + text;
+  }
+}
+
 /**
  * @param {!HTMLAnchorElement} düğme Durdurulacak düğme.
  */
@@ -140,14 +174,14 @@ const pencere = (url, en, boy) => {
  * @param {number} para
  * @return {string} metin olarak yazılmış para miktarı
  */
-const paradanMetne = (para) => (para / 1_000_000).toLocaleString(Lang);
+const renderCurrency = (para) => (para / 1_000_000).toLocaleString(Lang);
 
 /**
  * @nosideeffects
  * @param {string} telefon
  * @return {string} formatlanmış telefon numarası
  */
-const telefondanMetne = (telefon) =>
+const renderPhone = (telefon) =>
   telefon.slice(0, 3) + " (" + telefon.slice(3, 6) + ") " + telefon.slice(6, 9) + " " +
   telefon.slice(9, 11) + " " + telefon.slice(11);
 
@@ -270,9 +304,9 @@ export default {
   td,
   // DOM manipulation
   byId,
-  adlaGizle,
   adlaGöster,
   toggleById,
+  text,
   gizle,
   göster,
   gösterGizle,
@@ -286,8 +320,8 @@ export default {
   slideCard,
   // Render
   i18n,
-  paradanMetne,
-  telefondanMetne,
+  renderCurrency,
+  renderPhone,
   // Scheduling
   schedule,
   run,

diff --git a/util/hex.js b/util/hex.js
@@ -15,7 +15,6 @@ const FromUint8 = /** @pureOrBreakMyCode */((() => {
   return arr;
 })());
 
-
 /** @const {!Object<string, string>} */
 const ToBinary = /** @pureOrBreakMyCode */((() => {
   /** @const {!Object<string, string>} */
@@ -72,37 +71,30 @@ const fromBytesLE = (bytes) => {
  * @return {!Uint8Array} byte array
  */
 const toUint8Array = (str) => {
-  if (str.length & 1) str = "0" + str;
   /** @const {!Uint8Array} */
-  const buff = new Uint8Array(str.length / 2);
-  for (let i = 0, j = 0; i < str.length; ++j, i += 2) {
-    const high = str.charCodeAt(i);
-    const low = str.charCodeAt(i + 1);
-    const highVal = high - (high <= 57 ? 48 : (high <= 70 ? 55 : 87));
-    const lowVal = low - (low <= 57 ? 48 : (low <= 70 ? 55 : 87));
-    buff[j] = (highVal * 16) | lowVal;
-  }
-  return buff;
+  const bytes = new Uint8Array((str.length + 1) / 2);
+  intoBytes(bytes, str);
+  return bytes;
 }
 
 /**
- * @param {!Uint8Array} buff
+ * @param {!Uint8Array|!Array<number>} bytes
  * @param {string} str
  */
-const intoBytes = (buff, str) => {
+const intoBytes = (bytes, str) => {
   const n = str.length;
   for (let i = -(n & 1), j = 0; i < n; ++j, i += 2)
-    buff[j] = parseInt(str.substring(i, i + 2), 16);
+    bytes[j] = parseInt(str.substring(i, i + 2), 16);
 }
 
 /**
- * @param {!Uint32Array} buff
+ * @param {!Uint32Array|!Array<number>} words
  * @param {number} length of the Uint32Array segment to fill
  * @param {string} str
  */
-const intoUint32ArrayBE = (buff, length, str) => {
+const intoUint32ArrayBE = (words, length, str) => {
   for (let i = str.length - 8, j = length - 1; i >= 0; --j, i -= 8)
-    buff[j] = parseInt(str.slice(i, i + 8), 16);
+    words[j] = parseInt(str.slice(i, i + 8), 16);
 }
 
 export default {