From f169677a80df42acc8991f3f486069e365100250 Mon Sep 17 00:00:00 2001 From: Hiroki Osame Date: Tue, 29 May 2018 16:12:33 +0900 Subject: [PATCH 1/6] feat: inherit queries --- lib/index.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/lib/index.js b/lib/index.js index 6225a2aa7..e1b23760a 100644 --- a/lib/index.js +++ b/lib/index.js @@ -34,7 +34,8 @@ module.exports = function (source) { resourceQuery } = loaderContext - const incomingQuery = qs.parse(resourceQuery.slice(1)) + const rawQuery = resourceQuery.slice(1) + const incomingQuery = qs.parse(rawQuery) const options = loaderUtils.getOptions(loaderContext) || {} const isServer = target === 'node' @@ -86,7 +87,8 @@ module.exports = function (source) { const idQuery = `&id=${id}` const scopedQuery = hasScoped ? `&scoped=true` : `` const attrsQuery = attrsToQuery(descriptor.template.attrs) - const query = `?vue&type=template${idQuery}${scopedQuery}${attrsQuery}` + const query = `?vue&type=template${idQuery}${scopedQuery}${attrsQuery}&${rawQuery}` + console.log('template', query) const request = templateRequest = stringifyRequest(src + query) templateImport = `import { render, staticRenderFns } from ${request}` } @@ -96,7 +98,8 @@ module.exports = function (source) { if (descriptor.script) { const src = descriptor.script.src || resourcePath const attrsQuery = attrsToQuery(descriptor.script.attrs, 'js') - const query = `?vue&type=script${attrsQuery}` + const query = `?vue&type=script${attrsQuery}&${rawQuery}` + console.log('script', query) const request = stringifyRequest(src + query) scriptImport = ( `import script from ${request}\n` + From b8a5d97718e29f420e6f053b671f5bf6301a24ac Mon Sep 17 00:00:00 2001 From: Hiroki Osame Date: Tue, 29 May 2018 16:29:15 +0900 Subject: [PATCH 2/6] Include query in shortFilePath --- lib/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/index.js b/lib/index.js index e1b23760a..54e794c73 100644 --- a/lib/index.js +++ b/lib/index.js @@ -62,7 +62,9 @@ module.exports = function (source) { // module id for scoped CSS & hot-reload const shortFilePath = path .relative(context, resourcePath) - .replace(/^(\.\.[\\\/])+/, '') + .replace(/^(\.\.[\\\/])+/, '') + + resourceQuery + const id = hash( isProduction ? (shortFilePath + '\n' + source) From a630dc2792c53c7a5716330bd9849d30781a4c9e Mon Sep 17 00:00:00 2001 From: Hiroki Osame Date: Tue, 29 May 2018 16:46:02 +0900 Subject: [PATCH 3/6] Added raw query to custom-blocks and style --- lib/codegen/customBlocks.js | 3 ++- lib/codegen/styleInjection.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/lib/codegen/customBlocks.js b/lib/codegen/customBlocks.js index 593a2e221..30faa83fb 100644 --- a/lib/codegen/customBlocks.js +++ b/lib/codegen/customBlocks.js @@ -10,7 +10,8 @@ module.exports = function genCustomBlocksCode ( const src = block.attrs.src || resourcePath const attrsQuery = attrsToQuery(block.attrs) const issuerQuery = block.attrs.src ? `&issuerPath=${qs.escape(resourcePath)}` : '' - const query = `?vue&type=custom&index=${i}&blockType=${qs.escape(block.type)}${issuerQuery}${attrsQuery}` + const rawQuery = this.resourceQuery.slice(1) + const query = `?vue&type=custom&index=${i}&blockType=${qs.escape(block.type)}${issuerQuery}${attrsQuery}&${rawQuery}` return ( `import block${i} from ${stringifyRequest(src + query)}\n` + `if (typeof block${i} === 'function') block${i}(component)` diff --git a/lib/codegen/styleInjection.js b/lib/codegen/styleInjection.js index ac8b010d5..a513175f7 100644 --- a/lib/codegen/styleInjection.js +++ b/lib/codegen/styleInjection.js @@ -20,10 +20,11 @@ module.exports = function genStyleInjectionCode ( function genStyleRequest (style, i) { const src = style.src || resourcePath const attrsQuery = attrsToQuery(style.attrs, 'css') + const rawQuery = loaderContext.resourceQuery.slice(1) // make sure to only pass id when necessary so that we don't inject // duplicate tags when multiple components import the same css file const idQuery = style.scoped ? `&id=${id}` : `` - const query = `?vue&type=style&index=${i}${idQuery}${attrsQuery}` + const query = `?vue&type=style&index=${i}${idQuery}${attrsQuery}&${rawQuery}` return stringifyRequest(src + query) } From b5d007866ee56970419ea55c90938189fc7127f5 Mon Sep 17 00:00:00 2001 From: Hiroki Osame Date: Tue, 29 May 2018 16:54:48 +0900 Subject: [PATCH 4/6] customblock --- lib/codegen/customBlocks.js | 5 +++-- lib/index.js | 3 +-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/codegen/customBlocks.js b/lib/codegen/customBlocks.js index 30faa83fb..64e78a16e 100644 --- a/lib/codegen/customBlocks.js +++ b/lib/codegen/customBlocks.js @@ -4,14 +4,15 @@ const { attrsToQuery } = require('./utils') module.exports = function genCustomBlocksCode ( blocks, resourcePath, + resourceQuery, stringifyRequest ) { return `\n/* custom blocks */\n` + blocks.map((block, i) => { const src = block.attrs.src || resourcePath const attrsQuery = attrsToQuery(block.attrs) const issuerQuery = block.attrs.src ? `&issuerPath=${qs.escape(resourcePath)}` : '' - const rawQuery = this.resourceQuery.slice(1) - const query = `?vue&type=custom&index=${i}&blockType=${qs.escape(block.type)}${issuerQuery}${attrsQuery}&${rawQuery}` + const inheritQuery = resourceQuery ? `&${resourceQuery.slice(1)}` : '' + const query = `?vue&type=custom&index=${i}&blockType=${qs.escape(block.type)}${issuerQuery}${attrsQuery}${inheritQuery}` return ( `import block${i} from ${stringifyRequest(src + query)}\n` + `if (typeof block${i} === 'function') block${i}(component)` diff --git a/lib/index.js b/lib/index.js index 54e794c73..4907b9fc5 100644 --- a/lib/index.js +++ b/lib/index.js @@ -90,7 +90,6 @@ module.exports = function (source) { const scopedQuery = hasScoped ? `&scoped=true` : `` const attrsQuery = attrsToQuery(descriptor.template.attrs) const query = `?vue&type=template${idQuery}${scopedQuery}${attrsQuery}&${rawQuery}` - console.log('template', query) const request = templateRequest = stringifyRequest(src + query) templateImport = `import { render, staticRenderFns } from ${request}` } @@ -101,7 +100,6 @@ module.exports = function (source) { const src = descriptor.script.src || resourcePath const attrsQuery = attrsToQuery(descriptor.script.attrs, 'js') const query = `?vue&type=script${attrsQuery}&${rawQuery}` - console.log('script', query) const request = stringifyRequest(src + query) scriptImport = ( `import script from ${request}\n` + @@ -146,6 +144,7 @@ var component = normalizer( code += genCustomBlocksCode( descriptor.customBlocks, resourcePath, + resourceQuery, stringifyRequest ) } From 26c7a77b753fc02e3ad35eec65dfc2eb12f3c803 Mon Sep 17 00:00:00 2001 From: Hiroki Osame Date: Tue, 29 May 2018 16:57:49 +0900 Subject: [PATCH 5/6] Renamed var --- lib/codegen/styleInjection.js | 4 ++-- lib/index.js | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/lib/codegen/styleInjection.js b/lib/codegen/styleInjection.js index a513175f7..b11e488a2 100644 --- a/lib/codegen/styleInjection.js +++ b/lib/codegen/styleInjection.js @@ -20,11 +20,11 @@ module.exports = function genStyleInjectionCode ( function genStyleRequest (style, i) { const src = style.src || resourcePath const attrsQuery = attrsToQuery(style.attrs, 'css') - const rawQuery = loaderContext.resourceQuery.slice(1) + const inheritQuery = `&${loaderContext.resourceQuery.slice(1)}` // make sure to only pass id when necessary so that we don't inject // duplicate tags when multiple components import the same css file const idQuery = style.scoped ? `&id=${id}` : `` - const query = `?vue&type=style&index=${i}${idQuery}${attrsQuery}&${rawQuery}` + const query = `?vue&type=style&index=${i}${idQuery}${attrsQuery}${inheritQuery}` return stringifyRequest(src + query) } diff --git a/lib/index.js b/lib/index.js index 4907b9fc5..f631baef5 100644 --- a/lib/index.js +++ b/lib/index.js @@ -35,6 +35,7 @@ module.exports = function (source) { } = loaderContext const rawQuery = resourceQuery.slice(1) + const inheritQuery = `&${rawQuery}` const incomingQuery = qs.parse(rawQuery) const options = loaderUtils.getOptions(loaderContext) || {} @@ -89,7 +90,7 @@ module.exports = function (source) { const idQuery = `&id=${id}` const scopedQuery = hasScoped ? `&scoped=true` : `` const attrsQuery = attrsToQuery(descriptor.template.attrs) - const query = `?vue&type=template${idQuery}${scopedQuery}${attrsQuery}&${rawQuery}` + const query = `?vue&type=template${idQuery}${scopedQuery}${attrsQuery}${inheritQuery}` const request = templateRequest = stringifyRequest(src + query) templateImport = `import { render, staticRenderFns } from ${request}` } @@ -99,7 +100,7 @@ module.exports = function (source) { if (descriptor.script) { const src = descriptor.script.src || resourcePath const attrsQuery = attrsToQuery(descriptor.script.attrs, 'js') - const query = `?vue&type=script${attrsQuery}&${rawQuery}` + const query = `?vue&type=script${attrsQuery}${inheritQuery}` const request = stringifyRequest(src + query) scriptImport = ( `import script from ${request}\n` + From 75d9c9470d6ccb4eaa7c0bcd77a89448e8b0c974 Mon Sep 17 00:00:00 2001 From: Hiroki Osame Date: Sun, 3 Jun 2018 20:37:06 +0900 Subject: [PATCH 6/6] Added test --- test/advanced.spec.js | 18 ++++++++++++++++++ test/mock-loaders/query.js | 22 ++++++++++++++++++++++ test/utils.js | 2 +- 3 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 test/mock-loaders/query.js diff --git a/test/advanced.spec.js b/test/advanced.spec.js index 50c804655..d6fc9b6c0 100644 --- a/test/advanced.spec.js +++ b/test/advanced.spec.js @@ -28,6 +28,24 @@ test('support chaining with other loaders', done => { }) }) +test('inherit queries on files', done => { + mockBundleAndRun({ + entry: 'basic.vue?change', + modify: config => { + config.module.rules[0] = { + test: /\.vue$/, + use: [ + 'vue-loader', + require.resolve('./mock-loaders/query') + ] + } + } + }, ({ module }) => { + expect(module.data().msg).toBe('Changed!') + done() + }) +}) + test('expose filename', done => { mockBundleAndRun({ entry: 'basic.vue' diff --git a/test/mock-loaders/query.js b/test/mock-loaders/query.js new file mode 100644 index 000000000..0a2ff8727 --- /dev/null +++ b/test/mock-loaders/query.js @@ -0,0 +1,22 @@ +module.exports = function (content) { + const query = this.resourceQuery.slice(1) + + if (/change/.test(query)) { + return ` + + + ` + } + + return content +} diff --git a/test/utils.js b/test/utils.js index d14eba7ee..71a6310ca 100644 --- a/test/utils.js +++ b/test/utils.js @@ -57,7 +57,7 @@ function bundle (options, cb, wontThrowError) { config.module.rules[vueIndex] = Object.assign({}, vueRule, { options: vueOptions }) } - if (/\.vue$/.test(config.entry)) { + if (/\.vue/.test(config.entry)) { const vueFile = config.entry config = merge(config, { entry: require.resolve('./fixtures/entry'),