aboutsummaryrefslogtreecommitdiff
path: root/doc/docs/.vuepress/components/YueCompiler.vue
diff options
context:
space:
mode:
authorLi Jin <dragon-fly@qq.com>2021-04-19 23:41:33 +0800
committerLi Jin <dragon-fly@qq.com>2021-04-19 23:41:33 +0800
commit5d3b07801456d16dcc2c75dcccd48d508a6b60cc (patch)
tree2df1a154bf58d93f2475df02afbd15f1a8ba2963 /doc/docs/.vuepress/components/YueCompiler.vue
parentea82666506b57d6e905b7f2e5fe78498fe5a7abd (diff)
downloadyuescript-5d3b07801456d16dcc2c75dcccd48d508a6b60cc.tar.gz
yuescript-5d3b07801456d16dcc2c75dcccd48d508a6b60cc.tar.bz2
yuescript-5d3b07801456d16dcc2c75dcccd48d508a6b60cc.zip
first commit for Yuescript document site.
Diffstat (limited to 'doc/docs/.vuepress/components/YueCompiler.vue')
-rwxr-xr-xdoc/docs/.vuepress/components/YueCompiler.vue383
1 files changed, 383 insertions, 0 deletions
diff --git a/doc/docs/.vuepress/components/YueCompiler.vue b/doc/docs/.vuepress/components/YueCompiler.vue
new file mode 100755
index 0000000..4d72b92
--- /dev/null
+++ b/doc/docs/.vuepress/components/YueCompiler.vue
@@ -0,0 +1,383 @@
1<template>
2 <div style="width: 100%; height: auto;">
3 <div class="parent" style="background-color: #f5f7ff;">
4 <div class="childL" style="height: 2.5em;">
5 <div class="childTitle">Yuescript {{ info }}</div>
6 </div>
7 <div class="childR" style="height: 2.5em;">
8 <div class="childTitle">Lua</div>
9 </div>
10 <div class="childL" ref='yueEditor' style="height: 30em;">
11 <ClientOnly>
12 <prism-editor class="my-editor" v-model="code" :highlight="highlighter" @input="codeChanged($event)" line-numbers :readonly="readonly"></prism-editor>
13 </ClientOnly>
14 </div>
15 <div class="childR" style="height: 30em;">
16 <ClientOnly>
17 <prism-editor class="my-editor" v-model="compiled" :highlight="highlighter" @input="codeChanged($event)" readonly></prism-editor>
18 </ClientOnly>
19 </div>
20 </div>
21 <div v-if="!compileronly">
22 <button class="button" @click="runCode()">Run!</button>
23 <textarea class="resultArea" readonly>{{ result }}</textarea>
24 </div>
25 </div>
26</template>
27
28<script>
29 import { PrismEditor } from 'vue-prism-editor';
30 import 'vue-prism-editor/dist/prismeditor.min.css';
31 import { highlight, languages } from 'prismjs/components/prism-core';
32 import 'prismjs/components/prism-moonscript';
33 import 'prismjs/components/prism-lua';
34
35 export default {
36 props: {
37 compileronly: {
38 type: Boolean,
39 default: false,
40 },
41 displayonly: {
42 type: Boolean,
43 default: false,
44 },
45 text: {
46 type: String,
47 default: '',
48 },
49 },
50 components: {
51 PrismEditor,
52 },
53 data() {
54 return {
55 info: 'Loading',
56 readonly: true,
57 code: '',
58 compiled: '',
59 result: '',
60 };
61 },
62 mounted () {
63 if (this.text !== '') {
64 this.$data.code = this.text;
65 this.codeChanged(this.text);
66 }
67 const check = ((self)=> {
68 return ()=> {
69 if (window.yue) {
70 self.$data.info = window.yue.version();
71 self.$data.readonly = false;
72 const editor = self.$refs.yueEditor;
73 if (editor.children.length === 0) {
74 setTimeout(check, 100);
75 return;
76 }
77 const textArea = editor.children[0].children[1].children[0];
78 textArea.focus();
79 } else {
80 setTimeout(check, 100);
81 }
82 }
83 })(this);
84 check();
85 },
86 methods: {
87 runCode() {
88 if (window.yue && this.$data.compiled !== '') {
89 let res = '';
90 try {
91 res = window.yue.exec(this.$data.code);
92 } catch (err) {
93 res = err;
94 }
95 this.$data.result = res;
96 }
97 },
98 highlighter(code) {
99 return highlight(code, languages.moon);
100 },
101 codeChanged(text) {
102 if (window.yue) {
103 let res = ['','compiler error, and please help opening an issue for this. Thanks a lot!'];
104 try {
105 res = window.yue.tolua(text, true, !this.displayonly, true);
106 if (res[0] !== '') {
107 this.$data.compiled = res[0];
108 } else {
109 this.$data.compiled = res[1];
110 }
111 } catch (error) {
112 this.$data.compiled = res[1];
113 }
114 }
115 },
116 }
117 }
118</script>
119
120<style scoped>
121 .resultArea {
122 float: left;
123 margin-right: 1em;
124 overflow: scroll;
125 overflow-wrap: break-word;
126 width: calc(100% - 120px);
127 height: 55px;
128 border-color: #b7ae8f;
129 outline: none;
130 resize: none;
131 margin-top: 5px;
132 }
133 .childL {
134 float: left;
135 width: 50%;
136 box-sizing: border-box;
137 background-clip: content-box;
138 background: #f5f7ff;
139 }
140 .childR {
141 float: left;
142 width: 50%;
143 box-sizing: border-box;
144 background-clip: content-box;
145 background: #f5f7ff;
146 }
147 .childTitle {
148 width: 100%;
149 font-size: 1.5em;
150 color: #b7ae8f;
151 text-align: center;
152 padding: 0.2em;
153 }
154 .button {
155 float: right;
156 border: none;
157 display: inline-block;
158 font-size: 1.2rem;
159 color: #fff;
160 background-color: #b7ae8f;
161 text-decoration: none;
162 padding: .8rem 1.6rem;
163 border-radius: 4px;
164 transition: background-color .1s ease;
165 box-sizing: border-box;
166 border-bottom: 1px solid #aaa07b;
167 margin-top: 10px;
168 margin-right: 5px;
169 }
170 .button:hover {
171 background-color: #beb69a;
172 }
173 .button:focus,
174 .button:active:focus,
175 .button.active:focus,
176 .button.focus,
177 .button:active.focus {
178 outline: none;
179 }
180
181 .my-editor {
182 font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
183 line-height: 1.375;
184 direction: ltr;
185 text-align: left;
186 white-space: pre;
187 word-spacing: normal;
188 word-break: normal;
189 -moz-tab-size: 4;
190 -o-tab-size: 4;
191 tab-size: 4;
192 -webkit-hyphens: none;
193 -moz-hyphens: none;
194 -ms-hyphens: none;
195 hyphens: none;
196 background: #f5f7ff;
197 color: #5e6687;
198 font-size: 1em;
199 overflow: scroll;
200 }
201
202 .my-editor >>> .prism-editor__textarea:focus {
203 outline: none;
204 }
205
206 /*
207 Name: Base16 Atelier Sulphurpool Light
208 Author: Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool)
209
210 Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)
211 Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
212
213 */
214 code[class*="language-"],
215 pre[class*="language-"] {
216 font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
217 font-size: 1em;
218 line-height: 1.375;
219 direction: ltr;
220 text-align: left;
221 white-space: pre;
222 word-spacing: normal;
223 word-break: normal;
224 -moz-tab-size: 4;
225 -o-tab-size: 4;
226 tab-size: 4;
227 -webkit-hyphens: none;
228 -moz-hyphens: none;
229 -ms-hyphens: none;
230 hyphens: none;
231 background: #f5f7ff;
232 color: #5e6687;
233 }
234
235 pre > code[class*="language-"] {
236 font-size: 1em;
237 }
238
239 pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
240 code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
241 text-shadow: none;
242 background: #dfe2f1;
243 }
244
245 pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
246 code[class*="language-"]::selection, code[class*="language-"] ::selection {
247 text-shadow: none;
248 background: #dfe2f1;
249 }
250
251 /* Code blocks */
252 pre[class*="language-"] {
253 padding: 1em;
254 margin: .5em 0;
255 overflow: auto;
256 }
257
258 /* Inline code */
259 :not(pre) > code[class*="language-"] {
260 padding: .1em;
261 border-radius: .3em;
262 }
263
264 .token.comment,
265 .token.prolog,
266 .token.doctype,
267 .token.cdata {
268 color: #898ea4;
269 }
270
271 .token.punctuation {
272 color: #5e6687;
273 }
274
275 .token.namespace {
276 opacity: .7;
277 }
278
279 .token.operator,
280 .token.boolean,
281 .token.number {
282 color: #c76b29;
283 }
284
285 .token.property {
286 color: #c08b30;
287 }
288
289 .token.tag {
290 color: #3d8fd1;
291 }
292
293 .token.string {
294 color: #22a2c9;
295 }
296
297 .token.selector {
298 color: #6679cc;
299 }
300
301 .token.attr-name {
302 color: #c76b29;
303 }
304
305 .token.entity,
306 .token.url,
307 .language-css .token.string,
308 .style .token.string {
309 color: #22a2c9;
310 }
311
312 .token.attr-value,
313 .token.keyword,
314 .token.control,
315 .token.directive,
316 .token.unit {
317 color: #ac9739;
318 }
319
320 .token.statement,
321 .token.regex,
322 .token.atrule {
323 color: #22a2c9;
324 }
325
326 .token.placeholder,
327 .token.variable {
328 color: #3d8fd1;
329 }
330
331 .token.deleted {
332 text-decoration: line-through;
333 }
334
335 .token.inserted {
336 border-bottom: 1px dotted #202746;
337 text-decoration: none;
338 }
339
340 .token.italic {
341 font-style: italic;
342 }
343
344 .token.important,
345 .token.bold {
346 font-weight: bold;
347 }
348
349 .token.important {
350 color: #c94922;
351 }
352
353 .token.entity {
354 cursor: help;
355 }
356
357 pre > code.highlight {
358 outline: 0.4em solid #c94922;
359 outline-offset: .4em;
360 }
361
362 /* overrides color-values for the Line Numbers plugin
363 * http://prismjs.com/plugins/line-numbers/
364 */
365 .line-numbers .line-numbers-rows {
366 border-right-color: #dfe2f1;
367 }
368
369 .line-numbers-rows > span:before {
370 color: #979db4;
371 }
372
373 /* overrides color-values for the Line Highlight plugin
374 * http://prismjs.com/plugins/line-highlight/
375 */
376 .line-highlight {
377 background: rgba(107, 115, 148, 0.2);
378 background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
379 background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
380 }
381
382</style>
383
generated by cgit v1.2.3-55-g6feb (git 2.39.1) at 2025-04-26 01:39:01 +0000