Update DEMO

ota-meshi · Jan 8, 2021 · 2fbba00 · 2fbba00
1 parent 84044db
commit 2fbba00
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/explorer/src/components/AstExplorer.vue b/explorer/src/components/AstExplorer.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="ast-explorer-root">
-        <AstOptions v-model="options" />
+        <div class="ast-tools">{{ time }}<AstOptions v-model="options" /></div>
         <div class="ast-explorer">
             <MonacoEditor
                 ref="sourceEditor"
@@ -42,6 +42,7 @@ export default {
 `,
             astJson: {},
             modeEditor: "",
+            time: "",
         }
     },
     watch: {
@@ -57,6 +58,7 @@ export default {
     methods: {
         refresh() {
             let ast
+            const start = Date.now()
             try {
                 ast = yamlEslintParser.parseForESLint(this.yamlValue).ast
             } catch (e) {
@@ -65,6 +67,8 @@ export default {
                     ...e,
                 }
             }
+            const time = Date.now() - start
+            this.time = `${time}ms`
             const json = createAstJson(this.options, ast)
             this.astJson = json
         },
@@ -308,6 +312,9 @@ function isNode(value) {
     flex-direction: column;
     height: 100%;
 }
+.ast-tools {
+    text-align: right;
+}
 .ast-explorer {
     min-width: 1px;
     display: flex;

diff --git a/explorer/src/components/AstOptions.vue b/explorer/src/components/AstOptions.vue
@@ -33,6 +33,6 @@ export default {
 
 <style scoped>
 .ast-options {
-    text-align: right;
+    padding-left: 16px;
 }
 </style>