feat(components): JSX 内置组件需要从@tarojs/components 引入

psaren · Jun 1, 2020 · 7a0bd9c · 7a0bd9c
1 parent e62d4ea
commit 7a0bd9c
Show file tree

Hide file tree

Showing 64 changed files with 616 additions and 521 deletions.
diff --git a/config/formatTag.js b/config/formatTag.js
@@ -0,0 +1,34 @@
+const fs = require('fs')
+const { resolve } = require('path')
+const glob = require('glob')
+
+// 转换 小写 tag
+const formatTag = (file) => {
+  let content = fs.readFileSync(file, { encoding: 'utf8' })
+
+  const matched = content.match(/<[a-z]+/g)
+
+  const matchedUniq = Array.from(new Set(matched))
+
+  const comps = matchedUniq.map((item) => {
+    const tag = item.replace('<', '').replace(/[a-z]/, (p) => p.toUpperCase())
+    content = content
+      .replace(new RegExp('<' + tag, 'gi'), `<${tag}`)
+      .replace(new RegExp(`</${tag}`, 'gi'), `</${tag}`)
+    return tag
+  })
+  if (comps) {
+    const compStr = comps.join(', ')
+
+    const impStr = `import { ${compStr} } from '@tarojs/components'\n`
+
+    fs.writeFileSync(file, impStr + content, { encoding: 'utf8' })
+  }
+}
+
+// 匹配 所有组件
+console.time('Time')
+glob(resolve(__dirname, '../src/components/**/*.[jt]sx'), {}, function (er, files) {
+  files.forEach(formatTag)
+  console.timeEnd('Time')
+})
diff --git a/package.json b/package.json
@@ -52,9 +52,9 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.7.7",
-    "@tarojs/components": "3.0.0-beta.6",
-    "@tarojs/runtime": "3.0.0-beta.6",
-    "@tarojs/taro": "3.0.0-beta.6",
+    "@tarojs/components": "3.0.0-rc.3",
+    "@tarojs/runtime": "3.0.0-rc.3",
+    "@tarojs/taro": "3.0.0-rc.3",
     "classnames": "^2.2.6",
     "dayjs": "^1.8.27",
     "lodash": "^4.17.15",
@@ -68,8 +68,8 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-json": "^4.0.3",
     "@rollup/plugin-node-resolve": "^7.1.3",
-    "@tarojs/mini-runner": "3.0.0-beta.6",
-    "@tarojs/webpack-runner": "3.0.0-beta.6",
+    "@tarojs/mini-runner": "3.0.0-rc.3",
+    "@tarojs/webpack-runner": "3.0.0-rc.3",
     "@types/webpack-env": "^1.13.6",
     "@typescript-eslint/eslint-plugin": "^2.x",
     "@typescript-eslint/parser": "^2.x",
@@ -81,15 +81,15 @@
     "babel-jest": "^26.0.1",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
-    "babel-preset-taro": "3.0.0-beta.6",
+    "babel-preset-taro": "3.0.0-rc.3",
     "babelrc-rollup": "^3.0.0",
     "conventional-changelog-cli": "^2.0.34",
     "copy-dir": "^1.2.0",
     "cross-env": "^7.0.2",
     "csstype": "^2.6.10",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-config-taro": "3.0.0-beta.6",
+    "eslint-config-taro": "3.0.0-rc.3",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^6.2.2",
     "jest": "^26.0.1",

diff --git a/src/app.ts b/src/app.ts
@@ -2,8 +2,8 @@ import Vue from 'vue'
 import store from './store'
 import './app.scss'
 // Vue.config.productionTip = false
-import TaroUi from '../dist'
-// import TaroUi from './index'
+// import TaroUi from '../dist'
+import TaroUi from './index'
 Vue.use(TaroUi)
 
 const App = new Vue({

diff --git a/src/components/accordion/index.jsx b/src/components/accordion/index.jsx
@@ -1,3 +1,4 @@
+import { View } from '@tarojs/components'
 import classNames from 'classnames'
 import mixins from '../mixins'
 import { delayQuerySelector } from '../../utils/common'
@@ -125,21 +126,21 @@ export default {
     }
 
     return (
-      <view class={rootCls} style={customStyle}>
-        <view class={headerCls} onTap={this.handleClick}>
-          {icon && icon.value && <view class={iconCls} style={iconStyle}></view>}
-          <view class="at-accordion__info">
-            <view class="at-accordion__info__title">{title}</view>
-            <view class="at-accordion__info__note">{note}</view>
-          </view>
-          <view class={arrowCls}>
-            <view class="at-icon at-icon-chevron-down"></view>
-          </view>
-        </view>
-        <view style={contentStyle} class={contentCls}>
-          <view class="at-accordion__body">{this.$slots.default}</view>
-        </view>
-      </view>
+      <View class={rootCls} style={customStyle}>
+        <View class={headerCls} onTap={this.handleClick}>
+          {icon && icon.value && <View class={iconCls} style={iconStyle}></View>}
+          <View class="at-accordion__info">
+            <View class="at-accordion__info__title">{title}</View>
+            <View class="at-accordion__info__note">{note}</View>
+          </View>
+          <View class={arrowCls}>
+            <View class="at-icon at-icon-chevron-down"></View>
+          </View>
+        </View>
+        <View style={contentStyle} class={contentCls}>
+          <View class="at-accordion__body">{this.$slots.default}</View>
+        </View>
+      </View>
     )
   },
 }
