From 42651db0e34d94d3389906f41318085bfe31268b Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Fri, 13 Oct 2023 17:35:35 +0200 Subject: [PATCH] Remove Monaco editor support --- .github/workflows/main.yml | 6 +- README.md | 5 - demo/LICENSE | 21 -- demo/README.md | 52 ----- demo/package.json | 24 -- demo/src/index.css | 160 ------------- demo/src/index.ejs | 28 --- demo/src/index.js | 261 ---------------------- demo/src/mdx.worker.js | 7 - demo/tsconfig.json | 15 -- demo/webpack.config.js | 46 ---- package.json | 2 - packages/language-server/package.json | 4 +- packages/language-service/README.md | 2 +- packages/language-service/package.json | 4 +- packages/monaco/CHANGELOG.md | 12 - packages/monaco/LICENSE | 21 -- packages/monaco/README.md | 201 ----------------- packages/monaco/index.js | 38 ---- packages/monaco/mdx.worker.js | 52 ----- packages/monaco/package.json | 54 ----- packages/monaco/playwright.config.js | 24 -- packages/monaco/tests/definition.test.js | 28 --- packages/monaco/tests/diagnostics.test.js | 25 --- packages/monaco/tests/hover.test.js | 28 --- packages/monaco/tests/index.html | 23 -- packages/monaco/tests/references.test.js | 28 --- packages/monaco/tests/setup.js | 9 - packages/monaco/tsconfig.json | 16 -- release.sh | 1 - 30 files changed, 4 insertions(+), 1193 deletions(-) delete mode 100644 demo/LICENSE delete mode 100644 demo/README.md delete mode 100644 demo/package.json delete mode 100644 demo/src/index.css delete mode 100644 demo/src/index.ejs delete mode 100644 demo/src/index.js delete mode 100644 demo/src/mdx.worker.js delete mode 100644 demo/tsconfig.json delete mode 100644 demo/webpack.config.js delete mode 100644 packages/monaco/CHANGELOG.md delete mode 100644 packages/monaco/LICENSE delete mode 100644 packages/monaco/README.md delete mode 100644 packages/monaco/index.js delete mode 100644 packages/monaco/mdx.worker.js delete mode 100644 packages/monaco/package.json delete mode 100644 packages/monaco/playwright.config.js delete mode 100644 packages/monaco/tests/definition.test.js delete mode 100644 packages/monaco/tests/diagnostics.test.js delete mode 100644 packages/monaco/tests/hover.test.js delete mode 100644 packages/monaco/tests/index.html delete mode 100644 packages/monaco/tests/references.test.js delete mode 100644 packages/monaco/tests/setup.js delete mode 100644 packages/monaco/tsconfig.json diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 36dae6e2..4e073369 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -13,15 +13,11 @@ jobs: with: node-version: ${{matrix.node}} - run: npm install - - run: npx playwright install --with-deps - run: npm test strategy: matrix: os: - ubuntu-latest - # We should test on Windows, because the language server deals with - # the file system. - # Currently blocked by https://github.com/remcohaszing/playwright-monaco/issues/1 - # - windows-latest + - windows-latest node: - 18 diff --git a/README.md b/README.md index 6c6abdd2..d7f1e800 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,6 @@ It contains the following workspaces: can handle MDX files. * [`@mdx-js/language-server`][] provides MDX IntelliSense using the [Language Server Protocol][]. -* [`@mdx-js/monaco`][] provides MDX IntelliSense for [Monaco editor][]. * [`vscode-mdx`][] provides MDX IntelliSense and basic language support for [Visual Studio Code][]. @@ -92,8 +91,6 @@ See [§ Sponsor][sponsor] on our site for how to help financially. [MIT][] © [JounQin][]@[1stG.me][] -[`@mdx-js/monaco`]: https://github.com/mdx-js/mdx-analyzer/tree/main/packages/monaco - [`@mdx-js/language-server`]: https://github.com/mdx-js/mdx-analyzer/tree/main/packages/language-server [`@mdx-js/language-service`]: https://github.com/mdx-js/mdx-analyzer/tree/main/packages/language-service @@ -108,8 +105,6 @@ See [§ Sponsor][sponsor] on our site for how to help financially. [mdx]: https://github.com/mdx-js/mdx -[monaco editor]: https://microsoft.github.io/monaco-editor/ - [mit]: http://opensource.org/licenses/MIT [sponsor]: https://mdxjs.com/community/sponsor/ diff --git a/demo/LICENSE b/demo/LICENSE deleted file mode 100644 index 9d031c45..00000000 --- a/demo/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2022 Remco Haszing - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/demo/README.md b/demo/README.md deleted file mode 100644 index 53b10bd0..00000000 --- a/demo/README.md +++ /dev/null @@ -1,52 +0,0 @@ -# Demo of `@mdx-js/monaco` - -## What is this? - -This is a project to demo the `@mdx-js/monaco` package using [webpack][]. -When started, this starts a webserver that serves Monaco editor and a file tree. -The contents of the `fixtures/demo` directory are loaded into [Monaco editor][]. - -## When should I use this? - -You can use this demo to troubleshoot issues related to `@mdx-js/monaco`, or to -see how it can be integrated in your own project. - -## Use - -Clone and install this repository. - -```sh -git clone https://github.com/mdx-js/mdx-analyzer.git -cd mdx-analyzer -npm install -``` - -Now start it. - -```sh -npm start -``` - -This will serve the demo on . - -## Compatibility - -This demo is compatible with evergreen browsers. - -## Security - -The demo only uses local content. -No external resources are loaded. -It’s safe to run and open. - -## License - -[MIT][] © [Remco Haszing][author] - -[author]: https://github.com/remcohaszing - -[mit]: LICENSE - -[monaco editor]: https://github.com/microsoft/monaco-editor - -[webpack]: https://webpack.js.org diff --git a/demo/package.json b/demo/package.json deleted file mode 100644 index 7ab8988e..00000000 --- a/demo/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "@mdx-js/monaco-demo", - "version": "0.0.0", - "type": "module", - "private": true, - "scripts": { - "build": "tsc", - "start": "webpack serve --mode development" - }, - "dependencies": { - "@mdx-js/monaco": "*", - "@types/webpack-env": "^1.0.0", - "css-loader": "^6.0.0", - "html-webpack-plugin": "^5.0.0", - "mini-css-extract-plugin": "^2.0.0", - "monaco-editor": "^0.41.0", - "path-browserify": "^1.0.0", - "remark-frontmatter": "^4.0.0", - "remark-gfm": "^3.0.0", - "webpack": "^5.0.0", - "webpack-cli": "^5.0.0", - "webpack-dev-server": "^4.0.0" - } -} diff --git a/demo/src/index.css b/demo/src/index.css deleted file mode 100644 index de50ccc2..00000000 --- a/demo/src/index.css +++ /dev/null @@ -1,160 +0,0 @@ -:root { - --background-color: hsl(0, 0%, 96%); - --editor-background: hsl(60, 100%, 100%); - --error-color: hsl(0, 85%, 62%); - --foreground-color: hsl(0, 0%, 0%); - --primary-color: hsl(189, 100%, 63%); - --shadow-color: hsla(0, 0%, 27%, 0.239); - --scrollbar-color: hsla(0, 0%, 47%, 0.4); - --warning-color: hsl(49, 100%, 40%); -} - -@media (prefers-color-scheme: dark) { - :root { - --background-color: hsl(0, 0%, 23%); - --editor-background: hsl(0, 0%, 12%); - --foreground-color: hsl(0, 0%, 100%); - --shadow-color: hsl(0, 0%, 43%); - } -} - -body { - background: var(--background-color); - display: flex; - flex-flow: column; - font-family: sans-serif; - height: 100vh; - margin: 0; -} - -h1 { - margin: 0 auto 0 1rem; -} - -.navbar { - align-items: center; - background: var(--primary-color); - box-shadow: 0 5px 5px var(--shadow-color); - display: flex; - flex: 0 0 auto; - height: 3rem; - justify-content: space-between; -} - -.nav-icon { - margin-right: 1rem; - text-decoration: none; -} - -.nav-icon > img { - vertical-align: middle; -} - -main { - background: var(--editor-background); - box-shadow: 0 0 10px var(--shadow-color); - display: flex; - flex: 1 1 auto; - margin: 1.5rem; -} - -#files { - border-right: 1px solid var(--shadow-color); - color: var(--foreground-color); - list-style: none; - margin: 0; - padding: 2rem 0; -} - -#files a { - color: var(--foreground-color); - display: block; - padding: 0.25rem 1rem 0.25rem 0.5rem; - text-decoration: none; -} - -#files a:hover, -#files a:target { - background: var(--shadow-color); -} - -.wrapper { - display: flex; - flex: 1 1 auto; - flex-flow: column; -} - -#schema-selection { - background-color: var(--editor-background); - border: none; - border-bottom: 1px solid var(--shadow-color); - color: var(--foreground-color); - width: 100%; -} - -#breadcrumbs { - border-bottom: 1px solid var(--shadow-color); - color: var(--foreground-color); - flex: 0 0 1rem; -} - -.breadcrumb { - cursor: pointer; -} - -#breadcrumbs::before, -.breadcrumb:not(:last-child)::after { - content: '›'; - margin: 0 0.2rem; -} - -.breadcrumb.array::before { - content: '[]'; -} - -.breadcrumb.object::before { - content: '{}'; -} - -#editor { - flex: 1 1 auto; -} - -#problems { - border-top: 1px solid var(--shadow-color); - flex: 0 0 20vh; - color: var(--foreground-color); - overflow-y: scroll; -} - -.problem { - align-items: center; - cursor: pointer; - display: flex; - padding: 0.25rem; -} - -.problem:hover { - background-color: var(--shadow-color); -} - -.problem-text { - margin-left: 0.5rem; -} - -.problem .codicon-warning { - color: var(--warning-color); -} - -.problem .codicon-error { - color: var(--error-color); -} - -*::-webkit-scrollbar { - box-shadow: 1px 0 0 0 var(--scrollbar-color) inset; - width: 14px; -} - -*::-webkit-scrollbar-thumb { - background: var(--scrollbar-color); -} diff --git a/demo/src/index.ejs b/demo/src/index.ejs deleted file mode 100644 index 37bbe7ef..00000000 --- a/demo/src/index.ejs +++ /dev/null @@ -1,28 +0,0 @@ - - - - - Monaco MDX - - - - - -
- -
- -
-
-
-
- - diff --git a/demo/src/index.js b/demo/src/index.js deleted file mode 100644 index f239ec18..00000000 --- a/demo/src/index.js +++ /dev/null @@ -1,261 +0,0 @@ -import {initializeMonacoMdx} from '@mdx-js/monaco' -import * as monaco from 'monaco-editor' -import './index.css' - -// Configure Monaco editor to load workers. -window.MonacoEnvironment = { - getWorker(workerId, label) { - switch (label) { - case 'editorWorkerService': { - return new Worker( - new URL( - 'monaco-editor/esm/vs/editor/editor.worker.js', - import.meta.url - ) - ) - } - - case 'json': { - return new Worker( - new URL( - 'monaco-editor/esm/vs/language/json/json.worker.js', - import.meta.url - ) - ) - } - - case 'javascript': - case 'typescript': { - return new Worker( - new URL( - 'monaco-editor/esm/vs/language/typescript/ts.worker.js', - import.meta.url - ) - ) - } - - case 'mdx': { - return new Worker( - new URL('@mdx-js/monaco/mdx.worker.js', import.meta.url) - ) - } - - default: { - throw new Error(`Unsupported worker label: ${label}`) - } - } - } -} - -// Configure TypeScript intellisense to allow JSX. -monaco.languages.typescript.typescriptDefaults.setCompilerOptions({ - checkJs: true, - jsx: monaco.languages.typescript.JsxEmit.ReactJSX, - moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs -}) - -// This will be redundant once -// https://github.com/microsoft/monaco-editor/pull/3096 is released. -monaco.languages.register({ - id: 'mdx', - extensions: ['.mdx'] -}) - -// This is where we actually configure the MDX integration. -await initializeMonacoMdx(monaco) - -// Synchronize the file tree on the left with the Monaco models. Files from -// node_modules are hidden, but can be navigated to. -const fileTree = /** @type {HTMLElement} */ (document.querySelector('#files')) -monaco.editor.onDidCreateModel((model) => { - const path = model.uri.path - if (!path.startsWith('/node_modules')) { - const anchor = document.createElement('a') - anchor.id = path - anchor.href = `#${path}` - anchor.textContent = path.slice(1) - fileTree.append(anchor) - } -}) - -const rootUri = monaco.Uri.parse('file:///') - -/** - * Create a file based on a file path. - * - * @param {string} path - * The file path of the model. - * @param {string} value - * The text value of the model. - */ -function createFile(path, value) { - const uri = monaco.Uri.joinPath(rootUri, path) - monaco.editor.createModel(value, undefined, uri) -} - -// Load the React type definitions and their dependencies for a richer -// IntelliSense experience. -if (import.meta.webpackContext) { - const typesContext = import.meta.webpackContext('../../node_modules', { - regExp: - /\/(csstype\/index|@types\/(prop-types\/index|react\/(global|index|jsx-runtime)|scheduler\/tracing))\.d\.ts/ - }) - - for (const key of typesContext.keys()) { - monaco.editor.createModel( - typesContext(key), - undefined, - monaco.Uri.joinPath(rootUri, 'node_modules', key.replace('@types/', '')) - ) - } -} - -// Load the demo fixtures. -if (import.meta.webpackContext) { - const demoContext = import.meta.webpackContext('../../fixtures/demo', { - regExp: /\.([jt]sx?|mdx)$/ - }) - for (const key of demoContext.keys().sort()) { - createFile(key, demoContext(key)) - } -} - -const element = /** @type {HTMLDivElement} */ ( - document.querySelector('#editor') -) - -/** - * Get the model whose path matches the location hash. - * - * If no match was found, and MX model is returned. - */ -function getModel() { - const hash = window.location.hash.slice(1) - const models = monaco.editor.getModels() - let mdxModel - for (const model of models) { - if (model.uri.path === hash) { - return model - } - - if (model.uri.path.endsWith('.mdx')) { - mdxModel = model - } - } - - return /** @type {monaco.editor.ITextModel} */ (mdxModel) -} - -// Enable responsive dark mode. -const darkMode = window.matchMedia('(prefers-color-scheme: dark)') -monaco.editor.setTheme(darkMode.matches ? 'vs-dark' : 'vs-light') -darkMode.addEventListener('change', () => { - monaco.editor.setTheme(darkMode.matches ? 'vs-dark' : 'vs-light') -}) - -const initialModel = getModel() -const editor = monaco.editor.create(element, { - automaticLayout: true, - model: initialModel, - readOnly: initialModel.uri.path.startsWith('/node_modules'), - suggest: {showWords: false}, - unicodeHighlight: {ambiguousCharacters: false} -}) - -/** - * Update the markers in the problems pane with the given resource. - * - * @param {monaco.Uri} resource - * The resource URI whose markers to use. - */ -function updateMarkers(resource) { - const problems = document.querySelector('#problems') - if (!problems) { - return - } - - const markers = monaco.editor.getModelMarkers({resource}) - while (problems.lastChild) { - problems.lastChild.remove() - } - - for (const marker of markers) { - if (marker.severity === monaco.MarkerSeverity.Hint) { - continue - } - - const wrapper = document.createElement('div') - wrapper.setAttribute('role', 'button') - const codicon = document.createElement('div') - const text = document.createElement('div') - wrapper.classList.add('problem') - codicon.classList.add( - 'codicon', - marker.severity === monaco.MarkerSeverity.Warning - ? 'codicon-warning' - : 'codicon-error' - ) - text.classList.add('problem-text') - text.textContent = marker.message - wrapper.append(codicon, text) - wrapper.addEventListener('click', () => { - editor.setPosition({ - lineNumber: marker.startLineNumber, - column: marker.startColumn - }) - editor.focus() - }) - problems.append(wrapper) - } -} - -// Allow users to edit all files not in node_modules. -editor.onDidChangeModel(({newModelUrl}) => { - if (newModelUrl) { - editor.updateOptions({ - readOnly: newModelUrl.path.startsWith('/node_modules') - }) - updateMarkers(newModelUrl) - } -}) - -// Update the active model in the editor based on location changes. -window.addEventListener('hashchange', () => { - const model = getModel() - editor.setModel(model) -}) - -// Synchronize the problems pane if the model markers change. -monaco.editor.onDidChangeMarkers(([resource]) => { - if (String(resource) === String(getModel().uri)) { - updateMarkers(resource) - } -}) - -// Add support for Ctrl + click for code navigation. -// This uses an internal API. Only minimal type definitions are added. -/** - * @typedef {object} EditorService - * @property {(input: { resource: monaco.Uri }, source: monaco.editor.IStandaloneCodeEditor) => Promise} openCodeEditor - * Resolve a reference. - */ - -// @ts-expect-error This API isn’t officially exposed. -// https://github.com/microsoft/monaco-editor/issues/2000 -const editorService = /** @type {EditorService} */ (editor._codeEditorService) -const openEditorBase = editorService.openCodeEditor.bind(editorService) - -editorService.openCodeEditor = - /** - * @param {{ resource: monaco.Uri }} input - * @param {monaco.editor.IStandaloneCodeEditor} source - */ - async (input, source) => { - const result = await openEditorBase(input, source) - - if (!result) { - location.hash = input.resource.path - } - - return result - } diff --git a/demo/src/mdx.worker.js b/demo/src/mdx.worker.js deleted file mode 100644 index 3befd550..00000000 --- a/demo/src/mdx.worker.js +++ /dev/null @@ -1,7 +0,0 @@ -import {configure} from '@mdx-js/monaco/mdx.worker.js' -import remarkFrontmatter from 'remark-frontmatter' -import remarkGfm from 'remark-gfm' - -configure({ - plugins: [remarkFrontmatter, remarkGfm] -}) diff --git a/demo/tsconfig.json b/demo/tsconfig.json deleted file mode 100644 index c16f5558..00000000 --- a/demo/tsconfig.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "exclude": ["dist"], - "compilerOptions": { - "checkJs": true, - "module": "node16", - "noEmit": true, - "skipLibCheck": true, - "strict": true, - "paths": { - "@mdx-js/language-service": ["../packages/language-service/index.js"], - "@mdx-js/monaco/mdx.worker.js": ["../packages/monaco/mdx.worker.js"], - "@mdx-js/monaco": ["../packages/monaco/index.js"] - } - } -} diff --git a/demo/webpack.config.js b/demo/webpack.config.js deleted file mode 100644 index 9854d204..00000000 --- a/demo/webpack.config.js +++ /dev/null @@ -1,46 +0,0 @@ -import HtmlWebPackPlugin from 'html-webpack-plugin' -import MiniCssExtractPlugin from 'mini-css-extract-plugin' -import webpack from 'webpack' - -/** - * @type {import('webpack').Configuration} - */ -const config = { - devtool: 'source-map', - entry: './src/index.js', - resolve: { - conditionNames: ['worker'], - alias: { - path: 'path-browserify' - } - }, - module: { - exprContextRegExp: /$^/, - exprContextCritical: false, - rules: [ - { - test: /\.css$/, - use: [MiniCssExtractPlugin.loader, 'css-loader'] - }, - { - test: /\.(svg|ttf)$/, - type: 'asset/resource' - }, - { - test: /\/fixtures\/demo\//, - type: 'asset/source' - }, - { - test: /\.d\.ts$/, - type: 'asset/source' - } - ] - }, - plugins: [ - new webpack.IgnorePlugin({resourceRegExp: /perf_hooks/}), - new HtmlWebPackPlugin(), - new MiniCssExtractPlugin({filename: '[contenthash].css'}) - ] -} - -export default config diff --git a/package.json b/package.json index 711dbdea..19f31b54 100644 --- a/package.json +++ b/package.json @@ -2,14 +2,12 @@ "private": true, "repository": "https://github.com/mdx-js/mdx-analyzer.git", "workspaces": [ - "demo", "packages/*" ], "scripts": { "generate": "npm --workspace vscode-mdx run generate", "build": "npm --workspaces run build", "format": "remark . -qfo && prettier . -w --log-level warn && xo --fix", - "start": "npm --workspace @mdx-js/monaco-demo run start", "test-api": "npm run test-api --workspaces --if-present", "test": "npm run build && npm run format && npm run test-api" }, diff --git a/packages/language-server/package.json b/packages/language-server/package.json index 31d053e0..d791a479 100644 --- a/packages/language-server/package.json +++ b/packages/language-server/package.json @@ -2,7 +2,7 @@ "name": "@mdx-js/language-server", "version": "0.1.0", "type": "module", - "description": "MDX IntelliSense in Monaco editor", + "description": "A language server for MDX", "repository": { "type": "git", "url": "https://github.com/mdx-js/mdx-analyzer.git", @@ -23,8 +23,6 @@ "keywords": [ "IntelliSense", "mdx", - "monaco", - "monaco-editor", "typescript", "unified" ], diff --git a/packages/language-service/README.md b/packages/language-service/README.md index 34064180..411c88d0 100644 --- a/packages/language-service/README.md +++ b/packages/language-service/README.md @@ -7,7 +7,7 @@ This is done by wrapping the [TypeScript][] language service. ## When should I use this? -This package is intended for use by `@mdx-js/monaco` and `@mdx-js/language-server`. +This package is intended for use by `@mdx-js/language-server`. It’s not intended for external usage. ## Install diff --git a/packages/language-service/package.json b/packages/language-service/package.json index 2f1f482a..62659008 100644 --- a/packages/language-service/package.json +++ b/packages/language-service/package.json @@ -2,7 +2,7 @@ "name": "@mdx-js/language-service", "version": "0.1.0", "type": "module", - "description": "MDX IntelliSense in Monaco editor", + "description": "MDX Volar support", "repository": { "type": "git", "url": "https://github.com/mdx-js/mdx-analyzer.git", @@ -22,8 +22,6 @@ "keywords": [ "IntelliSense", "mdx", - "monaco", - "monaco-editor", "typescript", "unified" ], diff --git a/packages/monaco/CHANGELOG.md b/packages/monaco/CHANGELOG.md deleted file mode 100644 index 94ce2b33..00000000 --- a/packages/monaco/CHANGELOG.md +++ /dev/null @@ -1,12 +0,0 @@ -# @mdx-js/monaco - -## 0.1.0 - -### Minor Changes - -- [#316](https://github.com/mdx-js/mdx-analyzer/pull/316) [`5a04247`](https://github.com/mdx-js/mdx-analyzer/commit/5a0424707eef03a24aa15dffade882d118d55421) Thanks [@remcohaszing](https://github.com/remcohaszing)! - Initial release. - -### Patch Changes - -- Updated dependencies [[`5a04247`](https://github.com/mdx-js/mdx-analyzer/commit/5a0424707eef03a24aa15dffade882d118d55421)]: - - @mdx-js/language-service@0.1.0 diff --git a/packages/monaco/LICENSE b/packages/monaco/LICENSE deleted file mode 100644 index 9d031c45..00000000 --- a/packages/monaco/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2022 Remco Haszing - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/packages/monaco/README.md b/packages/monaco/README.md deleted file mode 100644 index 57eac670..00000000 --- a/packages/monaco/README.md +++ /dev/null @@ -1,201 +0,0 @@ -# `@mdx-js/monaco` - -## What is this? - -This package IntelliSense for [MDX][] in [Monaco editor][]. -This package provides IntelliSense based on [TypeScript][], as well as some -markdown specific features. - -## When should I use this? - -You can use this package if you want to integrate IntelliSense for [MDX][] files -in a browser. - -## Install - -This package is not published yet. - -## Use - -```js -import { initializeMonacoMdx } from '@mdx-js/monaco' -import * as monaco from 'monaco-editor' - -// Register the worker -window.MonacoEnvironment = { - getWorker(_workerId, label) { - switch (label) { - case 'editorWorkerService': - return new Worker( - new URL( - 'monaco-editor/esm/vs/editor/editor.worker.js', - import.meta.url, - ), - ) - case 'json': - return new Worker( - new URL( - 'monaco-editor/esm/vs/language/json/json.worker.js', - import.meta.url, - ), - ) - case 'javascript': - case 'typescript': - return new Worker( - new URL( - 'monaco-editor/esm/vs/language/typescript/ts.worker.js', - import.meta.url, - ), - ) - case 'mdx': - return new Worker( - new URL('@mdx-js/monaco/mdx.worker.js', import.meta.url), - ) - default: - throw new Error(`Unsupported worker label: ${label}`) - } - }, -} - -// Initialize the MDX IntelliSense -initializeMonacoMdx(monaco) - -// Create a model -const content = ` -{/** - * @type {object} Props - * @property {string} name - * Who to greet. - */} - -# Hello {props.name} -` - -const model = monaco.editor.createModel( - content, - undefined, - monaco.Uri.parse('file:///hello.mdx'), -) - -// Create the editor -const element = document.getElementById('editor') -const editor = monaco.editor.create(element, { model }) -``` - -By default no plugins included. -To support plugins, you have to create your own worker. -Then, instead of referencing `@mdx-js/monaco/mdx.worker.js` in the -`MonacoEnvironment`, reference your own cusotmized worker. - -For example, to support [frontmatter][] and [GFM][], create a file named -`mdx.worker.js` with the following content: - -```js -import {configure} from '@mdx-js/monaco/mdx.worker.js' -import remarkFrontmatter from 'remark-frontmatter' -import remarkGfm from 'remark-gfm' - -configure({ - plugins: [remarkFrontmatter, remarkGfm] -}) -``` - -And make the following change in your `MonacoEnvironment`: - -```diff - import { initializeMonacoMdx } from '@mdx-js/monaco' - import * as monaco from 'monaco-editor' - - // Register the worker - window.MonacoEnvironment = { - getWorker(_workerId, label) { - switch (label) { - // … - case 'mdx': -- return new Worker(new URL('@mdx-js/monaco/mdx.worker.js', import.meta.url)) -+ return new Worker(new URL('./mdx.worker.js', import.meta.url)) - // … - } - } - } -``` - -## Examples - -A [demo][] is available. - -## Language features - -The language integration supports the following features: - -* Markdown definitions -* Markdown hover hints -* TypeScript completions -* TypeScript definitions -* TypeScript diagnostics -* TypeScript hover hints -* TypeScript references - -[MDX][] doesn’t support TypeScript syntax, but it does support -[types in JSDoc][jsdoc]. -The special type `Props` is used to determine the type used for `props`. - -## Compatibility - -This project is compatible with evergreen browsers. -It requires at least `monaco-editor` version `0.34`. -This project is likely to work with later versions of Monaco editor as well, but -this is not guaranteed. - -## Types - -This package is fully typed with [TypeScript][] - -## Security - -This package provides IntelliSense for [MDX][] models. -Some IntelliSense features modify your model content, for example suggestions -and automatic refactors. - -## Contribute - -See [§ Contribute][contribute] on our website for ways to get started. -See [§ Support][support] for ways to get help. - -This project has a [code of conduct][]. -By interacting with this repository, organization, or community you agree to -abide by its terms. - -## See also - -* [monaco-tailwindcss](https://monaco-tailwindcss.js.org) -* [monaco-unified](https://monaco-unified.js.org) -* [monaco-yaml](https://monaco-yaml.js.org) - -## License - -[MIT][] © [Remco Haszing][author] - -[author]: https://github.com/remcohaszing - -[code of conduct]: https://github.com/mdx-js/.github/blob/main/code-of-conduct.md - -[contribute]: https://mdxjs.com/community/contribute - -[demo]: https://github.com/mdx-js/mdx-analyzer/tree/HEAD/demo - -[frontmatter]: https://github.com/remarkjs/remark-frontmatter - -[gfm]: https://github.com/remarkjs/remark-gfm - -[jsdoc]: https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html - -[mdx]: https://mdxjs.com - -[mit]: LICENSE - -[monaco editor]: https://github.com/microsoft/monaco-editor - -[support]: https://mdxjs.com/community/support - -[typescript]: https://typescriptlang.org diff --git a/packages/monaco/index.js b/packages/monaco/index.js deleted file mode 100644 index ebb9d908..00000000 --- a/packages/monaco/index.js +++ /dev/null @@ -1,38 +0,0 @@ -/*** - * @typedef {import('monaco-editor')} Monaco - * @typedef {import('monaco-editor').IDisposable} IDisposable - * @typedef {import('monaco-editor').Uri} Uri - * @typedef {import('monaco-editor').editor.ITextModel} ITextModel - * @typedef {import('monaco-editor').editor.MonacoWebWorker} MonacoWebWorker - * @typedef {import('monaco-editor').languages.typescript.TypeScriptWorker} TypeScriptWorker - */ - -import * as volar from '@volar/monaco' - -/** - * Initialize MDX IntelliSense for MDX. - * - * @param {Monaco} monaco - * @returns {Promise} - * A disposable. - */ -export async function initializeMonacoMdx(monaco) { - const worker = monaco.editor.createWebWorker({ - moduleId: '@mdx-js/monaco/mdx.worker.js', - label: 'mdx' - }) - - const provides = await volar.languages.registerProvides( - worker, - 'mdx', - () => monaco.editor.getModels().map((model) => model.uri), - monaco.languages - ) - - return { - dispose() { - provides.disposw() - worker.dispose() - } - } -} diff --git a/packages/monaco/mdx.worker.js b/packages/monaco/mdx.worker.js deleted file mode 100644 index 6977b8f1..00000000 --- a/packages/monaco/mdx.worker.js +++ /dev/null @@ -1,52 +0,0 @@ -/** - * @typedef {import('monaco-editor').worker.IWorkerContext} IWorkerContext - * @typedef {import('unified').PluggableList} PluggableList - * - * @typedef MDXWorkerOptions - * @property {PluggableList} [plugins] - * A list of remark plugins. Only syntax parser plugins are supported. For - * example `remark-frontmatter`, but not `remark-mdx-frontmatter`. - */ - -import {resolveConfig} from '@mdx-js/language-service' -import { - createLanguageService, - createLanguageHost, - createServiceEnvironment -} from '@volar/monaco/worker.js' -// @ts-expect-error This module is untyped. -import {initialize} from 'monaco-editor/esm/vs/editor/editor.worker.js' -import typescript from 'typescript/lib/tsserverlibrary.js' - -/** @type {PluggableList | undefined} */ -let plugins - -// eslint-disable-next-line unicorn/prefer-add-event-listener -self.onmessage = () => { - initialize( - /** - * @param {IWorkerContext} workerContext - */ - (workerContext) => { - const env = createServiceEnvironment() - const host = createLanguageHost(workerContext.getMirrorModels, env, '/', { - checkJs: true, - jsx: typescript.JsxEmit.ReactJSX, - moduleResolution: typescript.ModuleResolutionKind.NodeJs - }) - const config = resolveConfig({}, typescript, plugins) - - return createLanguageService({typescript}, env, config, host) - } - ) -} - -/** - * Configure the Monaco MDX worker. - * - * @param {MDXWorkerOptions} options - * The options to set. - */ -export function configure(options) { - plugins = options.plugins -} diff --git a/packages/monaco/package.json b/packages/monaco/package.json deleted file mode 100644 index 0b0f5f1b..00000000 --- a/packages/monaco/package.json +++ /dev/null @@ -1,54 +0,0 @@ -{ - "name": "@mdx-js/monaco", - "version": "0.1.0", - "type": "module", - "description": "MDX IntelliSense in Monaco editor", - "repository": { - "type": "git", - "url": "https://github.com/mdx-js/mdx-analyzer.git", - "directory": "packages/monaco" - }, - "homepage": "https://mdxjs.com", - "bugs": "https://github.com/mdx-js/mdx-analyzer/issues", - "author": "Remco Haszing ", - "funding": "https://opencollective.com/unified", - "license": "MIT", - "main": "./index.js", - "files": [ - "*.d.ts", - "*.js", - "lib", - "!playwright.config.*" - ], - "keywords": [ - "IntelliSense", - "mdx", - "monaco", - "monaco-editor", - "typescript", - "unified" - ], - "scripts": { - "build": "tsc --build --clean && tsc --build", - "prepack": "npm run build", - "test-api": "playwright test" - }, - "peerDependencies": { - "monaco-editor": ">=0.34.0" - }, - "peerDependenciesMeta": { - "monaco-editor": { - "optional": true - } - }, - "dependencies": { - "@mdx-js/language-service": "0.1.0", - "@volar/monaco": "~1.10.0", - "unified": "^10.0.0" - }, - "devDependencies": { - "@playwright/test": "^1.0.0", - "path-browserify": "^1.0.0", - "playwright-monaco": "^1.0.0" - } -} diff --git a/packages/monaco/playwright.config.js b/packages/monaco/playwright.config.js deleted file mode 100644 index c7cbafa5..00000000 --- a/packages/monaco/playwright.config.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * @typedef {import('@playwright/test').PlaywrightTestConfig} PlaywrightTestConfig - */ - -import {createServer} from 'playwright-monaco' - -/** - * @type {PlaywrightTestConfig} - */ -const config = { - use: { - baseURL: await createServer( - { - setup: './tests/setup.js', - mdx: './mdx.worker.js' - }, - { - alias: {path: 'path-browserify'} - } - ) - } -} - -export default config diff --git a/packages/monaco/tests/definition.test.js b/packages/monaco/tests/definition.test.js deleted file mode 100644 index b29d62fd..00000000 --- a/packages/monaco/tests/definition.test.js +++ /dev/null @@ -1,28 +0,0 @@ -import {expect} from '@playwright/test' -import {test} from 'playwright-monaco' - -test('ESM definition', async ({editor, page}) => { - await editor.open('*.mdx', { - cwd: new URL('../../../fixtures/node16', import.meta.url) - }) - await editor.setModel('file:///a.mdx') - await editor.setPosition({lineNumber: 2, column: 10}) - await editor.trigger('editor.action.peekDefinition') - - await expect(page.locator('.peekview-widget .ref-tree')).toHaveText( - 'function a() {}' - ) -}) - -test('JSX hover', async ({editor, page}) => { - await editor.open('*.mdx', { - cwd: new URL('../../../fixtures/node16', import.meta.url) - }) - await editor.setModel('file:///a.mdx') - await editor.setPosition({lineNumber: 12, column: 3}) - await editor.trigger('editor.action.peekDefinition') - - await expect(page.locator('.peekview-widget .ref-tree')).toHaveText( - 'function a() {}' - ) -}) diff --git a/packages/monaco/tests/diagnostics.test.js b/packages/monaco/tests/diagnostics.test.js deleted file mode 100644 index 2e807c9f..00000000 --- a/packages/monaco/tests/diagnostics.test.js +++ /dev/null @@ -1,25 +0,0 @@ -import {expect} from '@playwright/test' -import {test} from 'playwright-monaco' - -test('syntax errors', async ({editor}) => { - const result = await editor.waitForMarkers('file:///a.mdx', async () => { - await editor.createModel('<\n', 'file:///a.mdx') - }) - expect(result).toStrictEqual([ - { - code: 'MDX', - endColumn: 1, - endLineNumber: 2, - message: - 'Unexpected end of file before name, expected a character that can start a name, such as a letter, `$`, or `_`', - owner: 'mdx', - relatedInformation: [], - resource: 'file:///a.mdx', - severity: 8, - source: undefined, - startColumn: 2, - startLineNumber: 1, - tags: [] - } - ]) -}) diff --git a/packages/monaco/tests/hover.test.js b/packages/monaco/tests/hover.test.js deleted file mode 100644 index d3756895..00000000 --- a/packages/monaco/tests/hover.test.js +++ /dev/null @@ -1,28 +0,0 @@ -import {expect} from '@playwright/test' -import {test} from 'playwright-monaco' - -test('ESM hover', async ({editor, page}) => { - await editor.open('*.mdx', { - cwd: new URL('../../../fixtures/node16', import.meta.url) - }) - await editor.setModel('file:///a.mdx') - await editor.setPosition({lineNumber: 2, column: 10}) - await editor.trigger('editor.action.showHover') - - await expect(page.locator('.monaco-hover-content')).toHaveText( - 'function a(): voidDescription of a' - ) -}) - -test('JSX hover', async ({editor, page}) => { - await editor.open('*.mdx', { - cwd: new URL('../../../fixtures/node16', import.meta.url) - }) - await editor.setModel('file:///a.mdx') - await editor.setPosition({lineNumber: 12, column: 2}) - await editor.trigger('editor.action.showHover') - - await expect(page.locator('.monaco-hover-content')).toHaveText( - 'function a(): voidDescription of a' - ) -}) diff --git a/packages/monaco/tests/index.html b/packages/monaco/tests/index.html deleted file mode 100644 index 8da77197..00000000 --- a/packages/monaco/tests/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - Monaco MDX - - - - - -
- - - diff --git a/packages/monaco/tests/references.test.js b/packages/monaco/tests/references.test.js deleted file mode 100644 index cefc3689..00000000 --- a/packages/monaco/tests/references.test.js +++ /dev/null @@ -1,28 +0,0 @@ -import {expect} from '@playwright/test' -import {test} from 'playwright-monaco' - -test('ESM definition', async ({editor, page}) => { - await editor.open('*.mdx', { - cwd: new URL('../../../fixtures/node16', import.meta.url) - }) - await editor.setModel('file:///a.mdx') - await editor.setPosition({lineNumber: 2, column: 17}) - await editor.trigger('editor.action.referenceSearch.trigger') - - await expect(page.locator('.peekview-widget .ref-tree')).toHaveText( - 'a.mdx/3function a() {}a(){a()}b.mdx/1mixed.mdx/1' - ) -}) - -test('JSX hover', async ({editor, page}) => { - await editor.open('*.mdx', { - cwd: new URL('../../../fixtures/node16', import.meta.url) - }) - await editor.setModel('file:///a.mdx') - await editor.setPosition({lineNumber: 12, column: 3}) - await editor.trigger('editor.action.referenceSearch.trigger') - - await expect(page.locator('.peekview-widget .ref-tree')).toHaveText( - 'a.mdx/3function a() {}a(){a()}b.mdx/1mixed.mdx/1' - ) -}) diff --git a/packages/monaco/tests/setup.js b/packages/monaco/tests/setup.js deleted file mode 100644 index e3a266df..00000000 --- a/packages/monaco/tests/setup.js +++ /dev/null @@ -1,9 +0,0 @@ -import {initializeMonacoMdx} from '@mdx-js/monaco' -import {monaco} from 'playwright-monaco' - -monaco.languages.register({ - id: 'mdx', - extensions: ['.mdx'] -}) - -initializeMonacoMdx(monaco) diff --git a/packages/monaco/tsconfig.json b/packages/monaco/tsconfig.json deleted file mode 100644 index d10c3eed..00000000 --- a/packages/monaco/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "include": ["**/**.js"], - "exclude": ["coverage/", "node_modules/"], - "compilerOptions": { - "checkJs": true, - "declaration": true, - "emitDeclarationOnly": true, - "module": "node16", - "skipLibCheck": true, - "strict": true, - "paths": { - "@mdx-js/language-service": ["../language-service/index.js"], - "@mdx-js/monaco": ["./index.js"] - } - } -} diff --git a/release.sh b/release.sh index 888a4da4..340879c0 100755 --- a/release.sh +++ b/release.sh @@ -1,7 +1,6 @@ #!/usr/bin/bash npm pack --pack-destination "$PWD" --workspace @mdx-js/language-service npm pack --pack-destination "$PWD" --workspace @mdx-js/language-server -npm pack --pack-destination "$PWD" --workspace @mdx-js/language-monaco npx --workspace vscode-mdx vsce package --out "$PWD" npx changeset publish