@hypen-space/web 0.4.1 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypen-space/web",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "Hypen web renderers - DOM and Canvas rendering for browsers",
   "type": "module",
   "main": "./dist/index.js",
@@ -51,11 +51,12 @@
   "scripts": {
     "build": "bun run build.ts",
     "build:types": "tsc --emitDeclarationOnly",
+    "prepublishOnly": "bun run build",
     "typecheck": "tsc --noEmit",
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@hypen-space/core": "^0.4.1"
+    "@hypen-space/core": "^0.4.3"
   },
   "devDependencies": {
     "@types/bun": "latest",

package/src/dom/components/index.ts

@@ -27,6 +27,7 @@ export class ComponentRegistry {
    * Get handler for a component type
    */
   get(type: string): ComponentHandler | undefined {
+    if (!type) return undefined;
     return this.handlers.get(type.toLowerCase());
   }
 
@@ -34,6 +35,7 @@ export class ComponentRegistry {
    * Create element for a component type
    */
   createElement(type: string, props: Record<string, any> = {}): HTMLElement | null {
+    if (!type) return null;
     const handler = this.get(type);
     if (!handler) return null;
 

package/src/dom/renderer.ts

@@ -123,26 +123,38 @@ export class DOMRenderer {
 
   /**
    * Apply a single patch
+   *
+   * Handles both camelCase (direct WASM) and snake_case (WebSocket JSON) field names.
    */
   private applyPatch(patch: Patch): void {
+    // Normalize: accept both camelCase and snake_case field names.
+    // WASM serde outputs camelCase, but patches forwarded via JSON over WebSocket
+    // may arrive with snake_case depending on the serialization path.
+    const p = patch as any;
+    const id: string | undefined = patch.id ?? p.id;
+    const elementType: string | undefined = patch.elementType ?? p.element_type;
+    const parentId: string | undefined = patch.parentId ?? p.parent_id;
+    const beforeId: string | undefined = patch.beforeId ?? p.before_id;
+    const eventName: string | undefined = patch.eventName ?? p.event_name;
+
     switch (patch.type) {
       case "create":
-        this.onCreate(patch.id!, patch.elementType!, patch.props || {});
+        this.onCreate(id!, elementType ?? "container", patch.props || {});
         break;
       case "setProp":
-        this.onSetProp(patch.id!, patch.name!, patch.value);
+        this.onSetProp(id!, patch.name!, patch.value);
         break;
       case "setText":
-        this.onSetText(patch.id!, patch.text!);
+        this.onSetText(id!, patch.text!);
         break;
       case "insert":
-        this.onInsert(patch.parentId!, patch.id!, patch.beforeId);
+        this.onInsert(parentId!, id!, beforeId);
         break;
       case "move":
-        this.onMove(patch.parentId!, patch.id!, patch.beforeId);
+        this.onMove(parentId!, id!, beforeId);
         break;
       case "remove":
-        this.onRemove(patch.id!);
+        this.onRemove(id!);
         break;
     }
   }