stream-monaco 0.0.6 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -2
- package/README.zh-CN.md +0 -17
- package/dist/index.cjs +23 -98
- package/dist/index.d.cts +1 -9
- package/dist/index.d.ts +1 -9
- package/dist/index.js +25 -99
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -464,8 +464,6 @@ cleanupEditor()
|
|
|
464
464
|
<script type="module" src="/main.ts"></script>
|
|
465
465
|
```
|
|
466
466
|
|
|
467
|
-
The library also exposes `isDark` (a small reactive ref) that follows `<html class="dark">` or the system color-scheme. Theme switching inside the editor is handled automatically.
|
|
468
|
-
|
|
469
467
|
### Migration notes
|
|
470
468
|
|
|
471
469
|
- v0.0.34+: Internal reactivity is implemented via a thin adapter over `alien-signals`, removing the hard dependency on Vue. Vue remains fully supported but is optional. No breaking changes to the public API.
|
package/README.zh-CN.md
CHANGED
|
@@ -20,7 +20,6 @@ IMPORTANT: Since v0.0.32 the library enables a default time-based throttle for `
|
|
|
20
20
|
|
|
21
21
|
说明:内部响应式基于 `alien-signals` 的轻薄适配层实现,因此核心逻辑不再强依赖 Vue。Vue 仍然完全支持,但被标记为可选的 peer 依赖,使库在非 Vue 环境也可复用核心能力,且对现有 API 无破坏。
|
|
22
22
|
- 🎨 **Shiki 高亮** - 使用 Shiki 实现高效的语法高亮,支持 TextMate 语法和 VS Code 主题
|
|
23
|
-
- 🌓 **主题切换** - 自动监听 isDark 模式变化,智能切换明暗主题
|
|
24
23
|
- 📝 **流式更新** - 支持流式输入更新,实时响应代码变化
|
|
25
24
|
|
|
26
25
|
- `registerMonacoThemes(themes, languages): Promise<Highlighter>` — 使用 shiki 创建或获取高亮器并把主题注册到 Monaco,返回解析为 shiki highlighter 的 Promise,便于复用(例如渲染页面片段)。
|
|
@@ -264,8 +263,6 @@ cleanupEditor()
|
|
|
264
263
|
<script type="module" src="/main.ts"></script>
|
|
265
264
|
```
|
|
266
265
|
|
|
267
|
-
库同时暴露 `isDark`(响应式 ref),会跟随 `<html class="dark">` 或系统颜色偏好,编辑器内部会自动应用主题。
|
|
268
|
-
|
|
269
266
|
### React 基础用法
|
|
270
267
|
|
|
271
268
|
```tsx
|
|
@@ -713,20 +710,6 @@ onUnmounted(() => {
|
|
|
713
710
|
</script>
|
|
714
711
|
```
|
|
715
712
|
|
|
716
|
-
#### 3. 主题跟随系统
|
|
717
|
-
|
|
718
|
-
```typescript
|
|
719
|
-
import { useDark } from '@vueuse/core'
|
|
720
|
-
|
|
721
|
-
const isDark = useDark()
|
|
722
|
-
|
|
723
|
-
const { createEditor, setTheme } = useMonaco({
|
|
724
|
-
themes: ['github-dark', 'github-light'],
|
|
725
|
-
})
|
|
726
|
-
|
|
727
|
-
// 主题会自动跟随 isDark 状态切换
|
|
728
|
-
```
|
|
729
|
-
|
|
730
713
|
### 故障排除
|
|
731
714
|
|
|
732
715
|
#### 1. 打包后编辑器无法显示
|
package/dist/index.cjs
CHANGED
|
@@ -1125,11 +1125,12 @@ var DiffEditorManager = class {
|
|
|
1125
1125
|
this.lastKnownOriginalCode = original;
|
|
1126
1126
|
}
|
|
1127
1127
|
let prevM = this.lastKnownModifiedCode;
|
|
1128
|
+
const buffered = this.appendBufferDiff.length > 0 ? this.appendBufferDiff.join("") : "";
|
|
1128
1129
|
if (this.appendBufferDiff.length > 0) try {
|
|
1129
|
-
prevM = m.getValue();
|
|
1130
|
+
prevM = m.getValue() + buffered;
|
|
1130
1131
|
this.lastKnownModifiedCode = prevM;
|
|
1131
1132
|
} catch {
|
|
1132
|
-
prevM = this.lastKnownModifiedCode ?? "";
|
|
1133
|
+
prevM = (this.lastKnownModifiedCode ?? "") + buffered;
|
|
1133
1134
|
}
|
|
1134
1135
|
const prevMLineCount = m.getLineCount();
|
|
1135
1136
|
if (prevM !== modified) {
|
|
@@ -1729,7 +1730,8 @@ var EditorManager = class {
|
|
|
1729
1730
|
}
|
|
1730
1731
|
return;
|
|
1731
1732
|
}
|
|
1732
|
-
const
|
|
1733
|
+
const buffered = this.appendBuffer.length > 0 ? this.appendBuffer.join("") : "";
|
|
1734
|
+
const prevCode = this.appendBuffer.length > 0 ? this.editorView.getValue() + buffered : this.lastKnownCode ?? this.editorView.getValue();
|
|
1733
1735
|
if (prevCode === newCode) return;
|
|
1734
1736
|
if (newCode.startsWith(prevCode) && prevCode.length < newCode.length) {
|
|
1735
1737
|
const suffix = newCode.slice(prevCode.length);
|
|
@@ -1820,6 +1822,9 @@ var EditorManager = class {
|
|
|
1820
1822
|
text,
|
|
1821
1823
|
forceMoveMarkers: true
|
|
1822
1824
|
}]);
|
|
1825
|
+
try {
|
|
1826
|
+
this.lastKnownCode = model.getValue();
|
|
1827
|
+
} catch {}
|
|
1823
1828
|
const newLineCount = model.getLineCount();
|
|
1824
1829
|
if (lastLine !== newLineCount) {
|
|
1825
1830
|
this.cachedLineCount = newLineCount;
|
|
@@ -1923,85 +1928,6 @@ var EditorManager = class {
|
|
|
1923
1928
|
}
|
|
1924
1929
|
};
|
|
1925
1930
|
|
|
1926
|
-
//#endregion
|
|
1927
|
-
//#region src/reactivity.ts
|
|
1928
|
-
function ref(initial) {
|
|
1929
|
-
const s = (0, alien_signals.signal)(initial);
|
|
1930
|
-
return Object.defineProperty({}, "value", {
|
|
1931
|
-
get() {
|
|
1932
|
-
return s();
|
|
1933
|
-
},
|
|
1934
|
-
set(v) {
|
|
1935
|
-
s(v);
|
|
1936
|
-
},
|
|
1937
|
-
enumerable: true,
|
|
1938
|
-
configurable: false
|
|
1939
|
-
});
|
|
1940
|
-
}
|
|
1941
|
-
function computed(getter) {
|
|
1942
|
-
const c = (0, alien_signals.computed)(() => getter());
|
|
1943
|
-
return Object.defineProperty({}, "value", {
|
|
1944
|
-
get() {
|
|
1945
|
-
return c();
|
|
1946
|
-
},
|
|
1947
|
-
set(_) {},
|
|
1948
|
-
enumerable: true,
|
|
1949
|
-
configurable: false
|
|
1950
|
-
});
|
|
1951
|
-
}
|
|
1952
|
-
function watch(source, cb, options = {}) {
|
|
1953
|
-
let initialized = false;
|
|
1954
|
-
let oldVal;
|
|
1955
|
-
const stop = (0, alien_signals.effect)(() => {
|
|
1956
|
-
const newVal = source();
|
|
1957
|
-
if (!initialized) {
|
|
1958
|
-
initialized = true;
|
|
1959
|
-
if (options.immediate) if (options.flush === "post") queueMicrotask(() => cb(newVal, oldVal));
|
|
1960
|
-
else cb(newVal, oldVal);
|
|
1961
|
-
} else if (!Object.is(newVal, oldVal)) if (options.flush === "post") queueMicrotask(() => cb(newVal, oldVal));
|
|
1962
|
-
else cb(newVal, oldVal);
|
|
1963
|
-
oldVal = newVal;
|
|
1964
|
-
});
|
|
1965
|
-
return stop;
|
|
1966
|
-
}
|
|
1967
|
-
|
|
1968
|
-
//#endregion
|
|
1969
|
-
//#region src/isDark.ts
|
|
1970
|
-
const isDark = ref(false);
|
|
1971
|
-
function computeIsDark() {
|
|
1972
|
-
var _el$classList, _window$matchMedia, _window;
|
|
1973
|
-
if (typeof window === "undefined" || typeof document === "undefined") return false;
|
|
1974
|
-
const el = document.documentElement;
|
|
1975
|
-
const hasClass = ((_el$classList = el.classList) === null || _el$classList === void 0 ? void 0 : _el$classList.contains("dark")) ?? false;
|
|
1976
|
-
const mql = (_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-color-scheme: dark)");
|
|
1977
|
-
const prefersDark = !!(mql === null || mql === void 0 ? void 0 : mql.matches);
|
|
1978
|
-
return hasClass || prefersDark;
|
|
1979
|
-
}
|
|
1980
|
-
if (typeof window !== "undefined" && typeof document !== "undefined") {
|
|
1981
|
-
var _window$matchMedia2, _window2;
|
|
1982
|
-
const el = document.documentElement;
|
|
1983
|
-
const mql = (_window$matchMedia2 = (_window2 = window).matchMedia) === null || _window$matchMedia2 === void 0 ? void 0 : _window$matchMedia2.call(_window2, "(prefers-color-scheme: dark)");
|
|
1984
|
-
const update = () => {
|
|
1985
|
-
isDark.value = computeIsDark();
|
|
1986
|
-
};
|
|
1987
|
-
update();
|
|
1988
|
-
const onMqlChange = () => update();
|
|
1989
|
-
if (mql) mql.addEventListener ? mql.addEventListener("change", onMqlChange) : mql.addListener(onMqlChange);
|
|
1990
|
-
const mo = new MutationObserver(update);
|
|
1991
|
-
mo.observe(el, {
|
|
1992
|
-
attributes: true,
|
|
1993
|
-
attributeFilter: ["class"]
|
|
1994
|
-
});
|
|
1995
|
-
const cleanup = () => {
|
|
1996
|
-
if (mql) mql.removeEventListener ? mql.removeEventListener("change", onMqlChange) : mql.removeListener(onMqlChange);
|
|
1997
|
-
mo.disconnect();
|
|
1998
|
-
window.removeEventListener("pagehide", cleanup);
|
|
1999
|
-
window.removeEventListener("beforeunload", cleanup);
|
|
2000
|
-
};
|
|
2001
|
-
window.addEventListener("pagehide", cleanup);
|
|
2002
|
-
window.addEventListener("beforeunload", cleanup);
|
|
2003
|
-
}
|
|
2004
|
-
|
|
2005
1931
|
//#endregion
|
|
2006
1932
|
//#region src/preloadMonacoWorkers.ts
|
|
2007
1933
|
async function preloadMonacoWorkers() {
|
|
@@ -2041,6 +1967,20 @@ async function preloadMonacoWorkers() {
|
|
|
2041
1967
|
} catch {}
|
|
2042
1968
|
}
|
|
2043
1969
|
|
|
1970
|
+
//#endregion
|
|
1971
|
+
//#region src/reactivity.ts
|
|
1972
|
+
function computed(getter) {
|
|
1973
|
+
const c = (0, alien_signals.computed)(() => getter());
|
|
1974
|
+
return Object.defineProperty({}, "value", {
|
|
1975
|
+
get() {
|
|
1976
|
+
return c();
|
|
1977
|
+
},
|
|
1978
|
+
set(_) {},
|
|
1979
|
+
enumerable: true,
|
|
1980
|
+
configurable: false
|
|
1981
|
+
});
|
|
1982
|
+
}
|
|
1983
|
+
|
|
2044
1984
|
//#endregion
|
|
2045
1985
|
//#region src/utils/arraysEqual.ts
|
|
2046
1986
|
function arraysEqual(a, b) {
|
|
@@ -2308,7 +2248,7 @@ function useMonaco(monacoOptions = {}) {
|
|
|
2308
2248
|
const appendBuffer = [];
|
|
2309
2249
|
let appendBufferScheduled = false;
|
|
2310
2250
|
let lastAppliedTheme = null;
|
|
2311
|
-
const currentTheme = computed(() => monacoOptions.theme ?? (
|
|
2251
|
+
const currentTheme = computed(() => monacoOptions.theme ?? (typeof themes[0] === "string" ? themes[0] : themes[0].name));
|
|
2312
2252
|
let themeWatcher = null;
|
|
2313
2253
|
const rafScheduler = createRafScheduler();
|
|
2314
2254
|
async function setThemeInternal(theme, force = false) {
|
|
@@ -2393,13 +2333,6 @@ function useMonaco(monacoOptions = {}) {
|
|
|
2393
2333
|
editorMgr = new EditorManager(monacoOptions, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, monacoOptions.revealDebounceMs);
|
|
2394
2334
|
editorView = await editorMgr.createEditor(container, code, language, initialThemeName);
|
|
2395
2335
|
if (typeof monacoOptions.onThemeChange === "function") monacoOptions.onThemeChange(initialThemeName);
|
|
2396
|
-
if (!monacoOptions.theme) themeWatcher = watch(() => isDark.value, () => {
|
|
2397
|
-
const t = currentTheme.value;
|
|
2398
|
-
if (t !== lastAppliedTheme) setThemeInternal(t);
|
|
2399
|
-
}, {
|
|
2400
|
-
flush: "post",
|
|
2401
|
-
immediate: true
|
|
2402
|
-
});
|
|
2403
2336
|
if (editorView) lastKnownCode = editorView.getValue();
|
|
2404
2337
|
return editorView;
|
|
2405
2338
|
}
|
|
@@ -2430,13 +2363,6 @@ function useMonaco(monacoOptions = {}) {
|
|
|
2430
2363
|
diffMgr = new DiffEditorManager(monacoOptions, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, diffAutoScroll, monacoOptions.revealDebounceMs);
|
|
2431
2364
|
diffEditorView = await diffMgr.createDiffEditor(container, originalCode, modifiedCode, language, initialThemeName);
|
|
2432
2365
|
if (typeof monacoOptions.onThemeChange === "function") monacoOptions.onThemeChange(initialThemeName);
|
|
2433
|
-
if (!monacoOptions.theme) themeWatcher = watch(() => isDark.value, () => {
|
|
2434
|
-
const t = currentTheme.value;
|
|
2435
|
-
if (t !== lastAppliedTheme) setThemeInternal(t);
|
|
2436
|
-
}, {
|
|
2437
|
-
flush: "post",
|
|
2438
|
-
immediate: true
|
|
2439
|
-
});
|
|
2440
2366
|
const models = diffMgr.getDiffModels();
|
|
2441
2367
|
originalModel = models.original;
|
|
2442
2368
|
modifiedModel = models.modified;
|
|
@@ -2773,7 +2699,6 @@ exports.clearHighlighterCache = clearHighlighterCache;
|
|
|
2773
2699
|
exports.defaultRevealDebounceMs = defaultRevealDebounceMs;
|
|
2774
2700
|
exports.detectLanguage = detectLanguage;
|
|
2775
2701
|
exports.getOrCreateHighlighter = getOrCreateHighlighter;
|
|
2776
|
-
exports.isDark = isDark;
|
|
2777
2702
|
exports.preloadMonacoWorkers = preloadMonacoWorkers;
|
|
2778
2703
|
exports.registerMonacoThemes = registerMonacoThemes;
|
|
2779
2704
|
exports.useMonaco = useMonaco;
|
package/dist/index.d.cts
CHANGED
|
@@ -126,14 +126,6 @@ declare function detectLanguage(code: string, additionalLanguages?: LanguageDefi
|
|
|
126
126
|
//#endregion
|
|
127
127
|
//#region src/constant.d.ts
|
|
128
128
|
declare const defaultRevealDebounceMs = 75;
|
|
129
|
-
//#endregion
|
|
130
|
-
//#region src/reactivity.d.ts
|
|
131
|
-
interface Ref<T> {
|
|
132
|
-
value: T;
|
|
133
|
-
}
|
|
134
|
-
//#endregion
|
|
135
|
-
//#region src/isDark.d.ts
|
|
136
|
-
declare const isDark: Ref<boolean>;
|
|
137
129
|
declare namespace monaco_shim_d_exports {
|
|
138
130
|
export { monaco as default };
|
|
139
131
|
}
|
|
@@ -285,4 +277,4 @@ declare function useMonaco(monacoOptions?: MonacoOptions): {
|
|
|
285
277
|
} | null;
|
|
286
278
|
};
|
|
287
279
|
//#endregion
|
|
288
|
-
export { MonacoDiffEditorInstance, MonacoEditorInstance, MonacoLanguage, MonacoOptions, MonacoTheme, RevealStrategy, ShikiHighlighter, clearHighlighterCache, defaultRevealDebounceMs, detectLanguage, getOrCreateHighlighter,
|
|
280
|
+
export { MonacoDiffEditorInstance, MonacoEditorInstance, MonacoLanguage, MonacoOptions, MonacoTheme, RevealStrategy, ShikiHighlighter, clearHighlighterCache, defaultRevealDebounceMs, detectLanguage, getOrCreateHighlighter, preloadMonacoWorkers, registerMonacoThemes, useMonaco };
|
package/dist/index.d.ts
CHANGED
|
@@ -125,14 +125,6 @@ declare function detectLanguage(code: string, additionalLanguages?: LanguageDefi
|
|
|
125
125
|
//#endregion
|
|
126
126
|
//#region src/constant.d.ts
|
|
127
127
|
declare const defaultRevealDebounceMs = 75;
|
|
128
|
-
//#endregion
|
|
129
|
-
//#region src/reactivity.d.ts
|
|
130
|
-
interface Ref<T> {
|
|
131
|
-
value: T;
|
|
132
|
-
}
|
|
133
|
-
//#endregion
|
|
134
|
-
//#region src/isDark.d.ts
|
|
135
|
-
declare const isDark: Ref<boolean>;
|
|
136
128
|
declare namespace monaco_shim_d_exports {
|
|
137
129
|
export { monaco as default };
|
|
138
130
|
}
|
|
@@ -284,4 +276,4 @@ declare function useMonaco(monacoOptions?: MonacoOptions): {
|
|
|
284
276
|
} | null;
|
|
285
277
|
};
|
|
286
278
|
//#endregion
|
|
287
|
-
export { MonacoDiffEditorInstance, MonacoEditorInstance, MonacoLanguage, MonacoOptions, MonacoTheme, RevealStrategy, ShikiHighlighter, clearHighlighterCache, defaultRevealDebounceMs, detectLanguage, getOrCreateHighlighter,
|
|
279
|
+
export { MonacoDiffEditorInstance, MonacoEditorInstance, MonacoLanguage, MonacoOptions, MonacoTheme, RevealStrategy, ShikiHighlighter, clearHighlighterCache, defaultRevealDebounceMs, detectLanguage, getOrCreateHighlighter, preloadMonacoWorkers, registerMonacoThemes, useMonaco };
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __export, __reExport } from "./chunk-CHLpw0oG.js";
|
|
2
2
|
import * as _monaco from "monaco-editor";
|
|
3
|
-
import { computed
|
|
3
|
+
import { computed } from "alien-signals";
|
|
4
4
|
import { shikiToMonaco } from "@shikijs/monaco";
|
|
5
5
|
import { createHighlighter } from "shiki";
|
|
6
6
|
|
|
@@ -1097,11 +1097,12 @@ var DiffEditorManager = class {
|
|
|
1097
1097
|
this.lastKnownOriginalCode = original;
|
|
1098
1098
|
}
|
|
1099
1099
|
let prevM = this.lastKnownModifiedCode;
|
|
1100
|
+
const buffered = this.appendBufferDiff.length > 0 ? this.appendBufferDiff.join("") : "";
|
|
1100
1101
|
if (this.appendBufferDiff.length > 0) try {
|
|
1101
|
-
prevM = m.getValue();
|
|
1102
|
+
prevM = m.getValue() + buffered;
|
|
1102
1103
|
this.lastKnownModifiedCode = prevM;
|
|
1103
1104
|
} catch {
|
|
1104
|
-
prevM = this.lastKnownModifiedCode ?? "";
|
|
1105
|
+
prevM = (this.lastKnownModifiedCode ?? "") + buffered;
|
|
1105
1106
|
}
|
|
1106
1107
|
const prevMLineCount = m.getLineCount();
|
|
1107
1108
|
if (prevM !== modified) {
|
|
@@ -1701,7 +1702,8 @@ var EditorManager = class {
|
|
|
1701
1702
|
}
|
|
1702
1703
|
return;
|
|
1703
1704
|
}
|
|
1704
|
-
const
|
|
1705
|
+
const buffered = this.appendBuffer.length > 0 ? this.appendBuffer.join("") : "";
|
|
1706
|
+
const prevCode = this.appendBuffer.length > 0 ? this.editorView.getValue() + buffered : this.lastKnownCode ?? this.editorView.getValue();
|
|
1705
1707
|
if (prevCode === newCode) return;
|
|
1706
1708
|
if (newCode.startsWith(prevCode) && prevCode.length < newCode.length) {
|
|
1707
1709
|
const suffix = newCode.slice(prevCode.length);
|
|
@@ -1792,6 +1794,9 @@ var EditorManager = class {
|
|
|
1792
1794
|
text,
|
|
1793
1795
|
forceMoveMarkers: true
|
|
1794
1796
|
}]);
|
|
1797
|
+
try {
|
|
1798
|
+
this.lastKnownCode = model.getValue();
|
|
1799
|
+
} catch {}
|
|
1795
1800
|
const newLineCount = model.getLineCount();
|
|
1796
1801
|
if (lastLine !== newLineCount) {
|
|
1797
1802
|
this.cachedLineCount = newLineCount;
|
|
@@ -1895,85 +1900,6 @@ var EditorManager = class {
|
|
|
1895
1900
|
}
|
|
1896
1901
|
};
|
|
1897
1902
|
|
|
1898
|
-
//#endregion
|
|
1899
|
-
//#region src/reactivity.ts
|
|
1900
|
-
function ref(initial) {
|
|
1901
|
-
const s = signal(initial);
|
|
1902
|
-
return Object.defineProperty({}, "value", {
|
|
1903
|
-
get() {
|
|
1904
|
-
return s();
|
|
1905
|
-
},
|
|
1906
|
-
set(v) {
|
|
1907
|
-
s(v);
|
|
1908
|
-
},
|
|
1909
|
-
enumerable: true,
|
|
1910
|
-
configurable: false
|
|
1911
|
-
});
|
|
1912
|
-
}
|
|
1913
|
-
function computed$1(getter) {
|
|
1914
|
-
const c = computed(() => getter());
|
|
1915
|
-
return Object.defineProperty({}, "value", {
|
|
1916
|
-
get() {
|
|
1917
|
-
return c();
|
|
1918
|
-
},
|
|
1919
|
-
set(_) {},
|
|
1920
|
-
enumerable: true,
|
|
1921
|
-
configurable: false
|
|
1922
|
-
});
|
|
1923
|
-
}
|
|
1924
|
-
function watch(source, cb, options = {}) {
|
|
1925
|
-
let initialized = false;
|
|
1926
|
-
let oldVal;
|
|
1927
|
-
const stop = effect(() => {
|
|
1928
|
-
const newVal = source();
|
|
1929
|
-
if (!initialized) {
|
|
1930
|
-
initialized = true;
|
|
1931
|
-
if (options.immediate) if (options.flush === "post") queueMicrotask(() => cb(newVal, oldVal));
|
|
1932
|
-
else cb(newVal, oldVal);
|
|
1933
|
-
} else if (!Object.is(newVal, oldVal)) if (options.flush === "post") queueMicrotask(() => cb(newVal, oldVal));
|
|
1934
|
-
else cb(newVal, oldVal);
|
|
1935
|
-
oldVal = newVal;
|
|
1936
|
-
});
|
|
1937
|
-
return stop;
|
|
1938
|
-
}
|
|
1939
|
-
|
|
1940
|
-
//#endregion
|
|
1941
|
-
//#region src/isDark.ts
|
|
1942
|
-
const isDark = ref(false);
|
|
1943
|
-
function computeIsDark() {
|
|
1944
|
-
var _el$classList, _window$matchMedia, _window;
|
|
1945
|
-
if (typeof window === "undefined" || typeof document === "undefined") return false;
|
|
1946
|
-
const el = document.documentElement;
|
|
1947
|
-
const hasClass = ((_el$classList = el.classList) === null || _el$classList === void 0 ? void 0 : _el$classList.contains("dark")) ?? false;
|
|
1948
|
-
const mql = (_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-color-scheme: dark)");
|
|
1949
|
-
const prefersDark = !!(mql === null || mql === void 0 ? void 0 : mql.matches);
|
|
1950
|
-
return hasClass || prefersDark;
|
|
1951
|
-
}
|
|
1952
|
-
if (typeof window !== "undefined" && typeof document !== "undefined") {
|
|
1953
|
-
var _window$matchMedia2, _window2;
|
|
1954
|
-
const el = document.documentElement;
|
|
1955
|
-
const mql = (_window$matchMedia2 = (_window2 = window).matchMedia) === null || _window$matchMedia2 === void 0 ? void 0 : _window$matchMedia2.call(_window2, "(prefers-color-scheme: dark)");
|
|
1956
|
-
const update = () => {
|
|
1957
|
-
isDark.value = computeIsDark();
|
|
1958
|
-
};
|
|
1959
|
-
update();
|
|
1960
|
-
const onMqlChange = () => update();
|
|
1961
|
-
if (mql) mql.addEventListener ? mql.addEventListener("change", onMqlChange) : mql.addListener(onMqlChange);
|
|
1962
|
-
const mo = new MutationObserver(update);
|
|
1963
|
-
mo.observe(el, {
|
|
1964
|
-
attributes: true,
|
|
1965
|
-
attributeFilter: ["class"]
|
|
1966
|
-
});
|
|
1967
|
-
const cleanup = () => {
|
|
1968
|
-
if (mql) mql.removeEventListener ? mql.removeEventListener("change", onMqlChange) : mql.removeListener(onMqlChange);
|
|
1969
|
-
mo.disconnect();
|
|
1970
|
-
window.removeEventListener("pagehide", cleanup);
|
|
1971
|
-
window.removeEventListener("beforeunload", cleanup);
|
|
1972
|
-
};
|
|
1973
|
-
window.addEventListener("pagehide", cleanup);
|
|
1974
|
-
window.addEventListener("beforeunload", cleanup);
|
|
1975
|
-
}
|
|
1976
|
-
|
|
1977
1903
|
//#endregion
|
|
1978
1904
|
//#region src/preloadMonacoWorkers.ts
|
|
1979
1905
|
async function preloadMonacoWorkers() {
|
|
@@ -2013,6 +1939,20 @@ async function preloadMonacoWorkers() {
|
|
|
2013
1939
|
} catch {}
|
|
2014
1940
|
}
|
|
2015
1941
|
|
|
1942
|
+
//#endregion
|
|
1943
|
+
//#region src/reactivity.ts
|
|
1944
|
+
function computed$1(getter) {
|
|
1945
|
+
const c = computed(() => getter());
|
|
1946
|
+
return Object.defineProperty({}, "value", {
|
|
1947
|
+
get() {
|
|
1948
|
+
return c();
|
|
1949
|
+
},
|
|
1950
|
+
set(_) {},
|
|
1951
|
+
enumerable: true,
|
|
1952
|
+
configurable: false
|
|
1953
|
+
});
|
|
1954
|
+
}
|
|
1955
|
+
|
|
2016
1956
|
//#endregion
|
|
2017
1957
|
//#region src/utils/arraysEqual.ts
|
|
2018
1958
|
function arraysEqual(a, b) {
|
|
@@ -2280,7 +2220,7 @@ function useMonaco(monacoOptions = {}) {
|
|
|
2280
2220
|
const appendBuffer = [];
|
|
2281
2221
|
let appendBufferScheduled = false;
|
|
2282
2222
|
let lastAppliedTheme = null;
|
|
2283
|
-
const currentTheme = computed$1(() => monacoOptions.theme ?? (
|
|
2223
|
+
const currentTheme = computed$1(() => monacoOptions.theme ?? (typeof themes[0] === "string" ? themes[0] : themes[0].name));
|
|
2284
2224
|
let themeWatcher = null;
|
|
2285
2225
|
const rafScheduler = createRafScheduler();
|
|
2286
2226
|
async function setThemeInternal(theme, force = false) {
|
|
@@ -2365,13 +2305,6 @@ function useMonaco(monacoOptions = {}) {
|
|
|
2365
2305
|
editorMgr = new EditorManager(monacoOptions, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, monacoOptions.revealDebounceMs);
|
|
2366
2306
|
editorView = await editorMgr.createEditor(container, code, language, initialThemeName);
|
|
2367
2307
|
if (typeof monacoOptions.onThemeChange === "function") monacoOptions.onThemeChange(initialThemeName);
|
|
2368
|
-
if (!monacoOptions.theme) themeWatcher = watch(() => isDark.value, () => {
|
|
2369
|
-
const t = currentTheme.value;
|
|
2370
|
-
if (t !== lastAppliedTheme) setThemeInternal(t);
|
|
2371
|
-
}, {
|
|
2372
|
-
flush: "post",
|
|
2373
|
-
immediate: true
|
|
2374
|
-
});
|
|
2375
2308
|
if (editorView) lastKnownCode = editorView.getValue();
|
|
2376
2309
|
return editorView;
|
|
2377
2310
|
}
|
|
@@ -2402,13 +2335,6 @@ function useMonaco(monacoOptions = {}) {
|
|
|
2402
2335
|
diffMgr = new DiffEditorManager(monacoOptions, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, diffAutoScroll, monacoOptions.revealDebounceMs);
|
|
2403
2336
|
diffEditorView = await diffMgr.createDiffEditor(container, originalCode, modifiedCode, language, initialThemeName);
|
|
2404
2337
|
if (typeof monacoOptions.onThemeChange === "function") monacoOptions.onThemeChange(initialThemeName);
|
|
2405
|
-
if (!monacoOptions.theme) themeWatcher = watch(() => isDark.value, () => {
|
|
2406
|
-
const t = currentTheme.value;
|
|
2407
|
-
if (t !== lastAppliedTheme) setThemeInternal(t);
|
|
2408
|
-
}, {
|
|
2409
|
-
flush: "post",
|
|
2410
|
-
immediate: true
|
|
2411
|
-
});
|
|
2412
2338
|
const models = diffMgr.getDiffModels();
|
|
2413
2339
|
originalModel = models.original;
|
|
2414
2340
|
modifiedModel = models.modified;
|
|
@@ -2740,4 +2666,4 @@ function useMonaco(monacoOptions = {}) {
|
|
|
2740
2666
|
}
|
|
2741
2667
|
|
|
2742
2668
|
//#endregion
|
|
2743
|
-
export { RevealStrategy, clearHighlighterCache, defaultRevealDebounceMs, detectLanguage, getOrCreateHighlighter,
|
|
2669
|
+
export { RevealStrategy, clearHighlighterCache, defaultRevealDebounceMs, detectLanguage, getOrCreateHighlighter, preloadMonacoWorkers, registerMonacoThemes, useMonaco };
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "stream-monaco",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
5
|
-
"packageManager": "pnpm@10.
|
|
4
|
+
"version": "0.0.8",
|
|
5
|
+
"packageManager": "pnpm@10.24.0",
|
|
6
6
|
"description": "A framework-agnostic library for integrating Monaco Editor with Shiki highlighting, optimized for streaming updates.",
|
|
7
7
|
"author": "Simon He",
|
|
8
8
|
"license": "MIT",
|
|
@@ -72,9 +72,9 @@
|
|
|
72
72
|
"monaco-editor": "^0.52.2"
|
|
73
73
|
},
|
|
74
74
|
"dependencies": {
|
|
75
|
-
"@shikijs/monaco": "^3.
|
|
75
|
+
"@shikijs/monaco": "^3.19.0",
|
|
76
76
|
"alien-signals": "^2.0.8",
|
|
77
|
-
"shiki": "^3.
|
|
77
|
+
"shiki": "^3.19.0"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
80
|
"@antfu/eslint-config": "^5.4.1",
|