feat: read template and style json for jscard

Signed-off-by: lileirjyb <[email protected]>

Author: lilei946

core/framework/src/dsls/xvm/page/interface.js

@@ -61,6 +61,10 @@ function initPage(page, code, query, globals) {
 
   const instEvaluate = context.quickapp.dock.makeEvaluateBuildScript(globals)
 
+  const jsonRequire = (jsonModuleName, options) => {
+    return context.quickapp.platform.requireJson(jsonModuleName, options)
+  }
+
   // 处理代码
   let functionBody
   if (typeof code === 'function') {
@@ -84,7 +88,8 @@ function initPage(page, code, query, globals) {
         $app_bootstrap$: instBootstrap,
         $app_require$: instRequireModule,
         $app_define_wrap$: instDefineWrap,
-        $app_evaluate$: instEvaluate
+        $app_evaluate$: instEvaluate,
+        $json_require$: jsonRequire
       },
       globals
     )
@@ -99,6 +104,7 @@ function initPage(page, code, query, globals) {
     global.$app_require$ = instRequireModule
     global.$app_define_wrap$ = instDefineWrap
     global.$app_evaluate$ = instEvaluate
+    global.$json_require$ = jsonRequire
 
     global.setTimeout = globals.setTimeout
     global.setInterval = globals.setInterval

core/framework/src/dsls/xvm/vm/index.js

@@ -405,6 +405,13 @@ export default class XVm {
     }
     options = options || {}
 
+    // 打包结果包含extracted字段，说明是新的js卡打包格式
+    // template和style的前处理后，js卡option.template和option.style的格式和之前的快应用就保持一致了
+    if (options.style && options.style.extracted) {
+      preHandleTemplate(options.template)
+      preHandleStyle(options)
+    }
+
     // 页面级Vm：i18n配置合并
     if (this._isPageVm() && this._page.app) {
       const ret = this._page.app.getLocaleConfig()
@@ -1193,3 +1200,64 @@ XVm.mixin = function(options) {
     }
   }
 }
+
+function inReservedKeys(key) {
+  const RESERVED_ATTRS = ['$listeners', '$attrs']
+  return RESERVED_ATTRS.includes(key)
+}
+
+function isFunctionStr(str) {
+  const pattern = /^\s*function\s*\([\w\s,$]*\)\s*\{[\s\S]*\}\s*$/
+  return pattern.test(str.trim())
+}
+
+/**
+ * 如果携带了新打包格式的参数，则先进行template和style的预处理
+ * 主要是将key的$符号去除
+ * 以及将字符串的"function"转成真正的function
+ *  */
+
+function preHandleTemplate(target) {
+  if (!target) return
+
+  Object.keys(target).forEach(key => {
+    if (Object.prototype.toString.call(target[key]) === '[object Object]') {
+      preHandleTemplate(target[key])
+    } else if (Object.prototype.toString.call(target[key]) === '[object Array]') {
+      target[key].forEach(item => {
+        preHandleTemplate(item)
+      })
+    } else if (typeof target[key] === 'string') {
+      if (!isFunctionStr(target[key])) {
+        // value非function字符串
+        if (key.startsWith('$') && !inReservedKeys(key)) {
+          // example: "$value": "name"，代表name为变量
+          const trimKey = key.substring(1)
+          const func = `function () { return this.${target[key]} }`
+          target[trimKey] = new Function(`return ${func}`)()
+          delete target[key]
+        }
+      } else {
+        // value为function字符串
+        if (key.startsWith('$')) {
+          // example: "$value": "function() {return this.a + '-' + this.b}"，代表name为变量
+          const trimKey = key.substring(1)
+          target[trimKey] = new Function(`return ${target[key]}`)()
+          delete target[key]
+        } else {
+          // 理论上不存在该情况，防止打包处理遗漏，在这里兜底
+          target[key] = new Function(`return ${target[key]}`)()
+        }
+      }
+    }
+  })
+}
+
+function preHandleStyle(options) {
+  if (!options.style) return
+
+  const styleObjectId = options.style['@info'].styleObjectId
+  const jsonPath = options.style.jsonPath
+
+  options.style = context.quickapp.platform.requireJson(jsonPath, { styleObjectId }) || {}
+}

core/framework/src/infras/platform/chunk.js

@@ -37,4 +37,64 @@ function requireBundleChunk(filePath) {
   return cont
 }
 
-export { registerBundleChunks, requireBundleChunk }
+const templateJsonMap = new Map()
+const styleJsonMap = new Map()
+function registerComponentJson(templateJson, cssJson) {
+  if (typeof templateJson === 'string') {
+    templateJson = JSON.parse(templateJson)
+  }
+  for (const compPath in templateJson) {
+    if (templateJson.hasOwnProperty(compPath)) {
+      let pathKey = compPath
+      if (pathKey.startsWith('/')) {
+        pathKey = pathKey.replace(/^\/+/, '')
+      }
+      const templateObj = templateJson[compPath]
+      templateJsonMap.set(pathKey, templateObj)
+    }
+  }
+
+  if (typeof cssJson === 'string') {
+    cssJson = JSON.parse(cssJson)
+  }
+  for (const compPath in cssJson) {
+    if (cssJson.hasOwnProperty(compPath)) {
+      let pathKey = compPath
+      if (pathKey.startsWith('/')) {
+        pathKey = pathKey.replace(/^\/+/, '')
+      }
+      const styleObj = cssJson[compPath]
+      styleJsonMap.set(pathKey, styleObj)
+    }
+  }
+}
+
+function requireJson(compPath, options) {
+  try {
+    if (options && options.styleObjectId) {
+      const styleObj = JSON.parse(styleJsonMap.get(compPath))
+      if (!styleObj) {
+        console.warn(
+          `### App Framework ### requireJson not exist ${compPath} -- options: ${JSON.stringify(
+            options
+          )}`
+        )
+      }
+      const style = styleObj[options.styleObjectId]
+      return style
+    } else if (options && options.componentPath) {
+      const templateObj = JSON.parse(templateJsonMap.get(compPath))
+      if (!templateObj) {
+        console.warn(
+          `### App Framework ### requireJson not exist ${compPath} -- options: ${JSON.stringify(
+            options
+          )}`
+        )
+      }
+      const template = templateObj[options.componentPath].template
+      return template
+    }
+  } catch (e) {}
+}
+
+export { registerBundleChunks, requireBundleChunk, registerComponentJson, requireJson }

core/framework/src/infras/platform/interface.js

@@ -10,7 +10,12 @@ import { invokeScript } from 'src/shared/function'
 import ModuleHost from './module/index'
 import { registerModules, execInvokeCallback, requireModule } from './module/interface'
 import Session from './session'
-import { registerBundleChunks, requireBundleChunk } from './chunk'
+import {
+  registerBundleChunks,
+  requireBundleChunk,
+  registerComponentJson,
+  requireJson
+} from './chunk'
 
 import {
   registerManifest,
@@ -140,10 +145,12 @@ export default {
   ModuleHost,
   requireModule,
   requireScriptFile,
+  requireJson,
   initInterface,
   exposure: {
     registerModules,
     registerBundleChunks,
+    registerComponentJson,
     execInvokeCallback,
     registerManifest,
     getManifestField,