bundle player as an component

rollup.config.js

@@ -2,19 +2,20 @@ import svelte from 'rollup-plugin-svelte';
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import { terser } from 'rollup-plugin-terser';
+import pkg from './package.json';
 
 const production = !process.env.ROLLUP_WATCH;
 
-export default {
-  input: 'src/main.js',
-  output: {
-    sourcemap: true,
-    format: 'iife',
-    name: 'app',
-    file: 'public/bundle.js',
-  },
+export default [
+  { file: pkg.module, format: 'es' },
+  { file: pkg.main, format: 'iife', name: 'rrwebPlayer' },
+  { file: 'public/bundle.js', format: 'iife', name: 'rrwebPlayer' },
+].map(output => ({
+  input: 'src/Player.html',
+  output,
   plugins: [
     svelte({
+      cascade: false,
       // opt in to v3 behaviour today
       skipIntroByDefault: true,
       nestedTransitions: true,
@@ -24,6 +25,7 @@ export default {
       // we'll extract any component CSS out into
       // a separate file — better for performance
       css: css => {
+        css.write('dist/style.css');
         css.write('public/bundle.css');
       },
     }),
@@ -40,4 +42,4 @@ export default {
     // instead of npm run dev), minify
     production && terser(),
   ],
-};
+}));