fix: LoroCounter issues #626 (#627)

crates/loro-wasm/src/convert.rs

@@ -68,6 +68,10 @@ pub(crate) fn js_to_container(js: JsContainer) -> Result<Container, JsValue> {
             let obj = unsafe { LoroMovableList::ref_from_abi(ptr_u32) };
             Container::MovableList(obj.clone())
         }
+        "Counter" => {
+            let obj = unsafe { LoroCounter::ref_from_abi(ptr_u32) };
+            Container::Counter(obj.clone())
+        }
         _ => {
             return Err(JsValue::from_str(
                 format!(

crates/loro-wasm/src/counter.rs

@@ -7,11 +7,11 @@ use std::sync::Arc;
 use wasm_bindgen::prelude::*;
 
 use crate::{
-    call_after_micro_task, convert::handler_to_js_value, observer, JsContainerOrUndefined,
-    JsLoroTreeOrUndefined, JsResult,
+    call_after_micro_task, convert::handler_to_js_value, observer, JsContainerID,
+    JsContainerOrUndefined, JsCounterStr, JsLoroTreeOrUndefined, JsResult,
 };
 
-/// The handler of a tree(forest) container.
+/// The handler of a counter container.
 #[derive(Clone)]
 #[wasm_bindgen]
 pub struct LoroCounter {
@@ -36,6 +36,18 @@ impl LoroCounter {
         }
     }
 
+    /// "Counter"
+    pub fn kind(&self) -> JsCounterStr {
+        JsValue::from_str("Counter").into()
+    }
+
+    /// The container id of this handler.
+    #[wasm_bindgen(js_name = "id", method, getter)]
+    pub fn id(&self) -> JsContainerID {
+        let value: JsValue = (&self.handler.id()).into();
+        value.into()
+    }
+
     /// Increment the counter by the given value.
     pub fn increment(&self, value: f64) -> JsResult<()> {
         self.handler.increment(value)?;

crates/loro-wasm/src/lib.rs

@@ -175,6 +175,8 @@ extern "C" {
     pub type JsListStr;
     #[wasm_bindgen(typescript_type = "'MovableList'")]
     pub type JsMovableListStr;
+    #[wasm_bindgen(typescript_type = "'Counter'")]
+    pub type JsCounterStr;
     #[wasm_bindgen(typescript_type = "ImportBlobMetadata")]
     pub type JsImportBlobMetadata;
     #[wasm_bindgen(typescript_type = "Side")]
@@ -4930,6 +4932,7 @@ enum Container {
     List(LoroList),
     Tree(LoroTree),
     MovableList(LoroMovableList),
+    Counter(LoroCounter),
 }
 
 impl Container {
@@ -4940,6 +4943,7 @@ impl Container {
             Container::List(l) => Handler::List(l.handler.clone()),
             Container::Tree(t) => Handler::Tree(t.handler.clone()),
             Container::MovableList(l) => Handler::MovableList(l.handler.clone()),
+            Container::Counter(c) => Handler::Counter(c.handler.clone()),
         }
     }
 }
@@ -5048,7 +5052,7 @@ const TYPES: &'static str = r#"
 * const text = list.insertContainer(1, new LoroText());
 * ```
 */
-export type ContainerType = "Text" | "Map" | "List"| "Tree" | "MovableList";
+export type ContainerType = "Text" | "Map" | "List"| "Tree" | "MovableList" | "Counter";
 
 export type PeerID = `${number}`;
 /**
@@ -5292,7 +5296,7 @@ export type UndoConfig = {
     onPush?: (isUndo: boolean, counterRange: { start: number, end: number }, event?: LoroEventBatch) => { value: Value, cursors: Cursor[] },
     onPop?: (isUndo: boolean, value: { value: Value, cursors: Cursor[] }, counterRange: { start: number, end: number }) => void
 };
-export type Container = LoroList | LoroMap | LoroText | LoroTree | LoroMovableList;
+export type Container = LoroList | LoroMap | LoroText | LoroTree | LoroMovableList | LoroCounter;
 
 export interface ImportBlobMetadata {
     /**

crates/loro-wasm/tests/basic.test.ts

@@ -16,8 +16,9 @@ import {
   encodeFrontiers,
   decodeFrontiers,
   OpId,
+  ContainerID,
+  LoroCounter
 } from "../bundler/index";
-import { ContainerID } from "loro-wasm";
 
 it("basic example", () => {
   const doc = new LoroDoc();
@@ -1293,3 +1294,25 @@ it("setRecordTimestamp should be reflected on current txn", async () => {
   const updates = doc.exportJsonUpdates();
   expect(updates.changes[1].timestamp).toBeGreaterThan(0);
 })
+
+it("insert counter container", () => {
+  function createItem(label: string, checked: boolean) {
+    const item = new LoroMap<Record<string, Container>>();
+
+    const $label = new LoroText();
+    $label.insert(0, label);
+
+    const $checked = new LoroCounter();
+    if (checked) $checked.increment(1);
+
+    item.setContainer("label", $label);
+    item.setContainer("checked", $checked);
+
+    return item;
+  }
+
+  const item = createItem("hello", true);
+
+  console.log(item.get("label").toString());
+  console.log((item.get("checked") as LoroCounter).value);
+})