wip: custom blocks

Author: yyx990803

lib/customBlocks.js

@@ -1,12 +1,18 @@
-// const { attrsToQuery } = require('./utils')
+const qs = require('querystring')
+const { attrsToQuery } = require('./utils')
 
 module.exports = function genCustomBlocksCode (
   blocks,
-  resourcePath
+  resourcePath,
+  stringifyRequest
 ) {
-  // blocks.map((block, i) => {
-  //   const src = block.src || resourcePath
-  //   const langQuery = getLangQuery(block)
-
-  // })
+  return `\n/* custom blocks */\n` + blocks.map((block, i) => {
+    const src = block.attrs.src || resourcePath
+    const attrsQuery = attrsToQuery(block.attrs)
+    const query = `?vue&type=custom&index=${i}&blockType=${qs.escape(block.type)}${attrsQuery}`
+    return (
+      `import block${i} from ${stringifyRequest(src + query)}\n` +
+      `if (typeof block${i} === 'function') block${i}(component)`
+    )
+  }).join(`\n`) + `\n`
 }

lib/index.js

@@ -112,6 +112,8 @@ module.exports = function (source) {
 ${templateImport}
 ${scriptImport}
 ${stylesCode}
+
+/* normalize component */
 import normalizer from ${stringifyRequest(`!${componentNormalizerPath}`)}
 var component = normalizer(
   script,
@@ -123,21 +125,25 @@ var component = normalizer(
   ${isServer ? JSON.stringify(hash(request)) : `null`}
   ${isShadow ? `,true` : ``}
 )
-  `.trim()
+  `.trim() + `\n`
 
   if (descriptor.customBlocks && descriptor.customBlocks.length) {
-    code += genCustomBlocksCode(descriptor.customBlocks)
+    code += genCustomBlocksCode(
+      descriptor.customBlocks,
+      resourcePath,
+      stringifyRequest
+    )
+  }
+
+  if (needsHotReload) {
+    code += `\n` + genHotReloadCode(id, hasFunctional)
   }
 
   // Expose filename. This is used by the devtools and vue runtime warnings.
   if (!isProduction) {
     code += `\ncomponent.options.__file = ${JSON.stringify(shortFilePath)}`
   }
 
-  if (needsHotReload) {
-    code += genHotReloadCode(id, hasFunctional)
-  }
-
   code += `\nexport default component.exports`
   // console.log(code)
   return code

lib/noop.js

@@ -0,0 +1,5 @@
+// a noop loader that matches custom blocks with no
+// matching rules.
+module.exports = function noop () {
+  return ``
+}

lib/plugin.js

@@ -1,7 +1,11 @@
 const qs = require('querystring')
 const RuleSet = require('webpack/lib/RuleSet')
 
+// TODO handling rules without `test` being matched twice
+// e.g. a rule with just resourceQuery: /blockType=foo/
+
 // TODO handle vueRule with oneOf
+
 module.exports = class VueLoaderPlugin {
   apply (compiler) {
     // get a hold of the raw rules
@@ -68,6 +72,11 @@ module.exports = class VueLoaderPlugin {
     const baseRules = rawRules.filter(r => r !== vueRule)
     const normalizedRules = rawNormalizedRules.filter(r => r !== normalizedVueRule)
 
+    const customFallbackRule = {
+      loader: require.resolve('./noop'),
+      resourceQuery: /type=custom/
+    }
+
     // construct a new rule for vue file, with oneOf containing
     // multiple rules with dynamic resourceQuery functions that applies to
     // different language blocks in a raw vue file.
@@ -77,7 +86,7 @@ module.exports = class VueLoaderPlugin {
         // for each user rule, create a cloned rule by checking if the rule
         // matches the lang specified in the resourceQuery.
         return cloneRule(rule, normalizedRules[i], normalizedVueUse)
-      }).concat(vueRule)
+      }).concat(customFallbackRule, vueRule)
     }
 
     // replace the original vue rule with our new constructed rule.

lib/select.js

@@ -29,4 +29,15 @@ module.exports = function selectBlock (descriptor, loaderContext, query) {
     )
     return
   }
+
+  // custom
+  if (query.type === 'custom' && query.index != null) {
+    const block = descriptor.customBlocks[query.index]
+    loaderContext.callback(
+      null,
+      block.content,
+      block.map
+    )
+    return
+  }
 }

package.json

@@ -65,6 +65,7 @@
     "normalize-newline": "^3.0.0",
     "postcss-loader": "^2.1.2",
     "pug": "^2.0.1",
+    "raw-loader": "^0.5.1",
     "sass-loader": "^6.0.7",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",

test/custom.spec.js

@@ -1,3 +1,71 @@
-test('custom blocks', () => {
+const {
+  bundle
+} = require('./utils')
 
+test('add custom blocks to the webpack output', done => {
+  bundle({
+    entry: 'custom-language.vue',
+    module: {
+      rules: [
+        { test: /\.js/, loader: 'babel-loader' }
+      ]
+    }
+  }, code => {
+    // should also be transpiled
+    expect(code).toContain(`
+describe('example', function () {
+  it('basic', function (done) {
+    done();
+  });
+});
+    `.trim())
+    done()
+  })
+})
+
+test('custom blocks should work with src imports', done => {
+  bundle({
+    entry: 'custom-import.vue',
+    module: {
+      rules: [
+        { test: /\.js/, loader: 'babel-loader' }
+      ]
+    }
+  }, (code) => {
+    expect(code).toContain(`
+describe('example', function () {
+  it('basic', function (done) {
+    done();
+  });
+});
+    `.trim())
+    done()
+  })
+})
+
+// TODO
+// test('passes Component to custom block loaders', done => {
+//   mockBundleAndRun({
+//     entry: 'custom-language.vue',
+//     module: {
+//       rules: [
+//         {
+//           resourceQuery: /blockType=documentation/,
+//           loader: require.resolve('./mock-loaders/docs')
+//         }
+//       ]
+//     }
+//   }, ({ module }) => {
+//     expect(module.__docs).toContain('This is example documentation for a component.')
+//     done()
+//   })
+// })
+
+test('custom blocks can be ignored', done => {
+  bundle({
+    entry: 'custom-language.vue'
+  }, code => {
+    expect(code).not.toContain(`describe('example'`)
+    done()
+  })
 })

test/fixtures/custom-blocks.vue

@@ -7,12 +7,6 @@ ja:
 
 <blog>## foo</blog>
 
-<esm>
-export default function (Component) {
-  Component.options.foo = 1
-}
-</esm>
-
 <template>
   <div>
     <h1>{{ msg }}</h1>

test/fixtures/custom-language.vue

@@ -1,6 +1,6 @@
-<unit-test>
-  describe('example', function () {
-    it('basic', function (done) {
+<unit-test lang="js">
+  describe('example', () => {
+    it('basic', done => {
       done();
     })
   })

test/fixtures/unit-test.js

@@ -1,5 +1,5 @@
-describe('example', function () {
-  it('basic', function (done) {
+describe('example', () => {
+  it('basic', done => {
     done()
   })
 })