preact-render-to-string 5.2.4 → 5.2.6
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.
- package/LICENSE +21 -21
- package/README.md +91 -102
- package/dist/commonjs.js +1 -1
- package/dist/commonjs.js.map +1 -1
- package/dist/index.d.ts +16 -16
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.module.js +1 -1
- package/dist/index.module.js.map +1 -1
- package/dist/jsx-entry.js +1 -1
- package/dist/jsx-entry.js.map +1 -1
- package/dist/jsx.d.ts +13 -13
- package/dist/jsx.js.map +1 -1
- package/dist/jsx.mjs +1 -1
- package/dist/jsx.modern.js +1 -1
- package/dist/jsx.modern.js.map +1 -1
- package/dist/jsx.module.js +1 -1
- package/dist/jsx.module.js.map +1 -1
- package/jsx.js +1 -1
- package/package.json +149 -148
- package/src/constants.js +16 -16
- package/src/index.d.ts +16 -16
- package/src/index.js +457 -396
- package/src/jsx.d.ts +13 -13
- package/src/jsx.js +76 -76
- package/src/polyfills.js +8 -8
- package/src/pretty.js +389 -385
- package/src/util.js +125 -125
- package/typings.json +5 -5
package/src/index.js
CHANGED
|
@@ -1,396 +1,457 @@
|
|
|
1
|
-
import {
|
|
2
|
-
encodeEntities,
|
|
3
|
-
styleObjToCss,
|
|
4
|
-
getContext,
|
|
5
|
-
createComponent,
|
|
6
|
-
UNSAFE_NAME,
|
|
7
|
-
XLINK,
|
|
8
|
-
VOID_ELEMENTS
|
|
9
|
-
} from './util';
|
|
10
|
-
import { options, h, Fragment } from 'preact';
|
|
11
|
-
import { _renderToStringPretty } from './pretty';
|
|
12
|
-
import {
|
|
13
|
-
COMMIT,
|
|
14
|
-
COMPONENT,
|
|
15
|
-
DIFF,
|
|
16
|
-
DIFFED,
|
|
17
|
-
DIRTY,
|
|
18
|
-
NEXT_STATE,
|
|
19
|
-
PARENT,
|
|
20
|
-
RENDER,
|
|
21
|
-
SKIP_EFFECTS,
|
|
22
|
-
VNODE,
|
|
23
|
-
CHILDREN
|
|
24
|
-
} from './constants';
|
|
25
|
-
|
|
26
|
-
/** @typedef {import('preact').VNode} VNode */
|
|
27
|
-
|
|
28
|
-
const SHALLOW = { shallow: true };
|
|
29
|
-
|
|
30
|
-
/** Render Preact JSX + Components to an HTML string.
|
|
31
|
-
* @name render
|
|
32
|
-
* @function
|
|
33
|
-
* @param {VNode} vnode JSX VNode to render.
|
|
34
|
-
* @param {Object} [context={}] Optionally pass an initial context object through the render path.
|
|
35
|
-
* @param {Object} [options={}] Rendering options
|
|
36
|
-
* @param {Boolean} [options.shallow=false] If `true`, renders nested Components as HTML elements (`<Foo a="b" />`).
|
|
37
|
-
* @param {Boolean} [options.xml=false] If `true`, uses self-closing tags for elements without children.
|
|
38
|
-
* @param {Boolean} [options.pretty=false] If `true`, adds whitespace for readability
|
|
39
|
-
* @param {RegExp|undefined} [options.voidElements] RegeEx that matches elements that are considered void (self-closing)
|
|
40
|
-
*/
|
|
41
|
-
renderToString.render = renderToString;
|
|
42
|
-
|
|
43
|
-
/** Only render elements, leaving Components inline as `<ComponentName ... />`.
|
|
44
|
-
* This method is just a convenience alias for `render(vnode, context, { shallow:true })`
|
|
45
|
-
* @name shallow
|
|
46
|
-
* @function
|
|
47
|
-
* @param {VNode} vnode JSX VNode to render.
|
|
48
|
-
* @param {Object} [context={}] Optionally pass an initial context object through the render path.
|
|
49
|
-
*/
|
|
50
|
-
let shallowRender = (vnode, context) => renderToString(vnode, context, SHALLOW);
|
|
51
|
-
|
|
52
|
-
const EMPTY_ARR = [];
|
|
53
|
-
function renderToString(vnode, context, opts) {
|
|
54
|
-
context = context || {};
|
|
55
|
-
|
|
56
|
-
// Performance optimization: `renderToString` is synchronous and we
|
|
57
|
-
// therefore don't execute any effects. To do that we pass an empty
|
|
58
|
-
// array to `options._commit` (`__c`). But we can go one step further
|
|
59
|
-
// and avoid a lot of dirty checks and allocations by setting
|
|
60
|
-
// `options._skipEffects` (`__s`) too.
|
|
61
|
-
const previousSkipEffects = options[SKIP_EFFECTS];
|
|
62
|
-
options[SKIP_EFFECTS] = true;
|
|
63
|
-
|
|
64
|
-
const parent = h(Fragment, null);
|
|
65
|
-
parent[CHILDREN] = [vnode];
|
|
66
|
-
|
|
67
|
-
let res;
|
|
68
|
-
if (
|
|
69
|
-
opts &&
|
|
70
|
-
(opts.pretty ||
|
|
71
|
-
opts.voidElements ||
|
|
72
|
-
opts.sortAttributes ||
|
|
73
|
-
opts.shallow ||
|
|
74
|
-
opts.allAttributes ||
|
|
75
|
-
opts.xml ||
|
|
76
|
-
opts.attributeHook)
|
|
77
|
-
) {
|
|
78
|
-
res = _renderToStringPretty(vnode, context, opts);
|
|
79
|
-
} else {
|
|
80
|
-
res = _renderToString(vnode, context, false, undefined, parent);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
// options._commit, we don't schedule any effects in this library right now,
|
|
84
|
-
// so we can pass an empty queue to this hook.
|
|
85
|
-
if (options[COMMIT]) options[COMMIT](vnode, EMPTY_ARR);
|
|
86
|
-
options[SKIP_EFFECTS] = previousSkipEffects;
|
|
87
|
-
EMPTY_ARR.length = 0;
|
|
88
|
-
|
|
89
|
-
return res;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
c
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
if (
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
return
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
function
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
if (
|
|
198
|
-
return
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
if (
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
);
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
if (
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
let
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
//
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
1
|
+
import {
|
|
2
|
+
encodeEntities,
|
|
3
|
+
styleObjToCss,
|
|
4
|
+
getContext,
|
|
5
|
+
createComponent,
|
|
6
|
+
UNSAFE_NAME,
|
|
7
|
+
XLINK,
|
|
8
|
+
VOID_ELEMENTS
|
|
9
|
+
} from './util';
|
|
10
|
+
import { options, h, Fragment } from 'preact';
|
|
11
|
+
import { _renderToStringPretty } from './pretty';
|
|
12
|
+
import {
|
|
13
|
+
COMMIT,
|
|
14
|
+
COMPONENT,
|
|
15
|
+
DIFF,
|
|
16
|
+
DIFFED,
|
|
17
|
+
DIRTY,
|
|
18
|
+
NEXT_STATE,
|
|
19
|
+
PARENT,
|
|
20
|
+
RENDER,
|
|
21
|
+
SKIP_EFFECTS,
|
|
22
|
+
VNODE,
|
|
23
|
+
CHILDREN
|
|
24
|
+
} from './constants';
|
|
25
|
+
|
|
26
|
+
/** @typedef {import('preact').VNode} VNode */
|
|
27
|
+
|
|
28
|
+
const SHALLOW = { shallow: true };
|
|
29
|
+
|
|
30
|
+
/** Render Preact JSX + Components to an HTML string.
|
|
31
|
+
* @name render
|
|
32
|
+
* @function
|
|
33
|
+
* @param {VNode} vnode JSX VNode to render.
|
|
34
|
+
* @param {Object} [context={}] Optionally pass an initial context object through the render path.
|
|
35
|
+
* @param {Object} [options={}] Rendering options
|
|
36
|
+
* @param {Boolean} [options.shallow=false] If `true`, renders nested Components as HTML elements (`<Foo a="b" />`).
|
|
37
|
+
* @param {Boolean} [options.xml=false] If `true`, uses self-closing tags for elements without children.
|
|
38
|
+
* @param {Boolean} [options.pretty=false] If `true`, adds whitespace for readability
|
|
39
|
+
* @param {RegExp|undefined} [options.voidElements] RegeEx that matches elements that are considered void (self-closing)
|
|
40
|
+
*/
|
|
41
|
+
renderToString.render = renderToString;
|
|
42
|
+
|
|
43
|
+
/** Only render elements, leaving Components inline as `<ComponentName ... />`.
|
|
44
|
+
* This method is just a convenience alias for `render(vnode, context, { shallow:true })`
|
|
45
|
+
* @name shallow
|
|
46
|
+
* @function
|
|
47
|
+
* @param {VNode} vnode JSX VNode to render.
|
|
48
|
+
* @param {Object} [context={}] Optionally pass an initial context object through the render path.
|
|
49
|
+
*/
|
|
50
|
+
let shallowRender = (vnode, context) => renderToString(vnode, context, SHALLOW);
|
|
51
|
+
|
|
52
|
+
const EMPTY_ARR = [];
|
|
53
|
+
function renderToString(vnode, context, opts) {
|
|
54
|
+
context = context || {};
|
|
55
|
+
|
|
56
|
+
// Performance optimization: `renderToString` is synchronous and we
|
|
57
|
+
// therefore don't execute any effects. To do that we pass an empty
|
|
58
|
+
// array to `options._commit` (`__c`). But we can go one step further
|
|
59
|
+
// and avoid a lot of dirty checks and allocations by setting
|
|
60
|
+
// `options._skipEffects` (`__s`) too.
|
|
61
|
+
const previousSkipEffects = options[SKIP_EFFECTS];
|
|
62
|
+
options[SKIP_EFFECTS] = true;
|
|
63
|
+
|
|
64
|
+
const parent = h(Fragment, null);
|
|
65
|
+
parent[CHILDREN] = [vnode];
|
|
66
|
+
|
|
67
|
+
let res;
|
|
68
|
+
if (
|
|
69
|
+
opts &&
|
|
70
|
+
(opts.pretty ||
|
|
71
|
+
opts.voidElements ||
|
|
72
|
+
opts.sortAttributes ||
|
|
73
|
+
opts.shallow ||
|
|
74
|
+
opts.allAttributes ||
|
|
75
|
+
opts.xml ||
|
|
76
|
+
opts.attributeHook)
|
|
77
|
+
) {
|
|
78
|
+
res = _renderToStringPretty(vnode, context, opts);
|
|
79
|
+
} else {
|
|
80
|
+
res = _renderToString(vnode, context, false, undefined, parent);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// options._commit, we don't schedule any effects in this library right now,
|
|
84
|
+
// so we can pass an empty queue to this hook.
|
|
85
|
+
if (options[COMMIT]) options[COMMIT](vnode, EMPTY_ARR);
|
|
86
|
+
options[SKIP_EFFECTS] = previousSkipEffects;
|
|
87
|
+
EMPTY_ARR.length = 0;
|
|
88
|
+
|
|
89
|
+
return res;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* @param {VNode} vnode
|
|
94
|
+
* @param {Record<string, unknown>} context
|
|
95
|
+
* @returns {string}
|
|
96
|
+
*/
|
|
97
|
+
function renderFunctionComponent(vnode, context) {
|
|
98
|
+
// eslint-disable-next-line lines-around-comment
|
|
99
|
+
/** @type {string} */
|
|
100
|
+
let rendered,
|
|
101
|
+
c = createComponent(vnode, context),
|
|
102
|
+
cctx = getContext(vnode.type, context);
|
|
103
|
+
|
|
104
|
+
vnode[COMPONENT] = c;
|
|
105
|
+
|
|
106
|
+
// If a hook invokes setState() to invalidate the component during rendering,
|
|
107
|
+
// re-render it up to 25 times to allow "settling" of memoized states.
|
|
108
|
+
// Note:
|
|
109
|
+
// This will need to be updated for Preact 11 to use internal.flags rather than component._dirty:
|
|
110
|
+
// https://github.com/preactjs/preact/blob/d4ca6fdb19bc715e49fd144e69f7296b2f4daa40/src/diff/component.js#L35-L44
|
|
111
|
+
let renderHook = options[RENDER];
|
|
112
|
+
let count = 0;
|
|
113
|
+
while (c[DIRTY] && count++ < 25) {
|
|
114
|
+
c[DIRTY] = false;
|
|
115
|
+
|
|
116
|
+
if (renderHook) renderHook(vnode);
|
|
117
|
+
|
|
118
|
+
// stateless functional components
|
|
119
|
+
rendered = vnode.type.call(c, vnode.props, cctx);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
return rendered;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* @param {VNode} vnode
|
|
127
|
+
* @param {Record<string, unknown>} context
|
|
128
|
+
* @returns {VNode}
|
|
129
|
+
*/
|
|
130
|
+
function renderClassComponent(vnode, context) {
|
|
131
|
+
let nodeName = vnode.type,
|
|
132
|
+
cctx = getContext(nodeName, context);
|
|
133
|
+
|
|
134
|
+
/** @type {import("preact").Component} */
|
|
135
|
+
let c = new nodeName(vnode.props, cctx);
|
|
136
|
+
vnode[COMPONENT] = c;
|
|
137
|
+
c[VNODE] = vnode;
|
|
138
|
+
// turn off stateful re-rendering:
|
|
139
|
+
c[DIRTY] = true;
|
|
140
|
+
c.props = vnode.props;
|
|
141
|
+
if (c.state == null) c.state = {};
|
|
142
|
+
|
|
143
|
+
if (c[NEXT_STATE] == null) {
|
|
144
|
+
c[NEXT_STATE] = c.state;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
c.context = cctx;
|
|
148
|
+
if (nodeName.getDerivedStateFromProps) {
|
|
149
|
+
c.state = assign(
|
|
150
|
+
{},
|
|
151
|
+
c.state,
|
|
152
|
+
nodeName.getDerivedStateFromProps(c.props, c.state)
|
|
153
|
+
);
|
|
154
|
+
} else if (c.componentWillMount) {
|
|
155
|
+
c.componentWillMount();
|
|
156
|
+
|
|
157
|
+
// If the user called setState in cWM we need to flush pending,
|
|
158
|
+
// state updates. This is the same behaviour in React.
|
|
159
|
+
c.state = c[NEXT_STATE] !== c.state ? c[NEXT_STATE] : c.state;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
let renderHook = options[RENDER];
|
|
163
|
+
if (renderHook) renderHook(vnode);
|
|
164
|
+
|
|
165
|
+
return c.render(c.props, c.state, c.context);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
/**
|
|
169
|
+
* @param {any} vnode
|
|
170
|
+
* @returns {VNode}
|
|
171
|
+
*/
|
|
172
|
+
function normalizeVNode(vnode) {
|
|
173
|
+
if (vnode == null || typeof vnode == 'boolean') {
|
|
174
|
+
return null;
|
|
175
|
+
} else if (
|
|
176
|
+
typeof vnode == 'string' ||
|
|
177
|
+
typeof vnode == 'number' ||
|
|
178
|
+
typeof vnode == 'bigint'
|
|
179
|
+
) {
|
|
180
|
+
return h(null, null, vnode);
|
|
181
|
+
}
|
|
182
|
+
return vnode;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
/**
|
|
186
|
+
* @param {string} name
|
|
187
|
+
* @param {boolean} isSvgMode
|
|
188
|
+
* @returns {string}
|
|
189
|
+
*/
|
|
190
|
+
function normalizePropName(name, isSvgMode) {
|
|
191
|
+
if (name === 'className') {
|
|
192
|
+
return 'class';
|
|
193
|
+
} else if (name === 'htmlFor') {
|
|
194
|
+
return 'for';
|
|
195
|
+
} else if (name === 'defaultValue') {
|
|
196
|
+
return 'value';
|
|
197
|
+
} else if (name === 'defaultChecked') {
|
|
198
|
+
return 'checked';
|
|
199
|
+
} else if (name === 'defaultSelected') {
|
|
200
|
+
return 'selected';
|
|
201
|
+
} else if (isSvgMode && XLINK.test(name)) {
|
|
202
|
+
return name.toLowerCase().replace(/^xlink:?/, 'xlink:');
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
return name;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
/**
|
|
209
|
+
* @param {string} name
|
|
210
|
+
* @param {string | Record<string, unknown>} v
|
|
211
|
+
* @returns {string}
|
|
212
|
+
*/
|
|
213
|
+
function normalizePropValue(name, v) {
|
|
214
|
+
if (name === 'style' && v != null && typeof v === 'object') {
|
|
215
|
+
return styleObjToCss(v);
|
|
216
|
+
} else if (name[0] === 'a' && name[1] === 'r' && typeof v === 'boolean') {
|
|
217
|
+
// always use string values instead of booleans for aria attributes
|
|
218
|
+
// also see https://github.com/preactjs/preact/pull/2347/files
|
|
219
|
+
return String(v);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
return v;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
const isArray = Array.isArray;
|
|
226
|
+
const assign = Object.assign;
|
|
227
|
+
|
|
228
|
+
/**
|
|
229
|
+
* The default export is an alias of `render()`.
|
|
230
|
+
* @param {any} vnode
|
|
231
|
+
* @param {Record<string, unknown>} context
|
|
232
|
+
* @param {boolean} isSvgMode
|
|
233
|
+
* @param {any} selectValue
|
|
234
|
+
* @param {VNode | null} parent
|
|
235
|
+
* @returns {string}
|
|
236
|
+
*/
|
|
237
|
+
function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
|
|
238
|
+
// Ignore non-rendered VNodes/values
|
|
239
|
+
if (vnode == null || vnode === true || vnode === false || vnode === '') {
|
|
240
|
+
return '';
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
// Text VNodes: escape as HTML
|
|
244
|
+
if (typeof vnode !== 'object') {
|
|
245
|
+
if (typeof vnode === 'function') return '';
|
|
246
|
+
return encodeEntities(vnode);
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
// Recurse into children / Arrays
|
|
250
|
+
if (isArray(vnode)) {
|
|
251
|
+
let rendered = '';
|
|
252
|
+
parent[CHILDREN] = vnode;
|
|
253
|
+
for (let i = 0; i < vnode.length; i++) {
|
|
254
|
+
rendered =
|
|
255
|
+
rendered +
|
|
256
|
+
_renderToString(vnode[i], context, isSvgMode, selectValue, parent);
|
|
257
|
+
|
|
258
|
+
vnode[i] = normalizeVNode(vnode[i]);
|
|
259
|
+
}
|
|
260
|
+
return rendered;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
// VNodes have {constructor:undefined} to prevent JSON injection:
|
|
264
|
+
if (vnode.constructor !== undefined) return '';
|
|
265
|
+
|
|
266
|
+
vnode[PARENT] = parent;
|
|
267
|
+
if (options[DIFF]) options[DIFF](vnode);
|
|
268
|
+
|
|
269
|
+
let type = vnode.type,
|
|
270
|
+
props = vnode.props;
|
|
271
|
+
|
|
272
|
+
// Invoke rendering on Components
|
|
273
|
+
const isComponent = typeof type === 'function';
|
|
274
|
+
if (isComponent) {
|
|
275
|
+
let rendered;
|
|
276
|
+
if (type === Fragment) {
|
|
277
|
+
rendered = props.children;
|
|
278
|
+
} else {
|
|
279
|
+
if (type.prototype && typeof type.prototype.render === 'function') {
|
|
280
|
+
rendered = renderClassComponent(vnode, context);
|
|
281
|
+
} else {
|
|
282
|
+
rendered = renderFunctionComponent(vnode, context);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
let component = vnode[COMPONENT];
|
|
286
|
+
if (component.getChildContext) {
|
|
287
|
+
context = assign({}, context, component.getChildContext());
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
// When a component returns a Fragment node we flatten it in core, so we
|
|
292
|
+
// need to mirror that logic here too
|
|
293
|
+
let isTopLevelFragment =
|
|
294
|
+
rendered != null && rendered.type === Fragment && rendered.key == null;
|
|
295
|
+
rendered = isTopLevelFragment ? rendered.props.children : rendered;
|
|
296
|
+
|
|
297
|
+
// Recurse into children before invoking the after-diff hook
|
|
298
|
+
const str = _renderToString(
|
|
299
|
+
rendered,
|
|
300
|
+
context,
|
|
301
|
+
isSvgMode,
|
|
302
|
+
selectValue,
|
|
303
|
+
vnode
|
|
304
|
+
);
|
|
305
|
+
|
|
306
|
+
if (options[DIFFED]) options[DIFFED](vnode);
|
|
307
|
+
vnode[PARENT] = undefined;
|
|
308
|
+
|
|
309
|
+
if (options.unmount) options.unmount(vnode);
|
|
310
|
+
|
|
311
|
+
return str;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
// Serialize Element VNodes to HTML
|
|
315
|
+
let s = '<',
|
|
316
|
+
children,
|
|
317
|
+
html;
|
|
318
|
+
|
|
319
|
+
s = s + type;
|
|
320
|
+
|
|
321
|
+
if (props) {
|
|
322
|
+
children = props.children;
|
|
323
|
+
for (let name in props) {
|
|
324
|
+
let v = props[name];
|
|
325
|
+
|
|
326
|
+
if (
|
|
327
|
+
name === 'key' ||
|
|
328
|
+
name === 'ref' ||
|
|
329
|
+
name === '__self' ||
|
|
330
|
+
name === '__source' ||
|
|
331
|
+
name === 'children' ||
|
|
332
|
+
(name === 'className' && 'class' in props) ||
|
|
333
|
+
(name === 'htmlFor' && 'for' in props)
|
|
334
|
+
) {
|
|
335
|
+
continue;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
if (UNSAFE_NAME.test(name)) continue;
|
|
339
|
+
|
|
340
|
+
name = normalizePropName(name, isSvgMode);
|
|
341
|
+
v = normalizePropValue(name, v);
|
|
342
|
+
|
|
343
|
+
if (name === 'dangerouslySetInnerHTML') {
|
|
344
|
+
html = v && v.__html;
|
|
345
|
+
} else if (type === 'textarea' && name === 'value') {
|
|
346
|
+
// <textarea value="a&b"> --> <textarea>a&b</textarea>
|
|
347
|
+
children = v;
|
|
348
|
+
} else if ((v || v === 0 || v === '') && typeof v !== 'function') {
|
|
349
|
+
if (v === true || v === '') {
|
|
350
|
+
v = name;
|
|
351
|
+
s = s + ' ' + name;
|
|
352
|
+
continue;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
if (name === 'value') {
|
|
356
|
+
if (type === 'select') {
|
|
357
|
+
selectValue = v;
|
|
358
|
+
continue;
|
|
359
|
+
} else if (
|
|
360
|
+
// If we're looking at an <option> and it's the currently selected one
|
|
361
|
+
type === 'option' &&
|
|
362
|
+
selectValue == v &&
|
|
363
|
+
// and the <option> doesn't already have a selected attribute on it
|
|
364
|
+
!('selected' in props)
|
|
365
|
+
) {
|
|
366
|
+
s = s + ' selected';
|
|
367
|
+
}
|
|
368
|
+
}
|
|
369
|
+
s = s + ' ' + name + '="' + encodeEntities(v) + '"';
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
let startElement = s;
|
|
375
|
+
s = s + '>';
|
|
376
|
+
|
|
377
|
+
if (UNSAFE_NAME.test(type)) {
|
|
378
|
+
throw new Error(`${type} is not a valid HTML tag name in ${s}`);
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
let pieces = '';
|
|
382
|
+
let hasChildren = false;
|
|
383
|
+
|
|
384
|
+
if (html) {
|
|
385
|
+
pieces = pieces + html;
|
|
386
|
+
hasChildren = true;
|
|
387
|
+
} else if (typeof children === 'string') {
|
|
388
|
+
pieces = pieces + encodeEntities(children);
|
|
389
|
+
hasChildren = true;
|
|
390
|
+
} else if (isArray(children)) {
|
|
391
|
+
vnode[CHILDREN] = children;
|
|
392
|
+
for (let i = 0; i < children.length; i++) {
|
|
393
|
+
let child = children[i];
|
|
394
|
+
children[i] = normalizeVNode(child);
|
|
395
|
+
|
|
396
|
+
if (child != null && child !== false) {
|
|
397
|
+
let childSvgMode =
|
|
398
|
+
type === 'svg' || (type !== 'foreignObject' && isSvgMode);
|
|
399
|
+
let ret = _renderToString(
|
|
400
|
+
child,
|
|
401
|
+
context,
|
|
402
|
+
childSvgMode,
|
|
403
|
+
selectValue,
|
|
404
|
+
vnode
|
|
405
|
+
);
|
|
406
|
+
|
|
407
|
+
// Skip if we received an empty string
|
|
408
|
+
if (ret) {
|
|
409
|
+
pieces = pieces + ret;
|
|
410
|
+
hasChildren = true;
|
|
411
|
+
}
|
|
412
|
+
}
|
|
413
|
+
}
|
|
414
|
+
} else if (children != null && children !== false && children !== true) {
|
|
415
|
+
vnode[CHILDREN] = [normalizeVNode(children)];
|
|
416
|
+
let childSvgMode =
|
|
417
|
+
type === 'svg' || (type !== 'foreignObject' && isSvgMode);
|
|
418
|
+
let ret = _renderToString(
|
|
419
|
+
children,
|
|
420
|
+
context,
|
|
421
|
+
childSvgMode,
|
|
422
|
+
selectValue,
|
|
423
|
+
vnode
|
|
424
|
+
);
|
|
425
|
+
|
|
426
|
+
// Skip if we received an empty string
|
|
427
|
+
if (ret) {
|
|
428
|
+
pieces = pieces + ret;
|
|
429
|
+
hasChildren = true;
|
|
430
|
+
}
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
if (options[DIFFED]) options[DIFFED](vnode);
|
|
434
|
+
vnode[PARENT] = undefined;
|
|
435
|
+
if (options.unmount) options.unmount(vnode);
|
|
436
|
+
|
|
437
|
+
if (hasChildren) {
|
|
438
|
+
s = s + pieces;
|
|
439
|
+
} else if (VOID_ELEMENTS.test(type)) {
|
|
440
|
+
return startElement + ' />';
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
return s + '</' + type + '>';
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
/** The default export is an alias of `render()`. */
|
|
447
|
+
|
|
448
|
+
renderToString.shallowRender = shallowRender;
|
|
449
|
+
|
|
450
|
+
export default renderToString;
|
|
451
|
+
|
|
452
|
+
export {
|
|
453
|
+
renderToString as render,
|
|
454
|
+
renderToString as renderToStaticMarkup,
|
|
455
|
+
renderToString,
|
|
456
|
+
shallowRender
|
|
457
|
+
};
|