@mpxjs/webpack-plugin 2.9.18 → 2.9.19-react.0

package/lib/react/style-helper.js

@@ -0,0 +1,91 @@
+const postcss = require('postcss')
+const selectorParser = require('postcss-selector-parser')
+const getRulesRunner = require('../platform/index')
+const dash2hump = require('../utils/hump-dash').dash2hump
+const rpxRegExp = /^\s*(\d+(\.\d+)?)rpx\s*$/
+const pxRegExp = /^\s*(\d+(\.\d+)?)(px)?\s*$/
+const cssPrefixExp = /^-(webkit|moz|ms|o)-/
+function getClassMap ({ content, filename, mode, srcMode }) {
+  const classMap = {}
+
+  const root = postcss.parse(content, {
+    from: filename
+  })
+
+  function formatValue (value) {
+    let matched
+    let needStringify = true
+    if ((matched = pxRegExp.exec(value))) {
+      value = matched[1]
+      needStringify = false
+    } else if ((matched = rpxRegExp.exec(value))) {
+      value = `this.__rpx(${matched[1]})`
+      needStringify = false
+    }
+    return needStringify ? JSON.stringify(value) : value
+  }
+
+  const rulesRunner = getRulesRunner({
+    mode,
+    srcMode,
+    type: 'style',
+    testKey: 'prop',
+    warn: (msg) => {
+      console.warn('[style compiler warn]: ' + msg)
+    },
+    error: (msg) => {
+      console.error('[style compiler error]: ' + msg)
+    }
+  })
+
+  root.walkRules(rule => {
+    const classMapValue = {}
+    rule.walkDecls(({ prop, value }) => {
+      if (cssPrefixExp.test(prop) || cssPrefixExp.test(value)) return
+      let newData = rulesRunner({ prop, value })
+      if (!newData) return
+      if (!Array.isArray(newData)) {
+        newData = [newData]
+      }
+      newData.forEach(item => {
+        prop = dash2hump(item.prop)
+        value = item.value
+        if (Array.isArray(value)) {
+          value = value.map(item => formatValue(item))
+        } else if (typeof value === 'object') {
+          for (const key in value) {
+            value[key] = formatValue(value[key])
+          }
+        } else {
+          value = formatValue(value)
+        }
+        classMapValue[prop] = value
+      })
+    })
+
+    const classMapKeys = []
+
+    selectorParser(selectors => {
+      selectors.each(selector => {
+        if (selector.nodes.length === 1 && selector.nodes[0].type === 'class') {
+          classMapKeys.push(selector.nodes[0].value)
+        } else {
+          rule.error('Only single class selector is supported in react native mode temporarily.')
+        }
+      })
+    }).processSync(rule.selector)
+
+    if (classMapKeys.length) {
+      classMapKeys.forEach((key) => {
+        if (Object.keys(classMapValue).length) {
+          classMap[key] = Object.assign(classMap[key] || {}, classMapValue)
+        }
+      })
+    }
+  })
+  return classMap
+}
+
+module.exports = {
+  getClassMap
+}

package/lib/runtime/components/react/event.config.ts

@@ -0,0 +1,32 @@
+interface EventConfig {
+  [key: string]: string[];
+}
+
+const eventConfigMap: EventConfig = {
+  bindtap: ['onTouchStart', 'onTouchMove', 'onTouchEnd'],
+  bindlongpress: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'],
+  bindtouchstart: ['onTouchStart'],
+  bindtouchmove: ['onTouchMove'],
+  bindtouchend: ['onTouchEnd'],
+  bindtouchcancel: ['onTouchCancel'],
+  catchtap: ['onTouchStart', 'onTouchMove', 'onTouchEnd'],
+  catchlongpress: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'],
+  catchtouchstart: ['onTouchStart'],
+  catchtouchmove: ['onTouchMove'],
+  catchtouchend: ['onTouchEnd'],
+  catchtouchcancel: ['onTouchCancel'],
+  'capture-bindtap': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'],
+  'capture-bindlongpress': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'],
+  'capture-bindtouchstart': ['onTouchStartCapture'],
+  'capture-bindtouchmove': ['onTouchMoveCapture'],
+  'capture-bindtouchend': ['onTouchEndCapture'],
+  'capture-bindtouchcancel': ['onTouchCancelCapture'],
+  'capture-catchtap': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'],
+  'capture-catchlongpress': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'],
+  'capture-catchtouchstart': ['onTouchStartCapture'],
+  'capture-catchtouchmove': ['onTouchMoveCapture'],
+  'capture-catchtouchend': ['onTouchEndCapture'],
+  'capture-catchtouchcancel': ['onTouchCancelCapture']
+}
+
+export default eventConfigMap

