Skip to content

Commit ffdbbbd

Browse files
Kaleidosiumpigpigyyy
Kaleidosium
authored and
pigpigyyy
committed
Code Cleanup
Also Bump Dependencies
1 parent e15bd04 commit ffdbbbd

File tree

6 files changed

+257
-302
lines changed

6 files changed

+257
-302
lines changed

‎doc/docs/.vitepress/config.mts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -537,6 +537,7 @@ export default defineConfig({
537537
var s = document.createElement('script');
538538
s.src = '${withBase("/js/yuescript.js")}';
539539
s.async = true;
540+
s.onerror = loadStub;
540541
document.head.appendChild(s);
541542
})();`,
542543
],

‎doc/docs/.vitepress/theme/components/CompilerModal.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export default {
6060
width: min(90vw, 1100px);
6161
max-height: 90vh;
6262
overflow: auto;
63-
background: #ffffff;
63+
background: var(--vp-c-bg);
6464
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
6565
}
6666
</style>

‎doc/docs/.vitepress/theme/components/YueCompiler.vue‎

Lines changed: 111 additions & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -41,165 +41,96 @@ import { history, indentWithTab } from "@codemirror/commands";
4141
import { defaultKeymap, historyKeymap } from "@codemirror/commands";
4242
import { simpleMode } from "@codemirror/legacy-modes/mode/simple-mode";
4343
44-
/* shikijs/themes/light-plus: editor.background #FFFFFF, editor.foreground #000000 */
45-
const lightPlusTheme = EditorView.theme(
46-
{
47-
"&": {
48-
height: "100%",
49-
backgroundColor: "#FFFFFF",
50-
color: "#000000",
51-
fontSize: "14px",
52-
},
53-
"&.cm-focused": {
54-
outline: "none",
55-
},
56-
".cm-content": {
57-
fontFamily:
58-
"ui-monospace, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace",
59-
lineHeight: "1.375",
60-
},
61-
".cm-gutters": {
62-
backgroundColor: "#FFFFFF",
63-
color: "#6e6e6e",
64-
borderRight: "none",
65-
},
66-
".cm-activeLine": {
67-
backgroundColor: "transparent",
68-
},
69-
".cm-activeLineGutter": {
70-
backgroundColor: "transparent",
71-
},
72-
".cm-selectionBackground": {
73-
backgroundColor: "#add6ff",
74-
},
75-
"&.cm-focused .cm-selectionBackground": {
76-
backgroundColor: "#add6ff",
77-
},
78-
".cm-cursor": {
79-
borderLeftColor: "#000000",
80-
},
81-
".cm-matchingBracket": {
82-
backgroundColor: "#c9def5",
83-
},
84-
},
85-
{ dark: false },
86-
);
44+
function createEditorTheme({ bg, fg, gutterColor, selectionBg, cursorColor, matchingBracketBg, dark }) {
45+
return EditorView.theme(
46+
{
47+
"&": {
48+
height: "100%",
49+
backgroundColor: bg,
50+
color: fg,
51+
fontSize: "14px",
52+
},
53+
"&.cm-focused": { outline: "none" },
54+
".cm-content": {
55+
fontFamily:
56+
"ui-monospace, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace",
57+
lineHeight: "1.375",
58+
},
59+
".cm-gutters": {
60+
backgroundColor: bg,
61+
color: gutterColor,
62+
borderRight: "none",
63+
},
64+
".cm-activeLine": { backgroundColor: "transparent" },
65+
".cm-activeLineGutter": { backgroundColor: "transparent" },
66+
".cm-selectionBackground": { backgroundColor: selectionBg },
67+
"&.cm-focused .cm-selectionBackground": { backgroundColor: selectionBg },
68+
".cm-cursor": { borderLeftColor: cursorColor },
69+
".cm-matchingBracket": { backgroundColor: matchingBracketBg },
70+
},
71+
{ dark },
72+
);
73+
}
8774
88-
/* shikijs/themes/dark-plus: editor.background #1E1E1E, editor.foreground #D4D4D4 */
89-
const darkPlusTheme = EditorView.theme(
90-
{
91-
"&": {
92-
height: "100%",
93-
backgroundColor: "#1E1E1E",
94-
color: "#D4D4D4",
95-
fontSize: "14px",
96-
},
97-
"&.cm-focused": {
98-
outline: "none",
99-
},
100-
".cm-content": {
101-
fontFamily:
102-
"ui-monospace, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace",
103-
lineHeight: "1.375",
104-
},
105-
".cm-gutters": {
106-
backgroundColor: "#1E1E1E",
107-
color: "#858585",
108-
borderRight: "none",
109-
},
110-
".cm-activeLine": {
111-
backgroundColor: "transparent",
112-
},
113-
".cm-activeLineGutter": {
114-
backgroundColor: "transparent",
115-
},
116-
".cm-selectionBackground": {
117-
backgroundColor: "#264f78",
118-
},
119-
"&.cm-focused .cm-selectionBackground": {
120-
backgroundColor: "#264f78",
121-
},
122-
".cm-cursor": {
123-
borderLeftColor: "#aeafad",
124-
},
125-
".cm-matchingBracket": {
126-
backgroundColor: "#3a3d41",
127-
},
128-
},
129-
{ dark: true },
130-
);
75+
const lightPlusTheme = createEditorTheme({
76+
bg: "#FFFFFF", fg: "#000000", gutterColor: "#6e6e6e",
77+
selectionBg: "#add6ff", cursorColor: "#000000", matchingBracketBg: "#c9def5", dark: false,
78+
});
79+
80+
const darkPlusTheme = createEditorTheme({
81+
bg: "#1E1E1E", fg: "#D4D4D4", gutterColor: "#858585",
82+
selectionBg: "#264f78", cursorColor: "#aeafad", matchingBracketBg: "#3a3d41", dark: true,
83+
});
13184
132-
/* shikijs/themes/light-plus tokenColors */
133-
const lightPlusHighlightStyle = HighlightStyle.define(
134-
[
135-
{ tag: tags.comment, color: "#008000" },
136-
{ tag: tags.keyword, color: "#AF00DB" },
137-
{ tag: [tags.operator, tags.punctuation], color: "#000000" },
138-
{ tag: [tags.string, tags.special(tags.string)], color: "#a31515" },
139-
{ tag: tags.regexp, color: "#811f3f" },
140-
{ tag: [tags.number, tags.bool, tags.null], color: "#098658" },
141-
{ tag: tags.function(tags.variableName), color: "#795e26" },
142-
{ tag: tags.typeName, color: "#267f99" },
143-
{ tag: tags.className, color: "#267f99" },
144-
{ tag: tags.propertyName, color: "#001080" },
145-
{ tag: tags.tagName, color: "#800000" },
146-
{ tag: tags.attributeName, color: "#e50000" },
147-
{ tag: tags.meta, color: "#666666" },
148-
{ tag: tags.invalid, color: "#cd3131" },
149-
// Additional tags for YueScript - ensure all token types have styles
150-
{ tag: tags.variableName, color: "#001080" },
151-
{ tag: tags.constant(tags.name), color: "#098658" },
152-
{ tag: tags.constant(tags.variableName), color: "#098658" },
153-
{ tag: tags.constant, color: "#098658" },
154-
{ tag: tags.definition(tags.variableName), color: "#001080" },
155-
{ tag: tags.modifier, color: "#AF00DB" },
156-
{ tag: tags.namespace, color: "#267f99" },
157-
{ tag: tags.labelName, color: "#795e26" },
158-
{ tag: tags.character, color: "#098658" },
159-
{ tag: tags.literal, color: "#098658" },
160-
{ tag: tags.bracket, color: "#000000" },
161-
{ tag: tags.squareBracket, color: "#000000" },
162-
{ tag: tags.paren, color: "#000000" },
163-
{ tag: tags.brace, color: "#000000" },
164-
],
165-
{ fallback: true },
166-
);
85+
function createHighlightStyle(c) {
86+
return HighlightStyle.define(
87+
[
88+
{ tag: tags.comment, color: c.comment },
89+
{ tag: tags.keyword, color: c.keyword },
90+
{ tag: [tags.operator, tags.punctuation], color: c.punctuation },
91+
{ tag: [tags.string, tags.special(tags.string)], color: c.string },
92+
{ tag: tags.regexp, color: c.regexp },
93+
{ tag: [tags.number, tags.bool, tags.null], color: c.number },
94+
{ tag: tags.function(tags.variableName), color: c.function },
95+
{ tag: tags.typeName, color: c.type },
96+
{ tag: tags.className, color: c.type },
97+
{ tag: tags.propertyName, color: c.property },
98+
{ tag: tags.tagName, color: c.tag },
99+
{ tag: tags.attributeName, color: c.attribute },
100+
{ tag: tags.meta, color: c.meta },
101+
{ tag: tags.invalid, color: c.invalid },
102+
{ tag: tags.variableName, color: c.property },
103+
{ tag: tags.constant(tags.name), color: c.number },
104+
{ tag: tags.constant(tags.variableName), color: c.number },
105+
{ tag: tags.constant, color: c.number },
106+
{ tag: tags.definition(tags.variableName), color: c.property },
107+
{ tag: tags.modifier, color: c.keyword },
108+
{ tag: tags.namespace, color: c.type },
109+
{ tag: tags.labelName, color: c.function },
110+
{ tag: tags.character, color: c.number },
111+
{ tag: tags.literal, color: c.number },
112+
{ tag: tags.bracket, color: c.punctuation },
113+
{ tag: tags.squareBracket, color: c.punctuation },
114+
{ tag: tags.paren, color: c.punctuation },
115+
{ tag: tags.brace, color: c.punctuation },
116+
],
117+
{ fallback: true },
118+
);
119+
}
120+
121+
const lightPlusHighlightStyle = createHighlightStyle({
122+
comment: "#008000", keyword: "#AF00DB", punctuation: "#000000",
123+
string: "#a31515", regexp: "#811f3f", number: "#098658",
124+
function: "#795e26", type: "#267f99", property: "#001080",
125+
tag: "#800000", attribute: "#e50000", meta: "#666666", invalid: "#cd3131",
126+
});
167127
168-
/* shikijs/themes/dark-plus tokenColors */
169-
const darkPlusHighlightStyle = HighlightStyle.define(
170-
[
171-
{ tag: tags.comment, color: "#6a9955" },
172-
{ tag: tags.keyword, color: "#C586C0" },
173-
{ tag: [tags.operator, tags.punctuation], color: "#d4d4d4" },
174-
{ tag: [tags.string, tags.special(tags.string)], color: "#ce9178" },
175-
{ tag: tags.regexp, color: "#d16969" },
176-
{ tag: [tags.number, tags.bool, tags.null], color: "#b5cea8" },
177-
{ tag: tags.function(tags.variableName), color: "#dcdcaa" },
178-
{ tag: tags.typeName, color: "#4ec9b0" },
179-
{ tag: tags.className, color: "#4ec9b0" },
180-
{ tag: tags.propertyName, color: "#9cdcfe" },
181-
{ tag: tags.tagName, color: "#569cd6" },
182-
{ tag: tags.attributeName, color: "#9cdcfe" },
183-
{ tag: tags.meta, color: "#d4d4d4" },
184-
{ tag: tags.invalid, color: "#f44747" },
185-
// Additional tags for YueScript - ensure all token types have styles
186-
{ tag: tags.variableName, color: "#9cdcfe" },
187-
{ tag: tags.constant(tags.name), color: "#b5cea8" },
188-
{ tag: tags.constant(tags.variableName), color: "#b5cea8" },
189-
{ tag: tags.constant, color: "#b5cea8" },
190-
{ tag: tags.definition(tags.variableName), color: "#9cdcfe" },
191-
{ tag: tags.modifier, color: "#C586C0" },
192-
{ tag: tags.namespace, color: "#4ec9b0" },
193-
{ tag: tags.labelName, color: "#dcdcaa" },
194-
{ tag: tags.character, color: "#b5cea8" },
195-
{ tag: tags.literal, color: "#b5cea8" },
196-
{ tag: tags.bracket, color: "#d4d4d4" },
197-
{ tag: tags.squareBracket, color: "#d4d4d4" },
198-
{ tag: tags.paren, color: "#d4d4d4" },
199-
{ tag: tags.brace, color: "#d4d4d4" },
200-
],
201-
{ fallback: true },
202-
);
128+
const darkPlusHighlightStyle = createHighlightStyle({
129+
comment: "#6a9955", keyword: "#C586C0", punctuation: "#d4d4d4",
130+
string: "#ce9178", regexp: "#d16969", number: "#b5cea8",
131+
function: "#dcdcaa", type: "#4ec9b0", property: "#9cdcfe",
132+
tag: "#569cd6", attribute: "#9cdcfe", meta: "#d4d4d4", invalid: "#f44747",
133+
});
203134
204135
export default {
205136
props: {
@@ -229,6 +160,7 @@ export default {
229160
themeCompartment: null,
230161
highlightCompartment: null,
231162
themeObserver: null,
163+
_onYueReady: null,
232164
};
233165
},
234166
computed: {
@@ -244,29 +176,34 @@ export default {
244176
window.addEventListener("resize", this.handleResize);
245177
this.observeTheme();
246178
247-
const initialCode = this.text !== "" ? this.text : "";
179+
const initialCode = this.text;
248180
this.code = initialCode;
249181
this.codeChanged(initialCode);
250182
this.initEditor(initialCode);
251183
this.$nextTick(() => {
252184
this.focusEditorToEnd();
253185
});
254186
255-
const check = ((self) => {
256-
return () => {
257-
if (window.yue) {
258-
self.info = window.yue.version();
259-
self.readonly = false;
260-
this.refreshEditorReadOnly();
261-
} else {
262-
setTimeout(check, 100);
263-
}
264-
};
265-
})(this);
266-
check();
187+
const onYueReady = () => {
188+
if (window.yue) {
189+
this.info = window.yue.version();
190+
this.readonly = false;
191+
this.refreshEditorReadOnly();
192+
}
193+
};
194+
if (window.yue) {
195+
onYueReady();
196+
} else {
197+
this._onYueReady = onYueReady;
198+
window.addEventListener("yue:ready", onYueReady, { once: true });
199+
}
267200
},
268201
beforeUnmount() {
269202
window.removeEventListener("resize", this.handleResize);
203+
if (this._onYueReady) {
204+
window.removeEventListener("yue:ready", this._onYueReady);
205+
this._onYueReady = null;
206+
}
270207
if (this.editorView) {
271208
this.editorView.destroy();
272209
this.editorView = null;
@@ -673,7 +610,7 @@ export default {
673610
overflow-wrap: break-word;
674611
width: calc(100% - 120px);
675612
height: 55px;
676-
border-color: #b7ae8f;
613+
border-color: var(--vp-button-brand-bg);
677614
border-radius: 4px;
678615
border-width: 1px;
679616
border-style: solid;
@@ -722,20 +659,20 @@ export default {
722659
border: none;
723660
display: inline-block;
724661
font-size: 1.2rem;
725-
color: #fff;
726-
background-color: #b7ae8f;
662+
color: var(--vp-button-brand-text);
663+
background-color: var(--vp-button-brand-bg);
727664
text-decoration: none;
728665
padding: 0.8rem 1.6rem;
729666
border-radius: 4px;
730667
transition: background-color 0.1s ease;
731668
box-sizing: border-box;
732-
border-bottom: 1px solid #aaa07b;
669+
border-bottom: 1px solid var(--vp-button-brand-border);
733670
margin-top: 10px;
734671
margin-right: 5px;
735672
}
736673
737674
.button:hover {
738-
background-color: #beb69a;
675+
background-color: var(--vp-button-brand-hover-bg);
739676
}
740677
741678
.button:focus,

‎doc/docs/.vitepress/theme/components/YueDisplay.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,18 @@ export default {
2828
border: none;
2929
display: inline-block;
3030
font-size: 16px;
31-
color: #fff;
32-
background-color: #b7ae8f;
31+
color: var(--vp-button-brand-text);
32+
background-color: var(--vp-button-brand-bg);
3333
text-decoration: none;
3434
padding: 0.4rem 0.8rem;
3535
border-radius: 4px;
3636
transition: background-color 0.1s ease;
3737
box-sizing: border-box;
38-
border-bottom: 1px solid #aaa07b;
38+
border-bottom: 1px solid var(--vp-button-brand-border);
3939
margin-bottom: 1em;
4040
}
4141
.button:hover {
42-
background-color: #beb69a;
42+
background-color: var(--vp-button-brand-hover-bg);
4343
}
4444
.button:focus,
4545
.button:active:focus,

0 commit comments

Comments
 (0)