From 0064462c39b16001eedf0698cb28378127a624e4 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Mon, 6 May 2019 10:49:25 +0800
Subject: [PATCH] Use
 https://github.com/d2-projects/d2-advance/tree/master/tools/vue-filename-injector

Former-commit-id: a29546c3c7db3bd054f5152ee83090ac867c3ef6 [formerly a29546c3c7db3bd054f5152ee83090ac867c3ef6 [formerly a29546c3c7db3bd054f5152ee83090ac867c3ef6 [formerly a29546c3c7db3bd054f5152ee83090ac867c3ef6 [formerly 188d1c6292e0d7f7f03006204bf273ac9a2f9977 [formerly fed4de2ac75aaaef6f53e956eeefa9ffb1f9488e]]]]]
Former-commit-id: c92e5a290e02f7bd42c900fe876b5c39a3c65b96
Former-commit-id: 03cc8603d0c0ea41061c93d148ccd27392a734b7
Former-commit-id: 386bcbbd1cda7d937586276d44c6700bd5f2179c [formerly 97afb45274677dd9fd150820ac013841c5c57ffd]
Former-commit-id: 690a6d79c1150a087f44f9e04fcfd6ddd0533104
Former-commit-id: 9733ed87d2468567430f9ab12974456ed41d1ba8
Former-commit-id: 565f61c0bde06f9f595cb1ee17474d09f1e64345
Former-commit-id: 316ed7256b3a814848af2651a057b7ae910f3421
Former-commit-id: 6d583d013f77297bf905b8b84bd5808b08db14c7
---
 .../d2-container/components/d2-source.vue     |  2 +-
 tools/vue-filename-injector/README.md         | 26 ++++++++++++++++
 tools/vue-filename-injector/index.js          |  2 ++
 tools/vue-filename-injector/src/index.js      | 18 +++++++++++
 tools/vue-filename-injector/src/lib/config.js |  7 +++++
 .../vue-filename-injector/src/lib/injector.js | 30 +++++++++++++++++++
 tools/vue-filename-injector/src/lib/loader.js |  3 ++
 vue.config.js                                 | 13 ++++----
 8 files changed, 92 insertions(+), 9 deletions(-)
 create mode 100755 tools/vue-filename-injector/README.md
 create mode 100755 tools/vue-filename-injector/index.js
 create mode 100755 tools/vue-filename-injector/src/index.js
 create mode 100755 tools/vue-filename-injector/src/lib/config.js
 create mode 100755 tools/vue-filename-injector/src/lib/injector.js
 create mode 100755 tools/vue-filename-injector/src/lib/loader.js

