Merge pull request #65 from b2nil/dev

fix lib builds

README.md

@@ -26,7 +26,7 @@ yarn add taro-ui-vue3
 - 按需引用组件和组件样式
 
   ```typescript
-  import { AtButton } from 'taro-ui-vue3'
+  import { AtButton } from 'taro-ui-vue3/lib'
   import 'taro-ui-vue3/dist/style/components/button.scss'
 
   export default {

config/index.js

@@ -1,4 +1,5 @@
 const path = require('path')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
 const config = {
   projectName: 'taro-ui-vue3',
@@ -18,10 +19,9 @@ const config = {
   },
   alias: {
     '@/components': path.resolve(__dirname, '..', 'src/components'),
-    '@/utils': path.resolve(__dirname, '..', 'src/utils'),
     '@/style': path.resolve(__dirname, '..', 'src/style'),
     '@/assets': path.resolve(__dirname, '..', 'src/assets'),
-    '@/composables': path.resolve(__dirname, '..', 'src/composables'),
+    'taro-ui-vue3$': path.resolve(__dirname, '..', 'dist/index.esm.js')
   },
   copy: {
     patterns: [
@@ -53,16 +53,24 @@ const config = {
       }
     },
     webpackChain(chain) {
-      chain.module
-        .rule('typescript')
-        .test(/.\ts$/)
-        .use('ts-loader')
-        .loader('ts-loader')
-        .tap(options => ({
-          ...options,
-          appendTsSuffixTo: [/\.vue$/]
-        }))
-        .end()
+      chain.merge({
+        plugin: {
+          install: {
+            plugin: BundleAnalyzerPlugin,
+          },
+        },
+        optimization: {
+          usedExports: true,
+        },
+        module: {
+          rules: [
+            {
+              include: path.resolve('node_modules', 'taro-ui-vue3'),
+              sideEffects: false
+            }
+          ]
+        }
+      })
     }
   },
   h5: {
@@ -84,8 +92,26 @@ const config = {
     },
     webpackChain(chain) {
       chain.resolve.alias
-        .set('@tarojs/components$', path.resolve(__dirname, '..', 'node_modules/@tarojs/components/dist-h5/vue3/index.js'))
-        .set('@tarojs/components/dist/taro-components/taro-components.css', path.resolve(__dirname, '..', 'node_modules/@tarojs/components/dist/taro-components/taro-components.css'))
+        .set('@tarojs/components$', '@tarojs/components/dist-h5/vue3/index.js')
+
+      chain.merge({
+        plugin: {
+          install: {
+            plugin: BundleAnalyzerPlugin,
+          },
+        },
+        optimization: {
+          usedExports: true,
+        },
+        module: {
+          rules: [
+            {
+              include: path.resolve('node_modules', 'taro-ui-vue3'),
+              sideEffects: false
+            }
+          ]
+        }
+      })
     },
     router: {
       mode: 'browser'

package.json

@@ -2,8 +2,6 @@
   "name": "taro-ui-vue3",
   "version": "1.0.0-alpha.15",
   "description": "Taro UI Rewritten in Vue 3.0",
-  "main:h5": "dist/index.esm.js",
-  "browser": "dist/index.umd.js",
   "module": "dist/index.esm.js",
   "main": "dist/index.js",
   "source": "src/index.ts",
@@ -22,6 +20,7 @@
   "files": [
     "dist",
     "lib/components",
+    "lib/composables",
     "lib/utils",
     "lib/index.js",
     "lib/index.js.map",
@@ -75,21 +74,25 @@
     "ios >= 8"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.7.7",
     "dayjs": "^1.8.29",
-    "lodash": "^4.17.19",
+    "lodash-es": "^4.17.15"
+  },
+  "peerDependencies": {
+    "@tarojs/components": "^3.0.15",
+    "@tarojs/taro": "^3.0.15",
     "vue": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
-    "@rollup/plugin-commonjs": "^15.0.0",
+    "@babel/runtime": "^7.7.7",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@tarojs/components": "^3.0.15",
     "@tarojs/mini-runner": "^3.0.15",
     "@tarojs/runtime": "^3.0.15",
     "@tarojs/taro": "^3.0.15",
     "@tarojs/webpack-runner": "^3.0.15",
+    "@types/lodash-es": "^4.17.3",
     "@types/webpack-env": "^1.13.6",
     "@typescript-eslint/eslint-plugin": "^2.x",
     "@typescript-eslint/parser": "^2.x",
@@ -108,6 +111,8 @@
     "stylelint": "^9.3.0",
     "ts-loader": "^8.0.2",
     "typescript": "^3.7.0",
-    "vue-loader": "^16.0.0-beta.7"
+    "vue": "^3.0.0",
+    "vue-loader": "^16.0.0-beta.7",
+    "webpack-bundle-analyzer": "^4.2.0"
   }
 }

rollup.config.js

@@ -1,7 +1,6 @@
 import NodePath from 'path'
 import RollupJson from '@rollup/plugin-json'
 import RollupNodeResolve from '@rollup/plugin-node-resolve'
-import RollupCommonjs from '@rollup/plugin-commonjs'
 import RollupTypescript from 'rollup-plugin-typescript2'
 import RollupCopy from 'rollup-plugin-copy'
 import RollupSass from 'rollup-plugin-sass'
@@ -11,9 +10,8 @@ import Package from './package.json'
 const resolveFile = path => NodePath.resolve(__dirname, path)
 const externalPackages = [
   'vue',
-  '@tarojs/components',
-  '@tarojs/runtime',
   '@tarojs/taro',
+  '@tarojs/components',
 ]
 
 export default {
@@ -28,17 +26,6 @@ export default {
       file: resolveFile(Package.module),
       format: 'es',
       sourcemap: true
-    },
-    {
-      file: resolveFile(Package.browser),
-      format: 'umd',
-      name: 'taro-ui-vue3',
-      sourcemap: true,
-      globals: {
-        'vue': 'vue',
-        '@tarojs/components': 'components',
-        '@tarojs/taro': 'Taro'
-      }
     }
   ],
   external: externalPackages,
@@ -49,9 +36,6 @@ export default {
         moduleDirectory: 'node_modules'
       }
     }),
-    RollupCommonjs({
-      include: /\/node_modules\//
-    }),
     RollupJson(),
     RollupTypescript({
       tsconfig: resolveFile('tsconfig.rollup.json')

src/components/calendar/body/index.ts

@@ -3,7 +3,7 @@ import { Swiper, SwiperItem, View } from '@tarojs/components'
 import { BaseEventOrig, ITouch, ITouchEvent } from '@tarojs/components/types/common'
 import { AtCalendarBodyListGroup, AtCalendarBodyProps, Calendar, AtCalendarBodyState } from 'types/calendar'
 import Taro from '@tarojs/taro'
-import dayjs from 'dayjs'
+import dayjs from 'dayjs/esm/index'
 import { delayQuerySelector } from '../../../utils/common'
 import generateCalendarGroup from '../common/helper'
 import AtCalendarDateList from '../ui/date-list/index'

src/components/calendar/common/helper.ts

@@ -1,5 +1,5 @@
-import dayjs, { Dayjs } from 'dayjs'
-import _flow from 'lodash/flow'
+import dayjs, { Dayjs } from 'dayjs/esm/index'
+import _flow from 'lodash-es/flow'
 import { Calendar } from 'types/calendar'
 import * as constant from './constant'
 import plugins from './plugins'
@@ -26,11 +26,11 @@ function getFullItem(
 export default function generateCalendarGroup(
   options: Calendar.GroupOptions
 ): (
-  generateDate: number,
-  selectedDate: Calendar.SelectedDate,
-  isShowStatus?: boolean
-) => Calendar.ListInfo<Calendar.Item> {
-  return function(
+    generateDate: number,
+    selectedDate: Calendar.SelectedDate,
+    isShowStatus?: boolean
+  ) => Calendar.ListInfo<Calendar.Item> {
+  return function (
     generateDate: number,
     selectedDate: Calendar.SelectedDate,
     isShowStatus?: boolean

src/components/calendar/common/plugins.ts

@@ -1,5 +1,5 @@
-import dayjs from 'dayjs'
-import _isEmpty from 'lodash/isEmpty'
+import dayjs from 'dayjs/esm/index'
+import _isEmpty from 'lodash-es/isEmpty'
 import { Calendar } from 'types/calendar'
 
 interface PluginArg {

src/components/calendar/controller/index.ts

@@ -2,7 +2,7 @@ import { h, defineComponent, computed, PropType } from "vue"
 import { Picker, Text, View } from '@tarojs/components'
 import { Calendar, AtCalendarControllerProps } from 'types/calendar'
 import { CommonEvent } from '@tarojs/components/types/common'
-import dayjs from 'dayjs'
+import dayjs from 'dayjs/esm/index'
 
 const AtCalendarController = defineComponent({
   name: "AtCalendarController",

src/components/calendar/index.ts

@@ -1,5 +1,5 @@
 import { h, defineComponent, reactive, toRefs, watch, nextTick, mergeProps, PropType } from "vue"
-import dayjs, { Dayjs } from 'dayjs'
+import dayjs, { Dayjs } from 'dayjs/esm/index'
 
 import { View } from '@tarojs/components'
 import { CommonEvent } from '@tarojs/components/types/common'

src/components/countdown/index.ts

@@ -4,8 +4,6 @@ import { AtCountDownProps, AtCountdownState } from 'types/countdown'
 
 import AtCountdownItem from "./item"
 
-import './index.scss'
-
 const toSeconds = (
   day: number,
   hours: number,

src/components/divider/index.ts

@@ -1,7 +1,7 @@
 import { h, defineComponent, computed, mergeProps, PropType } from "vue"
 import { View } from '@tarojs/components'
 import { AtDividerProps } from 'types/divider'
-import { pxTransform } from "@/utils/common"
+import { pxTransform } from "../../utils/common"
 
 const AtDivider = defineComponent({
   name: "AtDivider",

src/components/float-layout/index.ts

@@ -1,5 +1,5 @@
 import { h, defineComponent, computed, ref, nextTick, watch, mergeProps, PropType } from "vue"
-import { handleTouchScroll } from "@/utils/common"
+import { handleTouchScroll } from "../../utils/common"
 
 import { ScrollView, Text, View } from '@tarojs/components'
 import { CommonEvent } from '@tarojs/components/types/common'

src/components/grid/index.ts

@@ -1,9 +1,9 @@
 import { h, defineComponent, computed, mergeProps, PropType } from "vue"
-import _chunk from 'lodash/chunk'
+import _chunk from 'lodash-es/chunk'
 import { Image, View, Text } from '@tarojs/components'
 import { CommonEvent } from '@tarojs/components/types'
 import { AtGridProps, AtGridItem } from 'types/grid'
-import { mergeStyle } from "@/utils/common"
+import { mergeStyle } from "../../utils/common"
 
 const AtGrid = defineComponent({
   name: "AtGrid",

src/components/icon/index.ts

@@ -1,7 +1,7 @@
 import { defineComponent, computed, h, mergeProps, PropType } from "vue"
 import { Text } from '@tarojs/components'
 import { AtIconProps } from "types/icon"
-import { pxTransform } from "@/utils/common"
+import { pxTransform } from "../../utils/common"
 
 const AtIcon = defineComponent({
   name: "AtIcon",

src/components/image-picker/index.ts

@@ -1,7 +1,7 @@
 import { h, defineComponent, computed, mergeProps, PropType } from "vue"
 import Taro from '@tarojs/taro'
 
-import { uuid } from '@/utils/common'
+import { uuid } from '../../utils/common'
 
 import { Image, View } from '@tarojs/components'
 import { AtImagePickerProps, File } from 'types/image-picker'

src/components/indexes/index.ts

@@ -15,7 +15,7 @@ import {
 import {
   delayQuerySelector,
   pxTransform,
-} from "@/utils/common"
+} from "../../utils/common"
 
 import Taro from '@tarojs/taro'
 import { ScrollView, View } from '@tarojs/components'

src/components/input-number/index.ts

@@ -1,6 +1,6 @@
 import { h, defineComponent, computed, mergeProps, PropType } from "vue"
-import _toString from 'lodash/toString'
-import { pxTransform } from "@/utils/common"
+import _toString from 'lodash-es/toString'
+import { pxTransform } from "../../utils/common"
 
 import { Input, Text, View } from '@tarojs/components'
 import { CommonEvent, ITouchEvent } from '@tarojs/components/types/common'

src/components/input/index.ts

@@ -11,7 +11,7 @@ import {
   KeyboardHeightEventDetail,
 } from "types/input"
 import { ENV_TYPE, getEnv } from "@tarojs/taro"
-import { uuid } from "@/utils/common"
+import { uuid } from "../../utils/common"
 
 type PickAtInputProps = Pick<AtInputProps, 'maxLength' | 'disabled' | 'password'>
 type GetInputPropsReturn = PickAtInputProps & Pick<InputProps, 'type'>

src/components/modal/index.ts

@@ -1,6 +1,6 @@
 import { defineComponent, reactive, nextTick, watch, h, computed, mergeProps, PropType } from 'vue'
 
-import { handleTouchScroll } from '@/utils/common'
+import { handleTouchScroll } from '../../utils/common'
 
 import Taro from '@tarojs/taro'
 import { Button, Text, View } from '@tarojs/components'

src/components/nav-bar/index.ts

@@ -2,7 +2,7 @@ import { h, defineComponent, computed, mergeProps, PropType } from 'vue'
 import { Text, View } from '@tarojs/components'
 import { ITouchEvent } from '@tarojs/components/types/common'
 import { AtNavBarProps } from 'types/nav-bar'
-import { mergeStyle, pxTransform } from '@/utils/common'
+import { mergeStyle, pxTransform } from '../../utils/common'
 
 const AtNavBar = defineComponent({
   name: "AtNavBar",

src/components/range/index.ts

@@ -6,7 +6,7 @@ import {
   delayQuerySelector,
   getEventDetail,
   mergeStyle
-} from '@/utils/common'
+} from '../../utils/common'
 
 const AtRange = defineComponent({
   name: "AtRange",

src/components/rate/index.ts

@@ -2,7 +2,7 @@ import { h, defineComponent, computed, mergeProps, PropType } from 'vue'
 import { Text, View } from '@tarojs/components'
 import { CommonEvent } from '@tarojs/components/types/common'
 import { AtRateProps } from 'types/rate'
-import { pxTransform } from '@/utils/common'
+import { pxTransform } from '../../utils/common'
 
 const AtRate = defineComponent({
   name: "AtRate",

src/components/search-bar/index.ts

@@ -3,7 +3,7 @@ import { Input, Text, View } from '@tarojs/components'
 import { BaseEventOrig, CommonEvent, ITouchEvent } from '@tarojs/components/types/common'
 import { AtSearchBarProps, AtSearchBarState } from 'types/search-bar'
 import { ENV_TYPE, getEnv } from '@tarojs/taro'
-import { uuid } from '@/utils/common'
+import { uuid } from '../../utils/common'
 
 const AtSearchBar = defineComponent({
   name: "AtSearchBar",

src/components/segmented-control/index.ts

@@ -2,7 +2,7 @@ import { h, defineComponent, computed, mergeProps, PropType } from 'vue'
 import { View } from '@tarojs/components'
 import { CommonEvent } from '@tarojs/components/types/common'
 import { AtSegmentedControlProps } from 'types/segmented-control'
-import { pxTransform } from '@/utils/common'
+import { pxTransform } from '../../utils/common'
 
 const AtSegmentedControl = defineComponent({
 

src/components/skeleton/index.ts

@@ -11,8 +11,8 @@ import {
   View
 } from "@tarojs/components"
 
-import { dimensionsFactory } from "@/composables/dimensions"
-import { makeElevationProps, useElevationClasses } from "@/composables/elevation"
+import { dimensionsFactory } from "../../composables/dimensions"
+import { makeElevationProps, useElevationClasses } from "../../composables/elevation"
 
 // types
 import {