fix ts messageItem

crate/src/utils.rs

@@ -0,0 +1,10 @@
+pub fn set_panic_hook() {
+    // When the `console_error_panic_hook` feature is enabled, we can call the
+    // `set_panic_hook` function at least once during initialization, and then
+    // we will get better error messages if our code ever panics.
+    //
+    // For more details see
+    // https://github.com/rustwasm/console_error_panic_hook#readme
+    #[cfg(feature = "console_error_panic_hook")]
+    console_error_panic_hook::set_once();
+}

src/components/UI/UIDetails/messageItem.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, computed, onMounted, ref } from 'vue';
  export default defineComponent({
   name: "MessageItem",
   props: {
@@ -63,23 +63,36 @@ import { defineComponent } from 'vue';
       required: true
     },
   },
-  data() {
-    return {
-      textArr: [],
-      signature: ""
+  setup(props) {
+      interface ProtectedRef {
+        readonly el: SVGElement | HTMLElement;
+        reference: any;
+        height: number | null;
+      }
+      let textArr: string[] = [];
+      let signature = "";
+      const bubble: ProtectedRef = {
+        el: document.createElement("rect"),
+        reference:  ref(null),
+        height: 0,
       };
-  },
-  computed: {
-    textFill() {
-      switch (this.item.modifier) {
+      const content: ProtectedRef = {
+        el: document.createElement("text"),
+        reference:  ref(null),
+        height: 0,
+      }
+
+      const textFill = computed(() => {
+        switch (props.item.modifier) {
           case "ai":
             return "#fff";
           default:
             return "#000";
         }
-    },
-    bubbleFill() {
-      switch (this.item.modifier) {
+      });
+
+      const bubbleFill = computed(() => {
+        switch (props.item.modifier) {
           case "sf":
             return "#61b4f4";
           case "ai":
@@ -87,9 +100,10 @@ import { defineComponent } from 'vue';
           default:
             return "#fff";
         }
-    },
-    startingOffset() {
-      switch (this.item.modifier) {
+      });
+
+      const startingOffset = computed(() => {
+        switch (props.item.modifier) {
           case "sf":
             return "translate(10, 600)";
           case "ai":
@@ -97,39 +111,53 @@ import { defineComponent } from 'vue';
           default:
             return "translate(20, 600)";
         }
-    }
-  },
-  async mounted() {
-    await this.createTextBox(this.item.content, 32);
-    await this.adjustRect();
-    this.signaturePosition();
-  },
-  methods: {
-    signaturePosition() {
-      const height = Number(this.$refs.bubble.getAttribute("height"));
+      })
+
+      function signaturePosition(): void {
+          if (bubble.reference.value.getAttribute("height") !== null) {
+            const height = Number(bubble.reference.value.getAttribute("height"));
             const p = -10;
-      this.signature = `translate(-10 ${height + p})`;
-    },
-    createTextBox(s, w) {
+            signature = `translate(-10 ${height + p})`;
+          }
+      }
+
+      function createTextBox(s: string, w: number): void {
         // return tspan elements for text with correct size
-      const wrap = (s, w) =>
+        const wrap = (s: string, w: number) =>
           s.replace(
             new RegExp(`(?![^\\n]{1,${w}}$)([^\\n]{1,${w}})\\s`, "g"),
             "$1\n"
           );
-      this.textArr = wrap(s, w).split("\n");
-    },
-    adjustRect() {
+        textArr = wrap(s, w).split("\n");
+      }
+
+      function adjustRect(): void {
         // must get dimensions of text box to fit bubble around
         const padding = 20;
-      const bbox = this.$refs.content.getBBox();
-      const bubble = this.$refs.bubble;
-      bubble.setAttribute("x", bbox.x - padding);
-      bubble.setAttribute("y", bbox.y - padding);
-      bubble.setAttribute("width", bbox.width + 2 * padding);
-      bubble.setAttribute("height", bbox.height + 2 * padding);
+        const bbox = content.reference.value.getBBox();
+        bubble.reference.value.setAttribute("x", bbox.x - padding);
+        bubble.reference.value.setAttribute("y", bbox.y - padding);
+        bubble.reference.value.setAttribute("width", bbox.width + 2 * padding);
+        bubble.reference.value.setAttribute("height", bbox.height + 2 * padding);
       }
+
+      onMounted(async () => {
+        await createTextBox(props.item.content, 32);
+        await adjustRect();
+        signaturePosition();
+      })
+
+      return {
+          bubble,
+          textFill,
+          bubbleFill,
+          startingOffset,
+          signaturePosition,
+          textArr,
+          signature
       }
+
+  },
  });
 </script>
 

src/components/UI/index.vue

@@ -84,7 +84,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, ref, onMounted } from "vue";
+import { defineComponent, inject, onMounted } from "vue";
 // import MessageItem from './UIDetails/messageItem.vue';
 import Messages from "./UIDetails/messages";
  export default defineComponent({
@@ -100,12 +100,12 @@ import Messages from "./UIDetails/messages";
            x: null,
            y: null
        }
-       const renderMsg = (i: number) => {
+       function renderMsg(i: number): void {
          setTimeout(() => {
            renderArr.push(messages[i]);
          }, 2000);
        }
-       const runAnim = () => {
+       function runAnim(): void {
          for (let i = 0; i < messages.length; i++) {
              renderMsg(i);
          }

tsconfig.json

@@ -11,6 +11,7 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "baseUrl": ".",
+    "typeRoots": ["./node_modules/@types"],
     "types": [
       "webpack-env",
       "jest"