stream-monaco 0.0.7 → 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.
Files changed (7) hide show
  1. package/README.md +0 -2
  2. package/README.zh-CN.md +0 -17
  3. package/dist/index.cjs +15 -95
  4. package/dist/index.d.cts +1 -9
  5. package/dist/index.d.ts +1 -9
  6. package/dist/index.js +17 -96
  7. 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
@@ -1928,85 +1928,6 @@ var EditorManager = class {
1928
1928
  }
1929
1929
  };
1930
1930
 
1931
- //#endregion
1932
- //#region src/reactivity.ts
1933
- function ref(initial) {
1934
- const s = (0, alien_signals.signal)(initial);
1935
- return Object.defineProperty({}, "value", {
1936
- get() {
1937
- return s();
1938
- },
1939
- set(v) {
1940
- s(v);
1941
- },
1942
- enumerable: true,
1943
- configurable: false
1944
- });
1945
- }
1946
- function computed(getter) {
1947
- const c = (0, alien_signals.computed)(() => getter());
1948
- return Object.defineProperty({}, "value", {
1949
- get() {
1950
- return c();
1951
- },
1952
- set(_) {},
1953
- enumerable: true,
1954
- configurable: false
1955
- });
1956
- }
1957
- function watch(source, cb, options = {}) {
1958
- let initialized = false;
1959
- let oldVal;
1960
- const stop = (0, alien_signals.effect)(() => {
1961
- const newVal = source();
1962
- if (!initialized) {
1963
- initialized = true;
1964
- if (options.immediate) if (options.flush === "post") queueMicrotask(() => cb(newVal, oldVal));
1965
- else cb(newVal, oldVal);
1966
- } else if (!Object.is(newVal, oldVal)) if (options.flush === "post") queueMicrotask(() => cb(newVal, oldVal));
1967
- else cb(newVal, oldVal);
1968
- oldVal = newVal;
1969
- });
1970
- return stop;
1971
- }
1972
-
1973
- //#endregion
1974
- //#region src/isDark.ts
1975
- const isDark = ref(false);
1976
- function computeIsDark() {
1977
- var _el$classList, _window$matchMedia, _window;
1978
- if (typeof window === "undefined" || typeof document === "undefined") return false;
1979
- const el = document.documentElement;
1980
- const hasClass = ((_el$classList = el.classList) === null || _el$classList === void 0 ? void 0 : _el$classList.contains("dark")) ?? false;
1981
- const mql = (_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-color-scheme: dark)");
1982
- const prefersDark = !!(mql === null || mql === void 0 ? void 0 : mql.matches);
1983
- return hasClass || prefersDark;
1984
- }
1985
- if (typeof window !== "undefined" && typeof document !== "undefined") {
1986
- var _window$matchMedia2, _window2;
1987
- const el = document.documentElement;
1988
- const mql = (_window$matchMedia2 = (_window2 = window).matchMedia) === null || _window$matchMedia2 === void 0 ? void 0 : _window$matchMedia2.call(_window2, "(prefers-color-scheme: dark)");
1989
- const update = () => {
1990
- isDark.value = computeIsDark();
1991
- };
1992
- update();
1993
- const onMqlChange = () => update();
1994
- if (mql) mql.addEventListener ? mql.addEventListener("change", onMqlChange) : mql.addListener(onMqlChange);
1995
- const mo = new MutationObserver(update);
1996
- mo.observe(el, {
1997
- attributes: true,
1998
- attributeFilter: ["class"]
1999
- });
2000
- const cleanup = () => {
2001
- if (mql) mql.removeEventListener ? mql.removeEventListener("change", onMqlChange) : mql.removeListener(onMqlChange);
2002
- mo.disconnect();
2003
- window.removeEventListener("pagehide", cleanup);
2004
- window.removeEventListener("beforeunload", cleanup);
2005
- };
2006
- window.addEventListener("pagehide", cleanup);
2007
- window.addEventListener("beforeunload", cleanup);
2008
- }
2009
-
2010
1931
  //#endregion
2011
1932
  //#region src/preloadMonacoWorkers.ts
2012
1933
  async function preloadMonacoWorkers() {
@@ -2046,6 +1967,20 @@ async function preloadMonacoWorkers() {
2046
1967
  } catch {}
2047
1968
  }
2048
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
+
2049
1984
  //#endregion
2050
1985
  //#region src/utils/arraysEqual.ts
