@mpxjs/webpack-plugin 2.10.17-beta.3 → 2.10.17-beta.6

package/lib/platform/template/wx/component-config/textarea.js

@@ -23,6 +23,8 @@ module.exports = function ({ print }) {
   const harmonyValueLogError = print({ platform: 'harmony', tag: TAG_NAME, isError: true, type: 'value' })
   const harmonyPropLog = print({ platform: 'harmony', tag: TAG_NAME, isError: false })
   const harmonyEventLog = print({ platform: 'harmony', tag: TAG_NAME, isError: false, type: 'event' })
+  const ksPropLog = print({ platform: 'ks', tag: TAG_NAME, isError: false })
+  const ksEventLog = print({ platform: 'ks', tag: TAG_NAME, isError: false, type: 'event' })
 
   return {
     test: TAG_NAME,
@@ -91,16 +93,21 @@ module.exports = function ({ print }) {
         }
       },
       {
-        test: /^(always-embed|hold-keyboard|disable-default-padding|adjust-keyboard-to|fixed|show-confirm-bar)$/,
+        test: /^(always-embed|disable-default-padding|adjust-keyboard-to|fixed|show-confirm-bar)$/,
         ios: iosPropLog,
         android: androidPropLog,
         harmony: harmonyPropLog
+      },
+      {
+        test: /^(cursor-spacing|cursor|selection-start|selection-end|adjust-position|hold-keyboard|disable-default-padding|confirm-hold|adjust-keyboard-to|placeholder-class|show-confirm-bar)$/,
+        ks: ksPropLog
       }
     ],
     event: [
       {
         test: /^(confirm|linechange)$/,
-        web: webEventLog
+        web: webEventLog,
+        ks: ksEventLog
       },
       {
         test: /^keyboardheightchange$/,
@@ -124,7 +131,17 @@ module.exports = function ({ print }) {
         test: /^keyboard.+$/,
         ios: iosEventLog,
         android: androidEventLog,
-        harmony: harmonyEventLog
+        harmony: harmonyEventLog,
+        ks: ksEventLog
+      },
+      {
+        test: /^(selectionchange)$/,
+        ks: ksEventLog,
+        ali: aliEventLog,
+        jd: jdEventLog,
+        qq: qqEventLog,
+        tt: ttEventLog,
+        web: webEventLog
       }
     ]
   }

package/lib/platform/template/wx/component-config/unsupported.js

