Chore: Add issue/pr template and general housekeeping tools and docs (#900)

* Add linting

* Add issue templates and docs

* Add root eslint config and remove tslint

* Autofix lint issues

packages/rrweb-player/.eslintrc.json

@@ -1,25 +1,22 @@
 {
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": 2019,
-    "sourceType": "module"
-  },
+  "extends": ["../../.eslintrc.js"],
   "rules": {
     "require-jsdoc": "off",
     "arrow-parens": "off",
     "object-curly-spacing": "off",
     "indent": "off"
   },
-  "env": {
-    "es6": true,
-    "browser": true
+  "parserOptions": {
+    "extraFileExtensions": [".svelte"]
   },
-  "plugins": ["svelte3", "@typescript-eslint"],
+  "plugins": ["svelte3"],
   "overrides": [
     {
       "files": ["*.svelte"],
       "processor": "svelte3/svelte3"
     }
-  ]
+  ],
+  "settings": {
+    "svelte3/typescript": true
+  }
 }

packages/rrweb-player/package.json

@@ -6,11 +6,8 @@
     "@rollup/plugin-node-resolve": "^13.2.1",
     "@rollup/plugin-typescript": "^8.3.2",
     "@types/offscreencanvas": "^2019.6.4",
-    "@typescript-eslint/eslint-plugin": "^3.7.0",
-    "@typescript-eslint/parser": "^3.7.0",
-    "eslint": "^7.5.0",
-    "eslint-config-google": "^0.11.0",
-    "eslint-plugin-svelte3": "^2.7.3",
+    "eslint-config-google": "^0.14.0",
+    "eslint-plugin-svelte3": "^4.0.0",
     "postcss-easy-import": "^3.0.0",
     "rollup": "^2.71.1",
     "rollup-plugin-css-only": "^3.1.0",
@@ -35,7 +32,8 @@
     "prepublishOnly": "yarn build",
     "start": "sirv public",
     "validate": "svelte-check",
-    "prepublish": "yarn build"
+    "prepublish": "yarn build",
+    "lint": "yarn eslint src/**/*.ts"
   },
   "description": "rrweb's replayer UI",
   "main": "lib/index.js",

packages/rrweb-player/src/Controller.svelte

@@ -186,20 +186,20 @@
   };
 
   export const triggerUpdateMeta = () => {
-    Promise.resolve().then(() => {
+    return Promise.resolve().then(() => {
       meta = replayer.getMetaData();
     })
   }
 
   onMount(() => {
-    playerState = replayer.service.state.value as typeof playerState;
-    speedState = replayer.speedService.state.value as typeof speedState;
+    playerState = replayer.service.state.value;
+    speedState = replayer.speedService.state.value ;
     replayer.on(
       'state-change',
       (states: { player?: PlayerMachineState; speed?: SpeedMachineState }) => {
         const { player, speed } = states;
         if (player?.value && playerState !== player.value) {
-          playerState = player.value as typeof playerState;
+          playerState = player.value ;
           switch (playerState) {
             case 'playing':
               loopTimer();
@@ -212,7 +212,7 @@
           }
         }
         if (speed?.value && speedState !== speed.value) {
-          speedState = speed.value as typeof speedState;
+          speedState = speed.value ;
         }
       },
     );
@@ -338,7 +338,7 @@
         class="rr-progress"
         class:disabled={speedState === 'skipping'}
         bind:this={progress}
-        on:click={(event) => handleProgressClick(event)}>
+        on:click={handleProgressClick}>
         <div
           class="rr-progress__step"
           bind:this={step}

packages/rrweb-player/src/Player.svelte

@@ -12,14 +12,14 @@
   } from './utils';
   import Controller from './Controller.svelte';
 
-  export let width: number = 1024;
-  export let height: number = 576;
+  export let width = 1024;
+  export let height = 576;
   export let events: eventWithTime[] = [];
-  export let skipInactive: boolean = true;
-  export let autoPlay: boolean = true;
+  export let skipInactive = true;
+  export let autoPlay = true;
   export let speedOption: number[] = [1, 2, 4, 8];
-  export let speed: number = 1;
-  export let showController: boolean = true;
+  export let speed = 1;
+  export let showController = true;
   export let tags: Record<string, string> = {};
 
   let replayer: Replayer;

packages/rrweb-player/src/utils.ts

@@ -28,7 +28,7 @@ function padZero(num: number, len = 2): string {
   const threshold = Math.pow(10, len - 1);
   if (num < threshold) {
     while (String(threshold).length > str.length) {
-      str = '0' + num;
+      str = `0${num}`;
     }
   }
   return str;