update

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.8.3",
+        "stream": "^0.0.2",
         "vue": "^3.2.13"
       },
       "devDependencies": {
@@ -5040,6 +5041,11 @@
       "integrity": "sha512-zjqzx4N7xGdl5468G+vcgzDhaHkaYgVcf9MqgexcTqsl2UHSCmOj/Bi3HAprg4BZCpC7HyD8a6nZl6QAZf72gw==",
       "dev": true
     },
+    "node_modules/emitter-component": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/emitter-component/-/emitter-component-1.1.2.tgz",
+      "integrity": "sha512-QdXO3nXOzZB4pAjM0n6ZE+R9/+kPpECA/XSELIcc54NeYVnBqIk+4DFiBgK+8QbV3mdvTG6nedl7dTYgO+5wDw=="
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -9755,6 +9761,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/stream": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmmirror.com/stream/-/stream-0.0.2.tgz",
+      "integrity": "sha512-gCq3NDI2P35B2n6t76YJuOp7d6cN/C7Rt0577l91wllh0sY9ZBuw9KaSGqH/b0hzn3CWWJbpbW0W0WvQ1H/Q7g==",
+      "dependencies": {
+        "emitter-component": "^1.1.1"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -11571,7 +11585,8 @@
       "version": "7.21.0-placeholder-for-preset-env.2",
       "resolved": "https://registry.npmmirror.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
       "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@babel/plugin-syntax-async-generators": {
       "version": "7.8.4",
@@ -13168,7 +13183,8 @@
       "version": "5.0.8",
       "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.8.tgz",
       "integrity": "sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "5.0.8",
@@ -13677,13 +13693,15 @@
       "version": "1.9.0",
       "resolved": "https://registry.npmmirror.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
       "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "8.3.2",
@@ -13742,7 +13760,8 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ansi-colors": {
       "version": "4.1.3",
@@ -14551,7 +14570,8 @@
       "version": "6.4.1",
       "resolved": "https://registry.npmmirror.com/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
       "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "css-loader": {
       "version": "6.10.0",
@@ -14737,7 +14757,8 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
       "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "csso": {
       "version": "4.2.0",
@@ -15052,6 +15073,11 @@
       "integrity": "sha512-zjqzx4N7xGdl5468G+vcgzDhaHkaYgVcf9MqgexcTqsl2UHSCmOj/Bi3HAprg4BZCpC7HyD8a6nZl6QAZf72gw==",
       "dev": true
     },
+    "emitter-component": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/emitter-component/-/emitter-component-1.1.2.tgz",
+      "integrity": "sha512-QdXO3nXOzZB4pAjM0n6ZE+R9/+kPpECA/XSELIcc54NeYVnBqIk+4DFiBgK+8QbV3mdvTG6nedl7dTYgO+5wDw=="
+    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -16290,7 +16316,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ieee754": {
       "version": "1.2.1",
@@ -17678,25 +17705,29 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmmirror.com/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
       "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-duplicates": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
       "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-empty": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
       "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-overridden": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
       "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-loader": {
       "version": "6.2.1",
@@ -17801,7 +17832,8 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.4",
@@ -17836,7 +17868,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
       "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -18750,6 +18783,14 @@
       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
       "dev": true
     },
+    "stream": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmmirror.com/stream/-/stream-0.0.2.tgz",
+      "integrity": "sha512-gCq3NDI2P35B2n6t76YJuOp7d6cN/C7Rt0577l91wllh0sY9ZBuw9KaSGqH/b0hzn3CWWJbpbW0W0WvQ1H/Q7g==",
+      "requires": {
+        "emitter-component": "^1.1.1"
+      }
+    },
     "string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -19621,7 +19662,8 @@
           "version": "8.16.0",
           "resolved": "https://registry.npmmirror.com/ws/-/ws-8.16.0.tgz",
           "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         }
       }
     },
