-
Notifications
You must be signed in to change notification settings - Fork 156
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: support custom blocks for Vue 3 #364
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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", | ||
}, | ||
] | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
module.exports = { | ||
presets: ['@babel/preset-env'] | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
<template> | ||
<p>basic custom block</p> | ||
</template> | ||
|
||
<script> | ||
export default { | ||
name: 'Basic' | ||
} | ||
</script> | ||
|
||
<custom> | ||
{ | ||
"en": { | ||
"hello": "Hello!" | ||
}, | ||
"ja": { | ||
"hello": "こんにちは!" | ||
} | ||
} | ||
</custom> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} | ||
} | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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() | ||
}) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We have added the In the case of i18n custom blocks, we are using a common library for generic processing for various bundlers such as vue-i18n-loader, rollup-plugin-vue-i18n, and vite-plugin-vue-i18n. For example, it's handled the below: In the code in the URL above, the component pass to the function, and uses the variable name In order to reuse this logic in vue-jest transformer, I need to change it a bit, but in any case, being able to specify the variable name allows for flexible processing on the transformer side. |
||
|
||
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, | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Custom blocks can now be handled for components like
vue-loader
and@vitejs/plugin-vue
.