@conecli/cone-render 0.9.1-shop2.8 → 0.10.1-beta.0

package/dist/components/debug/DebugLayout/index.module.scss

@@ -0,0 +1,67 @@
+
+.debug-layout-warp {
+  position: absolute;
+  border-radius: 12PX;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 50;
+
+	.debug-layout {
+		position: absolute;
+		border-radius: 12PX;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+
+		border: 1PX solid #f50707;
+		background-color: rgba(219, 38, 38, 0.2);
+
+		&[data-module-type='JOINT'] {
+			border: 1PX solid #f507c9;
+			background-color: rgba(219, 38, 150, 0.2);
+		}
+
+		&.green {
+			border: 1PX solid #04a607;
+			background-color: rgba(38, 219, 71, 0.2);
+		}
+
+		.cd-version-list {
+			pointer-events: none;
+			position: absolute;
+			font-size: 0;
+			top: 0;
+			left: 0;
+			right: 0;
+			background-color: transparent;
+			text-align: center;
+			overflow: hidden;
+		}
+		
+		.cd-version-item {
+			display: inline-block;
+			background-color: #00c853;
+			font-size: 30px;
+			color: white;
+			padding: 1PX 3PX;
+			border-radius: 4PX;
+			margin: 0 5PX;
+			&[data-version='3.5.4'] {
+				background-color: #999;
+			}
+		}
+	}
+
+	.d-info {
+		position: relative;
+		cursor: pointer;
+		z-index: 3;
+		margin: 3PX 3PX;
+		width: 22PX;
+		height: 22PX;
+		background: url('../../../assets/icon_blue_info.svg') center center / 22PX 22PX no-repeat;
+	}
+}

package/dist/components/debug/DebugLayout/index.tsx

@@ -0,0 +1 @@
+import React from 'react'
  const { debug } = global.info.queryInfo
  const { floorData, index } = props
  if (debug != '1' || !floorData) {
    return null
  }
  const renderRemoteLayout = () => {
    const isRemote = isRemoteFloor(floorData)
    if (isRemote) {
      const moduleType = getModuleType(floorData)
      const packResult = floorData?.floorExtInfo?.modularPackResult
      const packResultObj = JSONParse(packResult)
      const taroVersionList = getTaroVersionList(packResultObj)
      const layoutClass = classNames(style['debug-layout'], {
        [style['green']]: taroVersionList.length >= 2,
      })
      return (
        <View data-module-type={moduleType} className={layoutClass}>
          <View className={style['cd-version-list']}>
            {taroVersionList.map(item => {
              return (
                <Text className={style['cd-version-item']} data-version={item}>
                  v{item}
                </Text>
              )
            })}
          </View>
        </View>
      )
    } else {
      return null
    }
  }
  return (
    <View className={style['debug-layout-warp']}>
      <View
        className={style['d-info']}
        onClick={() => {
          Messager && Messager.trigger('openDebugLayout', { floorData, index })
        }}
      />
      {renderRemoteLayout()}
    </View>
  )

package/dist/components/debug/DebugLayout/utils.ts

@@ -0,0 +1 @@
+import { RemoteLoadFloorList, FloorModuleType } from '../../../common/const'
  if (!packResultObj) {
    return []
  }
  const result: string[] = []
  if (packResultObj.bundleUrl) {
    result.push(packResultObj.taroVersion || '3.5.4')
  }
  if (packResultObj.bundleUrlV2) {
    result.push(packResultObj.taroVersionV2)
  }
  return result
  if (!floorData) {
    return false
  }
  const moduleFlag = floorData.floorExtInfo?.moduleFlag
  const floorLoadWay = floorData.floorExtInfo?.floorLoadWay
  return RemoteLoadFloorList.includes(moduleFlag) || floorLoadWay === 2
  if (!floorData) {
    return ''
  }
  const moduleFlag = floorData.floorExtInfo?.moduleFlag
  const floorLoadWay = floorData.floorExtInfo?.floorLoadWay
  if (moduleFlag === FloorModuleType.ISVDESIGNERH5MODULE) {
    return 'ISV'
  } else if (
    moduleFlag === FloorModuleType.JOINT_MODULE ||
    floorLoadWay === 2
  ) {
    return 'JOINT'
  } else {
    return 'SYSTEM'
  }

package/dist/components/decorate/EmptyFloorModule/index.tsx

