uodate: 适配taro4+

README.md

@@ -4,6 +4,10 @@ Taro 插件。用于支持编译为快手小程序。
 
 ## 版本要求
 
+### Taro 4+
+
+请使用本插件的 7.0 或以上版本
+
 ### Taro 3.6.9+
 
 请使用本插件的 6.0 或以上版本

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-platform-kwai",
-  "version": "6.0.1",
+  "version": "7.0.0",
   "description": "快手小程序平台插件",
   "author": "drchan",
   "homepage": "https://github.com/NervJS/taro-plugin-platform-kwai",
@@ -27,16 +27,16 @@
     "url": "https://github.com/NervJS/taro-plugin-platform-kwai/issues"
   },
   "peerDependencies": {
-    "@tarojs/components": "^3.5.0",
-    "@tarojs/service": "^3.5.0",
-    "@tarojs/shared": "^3.5.0"
+    "@tarojs/components": "^4.0.0",
+    "@tarojs/service": "^4.0.0",
+    "@tarojs/shared": "^4.0.0"
   },
   "devDependencies": {
-    "@tarojs/components": "^3.5.0",
-    "@tarojs/service": "^3.5.0",
-    "@tarojs/shared": "^3.5.0",
-    "rollup": "^2.29.0",
-    "rollup-plugin-typescript2": "^0.27.3",
-    "typescript": "^4.0.3"
+    "@tarojs/components": "^4.0.0",
+    "@tarojs/service": "^4.0.0",
+    "@tarojs/shared": "^4.0.0",
+    "rollup": "v4.35.0",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "typescript": "^5.4.5"
   }
-}
+}

rollup.config.js

@@ -43,4 +43,15 @@ const runtimeUtilsConfig = {
   ...base
 }
 
-module.exports = [comileConfig, runtimeConfig, runtimeUtilsConfig]
+// React 下 webpack 会 alias @tarojs/components 为此文件
+const otherConfig = {
+  input: join(cwd, 'src/components-react.ts'),
+  output: {
+    file: join(cwd, 'dist/components-react.js'),
+    format: 'es',
+    sourcemap: true
+  },
+  ...base
+}
+
+module.exports = [comileConfig, runtimeConfig, runtimeUtilsConfig,otherConfig]

src/components-react.ts

@@ -0,0 +1,4 @@
+export * from '@tarojs/components/mini'
+export const VideoPlayer = 'video-player'
+export const PostNoteButton = 'post-note-button'
+export const GroupChatCard = 'group-chat-card'

src/index.ts

@@ -4,53 +4,15 @@ import type { IPluginContext } from '@tarojs/service'
 // 让其它平台插件可以继承此平台
 export { Kwai }
 
-let registedModifyPageTemplate = false
 
 export default (ctx: IPluginContext) => {
   ctx.registerPlatform({
     name: 'kwai',
     useConfigName: 'mini',
     async fn ({ config }) {
-      !registedModifyPageTemplate && modifyPageTemplate(ctx)
       const program = new Kwai(ctx, config)
       await program.start()
     }
   })
 }
 
-// 和支付宝小程序一样，快手小程序中，如果某个页面依赖了原生小程序组件，
-// 那么这个页面不能使用公共模板 base.axml，
-// 而需要把公共模板的内容在此页面的模板中复制一份, 。
-function modifyPageTemplate (ctx: IPluginContext) {
-  registedModifyPageTemplate = true
-  ctx.modifyBuildAssets(({ assets, miniPlugin }) => {
-    const pages: string[] = []
-
-    // 筛选出使用了自定义组件的页面
-    miniPlugin.pages.forEach(page => {
-      const config = miniPlugin.filesConfig[miniPlugin.getConfigFilePath(page.name)].content
-      if (!page.isNative && config?.hasOwnProperty('usingComponents') && Object.keys(config.usingComponents).length) {
-        pages.push(page.name)
-      }
-    })
-
-    if (!pages.length) return
-
-    const baseXml = assets['base.ksml'].source()
-
-    pages.forEach(page => {
-      const templateName = `${page}.ksml`
-      const assetsItem = assets[templateName]
-      const src = assetsItem._value ? assetsItem._value.toString() : assetsItem.source()
-      const templateCaller = src.replace(/<import src="(.*)base\.ksml"\/>/, '')
-      const res = `${templateCaller}
-${baseXml}`
-
-      assets[templateName] = {
-        size: () => res.length,
-        source: () => res
-      }
-    })
-  })
-}
-

src/program.ts

@@ -12,7 +12,8 @@ export default class Kwai extends TaroPlatformBase {
     templ: '.ksml',
     style: '.css',
     config: '.json',
-    script: '.js'
+    script: '.js',
+    xs: '.ks',
   }
 
   template = new Template()

src/template.ts

