Update monaco-editor#1773
Merged
Merged
Conversation
|
Contributor
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughDependency bumps for Monaco packages; Type definitions updated to match Monaco API (CompletionItemKind adjusted: added Tool=27, Snippet→28; removed CompletionItemInsertTextRule); Editor component refactored to use the useMonaco hook and centralized disposal of completion providers and models. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (7)**/*.{js,jsx,ts,tsx,json,css,scss}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{js,jsx,ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
**/*.{tsx,jsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
{.prettierrc,**/*.{md,json,ts,tsx,js,jsx}}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
packages/**/*.{ts,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
🧬 Code graph analysis (1)packages/sharing-editor/src/Editor/index.tsx (1)
🔇 Additional comments (7)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the Monaco Editor dependencies from version 0.52.2 to 0.55.1, along with the React wrapper from 4.4.5 to 4.7.0. The update includes refactoring the editor component to use the newer useMonaco hook pattern and updating type definitions to align with the new API.
- Migrated from ref-based Monaco access to the
useMonacohook - Updated enum values to match Monaco Editor 0.55.1 API (added
Toolcompletion item kind, renumberedSnippet) - Removed unused
CompletionItemInsertTextRuleenum
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| yarn.lock | Updates monaco-editor to 0.55.1 and @monaco-editor/react to 4.7.0, adds new dependencies dompurify 3.2.7 and marked 14.0.0 |
| packages/sharing-editor/package.json | Updates monaco-editor and @monaco-editor/react package versions to match yarn.lock |
| packages/sharing-editor/src/Editor/index.tsx | Refactors to use useMonaco hook instead of refs, updates import paths for IDisposable type, and adjusts dependency arrays |
| packages/sharing-editor/src/Editor/LanguageProviders/types.ts | Updates CompletionItemKind enum values (adds Tool=27, moves Snippet to 28), removes unused CompletionItemInsertTextRule enum, updates documentation URL |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (3)
packages/sharing-editor/package.json(1 hunks)packages/sharing-editor/src/Editor/LanguageProviders/types.ts(2 hunks)packages/sharing-editor/src/Editor/index.tsx(4 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{js,jsx,ts,tsx,json,css,scss}
📄 CodeRabbit inference engine (AGENTS.md)
Follow Prettier formatting (2 spaces, trailing commas, semicolons by default) as enforced by the project's configuration
Files:
packages/sharing-editor/package.jsonpackages/sharing-editor/src/Editor/LanguageProviders/types.tspackages/sharing-editor/src/Editor/index.tsx
{.prettierrc,**/*.{md,json,ts,tsx,js,jsx}}
📄 CodeRabbit inference engine (CLAUDE.md)
Use Prettier with 2-space indentation, semicolons enabled, trailing commas for ES5, and 80-character line width
Files:
packages/sharing-editor/package.jsonpackages/sharing-editor/src/Editor/LanguageProviders/types.tspackages/sharing-editor/src/Editor/index.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace ESLint configs for linting
Files:
packages/sharing-editor/src/Editor/LanguageProviders/types.tspackages/sharing-editor/src/Editor/index.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Preferinterfacefor defining object shapes in TypeScript
Import external dependencies before workspace packages, which come before relative imports in TypeScript files
Export types with.d.tsextension and useexport typefor type-only exports
Files:
packages/sharing-editor/src/Editor/LanguageProviders/types.tspackages/sharing-editor/src/Editor/index.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx}: Use camelCase for JavaScript/TypeScript variable and function names
Always use async/await for asynchronous operations instead of promises with.then()
Prefix unused variables with underscore (e.g.,_unused) instead of leaving them as-is
Files:
packages/sharing-editor/src/Editor/LanguageProviders/types.tspackages/sharing-editor/src/Editor/index.tsx
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
Use kebab-case for utility and non-component TypeScript filenames
Files:
packages/sharing-editor/src/Editor/LanguageProviders/types.ts
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use
@stlite/commonpackage for shared TypeScript types and utilities across all packages
Files:
packages/sharing-editor/src/Editor/LanguageProviders/types.tspackages/sharing-editor/src/Editor/index.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use PascalCase for React component filenames
Files:
packages/sharing-editor/src/Editor/index.tsx
🧠 Learnings (4)
📚 Learning: 2025-12-08T07:43:57.395Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.395Z
Learning: Applies to packages/*/CHANGELOG.md : Update CHANGELOG.md for user-facing changes via `yarn changeset` instead of manual edits
Applied to files:
packages/sharing-editor/package.json
📚 Learning: 2025-12-03T02:33:22.625Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T02:33:22.625Z
Learning: Workspace organization: `packages/` hosts Yarn workspaces with `browser`, `sharing`, and `desktop` as user apps; `react` is a React library; `kernel` is the Pyodide core; `sharing-editor` is the editor client; and `common`, `sharing-common`, `devutils` are support utilities
Applied to files:
packages/sharing-editor/package.json
📚 Learning: 2025-12-08T07:43:57.395Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.395Z
Learning: Applies to packages/**/*.{ts,tsx} : Use `stlite/common` package for shared TypeScript types and utilities across all packages
Applied to files:
packages/sharing-editor/package.json
📚 Learning: 2025-12-08T07:43:57.395Z
Learnt from: CR
Repo: whitphx/stlite PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-08T07:43:57.395Z
Learning: Applies to package.json : Use yarn workspaces defined in root `package.json` with `yarn4.5.3` and Node.js `>=22`
Applied to files:
packages/sharing-editor/package.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Agent
- GitHub Check: test-stlite-lib
- GitHub Check: test-sharing-editor
🔇 Additional comments (5)
packages/sharing-editor/src/Editor/index.tsx (3)
101-124: Clean refactor to useMonaco hook for lifecycle management.The migration from refs to
useMonaco()hook is the recommended pattern for@monaco-editor/reactv4.x. The disposables array correctly tracks and cleans up registered providers.One consideration: including
pythonCodeCompletionCallbackin the dependency array will re-register the completion provider whenever the callback reference changes. If the callback is defined inline in a parent component without memoization, this could cause unnecessary re-registrations. Ensure the callback is memoized withuseCallbackin the parent component.
241-262: LGTM!The null check for
monacoand its inclusion in the dependency array correctly handles the asynchronous nature of Monaco loading viauseMonaco().
264-293: LGTM!The imperative handle correctly guards against
monacobeing null and includes it in the dependency array, ensuringaddRequirementsworks properly once Monaco is loaded.packages/sharing-editor/src/Editor/LanguageProviders/types.ts (1)
9-9: Enum updates align with Monaco 0.55.1 API.The updated documentation URL and new
Tool = 27andSnippet = 28values correctly reflect the Monaco editor'sCompletionItemKindenum in version 0.55.1.packages/sharing-editor/package.json (1)
7-7: Verify package compatibility for Monaco editor versions.The version bumps for
@monaco-editor/react(4.7.0) andmonaco-editor(0.55.1) should be compatible with caret versioning. Confirm that@monaco-editor/react@4.7.0correctly declaresmonaco-editor@^0.55.1as a peer dependency and that the dependency versions are compatible.
Contributor
Package Stats on
|
Contributor
Bundle visualizer reports for
|
Contributor
|
Deployment completed successfully (log). Importable URLs:
import { StliteApp, createKernel } from "https://33b7353c.stlite-react-preview.pages.dev/stlite.js";
import "https://33b7353c.stlite-react-preview.pages.dev/stlite.css"; |
Contributor
|
Deployment completed successfully (log).
|
Contributor
|
Deployment completed successfully (log).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Stlite Browser preview</title>
<link rel="stylesheet" href="https://21676132.stlite-browser-preview.pages.dev/stlite.css" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module">
import { mount } from "https://21676132.stlite-browser-preview.pages.dev/stlite.js"
mount(
{
entrypoint: "streamlit_app.py",
files: {
"streamlit_app.py": `
import streamlit as st
st.write("Hello world")
`,
},
requirements: [],
},
document.getElementById("root"),
);
</script>
</body>
</html> |
Contributor
Package Stats on
|
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 4 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
Package Stats on
|
Contributor
Bundle visualizer reports for
|
Contributor
|
Deployment completed successfully (log). Importable URLs:
import { StliteApp, createKernel } from "https://0451ec6d.stlite-react-preview.pages.dev/stlite.js";
import "https://0451ec6d.stlite-react-preview.pages.dev/stlite.css"; |
Contributor
|
Deployment completed successfully (log).
|
Contributor
|
Deployment completed successfully (log).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Stlite Browser preview</title>
<link rel="stylesheet" href="https://62187ea0.stlite-browser-preview.pages.dev/stlite.css" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module">
import { mount } from "https://62187ea0.stlite-browser-preview.pages.dev/stlite.js"
mount(
{
entrypoint: "streamlit_app.py",
files: {
"streamlit_app.py": `
import streamlit as st
st.write("Hello world")
`,
},
requirements: [],
},
document.getElementById("root"),
);
</script>
</body>
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
Chores
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.