├── .github
    └── workflows
    │   └── autofix.yaml
├── .gitignore
├── .vscode
    └── launch.json
├── LICENSE
├── README.md
├── eslint.config.mjs
├── extension
    ├── configs.ts
    ├── getExampleFile.ts
    ├── getTokenizer.ts
    ├── index.ts
    ├── parsers.ts
    ├── useAutoStart.ts
    ├── usePreviewer.ts
    └── utils.ts
├── icon.png
├── index.html
├── package.json
├── pnpm-lock.yaml
├── src
    ├── App.vue
    ├── components
    │   ├── Button.vue
    │   ├── RenderToken.vue
    │   ├── Settings.vue
    │   └── TokenExplanation.vue
    ├── index.ts
    ├── states.ts
    ├── style.css
    └── tsconfig.json
├── tsconfig.json
├── types.ts
├── uno.config.mts
└── vite.config.mts


/.github/workflows/autofix.yaml:
--------------------------------------------------------------------------------
 1 | name: autofix.ci
 2 | on:
 3 |   pull_request:
 4 |   push:
 5 |     branches: [main]
 6 | permissions:
 7 |   contents: read
 8 | 
 9 | jobs:
10 |   autofix:
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |       - uses: actions/checkout@v4
14 | 
15 |       - uses: pnpm/action-setup@v2
16 | 
17 |       - uses: actions/setup-node@v4
18 |         with:
19 |           node-version: 20
20 |           cache: pnpm
21 | 
22 |       - run: pnpm i
23 | 
24 |       - run: pnpm lint:fix
25 | 
26 |       - uses: autofix-ci/action@d3e591514b99d0fca6779455ff8338516663f7cc
27 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | ui-dist
4 | .eslintcache
5 | *.vsix
6 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2.0",
 3 |   "configurations": [
 4 |     {
 5 |       "name": "Run Extension",
 6 |       "type": "extensionHost",
 7 |       "request": "launch",
 8 |       "args": [
 9 |         "--extensionDevelopmentPath=${workspaceFolder}"
10 |       ],
11 |       "outFiles": [
12 |         "${workspaceFolder}/dist/**/*.js"
13 |       ]
14 |     }
15 |   ]
16 | }
17 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 _Kerman <https://github.com/KermanX>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # tmLanguage Previewer
 2 | 
 3 | [![Reactive VSCode](https://img.shields.io/badge/Reactive-VSCode-%23007ACC?style=flat&labelColor=%23229863)](https://kermanx.github.io/reactive-vscode/)
 4 | 
 5 | A VS Code extension for previewing tmLanguage grammar files. Created with [Reactive VS Code](https://kermanx.github.io/reactive-vscode).
 6 | 
 7 | There is also a online version: [tmLanguage Playground](https://kermanx.github.io/tmLanguage-Playground/).
 8 | 
 9 | ## Usage
10 | 
11 | 1. Open a `.tmLanguage.json` file in VSCode. For example, `xyz.tmLanguage.json`.
12 | 2. Create a new file with the same name but with a `.example` infix. For example, `xyz.example.any`.
13 | 2. Click the icon on the top right of the editor to open the previewer.
14 | 
15 | ## Development
16 | 
17 | ### What's in the folder
18 | 
19 | - `package.json` - this is the manifest file in which you declare your extension and command.
20 | - `src/*` - this is the folder containing the webview code. (DOM environment)
21 | - `extension/*` - this is the folder containing the extension code. (Node.js environment)
22 | 
23 | ### Get up and running straight away
24 | 
25 | - Run `pnpm install` to install all necessary dependencies.
26 | - Run `pnpm dev` in a terminal to compile the extension.
27 | - Press `F5` to open a new window with your extension loaded.
28 | 
29 | ### Make changes
30 | 
31 | - You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`.
32 | - You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes.
33 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import antfu from '@antfu/eslint-config'
3 | 
4 | export default antfu()
5 | 


--------------------------------------------------------------------------------
/extension/configs.ts:
--------------------------------------------------------------------------------
 1 | import type { ConfigType } from 'reactive-vscode'
 2 | import { computed, defineConfigs } from 'reactive-vscode'
 3 | import { ViewColumn } from 'vscode'
 4 | 
 5 | const { autoStart, grammarExts, exampleSuffixes, previewColumn: previewColumnRaw } = defineConfigs('tmlanguage-previewer', {
 6 |   autoStart: Boolean,
 7 |   grammarExts: Object as ConfigType<Record<string, string>>,
 8 |   exampleSuffixes: Object as ConfigType<string[]>,
 9 |   previewColumn: Object as ConfigType<'active' | 'beside' | 'one' | 'two' | 'three'>,
10 | })
11 | 
12 | export {
13 |   autoStart,
14 |   grammarExts,
15 |   exampleSuffixes,
16 | }
17 | 
18 | export const previewColumn = computed(() => {
19 |   switch (previewColumnRaw.value) {
20 |     case 'active': return ViewColumn.Active
21 |     case 'beside': return ViewColumn.Beside
22 |     case 'one': return ViewColumn.One
23 |     case 'two': return ViewColumn.Two
24 |     case 'three': return ViewColumn.Three
25 |   }
26 | })
27 | 


--------------------------------------------------------------------------------
/extension/getExampleFile.ts:
--------------------------------------------------------------------------------
 1 | import { basename } from 'node:path'
 2 | import { RelativePattern, Uri, workspace } from 'vscode'
 3 | import { exampleSuffixes } from './configs'
 4 | 
 5 | export async function findExampleFile(grammarUri: Uri, grammarExt: string): Promise<Uri[]> {
 6 |   const grammarDirectory = Uri.joinPath(grammarUri, '..')
 7 |   const grammarBasename = basename(grammarUri.fsPath, grammarExt)
 8 |   const exampleUris: Uri[] = []
 9 |   for (const suffix of exampleSuffixes.value) {
10 |     exampleUris.push(...await workspace.findFiles(
11 |       new RelativePattern(grammarDirectory, grammarBasename + suffix),
12 |       new RelativePattern(grammarDirectory, grammarBasename),
13 |     ))
14 |   }
15 |   return exampleUris
16 | }
17 | 


--------------------------------------------------------------------------------
/extension/getTokenizer.ts:
--------------------------------------------------------------------------------
 1 | import { bundledLanguages, createHighlighter } from 'shiki'
 2 | 
 3 | export async function getTokenizer(grammars: any[], dark: boolean) {
 4 |   try {
 5 |     const theme = dark ? 'vitesse-dark' : 'vitesse-light'
 6 |     const grammarLangs = grammars.map(g => g.name?.toLowerCase())
 7 |     const highlighter = await createHighlighter({
 8 |       themes: [theme],
 9 |       langs: Object.keys(bundledLanguages)
10 |         .filter(n => !grammarLangs.includes(n.toLowerCase()))
11 |         .concat(grammars),
12 |     })
13 | 
14 |     return [(code: string, lang: string) => {
15 |       try {
16 |         return highlighter.codeToTokensBase(code, {
17 |           lang: lang.toLowerCase() as any,
18 |           theme,
19 |           includeExplanation: true,
20 |         })
21 |       }
22 |       catch (e) {
23 |         return String(e)
24 |       }
25 |     }, highlighter] as const
26 |   }
27 |   catch (e) {
28 |     return [() => String(e), null] as const
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/extension/index.ts:
--------------------------------------------------------------------------------
 1 | import { defineExtension, useCommand } from 'reactive-vscode'
 2 | import { window } from 'vscode'
 3 | import { useAutoStart } from './useAutoStart'
 4 | import { usePreviewer } from './usePreviewer'
 5 | import { logger } from './utils'
 6 | 
 7 | // eslint-disable-next-line no-restricted-syntax
 8 | export = defineExtension(() => {
 9 |   logger.info('Extension Activated')
10 | 
11 |   useCommand('tmlanguage-previewer.open', () => {
12 |     const editor = window.activeTextEditor
13 |     if (!editor) {
14 |       window.showErrorMessage('No active text editor')
15 |       return
16 |     }
17 |     logger.info('Opening Previewer')
18 |     usePreviewer(editor)
19 |   })
20 | 
21 |   useAutoStart()
22 | })
23 | 


--------------------------------------------------------------------------------
/extension/parsers.ts:
--------------------------------------------------------------------------------
1 | export const parsers = {
2 |   json: async (source: string) => JSON.parse(source),
3 |   yaml: async (source: string) => (await import('js-yaml')).load(source),
4 | }
5 | 


--------------------------------------------------------------------------------
/extension/useAutoStart.ts:
--------------------------------------------------------------------------------
 1 | import { useActiveTextEditor, watchEffect } from 'reactive-vscode'
 2 | import { autoStart } from './configs'
 3 | import { usePreviewer } from './usePreviewer'
 4 | 
 5 | export function useAutoStart() {
 6 |   const activeTextEditor = useActiveTextEditor()
 7 |   watchEffect(() => {
 8 |     if (!autoStart.value || !activeTextEditor.value)
 9 |       return
10 |     const doc = activeTextEditor.value.document
11 |     if (doc.languageId.includes('json') && doc.uri.fsPath.toLowerCase().endsWith('.tmlanguage.json'))
12 |       usePreviewer(activeTextEditor.value)
13 |   })
14 | }
15 | 


--------------------------------------------------------------------------------
/extension/usePreviewer.ts:
--------------------------------------------------------------------------------
  1 | import { Buffer } from 'node:buffer'
  2 | import type { EffectScope } from 'reactive-vscode'
  3 | import { effectScope, extensionContext, reactive, ref, shallowReactive, shallowRef, useDisposable, useDocumentText, useIsDarkTheme, watchEffect } from 'reactive-vscode'
  4 | import type { TextDocument, TextEditor, WebviewPanel } from 'vscode'
  5 | import { Uri, window, workspace } from 'vscode'
  6 | import type { GrammarFile } from '../types'
  7 | import { loadIndexHtml, logger } from './utils'
  8 | import { getTokenizer } from './getTokenizer'
  9 | import { findExampleFile } from './getExampleFile'
 10 | import { grammarExts, previewColumn } from './configs'
 11 | import { parsers } from './parsers'
 12 | 
 13 | const grammarUriToPanel = new WeakMap<Uri, WebviewPanel>()
 14 | 
 15 | export function usePreviewer(editor: TextEditor) {
 16 |   const isDark = useIsDarkTheme()
 17 |   const entryUri = editor.document.uri
 18 |   if (grammarUriToPanel.has(entryUri)) {
 19 |     grammarUriToPanel.get(entryUri)!.reveal()
 20 |     return
 21 |   }
 22 | 
 23 |   const grammarExt = Object.keys(grammarExts.value)
 24 |     .find(ext => entryUri.fsPath.toLowerCase().endsWith(ext.toLowerCase())) ?? ''
 25 |   const parser = parsers[grammarExts.value[grammarExt] as keyof typeof parsers]
 26 | 
 27 |   if (!grammarExt || !parser) {
 28 |     window.showErrorMessage(`Unsupported file type for ${entryUri.fsPath}. Supported file types: ${Object.keys(grammarExts.value).join(', ')}`)
 29 |     return
 30 |   }
 31 | 
 32 |   const panel = useDisposable(window.createWebviewPanel(
 33 |     'tmlanguage-previewer',
 34 |     'TmLanguage Previewer',
 35 |     {
 36 |       viewColumn: previewColumn.value,
 37 |       preserveFocus: true,
 38 |     },
 39 |     {
 40 |       enableScripts: true,
 41 |       localResourceRoots: [Uri.joinPath(extensionContext.value!.extensionUri, 'dist/webview')],
 42 |       retainContextWhenHidden: true,
 43 |     },
 44 |   ))
 45 |   grammarUriToPanel.set(entryUri, panel)
 46 | 
 47 |   panel.iconPath = Uri.joinPath(extensionContext.value!.extensionUri, 'icon.png')
 48 | 
 49 |   loadIndexHtml(panel.webview)
 50 | 
 51 |   function postMessage(message: any) {
 52 |     // console.log('ext:postMessage', message)
 53 |     panel.webview.postMessage(message)
 54 |   }
 55 | 
 56 |   async function onReady() {
 57 |     logger.info(`Webview for ${entryUri.toString()} ready.`)
 58 |     const exampleUris = shallowRef(await findExampleFile(entryUri, grammarExt))
 59 |     const exampleUri = shallowRef<Uri | undefined>(exampleUris.value[0])
 60 |     const exampleDoc = shallowRef<TextDocument>()
 61 |     watchEffect(() => {
 62 |       const uri = exampleUri.value
 63 |       if (uri)
 64 |         workspace.openTextDocument(uri).then(d => exampleDoc.value = d)
 65 |     })
 66 |     const exampleCode = useDocumentText(exampleDoc)
 67 |     const exampleLang = ref<string | null>(null)
 68 | 
 69 |     const grammarFiles: Record<string, GrammarFile> = reactive({
 70 |       [entryUri.toString()]: {
 71 |         name: null,
 72 |         scope: null,
 73 |         path: workspace.asRelativePath(entryUri),
 74 |         enabled: true,
 75 |       },
 76 |     })
 77 |     const grammarDocs: Record<string, TextDocument> = shallowReactive({
 78 |       [entryUri.toString()]: editor.document,
 79 |     })
 80 |     const forceUpdateGrammars = ref(0)
 81 | 
 82 |     const tokenizer = shallowRef<Awaited<ReturnType<typeof getTokenizer>> | null>(null)
 83 |     watchEffect((onCleanup) => {
 84 |       // eslint-disable-next-line ts/no-unused-expressions
 85 |       forceUpdateGrammars.value
 86 |       let cancelled = false
 87 |       onCleanup(() => {
 88 |         cancelled = true
 89 |       })
 90 |       const docs = { ...grammarDocs }
 91 |       const dark = isDark.value;
 92 |       (async () => {
 93 |         try {
 94 |           const grammars: any[] = []
 95 |           for (const uri in docs) {
 96 |             const doc = docs[uri]
 97 |             if (!doc)
 98 |               continue
 99 |             const g = await parser(doc.getText())
100 |             if (cancelled)
101 |               return
102 |             if (g.name)
103 |               grammarFiles[uri].name = g.name
104 |             if (g.scopeName)
105 |               grammarFiles[uri].scope = g.scopeName
106 |             if (grammarFiles[uri].enabled)
107 |               grammars.push(g)
108 |           }
109 |           const t = await getTokenizer(grammars, dark)
110 |           if (cancelled)
111 |             return
112 |           tokenizer.value?.[1]?.dispose()
113 |           tokenizer.value = t
114 |         }
115 |         catch (e) {
116 |           if (cancelled)
117 |             return
118 |           tokenizer.value = [() => String(e), null]
119 |         }
120 |       })()
121 |     })
122 | 
123 |     useDisposable(workspace.onDidChangeTextDocument(({ document }) => {
124 |       if (grammarFiles[document.uri.toString()])
125 |         forceUpdateGrammars.value++
126 |     }))
127 | 
128 |     watchEffect(() => {
129 |       if (tokenizer.value && exampleCode.value && exampleUri.value) {
130 |         postMessage({
131 |           type: 'ext:update-tokens',
132 |           tokens: tokenizer.value[0](exampleCode.value, exampleLang.value || grammarFiles[editor.document.uri.toString()].name || 'plaintext'),
133 |           code: exampleCode.value,
134 |           grammarFiles: { ...grammarFiles },
135 |           examplePath: workspace.asRelativePath(exampleUri.value),
136 |         })
137 |       }
138 |     })
139 | 
140 |     let writeExampleTimer: NodeJS.Timeout | null = null
141 |     panel.webview.onDidReceiveMessage((message) => {
142 |       if (message.type === 'ui:update-example') {
143 |         exampleCode.value = message.code
144 |         const uri = exampleUri.value
145 |         if (uri) {
146 |           if (writeExampleTimer)
147 |             clearTimeout(writeExampleTimer)
148 |           writeExampleTimer = setTimeout(async () => {
149 |             await workspace.fs.writeFile(uri, Buffer.from(message.code))
150 |           }, 500)
151 |         }
152 |       }
153 |       else if (message.type === 'ui:open-grammar-file') {
154 |         window.showTextDocument(editor.document)
155 |       }
156 |       else if (message.type === 'ui:open-example-file') {
157 |         if (exampleDoc.value)
158 |           window.showTextDocument(exampleDoc.value)
159 |       }
160 |       else if (message.type === 'ui:choose-example-file') {
161 |         window.showOpenDialog({
162 |           canSelectFiles: true,
163 |           canSelectFolders: false,
164 |           canSelectMany: false,
165 |           defaultUri: exampleUri.value,
166 |         }).then((uris) => {
167 |           const uri = uris?.[0]
168 |           if (uri) {
169 |             exampleUri.value = uri
170 |           }
171 |         })
172 |       }
173 |       else if (message.type === 'ui:add-grammar') {
174 |         window.showOpenDialog({
175 |           canSelectFiles: true,
176 |           canSelectFolders: false,
177 |           canSelectMany: false,
178 |           defaultUri: exampleUri.value,
179 |           filters: {
180 |             'TmLanguage JSON': ['json'],
181 |           },
182 |         }).then(async (uris) => {
183 |           if (uris) {
184 |             for (const uri of uris) {
185 |               const doc = await workspace.openTextDocument(uri)
186 |               grammarFiles[uri.toString()] = {
187 |                 name: null,
188 |                 scope: null,
189 |                 path: workspace.asRelativePath(uri),
190 |                 enabled: true,
191 |               }
192 |               grammarDocs[uri.toString()] = doc
193 |             }
194 |           }
195 |         })
196 |       }
197 |       else if (message.type === 'ui:remove-grammar') {
198 |         const uri = message.uri
199 |         delete grammarFiles[uri]
200 |         delete grammarDocs[uri]
201 |       }
202 |       else if (message.type === 'ui:toggle-grammar') {
203 |         const uri = message.uri
204 |         if (grammarFiles[uri])
205 |           grammarFiles[uri].enabled = message.enabled
206 |       }
207 |     })
208 |   }
209 | 
210 |   let scope: EffectScope | null = null
211 |   panel.webview.onDidReceiveMessage((message) => {
212 |     if (message.type === 'ui:ready') {
213 |       scope?.stop()
214 |       scope = effectScope()
215 |       scope.run(onReady)
216 |     }
217 |   })
218 | 
219 |   panel.onDidDispose(() => {
220 |     grammarUriToPanel.delete(entryUri)
221 |     scope?.stop()
222 |   })
223 | }
224 | 


--------------------------------------------------------------------------------
/extension/utils.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable node/prefer-global/process */
 2 | /// <reference types="@tomjs/vite-plugin-vscode/env" />
 3 | import { extensionContext, useLogger } from 'reactive-vscode'
 4 | import type { Webview } from 'vscode'
 5 | 
 6 | export function loadIndexHtml(webview: Webview) {
 7 |   webview.html = process.env.VITE_DEV_SERVER_URL
 8 |     ? __getWebviewHtml__(process.env.VITE_DEV_SERVER_URL)
 9 |     : __getWebviewHtml__(webview, extensionContext.value!)
10 | }
11 | 
12 | export const logger = useLogger('tmLanguage Previewer')
13 | 


--------------------------------------------------------------------------------
/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kermanx/tmLanguage-Previewer/40bee2ce5b0842dafbaf3e776110a6ca6e065ed9/icon.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <title>tmLanguage Previewer</title>
 7 |     <script type="module" src="./src/index.ts"></script>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "publisher": "kermanx",
  3 |   "name": "tmlanguage-previewer",
  4 |   "displayName": "tmLanguage Previewer",
  5 |   "type": "commonjs",
  6 |   "version": "0.0.4",
  7 |   "private": true,
  8 |   "packageManager": "pnpm@9.15.4",
  9 |   "repository": {
 10 |     "type": "git",
 11 |     "url": "https://github.com/KermanX/tmLanguage-Previewer"
 12 |   },
 13 |   "categories": [
 14 |     "Other"
 15 |   ],
 16 |   "main": "./dist/extension/index.js",
 17 |   "icon": "./icon.png",
 18 |   "files": [
 19 |     "LICENSE",
 20 |     "dist",
 21 |     "icon.png",
 22 |     "package.json"
 23 |   ],
 24 |   "engines": {
 25 |     "vscode": "^1.89.0"
 26 |   },
 27 |   "activationEvents": [
 28 |     "onCommand:*",
 29 |     "onLanguage:json"
 30 |   ],
 31 |   "contributes": {
 32 |     "commands": [
 33 |       {
 34 |         "command": "tmlanguage-previewer.open",
 35 |         "title": "Open Preview to the side",
 36 |         "icon": "./icon.png"
 37 |       }
 38 |     ],
 39 |     "configuration": {
 40 |       "title": "tmLanguage Previewer",
 41 |       "properties": {
 42 |         "tmlanguage-previewer.autoStart": {
 43 |           "type": "boolean",
 44 |           "default": false,
 45 |           "description": "Should the previewer automatically open when a tmLanguage file is opened?"
 46 |         },
 47 |         "tmlanguage-previewer.grammarExts": {
 48 |           "type": "object",
 49 |           "properties": {},
 50 |           "additionalProperties": {
 51 |             "type": "string"
 52 |           },
 53 |           "default": {
 54 |             ".tmLanguage.json": "json"
 55 |           },
 56 |           "description": "File extensions to parser mapping."
 57 |         },
 58 |         "tmlanguage-previewer.exampleSuffixes": {
 59 |           "type": "array",
 60 |           "items": {
 61 |             "type": "string"
 62 |           },
 63 |           "default": [
 64 |             ".example.*",
 65 |             "-example.*",
 66 |             ".*"
 67 |           ],
 68 |           "description": "The possible suffixes for example files."
 69 |         },
 70 |         "tmlanguage-previewer.previewColumn": {
 71 |           "type": "string",
 72 |           "enum": [
 73 |             "active",
 74 |             "beside",
 75 |             "end",
 76 |             "one",
 77 |             "two",
 78 |             "three"
 79 |           ],
 80 |           "default": "beside",
 81 |           "description": "Controls where the preview will be shown when opening a tmLanguage file."
 82 |         }
 83 |       }
 84 |     },
 85 |     "menus": {
 86 |       "editor/title": [
 87 |         {
 88 |           "command": "tmlanguage-previewer.open",
 89 |           "group": "navigation",
 90 |           "when": "editorLangId == json && resourceFilename =~ /\\.tmLanguage\\..*$/i"
 91 |         }
 92 |       ]
 93 |     }
 94 |   },
 95 |   "scripts": {
 96 |     "build": "vite build",
 97 |     "dev": "vite",
 98 |     "typecheck": "tsc --noEmit",
 99 |     "vscode:prepublish": "pnpm run build",
100 |     "lint": "eslint . --cache",
101 |     "lint:fix": "eslint . --cache --fix",
102 |     "prepare": "simple-git-hooks"
103 |   },
104 |   "devDependencies": {
105 |     "@antfu/eslint-config": "^2.27.3",
106 |     "@iconify-json/carbon": "^1.2.6",
107 |     "@reactive-vscode/vueuse": "^0.2.10",
108 |     "@tomjs/vite-plugin-vscode": "^2.6.0",
109 |     "@types/js-yaml": "^4.0.9",
110 |     "@types/node": "18.x",
111 |     "@types/vscode": "^1.89.0",
112 |     "@unocss/reset": "^0.61.9",
113 |     "@vitejs/plugin-vue": "^5.2.1",
114 |     "eslint": "^9.20.0",
115 |     "floating-vue": "^5.2.2",
116 |     "js-yaml": "^4.1.0",
117 |     "lint-staged": "^15.4.3",
118 |     "reactive-vscode": "^0.2.10",
119 |     "shiki": "^1.29.2",
120 |     "simple-git-hooks": "^2.11.1",
121 |     "typescript": "^5.7.3",
122 |     "unocss": "^0.61.9",
123 |     "vite": "^5.4.14",
124 |     "vue": "^3.5.13"
125 |   },
126 |   "simple-git-hooks": {
127 |     "pre-commit": "pnpm lint-staged"
128 |   },
129 |   "lint-staged": {
130 |     "*": "eslint --fix"
131 |   }
132 | }
133 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { hideAllPoppers } from 'floating-vue'
  3 | import { computed, ref, watch } from 'vue'
  4 | import type { TokensData } from '../types'
  5 | import RenderToken from './components/RenderToken.vue'
  6 | import Settings from './components/Settings.vue'
  7 | import { examplePath, grammarFiles, openExampleFile, openGrammarFile, vscode } from './states'
  8 | 
  9 | const tokens = ref<TokensData | null>(null)
 10 | const exampleCode = ref('import { a } from "A"')
 11 | const editing = ref(false)
 12 | const editingBuffer = ref('')
 13 | const editingEl = ref<HTMLTextAreaElement | null>(null)
 14 | const settingsShown = ref(false)
 15 | const enabledGrammars = computed(() => Object.entries(grammarFiles.value ?? {}).filter(([_, file]) => file.enabled))
 16 | 
 17 | function startEdit() {
 18 |   editingBuffer.value = exampleCode.value
 19 |   editing.value = true
 20 |   editingEl.value?.focus()
 21 |   editingEl.value?.scrollTo(0, 0)
 22 | }
 23 | 
 24 | function finishEdit() {
 25 |   if (editing.value) {
 26 |     editing.value = false
 27 |     exampleCode.value = editingBuffer.value
 28 |     vscode.postMessage({ type: 'ui:update-example', code: exampleCode.value })
 29 |   }
 30 | }
 31 | 
 32 | function updateEdit() {
 33 |   editingEl.value?.scrollTo(0, 0)
 34 |   vscode.postMessage({ type: 'ui:update-example', code: editingBuffer.value })
 35 | }
 36 | 
 37 | function openSettings() {
 38 |   finishEdit()
 39 |   settingsShown.value = true
 40 | }
 41 | 
 42 | window.addEventListener('message', (event) => {
 43 |   if (event.data.type === 'ext:update-tokens') {
 44 |     hideAllPoppers()
 45 |     tokens.value = event.data.tokens
 46 |     if (!editing.value)
 47 |       exampleCode.value = event.data.code
 48 |     grammarFiles.value = event.data.grammarFiles
 49 |     examplePath.value = event.data.examplePath
 50 |   }
 51 | })
 52 | vscode.postMessage({ type: 'ui:ready' })
 53 | 
 54 | watch(editing, hideAllPoppers)
 55 | </script>
 56 | 
 57 | <template>
 58 |   <div fixed inset-0 flex flex-col :class="settingsShown ? 'filter-blur-5' : ''" @dblclick="startEdit">
 59 |     <div h-0 flex-grow relative class="group">
 60 |       <div absolute inset-0 overflow-auto font-mono>
 61 |         <div v-if="Array.isArray(tokens)" relative min-w-max min-h-max h-full>
 62 |           <!-- eslint-disable-next-line vue/require-component-is -->
 63 |           <component is="pre" class="shiki relative px-4 py-2">
 64 |             <template v-for="line, i in tokens" :key="i">
 65 |               <br v-if="i !== 0">
 66 |               <RenderToken v-for="token, j in line" :key="j" :token />
 67 |             </template>
 68 |             &nbsp;
 69 |             <textarea
 70 |               v-if="editing" ref="editingEl" v-model="editingBuffer"
 71 |               class="absolute inset-0 resize-none pl-4 pt-2 text-transparent bg-transparent !outline-none caret-white overflow-y-hidden"
 72 |               @blur="finishEdit" @input="updateEdit" @keydown.enter.ctrl="finishEdit"
 73 |             />
 74 |           </component>
 75 |         </div>
 76 |         <div v-else-if="!tokens" class="p-4 text-center text-faded">
 77 |           loading...
 78 |         </div>
 79 |         <div v-else class="p-4 text-center text-red">
 80 |           {{ tokens }}
 81 |         </div>
 82 |       </div>
 83 |       <template v-if="Array.isArray(tokens)">
 84 |         <button
 85 |           v-if="editing" absolute right-4 top-2 p-2 text-xl class="hover:bg-gray/15" rounded-lg
 86 |           @click="finishEdit"
 87 |         >
 88 |           <div op0 group-hover:op80 i-carbon-checkmark class="hide-when-popoever" />
 89 |         </button>
 90 |         <button v-else absolute right-4 top-2 p-2 text-xl class="hover:bg-gray/15" rounded-lg @click="startEdit">
 91 |           <div op0 group-hover:op80 i-carbon-edit class="hide-when-popoever" />
 92 |         </button>
 93 |         <div v-if="editing" absolute inset-0 pointer-events-none style="box-shadow: inset 0 0 4px #FFFFFFBB" />
 94 |       </template>
 95 |     </div>
 96 |     <div px-3 py-1.5 b-t b-gray b-op-30 text-xs select-none flex flex-wrap items-center>
 97 |       <div pr-2>
 98 |         <span font-bold>
 99 |           Grammar{{ enabledGrammars.length > 1 ? 's' : '' }}:
100 |         </span>
101 |         <template v-if="enabledGrammars.length">
102 |           <button op90 hover:op100 hover:underline @click="openGrammarFile">
103 |             {{ enabledGrammars[0][1].path }}
104 |           </button>
105 |           <span v-if="enabledGrammars.length > 1" op70 hover:op90 @click="openSettings">
106 |             +{{ enabledGrammars.length - 1 }}
107 |           </span>
108 |         </template>
109 |         <span v-else op50>
110 |           No grammar enabled
111 |         </span>
112 |       </div>
113 |       <div v-if="examplePath">
114 |         <span font-bold>
115 |           Example:
116 |         </span>
117 |         <button op90 hover:op100 hover:underline @click="openExampleFile">
118 |           {{ examplePath }}
119 |         </button>
120 |       </div>
121 |       <div flex-grow flex>
122 |         <div flex-grow />
123 |         <button i-carbon-settings self-end justify-end text-lg op80 hover:op90 @click="openSettings" />
124 |       </div>
125 |     </div>
126 |   </div>
127 |   <Settings v-model="settingsShown" />
128 | </template>
129 | 
130 | <style>
131 | body.v-popper--some-open .hide-when-popoever {
132 |   opacity: 0 !important;
133 | }
134 | </style>
135 | 


--------------------------------------------------------------------------------
/src/components/Button.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <button text-xs op90 hover:op100 hover:bg-op10 hover:bg-gray px-1.5 py-.5 border="1 base rounded">
3 |     <slot />
4 |   </button>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/components/RenderToken.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { Tooltip, hideAllPoppers } from 'floating-vue'
 3 | import type { ThemedToken } from 'shiki'
 4 | import { ref } from 'vue'
 5 | import TokenExplanation from './TokenExplanation.vue'
 6 | 
 7 | defineProps<{
 8 |   token: ThemedToken
 9 | }>()
10 | 
11 | const tooltipVisible = ref(false)
12 | function updateShown(s: boolean) {
13 |   tooltipVisible.value = s
14 |   if (s)
15 |     hideAllPoppers()
16 | }
17 | </script>
18 | 
19 | <template>
20 |   <Tooltip
21 |     class="inline"
22 |     placement="bottom"
23 |     :delay="{ show: 0, hide: 100 }"
24 |     show-group="token"
25 |     auto-hide
26 |     :triggers="['click', 'hover', 'focus']"
27 |     :popper-triggers="['hover']"
28 |     @update:shown="updateShown"
29 |   >
30 |     <template #default>
31 |       <span
32 |         :style="{ color: token.color }"
33 |         :class="tooltipVisible ? 'outline' : ''"
34 |         v-text="token.content"
35 |       />
36 |     </template>
37 |     <template #popper>
38 |       <TokenExplanation :token="token" />
39 |     </template>
40 |   </Tooltip>
41 | </template>
42 | 


--------------------------------------------------------------------------------
/src/components/Settings.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { chooseExampleFile, examplePath, grammarFiles, openExampleFile, vscode } from '../states'
 3 | import Button from './Button.vue'
 4 | 
 5 | const shown = defineModel({ type: Boolean, required: true })
 6 | 
 7 | function addGrammarFile() {
 8 |   vscode.postMessage({ type: 'ui:add-grammar' })
 9 | }
10 | 
11 | function removeGrammar(uri: string) {
12 |   vscode.postMessage({ type: 'ui:remove-grammar', uri })
13 | }
14 | 
15 | function toggleGrammar(uri: string, enabled: boolean) {
16 |   vscode.postMessage({ type: 'ui:toggle-grammar', uri, enabled })
17 | }
18 | </script>
19 | 
20 | <template>
21 |   <div v-if="shown" text-black dark:text-white fixed inset-0 backdrop-blur-2xl flex items-center justify-center @click="shown = false">
22 |     <div min-w-60vw max-w-90vw min-h-60vh max-h-90vh px-4 py-3 border="1 gray rounded" dark:bg-dark bg-op80 flex flex-col @click.stop>
23 |       <h2 font-bold text-lg mb-2>
24 |         Settings
25 |       </h2>
26 |       <div mb-2>
27 |         <h3 text-sm mb-1 flex>
28 |           <span flex-grow>Grammar</span>
29 |           <Button mr-1 @click="addGrammarFile">
30 |             Add
31 |           </Button>
32 |         </h3>
33 |         <div grid items-center class="grid-cols-[min-content_1fr]" gap-x-2 px-1>
34 |           <template v-for="file, uri, index in grammarFiles" :key="uri">
35 |             <span font-mono :class="file.enabled ? 'op90' : 'op60'">
36 |               <code>{{ file.scope }}</code>
37 |             </span>
38 |             <div font-mono grid class="grid-cols-[1fr_min-content_min-content]" items-center gap-1 :class="file.enabled ? '' : 'op70'">
39 |               <div op70 text-wrap break-anywhere>
40 |                 {{ file.path }}
41 |               </div>
42 |               <div v-if="file.enabled" i-carbon-view op70 hover:op90 @click="toggleGrammar(uri, false)" />
43 |               <div v-else i-carbon-view-off op70 hover:op90 @click="toggleGrammar(uri, true)" />
44 |               <div i-carbon-trash-can op70 hover:op90 :class="index === 0 ? '!op10' : ''" @click="index !== 0 && removeGrammar(uri)" />
45 |             </div>
46 |           </template>
47 |         </div>
48 |       </div>
49 |       <div mt-2>
50 |         <h3 text-sm flex mb-1>
51 |           <span flex-grow>Example</span>
52 |           <Button mr-1 @click="chooseExampleFile">
53 |             Choose
54 |           </Button>
55 |         </h3>
56 |         <div flex gap-2 items-center px-1>
57 |           <span flex-grow op70 font-mono text-wrap break-anywhere>
58 |             {{ examplePath }}
59 |           </span>
60 |           <div i-carbon-launch op70 hover:op100 hover:underline @click="openExampleFile" />
61 |         </div>
62 |       </div>
63 |       <div flex-grow />
64 |       <div text-right>
65 |         <!-- <a i-carbon-logo-github text-lg op80 hover:op90 mr-1 href="https://github.com/KermanX/tmLanguage-Playground" target="_blank" /> -->
66 |         <Button @click="shown = false">
67 |           Close
68 |         </Button>
69 |       </div>
70 |     </div>
71 |   </div>
72 | </template>
73 | 


--------------------------------------------------------------------------------
/src/components/TokenExplanation.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { ThemedToken } from 'shiki'
 3 | import { computed } from 'vue'
 4 | 
 5 | const props = defineProps<{
 6 |   token: ThemedToken
 7 | }>()
 8 | 
 9 | const displayedContent = computed(() => {
10 |   return props.token.content.replaceAll(' ', '·')
11 | })
12 | 
13 | const scopes = computed(() => {
14 |   return props.token.explanation?.[0].scopes
15 | })
16 | </script>
17 | 
18 | <template>
19 |   <div font-mono p-2 min-w-100 w-fit>
20 |     <div flex items-end gap-4 mb-2>
21 |       <div text-left text-lg>
22 |         {{ displayedContent }}
23 |       </div>
24 |       <div text-right flex-grow>
25 |         {{ displayedContent.length }} char{{ displayedContent.length > 1 ? 's' : '' }}
26 |       </div>
27 |     </div>
28 |     <div>
29 |       <div v-for="s, i in scopes" :key="i">
30 |         {{ s.scopeName }}
31 |       </div>
32 |     </div>
33 |   </div>
34 | </template>
35 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | import '@unocss/reset/tailwind.css'
 5 | import 'uno.css'
 6 | import './style.css'
 7 | import 'floating-vue/style.css'
 8 | 
 9 | createApp(App).mount('#app')
10 | 


--------------------------------------------------------------------------------
/src/states.ts:
--------------------------------------------------------------------------------
 1 | import { ref, shallowRef } from 'vue'
 2 | import type { GrammarFile } from '../types'
 3 | 
 4 | export const grammarFiles = shallowRef<Record<string, GrammarFile> | null>(null)
 5 | export const examplePath = ref<string | null>(null)
 6 | 
 7 | declare const acquireVsCodeApi: () => any
 8 | export const vscode = acquireVsCodeApi()
 9 | 
10 | export function openGrammarFile() {
11 |   vscode.postMessage({ type: 'ui:open-grammar-file' })
12 | }
13 | 
14 | export function openExampleFile() {
15 |   vscode.postMessage({ type: 'ui:open-example-file' })
16 | }
17 | 
18 | export function chooseExampleFile() {
19 |   vscode.postMessage({ type: 'ui:choose-example-file' })
20 | }
21 | 


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body,
 3 | #app {
 4 |   height: 100vh;
 5 |   margin: 0;
 6 |   padding: 0;
 7 |   overflow: hidden;
 8 |   font-family: DM Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"
 9 | }
10 | 
11 | html.vscode-dark {
12 |   color-scheme: dark;
13 | }
14 | 
15 | body {
16 |   --uno: bg-base;
17 | }
18 | 
19 | /* Overrides Floating Vue */
20 | .v-popper--theme-dropdown .v-popper__inner,
21 | .v-popper--theme-tooltip .v-popper__inner {
22 |   --at-apply: 'bg-tooltip color-base font-sans rounded border border-base shadow dark:shadow-2xl';
23 |   box-shadow: 0 6px 30px #0000001a;
24 | }
25 | 
26 | .v-popper--theme-tooltip .v-popper__arrow-inner,
27 | .v-popper--theme-dropdown .v-popper__arrow-inner {
28 |   visibility: visible;
29 |   --at-apply: 'border-white dark:border-base';
30 | }
31 | 
32 | .v-popper--theme-tooltip .v-popper__arrow-outer,
33 | .v-popper--theme-dropdown .v-popper__arrow-outer {
34 |   --at-apply: border-base;
35 | }
36 | 
37 | .v-popper--theme-tooltip.v-popper--shown,
38 | .v-popper--theme-tooltip.v-popper--shown * {
39 |   transition: none !important;
40 | }
41 | 


--------------------------------------------------------------------------------
/src/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "lib": ["ESNext", "DOM"],
4 |     "module": "ESNext",
5 |     "moduleResolution": "Bundler",
6 |     "strict": true
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2022",
 4 |     "lib": ["ES2022"],
 5 |     "module": "Preserve",
 6 |     "moduleResolution": "Bundler",
 7 |     "resolveJsonModule": true,
 8 |     "strict": true,
 9 |     "strictNullChecks": true,
10 |     "esModuleInterop": true
11 |   },
12 |   "exclude": [
13 |     "src"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/types.ts:
--------------------------------------------------------------------------------
 1 | import type { ThemedToken } from 'shiki'
 2 | 
 3 | export type TokensData = ThemedToken[][] | string
 4 | 
 5 | export interface GrammarFile {
 6 |   name: string | null
 7 |   scope: string | null
 8 |   path: string
 9 |   enabled: boolean
10 | }
11 | 


--------------------------------------------------------------------------------
/uno.config.mts:
--------------------------------------------------------------------------------
 1 | import { defineConfig, presetAttributify, presetIcons, presetUno, transformerDirectives } from 'unocss'
 2 | 
 3 | export default defineConfig({
 4 |   shortcuts: {
 5 |     'border-base': 'border-gray:30',
 6 |     'bg-active': 'bg-gray:10',
 7 |     'text-faded': 'text-gray',
 8 |     'text-primary': 'text-orange:500',
 9 |   },
10 |   presets: [
11 |     presetUno({
12 |       dark: {
13 |         dark: '.vscode-dark',
14 |         light: '.vscode-light',
15 |       },
16 |     }),
17 |     presetIcons(),
18 |     presetAttributify(),
19 |   ],
20 |   transformers: [
21 |     transformerDirectives(),
22 |   ],
23 |   theme: {
24 |     fontFamily: {
25 |       mono: 'Consola,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace',
26 |     },
27 |   },
28 |   content: {
29 |     pipeline: {
30 |       include: ['src/**'],
31 |     },
32 |   },
33 | })
34 | 


--------------------------------------------------------------------------------
/vite.config.mts:
--------------------------------------------------------------------------------
 1 | import Vscode from '@tomjs/vite-plugin-vscode'
 2 | import Vue from '@vitejs/plugin-vue'
 3 | import Unocss from 'unocss/vite'
 4 | import { defineConfig } from 'vite'
 5 | 
 6 | export default defineConfig({
 7 |   plugins: [
 8 |     Vue({
 9 |       template: {
10 |         compilerOptions: {
11 |           isCustomElement: (tag: string) => tag.startsWith('vscode-'),
12 |         },
13 |       },
14 |     }),
15 |     Unocss(),
16 |     Vscode({
17 |       extension: {
18 |         noExternal: [
19 |           /^(?!vscode$).*$/,
20 |         ],
21 |         define: {
22 |           __DEV__: 'true',
23 |         },
24 |       },
25 |       webview: {
26 |         csp: `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src {{cspSource}} 'unsafe-inline'; script-src 'nonce-{{nonce}}' 'unsafe-eval'; img-src 'self' data:;">`,
27 |       },
28 |     }),
29 |   ],
30 | })
31 | 


--------------------------------------------------------------------------------