feat: support custom blocks for Vue 3 (#364)

* feat: support custom blocks for Vue 3

* implement custom blocks

Author: kazupon

e2e/3.x/custom-block/__snapshots__/test.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Basic 1`] = `
+Array [
+  Object {
+    "en": Object {
+      "hello": "Hello!",
+    },
+    "ja": Object {
+      "hello": "こんにちは！",
+    },
+  },
+]
+`;
+
+exports[`Multiple blocks 1`] = `
+Array [
+  Object {
+    "en": Object {
+      "hello": "Hello!",
+    },
+    "ja": Object {
+      "hello": "こんにちは！",
+    },
+  },
+  Object {
+    "foo": "foo",
+  },
+]
+`;

e2e/3.x/custom-block/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env']
+}

e2e/3.x/custom-block/components/Basic.vue

@@ -0,0 +1,20 @@
+<template>
+  <p>basic custom block</p>
+</template>
+
+<script>
+export default {
+  name: 'Basic'
+}
+</script>
+
+<custom>
+{
+  "en": {
+    "hello": "Hello!"
+  },
+  "ja": {
+    "hello": "こんにちは！"
+  }
+}
+</custom>

e2e/3.x/custom-block/components/Multiple.vue

@@ -0,0 +1,26 @@
+<template>
+  <p>multiple custom block</p>
+</template>
+
+<script>
+export default {
+  name: 'Multiple'
+}
+</script>
+
+<custom>
+{
+  "en": {
+    "hello": "Hello!"
+  },
+  "ja": {
+    "hello": "こんにちは！"
+  }
+}
+</custom>
+
+<custom>
+{
+  "foo": "foo"
+}
+</custom>

e2e/3.x/custom-block/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "vue3-custom-block",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "test": "jest --no-cache --coverage test.js"
+  },
+  "dependencies": {
+    "vue": "^3.0.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "@vue/compiler-sfc": "^3.0.3",
+    "jest": "^26.0.0",
+    "vue3-jest": "^26.0.0-alpha.10"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "vue"
+    ],
+    "transform": {
+      "^.+\\.js$": "babel-jest",
+      "^.+\\.vue$": "vue3-jest"
+    },
+    "moduleNameMapper": {
+      "^~?__styles/(.*)$": "<rootDir>/components/styles/$1"
+    },
+    "globals": {
+      "vue-jest": {
+        "transform": {
+          "custom": "./transformer.js"
+        }
+      }
+    }
+  }
+}

e2e/3.x/custom-block/test.js

@@ -0,0 +1,33 @@
+import Basic from './components/Basic.vue'
+import Multiple from './components/Multiple.vue'
+
+test('Basic', () => {
+  expect(Basic.__custom).toMatchObject([
+    {
+      en: {
+        hello: 'Hello!'
+      },
+      ja: {
+        hello: 'こんにちは！'
+      }
+    }
+  ])
+  expect(Basic.__custom).toMatchSnapshot()
+})
+
+test('Multiple blocks', () => {
+  expect(Multiple.__custom).toMatchObject([
+    {
+      en: {
+        hello: 'Hello!'
+      },
+      ja: {
+        hello: 'こんにちは！'
+      }
+    },
+    {
+      foo: 'foo'
+    }
+  ])
+  expect(Multiple.__custom).toMatchSnapshot()
+})

e2e/3.x/custom-block/transformer.js

@@ -0,0 +1,21 @@
+function convert(content) {
+  return JSON.stringify(JSON.parse(content))
+    .replace(/\u2028/g, '\\u2028') // LINE SEPARATOR
+    .replace(/\u2029/g, '\\u2029') // PARAGRAPH SEPARATOR
+    .replace(/\\/g, '\\\\')
+    .replace(/'/g, "\\'")
+}
+
+module.exports = {
+  process({ blocks, componentNamespace, filename, config }) {
+    const ret = blocks.reduce((codes, block) => {
+      codes.push(
+        `${componentNamespace}.__custom = ${componentNamespace}.__custom || [];${componentNamespace}.__custom.push(${convert(
+          block.content
+        )});`
+      )
+      return codes
+    }, [])
+    return ret
+  }
+}

packages/vue3-jest/lib/constants.js

@@ -1,5 +1,5 @@
 module.exports = {
-  vueOptionsNamespace: '__options__',
+  vueComponentNamespace: 'Component',
   defaultVueJestConfig: {
     transform: {}
   }

packages/vue3-jest/lib/generate-code.js

@@ -15,13 +15,15 @@ function addToSourceMap(node, result) {
   }
 }
 
-module.exports = function generateCode(
+module.exports = function generateCode({
   scriptResult,
   scriptSetupResult,
   templateResult,
+  customBlocksResult,
+  componentNamespace,
   filename,
   stylesResult
-) {
+}) {
   var node = new SourceNode(null, null, null)
   addToSourceMap(node, scriptResult)
   addToSourceMap(node, scriptSetupResult)
@@ -63,5 +65,13 @@ module.exports = function generateCode(
     )
   }
 
+  if (Array.isArray(customBlocksResult)) {
+    customBlocksResult.forEach(codes => {
+      codes.forEach(code => {
+        node.add(`;((${componentNamespace}) => { ${code} })(exports.default);`)
+      })
+    })
+  }
+
   return node.toStringWithSourceMap({ file: filename })
 }

packages/vue3-jest/lib/process-custom-blocks.js

@@ -1,14 +1,13 @@
 const { getVueJestConfig, getCustomTransformer } = require('./utils')
-const vueOptionsNamespace = require('./constants').vueOptionsNamespace
 
 function applyTransformer(
   transformer,
   blocks,
-  vueOptionsNamespace,
+  componentNamespace,
   filename,
   config
 ) {
-  return transformer.process({ blocks, vueOptionsNamespace, filename, config })
+  return transformer.process({ blocks, componentNamespace, filename, config })
 }
 
 function groupByType(acc, block) {
@@ -17,9 +16,9 @@ function groupByType(acc, block) {
   return acc
 }
 
-module.exports = function(allBlocks, filename, config) {
+module.exports = (allBlocks, filename, componentNamespace, config) => {
   const blocksByType = allBlocks.reduce(groupByType, {})
-  const code = []
+  const codes = []
   for (const [type, blocks] of Object.entries(blocksByType)) {
     const transformer = getCustomTransformer(
       getVueJestConfig(config).transform,
@@ -29,13 +28,12 @@ module.exports = function(allBlocks, filename, config) {
       const codeStr = applyTransformer(
         transformer,
         blocks,
-        vueOptionsNamespace,
+        componentNamespace,
         filename,
         config
       )
-      code.push(codeStr)
+      codes.push(codeStr)
     }
   }
-
-  return code.length ? code.join('\n') : ''
+  return codes
 }