@conecli/cone-render 0.8.20-shop.51 → 0.8.20-shop.52

package/dist/components/base/ExposureSmart/const.ts

@@ -0,0 +1 @@
+export const TrackType = {
  point: 0, 
  floor: 1, 

package/dist/components/base/ExposureSmart/index.h5.module.scss

@@ -1,8 +1,22 @@
 
-.root {
-    position: absolute;
-    width: 1PX;
-	height: 0;
+//坑位曝光
+.d-report-point {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 	opacity: 0;
 	pointer-events: none;
+  z-index: -1;
+}
+//楼层曝光
+.d-report-floor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  pointer-events: none;
+  z-index: -1;
 }

package/dist/components/base/ExposureSmart/index.h5.tsx

@@ -1 +1 @@
-import React, { useMemo } from 'react'
    const inViewCallback = () => {
        console.log('埋点收到进入可视区域的回到啦！', reportData)
        addReportData(reportData)
    }
  let chartPointClassName = ""
  
  if(isChartH5 && markPoint && Array.isArray(reportData)){
    const [floorData, mInfo, etModelInfo] = reportData
    if(floorData && mInfo && mInfo.hasOwnProperty('pos') && etModelInfo ){
      chartPointClassName = track.getFloorPointIndexClassName(floorData, mInfo.pos)
    }
  }
            exposureStyle.root,
            className,
            chartPointClassName
        )} height={'100%'} inViewCallback={inViewCallback}></InViewRender>
  markPoint: false 
+import React, { useMemo } from 'react'
  const { type, className, reportData, trackCallback, markPoint } = props
  const isViewOnlineState =
    taroJdBaseInfo.info.pageInfo.dataType === BUSINESS_TYPE.ONLINE
  const inViewCallback = () => {
    console.log('埋点收到进入可视区域的回到啦！', reportData)
    addReportData(reportData)
    typeof trackCallback === 'function' && trackCallback(reportData)
  }
  let chartPointClassName = ""
  
  if(isChartH5 && markPoint && Array.isArray(reportData)){
    const [floorData, mInfo] = reportData
    if(floorData && mInfo && mInfo.hasOwnProperty('pos') ){
      chartPointClassName = track.getFloorPointIndexClassName(floorData, mInfo.pos)
    }
  }
  return isViewOnlineState && reportData
    ? <InViewRender className={classNames(
      {
        [exposureStyle['d-report-point']]: type === TrackType.point,
      },
      {
        [exposureStyle['d-report-floor']]: type === TrackType.floor,
      },
      className,
      chartPointClassName
    )} height={'100%'} inViewCallback={inViewCallback}></InViewRender>
    : null
  return useMemo(() => {
    return <Exposure {...props} />
  }, [])
  reportData: null, 
  trackCallback: null, 
  type: TrackType.point,
  markPoint: false 

package/dist/components/base/ExposureSmart/index.module.scss

@@ -1,11 +1,22 @@
 
-.d-floor-exposure {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	height: 1px;
-	width: 100%;
-	opacity: 0;
-	pointer-events: none;
+//坑位曝光
+.d-report-point {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  pointer-events: none;
+  z-index: -1;
+}
+//楼层曝光
+.d-report-floor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  pointer-events: none;
+  z-index: -1;
 }

