Skip to content

Commit 1093fca

Browse files
lilei946lilei946
authored
feat: update jscard package result: extract template and json while keeping sourcemap (#96)
* feat: update jscard package result: extract template and json while keeping sourcemap Signed-off-by: lileirjyb <[email protected]> * feat: add support for model and dir for new jscard package Signed-off-by: lileirjyb <[email protected]> * fix: adapt for enable-extract-css option and fix for litecard h5 render in ide Signed-off-by: lileirjyb <[email protected]> * fix: fit for watch mode and add some comments Signed-off-by: lileirjyb <[email protected]> * feat: add style validator for themeColor Signed-off-by: lileirjyb <[email protected]> * fix: fit for release mode Signed-off-by: lileirjyb <[email protected]> * fix: add error msg for events with params for lite widget Signed-off-by: lileirjyb <[email protected]> * fix: fix some js widget and lite widget expression result bugs Signed-off-by: lileirjyb <[email protected]> * feat: compatibility with older js widget Signed-off-by: lileirjyb <[email protected]> --------- Signed-off-by: lileirjyb <[email protected]>
1 parent 955101b commit 1093fca

File tree

32 files changed

+1688
-640
lines changed

32 files changed

+1688
-640
lines changed

‎packages/hap-compiler/src/style/validator.js‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2656,7 +2656,24 @@ const validatorMap = {
26562656
starSecondary: validator.url,
26572657
// font
26582658
fontSrc: validator.fontSrc,
2659-
fontFamily: validator.fontFamily
2659+
fontFamily: validator.fontFamily,
2660+
themeColor: makeEnumValidator([
2661+
'uxCardColorTheme',
2662+
'uxCardColorAccent',
2663+
'uxCardColorPrimary',
2664+
'uxCardColorSecondary',
2665+
'uxCardColorSecondaryVariant',
2666+
'uxCardColorTertiary',
2667+
'uxCardColorQuaternary',
2668+
'uxCardColorContainer',
2669+
'uxCardBackground',
2670+
'uxCardColorHue',
2671+
'uxCardColorHueSecondary',
2672+
'uxIconColorAccent',
2673+
'uxIconColorPrimary',
2674+
'uxIconColorSecondary',
2675+
'uxIconColorBackground'
2676+
])
26602677
}
26612678

26622679
/**
@@ -2672,7 +2689,7 @@ function validate(name, value, options) {
26722689
const validator = validatorMap[name]
26732690

26742691
if (typeof validator === 'function') {
2675-
if (typeof value !== 'function') {
2692+
if (typeof value !== 'function' && value.indexOf('function') < 0) {
26762693
if (mightReferlocalResource(name)) {
26772694
result = validator(value, options)
26782695
} else {

‎packages/hap-compiler/src/template/exp.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ function trimhtml(str) {
3535
* @param isLite is lite card
3636
* @returns {*}
3737
*/
38-
function transExpr(expContent, toFunc, isLite) {
38+
function transExpr(expContent, toFunc, isLite, isCard) {
3939
let ret
4040
const trimExpContent = expContent.trim()
4141
if (!textParser.isExpr(trimExpContent)) {
@@ -64,8 +64,12 @@ function transExpr(expContent, toFunc, isLite) {
6464
ret = ret.join(' + ')
6565
if (toFunc !== false) {
6666
try {
67-
/* eslint-disable no-eval */
68-
ret = eval('(function () {return ' + ret + '})')
67+
if (isCard) {
68+
ret = 'function () {return ' + ret + '}'
69+
} else {
70+
/* eslint-disable no-eval */
71+
ret = eval('(function () {return ' + ret + '})')
72+
}
6973
/* eslint-enable no-eval */
7074
} catch (err) {
7175
err.isExpressionError = true

‎packages/hap-compiler/src/template/index.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -362,7 +362,13 @@ function parse(source, options) {
362362
{ treeAdapter: parse5.treeAdapters.default, locationInfo: true },
363363
options.filePath
364364
)
365-
const output = { result: {}, log: [], depFiles: [], isLite: !!options.lite }
365+
const output = {
366+
result: {},
367+
log: [],
368+
depFiles: [],
369+
isCard: !!options.card,
370+
isLite: !!options.lite
371+
}
366372

367373
// 模板为空或解析失败
368374
/* istanbul ignore if */

‎packages/hap-compiler/src/template/model.js‎

Lines changed: 124 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -102,9 +102,16 @@ function genCheckboxModel(node, attrName, value, output) {
102102
${expValue} = checked ? ${trueValueBinding} : ${falseValueBinding}
103103
}`
104104

105-
addAttr(output.result, attrName, eval(`(function() {${attrCheckedCode}})`))
106-
addHandler(output.result, 'change', eval(`(function(evt) {${eventChangeCode}})`))
107-
105+
const isCard = output.isCard
106+
const isLite = output.isLite
107+
if (isCard && !isLite) {
108+
addAttr(output.result, attrName, `(function() {${attrCheckedCode}})`)
109+
addAttr(output.result, attrName + 'Raw', value)
110+
addHandler(output.result, 'change', `function(evt) {${eventChangeCode}}`)
111+
} else {
112+
addAttr(output.result, attrName, eval(`(function() {${attrCheckedCode}})`))
113+
addHandler(output.result, 'change', eval(`(function(evt) {${eventChangeCode}})`))
114+
}
108115
return {
109116
attr: { checked: attrCheckedCode },
110117
events: { change: eventChangeCode }
@@ -125,8 +132,16 @@ function genRadioModel(node, attrName, value, output) {
125132
const attrCheckedCode = `return ${exp(value, false)} === ${valueBinding}`
126133
const eventChangeCode = `${exp(value, false)} = ${valueBinding}`
127134

128-
addAttr(output.result, attrName, eval(`(function() {${attrCheckedCode}})`))
129-
addHandler(output.result, 'change', eval(`(function(evt) {${eventChangeCode}})`))
135+
const isCard = output.isCard
136+
const isLite = output.isLite
137+
if (isCard && !isLite) {
138+
addAttr(output.result, attrName, `(function() {${attrCheckedCode}})`)
139+
addAttr(output.result, attrName + 'Raw', value)
140+
addHandler(output.result, 'change', `function(evt) {${eventChangeCode}}`)
141+
} else {
142+
addAttr(output.result, attrName, eval(`(function() {${attrCheckedCode}})`))
143+
addHandler(output.result, 'change', eval(`(function(evt) {${eventChangeCode}})`))
144+
}
130145

131146
return {
132147
attr: { checked: attrCheckedCode },
@@ -140,11 +155,17 @@ function genRadioModel(node, attrName, value, output) {
140155
* @param {object} output 构建的输出结果
141156
*/
142157
function genSelectModel(value, output) {
143-
addHandler(
144-
output.result,
145-
'change',
146-
eval(`(function(evt) { ${exp(value, false)} = evt.newValue})`)
147-
)
158+
const isCard = output.isCard
159+
const isLite = output.isLite
160+
if (isCard && !isLite) {
161+
addHandler(output.result, 'change', `function(evt) { ${exp(value, false)} = evt.newValue}`)
162+
} else {
163+
addHandler(
164+
output.result,
165+
'change',
166+
eval(`(function(evt) { ${exp(value, false)} = evt.newValue})`)
167+
)
168+
}
148169
}
149170

150171
/**
@@ -156,10 +177,16 @@ function genSelectModel(value, output) {
156177
*/
157178
function genDefaultModel(attrName, value, output) {
158179
const eventChangeCode = `${exp(value, false)} = evt.target.value`
159-
160-
addAttr(output.result, attrName, exp(value))
161-
addHandler(output.result, 'change', eval(`(function(evt) {${eventChangeCode}})`))
162-
180+
const isCard = output.isCard
181+
const isLite = output.isLite
182+
if (isCard && !isLite) {
183+
addAttr(output.result, attrName, exp(value, true, isLite, isCard))
184+
addAttr(output.result, attrName + 'Raw', value)
185+
addHandler(output.result, 'change', `function(evt) {${eventChangeCode}}`)
186+
} else {
187+
addAttr(output.result, attrName, exp(value))
188+
addHandler(output.result, 'change', eval(`(function(evt) {${eventChangeCode}})`))
189+
}
163190
return { events: { change: eventChangeCode } }
164191
}
165192

@@ -176,12 +203,22 @@ function genComponentModel(node, attrName, value, output, locationInfo, options)
176203
// 自定义组件model指令绑定的属性，依然作为普通属性处理
177204
validator.checkAttr(attrName, value, output, node.tagName, locationInfo, options)
178205

179-
// 为自定义组件绑定update:${attrName}事件，接收组件内部emit的update:${attrName}事件
180-
addHandler(
181-
output.result,
182-
`update:${attrName}`,
183-
eval(`(function(evt) { ${exp(value, false)} = evt.detail})`)
184-
)
206+
const isCard = output.isCard
207+
const isLite = output.isLite
208+
if (isCard && !isLite) {
209+
addHandler(
210+
output.result,
211+
`update:${attrName}`,
212+
`function(evt) { ${exp(value, false)} = evt.detail}`
213+
)
214+
} else {
215+
// 为自定义组件绑定update:${attrName}事件，接收组件内部emit的update:${attrName}事件
216+
addHandler(
217+
output.result,
218+
`update:${attrName}`,
219+
eval(`(function(evt) { ${exp(value, false)} = evt.detail})`)
220+
)
221+
}
185222
}
186223

187224
/**
@@ -196,40 +233,76 @@ function genDynamicModel(node, attrName, value, output, expType) {
196233
const checkboxCode = genCheckboxModel(node, attrName, value, output)
197234
const radioCode = genRadioModel(node, attrName, value, output)
198235
const textCode = genDefaultModel(attrName, value, output)
236+
const isCard = output.isCard
237+
const isLite = output.isLite
238+
if (isCard && !isLite) {
239+
addAttr(output.result, attrName, exp(value, true, isLite, isCard))
240+
addAttr(output.result, attrName + 'Raw', value)
199241

200-
addAttr(output.result, attrName, exp(value))
242+
addAttr(
243+
output.result,
244+
'checked',
245+
`(function() {
246+
if (${expType} === 'checkbox') {
247+
${checkboxCode.attr.checked}
248+
} else if (${expType} === 'radio') {
249+
${radioCode.attr.checked}
250+
} else {
251+
return false
252+
}
253+
})
254+
`
255+
)
201256

202-
addAttr(
203-
output.result,
204-
'checked',
205-
eval(`
206-
(function() {
207-
if (${expType} === 'checkbox') {
208-
${checkboxCode.attr.checked}
209-
} else if (${expType} === 'radio') {
210-
${radioCode.attr.checked}
211-
} else {
212-
return false
213-
}
214-
})
215-
`)
216-
)
257+
addAttr(output.result, 'checkedRaw', value)
258+
addHandler(
259+
output.result,
260+
'change',
261+
`function(evt) {
262+
if (${expType} === 'checkbox') {
263+
${checkboxCode.events.change}
264+
} else if (${expType} === 'radio') {
265+
${radioCode.events.change}
266+
} else {
267+
${textCode.events.change}
268+
}
269+
}`
270+
)
271+
} else {
272+
addAttr(output.result, attrName, exp(value))
217273

218-
addHandler(
219-
output.result,
220-
'change',
221-
eval(`
222-
(function(evt) {
223-
if (${expType} === 'checkbox') {
224-
${checkboxCode.events.change}
225-
} else if (${expType} === 'radio') {
226-
${radioCode.events.change}
227-
} else {
228-
${textCode.events.change}
229-
}
230-
})
231-
`)
232-
)
274+
addAttr(
275+
output.result,
276+
'checked',
277+
eval(`
278+
(function() {
279+
if (${expType} === 'checkbox') {
280+
${checkboxCode.attr.checked}
281+
} else if (${expType} === 'radio') {
282+
${radioCode.attr.checked}
283+
} else {
284+
return false
285+
}
286+
})
287+
`)
288+
)
289+
290+
addHandler(
291+
output.result,
292+
'change',
293+
eval(`
294+
(function(evt) {
295+
if (${expType} === 'checkbox') {
296+
${checkboxCode.events.change}
297+
} else if (${expType} === 'radio') {
298+
${radioCode.events.change}
299+
} else {
300+
${textCode.events.change}
301+
}
302+
})
303+
`)
304+
)
305+
}
233306
}
234307

235308
/**

0 commit comments

Comments
 (0)