Improuve react support (#27)

.changeset/strange-carpets-own.md

@@ -0,0 +1,6 @@
+---
+"@coldwired/actions": patch
+"@coldwired/react": patch
+---
+
+fix deps

packages/actions/package.json

@@ -2,9 +2,7 @@
   "name": "@coldwired/actions",
   "description": "DOM manipulation actions based on morphdom",
   "license": "MIT",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -16,9 +14,7 @@
   },
   "type": "module",
   "version": "0.12.0",
-  "keywords": [
-    "turbo"
-  ],
+  "keywords": ["turbo"],
   "scripts": {
     "build": "run-s clean build:*",
     "build:vite": "vite build",
@@ -35,7 +31,6 @@
     "clean": "del dist coverage node_modules/.vite"
   },
   "dependencies": {
-    "@coldwired/react": "*",
     "@coldwired/utils": "^0.12.0",
     "morphdom": "^2.7.2"
   },
@@ -50,24 +45,15 @@
   "eslintConfig": {
     "root": true,
     "parser": "@typescript-eslint/parser",
-    "plugins": [
-      "@typescript-eslint"
-    ],
-    "extends": [
-      "eslint:recommended",
-      "plugin:@typescript-eslint/recommended",
-      "prettier"
-    ],
+    "plugins": ["@typescript-eslint"],
+    "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
     "rules": {
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/no-redeclare": "off"
     },
     "overrides": [
       {
-        "files": [
-          "vite.config.js",
-          "vitest.config.ts"
-        ],
+        "files": ["vite.config.js", "vitest.config.ts"],
         "env": {
           "node": true
         }
@@ -86,7 +72,11 @@
       "release": true
     }
   },
+  "peerDependencies": {
+    "@coldwired/react": "^0.12.1"
+  },
   "devDependencies": {
+    "@coldwired/react": "^0.12.1",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "react": "^18.0.0",

packages/react/package.json

@@ -34,9 +34,10 @@
     "@coldwired/utils": "^0.12.0"
   },
   "devDependencies": {
-    "html-entities": "^2.4.0",
     "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18"
+    "@types/react-dom": "^18.2.18",
+    "html-entities": "^2.4.0",
+    "zod": "^3.23.4"
   },
   "peerDependencies": {
     "react": "^18.0.0",

packages/react/src/react-tree-builder.test.tsx

@@ -2,6 +2,7 @@ import { describe, it, expect } from 'vitest';
 import { renderToStaticMarkup } from 'react-dom/server';
 import type { ReactNode } from 'react';
 import { parseHTMLFragment } from '@coldwired/utils';
+import { z } from 'zod';
 
 import {
   createReactTree,
@@ -149,5 +150,37 @@ describe('@coldwired/react', () => {
         '<p>Bonjour John Doe !</p><form><fieldset lang="fr"><legend>Test</legend>Hello World</fieldset><fieldset lang="en"><legend><span class="blue">Test</span></legend><p>Bonjour Greer Pilkington !</p></fieldset></form>',
       );
     });
+
+    it('deserialize values', () => {
+      const html = `<${REACT_COMPONENT_TAG} ${NAME_ATTRIBUTE}="Greeting" string="$$toto" int="$i42" float="$f42.1" boolt="$btrue" boolf="$bfalse" date="$D${new Date().toISOString()}" ></${REACT_COMPONENT_TAG}>`;
+      const tree = hydrate(parseHTMLFragment(html, document), { Greeting });
+
+      const result = z
+        .object({
+          props: z.object({
+            children: z
+              .object({
+                props: z.object({
+                  string: z.string(),
+                  int: z.number(),
+                  float: z.number(),
+                  boolt: z.boolean(),
+                  boolf: z.boolean(),
+                  date: z.date(),
+                }),
+              })
+              .array(),
+          }),
+        })
+        .safeParse(tree);
+      expect(result.data?.props.children[0].props).toEqual({
+        string: '$toto',
+        int: 42,
+        float: 42.1,
+        boolt: true,
+        boolf: false,
+        date: expect.any(Date),
+      });
+    });
   });
 });

packages/react/src/react-tree-builder.ts

@@ -1,4 +1,5 @@
-import { createElement, Fragment, type ComponentType, type ReactNode, type Key } from 'react';
+import type { ComponentType, ReactNode, Key } from 'react';
+import { createElement, Fragment } from 'react';
 import { decode as htmlDecode, encode as htmlEncode } from 'html-entities';
 
 type Child = string | Element | Component;
@@ -113,7 +114,9 @@ function hydrateChildNodes(childNodes: NodeListOf<ChildNode>): HydrateResult {
         });
       } else {
         if (Object.keys(props).length > 0) {
-          throw new Error('<react-slot> only allowed as direct child of <${REACT_COMPONENT_TAG}>');
+          throw new Error(
+            `<${REACT_SLOT_TAG}> only allowed as direct child of <${REACT_COMPONENT_TAG}>`,
+          );
         }
         if (tagName == REACT_SLOT_TAG) {
           const name = childNode.getAttribute(NAME_ATTRIBUTE);
@@ -227,21 +230,21 @@ function createChild(child: Child, manifest: Manifest, key?: Key): ReactNode | s
 }
 
 function transformAttributeName(name: string) {
-  const name_ = cebabCase(name);
-  if (attributeMap[name_]) {
-    return attributeMap[name_];
-  } else if (name_.startsWith('aria-')) {
-    return name_;
+  const attributeName = cebabCase(name);
+  if (attributeMap[attributeName]) {
+    return attributeMap[attributeName];
+  } else if (attributeName.startsWith('aria-')) {
+    return attributeName;
   }
-  return camelcase(name_);
+  return camelcase(attributeName);
 }
 
 function transformAttributeValue(name: string, value: string) {
   if (name == 'style') {
     return parseStyleAttribute(value);
   }
   if (booleanAttribute.includes(name)) {
-    return value == name || value == 'true' || value == '1' || value == '';
+    return value != 'false' && value != 'off' && value != '0';
   }
   return value;
 }
@@ -280,6 +283,15 @@ function transformStringValue(value: string): ReactValue {
       case 'n':
         // BigInt
         return BigInt(value.slice(2));
+      case 'b':
+        // Boolean
+        return value[2] == 't';
+      case 'i':
+        // Integer
+        return parseInt(value.slice(2));
+      case 'f':
+        // Float
+        return parseFloat(value.slice(2));
     }
   }
   return value;