diff --git a/e2e/3.x/custom-block/__snapshots__/test.js.snap b/e2e/3.x/custom-block/__snapshots__/test.js.snap new file mode 100644 index 00000000..dba5165c --- /dev/null +++ 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 new file mode 100644 index 00000000..7db9b6f5 --- /dev/null +++ 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 new file mode 100644 index 00000000..b40054ac --- /dev/null +++ b/e2e/3.x/custom-block/components/Basic.vue @@ -0,0 +1,20 @@ + + + + + +{ + "en": { + "hello": "Hello!" + }, + "ja": { + "hello": "こんにちは！" + } +} + diff --git a/e2e/3.x/custom-block/components/Multiple.vue b/e2e/3.x/custom-block/components/Multiple.vue new file mode 100644 index 00000000..f204d041 --- /dev/null +++ b/e2e/3.x/custom-block/components/Multiple.vue @@ -0,0 +1,26 @@ + + + + + +{ + "en": { + "hello": "Hello!" + }, + "ja": { + "hello": "こんにちは！" + } +} + + + +{ + "foo": "foo" +} + diff --git a/e2e/3.x/custom-block/package.json b/e2e/3.x/custom-block/package.json new file mode 100644 index 00000000..9585c34c --- /dev/null +++ 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/(.*)$": "/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 new file mode 100644 index 00000000..79556a9c --- /dev/null +++ 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 new file mode 100644 index 00000000..e51da0f5 --- /dev/null +++ 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 index 742ef7d4..3bcab3f5 100644 --- 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 index f4af783a..d6f406b8 100644 --- 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 index 17516fa5..e5926eef 100644 --- 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 index d16f330f..82b19621 100644 --- a/packages/vue3-jest/lib/process.js +++ b/packages/vue3-jest/lib/process.js @@ -5,7 +5,7 @@ const babelTransformer = require('babel-jest') 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) @@ -133,23 +134,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,