package/lib/runtime/components/react/getInnerListeners.ts

@@ -0,0 +1,289 @@
+import { useRef } from 'react'
+import { omit } from './utils'
+import eventConfigMap from './event.config'
+import {
+  Props,
+  AdditionalProps,
+  RemoveProps,
+  UseInnerPropsConfig,
+  InnerRef,
+  SetTimeoutReturnType,
+  DataSetType,
+  LayoutRef,
+  NativeTouchEvent
+} from './getInnerListeners.type'
+
+const getTouchEvent = (
+  type: string,
+  event: NativeTouchEvent,
+  props: Props,
+  config: UseInnerPropsConfig
+) => {
+  const nativeEvent = event.nativeEvent
+  const {
+    timestamp,
+    pageX,
+    pageY,
+    touches,
+    changedTouches
+  } = nativeEvent
+  const { id } = props
+  const { layoutRef } = config
+  return {
+    ...event,
+    type,
+    timeStamp: timestamp,
+    target: {
+      ...(event.target || {}),
+      id: id || '',
+      dataset: getDataSet(props),
+      offsetLeft: layoutRef?.current?.offsetLeft || 0,
+      offsetTop: layoutRef?.current?.offsetTop || 0
+    },
+    detail: {
+      x: pageX,
+      y: pageY
+    },
+    touches: touches.map(item => {
+      return {
+        identifier: item.identifier,
+        pageX: item.pageX,
+        pageY: item.pageY,
+        clientX: item.locationX,
+        clientY: item.locationY
+      }
+    }),
+    changedTouches: changedTouches.map(item => {
+      return {
+        identifier: item.identifier,
+        pageX: item.pageX,
+        pageY: item.pageY,
+        clientX: item.locationX,
+        clientY: item.locationY
+      }
+    }),
+    persist: event.persist,
+    stopPropagation: event.stopPropagation,
+    preventDefault: event.preventDefault
+  }
+}
+
+export const getDataSet = (props: Record<string, any>) => {
+  const result: DataSetType = {}
+
+  for (const key in props) {
+    if (key.indexOf('data-') === 0) {
+      const newKey = key.substr(5)
+      result[newKey] = props[key]
+    }
+  }
+
+  return result
+}
+
+export const getCustomEvent = (
+  type: string = '',
+  oe: any = {},
+  { detail = {}, layoutRef }: { detail?: Record<string, unknown>; layoutRef: LayoutRef },
+  props: Props = {}
+) => {
+  return {
+    ...oe,
+    type,
+    detail,
+    target: {
+      ...(oe.target || {}),
+      id: props.id || '',
+      dataset: getDataSet(props),
+      offsetLeft: layoutRef?.current?.offsetLeft || 0,
+      offsetTop: layoutRef?.current?.offsetTop || 0
+    }
+
+  }
+}
+
+const useInnerProps = (
+  props: Props = {},
+  additionalProps: AdditionalProps = {},
+  removeProps: RemoveProps = [],
+  rawConfig: UseInnerPropsConfig
+) => {
+  const ref = useRef<InnerRef>({
+    startTimer: {
+      bubble: null,
+      capture: null
+    },
+    needPress: {
+      bubble: false,
+      capture: false
+    },
+    mpxPressInfo: {
+      detail: {
+        x: 0,
+        y: 0
+      }
+    }
+  })
+
+  const propsRef = useRef<Record<string, any>>({})
+  const eventConfig: { [key: string]: string[] } = {}
+  const config = rawConfig || {}
+
+  propsRef.current = { ...props, ...additionalProps }
+
+  for (const key in eventConfigMap) {
+    if (propsRef.current[key]) {
+      eventConfig[key] = eventConfigMap[key]
+    }
+  }
+
+  if (!(Object.keys(eventConfig).length) || config.disableTouch) {
+    return omit(propsRef.current, removeProps)
+  }
+
+  function handleEmitEvent(
+    events: string[],
+    type: string,
+    oe: NativeTouchEvent
+  ) {
+    events.forEach(event => {
+      if (propsRef.current[event]) {
+        const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event)
+        if (match) {
+          oe.stopPropagation()
+        }
+        propsRef.current[event](getTouchEvent(type, oe, propsRef.current, config))
+      }
+    })
+  }
+  function handleTouchstart(e: NativeTouchEvent, type: 'bubble' | 'capture') {
+    e.persist()
+    const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart']
+    const bubblePressEvent = ['catchlongpress', 'bindlongpress']
+    const captureTouchEvent = ['capture-catchtouchstart', 'capture-bindtouchstart']
+    const capturePressEvent = ['capture-catchlongpress', 'capture-bindlongpress']
+    ref.current.startTimer[type] = null
+    ref.current.needPress[type] = true
+    const nativeEvent = e.nativeEvent
+    ref.current.mpxPressInfo.detail = {
+      x: nativeEvent.changedTouches[0].pageX,
+      y: nativeEvent.changedTouches[0].pageY
+    }
+    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
+    const currentPressEvent = type === 'bubble' ? bubblePressEvent : capturePressEvent
+    handleEmitEvent(currentTouchEvent, 'touchstart', e)
+    const { catchlongpress, bindlongpress, 'capture-catchlongpress': captureCatchlongpress, 'capture-bindlongpress': captureBindlongpress } = propsRef.current
+    if (catchlongpress || bindlongpress || captureCatchlongpress || captureBindlongpress) {
+      ref.current.startTimer[type] = setTimeout(() => {
+        ref.current.needPress[type] = false
+        handleEmitEvent(currentPressEvent, 'longpress', e)
+      }, 350)
+    }
+  }
+
+  function handleTouchmove(e: NativeTouchEvent, type: 'bubble' | 'capture') {
+    const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove']
+    const captureTouchEvent = ['capture-catchtouchmove', 'capture-bindtouchmove']
+    const tapDetailInfo = ref.current.mpxPressInfo.detail || { x: 0, y: 0 }
+    const nativeEvent = e.nativeEvent
+    const currentPageX = nativeEvent.changedTouches[0].pageX
+    const currentPageY = nativeEvent.changedTouches[0].pageY
+    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
+    if (Math.abs(currentPageX - tapDetailInfo.x) > 1 || Math.abs(currentPageY - tapDetailInfo.y) > 1) {
+      ref.current.needPress[type] = false
+      ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type] as SetTimeoutReturnType)
+      ref.current.startTimer[type] = null
+    }
+    handleEmitEvent(currentTouchEvent, 'touchmove', e)
+  }
+
+  function handleTouchend(e: NativeTouchEvent, type: 'bubble' | 'capture') {
+    const bubbleTouchEvent = ['catchtouchend', 'bindtouchend']
+    const bubbleTapEvent = ['catchtap', 'bindtap']
+    const captureTouchEvent = ['capture-catchtouchend', 'capture-bindtouchend']
+    const captureTapEvent = ['capture-catchtap', 'capture-bindtap']
+    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
+    const currentTapEvent = type === 'bubble' ? bubbleTapEvent : captureTapEvent
+    ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type] as SetTimeoutReturnType)
+    ref.current.startTimer[type] = null
+    handleEmitEvent(currentTouchEvent, 'touchend', e)
+    if (ref.current.needPress[type]) {
+      handleEmitEvent(currentTapEvent, 'tap', e)
+    }
+  }
+
+  function handleTouchcancel(e: NativeTouchEvent, type: 'bubble' | 'capture') {
+    const bubbleTouchEvent = ['catchtouchcancel', 'bindtouchcancel']
+    const captureTouchEvent = ['capture-catchtouchcancel', 'capture-bindtouchcancel']
+    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
+    ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type] as SetTimeoutReturnType)
+    ref.current.startTimer[type] = null
+    handleEmitEvent(currentTouchEvent, 'touchcancel', e)
+  }
+
+  const touchEventList = [{
+    eventName: 'onTouchStart',
+    handler: (e: NativeTouchEvent) => {
+      handleTouchstart(e, 'bubble')
+    }
+  }, {
+    eventName: 'onTouchMove',
+    handler: (e: NativeTouchEvent) => {
+      handleTouchmove(e, 'bubble')
+    }
+  }, {
+    eventName: 'onTouchEnd',
+    handler: (e: NativeTouchEvent) => {
+      handleTouchend(e, 'bubble')
+    }
+  }, {
+    eventName: 'onTouchCancel',
+    handler: (e: NativeTouchEvent) => {
+      handleTouchcancel(e, 'bubble')
+    }
+  }, {
+    eventName: 'onTouchStartCapture',
+    handler: (e: NativeTouchEvent) => {
+      handleTouchstart(e, 'capture')
+    }
+  }, {
+    eventName: 'onTouchMoveCapture',
+    handler: (e: NativeTouchEvent) => {
+      handleTouchmove(e, 'capture')
+    }
+  }, {
+    eventName: 'onTouchEndCapture',
+    handler: (e: NativeTouchEvent) => {
+      handleTouchend(e, 'capture')
+    }
+  }, {
+    eventName: 'onTouchCancelCapture',
+    handler: (e: NativeTouchEvent) => {
+      handleTouchcancel(e, 'capture')
+    }
+  }]
+
+  const events: Record<string, (e: NativeTouchEvent) => void> = {}
+
+  const transformedEventKeys: string[] = []
+  for (const key in eventConfig) {
+    transformedEventKeys.push(...eventConfig[key])
+  }
+
+  const finalEventKeys = [...new Set(transformedEventKeys)]
+
+
+  touchEventList.forEach(item => {
+    if (finalEventKeys.includes(item.eventName)) {
+      events[item.eventName] = item.handler
+    }
+  })
+
+  const rawEventKeys = Object.keys(eventConfig)
+
+  return {
+    ...events,
+    ...omit(propsRef.current, [...rawEventKeys, ...removeProps])
+  }
+}
+export default useInnerProps