diff --git a/src/components/action-sheet/body/index.jsx b/src/components/action-sheet/body/index.jsx
@@ -1,3 +1,4 @@
+import { View } from '@tarojs/components'
 import classNames from 'classnames'
 
 export default {
@@ -10,6 +11,6 @@ export default {
   },
   render() {
     const rootClass = classNames('at-action-sheet__body', this.className)
-    return <view class={rootClass}>{this.$slots.default}</view>
+    return <View class={rootClass}>{this.$slots.default}</View>
   },
 }
diff --git a/src/components/action-sheet/body/item/index.jsx b/src/components/action-sheet/body/item/index.jsx
@@ -1,3 +1,4 @@
+import { View } from '@tarojs/components'
 import classNames from 'classnames'
 
 export default {
@@ -21,9 +22,9 @@ export default {
     const rootClass = classNames('at-action-sheet__item', this.className)
 
     return (
-      <view class={rootClass} onTap={this.handleClick}>
+      <View class={rootClass} onTap={this.handleClick}>
         {this.$slots.default}
-      </view>
+      </View>
     )
   },
 }
diff --git a/src/components/action-sheet/footer/index.jsx b/src/components/action-sheet/footer/index.jsx
@@ -1,3 +1,4 @@
+import { View } from '@tarojs/components'
 import classNames from 'classnames'
 
 export default {
@@ -21,9 +22,9 @@ export default {
     const rootClass = classNames('at-action-sheet__footer', this.className)
 
     return (
-      <view onTap={this.handleClick} class={rootClass}>
+      <View onTap={this.handleClick} class={rootClass}>
         {this.$slots.default}
-      </view>
+      </View>
     )
   },
 }
diff --git a/src/components/action-sheet/header/index.jsx b/src/components/action-sheet/header/index.jsx
@@ -1,3 +1,4 @@
+import { View } from '@tarojs/components'
 import classNames from 'classnames'
 
 export default {
@@ -11,6 +12,6 @@ export default {
   render() {
     const rootClass = classNames('at-action-sheet__header', this.className)
 
-    return <view class={rootClass}>{this.$slots.default}</view>
+    return <View class={rootClass}>{this.$slots.default}</View>
   },
 }
diff --git a/src/components/action-sheet/index.jsx b/src/components/action-sheet/index.jsx
@@ -1,3 +1,4 @@
+import { View } from '@tarojs/components'
 import classNames from 'classnames'
 import ActionSheetBody from './body/index'
 import ActionSheetFooter from './footer/index'
@@ -72,18 +73,18 @@ export default {
     )
 
     return (
-      <view class={rootClass} onTouchMove={this.handleTouchMove}>
-        <view onTap={this.close} class="at-action-sheet__overlay" />
-        <view class="at-action-sheet__container">
+      <View class={rootClass} onTouchMove={this.handleTouchMove}>
+        <View onTap={this.close} class="at-action-sheet__overlay" />
+        <View class="at-action-sheet__container">
           {title && <ActionSheetHeader>{title}</ActionSheetHeader>}
           <ActionSheetBody>{this.$slots.default}</ActionSheetBody>
           {cancelText && (
             <ActionSheetFooter props={{ onClick: this.handleCancel }}>
               {cancelText}
             </ActionSheetFooter>
           )}
-        </view>
-      </view>
+        </View>
+      </View>
     )
   },
 }
diff --git a/src/components/activity-indicator/index.jsx b/src/components/activity-indicator/index.jsx
@@ -1,3 +1,4 @@
+import { View } from '@tarojs/components'
 import classNames from 'classnames'
 import AtLoading from '../loading/index.jsx'
 
@@ -42,12 +43,12 @@ export default {
     )
 
     return (
-      <view class={rootClass}>
-        <view class="at-activity-indicator__body">
+      <View class={rootClass}>
+        <View class="at-activity-indicator__body">
           <AtLoading size={size} color={color} />
-        </view>
-        {content && <view class="at-activity-indicator__content">{content}</view>}
-      </view>
+        </View>
+        {content && <View class="at-activity-indicator__content">{content}</View>}
+      </View>
     )
   },
 }
diff --git a/src/components/avatar/index.jsx b/src/components/avatar/index.jsx
@@ -1,3 +1,4 @@
+import { View, Image } from '@tarojs/components'
 import classNames from 'classnames'
 import { getEnvs } from '../../utils/common'
 
