refactor(mobile): remove @opentiny/mobile-utils package, and add alia… (#2767)

* refactor(mobile): remove @opentiny/mobile-utils package, and add alias to utils

* refactor(mobile): fix pnpm dev

Author: shenjunjian

.eslintrc.js

@@ -51,6 +51,7 @@ module.exports = {
     '@typescript-eslint/restrict-template-expressions': 'off',
     '@typescript-eslint/no-invalid-this': 'off',
     'vue/no-deprecated-dollar-scopedslots-api': 'off',
-    '@typescript-eslint/lines-between-class-members': 'off'
+    '@typescript-eslint/lines-between-class-members': 'off',
+    '@typescript-eslint/no-this-alias': 'off'
   }
 }

examples/sites/vite.config.ts

@@ -135,6 +135,7 @@ export default defineConfig((config) => {
     resolve: {
       extensions: ['.js', '.ts', '.tsx', '.vue'],
       alias: {
+        '@mobile-root': pathFromWorkspaceRoot('packages/mobile'),
         '@': path.resolve('src'),
         '@demos': path.resolve(`${demosPath}`),
         '@menu': menuPath,

examples/vue3/vite.config.ts

@@ -92,6 +92,7 @@ export default defineConfig((config) => {
     resolve: {
       extensions: ['.js', '.ts', '.tsx', '.vue'],
       alias: {
+        '@mobile-root': pathFromWorkspaceRoot('packages/mobile'),
         'vue': path.resolve('node_modules/vue/dist/vue.esm-bundler.js'),
         'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
         '@': pathFromWorkspaceRoot('examples/docs/newsrc'),

packages/mobile/components/action-sheet/src/mobile.vue

@@ -52,7 +52,7 @@
 
 <script lang="ts">
 import { renderless, api } from './renderless/vue'
-import { $prefix, setup, defineComponent } from '../../../vue-common'
+import { $prefix, setup, defineComponent } from '@mobile-root/vue-common'
 import '@opentiny/vue-theme-mobile/action-sheet/index.less'
 import BScroll from '@better-scroll/core'
 import { actionSheetProps } from './action-sheet'

packages/mobile/components/alert/src/mobile.vue

@@ -28,7 +28,7 @@
 
 <script lang="ts">
 import { renderless, api } from './renderless/vue'
-import { setup, defineComponent } from '../../../vue-common'
+import { setup, defineComponent } from '@mobile-root/vue-common'
 import { iconClose, iconSuccess, iconError, iconHelp, iconWarningTriangle } from '@opentiny/vue-icon'
 import type { IAlertApi } from './alert'
 import { alertProps } from './alert'

packages/mobile/components/avatar/src/mobile.vue

@@ -10,7 +10,7 @@
  *
  -->
 <script lang="tsx">
-import { $prefix, setup, h, defineComponent } from '../../../vue-common'
+import { $prefix, setup, h, defineComponent } from '@mobile-root/vue-common'
 import { renderless, api } from './renderless/vue'
 import '@opentiny/vue-theme-mobile/avatar/index.less'
 

packages/mobile/components/badge/src/mobile.vue

@@ -38,7 +38,7 @@
 
 <script lang="ts">
 import { renderless, api } from './renderless/vue'
-import { setup, defineComponent } from '../../../vue-common'
+import { setup, defineComponent } from '@mobile-root/vue-common'
 import { badgeProps } from './badge'
 import '@opentiny/vue-theme-mobile/badge/index.less'
 

packages/mobile/components/badge/src/renderless/vue.ts

@@ -11,7 +11,7 @@
  */
 
 import { computedContent, computedValueRef, computedTransform } from './index'
-import { xss } from '@opentiny/mobile-utils/xss'
+import { xss } from '@mobile-root/utils/xss'
 import type { IBadgeState, IBadgeProps, IBadgeApi, IBadgeRenderlessParams } from '../badge'
 
 export const api = ['state']

packages/mobile/components/button/src/mobile.vue

@@ -45,7 +45,7 @@
 
 <script lang="ts">
 import { renderless, api } from './renderless/vue'
-import { setup, defineComponent } from '../../../vue-common'
+import { setup, defineComponent } from '@mobile-root/vue-common'
 import { buttonProps } from './button'
 import '@opentiny/vue-theme-mobile/button/index.less'
 

packages/mobile/components/button/src/renderless/index.ts

@@ -10,7 +10,7 @@
  *
  */
 import type { IButtonRenderlessParams, IButtonState } from '../button'
-import { xss } from '@opentiny/mobile-utils'
+import { xss } from '@mobile-root/utils'
 
 export const handleClick =
   ({ emit, props, state }: Pick<IButtonRenderlessParams, 'emit' | 'props' | 'state'>) =>

packages/mobile/components/checkbox-group/src/mobile.vue

@@ -26,7 +26,7 @@
 
 <script lang="tsx">
 import { renderless, api } from './renderless/vue'
-import { $prefix, setup, defineComponent } from '../../../vue-common'
+import { $prefix, setup, defineComponent } from '@mobile-root/vue-common'
 import Checkbox from '../../checkbox'
 import { CheckboxGroupProps } from './checkbox-group'
 import '@opentiny/vue-theme-mobile/checkbox-group/index.less'

packages/mobile/components/checkbox/src/checkbox.ts

@@ -9,8 +9,8 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
-import { $prefix } from '../../../vue-common'
-import type { PropType } from '../../../vue-common'
+import { $prefix } from '@mobile-root/vue-common'
+import type { PropType } from '@mobile-root/vue-common'
 import type { ExtractPropTypes, ComputedRef } from 'vue'
 import type { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from '../../../types/shared.type'
 

packages/mobile/components/checkbox/src/mobile.vue

@@ -64,7 +64,7 @@
 
 <script lang="ts">
 import { renderless, api } from './renderless/vue'
-import { $prefix, setup, defineComponent } from '../../../vue-common'
+import { $prefix, setup, defineComponent } from '@mobile-root/vue-common'
 import { checkboxProps } from './checkbox'
 import '@opentiny/vue-theme-mobile/checkbox/index.less'
 

packages/mobile/components/checkbox/src/renderless/index.ts

@@ -11,7 +11,7 @@
  */
 
 import type { ICheckboxRenderlessParams, ICheckboxState, ICheckboxChangeEvent, ICheckboxProps } from '../checkbox'
-import { isNull } from '@opentiny/mobile-utils/type'
+import { isNull } from '@mobile-root/utils/type'
 
 export const addToStore =
   ({ state, props }: Pick<ICheckboxRenderlessParams, 'state' | 'props'>) =>

packages/mobile/components/container/src/mobile.vue

@@ -25,7 +25,7 @@
 
 <script lang="ts">
 import { renderless, api } from './renderless/vue'
-import { setup, defineComponent } from '../../../vue-common'
+import { setup, defineComponent } from '@mobile-root/vue-common'
 import { containerProps } from './container'
 import '@opentiny/vue-theme-mobile/container/index.less'
 

packages/mobile/components/container/src/renderless/index.ts

@@ -10,7 +10,7 @@
  *
  */
 
-import { isNumber } from '@opentiny/mobile-utils/type'
+import { isNumber } from '@mobile-root/utils/type'
 
 export const computedShowHeader =
   ({ constants, props }) =>
@@ -128,7 +128,7 @@ export const computedLeftStyle =
 export const computedShowRight =
   ({ constants, props }) =>
   () => {
-    return props.pattern === constants.DEFAULT ? false : true
+    return props.pattern !== constants.DEFAULT
   }
 
 export const computedRightStyle =

packages/mobile/components/date-picker/src/date-picker.ts

@@ -9,10 +9,11 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
-import type { PropType } from '../../../vue-common'
+import type { PropType } from '@mobile-root/vue-common'
 import { iconClose } from '@opentiny/vue-icon'
 import type { ComputedRef, ExtractPropTypes } from 'vue'
 import type { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from '../../../types/shared.type'
+
 export type { ISharedRenderlessParamHooks } from '../../../types/shared.type'
 
 const currentYear = new Date().getFullYear()

packages/mobile/components/date-picker/src/mobile.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import { props, setup, defineComponent } from '../../../vue-common'
+import { props, setup, defineComponent } from '@mobile-root/vue-common'
 import { renderless, api } from './renderless/vue'
 import MiniPicker from '../../mini-picker'
 import Input from '../../input'

packages/mobile/components/date-picker/src/renderless/vue.ts

@@ -27,7 +27,7 @@ import {
   onChange,
   updateColumnValue
 } from './index'
-import { DATE } from '@opentiny/mobile-utils'
+import { DATE } from '@mobile-root/utils'
 import type {
   IDatePickerApi,
   IDatePickerProps,

packages/mobile/components/dialog-box/src/dialog-box.ts

@@ -10,7 +10,7 @@
  *
  */
 
-import { $prefix } from '../../../vue-common'
+import { $prefix } from '@mobile-root/vue-common'
 import type { ExtractPropTypes } from 'vue'
 import type {
   handleCancel,

packages/mobile/components/dialog-box/src/mobile.vue

@@ -38,7 +38,7 @@
 
 <script lang="ts">
 import { renderless, api } from './renderless/vue'
-import { setup, defineComponent } from '../../../vue-common'
+import { setup, defineComponent } from '@mobile-root/vue-common'
 import { dialogBoxProps } from './dialog-box'
 import '@opentiny/vue-theme-mobile/dialog-box/index.less'
 

packages/mobile/components/dialog-box/src/renderless/index.ts

@@ -10,9 +10,9 @@
  *
  */
 
-import { on, off, addClass, removeClass } from '@opentiny/mobile-utils/deps/dom'
-import { emitEvent } from '@opentiny/mobile-utils/event'
-import { getDomNode } from '@opentiny/mobile-utils/deps/dom'
+import { on, off, addClass, removeClass } from '@mobile-root/utils/deps/dom'
+import { emitEvent } from '@mobile-root/utils/event'
+import { getDomNode } from '@mobile-root/utils/deps/dom'
 import type { IDialogBoxRenderlessParams, IDialogBoxStyle } from '../dialog-box'
 
 export const computedAnimationName =

packages/mobile/components/dialog-box/src/renderless/vue.ts

@@ -31,7 +31,7 @@ import {
   hideScrollbar,
   computedBodyStyle
 } from './index'
-import usePopup from '@opentiny/mobile-utils/deps/vue-popup'
+import usePopup from '@mobile-root/utils/deps/vue-popup'
 import type {
   IDialogBoxApi,
   IDialogBoxProps,

packages/mobile/components/dropdown-item/src/mobile.vue

@@ -99,11 +99,11 @@
 
 <script lang="ts">
 import { renderless, api } from './renderless/vue'
-import { setup, defineComponent, directive } from '../../../vue-common'
+import { setup, defineComponent, directive } from '@mobile-root/vue-common'
 import { iconYes } from '@opentiny/vue-icon'
 import Popup from '../../popup'
 import Button from '../../button'
-import Clickoutside from '@opentiny/mobile-utils/deps/clickoutside'
+import Clickoutside from '@mobile-root/utils/deps/clickoutside'
 import '@opentiny/vue-theme-mobile/dropdown-item/index.less'
 import { dropdownItemProps } from './dropdown-item'
 

packages/mobile/components/dropdown-item/src/renderless/index.ts

@@ -16,7 +16,7 @@ import type {
   IDropdownItemTag,
   IDropdownItemOptionStyle
 } from '../dropdown-item'
-import { on, off } from '@opentiny/mobile-utils/deps/dom'
+import { on, off } from '@mobile-root/utils/deps/dom'
 
 export const getTitle = (props: IDropdownItemRenderlessParams['props']) => (): string => {
   if (props.title) {

packages/mobile/components/dropdown-menu/src/mobile.vue

@@ -51,8 +51,8 @@
                   item.type === 'filter'
                     ? 'IconUnfilter'
                     : item.type === 'selection' && item.state.showPopup
-                      ? 'IconUp'
-                      : 'IconDown'
+                    ? 'IconUp'
+                    : 'IconDown'
                 "
                 :class="[item.type === 'filter' ? 'filter-icon' : '']"
               />
@@ -68,10 +68,10 @@
 
 <script lang="ts">
 import { renderless, api } from './renderless/vue'
-import { setup, defineComponent, directive } from '../../../vue-common'
+import { setup, defineComponent, directive } from '@mobile-root/vue-common'
 import { iconUp, iconDown, iconUnfilter, iconSort, iconDeltaDown, iconDeltaUp } from '@opentiny/vue-icon'
 import { dropdownMenuProps } from './dropdown-menu'
-import Clickoutside from '@opentiny/mobile-utils/deps/clickoutside'
+import Clickoutside from '@mobile-root/utils/deps/clickoutside'
 import '@opentiny/vue-theme-mobile/dropdown-menu/index.less'
 
 export default defineComponent({

packages/mobile/components/dropdown-menu/src/renderless/index.ts

@@ -11,7 +11,7 @@
  */
 
 import type { IDropdownMenuRenderlessParams, IDropdownMenuPopperParams, IDropdownItemVm } from '../dropdown-menu'
-import userPopper from '@opentiny/mobile-utils/deps/vue-popper'
+import userPopper from '@mobile-root/utils/deps/vue-popper'
 
 export const toggleItem =
   (state: IDropdownMenuRenderlessParams['state']) =>

packages/mobile/components/exception/src/mobile.vue

@@ -38,7 +38,7 @@
 
 <script>
 import { renderless, api } from './renderless/vue'
-import { setup, $prefix, defineComponent } from '../../../vue-common'
+import { setup, $prefix, defineComponent } from '@mobile-root/vue-common'
 import Button from '../../button'
 import { exceptionProps } from './exception'
 import '@opentiny/vue-theme-mobile/exception/index.less'

packages/mobile/components/file-upload/src/file-upload.ts

@@ -85,7 +85,7 @@ import type {
 } from './renderless'
 import type { downloadFile as ordinaryDownload } from '../../upload-list/src/upload-list'
 import type { IUploadFormData } from '../../upload/src/upload'
-import { $props } from '../../../vue-common'
+import { $props } from '@mobile-root/vue-common'
 
 export type { ISharedRenderlessParamHooks } from '../../../types/shared.type'
 

packages/mobile/components/file-upload/src/mobile.vue

@@ -11,7 +11,7 @@
  -->
 <script lang="tsx">
 import { renderless, api } from './renderless/vue'
-import { setup, h, defineComponent } from '../../../vue-common'
+import { setup, h, defineComponent } from '@mobile-root/vue-common'
 import UploadList from '../../upload-list'
 import Upload from '../../upload'
 import { iconUpload } from '@opentiny/vue-icon'

packages/mobile/components/file-upload/src/renderless/index.ts

@@ -29,11 +29,11 @@ import type {
   IFileUploadLargeDocumentDownload
 } from '../file-upload'
 
-import { extend } from '@opentiny/mobile-utils/object'
-import { xss, log } from '@opentiny/mobile-utils/xss'
-import uploadAjax from '@opentiny/mobile-utils/deps/upload-ajax'
-import { isObject } from '@opentiny/mobile-utils/type'
-import { isEmptyObject } from '@opentiny/mobile-utils/type'
+import { extend } from '@mobile-root/utils/object'
+import { xss, log } from '@mobile-root/utils/xss'
+import uploadAjax from '@mobile-root/utils/deps/upload-ajax'
+import { isObject } from '@mobile-root/utils/type'
+import { isEmptyObject } from '@mobile-root/utils/type'
 
 let initTokenPromise = null
 

packages/mobile/components/file-upload/src/renderless/vue.ts

@@ -20,7 +20,7 @@ import type {
   IFileUploadStreamsaver
 } from '../file-upload'
 import { downloadFile as ordinaryDownload } from '../../../upload-list/src/renderless'
-import { formatFileSize } from '@opentiny/mobile-utils/string'
+import { formatFileSize } from '@mobile-root/utils/string'
 
 import {
   initService,
@@ -96,7 +96,7 @@ import {
   closeRecordPanel,
   getTipMessage
 } from './index'
-import { isEmptyObject } from '@opentiny/mobile-utils/type'
+import { isEmptyObject } from '@mobile-root/utils/type'
 
 export const api = [
   'state',

packages/mobile/components/form-item/src/label-wrap.ts

@@ -1,4 +1,4 @@
-import { setup, h, $props, defineComponent } from '../../../vue-common'
+import { setup, h, $props, defineComponent } from '@mobile-root/vue-common'
 
 export default defineComponent({
   props: {

packages/mobile/components/form-item/src/mobile.vue

@@ -10,7 +10,7 @@
  *
  -->
 <script lang="tsx">
-import { $prefix, setup, parseVnode, h, defineComponent, isVue2 } from '../../../vue-common'
+import { $prefix, setup, parseVnode, h, defineComponent, isVue2 } from '@mobile-root/vue-common'
 import { renderless, api } from './renderless/vue'
 import LabelWrap from './label-wrap'
 import Tooltip from '../../tooltip'

packages/mobile/components/form-item/src/renderless/index.ts

@@ -10,12 +10,12 @@
  *
  */
 
-import { POSITION, VALIDATE_STATE } from '@opentiny/mobile-utils'
-import { omitText } from '@opentiny/mobile-utils/string'
-import { merge } from '@opentiny/mobile-utils/object'
-import Validator from '@opentiny/mobile-utils/validate'
-import { isNull } from '@opentiny/mobile-utils/type'
-import debounce from '@opentiny/mobile-utils/deps/debounce'
+import { POSITION, VALIDATE_STATE } from '@mobile-root/utils'
+import { omitText } from '@mobile-root/utils/string'
+import { merge } from '@mobile-root/utils/object'
+import Validator from '@mobile-root/utils/validate'
+import { isNull } from '@mobile-root/utils/type'
+import debounce from '@mobile-root/utils/deps/debounce'
 import type {
   IFormItemRenderlessParams,
   IFormItemDisplayedValueParam,

packages/mobile/components/form/src/mobile.vue

@@ -25,7 +25,7 @@
 
 <script lang="tsx">
 import { renderless, api } from './renderless/vue'
-import { $prefix, setup, defineComponent } from '../../../vue-common'
+import { $prefix, setup, defineComponent } from '@mobile-root/vue-common'
 import type { IFormApi } from '@opentiny/vue-renderless/types/form.type'
 import { formProps } from './form'
 import '@opentiny/vue-theme-mobile/form/index.less'

packages/mobile/components/form/src/renderless/index.ts

@@ -10,7 +10,7 @@
  *
  */
 
-import { merge } from '@opentiny/mobile-utils/object'
+import { merge } from '@mobile-root/utils/object'
 
 import type { IFormRenderlessParams } from '../form'