Skip to content

Commit f6a8780

Browse files
HerringtonDarkholmeHerringtonDarkholme
committedFeb 15, 2025
refactor: extract playground config out
1 parent 60f5a1f commit f6a8780

File tree

6 files changed

+80
-47
lines changed

6 files changed

+80
-47
lines changed
 

‎website/_data/parsers.ts

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
export const parserPaths = {
2+
javascript: 'tree-sitter-javascript.wasm',
3+
typescript: 'tree-sitter-typescript.wasm',
4+
tsx: 'tree-sitter-tsx.wasm',
5+
// not so well supported lang...
6+
bash: 'tree-sitter-bash.wasm',
7+
c: 'tree-sitter-c.wasm',
8+
csharp: 'tree-sitter-c_sharp.wasm',
9+
css: 'tree-sitter-css.wasm',
10+
cpp: 'tree-sitter-cpp.wasm',
11+
elixir: 'tree-sitter-elixir.wasm',
12+
go: 'tree-sitter-go.wasm',
13+
html: 'tree-sitter-html.wasm',
14+
java: 'tree-sitter-java.wasm',
15+
json: 'tree-sitter-json.wasm',
16+
kotlin: 'tree-sitter-kotlin.wasm',
17+
php: 'tree-sitter-php_only.wasm',
18+
python: 'tree-sitter-python.wasm',
19+
ruby: 'tree-sitter-ruby.wasm',
20+
rust: 'tree-sitter-rust.wasm',
21+
scala: 'tree-sitter-scala.wasm',
22+
swift: 'tree-sitter-swift.wasm',
23+
yaml: 'tree-sitter-yaml.wasm',
24+
}
25+
26+
export const repos = {
27+
bash: 'https://unpkg.com/tree-sitter-bash',
28+
c: 'https://unpkg.com/tree-sitter-c',
29+
cpp: 'https://unpkg.com/tree-sitter-cpp',
30+
csharp: 'https://unpkg.com/tree-sitter-c-sharp',
31+
css: 'https://unpkg.com/tree-sitter-css',
32+
go: 'https://unpkg.com/tree-sitter-go',
33+
html: 'https://unpkg.com/tree-sitter-html',
34+
java: 'https://unpkg.com/tree-sitter-java',
35+
javascript: 'https://unpkg.com/tree-sitter-javascript',
36+
json: 'https://unpkg.com/tree-sitter-json',
37+
php: 'https://unpkg.com/tree-sitter-php',
38+
python: 'https://unpkg.com/tree-sitter-python',
39+
ruby: 'https://unpkg.com/tree-sitter-ruby',
40+
rust: 'https://unpkg.com/tree-sitter-rust',
41+
scala: 'https://unpkg.com/tree-sitter-scala',
42+
tsx: 'https://unpkg.com/tree-sitter-typescript',
43+
typescript: 'https://unpkg.com/tree-sitter-typescript',
44+
}
45+
46+
// https://github.com/ast-grep/ast-grep/blob/main/crates/language/Cargo.toml
47+
export const versions: Record<string, string> = {
48+
bash: "0.23.3",
49+
c: "0.23.5",
50+
cpp: "0.23.4",
51+
csharp: "0.23.1",
52+
css: "0.23.1",
53+
go: "0.23.4",
54+
html: "0.23.2",
55+
java: "0.23.5",
56+
javascript: "0.23.1",
57+
json: "0.24.2",
58+
php: "0.23.11",
59+
python: "0.23.3",
60+
ruby: "0.23.1",
61+
rust: "0.23.2",
62+
scala: "0.23.4",
63+
tsx: "0.23.2",
64+
typescript: "0.23.2",
65+
}

‎website/src/components/Playground.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,4 +141,4 @@ let codeMode = shallowRef('code')
141141
pointer-events: none;
142142
}
143143
}
144-
</style>
144+
</style>