package/dist/components/base/ExposureSmart/index.tsx

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
+import Taro from '@tarojs/taro'
  const { type, className, reportData, trackCallback } = props
  const checkReportData = Array.isArray(reportData)
  const [floorData, mInfo] = checkReportData ? reportData : []
  const getFloorPointClassName =  `J_floor_${floorData?.uid}_index_${mInfo?.pos}`
        if (
          !taroJdBaseInfo.info.pageInfo.floorExposureInfo[
            getFloorPointClassName
            ]
        ){
          const createIntersectionObserver = new intersectionObserver({
            selector: `#J_floor_${floorData?.uid} >>> .${getFloorPointClassName}`,
            context: this,
            onFinal: (res) => {
              taroJdBaseInfo.info.pageInfo.floorExposureInfo[
                getFloorPointClassName
                ] = true
              console.log('小程序曝光埋点收到进入可视区域啦！', getFloorPointClassName, reportData, res)
              addReportData(reportData)
              typeof trackCallback === 'function' && trackCallback(reportData)
              createIntersectionObserver.disconnect()
            },
          })
          createIntersectionObserver.connect()
        }
    floorData &&
    mInfo && (
          {
            [exposureStyle['d-report-point']]: type === TrackType.point,
          },
          {
            [exposureStyle['d-report-floor']]: type === TrackType.floor,
          },
          getFloorPointClassName,
  reportData: null, 
  trackCallback: null, 
  type: TrackType.point,

package/dist/components/base/ExposureSmart/reporter.tsx

@@ -1 +1 @@
-import track from '../../../open/api/track'
    const {arr : arrTask, startWaitTime} = floorTask
    const isTimeout = startWaitTime != 0 && (Date.now() - startWaitTime >= 1000)    
    const isOverMax = arrTask.length >= 10  
    const hasData = arrTask.length > 0
    if(hasData && (isTimeout || isOverMax)){
        const reduceData = connactData(arrTask)
        track.reportExposureEventLog(reduceData)
        floorTask.arr = []
        floorTask.startWaitTime = 0
        clearTimeout(floorTask.timer)
    }
    const initData = JSON.parse(JSON.stringify(arr[0]))
    if(initData.jsonParam.etModelInfo) {
      initData.jsonParam.logBaseInfo = []
      initData.jsonParam.etModelInfo.lstms = []
      return arr.reduce((acc, cur) => {
        acc.jsonParam.logBaseInfo.push(cur.jsonParam.logBaseInfo)
        return acc
      }, initData)
    } else {
      return arr.reduce((acc) => {
        return acc
      })
    }
    if(!Array.isArray(data)){
        console.log('坑位曝光埋点原始数据参类型错误，期望是数组，实际是：', data)
        return
    }
    const [floorData, mInfo, etModelInfo] = data
    if(floorData && mInfo && etModelInfo){
        try {
          const reportJson = track.getIsvExposureInfo(floorData, mInfo, etModelInfo)
          console.log('reportJson',reportJson)
          const { floorIdx } = floorData
          if(!task[floorIdx]){
            task[floorIdx] = {
              arr: [],
              startWaitTime: 0,
              timer : 0
            }
          }
          const floorTask = task[floorIdx]
          if(floorTask.arr.length === 0){
            floorTask.startWaitTime = Date.now()
          }
          if(reportJson){
            floorTask.arr.push(reportJson)
            clearTimeout(floorTask.timer)
            floorTask.timer = setTimeout(() => {
              check(floorTask)
            }, 1000)
            check(floorTask)
          }
        }catch (e) {
         {
            console.log('坑位曝光埋点出错啦',e)
          }
        }
    }else{
        console.log('坑位曝光埋点原始数据参数缺失，期望是[floorData, mInfo, etModelInfo]，实际是：', data)
    }
+import track from '../../../open/api/track'
    const {arr : arrTask, startWaitTime} = floorTask
    const isTimeout = startWaitTime != 0 && (Date.now() - startWaitTime >= 1000)    
    const arrTaskNum = arrTask.length;
    const isOverMax = arrTaskNum >= 10  
    const hasData = arrTaskNum > 0
    if(hasData && (isTimeout || isOverMax)){
        const reduceData = connactData(arrTask)
        track.reportExposureEventLog(reduceData)
        floorTask.arr = []
        floorTask.startWaitTime = 0
        clearTimeout(floorTask.timer)
    }
    const initData = JSON.parse(JSON.stringify(arr[0]))
    if(initData.jsonParam.etModelInfo) {
      initData.jsonParam.logBaseInfo = []
      initData.jsonParam.etModelInfo.lstms = []
      return arr.reduce((acc, cur) => {
        acc.jsonParam.logBaseInfo.push(cur.jsonParam.logBaseInfo)
        return acc
      }, initData)
    } else {
      return arr.reduce((acc) => {
        return acc
      })
    }
    if(!Array.isArray(data)){
        console.log('坑位曝光埋点原始数据参类型错误，期望是数组，实际是：', data)
        return
    }
    const [floorData, mInfo, etModelInfo] = data
    if(floorData && mInfo && etModelInfo){
      const isIsvReportModule = isvReportModuleTypeList.includes(floorData?.floorExtInfo?.moduleFlag)
        try {
          const reportJson = track.getExposureInfo(floorData, mInfo, etModelInfo,true, isIsvReportModule)
          console.log(`${floorData?.floorExtInfo?.moduleFlag}===reportJson===`,reportJson)
          const { floorIdx } = floorData
          if(!task[floorIdx]){
            task[floorIdx] = {
              arr: [],
              startWaitTime: 0,
              timer : 0
            }
          }
          const floorTask = task[floorIdx]
          if(floorTask.arr.length === 0){
            floorTask.startWaitTime = Date.now()
          }
          if(reportJson){
            floorTask.arr.push(reportJson)
            clearTimeout(floorTask.timer)
            floorTask.timer = setTimeout(() => {
              check(floorTask)
            }, 1000)
            check(floorTask)
          }
        }catch (e) {
         {
            console.log('坑位曝光埋点出错啦',e)
          }
        }
    }else{
        console.log('坑位曝光埋点原始数据参数缺失，期望是[floorData, mInfo, etModelInfo]，实际是：', data)
    }

package/dist/components/base/InViewRender/index.tsx

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
    TaroEventType,
    const {
        children,
        placeholder,
        height,
        className,
        inViewCallback
    } = props
    const [componentShowState, setComponentShowState] = useState(false)
    const [componentRenderShowState, setComponentRenderShowState] =
        useState(false)
    const componentLazyRef = useRef<HTMLElement | null>(null)
    const componentShowStateRef = useRef(false)
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
    const rootDom = isH5AndJdShopView && needShowHighVersion ? null : document.querySelector('#J_shopHomeRoot')
    if (isH5AndJdShopView && !needShowHighVersion) {
        useEffect(() => {
            const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
            !componentShowStateRef.current && dealPageScrollInfo(latestRes)
            Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
                !componentShowStateRef.current && dealPageScrollInfo(res)
            })
        }, [])
        useEffect(() => {
            if (componentShowState) {
                typeof inViewCallback === 'function' && inViewCallback()
                console.log('InViewRender -- 店铺H5 展示啦!')
            }
        }, [componentShowState])
        
        const dealPageScrollInfo = (res) => {
            const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
            if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') return
            if (componentLazyRef.current) {
                const eleClientRect =
                    componentLazyRef.current.getBoundingClientRect()
                const getContainerHeightOffSetY = displayHeight + offSetY
                const eleOffsetTop = Math.ceil(eleClientRect.top)
                if (!componentShowStateRef.current) {
                    if (getContainerHeightOffSetY > eleOffsetTop) {
                        componentShowStateRef.current = true
                        setComponentShowState(true)
                        Taro.nextTick(() => {
                            setComponentRenderShowState(true)
                        })
                    }
                }
            }
        }
        return (
            <View
                ref={componentLazyRef}
                className={classNames(
                    lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
                    'd-app-floor-lazy-load',
                    className
                )}
                style={{
                    minHeight: `${componentRenderShowState ? 'auto' : height + (typeof height === 'number' ? 'px' : '')
                        }`,
                    backgroundColor: componentRenderShowState
                        ? 'transparent'
                        : '#ffffff',
                }}
            >
                {componentShowState ? children : placeholder}
            </View>
        )
    }else {
      const { ref, inView } = useInView({
        threshold: 0,
        triggerOnce: true,
        root: rootDom || null,    
        rootMargin: `0px 0px 0px 0px`,  
      })
      useEffect(() => {
        if (inView) {
          typeof inViewCallback === 'function' && inViewCallback()
          console.log('InViewRender -- 其它H5 展示啦!')
        }
      }, [inView])
        return (
            <View
                className={className}
                ref={ref}
                style={{
                    minHeight: inView ? 'auto' : typeof height === 'number' ? `${height}px` : height,
                    backgroundColor: 'transparent',
                }}
            >
                {inView ? children : placeholder}
            </View>
        )
    }
    children: null, 
    placeholder: null, 
    height: 1, 
    className: '',
    lazyNodeClassName: '',
    inViewCallback: null,
