@@ -3,6 +3,9 @@ import { defineComponent, ref } from 'vue'
33import Navigation from ' ./components/Navigation.vue'
44import Editor from ' ./components/Editor.vue'
55import { baseCompile } from ' vue-i18n'
6+ import * as monaco from ' monaco-editor'
7+ import { debounce } from ' ./utils'
8+ import { SourceMapConsumer } from ' source-map'
69import type { CompileError , CompileOptions } from ' vue-i18n'
710
811interface PersistedState {
@@ -35,27 +38,33 @@ export default defineComponent({
3538 * utilties
3639 */
3740 let lastSuccessCode: string
38- function compile(message : string ): string {
41+ let lastSuccessfulMap: SourceMapConsumer | undefined
42+ async function compile(message : string ): Promise <string > {
3943 console .clear ()
4044
4145 try {
4246 const = performance .now ()
4347
4448 const : CompileError [] = []
45- const = baseCompile (message , {
46- onError : err => errors .push (err )
47- })
49+ const = {
50+ sourceMap: true ,
51+ onError : (err : CompileError ) => errors .push (err )
52+ }
53+ const = baseCompile (message , options )
4854 if (errors .length > 0 ) {
4955 console .error (errors )
5056 }
5157
5258 console .log (` Compiled in ${(performance .now () - start ).toFixed (2 )}ms. ` )
5359 compileErrors .value = errors
5460 console .log (` AST: ` , ast )
61+ console .log (' sourcemap' map )
5562
5663 const = new Function (` return ${code } ` )()
5764 lastSuccessCode =
5865 evalCode .toString () + ` \n\n // Check the console for the AST`
66+ lastSuccessfulMap = await new SourceMapConsumer (map ! )
67+ lastSuccessfulMap ! .computeColumnSpans ()
5968 } catch (e ) {
6069 lastSuccessCode = ` /* ERROR: ${e .message } (see console for more info) */ `
6170 console .error (e )
@@ -67,42 +76,157 @@ export default defineComponent({
6776 /**
6877 * envet handlers
6978 */
70- const = (message : string ): void => {
79+
80+ let inputEditor: monaco .editor .IStandaloneCodeEditor | null = null
81+ let outputEditor: monaco .editor .IStandaloneCodeEditor | null = null
82+
83+ // input editor model change event
84+ const = async (message : string ): Promise <void > => {
7185 const = JSON .stringify ({ src: message } as PersistedState )
7286 localStorage .setItem (' state' state )
7387 window .location .hash = encodeURIComponent (state )
74- genCodes .value = compile (message )
88+ genCodes .value = await compile (message )
89+ }
90+
91+ // highlight output codes
92+ let prevOutputDecos: string [] = []
93+ function clearOutputDecos() {
94+ if (! outputEditor ) {
95+ return
96+ }
97+ prevOutputDecos = outputEditor .deltaDecorations (prevOutputDecos , [])
98+ }
99+
100+ let prevInputDecos: string [] = []
101+ function clearInputDecos() {
102+ if (! inputEditor ) {
103+ return
104+ }
105+ prevInputDecos = inputEditor .deltaDecorations (prevInputDecos , [])
106+ }
107+
108+ // input editor ready event
109+ const = (editor : monaco .editor .IStandaloneCodeEditor ) => {
110+ inputEditor = editor
111+ inputEditor .onDidChangeCursorPosition (
112+ debounce (e => {
113+ clearInputDecos ()
114+ if (lastSuccessfulMap ) {
115+ const = lastSuccessfulMap .generatedPositionFor ({
116+ source: ' message.intl'
117+ line: e .position .lineNumber ,
118+ column: e .position .column
119+ })
120+ if (pos .line != null && pos .column != null ) {
121+ prevOutputDecos = outputEditor ! .deltaDecorations (
122+ prevOutputDecos ,
123+ [
124+ {
125+ range: new monaco .Range (
126+ pos .line ,
127+ pos .column + 1 ,
128+ pos .line ,
129+ pos .lastColumn ? pos .lastColumn + 2 : pos .column + 2
130+ ),
131+ options: {
132+ inlineClassName: ` highlight `
133+ }
134+ }
135+ ]
136+ )
137+ outputEditor ! .revealPositionInCenter ({
138+ lineNumber: pos .line ,
139+ column: pos .column + 1
140+ })
141+ } else {
142+ clearOutputDecos ()
143+ }
144+ }
145+ }, 100 )
146+ )
147+ }
148+
149+ // output editor ready event
150+ const = (editor : monaco .editor .IStandaloneCodeEditor ) => {
151+ outputEditor = editor
152+ editor .onDidChangeCursorPosition (
153+ debounce (e => {
154+ clearOutputDecos ()
155+ if (lastSuccessfulMap ) {
156+ const = lastSuccessfulMap .originalPositionFor ({
157+ line: e .position .lineNumber ,
158+ column: e .position .column
159+ })
160+ console .log (' onReadyOutput' e .position , pos )
161+ if (
162+ pos .line != null &&
163+ pos .column != null &&
164+ ! (
165+ // ignore mock location
166+ (pos .line === 1 && pos .column === 0 )
167+ )
168+ ) {
169+ const = {
170+ column: pos .column + 1 ,
171+ lineNumber: pos .line
172+ }
173+ prevInputDecos = inputEditor ! .deltaDecorations (prevInputDecos , [
174+ {
175+ range: new monaco .Range (
176+ pos .line ,
177+ pos .column + 1 ,
178+ pos .line ,
179+ pos .column + 1
180+ ),
181+ options: {
182+ isWholeLine: true ,
183+ className: ` highlight `
184+ }
185+ }
186+ ])
187+ inputEditor ! .revealPositionInCenter (translatedPos )
188+ } else {
189+ clearInputDecos ()
190+ }
191+ }
192+ }, 100 )
193+ )
75194 }
76195
77196 // setup context
78197 return {
79198 initialCodes ,
80199 genCodes ,
81200 compileErrors ,
82- onChange
201+ onChangeModel ,
202+ onReadyInput ,
203+ onReadyOutput
83204 }
84205 }
85206})
86207script >
87208
88209<template >
89210 <div class =" container"
90- <div class =" navigation"
211+ <nav class =" navigation"
212+ <!-- prettier-ignore -->
91213 <Navigation class =" navigation"
92- </div >
214+ </nav >
93215 <div class =" operation"
94216 <Editor
95217 class =" input"
96218 language =" intlify"
97219 :code =" initialCodes"
98220 :errors =" compileErrors"
99221 :debounce =" true"
100- @change =" onChange"
222+ @change-model =" onChangeModel"
223+ @ready =" onReadyInput"
101224 />
102225 <!-- prettier-ignore -->
103226 <Editor
104227 class =" output"
105228 :code =" genCodes"
229+ @ready =" onReadyOutput"
106230 />
107231 </div >
108232 </div >
@@ -119,6 +243,7 @@ export default defineComponent({
119243 box-sizing border-box ;
120244 background-color var (--bg );
121245 border-bottom 1px solid var (--border );
246+ display contents ;
122247}
123248.operation {
124249 width 100% ;
0 commit comments