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",

src/App.html

@@ -8,10 +8,9 @@
 
 <script>
   import Player from './Player.html';
-
   export default {
     components: {
-			Player
+      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 {}
+      return {
-    }
+        width: 1024,
-  }
+        height: 576,
+      };
+    },
+    computed: {
+      style({ width, height }) {
+        return inlineCss({
+          width: `${width}px`,
+          height: `${height}px`,
+        });
+      },
+    },
+  };
+
 </script>

src/main.js

@@ -3,8 +3,8 @@ import App from './App.html';
 const app = new App({
   target: document.body,
   data: {
-		name: 'world'
+    name: 'world',
-	}
+  },
 });
 
 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;
+}