+import Taro from '@tarojs/taro'
    TaroEventType,
    const {
        children,
        placeholder,
        height,
        className,
        inViewCallback
    } = props
    const [componentShowState, setComponentShowState] = useState(false)
    const [componentRenderShowState, setComponentRenderShowState] =
        useState(false)
    const componentLazyRef = useRef<HTMLElement | null>(null)
    const componentShowStateRef = useRef(false)
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
    const rootDom = isH5AndJdShopView && needShowHighVersion ? null : document.querySelector('#J_shopHomeRoot')
    if (isH5AndJdShopView && !needShowHighVersion) {
        useEffect(() => {
            const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
            !componentShowStateRef.current && dealPageScrollInfo(latestRes)
            Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
                !componentShowStateRef.current && dealPageScrollInfo(res)
            })
        }, [])
        useEffect(() => {
            if (componentShowState) {
                typeof inViewCallback === 'function' && inViewCallback()
                console.log('InViewRender -- 店铺H5 展示啦!')
            }
        }, [componentShowState])
        
        const dealPageScrollInfo = (res) => {
            console.log(
            	'收到滚动信息和模块元素以及容器显示状态',
            	res,
            	typeof componentLazyRef.current,
            	componentShowStateRef.current,
            )
            const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
            if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') return
            if (componentLazyRef.current) {
                const eleClientRect =
                    componentLazyRef.current.getBoundingClientRect()
                const getContainerHeightOffSetY = displayHeight + offSetY
                const eleOffsetTop = Math.ceil(eleClientRect.top)
                if (!componentShowStateRef.current) {
                    if (getContainerHeightOffSetY > eleOffsetTop) {
                        componentShowStateRef.current = true
                        setComponentShowState(true)
                        Taro.nextTick(() => {
                            setComponentRenderShowState(true)
                        })
                    }
                }
            }
        }
        return (
            <View
                ref={componentLazyRef}
                className={classNames(
                    lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
                    'd-app-floor-lazy-load',
                    className
                )}
                style={{
                    minHeight: `${componentRenderShowState ? 'auto' : height + (typeof height === 'number' ? 'px' : '')
                        }`,
                    backgroundColor: componentRenderShowState
                        ? 'transparent'
                        : '#ffffff',
                }}
            >
                {componentShowState ? children : placeholder}
            </View>
        )
    }else {
      const { ref, inView } = useInView({
        threshold: 0.5, 
        triggerOnce: true,
        root: rootDom || null,    
        rootMargin: `0px 0px 0px 0px`,  
        delay: 300, 
      })
      useEffect(() => {
        if (inView) {
          typeof inViewCallback === 'function' && inViewCallback()
          console.log('InViewRender -- 其它H5 展示啦!')
        }
      }, [inView])
        return (
            <View
                className={className}
                ref={ref}
                style={{
                    minHeight: inView ? 'auto' : typeof height === 'number' ? `${height}px` : height,
                    backgroundColor: 'transparent',
                }}
            >
                {inView ? children : placeholder}
            </View>
        )
    }
    children: null, 
    placeholder: null, 
    height: 1, 
    className: '',
    lazyNodeClassName: '',
    inViewCallback: null,