@@ -6,12 +6,14 @@ const BAIDU_UNSUPPORTED_TAG_NAME_ARR = ['functional-page-navigator', 'live-pushe
 const QQ_UNSUPPORTED_TAG_NAME_ARR = ['functional-page-navigator', 'official-account', 'editor']
 // 头条小程序不支持的标签集合
 const TT_UNSUPPORTED_TAG_NAME_ARR = ['movable-view', 'cover-image', 'cover-view', 'movable-area', 'open-data', 'official-account', 'editor', 'functional-page-navigator', 'audio', 'live-pusher']
+// 快手小程序不支持的标签集合
+const KS_UNSUPPORTED_TAG_NAME_ARR = ['match-media', 'page-container', 'root-portal', 'selection', 'functional-page-navigator', 'editor', 'editor-portal', 'keyboard-accessory', 'live-player', 'live-pusher', 'voip-room', 'channel-live', 'channel-video', 'ad-custom', 'official-account', 'official-account-publisher', 'open-data', 'store-coupon', 'store-gift', 'store-home', 'store-product']
 // 京东小程序不支持的标签集合
 const JD_UNSUPPORTED_TAG_NAME_ARR = ['functional-page-navigator', 'live-pusher', 'live-player', 'rich-text', 'audio', 'video', 'camera']
 // 快应用不支持的标签集合
 const QA_UNSUPPORTED_TAG_NAME_ARR = ['movable-view', 'movable-area', 'open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'cover-image']
 // RN不支持的标签集合
-const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'audio', 'camera', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
+const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'audio', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
 
 /**
  * @param {function(object): function} print
@@ -22,6 +24,7 @@ module.exports = function ({ print }) {
   const baiduUnsupportedTagError = print({ platform: 'baidu', isError: true, type: 'tag' })
   const qqUnsupportedTagError = print({ platform: 'qq', isError: true, type: 'tag' })
   const ttUnsupportedTagError = print({ platform: 'bytedance', isError: true, type: 'tag' })
+  const ksUnsupportedTagError = print({ platform: 'ks', isError: true, type: 'tag' })
   const jdUnsupportedTagError = print({ platform: 'jd', isError: true, type: 'tag' })
   const qaUnsupportedTagError = print({ platform: 'qa', isError: true, type: 'tag' })
   const iosUnsupportedTagError = print({ platform: 'ios', isError: true, type: 'tag' })
@@ -32,6 +35,7 @@ module.exports = function ({ print }) {
   const baiduUnsupportedExp = new RegExp('^(' + BAIDU_UNSUPPORTED_TAG_NAME_ARR.join('|') + ')$')
   const qqUnsupportedExp = new RegExp('^(' + QQ_UNSUPPORTED_TAG_NAME_ARR.join('|') + ')$')
   const ttUnsupportedExp = new RegExp('^(' + TT_UNSUPPORTED_TAG_NAME_ARR.join('|') + ')$')
+  const ksUnsupportedExp = new RegExp('^(' + KS_UNSUPPORTED_TAG_NAME_ARR.join('|') + ')$')
   const jdUnsupportedExp = new RegExp('^(' + JD_UNSUPPORTED_TAG_NAME_ARR.join('|') + ')$')
   const qaUnsupportedExp = new RegExp('^(' + QA_UNSUPPORTED_TAG_NAME_ARR.join('|') + ')$')
   const iosUnsupportedExp = new RegExp('^(' + RN_UNSUPPORTED_TAG_NAME_ARR.join('|') + ')$')
@@ -59,6 +63,11 @@ module.exports = function ({ print }) {
       test: ttUnsupportedExp,
       tt: ttUnsupportedTagError
     },
+    {
+      supportedModes: ['ks'],
+      test: ksUnsupportedExp,
+      ks: ksUnsupportedTagError
+    },
     {
       supportedModes: ['jd'],
       test: jdUnsupportedExp,

package/lib/platform/template/wx/component-config/video.js

@@ -17,6 +17,8 @@ module.exports = function ({ print }) {
   const androidEventLogError = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' })
   const harmonyPropLog = print({ platform: 'harmony', tag: TAG_NAME, isError: false })
   const harmonyEventLogError = print({ platform: 'harmony', tag: TAG_NAME, isError: false, type: 'event' })
+  const ksPropLog = print({ platform: 'ks', tag: TAG_NAME, isError: false })
+  const ksEventLogError = print({ platform: 'ks', tag: TAG_NAME, isError: false, type: 'event' })
   return {
     test: TAG_NAME,
     web (tag, { el }) {
@@ -74,6 +76,10 @@ module.exports = function ({ print }) {
         test: /^(duration|enable-danmu|danmu-btn|page-gesture|direction|show-progress|show-fullscreen-btn|show-center-play-btn|enable-progress-gesture|show-mute-btn|title|play-btn-position|enable-play-gesture|auto-pause-if-navigate|auto-pause-if-open-native|vslide-gesture|vslide-gesture-in-fullscreen|show-bottom-progress|ad-unit-id|poster-for-crawler|show-casting-button|picture-in-picture-mode|picture-in-picture-show-progress| picture-in-picture-init-position|enable-auto-rotation|show-snapshot-button|show-screen-lock-button|show-background-playback-button|background-poster|referrer-policy|is-live)$/,
         android: androidPropLog,
         harmony: harmonyPropLog
+      },
+      {
+        test: /^(duration|danmu-list|enable-danmu|danmu-btn|auto-pause-if-navigate|auto-pause-if-open-native|ad-unit-id|poster-for-crawler|picture-in-picture-mode|picture-in-picture-show-progress|picture-in-picture-init-position|enable-auto-rotation|show-snapshot-button|show-background-playback-button|background-poster|is-drm|is-live|provision-url|certificate-url|license-url|preferred-peak-bit-rate)$/,
+        ks: ksPropLog
       }
     ],
     event: [
@@ -117,6 +123,10 @@ module.exports = function ({ print }) {
         test: /^(progress|enterpictureinpicture|leavepictureinpicture|castinguserselect|castingstatechange|castinginterrupt)$/,
         android: androidEventLogError,
         harmony: harmonyEventLogError
+      },
+      {
+        test: /^(waiting|controlstoggle|enterpictureinpicture|leavepictureinpicture|seekcomplete|castinguserselect)$/,
+        ks: ksEventLogError
       }
     ]
   }

package/lib/platform/template/wx/index.js

@@ -62,7 +62,7 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   const spec = {
-    supportedModes: ['ali', 'swan', 'qq', 'tt', 'web', 'qa', 'jd', 'dd', 'ios', 'android', 'harmony'],
+    supportedModes: ['ali', 'swan', 'qq', 'tt', 'ks', 'web', 'qa', 'jd', 'dd', 'ios', 'android', 'harmony'],
     // props预处理
     preProps: [],
     // props后处理
@@ -325,6 +325,13 @@ module.exports = function getSpec ({ warn, error }) {
             value
           }
         },
+        ks ({ name, value }) {
+          const dir = this.test.exec(name)[1]
+          return {
+            name: 'ks:' + dir,
+            value
+          }
+        },
         dd ({ name, value }) {
           const dir = this.test.exec(name)[1]
           return {
@@ -413,6 +420,19 @@ module.exports = function getSpec ({ warn, error }) {
             value
           }
         },
+        ks ({ name, value }, { eventRules }) {
+          const match = this.test.exec(name)
+          const prefix = match[1]
+          const eventName = match[2]
+          const modifierStr = match[3] || ''
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'ks' })
+          const rEventName = runRules(eventRules, eventName, { mode: 'ks' })
+          if (rEventName.includes('-')) rPrefix += ':'
+          return {
+            name: rPrefix + rEventName + modifierStr,
+            value
+          }
+        },
         dd ({ name, value }, { eventRules }) {
           const match = this.test.exec(name)
           const prefix = match[1]

package/lib/react/LoadAsyncChunkModule.js

@@ -54,7 +54,7 @@ class LoadAsyncChunkRuntimeModule extends HelperRuntimeModule {
           ]),
           '}',
           `var timeout = setTimeout(callback.bind(null, 'timeout'), ${this.timeout})`,
-          'var loadChunkAsyncFn = global.__mpx.config.rnConfig && global.__mpx.config.rnConfig.loadChunkAsync',
+          `var loadChunkAsyncFn = ${RuntimeGlobals.global}.__mpx.config.rnConfig && ${RuntimeGlobals.global}.__mpx.config.rnConfig.loadChunkAsync`,
           'try {',
           Template.indent([
             'loadChunkAsyncFn(config).then(callback).catch(callback)'

package/lib/react/processStyles.js

@@ -2,6 +2,7 @@ const createHelpers = require('../helpers')
 const async = require('async')
 const getClassMap = require('./style-helper').getClassMap
 const shallowStringify = require('../utils/shallow-stringify')
+const isValidIdentifierStr = require('../utils/is-valid-identifier-str')
 
 module.exports = function (styles, {
   loaderContext,
@@ -47,6 +48,11 @@ module.exports = function (styles, {
     }, (err) => {
       if (err) return callback(err)
       try {
+        output += `
+          global.__classCaches = global.__classCaches || []
+          var __classCache = new Map()
+          global.__classCaches.push(__classCache)`
+        const formatValueName = '_f'
         const classMap = getClassMap({
           content,
           filename: loaderContext.resourcePath,
@@ -54,26 +60,32 @@ module.exports = function (styles, {
           srcMode,
           ctorType,
           warn,
-          error
+          error,
+          formatValueName
         })
+        const classMapCode = Object.entries(classMap).reduce((result, [key, value]) => {
+          result !== '' && (result += ',')
+          result += `${isValidIdentifierStr(key) ? `${key}` : `['${key}']`}: function(${formatValueName}){return ${shallowStringify(value)};}`
+          return result
+        }, '')
         if (ctorType === 'app') {
           output += `
-          let __appClassMap
-          global.__getAppClassMap = function() {
+          var __appClassMap
+          global.__getAppClassStyle = function(className) {
             if(!__appClassMap) {
-              __appClassMap = ${shallowStringify(classMap)};
+              __appClassMap = {${classMapCode}};
             }
-            return __appClassMap;
+            return global.__GCC(className, __appClassMap, __classCache);
           };\n`
         } else {
           output += `
-          let __classMap
+          var __classMap
           global.currentInject.injectMethods = {
-            __getClassMap: function() {
+            __getClassStyle: function(className) {
               if(!__classMap) {
-                __classMap = ${shallowStringify(classMap)};
+                __classMap = {${classMapCode}};
               }
-              return __classMap;
+              return global.__GCC(className, __classMap, __classCache);
             }
           };\n`
         }

package/lib/react/style-helper.js

@@ -3,31 +3,70 @@ const selectorParser = require('postcss-selector-parser')
 const { MPX_TAG_PAGE_SELECTOR } = require('../utils/const')
 const getRulesRunner = require('../platform/index')
 const dash2hump = require('../utils/hump-dash').dash2hump
-const unitRegExp = /^\s*(-?\d+(?:\.\d+)?)(rpx|vw|vh)\s*$/
-const numberRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
+const parseValues = require('../utils/string').parseValues
+const unitRegExp = /^\s*(-?\d+(?:\.\d+)?)(rpx|vw|vh|px)?\s*$/
 const hairlineRegExp = /^\s*hairlineWidth\s*$/
 const varRegExp = /^--/
 const cssPrefixExp = /^-(webkit|moz|ms|o)-/
-function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error }) {
-  const classMap = ctorType === 'page' ? { [MPX_TAG_PAGE_SELECTOR]: { flex: 1 } } : {}
+function getClassMap ({ content, filename, mode, srcMode, ctorType, formatValueName, warn, error }) {
+  const classMap = ctorType === 'page'
+      ? { [MPX_TAG_PAGE_SELECTOR]: { flex: 1, height: "'100%'" } }
+      : {}
 
   const root = postcss.parse(content, {
     from: filename
   })
 
   function formatValue (value) {
-    let matched
     let needStringify = true
-    if ((matched = numberRegExp.exec(value))) {
-      value = matched[1]
-      needStringify = false
-    } else if (unitRegExp.test(value) || hairlineRegExp.test(value)) {
-      value = `global.__formatValue(${JSON.stringify(value)})`
+    const matched = unitRegExp.exec(value)
+    if (matched) {
+      if (!matched[2] || matched[2] === 'px') {
+        value = matched[1]
+        needStringify = false
+      } else {
+        value = `${formatValueName}(${+matched[1]}, '${matched[2]}')`
+        needStringify = false
+      }
+    }
+    if (hairlineRegExp.test(value)) {
+      value = `${formatValueName}(${JSON.stringify(value)}, 'hairlineWidth')`
       needStringify = false
     }
     return needStringify ? JSON.stringify(value) : value
   }
 
+  function getMediaOptions (params) {
+    return parseValues(params).reduce((option, item) => {
+      if (['all', 'print'].includes(item)) {
+        if (item === 'media') {
+          option.type = item
+        } else {
+          error('not supported ', item)
+          return option
+        }
+      }
+      if (['not', 'only', 'or', ','].includes(item)) {
+        if (item === 'and') {
+          option.logical_operators = item
+        } else {
+          error('not supported ', item)
+          return option
+        }
+      }
+      const bracketsExp = /\((.+?)\)/
+      if (bracketsExp.test(item)) {
+        const range = parseValues((item.match(bracketsExp)?.[1] || ''), ':')
+        if (range.length < 2) {
+          return option
+        } else {
+          option[dash2hump(range[0])] = +formatValue(range[1])
+        }
+      }
+      return option
+    }, {})
+  }
+
   const rulesRunner = getRulesRunner({
     mode,
     srcMode,
@@ -41,13 +80,15 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error
   root.walkAtRules(rule => {
     if (rule.name !== 'media') {
       warn(`Only @media rule is supported in react native mode temporarily, but got @${rule.name}`)
+      // 删除不支持的 AtRule，防止其影响后续解析
+      rule.remove()
     }
   })
 
   root.walkRules(rule => {
     const classMapValue = {}
     rule.walkDecls(({ prop, value }) => {
-      if (cssPrefixExp.test(prop) || cssPrefixExp.test(value)) return
+      if (value === 'undefined' || cssPrefixExp.test(prop) || cssPrefixExp.test(value)) return
       let newData = rulesRunner({ prop, value, selector: rule.selector })
       if (!newData) return
       if (!Array.isArray(newData)) {
@@ -79,7 +120,8 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error
     })
 
     const classMapKeys = []
-
+    const options = getMediaOptions(rule.parent.params || '')
+    const isMedia = options.maxWidth || options.minWidth
     selectorParser(selectors => {
       selectors.each(selector => {
         if (selector.nodes.length === 1 && selector.nodes[0].type === 'class') {
@@ -93,7 +135,28 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error
     if (classMapKeys.length) {
       classMapKeys.forEach((key) => {
         if (Object.keys(classMapValue).length) {
-          classMap[key] = Object.assign(classMap[key] || {}, classMapValue)
+          let _default = classMap[key]?._default
+          let _media = classMap[key]?._media
+          if (isMedia) {
+            // 当前是媒体查询
+            _default = _default || {}
+            _media = _media || []
+            _media.push({
+              options,
+              value: classMapValue
+            })
+            classMap[key] = {
+              _media,
+              _default
+            }
+          } else if (_default) {
+            // 已有媒体查询数据，此次非媒体查询
+            Object.assign(_default, classMapValue)
+          } else {
+            // 无媒体查询
+            const val = classMap[key] || {}
+            classMap[key] = Object.assign(val, classMapValue)
+          }
         }
       })
     }

package/lib/resolver/AddModePlugin.js

@@ -24,6 +24,12 @@ module.exports = class AddModePlugin {
       if (request.mode || request.env) {
         return callback()
       }
+
+      const queryObj = parseQuery(request.query || '?')
+      if (queryObj.mode) {
+        return callback()
+      }
+
       const obj = {
         mode
       }
@@ -37,23 +43,32 @@ module.exports = class AddModePlugin {
       // 当前资源没有后缀名或者路径不符合fileConditionRules规则时，直接返回
       if (!extname || !matchCondition(resourcePath, fileConditionRules)) return callback()
 
-      const queryObj = parseQuery(request.query || '?')
       const queryInfix = queryObj.infix
-      if (!implicitMode) queryObj.mode = mode
-      queryObj.infix = `${queryInfix || ''}.${mode}`
 
       // 如果已经确认是mode后缀的文件，添加query与mode后直接返回
       if (modePattern.test(path.basename(resourcePath))) {
-        request.query = stringifyQuery(queryObj)
-        request.mode = obj.mode
+        // 已经被resolved到对应mode的文件，避免重复添加mode
+        const isResolved = (implicitMode || queryObj.mode === mode) && modePattern.test(queryObj.infix)
+        if (!isResolved) {
+          queryObj.infix = `${queryInfix || ''}.${mode}`
+          if (!implicitMode) queryObj.mode = mode
+          request.query = stringifyQuery(queryObj)
+          request.mode = obj.mode
+        }
         return callback()
       } else if (defaultMode && defaultModePattern.test(path.basename(resourcePath))) {
-        queryObj.infix = `${queryInfix || ''}.${defaultMode}`
-        request.query = stringifyQuery(queryObj)
-        request.mode = obj.mode
+        const isResolved = (implicitMode || queryObj.mode === mode) && defaultModePattern.test(queryObj.infix)
+        if (!isResolved) {
+          queryObj.infix = `${queryInfix || ''}.${defaultMode}`
+          if (!implicitMode) queryObj.mode = mode
+          request.query = stringifyQuery(queryObj)
+          request.mode = obj.mode
+        }
         return callback()
       }
 
+      if (!implicitMode) queryObj.mode = mode
+      queryObj.infix = `${queryInfix || ''}.${mode}`
       obj.query = stringifyQuery(queryObj)
       obj.path = addInfix(resourcePath, mode, extname)
       obj.relativePath = request.relativePath && addInfix(request.relativePath, mode, extname)

package/lib/runtime/components/react/animationHooks/index.ts

@@ -0,0 +1,75 @@
+import { error, collectDataset, hasOwn } from '@mpxjs/utils'
+import { useRef } from 'react'
+import useAnimationAPIHooks from './useAnimationAPIHooks'
+import useTransitionHooks from './useTransitionHooks'
+import type { AnimatableValue } from 'react-native-reanimated'
+import type { MutableRefObject } from 'react'
+import type { NativeSyntheticEvent } from 'react-native'
+import type { _ViewProps } from '../mpx-view'
+
+// 动画类型
+export type AnimationType = 'api'|'animation'|'transition'|'none'
+
+export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean | AnimationType, layoutRef: MutableRefObject<any>, transitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void }) {
+  const { style: originalStyle = {}, enableAnimation, animation, transitionend, layoutRef } = props
+  // 记录动画类型
+  let animationType = ''
+  if (hasOwn(originalStyle, 'animation') || (hasOwn(originalStyle, 'animationName') && hasOwn(originalStyle, 'animationDuration'))) {
+    // css animation 只做检测提示
+    animationType = 'animation'
+  }
+  if (!!animation || enableAnimation === true) {
+    animationType = 'api'
+  }
+  // 优先级 css transition > API
+  if (hasOwn(originalStyle, 'transition') || (hasOwn(originalStyle, 'transitionProperty') && hasOwn(originalStyle, 'transitionDuration'))) {
+    animationType = 'transition'
+  }
+  // 优先以 enableAnimation 定义类型为准
+  if (enableAnimation === 'api' || enableAnimation === 'transition' || enableAnimation === 'animation') {
+    animationType = enableAnimation
+  }
+  const animationTypeRef = useRef(animationType)
+  if (animationType! && animationTypeRef.current !== animationType) {
+    // 允许 API、CssTransition 到 none，不允许 API、CssTransition 互切，不允许 none 到 API、CssTransition
+    error('[Mpx runtime error]: The animation type should be stable in the component lifecycle, or you can set animation type with [enable-animation].')
+  }
+  if (animationType === 'animation') {
+    // 暂不支持 CssAnimation 提示
+    error('[Mpx runtime error]: CSS animation is not supported yet')
+    return { enableStyleAnimation: false }
+  }
+  if (!animationTypeRef.current) return { enableStyleAnimation: false }
+
+  const hooksProps = { style: originalStyle }
+  if (transitionend && typeof transitionend === 'function') {
+    function withTimingCallback (finished?: boolean, current?: AnimatableValue, duration?: number) {
+      const target = {
+        id: animation?.id || -1,
+        dataset: collectDataset(props),
+        offsetLeft: layoutRef?.current?.offsetLeft || 0,
+        offsetTop: layoutRef?.current?.offsetTop || 0
+      }
+      transitionend!({
+        type: 'transitionend',
+        // elapsedTime 对齐wx 单位s
+        detail: { elapsedTime: duration ? duration / 1000 : 0, finished, current },
+        target,
+        currentTarget: target,
+        timeStamp: Date.now()
+      })
+    }
+    Object.assign(hooksProps, { transitionend: withTimingCallback })
+  }
+  if (animationTypeRef.current === 'api') {
+    Object.assign(hooksProps, { animation })
+  }
+  return {
+    enableStyleAnimation: !!animationTypeRef.current,
+    animationStyle: animationTypeRef.current === 'api'
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      ? useAnimationAPIHooks(hooksProps)
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      : useTransitionHooks(hooksProps)
+  }
+}