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

kazupon · web-flow · commit 6e76d594ef6a · 2021-11-29T09:15:08.000+10:00
* feat: support custom blocks for Vue 3

* implement custom blocks
diff --git a/e2e/3.x/custom-block/__snapshots__/test.js.snap b/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",
+  },
+]
+`;
diff --git a/e2e/3.x/custom-block/babel.config.js b/e2e/3.x/custom-block/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env']
+}
diff --git a/e2e/3.x/custom-block/components/Basic.vue b/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>
diff --git a/e2e/3.x/custom-block/components/Multiple.vue b/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>
diff --git a/e2e/3.x/custom-block/package.json b/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"
+        }
+      }
+    }
+  }
+}
diff --git a/e2e/3.x/custom-block/test.js b/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()
+})
diff --git a/e2e/3.x/custom-block/transformer.js b/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
+  }
+}
diff --git a/packages/vue3-jest/lib/constants.js b/packages/vue3-jest/lib/constants.js
@@ -1,5 +1,5 @@
 module.exports = {
-  vueOptionsNamespace: '__options__',
+  vueComponentNamespace: 'Component',
   defaultVueJestConfig: {
     transform: {}
   }
diff --git a/packages/vue3-jest/lib/generate-code.js b/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 })
 }
diff --git a/packages/vue3-jest/lib/process-custom-blocks.js b/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
 }
diff --git a/packages/vue3-jest/lib/process.js b/packages/vue3-jest/lib/process.js
@@ -5,7 +5,7 @@ const babelTransformer = require('babel-jest').default
 const typescriptTransformer = require('./transformers/typescript')
 const coffeescriptTransformer = require('./transformers/coffee')
 const _processStyle = require('./process-style')
-// const processCustomBlocks = require('./process-custom-blocks')
+const processCustomBlocks = require('./process-custom-blocks')
 const getVueJestConfig = require('./utils').getVueJestConfig
 const getTsJestConfig = require('./utils').getTsJestConfig
 const logResultErrors = require('./utils').logResultErrors
@@ -14,6 +14,7 @@ const getCustomTransformer = require('./utils').getCustomTransformer
 const loadSrc = require('./utils').loadSrc
 const generateCode = require('./generate-code')
 const mapLines = require('./map-lines')
+const vueComponentNamespace = require('./constants').vueComponentNamespace
 
 function resolveTransformer(lang = 'js', vueJestConfig) {
   const transformer = getCustomTransformer(vueJestConfig['transform'], lang)
@@ -154,23 +155,28 @@ function processStyle(styles, filename, config) {
 
 module.exports = function(src, filename, config) {
   const { descriptor } = parse(src, { filename })
+  const componentNamespace =
+    getVueJestConfig(config)['componentNamespace'] || vueComponentNamespace
 
   const templateResult = processTemplate(descriptor, filename, config)
   const scriptResult = processScript(descriptor.script, filename, config)
   const scriptSetupResult = processScriptSetup(descriptor, filename, config)
   const stylesResult = processStyle(descriptor.styles, filename, config)
-  // const customBlocksResult = processCustomBlocks(
-  //   descriptor.customBlocks,
-  //   filename,
-  //   config
-  // )
-  const output = generateCode(
+  const customBlocksResult = processCustomBlocks(
+    descriptor.customBlocks,
+    filename,
+    componentNamespace,
+    config
+  )
+  const output = generateCode({
     scriptResult,
     scriptSetupResult,
     templateResult,
+    customBlocksResult,
+    componentNamespace,
     filename,
     stylesResult
-  )
+  })
 
   return {
     code: output.code,

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+module.exports = {`
	`2`	`+ presets: ['@babel/preset-env']`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`module.exports = {`
`2`		`- vueOptionsNamespace: '__options__',`
	`2`	`+ vueComponentNamespace: 'Component',`
`3`	`3`	`defaultVueJestConfig: {`
`4`	`4`	`transform: {}`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -15,13 +15,15 @@ function addToSourceMap(node, result) {`
`15`	`15`	`}`
`16`	`16`	`}`
`17`	`17`
`18`		`-module.exports = function generateCode(`
	`18`	`+module.exports = function generateCode({`
`19`	`19`	`scriptResult,`
`20`	`20`	`scriptSetupResult,`
`21`	`21`	`templateResult,`
	`22`	`+ customBlocksResult,`
	`23`	`+ componentNamespace,`
`22`	`24`	`filename,`
`23`	`25`	`stylesResult`
`24`		`-) {`
	`26`	`+}) {`
`25`	`27`	`var node = new SourceNode(null, null, null)`
`26`	`28`	`addToSourceMap(node, scriptResult)`
`27`	`29`	`addToSourceMap(node, scriptSetupResult)`
`@@ -63,5 +65,13 @@ module.exports = function generateCode(`
`63`	`65`	`)`
`64`	`66`	`}`
`65`	`67`
	`68`	`+ if (Array.isArray(customBlocksResult)) {`
	`69`	`+ customBlocksResult.forEach(codes => {`
	`70`	`+ codes.forEach(code => {`
	`71`	+ node.add(`;((${componentNamespace}) => { ${code} })(exports.default);`)
	`72`	`+ })`
	`73`	`+ })`
	`74`	`+ }`
	`75`	`+`
`66`	`76`	`return node.toStringWithSourceMap({ file: filename })`
`67`	`77`	`}`