diff --git a/src/components/d2-container/components/d2-source.vue b/src/components/d2-container/components/d2-source.vue
index 1ba8f125..a9c1dea3 100644
--- a/src/components/d2-container/components/d2-source.vue
+++ b/src/components/d2-container/components/d2-source.vue
@@ -25,7 +25,7 @@ export default {
   watch: {
     $route: {
       handler (to) {
-        this.path = get(last(to.matched), 'components.default.__file')
+        this.path = get(last(to.matched), 'components.default.__source')
       },
       immediate: true
     }
diff --git a/tools/vue-filename-injector/README.md b/tools/vue-filename-injector/README.md
new file mode 100755
index 00000000..5f2f84a9
--- /dev/null
+++ b/tools/vue-filename-injector/README.md
@@ -0,0 +1,26 @@
+# Vue Filename Injector
+
+Inject the file path of the `.vue` on `this.$options.__source`.
+
+## Usage
+
+`vue.config.js`:
+
+``` js
+const VueFilenameInjector = require('./path/to/vue-filename-injector')
+
+module.exports = {
+
+  chainWebpack: config => {
+    // only with chainWebpack
+    VueFilenameInjector(config, {
+      propName: '__source' // default
+    })
+  }
+}
+```
+
+## Relevant
+
+https://github.com/neutrinojs/webpack-chain
+https://vue-loader.vuejs.org/guide/custom-blocks.html
diff --git a/tools/vue-filename-injector/index.js b/tools/vue-filename-injector/index.js
new file mode 100755
index 00000000..8a97e45a
--- /dev/null
+++ b/tools/vue-filename-injector/index.js
@@ -0,0 +1,2 @@
+const all = require('./src/index.js')
+module.exports = all
diff --git a/tools/vue-filename-injector/src/index.js b/tools/vue-filename-injector/src/index.js
new file mode 100755
index 00000000..52885180
--- /dev/null
+++ b/tools/vue-filename-injector/src/index.js
@@ -0,0 +1,18 @@
+const { blockName } = require('./lib/config.js')
+
+// for chainWebpack
+module.exports = function(config, options) {
+  config.module
+    .rule('vue')
+    .use('vue-filename-injector')
+    .loader(require.resolve('./lib/injector.js'))
+    .options(options)
+    .after('vue-loader')
+    .end()
+  config.module
+    .rule('')
+    .resourceQuery(new RegExp(`blockType=${blockName}`))
+    .use('vue-filename-injector-loader')
+    .loader(require.resolve('./lib/loader.js'))
+    .end()
+}
diff --git a/tools/vue-filename-injector/src/lib/config.js b/tools/vue-filename-injector/src/lib/config.js
new file mode 100755
index 00000000..7910167a
--- /dev/null
+++ b/tools/vue-filename-injector/src/lib/config.js
@@ -0,0 +1,7 @@
+const defaultPropName = '__source'
+const blockName = 'vue-filename-injector'
+
+module.exports = {
+  defaultPropName,
+  blockName
+}
diff --git a/tools/vue-filename-injector/src/lib/injector.js b/tools/vue-filename-injector/src/lib/injector.js
new file mode 100755
index 00000000..390dd9c8
--- /dev/null
+++ b/tools/vue-filename-injector/src/lib/injector.js
@@ -0,0 +1,30 @@
+const path = require('path')
+const loaderUtils = require('loader-utils')
+
+const { blockName, defaultPropName } = require('./config.js')
+
+module.exports = function (content /*, map, meta */) {
+  const loaderContext = this
+
+  const {
+    rootContext,
+    resourcePath
+  } = loaderContext
+
+  const context = rootContext || process.cwd()
+  const options = loaderUtils.getOptions(loaderContext) || {}
+  const rawShortFilePath = path
+    .relative(context, resourcePath)
+    .replace(/^(\.\.[\/\\])+/, '')
+
+  const propName = options.propName || defaultPropName
+
+  content += `
+<${blockName}>
+export default function (Component) {
+  Component.options.${propName} = ${JSON.stringify(rawShortFilePath.replace(/\\/g, '/'))}
+}
+</${blockName}>
+`
+  return content
+}
diff --git a/tools/vue-filename-injector/src/lib/loader.js b/tools/vue-filename-injector/src/lib/loader.js
new file mode 100755
index 00000000..1590b7f4
--- /dev/null
+++ b/tools/vue-filename-injector/src/lib/loader.js
@@ -0,0 +1,3 @@
+module.exports = function (source, map) {
+  this.callback(null, source, map)
+}
diff --git a/vue.config.js b/vue.config.js
index 22eac148..55b6ed1e 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,4 +1,6 @@
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const VueFilenameInjector = require('./tools/vue-filename-injector')
+
 
 // 拼接路径
 const resolve = dir => require('path').join(__dirname, dir)
@@ -46,14 +48,9 @@ module.exports = {
       )
       // TRAVIS 构建 vue-loader 添加 filename
       .when(process.env.VUE_APP_BUILD_MODE === 'TRAVIS' || process.env.NODE_ENV === 'development',
-        config => config.module
-          .rule('vue')
-          .use('vue-loader')
-          .loader('vue-loader')
-          .tap(options => {
-            options.exposeFilename = true
-            return options
-          })
+        VueFilenameInjector(config, {
+          propName: process.env.VUE_APP_SOURCE_VIEWER_PROP_NAME
+        })
       )
       // 非开发环境
       .when(process.env.NODE_ENV !== 'development', config => {