Add eslint and prettier configs

.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ['plugin:react/recommended', 'prettier'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint', 'prettier'],
+  rules: {
+    '@typescript-eslint/no-unused-vars': 'error',
+    'prefer-const': ['warn', { destructuring: 'all' }],
+    'no-var': 'error',
+    eqeqeq: ['error', 'smart'],
+  },
+};

.github/workflows/tests.yml

@@ -9,5 +9,7 @@ jobs:
         uses: actions/checkout@v2
       - name: Install Modules
         run: npm ci
+      - name: Run Linter
+        run: npm run lint
       - name: Run Tests
         run: npm test

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "printWidth": 80
+}

README.md

@@ -1 +1 @@
-# rive-react
+# rive-react

jest.config.js

@@ -1,11 +1,11 @@
 module.exports = {
-  preset: "ts-jest",
-  testRegex: "/test/.*\\.test\\.tsx$",
-  setupFilesAfterEnv: ["<rootDir>/setupTests.ts"],
-  testEnvironment: "jsdom",
+  preset: 'ts-jest',
+  testRegex: '/test/.*\\.test\\.tsx$',
+  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
+  testEnvironment: 'jsdom',
   globals: {
-    "ts-jest": {
-      tsconfig: "tsconfig.test.json",
+    'ts-jest': {
+      tsconfig: 'tsconfig.test.json',
     },
   },
 };

package.json

@@ -6,7 +6,9 @@
   "typings": "dist/types/index.d.ts",
   "scripts": {
     "test": "jest",
-    "build": "bunchee src/index.ts -m --no-sourcemap"
+    "build": "bunchee src/index.ts -m --no-sourcemap",
+    "lint": "eslint -c .eslintrc.js 'src/**/*{.ts,.tsx}'",
+    "format": "prettier --write src"
   },
   "repository": {
     "type": "git",
@@ -30,8 +32,19 @@
     "@types/jest": "^26.0.23",
     "@types/react": "^17.0.9",
     "@types/testing-library__jest-dom": "^5.9.5",
+    "@typescript-eslint/eslint-plugin": "^4.26.0",
+    "@typescript-eslint/parser": "^4.26.0",
     "bunchee": "^1.6.0",
+    "eslint": "^7.28.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-react": "^7.24.0",
     "jest": "^27.0.4",
+    "prettier": "^2.3.1",
     "ts-jest": "^27.0.2"
   }
 }

setupTests.ts

