feat: add JSON button

fix #688

Author: HerringtonDarkholme

website/src/components/EnvDisplay.vue

@@ -1,10 +1,13 @@
 <script lang="ts" setup>
 import {computed, shallowRef, PropType} from 'vue'
 import Error from './utils/Error.vue'
+import { yamlImport } from './astGrep'
+import { showToast } from './utils/Toast.vue'
 
 const props = defineProps({
   envs: Array as PropType<any>,
   error: String,
+  rule: String,
 })
 let currentIndex = shallowRef(0)
 let currentEnv = computed(() => {
@@ -26,34 +29,44 @@ function increment() {
 function decrement() {
   currentIndex.value = (currentIndex.value + props.envs.length - 1) % props.envs.length
 }
+async function copyJson() {
+  const yaml = await yamlImport
+  const rules = yaml.loadAll(props.rule || '{}')
+  const json = rules.length === 1 ? rules[0] : rules
+  navigator.clipboard.writeText(JSON.stringify(json, null, 2))
+  showToast('Rule JSON copied to clipboard.')
+}
 </script>
 
 <template>
 <div class="var-debugger">
-  <table class="metavar-table" v-if="currentEnv">
-    <thead>
-      <tr>
-        <td>MetaVar Name</td>
-        <td>Matched Node(s)</td>
-      </tr>
-    </thead>
-    <tbody v-if="currentEnv">
-      <tr v-for="(val, key) in currentEnv">
-        <td>{{key}}</td>
-        <td>
-          <code>
-            {{val.text}}
-          </code>
-        </td>
-      </tr>
-    </tbody>
-    <tfoot >
+  <template v-if="currentEnv">
+    <table class="metavar-table">
+      <thead>
+        <tr>
+          <td>MetaVar Name</td>
+          <td>Matched Node(s)</td>
+        </tr>
+      </thead>
+      <tbody v-if="currentEnv">
+        <tr v-for="(val, key) in currentEnv">
+          <td>{{key}}</td>
+          <td>
+            <code>
+              {{val.text}}
+            </code>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div>
       <div class="choose-match-division" />
       <button @click="decrement">❮</button>
       <span class="match-count">{{ currentIndex + 1 }}/{{props.envs.length}} match(es)</span>
       <button @click="increment">❯</button>
-    </tfoot>
-  </table>
+      <button @click="copyJson" class="copy-json" data-title="Copy Rule as JSON" title-up>JSON</button>
+    </div>
+  </template>
   <Error v-else-if="error" :error="error"/>
   <div v-else class="vp-doc">
     <div class="custom-block warning no-match-tip">
@@ -126,4 +139,7 @@ tfoot button {
 .no-match-tip ul > li {
   margin-top: 4px;
 }
+.copy-json {
+  margin-left: 0.5em;
+}
 </style>

website/src/components/Playground.vue

@@ -90,7 +90,7 @@ let codeMode = shallowRef('code')
               <Monaco language="yaml" v-model="config"/>
             </template>
             <template #panel>
-              <EnvDisplay :envs="matchedEnvs" :error="ruleErrors"/>
+              <EnvDisplay :envs="matchedEnvs" :error="ruleErrors" :rule="config"/>
             </template>
           </EditorWithPanel>
         </template>
@@ -192,6 +192,17 @@ let codeMode = shallowRef('code')
     bottom: 50%;
     transform: translate(-100%, 50%);
   }
+  .playground [title-up]:before {
+    left: 50%;
+    top: -8px;
+    transform: translateX(-50%);
+    border-top-color: rgba(0, 0, 0, 0.5);
+  }
+  .playground [title-up]:after {
+    left: 50%;
+    top: -8px;
+    transform: translate(-50%, -100%);
+  }
 
   .dark .playground [data-title]::after {
     color: var(--vp-c-brand-1);

website/src/components/ResetConfig.vue

@@ -7,7 +7,7 @@ const emits = defineEmits<{
 </script>
 
 <template>
-  <button class="reset" data-title="Reset your config" @click="emits('reset')">
+  <button class="reset" data-title="Reset your config" title-up @click="emits('reset')">
     <IconReset />
   </button>
 </template>
@@ -23,15 +23,8 @@ const emits = defineEmits<{
   align-items: center;
   background: transparent;
 }
-.reset[data-title]:before {
-  left: 50%;
-  top: -8px;
-  transform: translateX(-50%);
-  border-top-color: rgba(0, 0, 0, 0.5);
-}
-[data-title]:after {
-  left: 50%;
-  top: -8px;
+
+.reset[data-title]:after {
   transform: translate(-80%, -100%);
 }
 </style>

website/src/components/astGrep/index.ts

@@ -8,7 +8,7 @@ export { Mode } from './state'
 
 type YAML = typeof import('js-yaml')
 
-const yamlImport = import('js-yaml')
+export const yamlImport = import('js-yaml')
 
 function buildRules(yaml: YAML, state: State) {
   let json = []