@@ -1 +1 @@
-import { View, Text } from '@tarojs/components'
  '//img11.360buyimg.com/imagetools/jfs/t1/141506/22/31698/7923/637b6db9E2af80265/10e76e2c31e0e356.png'
  const newModuleFloorTypeList = [100, 101, 100000, 99999]
  const isNewFloorState = newModuleFloorTypeList.includes(moduleType)
  if ((moduleType == 99999 || moduleType == 101) && !previewUri) {
  if (moduleFlag && TRUSTEESHIP_MODULE_FLAG_LIST.indexOf(moduleFlag) !== -1) return null
+import { View, Text } from '@tarojs/components'
  '//img11.360buyimg.com/imagetools/jfs/t1/141506/22/31698/7923/637b6db9E2af80265/10e76e2c31e0e356.png'
  const {
    moduleType,
    configEmpty,
    previewUri = null,
    uid,
    moduleFlag,
    moduleName,
  } = props.floorData
  let previewUrl = previewUri
  const newModuleFloorTypeList = [100, 101, 100000, 99999]
  const isNewFloorState = newModuleFloorTypeList.includes(moduleType)
  if ((moduleType == 99999 || moduleType == 101) && !previewUri) {
    previewUrl = decorateModulePrevDefaultUrl
  }
  const loadImageErr = e => {
    e.target.src = decorateModulePrevDefaultUrl
  }
  if (moduleFlag && TRUSTEESHIP_MODULE_FLAG_LIST.indexOf(moduleFlag) !== -1)
    return null
  return isNewFloorState && configEmpty && previewUrl ? (
    <View
      className={emptyModuleStyle['d-empty-module']}
      data-floor-uid={uid}
      data-floor-type={moduleFlag}
      data-floor-modulename={moduleName}
    >
      {}
      {}
      {}
      {}
      {}
      {}
      {}
      <View className={classNames(emptyModuleStyle['d-empty-img'])}>
        <img
          width={355}
          className={classNames('J_floorEmptyDataImg')}
          src={previewUrl}
          onError={loadImageErr.bind(this)}
        />
      </View>
    </View>
  ) : (
    <View
      className={classNames(
        emptyModuleStyle['d-empty-module'],
        emptyModuleStyle['d-empty-text-warp'],
      )}
      data-floor-uid={uid}
      data-floor-type={moduleFlag}
      data-floor-modulename={moduleName}
    >
      <Text className={emptyModuleStyle['d-empty-text']}>
        该楼层还未配置数据
      </Text>
    </View>
  )

package/dist/components/floorItem.jd.tsx

@@ -1 +1 @@
-import { ComponentInterFace } from '../interface/component'
  const { floorData, builtInComponents = {} } = props
  const floorModuleType = floorData?.floorExtInfo?.moduleFlag
  const FloorContentItem =
    (floorModuleType && builtInComponents[floorModuleType]) || null
  const dataDefines = getFloorDataToDataDefines(floorData)
  return FloorContentItem ? (
    <ErrorBoundary {...props}>
      <FloorContentItem {...props} dataDefines={dataDefines} />
    </ErrorBoundary>
  ) : null
  renderSourceType: BUSINESS_TYPE.ONLINE, 
  switch (moduleId) {
    case 83158:
      return 'freeLayout'
    case 99654:
      return 'activeText'
    case 100382:
      return 'superGoods'
  }
  floorList.map((item) => {
    if (!item.floorExtInfo) {
      return null
    }
    const moduleFlag = item.floorExtInfo.moduleFlag
    if (!moduleFlag) {
      const newModuleFlag = moduleId2ModuleFlag(item.moduleId)
      if (newModuleFlag) {
        item.floorExtInfo.moduleFlag = newModuleFlag
      }
    }
  })
+import React from 'react'
    return FloorContentItem ? (
        <FloorContentItem {...props} dataDefines={dataDefines} />
    ) : isDevMode ? (
        renderDecorateDefaultModule()
    ) : null

package/dist/components/floorItem.weapp.tsx

@@ -1 +1 @@
-import React from 'react'
    return FloorContentItem ? (
        <FloorContentItem {...props} dataDefines={dataDefines} />
    ) : isDevMode ? (
        renderDecorateDefaultModule()
    ) : null
+import React from 'react'
    return FloorContentItem ? (
      <ErrorBoundary {...props}>
        <FloorContentItem {...props} dataDefines={dataDefines} />
      </ErrorBoundary>
    ) : isDevMode ? (
        renderDecorateDefaultModule()
    ) : null

package/dist/components/isv/Floor/index.tsx

@@ -1 +1 @@
-import React, { useCallback } from 'react'
  const getRenderRealTimeKeyObj = {
    key:  isRealTimeRender ? Date.now() : forceRenderTime
  }
  console.log("远程加载楼层渲染key信息", getRenderRealTimeKeyObj)
      {floorData?.showCommonFloorHead === false ? null : <CommonFloorHead dataDefines={dataDefines} floorData={floorData} {...getRenderRealTimeKeyObj}  />}
          ...getRenderRealTimeKeyObj
  isRealTimeRender: false, 
  forceRenderTime: 1, 
+import React, { useCallback } from 'react'
  const {
    style,
    dataDefines,
    containerBorderRadius,
    floorData,
    isRealTimeRender,
    forceRenderTime,
  } = props
  const getRenderRealTimeKeyObj = {
    key: isRealTimeRender ? Date.now() : forceRenderTime,
  }
  console.log('远程加载楼层渲染key信息', getRenderRealTimeKeyObj)
  return (
    <View className={floorStyle['wrap']} style={style}>
      {floorData?.showCommonFloorHead === false ? null : (
        <CommonFloorHead
          dataDefines={dataDefines}
          floorData={floorData}
          {...getRenderRealTimeKeyObj}
        />
      )}
      <View
        className={floorStyle['wrap']}
        style={
          containerBorderRadius
            ? {
                borderRadius: containerBorderRadius + 'px',
              }
            : {}
        }
      >
        {}
        {props.children &&
          React.cloneElement(props.children, {
            dataDefines: dataDefines,
            ...getRenderRealTimeKeyObj,
          })}
      </View>
    </View>
  )
  isRealTimeRender: false, 
  forceRenderTime: 1, 

package/dist/components/remoteFloorItem.tsx

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
  getBundleUrl,
  getBundleFileName,
  formatPackResult,
  const { floorData, renderSourceType, updateContainerFloorListDataFn } = props
  const dataDefines = getFloorDataToDataDefines(floorData)
  const [forceRenderTime,setForceRenderTime] = useState(1)
  useEffect(() => {
    isJdAndAndroidDevice && Taro.eventCenter.on(TaroEventType.FORCE_UPDATE_PAGE_LAYOUT, (_result) => {
      setForceRenderTime(Date.now())
    })
    return () => {
      isJdAndAndroidDevice && Taro.eventCenter.off(TaroEventType.FORCE_UPDATE_PAGE_LAYOUT)
    }
  },[])
  
  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} forceRenderTime={forceRenderTime} isRealTimeRender={realTimerRenderTypeList.includes(taroJdBaseInfo.info.pageInfo.dataType)}>
                <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