@@ -57,11 +58,11 @@ export default {
     const isImage = !isOpenData && image !== ''
     const isText = !isOpenData && !image
     return (
-      <view class={classNames(rootClassName, classObject, className)} style={customStyle}>
+      <View class={classNames(rootClassName, classObject, className)} style={customStyle}>
         {isOpenData && <OpenData type={openData.type}></OpenData>}
-        {isImage && <image class="at-avatar__img" src={image} />}
-        {isText && <view class="at-avatar__text">{letter}</view>}
-      </view>
+        {isImage && <Image class="at-avatar__img" src={image} />}
+        {isText && <View class="at-avatar__text">{letter}</View>}
+      </View>
     )
   },
 }
diff --git a/src/components/badge/index.jsx b/src/components/badge/index.jsx
@@ -1,3 +1,4 @@
+import { View } from '@tarojs/components'
 import classNames from 'classnames'
 
 /**
@@ -46,14 +47,14 @@ export default {
 
     const val = formatValue(value, maxValue)
     return (
-      <view class={classNames(rootClassName, className)} style={customStyle}>
+      <View class={classNames(rootClassName, className)} style={customStyle}>
         {this.$slots.default}
         {dot ? (
-          <view class="at-badge__dot"></view>
+          <View class="at-badge__dot"></View>
         ) : (
-          val !== '' && <view class="at-badge__num">{val}</view>
+          val !== '' && <View class="at-badge__num">{val}</View>
         )}
-      </view>
+      </View>
     )
   },
 }
diff --git a/src/components/button/index.jsx b/src/components/button/index.jsx
@@ -1,3 +1,4 @@
+import { Button, View, Form } from '@tarojs/components'
 import AtLoading from '../loading/index.jsx'
 import classNames from 'classnames'
 import { getEnvs } from '../../utils/common'
@@ -217,14 +218,14 @@ export default {
     }
 
     const webButton = (
-      <button
+      <Button
         class="at-button__wxbutton"
         lang={lang}
-        formType={formType === 'submit' || formType === 'reset' ? formType : undefined}></button>
+        formType={formType === 'submit' || formType === 'reset' ? formType : undefined}></Button>
     )
 
     const button = (
-      <button
+      <Button
         class="at-button__wxbutton"
         formType={formType}
         openType={openType}
@@ -235,27 +236,27 @@ export default {
         sendMessageImg={sendMessageImg}
         showMessageCard={showMessageCard}
         appParameter={appParameter}
-        {...{ on: this.getWxButtonProps() }}></button>
+        {...{ on: this.getWxButtonProps() }}></Button>
     )
     return (
-      <view
+      <View
         onTap={this.hanldeClick}
         class={classNames(rootClassName, classObject, className)}
         style={customStyle}>
         {isWEB && !disabled && webButton}
         {isWEAPP && !disabled && (
-          <form onSubmit={this.handleSubmit} onReset={this.handleReset}>
+          <Form onSubmit={this.handleSubmit} onReset={this.handleReset}>
             {button}
-          </form>
+          </Form>
         )}
         {isALIPAY && !disabled && button}
         {loading && (
-          <view class="at-button__icon">
+          <View class="at-button__icon">
             <AtLoading color={loadingColor} size={loadingSize} />
-          </view>
+          </View>
         )}
-        <view class="at-button__text">{this.$slots.default}</view>
-      </view>
+        <View class="at-button__text">{this.$slots.default}</View>
+      </View>
     )
   },
 }
diff --git a/src/components/calendar/body/index.jsx b/src/components/calendar/body/index.jsx
@@ -1,3 +1,4 @@
+import { View } from '@tarojs/components'
 import Vue from 'vue'
 import classnames from 'classnames'
 import dayjs from 'dayjs'
@@ -273,30 +274,30 @@ const AtCalendarBody = Vue.extend({
 
     if (!isSwiper) {
       return (
-        <view
+        <View
           class={classnames(
             'main',
             'at-calendar-slider__main',
             `at-calendar-slider__main--${process.env.TARO_ENV}`
           )}>
           <AtCalendarDayList />
-          <view class="main__body body">
-            <view class="body__slider body__slider--now">
+          <View class="main__body body">
+            <View class="body__slider body__slider--now">
               <AtCalendarDateList
                 list={listGroup[1].list}
                 props={{
                   onClick: this.onDayClick,
                   onLongClick: this.onLongClick,
                 }}
               />
-            </view>
-          </view>
-        </view>
+            </View>
+          </View>
+        </View>
       )
     }
 
     return (
-      <view
+      <View
         class={classnames(
           'main',
           'at-calendar-slider__main',
@@ -327,7 +328,7 @@ const AtCalendarBody = Vue.extend({
             </SwiperItem>
           ))}
         </Swiper>
-      </view>
+      </View>
     )
   },
 })