Typescript rewrite, upgrade react-three-fiber@2 to @react-three/fiber@7

.babelrc.js

@@ -1,9 +1,8 @@
 module.exports = {
-  presets: ['@babel/env', '@babel/react'],
-  plugins: [
-    ['@babel/plugin-proposal-class-properties'],
-    ['@babel/plugin-proposal-object-rest-spread'],
-    ['transform-react-remove-prop-types', { removeImport: true }],
-    ['@babel/plugin-transform-runtime', { regenerator: false }]
-  ]
+    presets: ['@babel/env', '@babel/react', '@babel/preset-typescript'],
+    plugins: [
+        ['@babel/plugin-proposal-class-properties'],
+        ['@babel/plugin-proposal-object-rest-spread'],
+        ['@babel/plugin-transform-runtime', { regenerator: false }],
+    ],
 };

.editorconfig

@@ -3,7 +3,7 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
+indent_size = 4
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true

.eslintignore

@@ -1,3 +1,4 @@
+
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
 # dependencies
@@ -7,16 +8,22 @@ example/node_modules/**
 # production
 /build
 /dist
+/coverage
 
 # misc
 .DS_Store
 .env
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock*
+package.json*
+CHANGELOG.md*
+README.md*
 
 example/.DS_Store
 example/.env
 example/npm-debug.log*
 example/yarn-debug.log*
-example/yarn-error.log*
+example/yarn-error.log*
+example/yarn.lock*

.eslintrc.js

@@ -1,40 +1,79 @@
+/* eslint-disable sort-keys */
 /**
  * Configure ESLint
  *
  * https://eslint.org/docs/user-guide/configuring
  */
 module.exports = {
-  parser: 'babel-eslint',
-  extends: ['airbnb', 'prettier', 'prettier/react', 'plugin:import/warnings'],
-  env: {
-    es6: true
-  },
-  plugins: ['prettier', 'import', 'react-hooks'],
-  globals: {
-    document: true,
-    window: true,
-    process: true
-  },
-  parserOptions: {
-    sourceType: 'module'
-  },
-  rules: {
-    'react/forbid-prop-types': 0,
-    'react/jsx-filename-extension': 0,
-    'react/react-in-jsx-scope': 0,
-    'class-methods-use-this': 0,
-    'no-unused-expressions': ['error', { allowTaggedTemplates: true }],
-    'react/no-unused-prop-types': 0,
-    'consistent-return': 0,
-    'jsx-a11y/anchor-is-valid': 0,
-    'import/no-extraneous-dependencies': 0,
-    'prettier/prettier': 'error',
-    'react/destructuring-assignment': 0,
-    'react/jsx-props-no-spreading': 0,
-    'react/static-property-placement': 0,
-    // Enforce React Hooks rules
-    // https://www.npmjs.com/package/eslint-plugin-react-hooks
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'warn'
-  }
+    env: {
+        browser: true,
+        es6: true,
+        jest: true,
+    },
+    extends: [
+        'plugin:react/recommended',
+        'plugin:import/warnings',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:prettier/recommended',
+        'prettier',
+    ],
+    globals: {
+        document: true,
+        window: true,
+    },
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        sourceType: 'module',
+    },
+    plugins: [
+        'prettier',
+        'react',
+        'react-hooks',
+        'import',
+        'sort-destructure-keys',
+        '@typescript-eslint',
+    ],
+    root: true,
+    rules: {
+        // Enforce React Hooks rules
+        // https://www.npmjs.com/package/eslint-plugin-react-hooks
+        'react-hooks/rules-of-hooks': 'error',
+        'react-hooks/exhaustive-deps': 'warn',
+
+        'sort-destructure-keys/sort-destructure-keys': [
+            'error',
+            { caseSensitive: false },
+        ],
+        'sort-keys': ['error', 'asc', { caseSensitive: false, natural: false }],
+        'sort-vars': [
+            'error',
+            {
+                ignoreCase: true,
+            },
+        ],
+        'react/jsx-sort-props': ['error', { ignoreCase: true }],
+        '@typescript-eslint/ban-ts-comment': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+        '@typescript-eslint/member-ordering': [
+            'error',
+            {
+                default: {
+                    order: 'alphabetically',
+                },
+                classes: {
+                    order: 'as-written',
+                },
+            },
+        ],
+    },
+    settings: {
+        'import/resolver': {
+            node: true,
+            'eslint-import-resolver-typescript': true,
+        },
+        react: {
+            version: 'detect',
+        },
+    },
 };

.gitignore

@@ -5,9 +5,11 @@
 node_modules
 
 # builds
+coverage
 build
 dist
 .rpt2_cache
+.next
 
 # misc
 .DS_Store
@@ -16,7 +18,6 @@ dist
 .env.development.local
 .env.test.local
 .env.production.local
-.vscode
 
 npm-debug.log*
 yarn-debug.log*

.prettierignore

@@ -1,2 +1,13 @@
 node_modules/**
-example/node_modules/**
+.next/**
+dist/**
+coverage/**
+example/node_modules/**
+example/.next/**
+yarn.lock
+yarn-error.log
+.editorconfig
+.eslintignore
+.gitignore
+.prettierignore
+.browserslistrc

.prettierrc.js

@@ -4,6 +4,7 @@
  * https://prettier.io/docs/en/configuration.html#basic-configuration
  */
 module.exports = {
-  singleQuote: true,
-  semi: true
+    singleQuote: true,
+    semi: true,
+    tabWidth: 4,
 };

.travis.yml

@@ -1,18 +1,18 @@
 language: node_js
 node_js:
-  - 'node'
-  - 'lts/*'
-cache: yarn
-install:
-  - yarn install
-  - yarn link
-  - cd example
-  - yarn link react-particles-webgl
-  - yarn install
-script:
-  - yarn test
-  - yarn build
+    - 'lts/*'
+cache:
+    yarn: true
+    directories:
+        - node_modules
+install: yarn install
+jobs:
+    include:
+        - stage: lint
+          script: yarn lint
+        - stage: build
+          script: yarn build
 branches:
-  only: master
+    only: master
 notifications:
-  email: false
+    email: false

.vscode/settings.json

@@ -4,5 +4,4 @@
     "javascript.validate.enable": false,
     "editor.tabSize": 2,
     "editor.detectIndentation": false
-  }
-
+}

CHANGELOG.md

@@ -6,23 +6,23 @@ All notable changes to this project will be documented in this file.
 
 ### Added
 
-- Upgrade to react-three-fiber v3
+-   Upgrade to react-three-fiber v3
 
 ## [1.0.0]
 
 ### Added
 
-- This changelog
-- Jest testing via Puppeteer
+-   This changelog
+-   Jest testing via Puppeteer
 
 ## [0.5.2] - 2019-3-28
 
 ### Added
 
-- Snowfall preset to demo site
-- `config.direction` prop for controlling particle velocity in x, y, z directions
-- `config.boundaryType` prop for controlling interaction between particles and canvas boundary
+-   Snowfall preset to demo site
+-   `config.direction` prop for controlling particle velocity in x, y, z directions
+-   `config.boundaryType` prop for controlling interaction between particles and canvas boundary
 
 ### Fixed
 
-- Prevent calculating line coords in animation loop if `config.lines.visible` is false
+-   Prevent calculating line coords in animation loop if `config.lines.visible` is false