‎website/src/components/ResetConfig.vue

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,16 @@
22
import IconReset from '../icons/Reset.vue'
33
44
import type { State } from './astGrep/state'
5+
import { config, query, rewrite } from './astGrep/state'
56
67
const state = defineModel<State>({
78
required: true,
89
})
910
10-
const config = `
11-
# YAML Rule is more powerful!
12-
# https://ast-grep.github.io/guide/rule-config.html#rule
13-
rule:
14-
any:
15-
- pattern: console.log($A)
16-
- pattern: console.debug($A)
17-
fix:
18-
logger.log($A)
19-
`.trim()
20-
2111
const onReset = () => {
2212
state.value.config = config
23-
state.value.query = 'console.log($MATCH)'
24-
state.value.rewrite = 'logger.log($MATCH)'
13+
state.value.query = query
14+
state.value.rewrite = rewrite
2515
}
2616
</script>
2717

@@ -40,5 +30,6 @@ const onReset = () => {
4030
display: flex;
4131
justify-content: center;
4232
align-items: center;
33+
background: transparent;
4334
}
44-
</style>
35+
</style>

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

Lines changed: 3 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,10 @@
11
import init, { setupParser, initializeTreeSitter, findNodes, fixErrors } from 'ast-grep-wasm'
22
import type { InjectionKey, Ref } from 'vue'
33
import { shallowRef, watchEffect, provide } from 'vue'
4+
import { parserPaths } from '../../../_data/parsers'
45

56
export type SupportedLang = keyof typeof parserPaths
67

7-
const parserPaths = {
8-
javascript: 'tree-sitter-javascript.wasm',
9-
typescript: 'tree-sitter-typescript.wasm',
10-
tsx: 'tree-sitter-tsx.wasm',
11-
// not so well supported lang...
12-
bash: 'tree-sitter-bash.wasm',
13-
c: 'tree-sitter-c.wasm',
14-
csharp: 'tree-sitter-c_sharp.wasm',
15-
css: 'tree-sitter-css.wasm',
16-
cpp: 'tree-sitter-cpp.wasm',
17-
elixir: 'tree-sitter-elixir.wasm',
18-
go: 'tree-sitter-go.wasm',
19-
html: 'tree-sitter-html.wasm',
20-
java: 'tree-sitter-java.wasm',
21-
json: 'tree-sitter-json.wasm',
22-
kotlin: 'tree-sitter-kotlin.wasm',
23-
php: 'tree-sitter-php.wasm',
24-
python: 'tree-sitter-python.wasm',
25-
ruby: 'tree-sitter-ruby.wasm',
26-
rust: 'tree-sitter-rust.wasm',
27-
scala: 'tree-sitter-scala.wasm',
28-
swift: 'tree-sitter-swift.wasm',
29-
yaml: 'tree-sitter-yaml.wasm',
30-
}
31-
328
// monaco does not realize bash is shell but shell is not bash.
339
// use this mapping to highlight bash
3410
const monacoLangMapping: Record<string, string> = {
@@ -43,7 +19,7 @@ export const languageDisplayNames: Record<SupportedLang, string> = {
4319
typescript: 'TypeScript',
4420
tsx: 'TSX',
4521
// not so well supported lang...
46-
bash: 'Bash(beta)',
22+
bash: 'Bash',
4723
c: 'C',
4824
csharp: 'C#',
4925
css: 'CSS',
@@ -54,7 +30,7 @@ export const languageDisplayNames: Record<SupportedLang, string> = {
5430
java: 'Java',
5531
json: 'JSON',
5632
kotlin: 'Kotlin',
57-
php: 'PHP(alpha)',
33+
php: 'PHP',
5834
python: 'Python',
5935
ruby: 'Ruby',
6036
rust: 'Rust',

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,9 @@ if (true) {
5454
console.debug('matched by YAML')
5555
}`
5656

57-
const query = 'console.log($MATCH)'
58-
const config = `
57+
export const query = 'console.log($MATCH)'
58+
export const rewrite = 'logger.log($MATCH)'
59+
export const config = `
5960
# YAML Rule is more powerful!
6061
# https://ast-grep.github.io/guide/rule-config.html#rule
6162
rule:
@@ -70,7 +71,7 @@ const defaultState = {
7071
mode: Mode.Patch,
7172
lang: 'javascript' as const,
7273
query,
73-
rewrite: 'logger.log($MATCH)',
74+
rewrite,
7475
strictness: 'smart',
7576
selector: '',
7677
config,

‎website/src/icons/Reset.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
3-
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
3+
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
44
<path d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
55
<path d="M20 4v5h-5" />
66
</g>
77
</svg>
8-
</template>
8+
</template>

0 commit comments

Comments
 (0)