wip(mp): mp-toutiao

packages/uni-mp-toutiao/__tests__/swiper.spec.ts

+import { assert } from './testUtils'
+
+describe('mp-toutiao: transform swiper', () => {
+  //   test(`attribute disable-touch`, () => {
+  //     assert(
+  //       `<swiper disable-touch/>`,
+  //       `<swiper touchable="{{false}}"/>`,
+  //       `(_ctx, _cache) => {
+  //   return {}
+  // }`
+  //     )
+  //     assert(
+  //       `<swiper disable-touch="false"/>`,
+  //       `<swiper touchable="{{false}}"/>`,
+  //       `(_ctx, _cache) => {
+  //   return {}
+  // }`
+  //     )
+  //   })
+  test(`v-bind disable-touch`, () => {
+    assert(
+      `<swiper :disable-touch="true"/>`,
+      `<swiper touchable="{{false}}"/>`,
+      `(_ctx, _cache) => {
+  return {}
+}`
+    )
+    assert(
+      `<swiper :disable-touch="false"/>`,
+      `<swiper touchable="{{true}}"/>`,
+      `(_ctx, _cache) => {
+  return {}
+}`
+    )
+    assert(
+      `<swiper :disable-touch="disableTouch"/>`,
+      `<swiper touchable="{{a}}"/>`,
+      `(_ctx, _cache) => {
+  return { a: !_ctx.disableTouch }
+}`
+    )
+  })
+})

packages/uni-mp-toutiao/__tests__/testUtils.ts

+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)
+  }
+}

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": {

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 */) {
+        // <swiper disable-touch/> => <swiper :touchable="false"/>
+        props.splice(props.indexOf(disableTouchProp), 1, uniCliShared.createBindDirectiveNode('touchable', 'false'));
+    }
+    else {
+        if (disableTouchProp.exp) {
+            // <swiper :disable-touch="true"/> => <swiper :touchable="!(true)"/>
+            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}
 </sjs>`;
             },
-        },
-        slot: {
-            fallback: true,
-        },
-        extname: '.ttml',
-        directive: 'tt:',
-        compilerOptions: {
-            nodeTransforms: [
-                uniCliShared.transformRef,
-                uniCliShared.createTransformComponentLink(uniCliShared.COMPONENT_BIND_LINK),
-            ],
-        },
-    },
+        }, extname: '.ttml', compilerOptions: {
+            nodeTransforms,
+        } }),
     style: {
         extname: '.ttss',
     },

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}
 </sjs>`
       },
     },
-    slot: {
-      fallback: true,
-    },
     extname: '.ttml',
-    directive: 'tt:',
     compilerOptions: {
-      nodeTransforms: [
-        transformRef,
-        createTransformComponentLink(COMPONENT_BIND_LINK),
-      ],
+      nodeTransforms,
     },
   },
   style: {

packages/uni-mp-toutiao/src/compiler/transforms/transformSwiper.ts

+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) {
+    // <swiper disable-touch/> => <swiper :touchable="false"/>
+    props.splice(
+      props.indexOf(disableTouchProp),
+      1,
+      createBindDirectiveNode('touchable', 'false')
+    )
+  } else {
+    if (disableTouchProp.exp) {
+      // <swiper :disable-touch="true"/> => <swiper :touchable="!(true)"/>
+      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)})`
+        )
+      )
+    }
+  }
+}