@@ -1,11 +1,10 @@
-import { indent, Shortcuts } from '@tarojs/shared'
 import { RecursiveTemplate } from '@tarojs/shared/dist/template'
 
 export class Template extends RecursiveTemplate {
   flattenViewLevel = 8
   flattenCoverViewLevel = 8
   flattenTextLevel = 3
-  supportXS = false
+  supportXS = true
   Adapter = {
     if: 'ks:if',
     else: 'ks:else',
@@ -17,7 +16,7 @@ export class Template extends RecursiveTemplate {
     type: 'kwai'
   }
 
-  createMiniComponents (components): any {
+  createMiniComponents(components): any {
     const result = super.createMiniComponents(components)
 
     delete result['pure-view']
@@ -26,126 +25,7 @@ export class Template extends RecursiveTemplate {
     return result
   }
 
-  buildFlattenNodeAttributes (nodeName: string): string {
-    const component = this.miniComponents[nodeName]
-
-    return Object.keys(component)
-      .map(k => `${k}="${k.startsWith('bind') || k.startsWith('on') || k.startsWith('catch') ? component[k] : `{{${component[k].replace(/i./g, 'item.')}}}`}"`)
-      .join(' ') + ' id="{{item.uid||item.sid}}" data-sid="{{item.sid}}"'
-  }
-
-  buildFlattenView = (level = this.flattenViewLevel): string => {
-    if (level === 0) {
-      return `<template is="{{'tmpl_0_' + item.nn}}" data="{{i:item}}" />`
-    }
-
-    const child = this.buildFlattenView(level - 1)
-
-    const componentsAlias = this.componentsAlias
-    const viewAlias = componentsAlias.view._num
-    const textAlias = componentsAlias.text._num
-    const staticTextAlias = componentsAlias['static-text']._num
-    const buttonAlias = componentsAlias.button._num
-    const inputAlias = componentsAlias.input._num
-    const swiperAlias = componentsAlias.swiper._num
-
-    const template =
-`<view ks:if="{{item.nn==='${viewAlias}'&&(item.st||item.cl)}}" id="{{item.uid}}" ${this.buildFlattenNodeAttributes('view')}>
-  <block ks:for="{{item.cn}}" ks:key="uid">
-    ${indent(child, 4)}
-  </block>
-</view>
-<text ks:elif="{{item.nn==='${textAlias}'&&(item.st||item.cl)}}" id="{{item.uid}}" ${this.buildFlattenNodeAttributes('text')}>
-  <block ks:for="{{item.cn}}" ks:key="uid">
-    <block>{{item.v}}</block>
-  </block>
-</text>
-<text ks:elif="{{item.nn==='${staticTextAlias}'&&(item.st||item.cl)}}" id="{{item.uid}}" ${this.buildFlattenNodeAttributes('static-text')}>
-  <block ks:for="{{item.cn}}" ks:key="uid">
-    <block>{{item.v}}</block>
-  </block>
-</text>
-<button ks:elif="{{item.nn==='${buttonAlias}'&&(item.st||item.cl)}}" id="{{item.uid}}" ${this.buildFlattenNodeAttributes('button')}>
-  <block ks:for="{{item.cn}}" ks:key="uid">
-    <template is="{{'tmpl_0_' + item.nn}}" data="{{i:item}}" />
-  </block>
-</button>
-<input ks:elif="{{item.nn==='${inputAlias}'&&(item.st||item.cl)}}" id="{{item.uid}}" ${this.buildFlattenNodeAttributes('input')} />
-<swiper ks:elif="{{item.nn==='${swiperAlias}'&&(item.st||item.cl)}}" id="{{item.uid}}" ${this.buildFlattenNodeAttributes('swiper')}>
-  <block ks:for="{{item.cn}}" ks:key="uid">
-    <template is="{{'tmpl_0_' + item.nn}}" data="{{i:item}}" />
-  </block>
-</swiper>
-<block ks:else>
-  <template is="{{'tmpl_0_' + item.nn}}" data="{{i:item}}" />
-</block>`
-
-    return template
-  }
-
-  buildFlattenCoverView = (level = this.flattenCoverViewLevel): string => {
-    if (level === 0) {
-      return ''
-    }
-
-    const child = this.buildFlattenCoverView(level - 1)
-
-    const componentsAlias = this.componentsAlias
-    const coverViewAlias = componentsAlias['cover-view']._num
-    const coverImageAlias = componentsAlias['cover-image']._num
-    const buttonAlias = componentsAlias.button._num
-    const contentAlias = componentsAlias['#text']._num
-
-    const template =
-  `${level - 1 !== 0 ? `<cover-view ks:if="{{item.nn==='${coverViewAlias}'}}" ${this.buildFlattenNodeAttributes('cover-view')}>
-  <block ks:for="{{item.cn}}" ks:key="uid">
-    ${indent(child, 4)}
-  </block>
-</cover-view>` : ''}
-<button ks:elif="{{item.nn==='${buttonAlias}'}}" ${this.buildFlattenNodeAttributes('button')} >
-  <block ks:for="{{item.cn}}" ks:key="uid">
-    <template is="{{'tmpl_0_' + item.nn}}" data="{{i:item}}" />
-  </block>
-</button>
-<cover-image ks:elif="{{item.nn==='${coverImageAlias}'}}" ${this.buildFlattenNodeAttributes('cover-image')} />
-<block ks:elif="{{item.nn==='${contentAlias}'}}">{{item.v}}</block>`
-
-    return template
-  }
-
-  buildFlattenText = (level = this.flattenTextLevel): string => {
-    if (level === 0) {
-      return `<block>{{i.${Shortcuts.Childnodes}[index].${Shortcuts.Text}}}</block>`
-    }
-
-    const child = this.buildFlattenText(level - 1)
-
-    const componentsAlias = this.componentsAlias
-    const contentAlias = componentsAlias['#text']._num
-
-    const template =
-`<block ks:if="item.nn === '${contentAlias}'">{{item.v}}</block><text ks:else id="{{item.uid}}" ${this.buildFlattenNodeAttributes('text')}>
-  <block ks:for="{{item.cn}}" ks:key="uid">
-    ${indent(child, 4)}
-  </block>
-</text>`
-    return template
-  }
-
-  modifyLoopBody = (child: string, nodeName: string): string => {
-    switch (nodeName) {
-      case 'view':
-        return this.buildFlattenView()
-
-      case 'text':
-      case 'static-text':
-        return this.buildFlattenText()
-
-      case 'cover-view':
-        return this.buildFlattenCoverView()
-
-      default:
-        return child
-    }
+  buildXsTemplate() {
+    return '<ks module="xs" src="/utils.ks" />'
   }
 }