From af4a1b8ad4821eb16aeafbcec935e886b0102c8d Mon Sep 17 00:00:00 2001
From: Endre Bock <endre@itbock.de>
Date: Mon, 27 May 2024 19:23:37 +0200
Subject: [PATCH] Correct input TYPE=CHECKBOX to set checked synchronized with
 dom attribute

---
 package.json          |  5 +++--
 src/ShadowRenderer.ts | 22 +++++++++++++---------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 819d7e7..0973b4c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@enbock/ts-jsx",
-  "version": "0.1.9",
+  "version": "0.1.16",
   "description": "An simple JSX rendering based on ShadowDOMv1.",
   "license": "MIT",
   "author": "Endre Bock <endre@itbock.de>",
@@ -9,7 +9,8 @@
   },
   "main": "src/jsx-runtime.ts",
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "deploy": "./build.sh"
   },
   "keywords": [
     "jsx",
diff --git a/src/ShadowRenderer.ts b/src/ShadowRenderer.ts
index 9f1c390..515af9b 100644
--- a/src/ShadowRenderer.ts
+++ b/src/ShadowRenderer.ts
@@ -60,14 +60,18 @@ export default class ShadowRenderer {
             (domNode as Component).updateProps(result.props);
             return;
         }
-        if (
-            (
-                domNode.tagName.toUpperCase() == 'INPUT' ||
-                domNode.hasOwnProperty('value')
-            )
-            && result.props.hasOwnProperty('value')
-        ) {
-            (<HTMLInputElement>domNode).value = result.props.value;
+        if (domNode.tagName.toUpperCase() == 'INPUT') {
+            if (domNode.hasOwnProperty('value') && result.props.hasOwnProperty('value')) {
+                (<HTMLInputElement>domNode).value = result.props.value;
+            }
+            if (String(domNode.getAttribute('type')).toLowerCase() == 'checkbox') {
+                (<HTMLInputElement>domNode).checked =
+                    result.props.checked === true ||
+                    result.props.checked == 'true' ||
+                    result.props.checked == 'on' ||
+                    false
+                ;
+            }
         }
         if (domNode.tagName.toUpperCase() == 'SELECT' && result.props.hasOwnProperty('value')) {
             nextFrameCalls.push(function updateSelectIndex(): void {
@@ -104,7 +108,7 @@ export default class ShadowRenderer {
         }
 
         const handlerCallback: () => void = () => nextFrameCalls.forEach(c => c());
-        if(window.requestAnimationFrame) window.requestAnimationFrame(handlerCallback);
+        if (window.requestAnimationFrame) window.requestAnimationFrame(handlerCallback);
         else setTimeout(handlerCallback, 1);
     }