add eslint

.eslintrc.json

@@ -0,0 +1,13 @@
+{
+  "extends": "google",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "sourceType": "module"
+  },
+  "rules": {
+    "require-jsdoc": "off",
+    "arrow-parens": "off",
+    "object-curly-spacing": "off"
+  },
+  "plugins": ["html"]
+}

package.json

@@ -2,6 +2,9 @@
   "name": "rrweb-player",
   "version": "0.1.0",
   "devDependencies": {
+    "eslint": "^5.7.0",
+    "eslint-config-google": "^0.11.0",
+    "eslint-plugin-html": "^4.0.6",
     "npm-run-all": "^4.1.3",
     "rollup": "^0.66.2",
     "rollup-plugin-commonjs": "^9.1.8",
@@ -18,4 +21,4 @@
     "start": "sirv public",
     "start:dev": "sirv public --dev"
   }
-}
+}

src/App.html

@@ -1,5 +1,5 @@
 <h1>
-	rrweb player playground
+  rrweb player playground
 </h1>
 <Player />
 
@@ -7,11 +7,10 @@
 </style>
 
 <script>
-	import Player from './Player.html';
-
-	export default {
-		components: {
-			Player
-		}
-	}
+  import Player from './Player.html';
+  export default {
+    components: {
+      Player,
+    },
+  };
 </script>

src/Player.html

@@ -1,4 +1,4 @@
-<div class="rr-player">
+<div class="rr-player" { style }>
   rrplayer
 </div>
 
@@ -9,9 +9,23 @@
 </style>
 
 <script>
+  import { inlineCss } from '../util.js';
+
   export default {
     data() {
-      return {}
-    }
-  }
-</script>
+      return {
+        width: 1024,
+        height: 576,
+      };
+    },
+    computed: {
+      style({ width, height }) {
+        return inlineCss({
+          width: `${width}px`,
+          height: `${height}px`,
+        });
+      },
+    },
+  };
+
+</script>

src/main.js

@@ -1,10 +1,10 @@
 import App from './App.html';
 
 const app = new App({
-	target: document.body,
-	data: {
-		name: 'world'
-	}
+  target: document.body,
+  data: {
+    name: 'world',
+  },
 });
 
-export default app;
+export default app;

src/util.js

@@ -0,0 +1,7 @@
+export function inlineCss(cssObj) {
+  let style = '';
+  Object.keys(cssObj).forEach(key => {
+    style += `${key}: ${cssObj[key]};`;
+  });
+  return style;
+}