diff --git a/packages/uni-mp-toutiao/__tests__/swiper.spec.ts b/packages/uni-mp-toutiao/__tests__/swiper.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..c0d44502c6a92f7e966c6dc52cfc217319ad80a2 --- /dev/null +++ b/packages/uni-mp-toutiao/__tests__/swiper.spec.ts @@ -0,0 +1,43 @@ +import { assert } from './testUtils' + +describe('mp-toutiao: transform swiper', () => { + // test(`attribute disable-touch`, () => { + // assert( + // ``, + // ``, + // `(_ctx, _cache) => { + // return {} + // }` + // ) + // assert( + // ``, + // ``, + // `(_ctx, _cache) => { + // return {} + // }` + // ) + // }) + test(`v-bind disable-touch`, () => { + assert( + ``, + ``, + `(_ctx, _cache) => { + return {} +}` + ) + assert( + ``, + ``, + `(_ctx, _cache) => { + return {} +}` + ) + assert( + ``, + ``, + `(_ctx, _cache) => { + return { a: !_ctx.disableTouch } +}` + ) + }) +}) diff --git a/packages/uni-mp-toutiao/__tests__/testUtils.ts b/packages/uni-mp-toutiao/__tests__/testUtils.ts new file mode 100644 index 0000000000000000000000000000000000000000..f546e2a9a34290896d4c89d61d87e40ed5633193 --- /dev/null +++ b/packages/uni-mp-toutiao/__tests__/testUtils.ts @@ -0,0 +1,38 @@ +import { isCustomElement, isNativeTag } from '@dcloudio/uni-shared' +import { compile, CompilerOptions } from '@dcloudio/uni-mp-compiler' + +import { miniProgram, nodeTransforms } from '../src/compiler/options' + +export function assert( + template: string, + templateCode: string, + renderCode: string, + options: CompilerOptions = {} +) { + const res = compile(template, { + mode: 'module', + filename: 'foo.vue', + prefixIdentifiers: true, + inline: true, + isNativeTag, + isCustomElement, + generatorOpts: { + concise: true, + }, + nodeTransforms, + miniProgram: { + ...miniProgram, + emitFile({ source }) { + // console.log(source) + if (!options.onError) { + expect(source).toBe(templateCode) + } + return '' + }, + }, + ...options, + }) + if (!options.onError) { + expect(res.code).toBe(renderCode) + } +} diff --git a/packages/uni-mp-toutiao/build.json b/packages/uni-mp-toutiao/build.json index 8d38dee345e0b6ae028996fb94da4add086323ff..de2702e688340787be58fa91130ba4da799d661f 100644 --- a/packages/uni-mp-toutiao/build.json +++ b/packages/uni-mp-toutiao/build.json @@ -6,7 +6,12 @@ "output": { "format": "cjs" }, - "external": ["@dcloudio/uni-cli-shared", "@dcloudio/uni-mp-vite"] + "external": [ + "@vue/compiler-core", + "@dcloudio/uni-cli-shared", + "@dcloudio/uni-mp-vite", + "@dcloudio/uni-mp-compiler" + ] }, { "input": { diff --git a/packages/uni-mp-toutiao/dist/uni.compiler.js b/packages/uni-mp-toutiao/dist/uni.compiler.js index 0eb77075a7740d350221bfc7e5ff3f064b50a7ce..9fc405f1bb14d029dcfe3595ddcf8cda466e1f20 100644 --- a/packages/uni-mp-toutiao/dist/uni.compiler.js +++ b/packages/uni-mp-toutiao/dist/uni.compiler.js @@ -3,6 +3,8 @@ var initMiniProgramPlugin = require('@dcloudio/uni-mp-vite'); var path = require('path'); var uniCliShared = require('@dcloudio/uni-cli-shared'); +var uniMpCompiler = require('@dcloudio/uni-mp-compiler'); +var compilerCore = require('@vue/compiler-core'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } @@ -30,7 +32,51 @@ var source = { condition: condition }; +function transformSwiper(node) { + if (node.type !== 1 /* ELEMENT */ || node.tag !== 'swiper') { + return; + } + const disableTouchProp = compilerCore.findProp(node, 'disable-touch', false, true); + if (!disableTouchProp) { + return; + } + const { props } = node; + if (disableTouchProp.type === 6 /* ATTRIBUTE */) { + // => + props.splice(props.indexOf(disableTouchProp), 1, uniCliShared.createBindDirectiveNode('touchable', 'false')); + } + else { + if (disableTouchProp.exp) { + // => + let touchable = ''; + if (disableTouchProp.exp.type === 4 /* SIMPLE_EXPRESSION */) { + if (disableTouchProp.exp.content === 'true') { + touchable = 'false'; + } + else if (disableTouchProp.exp.content === 'false') { + touchable = 'true'; + } + } + props.splice(props.indexOf(disableTouchProp), 1, uniCliShared.createBindDirectiveNode('touchable', touchable || `!(${uniMpCompiler.genExpr(disableTouchProp.exp)})`)); + } + } +} + const projectConfigFilename = 'project.config.json'; +const nodeTransforms = [ + uniCliShared.transformRef, + transformSwiper, + uniCliShared.createTransformComponentLink(uniCliShared.COMPONENT_BIND_LINK), +]; +const miniProgram = { + class: { + array: false, + }, + slot: { + fallback: true, + }, + directive: 'tt:', +}; const options = { vite: { inject: { @@ -52,11 +98,7 @@ const options = { filename: projectConfigFilename, source, }, - template: { - class: { - array: false, - }, - filter: { + template: Object.assign(Object.assign({}, miniProgram), { filter: { extname: '.sjs', lang: 'sjs', generate(filter, filename) { @@ -67,19 +109,9 @@ const options = { ${filter.code} `; }, - }, - slot: { - fallback: true, - }, - extname: '.ttml', - directive: 'tt:', - compilerOptions: { - nodeTransforms: [ - uniCliShared.transformRef, - uniCliShared.createTransformComponentLink(uniCliShared.COMPONENT_BIND_LINK), - ], - }, - }, + }, extname: '.ttml', compilerOptions: { + nodeTransforms, + } }), style: { extname: '.ttss', }, diff --git a/packages/uni-mp-toutiao/src/compiler/options.ts b/packages/uni-mp-toutiao/src/compiler/options.ts index 8a87d1b3b2327b3adc6ad4a600ab3c69646c5ddb..c360ce02c0145dcb45e5d04c68a81b5956febe38 100644 --- a/packages/uni-mp-toutiao/src/compiler/options.ts +++ b/packages/uni-mp-toutiao/src/compiler/options.ts @@ -2,14 +2,31 @@ import path from 'path' import { COMPONENT_BIND_LINK, createTransformComponentLink, + MiniProgramCompilerOptions, transformRef, } from '@dcloudio/uni-cli-shared' import { UniMiniProgramPluginOptions } from '@dcloudio/uni-mp-vite' import source from './project.config.json' +import { transformSwiper } from './transforms/transformSwiper' const projectConfigFilename = 'project.config.json' +export const nodeTransforms = [ + transformRef, + transformSwiper, + createTransformComponentLink(COMPONENT_BIND_LINK), +] +export const miniProgram: MiniProgramCompilerOptions = { + class: { + array: false, + }, + slot: { + fallback: true, + }, + directive: 'tt:', +} + export const options: UniMiniProgramPluginOptions = { vite: { inject: { @@ -32,9 +49,8 @@ export const options: UniMiniProgramPluginOptions = { source, }, template: { - class: { - array: false, - }, + /* eslint-disable no-restricted-syntax */ + ...miniProgram, filter: { extname: '.sjs', lang: 'sjs', @@ -47,16 +63,9 @@ ${filter.code} ` }, }, - slot: { - fallback: true, - }, extname: '.ttml', - directive: 'tt:', compilerOptions: { - nodeTransforms: [ - transformRef, - createTransformComponentLink(COMPONENT_BIND_LINK), - ], + nodeTransforms, }, }, style: { diff --git a/packages/uni-mp-toutiao/src/compiler/transforms/transformSwiper.ts b/packages/uni-mp-toutiao/src/compiler/transforms/transformSwiper.ts new file mode 100644 index 0000000000000000000000000000000000000000..56fc06c484cb2e193245e2780053d24d6d490562 --- /dev/null +++ b/packages/uni-mp-toutiao/src/compiler/transforms/transformSwiper.ts @@ -0,0 +1,48 @@ +import { createBindDirectiveNode } from '@dcloudio/uni-cli-shared' +import { genExpr } from '@dcloudio/uni-mp-compiler' +import { + findProp, + NodeTypes, + RootNode, + TemplateChildNode, +} from '@vue/compiler-core' + +export function transformSwiper(node: RootNode | TemplateChildNode) { + if (node.type !== NodeTypes.ELEMENT || node.tag !== 'swiper') { + return + } + const disableTouchProp = findProp(node, 'disable-touch', false, true) + if (!disableTouchProp) { + return + } + const { props } = node + if (disableTouchProp.type === NodeTypes.ATTRIBUTE) { + // => + props.splice( + props.indexOf(disableTouchProp), + 1, + createBindDirectiveNode('touchable', 'false') + ) + } else { + if (disableTouchProp.exp) { + // => + let touchable = '' + if (disableTouchProp.exp.type === NodeTypes.SIMPLE_EXPRESSION) { + if (disableTouchProp.exp.content === 'true') { + touchable = 'false' + } else if (disableTouchProp.exp.content === 'false') { + touchable = 'true' + } + } + + props.splice( + props.indexOf(disableTouchProp), + 1, + createBindDirectiveNode( + 'touchable', + touchable || `!(${genExpr(disableTouchProp.exp)})` + ) + ) + } + } +}