Add linting and formatting

.babelrc

@@ -1,3 +1,3 @@
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"]
-}
+}

.eslintignore

@@ -0,0 +1,2 @@
+dist
+node_modules

.eslintrc

@@ -0,0 +1,37 @@
+{
+  "root": true,
+  "env": {
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "plugins": ["@typescript-eslint"],
+      "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:prettier/recommended"
+      ],
+      "rules": {
+        "@typescript-eslint/ban-ts-comment": "off",
+        "@typescript-eslint/explicit-module-boundary-types": "off"
+      }
+    }
+  ]
+}

.github/workflows/ci.yml

@@ -0,0 +1,89 @@
+name: CI workflow
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out the repository
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.head_ref }}
+
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14.x
+
+      - name: Cache npm packages
+        uses: actions/cache@v2
+        id: npm-cache
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-npm-
+
+      - name: Install dependencies
+        run: npm ci
+        env:
+          CI: true
+
+      - name: Format files
+        run: npm run format
+
+      - name: Commit formatting changes
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: Apply formatting changes
+          branch: ${{ github.head_ref }}
+
+      - name: Lint files
+        run: npm run lint
+
+      - name: Linting failed (attempting fix...)
+        if: ${{ failure() }}
+        run: npm run lint:fix
+
+      - name: Commit fixed lint issues
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: Apply fixed lint issues
+          branch: ${{ github.head_ref }}
+
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out the repository
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.head_ref }}
+
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14.x
+
+      - name: Cache npm packages
+        uses: actions/cache@v2
+        id: npm-cache
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-npm-
+
+      - name: Install dependencies
+        run: npm ci
+        env:
+          CI: true
+
+      - name: Run test suite
+        run: npm run test

.prettierignore

@@ -0,0 +1,5 @@
+dist
+node_modules
+package.json
+package-lock.json
+*.html

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "trailingComma": "none"
+}

README.md

@@ -38,11 +38,11 @@ import React from "react";
 import P5Wrapper from "react-p5-wrapper";
 
 function App() {
-  const sketch = p5 => {
+  const sketch = (p5) => {
     p5.setup = () => {};
     p5.draw = () => {};
   };
-  
+
   return <P5Wrapper sketch={sketch} />;
 }
 
@@ -61,12 +61,12 @@ import React from "react";
 import P5Wrapper from "react-p5-wrapper";
 
 function App() {
-  const sketch = p5 => {
+  const sketch = (p5) => {
     let rotation = 0;
 
     p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);
 
-    p5.myCustomRedrawAccordingToNewPropsHandler = props => {
+    p5.myCustomRedrawAccordingToNewPropsHandler = (props) => {
       if (props.rotation) rotation = (props.rotation * Math.PI) / 180;
     };
 
@@ -79,9 +79,9 @@ function App() {
       p5.box(100);
       p5.pop();
     };
-  }
+  };
 
-  return <P5Wrapper sketch={sketch} rotation={rotation}/>;
+  return <P5Wrapper sketch={sketch} rotation={rotation} />;
 }
 
 export default App;

docs/eslint.md

@@ -0,0 +1,89 @@
+# ESLint
+
+ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code, including Typescript.
+
+## Packages
+
+We use the following packages:
+
+- `eslint`: This is the core ESLint library.
+- `eslint-plugin-react`: This contains some standard linting rules for React code.
+- `@typescript-eslint/parser`: This allows TypeScript code to be linted.
+- `@typescript-eslint/eslint-plugin`: This contains some standard linting rules for TypeScript code.
+- `eslint-config-prettier`: This turns off all rules that are unnecessary or might conflict with Prettier.
+- `eslint-plugin-prettier`: This runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
+
+## Configuration
+
+ESLint is configured in a `.eslintrc` file in the project root.
+
+The configuration file contains the basic settings for JS files used in the examples:
+
+1. Specify an environment provide browser global variables.
+
+```json
+{
+  "env": {
+    "browser": true
+  }
+}
+```
+
+2. Parser options are set to use ECMAScript 2018 syntax and ECMAScript modules.
+
+```json
+{
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  }
+}
+```
+
+3. Automatically select the React version you have installed.
+
+```json
+{
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}
+```
+
+4. Presets that extend the given ESLint configuration:
+
+- `eslint:recommended`: This is the core eslint recommended rules.
+- `plugin:react/recommended`: This plugin exports a recommended configuration that enforces React good practices.
+- `plugin:prettier/recommended`: This plugin disables all formatting-related ESLint rules, and only enables rules that detect potential bugs. Must be added as the last extension.
+
+We override the following properties for the Typescript related files:
+
+1. A parser that allows ESLint to understand TypeScript syntax.
+
+```json
+{
+  "parser": "@typescript-eslint/parser"
+}
+```
+
+2. Register the installed plugin package for linting TypeScript.
+
+```json
+{
+  "plugins": ["@typescript-eslint"]
+}
+```
+
+3. Presets that extend the given ESLint configuration:
+
+- `plugin:@typescript-eslint/recommended`: This plugin exports all the recommended rules for TypeScript.
+
+## Usage
+
+Run the following script to validate the code:
+
+```
+npm run lint
+```

docs/prettier.md

@@ -0,0 +1,21 @@
+# Prettier
+
+Prettier is a code formatter that enforces a consistent style by parsing the code and re-printing it with its own rules.
+
+## Configuration
+
+There are just a few options that can be configured in Prettier. They can found in a `.prettierrc` file in the project root.
+
+The configuration file contains the following:
+
+- `"trailingComma": "none"`: Print without trailing commas.
+
+See more details in the [documentation](https://prettier.io/docs/en/options.html).
+
+## Usage
+
+Run the following script to format the files with `js`, `jsx`, `ts`, `tsx` and `md` extensions:
+
+```
+npm run format
+```

example/src/app.jsx

@@ -3,30 +3,36 @@ import { render } from "react-dom";
 import P5Wrapper from "../../src";
 import sketch from "./sketches/sketch";
 import sketch2 from "./sketches/sketch2";
-import css from "./example.css";
+import "./example.css";
 
-function App(props) {
-	const [state, setState] = useState({ rotation: 160, sketch });
+function App() {
+  const [state, setState] = useState({ rotation: 160, sketch });
 
-	return (
-		<Fragment>
-			<P5Wrapper sketch={state.sketch} rotation={state.rotation} />
-			<input
-				type="range"
-				defaultValue={state.rotation}
-				min="0"
-				max="360"
-				step="1"
-				onChange={event => setState({ ...state, rotation: event.target.value })}
-			/>
-			<button onClick={
-				event => setState({
-					...state,
-					sketch: state.sketch === sketch ? sketch2 : sketch
-				})
-			}>Change Sketch</button>
-		</Fragment>
-	);
+  return (
+    <Fragment>
+      <P5Wrapper sketch={state.sketch} rotation={state.rotation} />
+      <input
+        type="range"
+        defaultValue={state.rotation}
+        min="0"
+        max="360"
+        step="1"
+        onChange={(event) =>
+          setState({ ...state, rotation: event.target.value })
+        }
+      />
+      <button
+        onClick={() =>
+          setState({
+            ...state,
+            sketch: state.sketch === sketch ? sketch2 : sketch
+          })
+        }
+      >
+        Change Sketch
+      </button>
+    </Fragment>
+  );
 }
 
 render(<App />, document.getElementById("app"));