@tarojs/plugin-html 3.5.0-canary.1 → 3.5.0-theta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/index.js +124 -126
  2. package/dist/index.js.map +1 -1
  3. package/dist/runtime.js +304 -301
  4. package/dist/runtime.js.map +1 -1
  5. package/index.js +1 -0
  6. package/package.json +6 -7
  7. package/src/index.ts +6 -6
  8. package/src/runtime.ts +114 -119
  9. package/src/utils.ts +6 -4
  10. package/LICENSE +0 -21
package/dist/runtime.js CHANGED
@@ -1,307 +1,310 @@
1
- import { isString, isFunction, mergeReconciler, warn } from '@tarojs/shared';
1
+ import { isString, isFunction, hooks, warn } from '@tarojs/shared';
2
2
 
3
- function genAttrMapFnFromDir(dir) {
4
- const fn = function (key, value) {
5
- const lowerKey = key.toLowerCase();
6
- if (lowerKey in dir) {
7
- const res = dir[lowerKey];
8
- if (isString(res)) {
9
- key = res;
10
- }
11
- else {
12
- key = res[0];
13
- value = res[1][value] || value;
14
- }
15
- }
16
- return [key, value];
17
- };
18
- return fn;
19
- }
20
- const inlineElements = new Set([]);
21
- const blockElements = new Set([]);
22
- const specialElements = new Map([
23
- ['slot', 'slot'],
24
- ['form', 'form'],
25
- ['iframe', 'web-view'],
26
- ['img', 'image'],
27
- ['audio', 'audio'],
28
- ['video', 'video'],
29
- ['canvas', 'canvas'],
30
- ['a', {
31
- mapName(props) {
32
- return !props.href || (/^javascript/.test(props.href)) ? 'view' : 'navigator';
33
- },
34
- mapNameCondition: ['href'],
35
- mapAttr: genAttrMapFnFromDir({
36
- href: 'url',
37
- target: ['openType', {
38
- _blank: 'navigate',
39
- _self: 'redirect'
40
- }]
41
- })
42
- }],
43
- ['input', {
44
- mapName(props) {
45
- if (props.type === 'checkbox') {
46
- return 'checkbox';
47
- }
48
- else if (props.type === 'radio') {
49
- return 'radio';
50
- }
51
- return 'input';
52
- },
53
- mapNameCondition: ['type'],
54
- mapAttr(key, value, props) {
55
- const htmlKey = key.toLowerCase();
56
- if (htmlKey === 'autofocus') {
57
- key = 'focus';
58
- }
59
- else if (htmlKey === 'readonly') {
60
- if (props.disabled === true) {
61
- value = true;
62
- }
63
- key = 'disabled';
64
- }
65
- else if (htmlKey === 'type') {
66
- if (value === 'password') {
67
- key = 'password';
68
- value = true;
69
- }
70
- else if (value === 'tel') {
71
- value = 'number';
72
- }
73
- }
74
- return [key, value];
75
- }
76
- }],
77
- ['label', {
78
- mapName: 'label',
79
- mapAttr: genAttrMapFnFromDir({
80
- htmlfor: 'for'
81
- })
82
- }],
83
- ['textarea', {
84
- mapName: 'textarea',
85
- mapAttr: genAttrMapFnFromDir({
86
- autofocus: 'focus',
87
- readonly: 'disabled'
88
- })
89
- }],
90
- ['progress', {
91
- mapName: 'progress',
92
- mapAttr(key, value, props) {
93
- if (key === 'value') {
94
- const max = props.max || 1;
95
- key = 'percent';
96
- value = Math.round(value / max * 100);
97
- }
98
- return [key, value];
99
- }
100
- }],
101
- ['button', {
102
- mapName: 'button',
103
- mapAttr(key, value) {
104
- if (key === 'type' && (value === 'submit' || value === 'reset')) {
105
- key = 'formType';
106
- }
107
- return [key, value];
108
- }
109
- }]
3
+ function genAttrMapFnFromDir(dir) {
4
+ const fn = function (key, value) {
5
+ const lowerKey = key.toLowerCase();
6
+ if (lowerKey in dir) {
7
+ const res = dir[lowerKey];
8
+ if (isString(res)) {
9
+ key = res;
10
+ }
11
+ else {
12
+ key = res[0];
13
+ value = res[1][value] || value;
14
+ }
15
+ }
16
+ return [key, value];
17
+ };
18
+ return fn;
19
+ }
20
+ const inlineElements = new Set([]);
21
+ const blockElements = new Set([]);
22
+ const specialElements = new Map([
23
+ ['slot', 'slot'],
24
+ ['form', 'form'],
25
+ ['iframe', 'web-view'],
26
+ ['img', 'image'],
27
+ ['audio', 'audio'],
28
+ ['video', 'video'],
29
+ ['canvas', 'canvas'],
30
+ ['a', {
31
+ mapName(props) {
32
+ return !props.href || (/^javascript/.test(props.href)) ? 'view' : 'navigator';
33
+ },
34
+ mapNameCondition: ['href'],
35
+ mapAttr: genAttrMapFnFromDir({
36
+ href: 'url',
37
+ target: ['openType', {
38
+ _blank: 'navigate',
39
+ _self: 'redirect'
40
+ }]
41
+ })
42
+ }],
43
+ ['input', {
44
+ mapName(props) {
45
+ if (props.type === 'checkbox') {
46
+ return 'checkbox';
47
+ }
48
+ else if (props.type === 'radio') {
49
+ return 'radio';
50
+ }
51
+ return 'input';
52
+ },
53
+ mapNameCondition: ['type'],
54
+ mapAttr(key, value, props) {
55
+ const htmlKey = key.toLowerCase();
56
+ if (htmlKey === 'autofocus') {
57
+ key = 'focus';
58
+ }
59
+ else if (htmlKey === 'readonly') {
60
+ if (props.disabled === true) {
61
+ value = true;
62
+ }
63
+ key = 'disabled';
64
+ }
65
+ else if (htmlKey === 'type') {
66
+ if (value === 'password') {
67
+ key = 'password';
68
+ value = true;
69
+ }
70
+ else if (value === 'tel') {
71
+ value = 'number';
72
+ }
73
+ }
74
+ return [key, value];
75
+ }
76
+ }],
77
+ ['label', {
78
+ mapName: 'label',
79
+ mapAttr: genAttrMapFnFromDir({
80
+ htmlfor: 'for'
81
+ })
82
+ }],
83
+ ['textarea', {
84
+ mapName: 'textarea',
85
+ mapAttr: genAttrMapFnFromDir({
86
+ autofocus: 'focus',
87
+ readonly: 'disabled'
88
+ })
89
+ }],
90
+ ['progress', {
91
+ mapName: 'progress',
92
+ mapAttr(key, value, props) {
93
+ if (key === 'value') {
94
+ const max = props.max || 1;
95
+ key = 'percent';
96
+ value = Math.round(value / max * 100);
97
+ }
98
+ return [key, value];
99
+ }
100
+ }],
101
+ ['button', {
102
+ mapName: 'button',
103
+ mapAttr(key, value) {
104
+ if (key === 'type' && (value === 'submit' || value === 'reset')) {
105
+ key = 'formType';
106
+ }
107
+ return [key, value];
108
+ }
109
+ }]
110
110
  ]);
111
111
 
112
- function isHtmlTags(nodeName) {
113
- if (inlineElements.has(nodeName) || blockElements.has(nodeName) || specialElements.has(nodeName)) {
114
- return true;
115
- }
116
- return false;
117
- }
118
- function getMappedType(nodeName, rawProps) {
119
- if (inlineElements.has(nodeName)) {
120
- return 'text';
121
- }
122
- else if (specialElements.has(nodeName)) {
123
- const mapping = specialElements.get(nodeName);
124
- if (isString(mapping)) {
125
- return mapping;
126
- }
127
- const { mapName } = mapping;
128
- return isFunction(mapName) ? mapName(rawProps) : mapName;
129
- }
130
- else {
131
- return 'view';
132
- }
133
- }
134
- function getAttrMapFn(nodeName) {
135
- const mapping = specialElements.get(nodeName);
136
- if (!isString(mapping)) {
137
- return mapping === null || mapping === void 0 ? void 0 : mapping.mapAttr;
138
- }
139
- }
140
- function getMapNameByCondition(nodeName, attr, props) {
141
- const mapping = specialElements.get(nodeName);
142
- if (!mapping || isString(mapping))
143
- return;
144
- const { mapName, mapNameCondition } = mapping;
145
- if (!mapNameCondition)
146
- return;
147
- if (mapNameCondition.indexOf(attr) > -1 && !isString(mapName)) {
148
- return mapName(props);
149
- }
150
- }
151
- function mapNameByContion(nodeName, key, element) {
152
- const mapName = getMapNameByCondition(nodeName, key, element.props);
153
- if (mapName) {
154
- element.enqueueUpdate({
155
- path: `${element._path}.${"nn" /* NodeName */}`,
156
- value: mapName
157
- });
158
- }
159
- }
160
- function ensureHtmlClass(tagName, className = '') {
161
- const classList = className.split(' ');
162
- const htmlClass = `h5-${tagName}`;
163
- if (classList.indexOf(htmlClass) === -1) {
164
- classList.push(htmlClass);
165
- }
166
- return classList.join(' ');
167
- }
168
- function ensureRect(props, style = '') {
169
- let cssText = style;
170
- const { width, height } = props;
171
- if (width) {
172
- cssText = `width: ${width};${cssText}`;
173
- }
174
- if (height) {
175
- cssText = `height: ${height};${cssText}`;
176
- }
177
- return cssText;
178
- }
179
- function defineMappedProp(obj, propName, mapName) {
180
- Object.defineProperty(obj, propName, {
181
- enumerable: true,
182
- configurable: true,
183
- get() {
184
- return obj[mapName];
185
- },
186
- set(val) {
187
- obj[mapName] = val;
188
- }
189
- });
112
+ function isHtmlTags(nodeName) {
113
+ if (inlineElements.has(nodeName) || blockElements.has(nodeName) || specialElements.has(nodeName)) {
114
+ return true;
115
+ }
116
+ return false;
117
+ }
118
+ function getMappedType(nodeName, rawProps) {
119
+ if (inlineElements.has(nodeName)) {
120
+ return 'text';
121
+ }
122
+ else if (specialElements.has(nodeName)) {
123
+ const mapping = specialElements.get(nodeName);
124
+ if (isString(mapping)) {
125
+ return mapping;
126
+ }
127
+ const { mapName } = mapping;
128
+ return isFunction(mapName) ? mapName(rawProps) : mapName;
129
+ }
130
+ else {
131
+ return 'view';
132
+ }
133
+ }
134
+ function getAttrMapFn(nodeName) {
135
+ const mapping = specialElements.get(nodeName);
136
+ if (!isString(mapping)) {
137
+ return mapping === null || mapping === void 0 ? void 0 : mapping.mapAttr;
138
+ }
139
+ }
140
+ function getMapNameByCondition(nodeName, attr, props) {
141
+ const mapping = specialElements.get(nodeName);
142
+ if (!mapping || isString(mapping))
143
+ return;
144
+ const { mapName, mapNameCondition } = mapping;
145
+ if (!mapNameCondition)
146
+ return;
147
+ if (mapNameCondition.indexOf(attr) > -1 && !isString(mapName)) {
148
+ return mapName(props);
149
+ }
150
+ }
151
+ function mapNameByContion(nodeName, key, element, componentsAlias) {
152
+ const mapName = getMapNameByCondition(nodeName, key, element.props);
153
+ if (mapName) {
154
+ const mapNameAlias = componentsAlias[mapName]._num;
155
+ element.enqueueUpdate({
156
+ path: `${element._path}.${"nn" /* NodeName */}`,
157
+ value: mapNameAlias
158
+ });
159
+ }
160
+ }
161
+ function ensureHtmlClass(tagName, className = '') {
162
+ const classList = className.split(' ');
163
+ const htmlClass = `h5-${tagName}`;
164
+ if (classList.indexOf(htmlClass) === -1) {
165
+ classList.unshift(htmlClass);
166
+ }
167
+ return classList.join(' ');
168
+ }
169
+ function ensureRect(props, style = '') {
170
+ let cssText = style;
171
+ const { width, height } = props;
172
+ if (width) {
173
+ cssText = `width: ${width};${cssText}`;
174
+ }
175
+ if (height) {
176
+ cssText = `height: ${height};${cssText}`;
177
+ }
178
+ return cssText;
179
+ }
180
+ function defineMappedProp(obj, propName, mapName) {
181
+ Object.defineProperty(obj, propName, {
182
+ enumerable: true,
183
+ configurable: true,
184
+ get() {
185
+ return obj[mapName];
186
+ },
187
+ set(val) {
188
+ obj[mapName] = val;
189
+ }
190
+ });
190
191
  }
191
192
 
192
- const hostConfig = {
193
- modifyHydrateData(data) {
194
- const nodeName = data["nn" /* NodeName */];
195
- if (!isHtmlTags(nodeName))
196
- return;
197
- process.env.NODE_ENV !== 'production' && warn(data["nn" /* NodeName */] === 'select', '请使用 Picker 组件代替 <select>');
198
- // map nodeName
199
- data["nn" /* NodeName */] = getMappedType(nodeName, data);
200
- // map attr Key/Value
201
- const attrMapFn = getAttrMapFn(nodeName);
202
- if (attrMapFn) {
203
- for (const key in data) {
204
- const value = data[key];
205
- const [mapKey, mapValue] = attrMapFn(key, value, data);
206
- if (key !== mapKey) {
207
- delete data[key];
208
- data[mapKey] = mapValue;
209
- }
210
- else if (value !== mapValue) {
211
- data[key] = mapValue;
212
- }
213
- }
214
- }
215
- if (nodeName === 'br') {
216
- data["cn" /* Childnodes */] = [{
217
- ["nn" /* NodeName */]: '#text',
218
- v: '\n'
219
- }];
220
- }
221
- data["cl" /* Class */] = ensureHtmlClass(nodeName, data["cl" /* Class */]);
222
- data["st" /* Style */] = ensureRect(data, data["st" /* Style */]);
223
- },
224
- modifySetAttrPayload(element, key, payload) {
225
- const { nodeName, _path, props } = element;
226
- if (!isHtmlTags(nodeName))
227
- return;
228
- // map nodeName
229
- mapNameByContion(nodeName, key, element);
230
- // map attr Key/Value
231
- const attrMapFn = getAttrMapFn(nodeName);
232
- if (attrMapFn) {
233
- const value = payload.value;
234
- const [mapKey, mapValue] = attrMapFn(key, value, props);
235
- payload.path = `${_path}.${mapKey}`;
236
- payload.value = mapValue;
237
- }
238
- if (key === "cl" /* Class */) {
239
- payload.value = ensureHtmlClass(nodeName, payload.value);
240
- }
241
- else if (key === "st" /* Style */ || key === 'width' || key === 'height') {
242
- payload.path = `${_path}.${"st" /* Style */}`;
243
- payload.value = ensureRect(props, element.style.cssText);
244
- }
245
- },
246
- modifyRmAttrPayload(element, key, payload) {
247
- const { nodeName, _path, props } = element;
248
- if (!isHtmlTags(nodeName))
249
- return;
250
- // map nodeName
251
- mapNameByContion(nodeName, key, element);
252
- // map attr Key/Value
253
- const attrMapFn = getAttrMapFn(nodeName);
254
- if (attrMapFn) {
255
- const value = payload[key];
256
- const [mapKey] = attrMapFn(key, value, props);
257
- payload.path = `${_path}.${mapKey}`;
258
- }
259
- if (key === "cl" /* Class */) {
260
- payload.value = ensureHtmlClass(nodeName, payload.value);
261
- }
262
- else if (key === "st" /* Style */ || key === 'width' || key === 'height') {
263
- payload.path = `${_path}.${"st" /* Style */}`;
264
- payload.value = ensureRect(props, element.style.cssText);
265
- }
266
- },
267
- onAddEvent(type, _handler, _options, node) {
268
- if (!isHtmlTags(node.nodeName))
269
- return;
270
- if (type === 'click') {
271
- defineMappedProp(node.__handlers, type, 'tap');
272
- }
273
- else if (node.nodeName === 'input') {
274
- if (type === 'change') {
275
- if (node.props.type === 'checkbox' || node.props.type === 'radio') {
276
- defineMappedProp(node.__handlers, type, 'tap');
277
- }
278
- else {
279
- defineMappedProp(node.__handlers, type, 'input');
280
- }
281
- }
282
- else if (type === 'keypress') {
283
- defineMappedProp(node.__handlers, type, 'confirm');
284
- }
285
- }
286
- },
287
- modifyTaroEvent(event, element) {
288
- const { nodeName, props } = element;
289
- if (nodeName === 'input' && event.type === 'tap') {
290
- if (props.type === 'checkbox') {
291
- props.checked = !props.checked;
292
- }
293
- else if (props.type === 'radio' && !props.checked) {
294
- props.checked = true;
295
- }
296
- if (event.mpEvent) {
297
- const { currentTarget, target } = event.mpEvent;
298
- currentTarget.checked = props.checked;
299
- if (target.id === currentTarget.id) {
300
- target.checked = props.checked;
301
- }
302
- }
303
- }
304
- }
305
- };
306
- mergeReconciler(hostConfig);
193
+ hooks.tap('modifyHydrateData', data => {
194
+ const nodeName = data["nn" /* NodeName */];
195
+ if (!isHtmlTags(nodeName))
196
+ return;
197
+ process.env.NODE_ENV !== 'production' && warn(data["nn" /* NodeName */] === 'select', '请使用 Picker 组件代替 <select>');
198
+ // map nodeName
199
+ data["nn" /* NodeName */] = getMappedType(nodeName, data);
200
+ // map attr Key/Value
201
+ const attrMapFn = getAttrMapFn(nodeName);
202
+ if (attrMapFn) {
203
+ for (const key in data) {
204
+ const value = data[key];
205
+ const [mapKey, mapValue] = attrMapFn(key, value, data);
206
+ if (key !== mapKey) {
207
+ delete data[key];
208
+ data[mapKey] = mapValue;
209
+ }
210
+ else if (value !== mapValue) {
211
+ data[key] = mapValue;
212
+ }
213
+ }
214
+ }
215
+ if (nodeName === 'br') {
216
+ data["cn" /* Childnodes */] = [{
217
+ ["nn" /* NodeName */]: '#text',
218
+ v: '\n'
219
+ }];
220
+ }
221
+ data["cl" /* Class */] = ensureHtmlClass(nodeName, data["cl" /* Class */]);
222
+ data["st" /* Style */] = ensureRect(data, data["st" /* Style */]);
223
+ });
224
+ hooks.tap('modifySetAttrPayload', (element, key, payload, componentsAlias) => {
225
+ const { nodeName, _path, props } = element;
226
+ if (!isHtmlTags(nodeName))
227
+ return;
228
+ // map nodeName
229
+ mapNameByContion(nodeName, key, element, componentsAlias);
230
+ const mapName = getMappedType(nodeName, props);
231
+ const alias = componentsAlias[mapName];
232
+ // map attr Key/Value
233
+ const attrMapFn = getAttrMapFn(nodeName);
234
+ if (attrMapFn) {
235
+ const value = payload.value;
236
+ const [mapKey, mapValue] = attrMapFn(key, value, props);
237
+ payload.path = `${_path}.${alias[mapKey] || mapKey}`;
238
+ payload.value = mapValue;
239
+ }
240
+ if (key === "cl" /* Class */) {
241
+ payload.value = ensureHtmlClass(nodeName, payload.value);
242
+ }
243
+ else if (key === "st" /* Style */ || key === 'width' || key === 'height') {
244
+ payload.path = `${_path}.${"st" /* Style */}`;
245
+ payload.value = ensureRect(props, element.style.cssText);
246
+ }
247
+ });
248
+ hooks.tap('modifyRmAttrPayload', (element, key, payload, componentsAlias) => {
249
+ const { nodeName, _path, props } = element;
250
+ if (!isHtmlTags(nodeName))
251
+ return;
252
+ // map nodeName
253
+ mapNameByContion(nodeName, key, element, componentsAlias);
254
+ const mapName = getMappedType(nodeName, props);
255
+ const alias = componentsAlias[mapName];
256
+ // map attr Key/Value
257
+ const attrMapFn = getAttrMapFn(nodeName);
258
+ if (attrMapFn) {
259
+ const value = payload[key];
260
+ const [mapKey] = attrMapFn(key, value, props);
261
+ payload.path = `${_path}.${alias[mapKey] || mapKey}`;
262
+ }
263
+ if (key === "cl" /* Class */) {
264
+ payload.value = ensureHtmlClass(nodeName, payload.value);
265
+ }
266
+ else if (key === "st" /* Style */ || key === 'width' || key === 'height') {
267
+ payload.path = `${_path}.${"st" /* Style */}`;
268
+ payload.value = ensureRect(props, element.style.cssText);
269
+ }
270
+ });
271
+ hooks.tap('onAddEvent', (type, _handler, _options, node) => {
272
+ node = node;
273
+ if (!isHtmlTags(node.nodeName))
274
+ return;
275
+ if (type === 'click') {
276
+ defineMappedProp(node.__handlers, type, 'tap');
277
+ }
278
+ else if (node.nodeName === 'input') {
279
+ if (type === 'change') {
280
+ if (node.props.type === 'checkbox' || node.props.type === 'radio') {
281
+ defineMappedProp(node.__handlers, type, 'tap');
282
+ }
283
+ else {
284
+ defineMappedProp(node.__handlers, type, 'input');
285
+ }
286
+ }
287
+ else if (type === 'keypress') {
288
+ defineMappedProp(node.__handlers, type, 'confirm');
289
+ }
290
+ }
291
+ });
292
+ hooks.tap('modifyTaroEvent', (event, element) => {
293
+ const { nodeName, props } = element;
294
+ if (nodeName === 'input' && event.type === 'tap') {
295
+ if (props.type === 'checkbox') {
296
+ props.checked = !props.checked;
297
+ }
298
+ else if (props.type === 'radio' && !props.checked) {
299
+ props.checked = true;
300
+ }
301
+ if (event.mpEvent) {
302
+ const { currentTarget, target } = event.mpEvent;
303
+ currentTarget.checked = props.checked;
304
+ if (target.id === currentTarget.id) {
305
+ target.checked = props.checked;
306
+ }
307
+ }
308
+ }
309
+ });
307
310
  //# sourceMappingURL=runtime.js.map