2051
1986
  function arraysEqual(a, b) {
@@ -2313,7 +2248,7 @@ function useMonaco(monacoOptions = {}) {
2313
2248
  const appendBuffer = [];
2314
2249
  let appendBufferScheduled = false;
2315
2250
  let lastAppliedTheme = null;
2316
- const currentTheme = computed(() => monacoOptions.theme ?? (isDark.value ? typeof themes[0] === "string" ? themes[0] : themes[0].name : typeof themes[1] === "string" ? themes[1] : themes[1].name));
2251
+ const currentTheme = computed(() => monacoOptions.theme ?? (typeof themes[0] === "string" ? themes[0] : themes[0].name));
2317
2252
  let themeWatcher = null;
2318
2253
  const rafScheduler = createRafScheduler();
2319
2254
  async function setThemeInternal(theme, force = false) {
@@ -2398,13 +2333,6 @@ function useMonaco(monacoOptions = {}) {
2398
2333
  editorMgr = new EditorManager(monacoOptions, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, monacoOptions.revealDebounceMs);
2399
2334
  editorView = await editorMgr.createEditor(container, code, language, initialThemeName);
2400
2335
  if (typeof monacoOptions.onThemeChange === "function") monacoOptions.onThemeChange(initialThemeName);
2401
- if (!monacoOptions.theme) themeWatcher = watch(() => isDark.value, () => {
2402
- const t = currentTheme.value;
2403
- if (t !== lastAppliedTheme) setThemeInternal(t);
2404
- }, {
2405
- flush: "post",
2406
- immediate: true
2407
- });
2408
2336
  if (editorView) lastKnownCode = editorView.getValue();
2409
2337
  return editorView;
2410
2338
  }
@@ -2435,13 +2363,6 @@ function useMonaco(monacoOptions = {}) {
2435
2363
  diffMgr = new DiffEditorManager(monacoOptions, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, diffAutoScroll, monacoOptions.revealDebounceMs);
2436
2364
  diffEditorView = await diffMgr.createDiffEditor(container, originalCode, modifiedCode, language, initialThemeName);
2437
2365
  if (typeof monacoOptions.onThemeChange === "function") monacoOptions.onThemeChange(initialThemeName);
2438
- if (!monacoOptions.theme) themeWatcher = watch(() => isDark.value, () => {
2439
- const t = currentTheme.value;
2440
- if (t !== lastAppliedTheme) setThemeInternal(t);
2441
- }, {
2442
- flush: "post",
2443
- immediate: true
2444
- });
2445
2366
  const models = diffMgr.getDiffModels();
2446
2367
  originalModel = models.original;
2447
2368
  modifiedModel = models.modified;
@@ -2778,7 +2699,6 @@ exports.clearHighlighterCache = clearHighlighterCache;
2778
2699
  exports.defaultRevealDebounceMs = defaultRevealDebounceMs;
2779
2700
  exports.detectLanguage = detectLanguage;
2780
2701
  exports.getOrCreateHighlighter = getOrCreateHighlighter;
2781
- exports.isDark = isDark;
2782
2702
  exports.preloadMonacoWorkers = preloadMonacoWorkers;
2783
2703
  exports.registerMonacoThemes = registerMonacoThemes;
2784
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, isDark, preloadMonacoWorkers, registerMonacoThemes, useMonaco };
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, isDark, preloadMonacoWorkers, registerMonacoThemes, useMonaco };
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, effect, signal } from "alien-signals";
3
+ import { computed } from "alien-signals";
4
4
  import { shikiToMonaco } from "@shikijs/monaco";
5
5
  import { createHighlighter } from "shiki";
6
6
 
@@ -1900,85 +1900,6 @@ var EditorManager = class {
1900
1900
  }
1901
1901
  };
1902
1902
 
1903
- //#endregion
1904
- //#region src/reactivity.ts
1905
- function ref(initial) {
1906
- const s = signal(initial);
1907
- return Object.defineProperty({}, "value", {
1908
- get() {
1909
- return s();
1910
- },
1911
- set(v) {
1912
- s(v);
1913
- },
1914
- enumerable: true,
1915
- configurable: false
1916
- });
1917
- }
1918
- function computed$1(getter) {
1919
- const c = computed(() => getter());
1920
- return Object.defineProperty({}, "value", {
1921
- get() {
1922
- return c();
1923
- },
1924
- set(_) {},
1925
- enumerable: true,
1926
- configurable: false
1927
- });
1928
- }
1929
- function watch(source, cb, options = {}) {
1930
- let initialized = false;
1931
- let oldVal;
1932
- const stop = effect(() => {
1933
- const newVal = source();
1934
- if (!initialized) {
1935
- initialized = true;
1936
- if (options.immediate) if (options.flush === "post") queueMicrotask(() => cb(newVal, oldVal));
1937
- else cb(newVal, oldVal);
1938
- } else if (!Object.is(newVal, oldVal)) if (options.flush === "post") queueMicrotask(() => cb(newVal, oldVal));
1939
- else cb(newVal, oldVal);
1940
- oldVal = newVal;
1941
- });
1942
- return stop;
1943
- }
1944
-
1945
- //#endregion
1946
- //#region src/isDark.ts
1947
- const isDark = ref(false);
1948
- function computeIsDark() {
1949
- var _el$classList, _window$matchMedia, _window;
1950
- if (typeof window === "undefined" || typeof document === "undefined") return false;
1951
- const el = document.documentElement;
1952
- const hasClass = ((_el$classList = el.classList) === null || _el$classList === void 0 ? void 0 : _el$classList.contains("dark")) ?? false;
1953
- const mql = (_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-color-scheme: dark)");
1954
- const prefersDark = !!(mql === null || mql === void 0 ? void 0 : mql.matches);
1955
- return hasClass || prefersDark;
1956
- }
1957
- if (typeof window !== "undefined" && typeof document !== "undefined") {
1958
- var _window$matchMedia2, _window2;
1959
- const el = document.documentElement;
1960
- const mql = (_window$matchMedia2 = (_window2 = window).matchMedia) === null || _window$matchMedia2 === void 0 ? void 0 : _window$matchMedia2.call(_window2, "(prefers-color-scheme: dark)");
1961
- const update = () => {
1962
- isDark.value = computeIsDark();
1963
- };
1964
- update();
1965
- const onMqlChange = () => update();
1966
- if (mql) mql.addEventListener ? mql.addEventListener("change", onMqlChange) : mql.addListener(onMqlChange);
1967
- const mo = new MutationObserver(update);
1968
- mo.observe(el, {
1969
- attributes: true,
1970
- attributeFilter: ["class"]
1971
- });
1972
- const cleanup = () => {
1973
- if (mql) mql.removeEventListener ? mql.removeEventListener("change", onMqlChange) : mql.removeListener(onMqlChange);
1974
- mo.disconnect();
1975
- window.removeEventListener("pagehide", cleanup);
1976
- window.removeEventListener("beforeunload", cleanup);
1977
- };
1978
- window.addEventListener("pagehide", cleanup);
1979
- window.addEventListener("beforeunload", cleanup);
1980
- }
1981
-
1982
1903
  //#endregion
