From d89e4262a252407c2f8c7eb4b6be9be9c6439a50 Mon Sep 17 00:00:00 2001 From: fanny Date: Sat, 6 Jun 2020 21:26:35 -0300 Subject: [PATCH] docs: Add support npm2yarn --- docusaurus/docs/adding-a-router.md | 8 +- docusaurus/docs/adding-a-sass-stylesheet.md | 4 +- docusaurus/docs/adding-bootstrap.md | 16 +--- docusaurus/docs/adding-relay.md | 8 +- docusaurus/docs/adding-typescript.md | 6 +- docusaurus/docs/analyzing-the-bundle-size.md | 8 +- docusaurus/docs/deployment.md | 14 +--- .../developing-components-in-isolation.md | 10 +-- docusaurus/docs/installing-a-dependency.md | 10 +-- docusaurus/docs/loading-graphql-files.md | 10 +-- .../proxying-api-requests-in-development.md | 6 +- docusaurus/docs/running-tests.md | 24 +----- docusaurus/docs/setting-up-your-editor.md | 8 +- docusaurus/website/docusaurus.config.js | 1 + docusaurus/website/package.json | 1 + .../website/src/plugins/remark-npm2yarn.js | 81 +++++++++++++++++++ docusaurus/website/yarn.lock | 5 ++ 17 files changed, 110 insertions(+), 110 deletions(-) create mode 100644 docusaurus/website/src/plugins/remark-npm2yarn.js diff --git a/docusaurus/docs/adding-a-router.md b/docusaurus/docs/adding-a-router.md index 3dda1baac86..05d4d5145f4 100644 --- a/docusaurus/docs/adding-a-router.md +++ b/docusaurus/docs/adding-a-router.md @@ -7,16 +7,10 @@ Create React App doesn't prescribe a specific routing solution, but [React Route To add it, run: -```sh +```bash npm2yarn npm install --save react-router-dom ``` -Alternatively you may use `yarn`: - -```sh -yarn add react-router-dom -``` - To try it, delete all the code in `src/App.js` and replace it with any of the examples on its website. The [Basic Example](https://reacttraining.com/react-router/web/example/basic) is a good place to get started. Note that [you may need to configure your production server to support client-side routing](deployment.md#serving-apps-with-client-side-routing) before deploying your app. diff --git a/docusaurus/docs/adding-a-sass-stylesheet.md b/docusaurus/docs/adding-a-sass-stylesheet.md index 1ba76380e6a..b13a6e74cba 100644 --- a/docusaurus/docs/adding-a-sass-stylesheet.md +++ b/docusaurus/docs/adding-a-sass-stylesheet.md @@ -12,10 +12,8 @@ Following this rule often makes CSS preprocessors less useful, as features like To use Sass, first install `node-sass`: -```sh +```bash npm2yarn $ npm install node-sass --save -$ # or -$ yarn add node-sass ``` Now you can rename `src/App.css` to `src/App.scss` and update `src/App.js` to import `src/App.scss`. diff --git a/docusaurus/docs/adding-bootstrap.md b/docusaurus/docs/adding-bootstrap.md index 1bbffda0854..cd4e434089b 100644 --- a/docusaurus/docs/adding-bootstrap.md +++ b/docusaurus/docs/adding-bootstrap.md @@ -7,16 +7,10 @@ While you don’t have to use any specific library to integrate Bootstrap with R Each project's respective documentation site has detailed instructions for installing and using them. Both depend on the Bootstrap css file so install that as well: -```sh +```bash npm2yarn npm install --save bootstrap ``` -Alternatively you may use `yarn`: - -```sh -yarn add bootstrap -``` - Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your `src/index.js` file: ```js @@ -35,16 +29,10 @@ As of `react-scripts@2.0.0` you can import `.scss` files. This makes it possible To enable `scss` in Create React App you will need to install `node-sass`. -```sh +```bash npm2yarn npm install --save node-sass ``` -Alternatively you may use `yarn`: - -```sh -yarn add node-sass -``` - To customize Bootstrap, create a file called `src/custom.scss` (or similar) and import the Bootstrap source stylesheet. Add any overrides _before_ the imported file(s). You can reference [Bootstrap's documentation](https://getbootstrap.com/docs/4.1/getting-started/theming/#css-variables) for the names of the available variables. ```scss diff --git a/docusaurus/docs/adding-relay.md b/docusaurus/docs/adding-relay.md index 022248b9f22..41dceb34cbd 100644 --- a/docusaurus/docs/adding-relay.md +++ b/docusaurus/docs/adding-relay.md @@ -7,16 +7,10 @@ Relay is a framework for building data-driven React applications powered by Grap To add it, run: -```sh +```bash npm2yarn npm install --save babel-plugin-relay ``` -Alternatively you may use `yarn`: - -```sh -yarn add babel-plugin-relay -``` - Then, wherever you use the `graphql` template tag, import the macro: ```js diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index 40c9c2242a8..694eb59d70f 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/docusaurus/docs/adding-typescript.md @@ -25,12 +25,8 @@ yarn create react-app my-app --template typescript To add [TypeScript](https://www.typescriptlang.org/) to a Create React App project, first install it: -```sh +```bash npm2yarn npm install --save typescript @types/node @types/react @types/react-dom @types/jest - -# or - -yarn add typescript @types/node @types/react @types/react-dom @types/jest ``` Next, rename any file to be a TypeScript file (e.g. `src/index.js` to `src/index.tsx`) and **restart your development server**! diff --git a/docusaurus/docs/analyzing-the-bundle-size.md b/docusaurus/docs/analyzing-the-bundle-size.md index 36f753c4df2..c09fc9ef5f6 100644 --- a/docusaurus/docs/analyzing-the-bundle-size.md +++ b/docusaurus/docs/analyzing-the-bundle-size.md @@ -10,16 +10,10 @@ bloat is coming from. To add Source map explorer to a Create React App project, follow these steps: -```sh +```bash npm2yarn npm install --save source-map-explorer ``` -Alternatively you may use `yarn`: - -```sh -yarn add source-map-explorer -``` - Then in `package.json`, add the following line to `scripts`: ```diff diff --git a/docusaurus/docs/deployment.md b/docusaurus/docs/deployment.md index dfb2e13d6aa..35a085f759a 100644 --- a/docusaurus/docs/deployment.md +++ b/docusaurus/docs/deployment.md @@ -142,10 +142,8 @@ For example, to create a build environment for a staging environment: 1. Create a file called `.env.staging` 1. Set environment variables as you would any other `.env` file (e.g. `REACT_APP_API_URL=http://api-staging.example.com`) 1. Install [env-cmd](https://www.npmjs.com/package/env-cmd) - ```sh - $ npm install env-cmd --save - $ # or - $ yarn add env-cmd + ```bash npm2yarn + npm install env-cmd --save ``` 1. Add a new script to your `package.json`, building with your new environment: ```json @@ -287,16 +285,10 @@ Now, whenever you run `npm run build`, you will see a cheat sheet with instructi To publish it at [https://myusername.github.io/my-app](https://myusername.github.io/my-app), run: -```sh +```bash npm2yarn npm install --save gh-pages ``` -Alternatively you may use `yarn`: - -```sh -yarn add gh-pages -``` - Add the following scripts in your `package.json`: ```diff diff --git a/docusaurus/docs/developing-components-in-isolation.md b/docusaurus/docs/developing-components-in-isolation.md index 90baae5a1de..243c3c7eca8 100644 --- a/docusaurus/docs/developing-components-in-isolation.md +++ b/docusaurus/docs/developing-components-in-isolation.md @@ -43,16 +43,10 @@ Styleguidist combines a style guide, where all your components are presented on First, install Styleguidist: -```sh +```bash npm2yarn npm install --save react-styleguidist ``` -Alternatively you may use `yarn`: - -```sh -yarn add react-styleguidist -``` - Then, add these scripts to your `package.json`: ```diff @@ -64,7 +58,7 @@ Then, add these scripts to your `package.json`: Then, run the following command inside your app’s directory: -```sh +```bash npm2yarn npm run styleguide ``` diff --git a/docusaurus/docs/installing-a-dependency.md b/docusaurus/docs/installing-a-dependency.md index 07559840a6e..ab44fd1da82 100644 --- a/docusaurus/docs/installing-a-dependency.md +++ b/docusaurus/docs/installing-a-dependency.md @@ -3,16 +3,10 @@ id: installing-a-dependency title: Installing a Dependency --- -The generated project includes React and ReactDOM as dependencies. It also includes a set of scripts used by Create React App as a development dependency. You may install other dependencies (for example, React Router) with `npm`: +The generated project includes React and ReactDOM as dependencies. It also includes a set of scripts used by Create React App as a development dependency. You may install other dependencies (for example, React Router) as we show below: -```sh +```bash npm2yarn npm install --save react-router-dom ``` -Alternatively you may use `yarn`: - -```sh -yarn add react-router-dom -``` - This works for any library, not only `react-router-dom`. diff --git a/docusaurus/docs/loading-graphql-files.md b/docusaurus/docs/loading-graphql-files.md index 1d50dcc9875..407cc9818bb 100644 --- a/docusaurus/docs/loading-graphql-files.md +++ b/docusaurus/docs/loading-graphql-files.md @@ -6,16 +6,10 @@ sidebar_label: Loading .graphql Files To load `.gql` and `.graphql` files, first install the [`graphql`](https://www.npmjs.com/package/graphql) and [`graphql.macro`](https://www.npmjs.com/package/graphql.macro) packages by running: -```sh +```bash npm2yarn npm install --save graphql graphql.macro ``` -Alternatively you may use `yarn`: - -```sh -yarn add graphql graphql.macro -``` - Then, whenever you want to load `.gql` or `.graphql` files, import the `loader` from the macro package: ```js @@ -57,7 +51,7 @@ You can also use the `gql` template tag the same way you would use the non-macro ```js import { gql } from 'graphql.macro'; - + const query = gql` query User { user(id: 5) { diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md index 66563e25e45..0c0bca1592f 100644 --- a/docusaurus/docs/proxying-api-requests-in-development.md +++ b/docusaurus/docs/proxying-api-requests-in-development.md @@ -76,10 +76,8 @@ You can use this feature in conjunction with the `proxy` property in `package.js First, install `http-proxy-middleware` using npm or Yarn: -```sh -$ npm install http-proxy-middleware --save -$ # or -$ yarn add http-proxy-middleware +```bash npm2yarn +npm install http-proxy-middleware --save ``` Next, create `src/setupProxy.js` and place the following contents in it: diff --git a/docusaurus/docs/running-tests.md b/docusaurus/docs/running-tests.md index a757355e018..2c797248d52 100644 --- a/docusaurus/docs/running-tests.md +++ b/docusaurus/docs/running-tests.md @@ -89,16 +89,10 @@ When you encounter bugs caused by changing components, you will gain a deeper in If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](https://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](https://airbnb.io/enzyme/). To install it, run: -```sh +```bash npm2yarn npm install --save enzyme enzyme-adapter-react-16 react-test-renderer ``` -Alternatively you may use `yarn`: - -```sh -yarn add enzyme enzyme-adapter-react-16 react-test-renderer -``` - As of Enzyme 3, you will need to install Enzyme along with an Adapter corresponding to the version of React you are using. (The examples above use the adapter for React 16.) The adapter will also need to be configured in your [global setup file](#initializing-test-environment): @@ -157,16 +151,10 @@ expect(wrapper).toContainReact(welcome); To enable this, install `jest-enzyme`: -```sh +```bash npm2yarn npm install --save jest-enzyme ``` -Alternatively you may use `yarn`: - -```sh -yarn add jest-enzyme -``` - Import it in [`src/setupTests.js`](#initializing-test-environment) to make its matchers available in every test: ```js @@ -179,16 +167,10 @@ As an alternative or companion to `enzyme`, you may consider using `react-testin To install `react-testing-library` and `jest-dom`, you can run: -```sh +```bash npm2yarn npm install --save @testing-library/react @testing-library/jest-dom ``` -Alternatively you may use `yarn`: - -```sh -yarn add @testing-library/react @testing-library/jest-dom -``` - Similar to `enzyme` you can create a `src/setupTests.js` file to avoid boilerplate in your test files: ```js diff --git a/docusaurus/docs/setting-up-your-editor.md b/docusaurus/docs/setting-up-your-editor.md index 4c99126a420..3a1180d88ea 100644 --- a/docusaurus/docs/setting-up-your-editor.md +++ b/docusaurus/docs/setting-up-your-editor.md @@ -116,16 +116,10 @@ Prettier is an opinionated code formatter with support for JavaScript, CSS and J To format our code whenever we make a commit in git, we need to install the following dependencies: -```sh +```bash npm2yarn npm install --save husky lint-staged prettier ``` -Alternatively you may use `yarn`: - -```sh -yarn add husky lint-staged prettier -``` - - `husky` makes it possible to use githooks as if they are npm scripts. - `lint-staged` allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8). - `prettier` is the JavaScript formatter we will run before commits. diff --git a/docusaurus/website/docusaurus.config.js b/docusaurus/website/docusaurus.config.js index 11a5e25aba7..2cb5075a116 100644 --- a/docusaurus/website/docusaurus.config.js +++ b/docusaurus/website/docusaurus.config.js @@ -24,6 +24,7 @@ const siteConfig = { 'https://github.com/facebook/create-react-app/edit/master/docusaurus/website', showLastUpdateAuthor: true, showLastUpdateTime: true, + remarkPlugins: [require('./src/plugins/remark-npm2yarn')], }, theme: { customCss: require.resolve('./src/css/custom.css'), diff --git a/docusaurus/website/package.json b/docusaurus/website/package.json index 4a7af691301..dd1d614048e 100644 --- a/docusaurus/website/package.json +++ b/docusaurus/website/package.json @@ -9,6 +9,7 @@ "@docusaurus/core": "^2.0.0-alpha.39", "@docusaurus/preset-classic": "^2.0.0-alpha.39", "classnames": "^2.2.6", + "npm-to-yarn": "^1.0.1", "react": "^16.12.0", "react-dom": "^16.12.0" }, diff --git a/docusaurus/website/src/plugins/remark-npm2yarn.js b/docusaurus/website/src/plugins/remark-npm2yarn.js new file mode 100644 index 00000000000..02118ec6d4a --- /dev/null +++ b/docusaurus/website/src/plugins/remark-npm2yarn.js @@ -0,0 +1,81 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +const npmToYarn = require('npm-to-yarn'); + +// E.g. global install: 'npm i' -> 'yarn' +const convertNpmToYarn = (npmCode) => npmToYarn(npmCode, 'yarn'); + +const transformNode = (node) => { + const npmCode = node.value; + const yarnCode = convertNpmToYarn(node.value); + return [ + { + type: 'jsx', + value: + ` +`, + }, + { + type: node.type, + lang: node.lang, + value: npmCode, + }, + { + type: 'jsx', + value: '\n', + }, + { + type: node.type, + lang: node.lang, + value: yarnCode, + }, + { + type: 'jsx', + value: '\n', + }, + ]; +}; + +const matchNode = (node) => node.type === 'code' && node.meta === 'npm2yarn'; +const nodeForImport = { + type: 'import', + value: + "import Tabs from '@theme/Tabs';\nimport TabItem from '@theme/TabItem';", +}; + +module.exports = () => { + let transformed = false; + const transformer = (node) => { + if (matchNode(node)) { + transformed = true; + return transformNode(node); + } + if (Array.isArray(node.children)) { + let index = 0; + while (index < node.children.length) { + const result = transformer(node.children[index]); + if (result) { + node.children.splice(index, 1, ...result); + index += result.length; + } else { + index += 1; + } + } + } + if (node.type === 'root' && transformed) { + node.children.unshift(nodeForImport); + } + return null; + }; + return transformer; +}; diff --git a/docusaurus/website/yarn.lock b/docusaurus/website/yarn.lock index dee1365ea76..bec072ea30c 100644 --- a/docusaurus/website/yarn.lock +++ b/docusaurus/website/yarn.lock @@ -5836,6 +5836,11 @@ npm-run-path@^4.0.0: dependencies: path-key "^3.0.0" +npm-to-yarn@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/npm-to-yarn/-/npm-to-yarn-1.0.1.tgz#6cdb95114c4ff0be50a7a2381d4d16131a5f52df" + integrity sha512-bp8T8oNMfLW+N/fE0itFfSu7RReytwhqNd9skbkfHfzGYC+5CCdzS2HnaXz6JiG4AlK2eA0qlT6NJN1SoFvcWQ== + npmlog@^4.0.2: version "4.1.2" resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"