From 36ae9e39a917a5c29246598229b75891022d3884 Mon Sep 17 00:00:00 2001 From: Hatem Hosny Date: Tue, 8 Apr 2025 14:40:50 +0200 Subject: [PATCH 1/2] docs: use remark-plugin-npm2yarn --- docs/docs/getting-started.mdx | 4 ++-- docs/docs/sdk/index.mdx | 4 ++-- docs/docusaurus.config.ts | 7 +++++++ docs/package-lock.json | 27 +++++++++++++++++++++++++++ docs/package.json | 1 + 5 files changed, 39 insertions(+), 4 deletions(-) diff --git a/docs/docs/getting-started.mdx b/docs/docs/getting-started.mdx index f505ec92bd..21e8f4e710 100644 --- a/docs/docs/getting-started.mdx +++ b/docs/docs/getting-started.mdx @@ -27,8 +27,8 @@ LiveCodes [SDK](./sdk/index.mdx) i Install from npm. -```shell -npm i livecodes +```bash npm2yarn +npm install livecodes ``` then you can use it like that: diff --git a/docs/docs/sdk/index.mdx b/docs/docs/sdk/index.mdx index e3097de7af..fc15d8b55b 100644 --- a/docs/docs/sdk/index.mdx +++ b/docs/docs/sdk/index.mdx @@ -31,8 +31,8 @@ This is an example of an editable embedded playground using the SDK. This is a single npm package for the SDK which supports JavaScript/TypeScript, React, Vue and Svelte. Install the library from npm: -```sh -npm i livecodes +```bash npm2yarn +npm install livecodes ``` then it can be used like that: diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts index d721ea6e80..1dc24cef69 100644 --- a/docs/docusaurus.config.ts +++ b/docs/docusaurus.config.ts @@ -35,6 +35,12 @@ const config: Config = { const sidebarItems = await defaultSidebarItemsGenerator(args); return excludeSidebarItems(sidebarItems); }, + remarkPlugins: [ + [ + require('@docusaurus/remark-plugin-npm2yarn'), + { sync: true, converters: ['yarn', 'pnpm', 'bun'] }, + ], + ], }, blog: false, theme: { @@ -220,6 +226,7 @@ const config: Config = { prism: { theme: lightCodeTheme, darkTheme: darkCodeTheme, + additionalLanguages: ['bash'], }, algolia: { appId: 'H9Z2PKYS80', diff --git a/docs/package-lock.json b/docs/package-lock.json index 740f618b8c..ed96a4c01d 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -12,6 +12,7 @@ "@docusaurus/faster": "3.7.0", "@docusaurus/plugin-client-redirects": "3.7.0", "@docusaurus/preset-classic": "3.7.0", + "@docusaurus/remark-plugin-npm2yarn": "3.7.0", "@mdx-js/react": "3.1.0", "clsx": "2.1.1", "prism-react-renderer": "2.4.1", @@ -3593,6 +3594,21 @@ "react-dom": "^18.0.0 || ^19.0.0" } }, + "node_modules/@docusaurus/remark-plugin-npm2yarn": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/@docusaurus/remark-plugin-npm2yarn/-/remark-plugin-npm2yarn-3.7.0.tgz", + "integrity": "sha512-2QkZh75vZzPefW5Ljt8gwc1i0ERuS0MRZTEwHsSXSi6vc2NpLVbcmfIuHhwR8o0PcGVTxmBEhQRP0NN1vHdOAA==", + "dependencies": { + "mdast-util-mdx": "^3.0.0", + "npm-to-yarn": "^3.0.0", + "tslib": "^2.6.0", + "unified": "^11.0.3", + "unist-util-visit": "^5.0.0" + }, + "engines": { + "node": ">=18.0" + } + }, "node_modules/@docusaurus/theme-classic": { "version": "3.7.0", "resolved": "https://registry.npmjs.org/@docusaurus/theme-classic/-/theme-classic-3.7.0.tgz", @@ -12810,6 +12826,17 @@ "node": ">=8" } }, + "node_modules/npm-to-yarn": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/npm-to-yarn/-/npm-to-yarn-3.0.1.tgz", + "integrity": "sha512-tt6PvKu4WyzPwWUzy/hvPFqn+uwXO0K1ZHka8az3NnrhWJDmSqI8ncWq0fkL0k/lmmi5tAC11FXwXuh0rFbt1A==", + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/nebrelbug/npm-to-yarn?sponsor=1" + } + }, "node_modules/nprogress": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz", diff --git a/docs/package.json b/docs/package.json index fc672ac889..6ee98b01d3 100644 --- a/docs/package.json +++ b/docs/package.json @@ -19,6 +19,7 @@ "@docusaurus/faster": "3.7.0", "@docusaurus/plugin-client-redirects": "3.7.0", "@docusaurus/preset-classic": "3.7.0", + "@docusaurus/remark-plugin-npm2yarn": "3.7.0", "@mdx-js/react": "3.1.0", "clsx": "2.1.1", "prism-react-renderer": "2.4.1", From a1f9011980e9aea2157632596e5347de21da1197 Mon Sep 17 00:00:00 2001 From: Hatem Hosny Date: Tue, 8 Apr 2025 17:11:25 +0200 Subject: [PATCH 2/2] edit docs --- docs/docs/languages/vue.mdx | 2 +- docs/docs/sdk/index.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs/languages/vue.mdx b/docs/docs/languages/vue.mdx index 34185c08f0..c9bf29a45a 100644 --- a/docs/docs/languages/vue.mdx +++ b/docs/docs/languages/vue.mdx @@ -408,7 +408,7 @@ Using [Prettier](https://prettier.io/). Currently, Vue support has the following limitations: - SSR is not supported. -- The [`defineProps()`](https://vuejs.org/guide/components/props#props-declaration) macro cannot infer props from TypeScript types. Props have to be explicitly declared. +- The [`defineProps()`](https://vuejs.org/guide/components/props#props-declaration) macro cannot infer props from TypeScript types not defined in the same file. [PRs are welcome](https://github.com/live-codes/livecodes/issues/757). diff --git a/docs/docs/sdk/index.mdx b/docs/docs/sdk/index.mdx index fc15d8b55b..129600f395 100644 --- a/docs/docs/sdk/index.mdx +++ b/docs/docs/sdk/index.mdx @@ -116,6 +116,6 @@ A demo page that shows the usage of the SDK can be [found here](https://live-cod Or edit the SDK playground in LiveCodes. How meta! :) - + P.S. You may want to use the "Full Screen" button!