1983
1904
  //#region src/preloadMonacoWorkers.ts
1984
1905
  async function preloadMonacoWorkers() {
@@ -2018,6 +1939,20 @@ async function preloadMonacoWorkers() {
2018
1939
  } catch {}
2019
1940
  }
2020
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
+
2021
1956
  //#endregion
2022
1957
  //#region src/utils/arraysEqual.ts
2023
1958
  function arraysEqual(a, b) {
@@ -2285,7 +2220,7 @@ function useMonaco(monacoOptions = {}) {
2285
2220
  const appendBuffer = [];
2286
2221
  let appendBufferScheduled = false;
2287
2222
  let lastAppliedTheme = null;
2288
- const currentTheme = computed$1(() => monacoOptions.theme ?? (isDark.value ? typeof themes[0] === "string" ? themes[0] : themes[0].name : typeof themes[1] === "string" ? themes[1] : themes[1].name));
2223
+ const currentTheme = computed$1(() => monacoOptions.theme ?? (typeof themes[0] === "string" ? themes[0] : themes[0].name));
2289
2224
  let themeWatcher = null;
2290
2225
  const rafScheduler = createRafScheduler();
2291
2226
  async function setThemeInternal(theme, force = false) {
@@ -2370,13 +2305,6 @@ function useMonaco(monacoOptions = {}) {
2370
2305
  editorMgr = new EditorManager(monacoOptions, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, monacoOptions.revealDebounceMs);
2371
2306
  editorView = await editorMgr.createEditor(container, code, language, initialThemeName);
2372
2307
  if (typeof monacoOptions.onThemeChange === "function") monacoOptions.onThemeChange(initialThemeName);
2373
- if (!monacoOptions.theme) themeWatcher = watch(() => isDark.value, () => {
2374
- const t = currentTheme.value;
2375
- if (t !== lastAppliedTheme) setThemeInternal(t);
2376
- }, {
2377
- flush: "post",
2378
- immediate: true
2379
- });
2380
2308
  if (editorView) lastKnownCode = editorView.getValue();
2381
2309
  return editorView;
2382
2310
  }
@@ -2407,13 +2335,6 @@ function useMonaco(monacoOptions = {}) {
2407
2335
  diffMgr = new DiffEditorManager(monacoOptions, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, diffAutoScroll, monacoOptions.revealDebounceMs);
2408
2336
  diffEditorView = await diffMgr.createDiffEditor(container, originalCode, modifiedCode, language, initialThemeName);
2409
2337
  if (typeof monacoOptions.onThemeChange === "function") monacoOptions.onThemeChange(initialThemeName);
2410
- if (!monacoOptions.theme) themeWatcher = watch(() => isDark.value, () => {
2411
- const t = currentTheme.value;
2412
- if (t !== lastAppliedTheme) setThemeInternal(t);
2413
- }, {
2414
- flush: "post",
2415
- immediate: true
2416
- });
2417
2338
  const models = diffMgr.getDiffModels();
2418
2339
  originalModel = models.original;
2419
2340
  modifiedModel = models.modified;
@@ -2745,4 +2666,4 @@ function useMonaco(monacoOptions = {}) {
2745
2666
  }
2746
2667
 
2747
2668
  //#endregion
2748
- export { RevealStrategy, clearHighlighterCache, defaultRevealDebounceMs, detectLanguage, getOrCreateHighlighter, isDark, preloadMonacoWorkers, registerMonacoThemes, useMonaco };
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.7",
5
- "packageManager": "pnpm@10.23.0",
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.15.0",
75
+ "@shikijs/monaco": "^3.19.0",
76
76
  "alien-signals": "^2.0.8",
77
- "shiki": "^3.15.0"
77
+ "shiki": "^3.19.0"
78
78
  },
79
79
  "devDependencies": {
80
80
  "@antfu/eslint-config": "^5.4.1",