From d8a62d20c59ab6979ad44ab19828d095e2a1e5b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABl=20Nison?= Date: Mon, 27 Feb 2023 15:22:09 +0100 Subject: [PATCH 01/80] Add missing type dependencies Reviewed-by: Remco Haszing Reviewed-by: Titus Wormer Closes GH-2256. --- packages/mdx/package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/mdx/package.json b/packages/mdx/package.json index 3176eaa65..9030e9427 100644 --- a/packages/mdx/package.json +++ b/packages/mdx/package.json @@ -46,7 +46,9 @@ "index.js" ], "dependencies": { + "@types/estree": "^1.0.0", "@types/estree-jsx": "^1.0.0", + "@types/hast": "^2.0.0", "@types/mdx": "^2.0.0", "estree-util-build-jsx": "^2.0.0", "estree-util-is-identifier-name": "^2.0.0", @@ -58,6 +60,7 @@ "remark-mdx": "^2.0.0", "remark-parse": "^10.0.0", "remark-rehype": "^10.0.0", + "source-map": "^0.7.0", "unified": "^10.0.0", "unist-util-position-from-estree": "^1.0.0", "unist-util-stringify-position": "^3.0.0", @@ -77,7 +80,6 @@ "remark-frontmatter": "^4.0.0", "remark-gfm": "^3.0.0", "remark-math": "^5.0.0", - "source-map": "^0.7.0", "source-map-support": "^0.5.0", "unist-util-remove-position": "^4.0.0" }, From 4129f90ef77983049efc6131b6b8a3298264c0cd Mon Sep 17 00:00:00 2001 From: Andreas Deininger Date: Mon, 6 Mar 2023 09:55:50 +0100 Subject: [PATCH 02/80] Fix a couple typos Reviewed-by: Remco Haszing Reviewed-by: Christian Murphy Reviewed-by: Titus Wormer Closes GH-2266. --- docs/docs/getting-started.server.mdx | 2 +- docs/guides/syntax-highlighting.server.mdx | 2 +- packages/mdx/lib/run.js | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/docs/getting-started.server.mdx b/docs/docs/getting-started.server.mdx index 1d7fc273d..f7374dc00 100644 --- a/docs/docs/getting-started.server.mdx +++ b/docs/docs/getting-started.server.mdx @@ -604,7 +604,7 @@ Install the webpack loader [`@mdx-js/loader`][mdx-loader]. For importing MDX without the `!@mdx-js/loader!` prefix, you can add the loader to the webpack config, by rewiring `react-scripts` using -[CRACO](http://github.com/gsoft-inc/craco). +[CRACO](https://github.com/gsoft-inc/craco). See also [¶ Webpack][webpack], which is used in CRA, and see [¶ React][react], which you’re likely using, for more info. diff --git a/docs/guides/syntax-highlighting.server.mdx b/docs/guides/syntax-highlighting.server.mdx index cc774d008..c18c9f97f 100644 --- a/docs/guides/syntax-highlighting.server.mdx +++ b/docs/guides/syntax-highlighting.server.mdx @@ -135,7 +135,7 @@ console.log(1) ``` ```` -The `meta` part is everything after the language (in thise case, `js`). +The `meta` part is everything after the language (in this case, `js`). This is a *hidden* part of markdown: it’s normally ignored. But as the above example shows, it’s a useful place to put some extra fields. diff --git a/packages/mdx/lib/run.js b/packages/mdx/lib/run.js index ad160903d..90c681035 100644 --- a/packages/mdx/lib/run.js +++ b/packages/mdx/lib/run.js @@ -9,7 +9,7 @@ const AsyncFunction = Object.getPrototypeOf(run).constructor * @param {unknown} options * Parameter. * @return {Promise} - * Anthing. + * Anything. */ export async function run(file, options) { return new AsyncFunction(String(file))(options) @@ -23,7 +23,7 @@ export async function run(file, options) { * @param {unknown} options * Parameter. * @return {any} - * Anthing. + * Anything. */ export function runSync(file, options) { // eslint-disable-next-line no-new-func From e77be3a0028761d238bef1ed6b0e66b794f9c320 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 20 Mar 2023 10:02:04 +0100 Subject: [PATCH 03/80] Update dev-dependencies Closes Gh-2273. Reviewed-by: Remco Haszing Reviewed-by: Titus Wormer --- package-lock.json | 27 +++++++++++++++++++++------ package.json | 2 +- 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 012cac8cd..1e417f2e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -97,7 +97,7 @@ "remark-toc": "^8.0.0", "rodemirror": "^2.0.0", "type-coverage": "^2.0.0", - "typescript": "^4.0.0", + "typescript": "^5.0.0", "unified": "^10.0.0", "unist-builder": "^3.0.0", "unist-util-visit": "^4.0.0", @@ -17172,16 +17172,16 @@ "dev": true }, "node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.2.tgz", + "integrity": "sha512-wVORMBGO/FAs/++blGNeAVdbNKtIh1rbBL2EyQ1+J9lClJ93KiiKe8PmFIVdXhHcyv44SL9oglmfeSsndo0jRw==", "dev": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=4.2.0" + "node": ">=12.20" } }, "node_modules/uglify-js": { @@ -19269,6 +19269,19 @@ "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" } }, + "node_modules/xo/node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/xo/node_modules/yallist": { "version": "4.0.0", "dev": true, @@ -19557,7 +19570,9 @@ "version": "2.3.0", "license": "MIT", "dependencies": { + "@types/estree": "^1.0.0", "@types/estree-jsx": "^1.0.0", + "@types/hast": "^2.0.0", "@types/mdx": "^2.0.0", "estree-util-build-jsx": "^2.0.0", "estree-util-is-identifier-name": "^2.0.0", @@ -19569,6 +19584,7 @@ "remark-mdx": "^2.0.0", "remark-parse": "^10.0.0", "remark-rehype": "^10.0.0", + "source-map": "^0.7.0", "unified": "^10.0.0", "unist-util-position-from-estree": "^1.0.0", "unist-util-stringify-position": "^3.0.0", @@ -19588,7 +19604,6 @@ "remark-frontmatter": "^4.0.0", "remark-gfm": "^3.0.0", "remark-math": "^5.0.0", - "source-map": "^0.7.0", "source-map-support": "^0.5.0", "unist-util-remove-position": "^4.0.0" }, diff --git a/package.json b/package.json index d934dd588..f5f3d0096 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,7 @@ "remark-toc": "^8.0.0", "rodemirror": "^2.0.0", "type-coverage": "^2.0.0", - "typescript": "^4.0.0", + "typescript": "^5.0.0", "unified": "^10.0.0", "unist-builder": "^3.0.0", "unist-util-visit": "^4.0.0", From 9eb747d6861b5b586b944571790a0a5f9de9f197 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Tue, 9 May 2023 15:28:41 +0200 Subject: [PATCH 04/80] Add info on how to run the docs locally Closes GH-2297. Reviewed-by: Titus Wormer --- docs/community/contribute.server.mdx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/community/contribute.server.mdx b/docs/community/contribute.server.mdx index d6e9db4ed..8ec367a46 100644 --- a/docs/community/contribute.server.mdx +++ b/docs/community/contribute.server.mdx @@ -34,6 +34,14 @@ As a user you’re perfect for helping us improve our docs. Typo corrections, error fixes, better explanations, new examples, etcetera. All MDX docs live in `docs/`. +You can run the docs locally by following those steps: + +* Use Node.js 14 +* Install latest npm (not the one coming with Node.js 14): `npm install -g npm` +* Install repository packages: `npm install` +* Build the docs site: `npm run docs-prod` +* Test the static docs site: `npx serve public` + ### Improve issues Some issues lack information, aren’t reproducible, or are just incorrect. From 7fd1d9a4272754951e70dbaecff07a0ae402e13e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8C=97=E9=9B=81=E4=BA=91=E4=BE=9D?= <14120445+BeiyanYunyi@users.noreply.github.com> Date: Thu, 11 May 2023 17:55:49 +0800 Subject: [PATCH 05/80] Fix docs on how to use solid Closes GH-2300. Reviewed-by: Titus Wormer --- docs/docs/getting-started.server.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/docs/getting-started.server.mdx b/docs/docs/getting-started.server.mdx index f7374dc00..fcc5949a8 100644 --- a/docs/docs/getting-started.server.mdx +++ b/docs/docs/getting-started.server.mdx @@ -125,7 +125,7 @@ your JSX runtime. install and configure [`@mdx-js/react`][mdx-react]. Then wrap your MDX content in a `` * If you’re using **Solid**, - set [`options.jsxImportSource`][options-jsximportsource] to `'solid-js'` + set [`options.jsxImportSource`][options-jsximportsource] to `'solid-js/h'` Other JSX runtimes are supported by setting [`options.jsxImportSource`][options-jsximportsource]. @@ -899,12 +899,12 @@ for more info. ```js path="example.js" import {compile} from '@mdx-js/mdx' - const js = String(await compile('# hi', {jsxImportSource: 'solid-js', /* otherOptions… */})) + const js = String(await compile('# hi', {jsxImportSource: 'solid-js/h', /* otherOptions… */})) ``` Solid is supported when [`options.jsxImportSource`][options-jsximportsource] is -set to `'solid-js'`. +set to `'solid-js/h'`. See also [¶ Vite][vite] and [¶ Rollup][rollup] which you might be using, for more info. From 57301dfa8634ff7caab9ff63d9ebe6d9c62c81ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Wed, 17 May 2023 17:01:33 +0200 Subject: [PATCH 06/80] Add resizable editor/layout to playground --- docs/_asset/index.css | 74 ++++++++++++++++++++++++++------ docs/_component/editor.client.js | 27 ++++++------ 2 files changed, 75 insertions(+), 26 deletions(-) diff --git a/docs/_asset/index.css b/docs/_asset/index.css index 05f401928..9e5f6a527 100644 --- a/docs/_asset/index.css +++ b/docs/_asset/index.css @@ -301,11 +301,6 @@ pre code, background-color: #fafafa !important; /* Color from one-light */ } -.frame-body-box-fixed-height { - height: 20rem; - overflow-y: auto; -} - .frame-body-box { padding: calc(1em + 1ex); } @@ -764,8 +759,21 @@ button.success { border-radius: 10px; } +.frame-resizeable { + display: flex; + flex-direction: column; + overflow: auto; + + min-height: 10rem; + height: 24rem; + resize: vertical; +} + .frame-tab-bar { + flex-shrink: 0; display: flex; + flex-direction: row; + align-items: stretch; margin-block-start: calc(1em + 1ex); list-style-type: none; margin: 0; @@ -776,10 +784,6 @@ button.success { .frame-tab-bar-scroll { overflow-x: auto; overflow-y: hidden; - flex: 1; - flex-direction: row; - align-items: stretch; - flex-grow: 1; mask-image: linear-gradient( to right, hsl(0deg 0% 100% / 30%), @@ -789,11 +793,54 @@ button.success { ); } +.react-tabs__tab-panel { +} + +.react-tabs__tab-panel--selected { + flex-grow: 1; + display: flex; + flex-direction: column; + overflow: hidden; +} + +/* Preview / Options */ +.react-tabs__tab-panel--selected.tab-panel-scrollable { + overflow: auto; +} + .frame-body { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } +.react-tabs__tab-panel--selected > .frame-body { + flex-grow: 1; + display: flex; + flex-direction: column; +} + +.react-tabs__tab-panel--selected:not(.tab-panel-scrollable) > .frame-body { + overflow: hidden; +} + +.frame-body > .playground-editor-code-mirror, +.frame-body > pre { + flex-grow: 1; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.frame-body > div > div.cm-editor { + flex-grow: 1; + overflow: hidden; +} + +.frame-body > pre > code { + overflow-x: auto; + overflow-y: auto; +} + .frame-tab-bar + pre { margin-block-start: 0; } @@ -893,6 +940,10 @@ button.success { background-color: var(--fg); } +.playground-editor-options-tab-panel label { + margin-block: 0.5em; +} + .playground-result-badge::after { content: attr(data-count); display: inline-block; @@ -923,11 +974,6 @@ button.success { font-size: 1rem; } -.ͼ1 .cm-scroller, -.ͼ1 .cm-content { - min-height: 20rem; -} - .ͼo { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; diff --git a/docs/_component/editor.client.js b/docs/_component/editor.client.js index d7b4f9920..c51709646 100644 --- a/docs/_component/editor.client.js +++ b/docs/_component/editor.client.js @@ -86,7 +86,10 @@ function ErrorFallback({error, resetErrorBoundary}) { const MemoizedCodeMirror = memo((props) => ( - + )) @@ -130,7 +133,7 @@ export function Editor({children}) { return (
- + -
+
- -
+ +