cardbuddy 0.22.0 → 0.24.0

package/dist/vendored/server/core/flameCompile/client.js

@@ -0,0 +1,466 @@
+/**
+ * 客户端产物编译（GaiaX 明文模板包）
+ *
+ * 1:1 迁移自 flame-release-mange（Java）的
+ *   client/NativeEngine.java
+ *   client/convert/{CardConvert,ComponentConvert,StyleConvert,PropertyConvert,
+ *                   EventActionConvert,DirectiveConvert,DataConvert,ConditionConvert}
+ *   client/entity/*（TemplateEntity / JsonFileEntity / CssFileEntity / DataBindingFileEntity ...）
+ *
+ * 产物（每个模板一个目录）：
+ *   index.json        视图层级 { id, type:'gaia-template', sub-type?, package, layers }
+ *   index.css         `#nodeId { prop:value; }`
+ *   index.databinding { data:{ nodeId:{...} }, event:{ nodeId:{...} } }
+ *   index.data        卡片入参默认值（仅主模板）
+ *   index.js          Component({ onShow/onReady/... })
+ *   index.style       index.js 的 SM4-CBC 密文（iOS 侧优先读它，见 GXTemplateReader）
+ *
+ * 列表类组件（ListLayout / GridLayout）会拆成三级模板：
+ *   <cardCode>            ← 外层占位（grid 节点 + 属性绑定）
+ *     <cardCode>_sub_<cid>    ← 真正的 grid 模板（含 column 等）
+ *       <cardCode>_sub_<cid>_item ← 循环项模板（子组件挂这里）
+ * 该结构由平台侧历史产物固化，客户端只认这套约定，不要简化成单层。
+ */
+
+import { elementOf, styleConst, styleVar } from './clientElements.js'
+import { convertCondition, convertPropsClient, convertExpression, hasText } from './common.js'
+
+/* ------------------------------- 文件实体 ------------------------------- */
+
+function createTemplate(code) {
+  return {
+    code,
+    cssRules: [], // [{ name, contents: [] }]
+    dataProps: {}, // index.data
+    dataBind: { data: {}, event: {} }, // index.databinding
+    js: { onShow: [], onDataInit: [], onReady: [], onHide: [], onReuse: [], onDestroy: [] },
+    json: { code: '', type: '', subType: '', packageInfo: {}, other: {}, layers: [] },
+  }
+}
+
+function addDataBind(template, componentId, map) {
+  const bucket = template.dataBind.data
+  bucket[componentId] = Object.assign(bucket[componentId] || {}, map)
+}
+
+function ensureDataBind(template, componentId) {
+  const bucket = template.dataBind.data
+  if (!bucket[componentId]) bucket[componentId] = {}
+  return bucket[componentId]
+}
+
+function addEventBind(template, componentId, map) {
+  const bucket = template.dataBind.event
+  bucket[componentId] = Object.assign(bucket[componentId] || {}, map)
+}
+
+const LIFECYCLES = ['onShow', 'onDataInit', 'onReady', 'onHide', 'onReuse', 'onDestroy']
+
+function addLifecycleCode(template, lifeCycle, code) {
+  if (LIFECYCLES.includes(lifeCycle)) template.js[lifeCycle].push(code)
+}
+
+/* ------------------------------- 属性转换 ------------------------------- */
+
+/** 常量域：标量 JSON 编码，Map/List 递归（与 Java convertConstField 等价） */
+function normalizeConst(value) {
+  if (value === null || value === undefined) return undefined
+  if (Array.isArray(value)) return value.map((item) => (item && typeof item === 'object' ? normalizeConstMap(item) : item))
+  if (typeof value === 'object') return normalizeConstMap(value)
+  return JSON.stringify(value)
+}
+
+function normalizeConstMap(map) {
+  const out = {}
+  for (const [k, v] of Object.entries(map)) {
+    const normalized = normalizeConst(v)
+    if (normalized !== undefined) out[k] = normalized
+  }
+  return out
+}
+
+/**
+ * 变量域合并：字符串非空才写入（表达式为空表示「沿用静态值」），
+ * 对象/数组递归合并，保证同一节点既有静态也有动态属性时不互相覆盖。
+ */
+function mergeVarField(target, key, value) {
+  if (value === null || value === undefined) return
+  if (Array.isArray(value)) {
+    const list = Array.isArray(target[key]) ? target[key] : []
+    target[key] = list
+    value.forEach((item, index) => {
+      if (!list[index]) list[index] = {}
+      if (item && typeof item === 'object') {
+        for (const [k, v] of Object.entries(item)) mergeVarField(list[index], k, v)
+      }
+    })
+    return
+  }
+  if (typeof value === 'object') {
+    const bucket = target[key] && typeof target[key] === 'object' ? target[key] : {}
+    target[key] = bucket
+    for (const [k, v] of Object.entries(value)) mergeVarField(bucket, k, v)
+    return
+  }
+  if (typeof value === 'string') {
+    if (hasText(value)) target[key] = value
+    return
+  }
+  target[key] = value
+}
+
+/** 组件属性 → databinding（静态走 const 归一化，动态覆盖） */
+function convertComponentProps(component, template) {
+  const { const: constProps, var: varProps } = convertPropsClient(component.properties)
+  const out = normalizeConstMap(constProps)
+
+  for (const [key, value] of Object.entries(varProps)) mergeVarField(out, key, value)
+
+  addDataBind(template, component.componentId, out)
+  return { constProps, varProps, merged: out }
+}
+
+/* ------------------------------- 样式转换 ------------------------------- */
+
+function convertStyle(className, style, template, componentId) {
+  const { const: constProps, var: varProps } = convertPropsClient(style.properties)
+
+  template.cssRules.push({ name: `#${componentId}`, contents: styleConst(className, constProps) })
+
+  const dynamic = {}
+  const vars = styleVar(varProps)
+  for (const [k, v] of Object.entries(vars)) {
+    if (hasText(v)) dynamic[k] = v
+  }
+  addDataBind(template, componentId, { extend: dynamic })
+}
+
+/* ------------------------------- 事件转换 ------------------------------- */
+
+function convertEventBody(eventAction, component, engine, warnings) {
+  const actionType = eventAction.actionType
+  const { const: constProps } = convertPropsClient(eventAction.properties)
+  const desc = component ? elementOf(component.className) : null
+  let out = ''
+
+  // Canvas 的 onMeasured 前置：把画布尺寸换算进缩放坐标系
+  if (
+    component &&
+    desc &&
+    desc.type === 'canvas' &&
+    eventAction.eventKey === 'onMeasured' &&
+    actionType === 'customAction'
+  ) {
+    out +=
+      'event.canvas = new Canvas(event.canvasId);' +
+      'event.canvas.zoom = (event.screenWidth || 375)/375;' +
+      'event.canvas.width = event.width/event.canvas.zoom;' +
+      'event.canvas.height = event.height/event.canvas.zoom;' +
+      'event.width = event.canvas.width;' +
+      'event.height = event.canvas.height;'
+  }
+
+  if (actionType === 'customAction') {
+    const fn = constProps.function
+    const code = fn && typeof fn === 'object' ? fn.code : null
+    if (typeof code === 'string') out += code
+    else warnings.push(`事件 ${eventAction.eventKey} 的 customAction 缺少 function.code，已跳过`)
+  } else if (actionType === 'closeAlertCard') {
+    out += `ynet.callJSAPI('${actionType}',${JSON.stringify({ cardCode: engine.code })});`
+  } else if (hasText(actionType)) {
+    out += `ynet.callJSAPI('${actionType}',${JSON.stringify(constProps)});`
+  }
+
+  if (
+    component &&
+    desc &&
+    desc.type === 'canvas' &&
+    eventAction.eventKey === 'onMeasured' &&
+    actionType === 'customAction'
+  ) {
+    out += "\nevent.canvas.getContext('2d').endDraw();"
+  }
+
+  return out
+}
+
+function convertEventAction(eventAction, template, engine, component, warnings) {
+  if (!hasText(eventAction.eventKey) || !hasText(eventAction.actionType)) return
+
+  if (!component) {
+    // 卡片生命周期：包一层箭头函数隔离作用域，再在生命周期里立即执行
+    const body = convertEventBody(eventAction, null, engine, warnings)
+    addLifecycleCode(template, eventAction.eventKey, `((event) => {${body}\n})(event);`)
+    return
+  }
+
+  const cid = component.componentId
+  const body = convertEventBody(eventAction, component, engine, warnings)
+  const code =
+    `let ${cid}=this.getElementById('${cid}');` +
+    `if(${cid}){` +
+    `${cid}.addEventListener('${eventAction.eventKey}',(event)=>{${body}\n})` +
+    `}`
+  template.js.onReady.push(code)
+}
+
+/** 双向绑定：value 绑定到变量时补 input 监听，把输入写回状态 */
+function convertTwoWayBinding(component, varProps, template) {
+  const desc = elementOf(component.className)
+  if (!desc.twoWayBinding) return
+  const modelVar = varProps.value
+  if (!hasText(modelVar)) return
+  const cid = component.componentId
+  template.js.onReady.push(
+    `let _${cid}_=this.getElementById('${cid}');` +
+      `if(_${cid}_){` +
+      `_${cid}_.addEventListener('input',(event)=>{` +
+      `this._syncData_(${JSON.stringify(modelVar)}, event)` +
+      `})` +
+      `}`
+  )
+}
+
+/* ------------------------------- 指令转换 ------------------------------- */
+
+function convertDirectives(component, template, warnings) {
+  const { const: constProps } = convertPropsClient(component.directives)
+  const showProps = constProps['v-show']
+  if (!showProps || typeof showProps !== 'object') return
+
+  const showType = showProps.showType
+  if (showType === '00') return
+
+  const conditionMap = showProps.condition
+  if (!conditionMap || typeof conditionMap !== 'object') return
+
+  const bucket = ensureDataBind(template, component.componentId)
+  const extend = bucket.extend && typeof bucket.extend === 'object' ? bucket.extend : {}
+  bucket.extend = extend
+
+  const expression = conditionMap.expression
+  if (hasText(expression)) {
+    if (showType === '01') extend.display = `(${expression}) ? 'block' : 'none'`
+    else if (showType === '02') extend.display = `(${expression}) ? 'none' : 'block'`
+    return
+  }
+
+  if (Array.isArray(conditionMap.group) && conditionMap.group.length > 0) {
+    const expr = convertCondition(conditionMap.group)
+    if (showType === '01') extend.display = `${expr} ? 'block' : 'none'`
+    else if (showType === '02') extend.display = `${expr} ? 'none' : 'block'`
+    return
+  }
+
+  warnings.push(`组件 ${component.componentId} 的 v-show 条件为空，已忽略`)
+}
+
+/* -------------------------------- 引擎 --------------------------------- */
+
+export function createClientCompiler(card, { version = '', warnings = [] } = {}) {
+  const engine = { code: card.code, version, templates: [] }
+
+  const newTemplate = () => {
+    const t = createTemplate('')
+    engine.templates.push(t)
+    return t
+  }
+
+  const convertBaseInfo = (code, subType, template, width) => {
+    template.json.code = code
+    template.json.type = 'gaia-template'
+    if (hasText(subType)) template.json.subType = subType
+    template.json.packageInfo = {
+      id: code,
+      version: engine.version,
+      dependencies: {},
+    }
+    if (width !== undefined) template.json.packageInfo.width = width
+  }
+
+  /* ---------------------------- 组件递归 ---------------------------- */
+
+  const convertArray = (components, template, layers) => {
+    for (const component of components) convert(component, template, layers)
+  }
+
+  const convert = (component, template, layers) => {
+    const desc = elementOf(component.className)
+    if (desc.unknown) warnings.push(`未识别的组件类型 ${component.className}（${component.componentId}），按 view 输出`)
+
+    if (desc.isNewTemplate) {
+      createComponentTemplate(component, template, layers, desc)
+      return
+    }
+    convertComponent(component, template, layers, desc)
+  }
+
+  const convertComponent = (component, template, layers, desc) => {
+    const layer = { id: component.componentId, type: desc.type, layers: [] }
+    layers.push(layer)
+
+    convertStyle(component.className, component.style, template, component.componentId)
+
+    const { varProps } = convertComponentProps(component, template)
+    convertTwoWayBinding(component, varProps, template)
+
+    for (const ea of component.eventactions) convertEventAction(ea, template, engine, component, warnings)
+
+    convertDirectives(component, template, warnings)
+
+    const slot = component.slots && component.slots[0]
+    if (slot) convertArray(slot.components, template, layer.layers)
+  }
+
+  /**
+   * 列表 / 网格：外层占位 + 子模板 + 循环项模板（三级）
+   * 注意：平台侧会把 componentId 改写成子模板编码，后续样式与绑定的 key 都用新编码。
+   */
+  const createComponentTemplate = (component, template, layers, desc) => {
+    const newTemplateCode = `${engine.code}_sub_${component.componentId}`
+    component.componentId = newTemplateCode
+
+    layers.push({ id: newTemplateCode, type: 'gaia-template', subType: 'custom', layers: [] })
+
+    convertComponentProps(component, template)
+    template.json.packageInfo.dependencies[newTemplateCode] = engine.version
+
+    const componentTemplate = newTemplate()
+    componentTemplate.code = newTemplateCode
+    addDataBind(componentTemplate, newTemplateCode, { value: '$$' })
+    convertBaseInfo(newTemplateCode, desc.type, componentTemplate)
+
+    convertTemplateComponent(component, componentTemplate, desc)
+  }
+
+  const convertTemplateComponent = (component, template, desc) => {
+    convertStyle(component.className, component.style, template, component.componentId)
+
+    const { const: constProps } = convertPropsClient(component.properties)
+    const constTransferred = desc.newTemplatePropsConst
+      ? desc.newTemplatePropsConst(constProps)
+      : constProps
+    for (const [k, v] of Object.entries(constTransferred)) template.json.other[k] = v
+    // 循环项数据由 databinding 的 `$$` 提供，模板顶层不保留 value
+    delete template.json.other.value
+
+    for (const ea of component.eventactions) convertEventAction(ea, template, engine, component, warnings)
+    convertDirectives(component, template, warnings)
+
+    const itemTemplateCode = `${component.componentId}_item`
+    template.json.layers.push({ id: itemTemplateCode, type: 'gaia-template', subType: 'custom', layers: [] })
+    template.json.packageInfo.dependencies[itemTemplateCode] = engine.version
+
+    const itemTemplate = newTemplate()
+    itemTemplate.code = itemTemplateCode
+    convertBaseInfo(itemTemplateCode, '', itemTemplate)
+
+    // 循环项样式：宽度由布局方向决定（横向列表 auto，其余撑满）
+    // 注意归属 —— 平台侧 StyleConvert.convertItem 收的是 itemComponentTemplate，
+    // 规则落在**第三层（_item）模板自己的 index.css** 里，不能挂到第二层。
+    if (desc.itemStyleConst) {
+      const contents = desc.itemStyleConst(constProps)
+      if (contents && contents.length) {
+        itemTemplate.cssRules.push({ name: `#${itemTemplateCode}`, contents })
+      }
+    }
+
+    const slot = component.slots && component.slots[0]
+    if (slot) convertArray(slot.components, itemTemplate, itemTemplate.json.layers)
+  }
+
+  /* ------------------------------ 卡片 ------------------------------ */
+
+  const convertCard = () => {
+    const template = newTemplate()
+
+    template.code = card.code
+    template.json.code = card.code
+    template.json.type = 'gaia-template'
+    template.json.packageInfo = {
+      id: card.code,
+      version: engine.version,
+      dependencies: {},
+      params: [],
+    }
+    if (card.width) template.json.packageInfo.width = card.width
+
+    // 数据定义：入参树进 package.params，默认值进 index.data
+    template.json.packageInfo.params = card.data.props.map(toParamField)
+    for (const field of card.data.props) {
+      template.dataProps[field.key] = field.defaultValue
+    }
+
+    convertStyle(card.className, card.style, template, card.code)
+
+    for (const ea of card.eventactions) convertEventAction(ea, template, engine, null, warnings)
+
+    convertArray(card.components, template, template.json.layers)
+  }
+
+  convertCard()
+  return engine
+}
+
+function toParamField(field) {
+  return {
+    name: field.key,
+    remark: field.name,
+    type: field.type,
+    child: (field.children || []).map(toParamField),
+  }
+}
+
+/* ------------------------------ 文件序列化 ------------------------------ */
+
+export function serializeTemplateJson(template) {
+  const out = { ...template.json.other }
+  out.id = template.json.code
+  out.type = template.json.type
+  if (hasText(template.json.subType)) out['sub-type'] = template.json.subType
+  out.package = template.json.packageInfo
+  out.layers = serializeLayers(template.json.layers)
+  // 紧凑输出：平台侧走 fastjson 的 JSON.toJSONString，同样无缩进。
+  // 若这里加缩进，产物虽语义相同但字节全行不同，与线上产物对拍就失去意义。
+  return JSON.stringify(out)
+}
+
+function serializeLayers(layers) {
+  return layers.map((layer) => {
+    const out = { id: layer.id, type: layer.type }
+    if (hasText(layer.subType)) out['sub-type'] = layer.subType
+    if (layer.layers && layer.layers.length) out.layers = serializeLayers(layer.layers)
+    return out
+  })
+}
+
+export function serializeTemplateCss(template) {
+  return template.cssRules
+    .map((rule) => {
+      const body = rule.contents.map((line) => `${line};\n`).join('')
+      return `${rule.name}{\n${body}}\n`
+    })
+    .join('')
+}
+
+export function serializeTemplateDataBinding(template) {
+  const result = {}
+  if (Object.keys(template.dataBind.data).length) result.data = template.dataBind.data
+  if (Object.keys(template.dataBind.event).length) result.event = template.dataBind.event
+  return JSON.stringify(result)
+}
+
+export function serializeTemplateData(template) {
+  return JSON.stringify(template.dataProps)
+}
+
+export function serializeTemplateJs(template) {
+  let out = 'Component({'
+  for (const lifeCycle of LIFECYCLES) {
+    const codes = template.js[lifeCycle]
+    if (!codes.length) continue
+    out += `${lifeCycle}: function(event){${codes.join('')}},`
+  }
+  out += '});'
+  return out
+}