package/lib/runtime/components/react/getInnerListeners.type.ts

@@ -0,0 +1,68 @@
+import React from 'react'
+import { NativeSyntheticEvent } from 'react-native'
+
+type LayoutRef = React.MutableRefObject<any>
+
+type SetTimeoutReturnType = ReturnType<typeof setTimeout>
+
+type Props = Record<string, any>
+
+type AdditionalProps = Record<string, any>;
+
+type RemoveProps = string[];
+
+type NativeTouchEvent = NativeSyntheticEvent<NativeEvent>
+
+interface NativeEvent {
+  timestamp: number;
+  pageX: number;
+  pageY: number;
+  touches: TouchPoint[]
+  changedTouches: TouchPoint[]
+}
+
+interface TouchPoint {
+  identifier: number;
+  pageX: number;
+  pageY: number;
+  clientX: number;
+  clientY: number;
+  locationX?: number;
+  locationY?: number;
+}
+
+interface InnerRef {
+  startTimer: {
+    bubble: null | ReturnType<typeof setTimeout>;
+    capture: null | ReturnType<typeof setTimeout>;
+  };
+  needPress: {
+    bubble: boolean;
+    capture: boolean;
+  };
+  mpxPressInfo: {
+    detail: {
+      x: number;
+      y: number;
+    };
+  };
+}
+interface UseInnerPropsConfig {
+  layoutRef: LayoutRef;
+  disableTouch?: boolean
+}
+interface DataSetType {
+  [key: string]: string;
+}
+
+export {
+  NativeTouchEvent,
+  Props,
+  AdditionalProps,
+  RemoveProps,
+  UseInnerPropsConfig,
+  InnerRef,
+  LayoutRef,
+  SetTimeoutReturnType,
+  DataSetType
+}