From e620dd458f13e0180d69283fe939826edd9df693 Mon Sep 17 00:00:00 2001
From: Moritz Flucht <m.flucht@gmail.com>
Date: Tue, 21 Feb 2017 10:12:17 +0100
Subject: [PATCH 1/2] feat: call custom block loaders with `Component` as
 argument

---
 docs/en/configurations/custom-blocks.md | 70 ++++++++++++++++++++++++-
 lib/loader.js                           |  6 ++-
 test/mock-loaders/docs.js               |  5 ++
 test/test.js                            | 15 ++++++
 4 files changed, 93 insertions(+), 3 deletions(-)
 create mode 100644 test/mock-loaders/docs.js

diff --git a/docs/en/configurations/custom-blocks.md b/docs/en/configurations/custom-blocks.md
index ce833e0cd..434f2685f 100644
--- a/docs/en/configurations/custom-blocks.md
+++ b/docs/en/configurations/custom-blocks.md
@@ -4,9 +4,9 @@
 
 You can define custom language blocks inside `*.vue` files. The content of a custom block will be processed by the loaders specified in the `loaders` object of `vue-loader` options and then required by the component module. The configuration is similar to what is described in [Advanced Loader Configuration](../configurations/advanced.md), except the matching uses the tag name instead of the `lang` attribute.
 
-If a matching loader is found for a custom block, it will be processed; otherwise the custom block will simply be ignored.
+If a matching loader is found for a custom block, it will be processed; otherwise the custom block will simply be ignored. Additionally, if the found loader returns a function, that function will be called with the component of the `*.vue` file as a parameter. 
 
-## Example
+## Single docs file example
 
 Here's an example of extracting all `<docs>` custom blocks into a single docs file:
 
@@ -65,3 +65,69 @@ module.exports = {
   ]
 }
 ```
+
+## Runtime available docs
+
+Here's an example of injecting the `<docs>` custom blocks into the component so that it's available during runtime.
+
+#### docs-loader.js 
+
+In order for the custom block content to be injected, we'll need a custom loader: 
+
+``` js
+module.exports = function (source, map) {
+  this.callback(null, 'module.exports = function(Component) {Component.options.__docs = ' +
+    JSON.stringify(source) +
+    '}', map)
+}
+```
+
+#### webpack.config.js
+
+Now we'll configure webpack to use our custom loader for `<docs>` custom blocks.
+
+``` js
+const docsLoader = require.resolve('./custom-loaders/docs-loader.js')
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue',
+        options: {
+          loaders: {
+            'docs': docsLoader
+          }
+        }
+      }
+    ]
+  }
+}
+```
+
+#### component.vue
+
+We are now able to access the `<docs>` block's content of imported components during runtime. 
+
+``` html
+<template>
+  <div>
+    <component-b \>
+    <p>{{ docs }}</p>
+  </div>
+</template>
+
+<script>
+import componentB from 'componentB';
+
+export default = {
+  data () {
+    return {
+      docs: componentB.__docs
+    }
+  },
+  components: {componentB}
+}
+</script>
+```
diff --git a/lib/loader.js b/lib/loader.js
index 7778a3858..846c78ba8 100644
--- a/lib/loader.js
+++ b/lib/loader.js
@@ -411,7 +411,11 @@ module.exports = function (content) {
           addedPrefix = true
         }
 
-        output += requireString + '\n'
+        output +=
+          'var customBlock = ' + requireString + '\n' +
+          'if (typeof customBlock === "function") {' +
+            'customBlock(Component)' +
+          '}\n'
       }
     })
 
diff --git a/test/mock-loaders/docs.js b/test/mock-loaders/docs.js
new file mode 100644
index 000000000..0324773f8
--- /dev/null
+++ b/test/mock-loaders/docs.js
@@ -0,0 +1,5 @@
+module.exports = function (source, map) {
+  this.callback(null, 'module.exports = function(Component) {Component.options.__docs = ' +
+    JSON.stringify(source) +
+    '}', map)
+}
\ No newline at end of file
diff --git a/test/test.js b/test/test.js
index 6153927c0..6da63d98a 100644
--- a/test/test.js
+++ b/test/test.js
@@ -634,6 +634,21 @@ describe('vue-loader', function () {
     })
   })
 
+  it('passes Component to custom block loaders', done => {
+    const mockLoaderPath = require.resolve('./mock-loaders/docs')
+    test({
+      entry: './test/fixtures/custom-language.vue',
+      vue: {
+        loaders: {
+          'documentation': mockLoaderPath
+        }
+      }
+    }, (window, module) => {
+      expect(module.__docs).to.contain('This is example documentation for a component.')
+      done()
+    })
+  })
+
   it('custom blocks can be ignored', done => {
     bundle({
       entry: './test/fixtures/custom-language.vue'

From a8a3aafd85412519a5edd8f64f40cbee23263bf0 Mon Sep 17 00:00:00 2001
From: Moritz Flucht <m.flucht@gmail.com>
Date: Thu, 2 Mar 2017 16:15:17 +0100
Subject: [PATCH 2/2] style: add missing eof newline

---
 test/mock-loaders/docs.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/mock-loaders/docs.js b/test/mock-loaders/docs.js
index 0324773f8..5dc582a77 100644
--- a/test/mock-loaders/docs.js
+++ b/test/mock-loaders/docs.js
@@ -2,4 +2,4 @@ module.exports = function (source, map) {
   this.callback(null, 'module.exports = function(Component) {Component.options.__docs = ' +
     JSON.stringify(source) +
     '}', map)
-}
\ No newline at end of file
+}