fix #233, Update cookbook library example

Author: znck

cookbook/library/package.json

@@ -3,10 +3,10 @@
   "scripts": {
     "build": "rollup -c --environment BUILD:production"
   },
-  "main": "./dist/MyComponent.ssr.js",
-  "module": "./dist/MyComponent.esm.js",
-  "browser": "./dist/MyComponent.js",
-  "unpkg": "./dist/MyComponent.js",
+  "main": "./dist/library.ssr.js",
+  "module": "./dist/library.esm.js",
+  "browser": "./dist/library.js",
+  "unpkg": "./dist/library.js",
   "devDependencies": {
     "rollup": "^0.59.4",
     "rollup-plugin-css-only": "^0.4.0",

cookbook/library/rollup.config.js

@@ -3,21 +3,21 @@ import vue from 'rollup-plugin-vue'
 export default [
   // ESM build to be used with webpack/rollup.
   {
-    input: 'src/MyComponent.vue',
+    input: 'src/index.js',
     output: {
       format: 'esm',
-      file: 'dist/MyComponent.esm.js'
+      file: 'dist/library.esm.js'
     },
     plugins: [
       vue()
     ]
   },
   // SSR build.
   {
-    input: 'src/MyComponent.vue',
+    input: 'src/index.js',
     output: {
       format: 'cjs',
-      file: 'dist/MyComponent.ssr.js'
+      file: 'dist/library.ssr.js'
     },
     plugins: [
       vue({ template: { optimizeSSR: true } })
@@ -28,7 +28,7 @@ export default [
     input: 'src/wrapper.js',
     output: {
       format: 'iife',
-      file: 'dist/MyComponent.js'
+      file: 'dist/library.js'
     },
     plugins: [
       vue()

cookbook/library/src/OtherComponent.vue

@@ -0,0 +1,17 @@
+<template>
+  <h1>Hello {{ name }}</h1>
+</template>
+
+<script>
+export default {
+  data() {
+    return { name: 'Jane Doe' }
+  }
+}
+</script>
+
+<style scoped>
+h1 {
+  color: red;
+}
+</style>

cookbook/library/src/index.js

@@ -0,0 +1,7 @@
+import MyComponent from './MyComponent.vue'
+import OtherComponent from './OtherComponent.vue'
+
+export {
+  MyComponent,
+  OtherComponent
+}

cookbook/library/src/wrapper.js

@@ -1,5 +1,7 @@
-import MyComponent from './MyComponent.vue'
+import * as components from './index'
 
 if (typeof Vue !== 'undefined') {
-  Vue.component('MyComponent', MyComponent)
+  for (const name in components) {
+    Vue.component(name, components[name])
+  }
 }