package/dist/components/base/InViewRender/index.weapp.tsx

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
+import Taro from '@tarojs/taro'

package/dist/components/base/ItemViewExposureSmart/index.module.scss

@@ -0,0 +1,8 @@
+
+.d-item-point-layout{
+  position: relative;
+  .d-item-chart-point{
+    opacity: 1;
+    z-index: 100;
+  }
+}

package/dist/components/base/ItemViewExposureSmart/index.tsx

@@ -0,0 +1 @@
+import React from 'react'
  const { className, pointClassName, children, reportData, trackCallback, ...otherProps } =
    props
  const [floorData, mInfo] = reportData
  const checkReportDataState = floorData && mInfo
  
  checkReportDataState && !mInfo.hasOwnProperty('pos') && (mInfo.pos = 0)
  return (
    <View
      ref={ref}
      className={classNames(
        itemViewExposureSmartStyle['d-item-point-layout'],
        className,
      )}
      {...otherProps}
    >
      {children ? children : null}
      {checkReportDataState && (
        <ExposureSmart
          className={classNames(pointClassName,{
            [itemViewExposureSmartStyle['d-item-chart-point']]: isChartH5,
          })}
          reportData={reportData}
          trackCallback={trackCallback}
          markPoint
        />
      )}
    </View>
  )

