tsx:add ref and parent support

doric-demo/src/TSXDemo.tsx

@@ -1,51 +1,55 @@
 import {
-  Panel,
-  Group,
-  VLayout,
-  layoutConfig,
-  Gravity,
-  Text,
-  Color,
-  navbar,
   jsx,
+  VLayout,
+  Panel,
+  Gravity,
+  Group,
+  LayoutSpec,
+  Image,
+  Text,
+  makeRef,
 } from "doric";
 
+// class MyPanel extends Panel {
+//   build(root: Group) {
+//     <VLayout
+//       space={20}
+//       gravity={Gravity.Center}
+//       layoutConfig={{
+//         widthSpec: LayoutSpec.MOST,
+//         heightSpec: LayoutSpec.MOST,
+//       }}
+//       parent={root}
+//     >
+//       <Image imageUrl="https://doric.pub/logo.png" />
+//       <Text text="Hello,Doric" textSize={20} />
+//     </VLayout>;
+//   }
+// }
+
 @Entry
-class Example extends Panel {
-  onShow() {
-    navbar(context).setTitle("Example");
-  }
-  build(rootView: Group) {
+class Counter extends Panel {
+  build(root: Group) {
+    const ref = makeRef<Text>();
     let count = 0;
-    (
-      <VLayout
-        layoutConfig={layoutConfig().just().configAlignment(Gravity.Center)}
-        width={200}
-        height={200}
-        space={20}
-        border={{ color: Color.BLUE, width: 1 }}
-        gravity={Gravity.Center}
-      >
-        <Text
-          tag="Label"
-          text={`${count}`}
-          textSize={40}
-          layoutConfig={layoutConfig().fit()}
-        />
-        <Text
-          text="Click to count"
-          textSize={20}
-          backgroundColor={Color.parse("#70a1ff")}
-          textColor={Color.WHITE}
-          onClick={() => {
-            count++;
-            const label = rootView.findViewByTag("Label") as Text;
-            label.text = `${count}`;
-          }}
-          width={200}
-          height={50}
-        />
-      </VLayout>
-    ).in(rootView);
+    <VLayout
+      space={20}
+      gravity={Gravity.Center}
+      layoutConfig={{
+        widthSpec: LayoutSpec.MOST,
+        heightSpec: LayoutSpec.MOST,
+      }}
+      parent={root}
+    >
+      <Text text={`${count}`} textSize={40} ref={ref} />
+      <Text
+        text="Click to count"
+        textSize={20}
+        onClick={() => {
+          count++;
+          ref.current.text = `${count}`;
+        }}
+      />
+    </VLayout>;
   }
 }