@@ -19743,7 +19785,8 @@
       "version": "7.5.9",
       "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
       "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "y18n": {
       "version": "5.0.8",

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "stream": "^0.0.2",
     "vue": "^3.2.13"
   },
   "devDependencies": {
@@ -32,7 +33,11 @@
     "parserOptions": {
       "parser": "@babel/eslint-parser"
     },
-    "rules": {}
+    "rules": {
+      "no-unused-vars": "off",
+      "no-undef": "off",
+      "no-redeclare": "off"
+    }
   },
   "browserslist": [
     "> 1%",

public/index.html

@@ -1,17 +1,23 @@
 <!DOCTYPE html>
 <html lang="">
-  <head>
+
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= BASE_URL %>icon.png">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>Vcd Viewer</title>
-  </head>
+    <link rel="stylesheet" href="vscode.css">
-  <body>
+    <link rel="stylesheet" href="vcd.css">
+    <script src="vcd.js"></script>
+</head>
+
+<body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+        <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+                Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+</body>
-  </body>
+
 </html>

public/vcd.css

@@ -0,0 +1,29 @@
+html, body {
+    background-color: var(--background);
+    color: var(--foreground);
+}
+
+.vcd-sidebar {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background-color: var(--sidebar);
+    border: solid 1px var(--sidebar-border);
+    min-width: var(--sidebar-min-width);
+}
+
+.vcd-sidebar-item {
+    
+}
+
+.vcd-toolbar {
+
+}
+
+.vcd-render {
+
+}
+
+.vcd-treeview {
+
+}

public/vscode.css

@@ -0,0 +1,149 @@
+:root {
+    --font-monospace-family: var(--vscode-editor-font-family);
+    --font-monospace-weight: var(--vscode-editor-font-weight);
+    --font-monospace-size: var(--vscode-editor-font-size);
+    
+    --link-foreground: var(--vscode-textLink-foreground);
+    --link-active: var(--vscode-textLink-activeForeground);
+
+    /* UI & Control */
+    --input-active-background: var(--vscode-input-background);
+    --input-active-border: var(--vscode-focusBorder);
+    --input-active-foreground: var(--vscode-input-foreground);
+
+    --input-error-background: var(--vscode-inputValidation-errorBackground);
+    --input-error-border: var(--vscode-inputValidation-errorBorder);
+    --input-error-foreground: var(--vscode-inputValidation-errorForeground);
+
+    --input-foreground: var(--vscode-input-foreground);
+    --input-background: var(--vscode-input-background);
+    --input-border: var(--vscode-input-border);
+    --input-hover: var(--vscode-input-background);
+    --input-placeholder: var(--vscode-input-placeholderForeground);
+    --input-radius: 0px;
+
+    --scrollbar-background: var(--vscode-scrollbarSlider-background);
+    --scrollbar-hover: var(--vscode-scrollbarSlider-hoverBackground);
+    --scrollbar-active: var(--vscode-scrollbarSlider-activeBackground);
+
+    /* Window */
+    --title-bar: #1f1f1f;
+    --title-color: #fff;
+    --foreground: var(--vscode-editor-foreground);
+    --background: var(--vscode-editor-background);
+    --label: rgb(189, 189, 189);
+    --shadow: #000;
+    --border: var(--vscode-input-border);
+    --window-button-hover: rgba(255,255,255,0.1);
+    --window-button-active: rgba(255,255,255,0.2);
+    --window-blur-background: rgba(0,0,0,0.25);
+
+    --window-title-foreground: var(--foreground);
+    --window-background: var(--sidebar);
+    --window-border: transparent;
+    --window-radius: 0px;
+
+    /* Sidebar */
+    --sidebar: var(--vscode-sideBar-background);
+    --sidebar-border: var(--vscode-sideBar-border);
+    --sidebar-min-width: 280px;
+
+    --sidebar-item-text: var(--vscode-list-inactiveSelectionForeground);
+    --sidebar-item-border: var(--vscode-input-border);
+    --sidebar-item-background: var(--sidebar);
+    --sidebar-item-selected: var(--vscode-list-inactiveSelectionBackground);
+    --sidebar-item-hover: var(--vscode-list-hoverBackground);
+    --sidebar-item-max-height: 40px;
+    --sidebar-item-radix-background: var(--vscode-breadcrumb-background);
+
+    --sidebar-group-text: var(--vscode-sideBarSectionHeader-foreground);
+    --sidebar-group-border: var(--vscode-sideBarSectionHeader-border);
+    --sidebar-group-background: var(--vscode-sideBarSectionHeader-background);
+
+    /* Labels */
+    --signalSize-background: rgba(0,0,0,0.5);
+    --signalSize-border: rgba(255,255,255,0.2);
+    --signalSize-color: var(--foreground);
+
+    /* Color Picker */
+    --picker-swatch-size: 15px;
+    --picker-swatch-cols: 8;
+    --picker-background: var(--vscode-breadcrumbPicker-background);
+    --picker-border: var(--vscode-dropdown-border);
+    
+    /* Search */
+    --search-background: var(--vscode-quickInput-background);
+    --search-border: var(--border);
+    --search-panel-background: transparent;
+    --search-panel-border: var(--vscode-pickerGroup-border);
+    --search-panel-text: var(--vscode-quickInput-foreground);
+    --search-label: var(--foreground);
+    --search-selected-background: var(--vscode-list-inactiveSelectionBackground);
+
+    /* Properties */
+    --properties-background: var(--vscode-breadcrumb-background);
+    --properties-border: var(--border);
+
+    /* Navbar */
+    --navBar-background: var(--sidebar);
+    --navBar-height: 32px;
+    --navBar-button: transparent;
+    --navBar-button-text: var(--foreground);
+    --navBar-group-background: var(--background);
+    --navBar-preview-background: var(--vscode-scrollbarSlider-background);
+    --navBar-slider-border: var(--foreground);
+
+    /* Buttons */
+    --button: var(--vscode-button-background);
+    --button-text: var(--vscode-button-foreground);
+    --button-hover: var(--vscode-button-hoverBackground);
+    --button-active: var(--vscode-button-hoverBackground);
+    --button-disabled: var(--vscode-activityBar-background);
+    --button-disabled-text: var(--vscode-activityBar-inactiveForeground);
+
+    /* Grid Lines */
+    --grid-dash: 2;
+    --grid-space: 4;
+    --grid-line: var(--vscode-editorIndentGuide-background);
+    --grid-tick: var(--vscode-editorIndentGuide-activeBackground);
+
+    /* Cursor */
+    --cursor: var(--vscode-editorCursor-foreground);
+    --cursor-ghost: rgba(255, 255, 255, 0.2);
+    --cursor-width: 2;
+
+    /* X-Axis */
+    --axis-height: 38px;
+    --axis-line: var(--border);
+    --axis-background: var(--vscode-sideBar-background);
+    --axis-foreground: var(--foreground);
+
+    /* Signals */
+    --signal-highlight: var(--vscode-list-inactiveSelectionBackground);
+
+    /* Colors */
+    --accent: var(--vscode-button-background);
+    --accent-dim: #234175;
+    --accent-bright: #24c5f7;
+    --accent-hover: var(--vscode-button-hoverBackground);
+
+    --color-red: #ff5252;
+    --color-pink: #ff4081;
+    --color-purple: #e040fb;
+    --color-deepPurple: #7c4dff;
+    --color-indigo: #536dfe;
+    --color-blue: #448aff;
+    --color-lightBlue: #40c4ff;
+    --color-cyan: #18ffff;
+    --color-teal: #64ffda;
+    --color-green: #69f0ae;
+    --color-lightGreen: #b2ff59;
+    --color-lime: #eeff41;
+    --color-yellow: #ffff00;
+    --color-amber: #ffd740;
+    --color-orange: #ffab40;
+    --color-deepOrange: #ff6e40;
+
+    /* Settings */
+    --settings-action-background: var(--background);
+}

src/App.vue

@@ -1,17 +1,48 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
+    <div class="vcd-wrapper">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+        <!-- 左上角的 sidebar，用于显示 -->
+        <div class="vcd-sidebar">
+            <div class="vcd-sidebar-item">hello</div>
+            <div class="vcd-sidebar-item">hello</div>
+            <div class="vcd-sidebar-item">hello</div>
+        </div>
+        <!-- 工具栏 -->
+        <div class="vcd-toolbar">
+
+        </div>
+        <!-- 渲染区域 -->
+        <div class="vcd-render">
+
+        </div>
+        <!-- 显示当前信号树形关系 -->
+        <div class="vcd-treeview">
+            
+        </div>
+    </div>
 </template>
 
-<script>
+<script setup>
-import HelloWorld from './components/HelloWorld.vue'
+import { onMounted, reactive } from 'vue';
+import { getVcdStream, readVcdFile } from '@/hook/utils';
+
+const VcdInfo = reactive({
+    structures: {},
+    values: []
+});
+
+onMounted(async () => {
+    // const uint8array = await readVcdFile();
+    // const vcdstream = await getVcdStream();
+    // const maxChunkLength = 1 << 17;
+    // for (let i = 0; i < uint8array.length; i += maxChunkLength) {
+    //     const piece = uint8array.slice(i, i + maxChunkLength);
+    //     vcdstream.write(piece);
+    // }
+    // console.log(vcdstream.info);
+});
+
+
 
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
 </script>
 
 <style>

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/hook/utils.js

@@ -0,0 +1,34 @@
+/* eslint-disable no-undef */
+
+import { Stream } from "stream";
+
+/**
+ * 
+ * @returns {Promise<Stream>}
+ */
+async function getVcdStream() {
+    const ostream = await window.getVcdStream();
+    return ostream;
+}
+
+/**
+ * @returns {Promise<Uint8Array>}
+ */
+async function readVcdFile() {
+    const response = await fetch('cpu.vcd');
+    const blob = await response.blob();
+    const reader = new FileReader();
+    return new Promise((resolve, reject) => {
+        reader.onload = event => {
+            const fileContent = event.target.result;
+            const unintarray = new Uint8Array(fileContent);
+            resolve(unintarray);     
+        };
+        reader.readAsArrayBuffer(blob);
+    });
+}
+
+export {
+    getVcdStream,
+    readVcdFile
+};

vue.config.js

@@ -1,4 +1,14 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+    transpileDependencies: true,
+    chainWebpack: (config) => {
+        config.plugin('define').tap((definitions) => {
+            Object.assign(definitions[0], {
+                __VUE_OPTIONS_API__: 'true',
+                __VUE_PROD_DEVTOOLS__: 'false',
+                __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
+            })
+            return definitions;
+        })
+    }
 })