package/dist/components/base/LazyLayoutLoad/index.tsx

@@ -1 +1 @@
-import Taro, { useRouter } from '@tarojs/taro'
        floorData = {},
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
  const rootDom = isH5AndJdShopView && needShowHighVersion ? null : document.querySelector('#J_shopHomeRoot')
        root: rootDom,    
        rootMargin: `0px 0px ${window.innerHeight}px 0px`,  
  useEffect(() => {
    if(needShowHighVersion) return
    if (type === LazyType.FLOOR) {
      const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
      !componentShowStateRef.current && dealPageScrollInfo(latestRes)
      Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
        !componentShowStateRef.current && dealPageScrollInfo(res)
      })
    }
  }, [])
    useEffect(() => {
        if((!needShowHighVersion && componentShowState === true) ||
          (needShowHighVersion && inView && isH5AndJdShopView)
        ) {
            console.log('>>>>>>>>>>>>>>>>>>> 楼层【id=' + containerId + '】已经渲染！')
            const modularPackResult = floorData?.floorExtInfo?.modularPackResult
                nativePageRegisterMessage(
                    Message_Type.NATIVE_INJECT_JS_FILE,
                    {
                        data: {
                            "bundleUrl": [bundleUrl]
                        },
                    },
                )
            }
        }
    }, [componentShowState,inView])
    if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') return
            ref={ref}
+import Taro, { useRouter } from '@tarojs/taro'
        floorData = {},
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
  const rootDom = isH5AndJdShopView && needShowHighVersion ? null : document.querySelector('#J_shopHomeRoot')
        root: rootDom,    
        rootMargin: `0px 0px ${window.innerHeight}px 0px`,  
  useEffect(() => {
    if(needShowHighVersion) return
    if (type === LazyType.FLOOR) {
      const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
      !componentShowStateRef.current && dealPageScrollInfo(latestRes)
      Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
        !componentShowStateRef.current && dealPageScrollInfo(res)
      })
    }
  }, [])
    useEffect(() => {
        if((!needShowHighVersion && componentShowState === true) ||
          (needShowHighVersion && inView && isH5AndJdShopView)
        ) {
            console.log('>>>>>>>>>>>>>>>>>>> 楼层【id=' + containerId + '】已经渲染！')
            const modularPackResult = floorData?.floorExtInfo?.modularPackResult
                nativePageRegisterMessage(
                    Message_Type.NATIVE_INJECT_JS_FILE,
                    {
                        data: {
                            "bundleUrl": [bundleUrl]
                        },
                    },
                )
            }
        }
    }, [componentShowState,inView])
    if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') return
            ref={ref}