Docs: Add React example (#152)

* Docs: Add React example

* Docs: Ignore lint errors in examples

* Docs: Test examples report errors

.eslintrc.js

@@ -28,6 +28,8 @@ module.exports = {
 
     "extends": "eslint",
 
+    "ignorePatterns": ["examples"],
+
     "overrides": [
         {
             "files": ["**/*.md"],

.github/workflows/ci.yml

@@ -39,5 +39,10 @@ jobs:
       run: npm install
       env:
         CI: true
+    - name: Install examples/react Packages
+      working-directory: ./examples/react
+      run: npm install
+      env:
+        CI: true
     - name: Test
       run: npm run test-cov

examples/react/.eslintrc.js

@@ -0,0 +1,43 @@
+"use strict";
+
+module.exports = {
+    root: true,
+    extends: [
+        "eslint:recommended",
+        "plugin:markdown/recommended",
+        "plugin:react/recommended",
+    ],
+    settings: {
+        react: {
+            version: "16.8.0"
+        }
+    },
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true
+        },
+        ecmaVersion: 2015,
+        sourceType: "module"
+    },
+    env: {
+        browser: true,
+        es6: true
+    },
+    overrides: [
+        {
+            files: [".eslintrc.js"],
+            env: {
+                node: true
+            }
+        },
+        {
+            files: ["**/*.md/*.jsx"],
+            globals: {
+                // For code examples, `import React from "react";` at the top
+                // of every code block is distracting, so pre-define the
+                // `React` global.
+                React: false
+            },
+        }
+    ]
+};

examples/react/.npmrc

@@ -0,0 +1 @@
+package-lock = false

examples/react/README.md

@@ -0,0 +1,24 @@
+# React Example
+
+```jsx
+function App({ name }) {
+    return (
+        <div>
+            <p>Hello, {name}!</p>
+        </div>
+    );
+}
+```
+
+```sh
+$ git clone https://github.com/eslint/eslint-plugin-markdown.git
+$ cd eslint-plugin-markdown/examples/react
+$ npm install
+$ npm test
+
+eslint-plugin-markdown/examples/react/README.md
+  4:10  error  'App' is defined but never used        no-unused-vars
+  4:16  error  'name' is missing in props validation  react/prop-types
+
+✖ 2 problems (2 errors, 0 warnings)
+```

examples/react/package.json

@@ -0,0 +1,11 @@
+{
+  "private": true,
+  "scripts": {
+    "test": "eslint ."
+  },
+  "devDependencies": {
+    "eslint": "^7.5.0",
+    "eslint-plugin-markdown": "file:../..",
+    "eslint-plugin-react": "^7.20.3"
+  }
+}

package.json

@@ -22,7 +22,7 @@
   "scripts": {
     "lint": "eslint --ext js,md .",
     "test": "npm run lint && npm run test-cov",
-    "test-cov": "nyc _mocha -- -c tests/lib/**/*.js",
+    "test-cov": "nyc _mocha -- -c tests/{examples,lib}/**/*.js",
     "generate-release": "eslint-generate-release",
     "generate-alpharelease": "eslint-generate-prerelease alpha",
     "generate-betarelease": "eslint-generate-prerelease beta",

tests/examples/all.js

@@ -0,0 +1,41 @@
+"use strict";
+
+const assert = require("chai").assert;
+const execSync = require("child_process").execSync;
+const fs = require("fs");
+const path = require("path");
+const semver = require("semver");
+
+const examples = path.resolve(__dirname, "../../examples/");
+for (const example of fs.readdirSync(examples)) {
+    const cwd = path.join(examples, example);
+
+    // The plugin officially supports ESLint as early as v6, but the examples
+    // use ESLint v7, which has a higher minimum Node.js version than does v6.
+    // Only exercise the example if the running Node.js version satisfies the
+    // minimum version constraint. In CI, this will skip these tests in Node.js
+    // v8 and run them on all other Node.js versions.
+    const eslintPackageJsonPath = require.resolve("eslint/package.json", {
+        paths: [cwd]
+    });
+    const eslintPackageJson = require(eslintPackageJsonPath);
+    if (semver.satisfies(process.version, eslintPackageJson.engines.node)) {
+        describe("examples", function () {
+            describe(example, () => {
+                it("reports errors on code blocks in .md files", async () => {
+                    const { ESLint } = require(
+                        require.resolve("eslint", { paths: [cwd] })
+                    );
+                    const eslint = new ESLint({ cwd });
+
+                    const results = await eslint.lintFiles(["."]);
+                    const readme = results.find(result =>
+                        path.basename(result.filePath) == "README.md"
+                    );
+                    assert.isNotNull(readme);
+                    assert.isAbove(readme.messages.length, 0);
+                });
+            });
+        });
+    }
+}