+import Taro from '@tarojs/taro'
  getBundleUrl,
  getBundleFileName,
  formatPackResult,
  const { floorData, renderSourceType, updateContainerFloorListDataFn } = props
  const dataDefines = getFloorDataToDataDefines(floorData)
  const [forceRenderTime,setForceRenderTime] = useState(1)
  useEffect(() => {
    isJdAndAndroidDevice && Taro.eventCenter.on(TaroEventType.FORCE_UPDATE_PAGE_LAYOUT, (_result) => {
      setForceRenderTime(Date.now())
    })
    return () => {
      isJdAndAndroidDevice && Taro.eventCenter.off(TaroEventType.FORCE_UPDATE_PAGE_LAYOUT)
    }
  },[])
  
  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: `店铺h5楼层隐藏不显示。原因：模块数据不完备，楼层过滤。`,
        floorIdx: floorData?.floorIdx,
        uid: floorData?.uid,
        shopId: floorData?.floorExtInfo?.shopId,
        moduleId: floorData?.moduleId,
        moduleDesignerType: floorData?.floorExtInfo?.moduleDesignerType,
        floorLoadWay: floorData?.floorExtInfo?.floorLoadWay, 
        floorKind: floorData?.floorExtInfo?.floorKind, 
        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} forceRenderTime={forceRenderTime} isRealTimeRender={realTimerRenderTypeList.includes(taroJdBaseInfo.info.pageInfo.dataType)}>
                  <ISVModule {...props} dataDefines={dataDefines}></ISVModule>
                </ISVFloor>
              </Suspense>
            </ErrorBoundary>
          )
        } else {
          console.log(
            '3|isv模块渲染异常，modularPackResult中缺少bundleUrl或bundleFileName==========modularPackResult: ',
            modularPackResultObj,
          )
          sgmCustomReport({
            code: getSgmCustomCode(SgmCustomCode.REMOTEMODULE_DATA),
            msg: opt,
          })
          return null
        }
    } catch (err) {
      console.log('3|isv模块渲染异常，floorItem逻辑错误==========err: ', 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'
      floorVideInfo: object
    openAppData?: {
      [key: string]: any
    }
+import Taro from '@tarojs/taro'
    isJingxiMiniViewState?: boolean
      floorVideInfo: object
        originQueryInfo: {
    openAppData?: {
      [key: string]: any
    }