@@ -1,4 +1,4 @@
-import "@testing-library/jest-dom";
+import '@testing-library/jest-dom';
 
 window.IntersectionObserver = class IntersectionObserver {
   readonly root: Element | null;
@@ -9,7 +9,7 @@ window.IntersectionObserver = class IntersectionObserver {
 
   constructor() {
     this.root = null;
-    this.rootMargin = "";
+    this.rootMargin = '';
     this.thresholds = [];
   }
 
@@ -24,20 +24,20 @@ window.IntersectionObserver = class IntersectionObserver {
   unobserve() {}
 };
 
-jest.mock("rive-js", () => ({
+jest.mock('rive-js', () => ({
   Rive: jest.fn().mockImplementation(() => ({
     on: jest.fn(),
     stop: jest.fn(),
   })),
   Layout: jest.fn(),
   Fit: {
-    Cover: "cover",
+    Cover: 'cover',
   },
   Alignment: {
-    Center: "center",
+    Center: 'center',
   },
   EventType: {
-    Load: "load",
+    Load: 'load',
   },
   StateMachineInputType: {
     Number: 1,

src/components/Rive.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-import { Layout } from "rive-js";
-import { ComponentProps } from "react";
-import useRive from "../hooks/useRive";
+import { Layout } from 'rive-js';
+import React, { ComponentProps } from 'react';
+import useRive from '../hooks/useRive';
 
 export type RiveProps = {
   src: string;
@@ -18,7 +17,7 @@ const Rive = ({
   layout,
   autoplay,
   ...rest
-}: RiveProps & ComponentProps<"div">) => {
+}: RiveProps & ComponentProps<'div'>) => {
   const params = {
     src,
     artboard,

src/hooks/useRive.tsx

@@ -5,15 +5,15 @@ import React, {
   useState,
   ComponentProps,
   RefCallback,
-} from "react";
-import { Rive, EventType } from "rive-js";
+} from 'react';
+import { Rive, EventType } from 'rive-js';
 import {
   UseRiveParameters,
   UseRiveOptions,
   RiveState,
   Dimensions,
-} from "../types";
-import { useWindowSize } from "../utils";
+} from '../types';
+import { useWindowSize } from '../utils';
 
 type RiveComponentProps = {
   setContainerRef: RefCallback<HTMLElement>;
@@ -24,16 +24,16 @@ function RiveComponent({
   setContainerRef,
   setCanvasRef,
   ...rest
-}: RiveComponentProps & ComponentProps<"div">) {
+}: RiveComponentProps & ComponentProps<'div'>) {
   const containerStyle = {
-    width: "100%",
-    height: "100%",
+    width: '100%',
+    height: '100%',
   };
 
   return (
     <div
       ref={setContainerRef}
-      style={"className" in rest ? undefined : containerStyle}
+      style={'className' in rest ? undefined : containerStyle}
       {...rest}
     >
       <canvas ref={setCanvasRef} />
@@ -122,14 +122,14 @@ export default function useRive(
       width !== dimensions.width || height !== dimensions.height;
     if (canvasRef.current && rive && boundsChanged) {
       if (options.fitCanvasToArtboardHeight) {
-        containerRef.current.style.height = height + "px";
+        containerRef.current.style.height = height + 'px';
       }
       if (options.useDevicePixelRatio) {
         const dpr = window.devicePixelRatio || 1;
         canvasRef.current.width = dpr * width;
         canvasRef.current.height = dpr * height;
-        canvasRef.current.style.width = width + "px";
-        canvasRef.current.style.height = height + "px";
+        canvasRef.current.style.width = width + 'px';
+        canvasRef.current.style.height = height + 'px';
       } else {
         canvasRef.current.width = width;
         canvasRef.current.height = height;
@@ -218,7 +218,7 @@ export default function useRive(
     };
   }, [rive]);
 
-  const Component = useCallback((props: ComponentProps<"div">): JSX.Element => {
+  const Component = useCallback((props: ComponentProps<'div'>): JSX.Element => {
     return (
       <RiveComponent
         setContainerRef={setContainerRef}

src/hooks/useStateMachineInput.ts

@@ -1,5 +1,5 @@
-import { useState, useEffect } from "react";
-import { Rive, StateMachineInput } from "rive-js";
+import { useState, useEffect } from 'react';
+import { Rive, StateMachineInput } from 'rive-js';
 
 /**
  * Custom hook for fetching a stateMachine input from a rive file.

src/index.ts

@@ -1,7 +1,7 @@
-import Rive from "./components/Rive";
-import useRive from "./hooks/useRive";
-import useStateMachineInput from "./hooks/useStateMachineInput";
+import Rive from './components/Rive';
+import useRive from './hooks/useRive';
+import useStateMachineInput from './hooks/useStateMachineInput';
 
 export default Rive;
 export { useRive, useStateMachineInput };
-export { RiveState, UseRiveParameters, UseRiveOptions } from "./types";
+export { RiveState, UseRiveParameters, UseRiveOptions } from './types';

src/types.ts

@@ -1,7 +1,7 @@
-import { RefCallback, ComponentProps } from "react";
-import { Rive, RiveParameters } from "rive-js";
+import { RefCallback, ComponentProps } from 'react';
+import { Rive, RiveParameters } from 'rive-js';
 
-export type UseRiveParameters = Partial<Omit<RiveParameters, "canvas">> | null;
+export type UseRiveParameters = Partial<Omit<RiveParameters, 'canvas'>> | null;
 
 export type UseRiveOptions = {
   useDevicePixelRatio: boolean;
@@ -28,5 +28,5 @@ export type RiveState = {
   setCanvasRef: RefCallback<HTMLCanvasElement>;
   setContainerRef: RefCallback<HTMLElement>;
   rive: Rive | null;
-  RiveComponent: (props: ComponentProps<"div">) => JSX.Element;
+  RiveComponent: (props: ComponentProps<'div'>) => JSX.Element;
 };

src/utils.ts

@@ -1,5 +1,5 @@
-import { useState, useEffect } from "react";
-import { Dimensions } from "./types";
+import { useState, useEffect } from 'react';
+import { Dimensions } from './types';
 
 export function useWindowSize() {
   const [windowSize, setWindowSize] = useState<Dimensions>({
@@ -8,16 +8,16 @@ export function useWindowSize() {
   });
 
   useEffect(() => {
-    if (typeof window !== "undefined") {
+    if (typeof window !== 'undefined') {
       const handleResize = () => {
         setWindowSize({
           width: window.innerWidth,
           height: window.innerHeight,
         });
       };
-      window.addEventListener("resize", handleResize);
+      window.addEventListener('resize', handleResize);
       handleResize();
-      return () => window.removeEventListener("resize", handleResize);
+      return () => window.removeEventListener('resize', handleResize);
     }
   }, []);
   return windowSize;

test/useRive.test.tsx

@@ -1,23 +1,23 @@
-import { renderHook, act } from "@testing-library/react-hooks";
-import { mocked } from "ts-jest/utils";
+import { renderHook, act } from '@testing-library/react-hooks';
+import { mocked } from 'ts-jest/utils';
 
-import useRive from "../src/hooks/useRive";
-import * as rive from "rive-js";
+import useRive from '../src/hooks/useRive';
+import * as rive from 'rive-js';
 
-jest.mock("rive-js", () => ({
+jest.mock('rive-js', () => ({
   Rive: jest.fn().mockImplementation(() => ({
     on: jest.fn(),
     stop: jest.fn(),
   })),
   Layout: jest.fn(),
   Fit: {
-    Cover: "cover",
+    Cover: 'cover',
   },
   Alignment: {
-    Center: "center",
+    Center: 'center',
   },
   EventType: {
-    Load: "load",
+    Load: 'load',
   },
   StateMachineInputType: {
     Number: 1,
@@ -26,16 +26,16 @@ jest.mock("rive-js", () => ({
   },
 }));
 
-describe("useRive", () => {
-  it("returns rive as null if no params are passed", () => {
+describe('useRive', () => {
+  it('returns rive as null if no params are passed', () => {
     const { result } = renderHook(() => useRive());
     expect(result.current.rive).toBe(null);
     expect(result.current.canvas).toBe(null);
   });
 
-  it("returns a rive object if the src object is set on the rive params and setCanvas is called", async () => {
+  it('returns a rive object if the src object is set on the rive params and setCanvas is called', async () => {
     const params = {
-      src: "file-src",
+      src: 'file-src',
     };
 
     const riveMock = {
@@ -47,7 +47,7 @@ describe("useRive", () => {
     // @ts-ignore
     mocked(rive.Rive).mockImplementation(() => riveMock);
 
-    const canvasSpy = document.createElement("canvas");
+    const canvasSpy = document.createElement('canvas');
     const { result } = renderHook(() => useRive(params));
 
     await act(async () => {
@@ -58,9 +58,9 @@ describe("useRive", () => {
     expect(result.current.canvas).toBe(canvasSpy);
   });
 
-  it("updates the bounds if the container ref is set", async () => {
+  it('updates the bounds if the container ref is set', async () => {
     const params = {
-      src: "file-src",
+      src: 'file-src',
     };
 
     const resizeToCanvasMock = jest.fn();
@@ -75,8 +75,8 @@ describe("useRive", () => {
     // @ts-ignore
     mocked(rive.Rive).mockImplementation(() => riveMock);
 
-    const canvasSpy = document.createElement("canvas");
-    const containerSpy = document.createElement("div");
+    const canvasSpy = document.createElement('canvas');
+    const containerSpy = document.createElement('div');
     const { result } = renderHook(() => useRive(params));
 
     await act(async () => {
@@ -90,9 +90,9 @@ describe("useRive", () => {
     expect(resizeToCanvasMock).toBeCalled();
   });
 
-  it("stops the rive object on unmount", async () => {
+  it('stops the rive object on unmount', async () => {
     const params = {
-      src: "file-src",
+      src: 'file-src',
     };
 
     const stopMock = jest.fn();
@@ -105,7 +105,7 @@ describe("useRive", () => {
     // @ts-ignore
     mocked(rive.Rive).mockImplementation(() => riveMock);
 
-    const canvasSpy = document.createElement("canvas");
+    const canvasSpy = document.createElement('canvas');
     const { result, unmount } = renderHook(() => useRive(params));
 
     await act(async () => {
@@ -117,9 +117,9 @@ describe("useRive", () => {
     expect(stopMock).toBeCalled();
   });
 
-  it("sets the a bounds with the devicePixelRatio by default", async () => {
+  it('sets the a bounds with the devicePixelRatio by default', async () => {
     const params = {
-      src: "file-src",
+      src: 'file-src',
     };
 
     global.devicePixelRatio = 2;
@@ -132,8 +132,8 @@ describe("useRive", () => {
     // @ts-ignore
     mocked(rive.Rive).mockImplementation(() => riveMock);
 
-    const canvasSpy = document.createElement("canvas");
-    const containerSpy = document.createElement("div");
+    const canvasSpy = document.createElement('canvas');
+    const containerSpy = document.createElement('div');
     containerSpy.getBoundingClientRect = jest.fn().mockImplementation(() => ({
       width: 100,
       height: 100,
@@ -148,17 +148,17 @@ describe("useRive", () => {
 
     // Height and width should be 2* the width and height returned from containers
     // bounding rect
-    expect(canvasSpy).toHaveAttribute("height", "200");
-    expect(canvasSpy).toHaveAttribute("width", "200");
+    expect(canvasSpy).toHaveAttribute('height', '200');
+    expect(canvasSpy).toHaveAttribute('width', '200');
 
     // Style height and width should be the same as returned from containers
     // bounding rect
-    expect(canvasSpy).toHaveAttribute("style", "width: 100px; height: 100px;");
+    expect(canvasSpy).toHaveAttribute('style', 'width: 100px; height: 100px;');
   });
 
-  it("sets the a bounds without the devicePixelRatio if useDevicePixelRatio is false", async () => {
+  it('sets the a bounds without the devicePixelRatio if useDevicePixelRatio is false', async () => {
     const params = {
-      src: "file-src",
+      src: 'file-src',
     };
     const opts = {
       useDevicePixelRatio: false,
@@ -172,8 +172,8 @@ describe("useRive", () => {
     // @ts-ignore
     mocked(rive.Rive).mockImplementation(() => riveMock);
 
-    const canvasSpy = document.createElement("canvas");
-    const containerSpy = document.createElement("div");
+    const canvasSpy = document.createElement('canvas');
+    const containerSpy = document.createElement('div');
     containerSpy.getBoundingClientRect = jest.fn().mockImplementation(() => ({
       width: 100,
       height: 100,
@@ -187,13 +187,13 @@ describe("useRive", () => {
     });
 
     // Height and width should be same as containers bounding rect
-    expect(canvasSpy).toHaveAttribute("height", "100");
-    expect(canvasSpy).toHaveAttribute("width", "100");
+    expect(canvasSpy).toHaveAttribute('height', '100');
+    expect(canvasSpy).toHaveAttribute('width', '100');
   });
 
-  it("uses artbound height to set bounds if fitCanvasToArtboardHeight is true", async () => {
+  it('uses artbound height to set bounds if fitCanvasToArtboardHeight is true', async () => {
     const params = {
-      src: "file-src",
+      src: 'file-src',
     };
     const opts = {
       useDevicePixelRatio: false,
@@ -212,8 +212,8 @@ describe("useRive", () => {
     // @ts-ignore
     mocked(rive.Rive).mockImplementation(() => riveMock);
 
-    const canvasSpy = document.createElement("canvas");
-    const containerSpy = document.createElement("div");
+    const canvasSpy = document.createElement('canvas');
+    const containerSpy = document.createElement('div');
     containerSpy.getBoundingClientRect = jest.fn().mockImplementation(() => ({
       width: 100,
       height: 100,
@@ -227,16 +227,16 @@ describe("useRive", () => {
     });
 
     // Height and width should be same as containers bounding rect
-    expect(canvasSpy).toHaveAttribute("height", "50");
-    expect(canvasSpy).toHaveAttribute("width", "100");
+    expect(canvasSpy).toHaveAttribute('height', '50');
+    expect(canvasSpy).toHaveAttribute('width', '100');
 
     // Container should have style set to height
-    expect(containerSpy).toHaveAttribute("style", "height: 50px;");
+    expect(containerSpy).toHaveAttribute('style', 'height: 50px;');
   });
 
-  it("configures a IntersectionObserver on mounting", async () => {
+  it('configures a IntersectionObserver on mounting', async () => {
     const params = {
-      src: "file-src",
+      src: 'file-src',
     };
 
     const observeMock = jest.fn();
@@ -257,7 +257,7 @@ describe("useRive", () => {
     // @ts-ignore
     mocked(rive.Rive).mockImplementation(() => riveMock);
 
-    const canvasSpy = document.createElement("canvas");
+    const canvasSpy = document.createElement('canvas');
 
     const { result } = renderHook(() => useRive(params));