Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 0e6f989

Browse files
committedMay 25, 2025··
feat: add JSON button
fix #688
1 parent 67942d2 commit 0e6f989

File tree

4 files changed

+52
-32
lines changed

4 files changed

+52
-32
lines changed
 

‎website/src/components/EnvDisplay.vue

Lines changed: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
<script lang="ts" setup>
22
import {computed, shallowRef, PropType} from 'vue'
33
import Error from './utils/Error.vue'
4+
import { yamlImport } from './astGrep'
5+
import { showToast } from './utils/Toast.vue'
46
57
const props = defineProps({
68
envs: Array as PropType<any>,
79
error: String,
10+
rule: String,
811
})
912
let currentIndex = shallowRef(0)
1013
let currentEnv = computed(() => {
@@ -26,34 +29,44 @@ function increment() {
2629
function decrement() {
2730
currentIndex.value = (currentIndex.value + props.envs.length - 1) % props.envs.length
2831
}
32+
async function copyJson() {
33+
const yaml = await yamlImport
34+
const rules = yaml.loadAll(props.rule || '{}')
35+
const json = rules.length === 1 ? rules[0] : rules
36+
navigator.clipboard.writeText(JSON.stringify(json, null, 2))
37+
showToast('Rule JSON copied to clipboard.')
38+
}
2939
</script>
3040

3141
<template>
3242
<div class="var-debugger">
33-
<table class="metavar-table" v-if="currentEnv">
34-
<thead>
35-
<tr>
36-
<td>MetaVar Name</td>
37-
<td>Matched Node(s)</td>
38-
</tr>
39-
</thead>
40-
<tbody v-if="currentEnv">
41-
<tr v-for="(val, key) in currentEnv">
42-
<td>{{key}}</td>
43-
<td>
44-
<code>
45-
{{val.text}}
46-
</code>
47-
</td>
48-
</tr>
49-
</tbody>
50-
<tfoot >
43+
<template v-if="currentEnv">
44+
<table class="metavar-table">
45+
<thead>
46+
<tr>
47+
<td>MetaVar Name</td>
48+
<td>Matched Node(s)</td>
49+
</tr>
50+
</thead>
51+
<tbody v-if="currentEnv">
52+
<tr v-for="(val, key) in currentEnv">
53+
<td>{{key}}</td>
54+
<td>
55+
<code>
56+
{{val.text}}
57+
</code>
58+
</td>
59+
</tr>
60+
</tbody>
61+
</table>
62+
<div>
5163
<div class="choose-match-division" />
5264
<button @click="decrement">❮</button>
5365
<span class="match-count">{{ currentIndex + 1 }}/{{props.envs.length}} match(es)</span>
5466
<button @click="increment">❯</button>
55-
</tfoot>
56-
</table>
67+
<button @click="copyJson" class="copy-json" data-title="Copy Rule as JSON" title-up>JSON</button>
68+
</div>
69+
</template>
5770
<Error v-else-if="error" :error="error"/>
5871
<div v-else class="vp-doc">
5972
<div class="custom-block warning no-match-tip">
@@ -126,4 +139,7 @@ tfoot button {
126139
.no-match-tip ul > li {
127140
margin-top: 4px;
128141
}
142+
.copy-json {
143+
margin-left: 0.5em;
144+
}
129145
</style>

‎website/src/components/Playground.vue

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ let codeMode = shallowRef('code')
9090
<Monaco language="yaml" v-model="config"/>
9191
</template>
9292
<template #panel>
93-
<EnvDisplay :envs="matchedEnvs" :error="ruleErrors"/>
93+
<EnvDisplay :envs="matchedEnvs" :error="ruleErrors" :rule="config"/>
9494
</template>
9595
</EditorWithPanel>
9696
</template>
@@ -192,6 +192,17 @@ let codeMode = shallowRef('code')
192192
bottom: 50%;
193193
transform: translate(-100%, 50%);
194194
}
195+
.playground [title-up]:before {
196+
left: 50%;
197+
top: -8px;
198+
transform: translateX(-50%);
199+
border-top-color: rgba(0, 0, 0, 0.5);
200+
}
201+
.playground [title-up]:after {
202+
left: 50%;
203+
top: -8px;
204+
transform: translate(-50%, -100%);
205+
}
195206
196207
.dark .playground [data-title]::after {
197208
color: var(--vp-c-brand-1);

‎website/src/components/ResetConfig.vue

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const emits = defineEmits<{
77
</script>
88

99
<template>
10-
<button class="reset" data-title="Reset your config" @click="emits('reset')">
10+
<button class="reset" data-title="Reset your config" title-up @click="emits('reset')">
1111
<IconReset />
1212
</button>
1313
</template>
@@ -23,15 +23,8 @@ const emits = defineEmits<{
2323
align-items: center;
2424
background: transparent;
2525
}
26-
.reset[data-title]:before {
27-
left: 50%;
28-
top: -8px;
29-
transform: translateX(-50%);
30-
border-top-color: rgba(0, 0, 0, 0.5);
31-
}
32-
[data-title]:after {
33-
left: 50%;
34-
top: -8px;
26+
27+
.reset[data-title]:after {
3528
transform: translate(-80%, -100%);
3629
}
3730
</style>

‎website/src/components/astGrep/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export { Mode } from './state'
88

99
type YAML = typeof import('js-yaml')
1010

11-
const yamlImport = import('js-yaml')
11+
export const yamlImport = import('js-yaml')
1212

1313
function buildRules(yaml: YAML, state: State) {
1414
let json = []

0 commit comments

Comments
 (0)
Please sign in to comment.