1 |
|
2 |
|
3 | import {
|
4 | RAW,
|
5 |
|
6 | EXPRESSION
|
7 | } from './codegen'
|
8 |
|
9 | import {
|
10 | propsToAttrMap,
|
11 | isRenderableAttr
|
12 | } from 'web/server/util'
|
13 |
|
14 | import {
|
15 | isBooleanAttr,
|
16 | isEnumeratedAttr
|
17 | } from 'web/util/attrs'
|
18 |
|
19 | import type { StringSegment } from './codegen'
|
20 | import type { CodegenState } from 'compiler/codegen/index'
|
21 |
|
22 | const plainStringRE = /^"(?:[^"\\]|\\.)*"$|^'(?:[^'\\]|\\.)*'$/
|
23 |
|
24 |
|
25 |
|
26 | export function applyModelTransform (el: ASTElement, state: CodegenState) {
|
27 | if (el.directives) {
|
28 | for (let i = 0; i < el.directives.length; i++) {
|
29 | const dir = el.directives[i]
|
30 | if (dir.name === 'model') {
|
31 | state.directives.model(el, dir, state.warn)
|
32 |
|
33 | if (el.tag === 'textarea' && el.props) {
|
34 | el.props = el.props.filter(p => p.name !== 'value')
|
35 | }
|
36 | break
|
37 | }
|
38 | }
|
39 | }
|
40 | }
|
41 |
|
42 | export function genAttrSegments (
|
43 | attrs: Array<ASTAttr>
|
44 | ): Array<StringSegment> {
|
45 | return attrs.map(({ name, value }) => genAttrSegment(name, value))
|
46 | }
|
47 |
|
48 | export function genDOMPropSegments (
|
49 | props: Array<ASTAttr>,
|
50 | attrs: ?Array<ASTAttr>
|
51 | ): Array<StringSegment> {
|
52 | const segments = []
|
53 | props.forEach(({ name, value }) => {
|
54 | name = propsToAttrMap[name] || name.toLowerCase()
|
55 | if (isRenderableAttr(name) &&
|
56 | !(attrs && attrs.some(a => a.name === name))
|
57 | ) {
|
58 | segments.push(genAttrSegment(name, value))
|
59 | }
|
60 | })
|
61 | return segments
|
62 | }
|
63 |
|
64 | function genAttrSegment (name: string, value: string): StringSegment {
|
65 | if (plainStringRE.test(value)) {
|
66 |
|
67 | value = value.replace(/^'|'$/g, '"')
|
68 |
|
69 | if (isEnumeratedAttr(name) && value !== `"false"`) {
|
70 | value = `"true"`
|
71 | }
|
72 | return {
|
73 | type: RAW,
|
74 | value: isBooleanAttr(name)
|
75 | ? ` ${name}="${name}"`
|
76 | : value === '""'
|
77 | ? ` ${name}`
|
78 | : ` ${name}="${JSON.parse(value)}"`
|
79 | }
|
80 | } else {
|
81 | return {
|
82 | type: EXPRESSION,
|
83 | value: `_ssrAttr(${JSON.stringify(name)},${value})`
|
84 | }
|
85 | }
|
86 | }
|
87 |
|
88 | export function genClassSegments (
|
89 | staticClass: ?string,
|
90 | classBinding: ?string
|
91 | ): Array<StringSegment> {
|
92 | if (staticClass && !classBinding) {
|
93 | return [{ type: RAW, value: ` class="${JSON.parse(staticClass)}"` }]
|
94 | } else {
|
95 | return [{
|
96 | type: EXPRESSION,
|
97 | value: `_ssrClass(${staticClass || 'null'},${classBinding || 'null'})`
|
98 | }]
|
99 | }
|
100 | }
|
101 |
|
102 | export function genStyleSegments (
|
103 | staticStyle: ?string,
|
104 | parsedStaticStyle: ?string,
|
105 | styleBinding: ?string,
|
106 | vShowExpression: ?string
|
107 | ): Array<StringSegment> {
|
108 | if (staticStyle && !styleBinding && !vShowExpression) {
|
109 | return [{ type: RAW, value: ` style=${JSON.stringify(staticStyle)}` }]
|
110 | } else {
|
111 | return [{
|
112 | type: EXPRESSION,
|
113 | value: `_ssrStyle(${
|
114 | parsedStaticStyle || 'null'
|
115 | },${
|
116 | styleBinding || 'null'
|
117 | }, ${
|
118 | vShowExpression
|
119 | ? `{ display: (${vShowExpression}) ? '' : 'none' }`
|
120 | : 'null'
|
121 | })`
|
122 | }]
|
123 | }
|
124 | }
|