@conecli/cone-render 0.8.36 → 0.9.1-isv2.0

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

@@ -1 +1 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
  const [componentShowState, setComponentShowState] = useState(false)
    const componentLazyRef = useRef<HTMLElement | null>(null)
    const componentShowStateRef = useRef(false)
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
    useEffect(() => {
        if(needShowHighVersion) return
        const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
        !componentShowStateRef.current && dealPageScrollInfo(latestRes)
        Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
            !componentShowStateRef.current && dealPageScrollInfo(res)
        })
    
    if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') return
            <View
                ref={ componentLazyRef }
                className={classNames(
                    imageStyle['d-app-lazy-image'],
                    {
                        [imageStyle['d-lazy-sku-image']]: isSkuImage,
                    },
                    {
                        [imageStyle['d-hide-image-error']]: imageErrState,
                    },
                    {
                        [imageStyle['d-load-completed']]: loadSuccess,
                    },
                    {
                        'd-imag-rendering-crisp-edges':
                            !taroJdBaseInfo.info.pageInfo.isVipShop &&
                            imagRenderingSet,
                    },
                    'J_html5ImageBg',
                    className,
                )}
                style={{
                    ...style,
                    ...changeStyleIncludeWidthAndHeightAndBgColor(),
            >
                {(componentShowState || lazyLoad === false) && <img
                    src={getQualityImage(
                        imgSrc,
                        taroJdBaseInfo.info.pageInfo.isVipShop
                            ? NetWorkTypeQuality['perfect']
                            : NetWorkTypeQuality[getNetWorkType],
                    )}
                    onLoad={imageLoad.bind(this, imgSrc)}
                    onError={imageError}
                />}
            </View>
        ) : (
            <Image
                style={{
                    ...style,
                    ...changeStyleIncludeWidthAndHeightAndBgColor(),
                }}
                className={classNames(
                    imageStyle['d-lazy-image'],
                    {
                        [imageStyle['d-lazy-sku-image']]: isSkuImage,
                    },
                    {
                        [imageStyle['d-hide-image-error']]: imageErrState,
                    },
                    {
                        [imageStyle['d-load-completed']]: loadSuccess,
                    },
                    {
                        'd-imag-rendering-crisp-edges': imagRenderingSet,
                    },
                    className,
                )}
                src={getQualityImage(
                    imgSrc,
                    NetWorkTypeQuality[getNetWorkType],
                )}
                lazyLoad={isChartH5 ? false : lazyLoad}
                onError={imageError}
                onLoad={imageLoad.bind(this, imgSrc)}
                {...otherOption}
            />
        )
+import React, { useCallback, useEffect, useRef, useState } from 'react'
  getQualityImage,
  isH5AndJdShopView,
  isJdApp,
  isChartH5,
  isH5AndJdShopViewH5Scroll,
  getNativePageScrollRes,
  latestFromNativeMsgStorage,
  const {
    src,
    lazyLoad,
    imagRenderingSet,
    width,
    height,
    className,
    isSkuImage,
    hideErrorImage,
    style,
    backgroundColor,
    errorSrc,
    onLoad,
    onError,
    ...otherOption
  } = props
  getNetWorkType === NetWorkTypeQuality.default &&
    (getNetWorkType = taroJdBaseInfo.info.sysInfo.netWorkType)
  const [loadSuccess, setLoadSuccess] = useState(false)
  const [imageErrState, setImageErrState] = useState(false)
  const [componentShowState, setComponentShowState] = useState(false)
  const [imgSrc, setImgSrc] = useState(src)
  const componentLazyRef = useRef<HTMLElement | null>(null)
  const componentShowStateRef = useRef(false)
  const needShowHighVersion =
    isH5AndJdShopViewH5Scroll &&
    !(
      global.info.queryInfo?.downgraded &&
      global.info.queryInfo.downgraded === 'true'
    )
  const { ref, inView } = useInView({
    threshold: 0,
    triggerOnce: true,
    root: null,
    rootMargin: `0px 0px ${window.innerHeight * 0.5}px 0px`, 
  })
  const imageError = useCallback(
    (e) => {
      console.log('图片加载错误', e)
      errorSrc && setImgSrc(errorSrc)
      hideErrorImage && setImageErrState(true)
      typeof onError === 'function' && onError(e, src, props)
    },
    [src],
  )
  
  const imageLoad = useCallback(
    (_src, event) => {
      setLoadSuccess(true)
      typeof onLoad === 'function' && onLoad(event, src, props)
    },
    [src],
  )
  
  const changeStyleIncludeWidthAndHeightAndBgColor = () => {
    const changeStyle = {}
    width && (changeStyle['width'] = width)
    height && (changeStyle['height'] = height)
    backgroundColor && (changeStyle['backgroundColor'] = backgroundColor)
    return changeStyle
  }
  useEffect(() => {
    if (needShowHighVersion) return
    const latestRes =
      latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
    !componentShowStateRef.current && dealPageScrollInfo(latestRes)
    Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
      !componentShowStateRef.current && dealPageScrollInfo(res)
    })
  }, [])
  
  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 * 1.5 + offSetY 
      const eleOffsetTop = Math.ceil(eleClientRect.top)
      const eleOffsetHeight = Math.ceil(eleClientRect.height)
      if (!componentShowStateRef.current) {
        if (getContainerHeightOffSetY > eleOffsetTop) {
          componentShowStateRef.current = true
          setComponentShowState(true)
        }
      }
    }
  }
            <View
                ref={ componentLazyRef }
                className={classNames(
                    imageStyle['d-app-lazy-image'],
                    {
                        [imageStyle['d-lazy-sku-image']]: isSkuImage,
                    },
                    {
                        [imageStyle['d-hide-image-error']]: imageErrState,
                    },
                    {
                        [imageStyle['d-load-completed']]: loadSuccess,
                    },
                    {
                        'd-imag-rendering-crisp-edges':
                            !taroJdBaseInfo.info.pageInfo.isVipShop &&
                            imagRenderingSet,
                    },
                    'J_html5ImageBg',
                    className,
                )}
                style={{
                    ...style,
                    ...changeStyleIncludeWidthAndHeightAndBgColor(),
            >
                {(componentShowState || lazyLoad === false) && <img
                    src={getQualityImage(
                        imgSrc,
                        taroJdBaseInfo.info.pageInfo.isVipShop
                            ? NetWorkTypeQuality['perfect']
                            : NetWorkTypeQuality[getNetWorkType],
                    )}
                    onLoad={imageLoad.bind(this, imgSrc)}
                    onError={imageError}
                />}
            </View>
        ) : (
            <Image
                style={{
                    ...style,
                    ...changeStyleIncludeWidthAndHeightAndBgColor(),
                }}
                className={classNames(
                    imageStyle['d-lazy-image'],
                    {
                        [imageStyle['d-lazy-sku-image']]: isSkuImage,
                    },
                    {
                        [imageStyle['d-hide-image-error']]: imageErrState,
                    },
                    {
                        [imageStyle['d-load-completed']]: loadSuccess,
                    },
                    {
                        'd-imag-rendering-crisp-edges': imagRenderingSet,
                    },
                    className,
                )}
                src={getQualityImage(
                    imgSrc,
                    NetWorkTypeQuality[getNetWorkType],
                )}
                lazyLoad={isChartH5 ? false : lazyLoad}
                onError={imageError}
                onLoad={imageLoad.bind(this, imgSrc)}
                {...otherOption}
            />
        )
  lazyLoad: true, 
  isSkuImage: false,
  hideErrorImage: false, 
  imagRenderingSet: true, 
  src: null,
  style: null, 
  width: null,
  height: null,
  backgroundColor: null, 
  className: null, 
  errorSrc: null, 
  onLoad: null, 
  onError: null, 

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

@@ -1 +1 @@
-import React from 'react'
    <View className={blockStyle['skeleton-header']}>
        <Image
          className={blockStyle['skeleton-header-img']}
          src={ShopHeaderSvgUrl}
          mode='widthFix'
        />
    </View>
    <View className={blockStyle['skeleton-new-product']}>
        <ContentLoader viewBox='0 0 375 280' {...props}>
            <rect x='10' y='38' rx='5' ry='5' width='355' height='55' />
            <rect x='12' y='112' rx='3' ry='3' width='111' height='95' />
            <rect x='12' y='11' rx='3' ry='3' width='100' height='10' />
            <rect x='254' y='112' rx='3' ry='3' width='111' height='95' />
            <rect x='14' y='218' rx='0' ry='0' width='111' height='27' />
            <rect x='261' y='217' rx='0' ry='0' width='111' height='27' />
            <rect x='134' y='112' rx='3' ry='3' width='111' height='95' />
            <rect x='133' y='218' rx='0' ry='0' width='111' height='27' />
            <rect x='20' y='255' rx='0' ry='0' width='100' height='9' />
            <rect x='140' y='255' rx='0' ry='0' width='100' height='9' />
            <rect x='263' y='255' rx='0' ry='0' width='100' height='9' />
        </ContentLoader>
    </View>
+import React from 'react'
  <View className={blockStyle['skeleton-header']}>
    <Image
      className={blockStyle['skeleton-header-img']}
      src={ShopHeaderSvgUrl}
      mode="widthFix"
    />
  </View>

package/dist/components/remoteFloorItem.tsx

@@ -1 +1 @@
-import React, { Suspense, lazy } from 'react'
  const { floorData, renderSourceType, updateContainerFloorListDataFn } = props
  const dataDefines = getFloorDataToDataDefines(floorData)
  
  const getFloorSetHeight = (item) => {
    const getHeight = item?.floorExtInfo?.floorHeight
      ? Number(item?.floorExtInfo?.floorHeight)
      : 200
    return getHeight > 0 ? getHeight : 200
  }
  console.log(
    '>>>>>>>>>> floorModuleType === FloorModuleType.ISVDESIGNERH5MODULE >>>>>>>>>>',
  )
  const renderResult = (() => {
    try {
      console.log('>>>>>>>>>> 开始渲染1个isv模块 >>>>>>>>>>')
      console.log(
        '==========当前业务类型renderSourceType、楼层floorId: ',
        renderSourceType,
        floorData.uid,
      )
      const modularPackResult = floorData?.floorExtInfo?.modularPackResult
      const modularPackResultObj =
        typeof modularPackResult === 'string'
          ? JSON.parse(modularPackResult)
          : modularPackResult
      const opt = {
        msg: `店铺首页isv h5楼层隐藏不显示。原因：modularPackResult数据不完备。页面类型-buildType: ${buildType}。楼层顺序-floorIdx: ${floorData?.floorIdx}`,
        buildType,
        uid: floorData?.uid,
        floorIdx: floorData?.floorIdx,
        shopId: floorData?.floorExtInfo?.shopId,
        moduleId: floorData?.moduleId,
        moduleName: floorData?.moduleName,
        middleTemplateId: floorData?.middleTemplateId,
        modularPackResult: modularPackResult,
      }
      if (modularPackResultObj) {
        const { bundleUrl, bundleFileName } = modularPackResultObj
        if (bundleUrl && bundleFileName) {
          let ISVModule =
            taroJdBaseInfo?.renderedIsvComponents[
              `${floorData.uid}_${bundleFileName}`
            ] || null
          if (!ISVModule) {
            ISVModule = lazy(
              () => import(bundleFileName + '@@@@@@' + bundleUrl),
            )
            console.log(
              '1|加载isv模块==========走lazy import生成新的isv模块react组件',
              bundleFileName,
            )
            taroJdBaseInfo.renderedIsvComponents[
              `${floorData.uid}_${bundleFileName}`
            ] = ISVModule
            console.log(
              '2|渲染isv模块的react组件==========,window.taroJshopH5WebpackJsonp上的组件是否已就绪: ',
              bundleFileName,
              window['taroJshopH5WebpackJsonp'].find(
                (item) => item[0][0] == bundleFileName,
              ),
            )
          } else {
            console.log(
              '1|加载isv模块==========不走lazy import生成新的isv模块react组件，从已加载中获取，taroJdBaseInfo: ',
              taroJdBaseInfo,
            )
            console.log(
              '2|渲染isv模块的react组件==========,taroJdBaseInfo.renderedIsvComponents上的组件是否已就绪: ',
              taroJdBaseInfo.renderedIsvComponents[
                `${floorData.uid}_${bundleFileName}`
              ],
            )
          }
          const _floorHeight = getFloorSetHeight(floorData)
          return (
            <ErrorBoundary {...props}>
              <Suspense
                fallback={
                  <View
                    style={{
                      position: 'relative',
                      background: `#ffffff url('${JD_PLACEHOLDER_IMG}')	center center no-repeat`,
                      height: `${_floorHeight}px`,
                    }}
                  ></View>
                }
              >
                <ISVFloor {...props} dataDefines={dataDefines}>
                  <ISVModule {...props} dataDefines={dataDefines}></ISVModule>
                </ISVFloor>
              </Suspense>
            </ErrorBoundary>
          )
        } else {
          console.log(
            '3|isv模块渲染异常，modularPackResult中缺少bundleUrl或bundleFileName==========modularPackResult: ',
            modularPackResultObj,
          )
          sgmCustomReport({
            code: 'isvModuleError',
            msg: opt,
          })
          return null
        }
      } else {
        console.log(
          '3|isv模块渲染异常，缺少modularPackResult==========modularPackResult: ',
          modularPackResultObj,
        )
        sgmCustomReport({
            code: 'isvModuleError',
            msg: opt,
          })
        return null
      }
    } catch (err) {
      console.log('3|isv模块渲染异常，floorItem逻辑错误==========err: ', err)
      sgmCustomReport({
        code: 'isvModuleError',
        msg: {
          msg: 'remoteFloorItem try catch 异常',
          err
        },
      })
      return null
    }
  })()
  if (renderResult === null) {
    updateContainerFloorListDataFn &&
      updateContainerFloorListDataFn({
        type: 'filter',
        containerId: floorData?.uid,
      })
    console.log('renderResult === null: 命中了！')
    taroEventSendPageScrollInfo()
  } else {
    console.log('renderResult !== null: 没命中', renderResult)
  }
  return renderResult
+import React, { Suspense, lazy } from 'react'
  getBundleUrl,
  getBundleFileName,
  formatPackResult,
  const { floorData, renderSourceType, updateContainerFloorListDataFn } = props
  const dataDefines = getFloorDataToDataDefines(floorData)
  
  const getFloorSetHeight = (item) => {
    const getHeight = item?.floorExtInfo?.floorHeight
      ? Number(item?.floorExtInfo?.floorHeight)
      : 200
    return getHeight > 0 ? getHeight : 200
  }
  console.log(
    '>>>>>>>>>> floorModuleType === FloorModuleType.ISVDESIGNERH5MODULE >>>>>>>>>>',
  )
  const renderResult = (() => {
    try {
      console.log('>>>>>>>>>> 开始渲染1个isv模块 >>>>>>>>>>')
      console.log(
        '==========当前业务类型renderSourceType、楼层floorId: ',
        renderSourceType,
        floorData.uid,
      )
      const modularPackResult = floorData?.floorExtInfo?.modularPackResult
      const modularPackResultObj = formatPackResult(modularPackResult)
      const bundleUrl = getBundleUrl(modularPackResultObj)
      const bundleFileName = getBundleFileName(modularPackResultObj)
      const opt = {
        msg: `店铺首页isv h5楼层隐藏不显示。原因：modularPackResult数据不完备。页面类型-buildType: ${buildType}。楼层顺序-floorIdx: ${floorData?.floorIdx}`,
        buildType,
        uid: floorData?.uid,
        floorIdx: floorData?.floorIdx,
        shopId: floorData?.floorExtInfo?.shopId,
        moduleId: floorData?.moduleId,
        moduleName: floorData?.moduleName,
        middleTemplateId: floorData?.middleTemplateId,
        modularPackResult: modularPackResult,
      }
      if (bundleUrl && bundleFileName) {
        let ISVModule =
          taroJdBaseInfo?.renderedIsvComponents[
            `${floorData.uid}_${bundleFileName}`
          ] || null
        if (!ISVModule) {
          ISVModule = lazy(() => import(bundleFileName + '@@@@@@' + bundleUrl))
          console.log(
            '1|加载isv模块==========走lazy import生成新的isv模块react组件',
            bundleFileName,
          )
          taroJdBaseInfo.renderedIsvComponents[
            `${floorData.uid}_${bundleFileName}`
          ] = ISVModule
          console.log(
            '2|渲染isv模块的react组件==========,window.taroJshopH5WebpackJsonp上的组件是否已就绪: ',
            bundleFileName,
            window['taroJshopH5WebpackJsonp'].find(
              (item) => item[0][0] == bundleFileName,
            ),
          )
        } else {
          console.log(
            '1|加载isv模块==========不走lazy import生成新的isv模块react组件，从已加载中获取，taroJdBaseInfo: ',
            taroJdBaseInfo,
          )
          console.log(
            '2|渲染isv模块的react组件==========,taroJdBaseInfo.renderedIsvComponents上的组件是否已就绪: ',
            taroJdBaseInfo.renderedIsvComponents[
              `${floorData.uid}_${bundleFileName}`
            ],
          )
        }
        const _floorHeight = getFloorSetHeight(floorData)
        return (
          <ErrorBoundary {...props}>
            <Suspense
              fallback={
                <View
                  style={{
                    position: 'relative',
                    background: `#ffffff url('${JD_PLACEHOLDER_IMG}')	center center no-repeat`,
                    height: `${_floorHeight}px`,
                  }}
                ></View>
              }
            >
              <ISVFloor {...props} dataDefines={dataDefines}>
                <ISVModule {...props} dataDefines={dataDefines}></ISVModule>
              </ISVFloor>
            </Suspense>
          </ErrorBoundary>
        )
      } else {
        console.log(
          '3|isv模块渲染异常，modularPackResult中缺少bundleUrl或bundleFileName==========modularPackResult: ',
          modularPackResultObj,
        )
        sgmCustomReport({
          code: 'isvModuleError',
          msg: opt,
        })
        return null
      }
    } catch (err) {
      console.log('3|isv模块渲染异常，floorItem逻辑错误==========err: ', err)
      sgmCustomReport({
        code: 'isvModuleError',
        msg: {
          msg: 'remoteFloorItem try catch 异常',
          err,
        },
      })
      return null
    }
  })()
  if (renderResult === null) {
    updateContainerFloorListDataFn &&
      updateContainerFloorListDataFn({
        type: 'filter',
        containerId: floorData?.uid,
      })
    console.log('renderResult === null: 命中了！')
    taroEventSendPageScrollInfo()
  } else {
    console.log('renderResult !== null: 没命中', renderResult)
  }
  return renderResult

package/dist/interface/common.ts

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
+import Taro from '@tarojs/taro'
      floorVideInfo: object