@samitouri / QOS-React / commits / 1229a238c4

Generate SimpleEventPlugin data structures at runtime (#7616)

We used to copy and paste the same big blob many times in order for it to work with keyOf which is no longer a constraint. This pull request takes a list of all the events as string and generate those data structures at runtime. It reduces the size of React by 1k post gzip and flow is able to extract the structure out of it :)

Christopher Chedeau committed Sep 2, 2016 at 12:57 UTC 1229a238c491fbaf4c1596f82115b71524d0e56f
1 file changed +96 -443
src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js
+96 -443
@@ -30,451 +30,104 @@ var emptyFunction = require('emptyFunction');
30 var getEventCharCode = require('getEventCharCode');
31 var invariant = require('invariant');
32
33 -var eventTypes = {
34 - abort: {
35 - phasedRegistrationNames: {
36 - bubbled: 'onAbort',
37 - captured: 'onAbortCapture',
38 - },
39 - },
40 - animationEnd: {
41 - phasedRegistrationNames: {
42 - bubbled: 'onAnimationEnd',
43 - captured: 'onAnimationEndCapture',
44 - },
45 - },
46 - animationIteration: {
47 - phasedRegistrationNames: {
48 - bubbled: 'onAnimationIteration',
49 - captured: 'onAnimationIterationCapture',
50 - },
51 - },
52 - animationStart: {
53 - phasedRegistrationNames: {
54 - bubbled: 'onAnimationStart',
55 - captured: 'onAnimationStartCapture',
56 - },
57 - },
58 - blur: {
59 - phasedRegistrationNames: {
60 - bubbled: 'onBlur',
61 - captured: 'onBlurCapture',
62 - },
63 - },
64 - canPlay: {
65 - phasedRegistrationNames: {
66 - bubbled: 'onCanPlay',
67 - captured: 'onCanPlayCapture',
68 - },
69 - },
70 - canPlayThrough: {
71 - phasedRegistrationNames: {
72 - bubbled: 'onCanPlayThrough',
73 - captured: 'onCanPlayThroughCapture',
74 - },
75 - },
76 - click: {
77 - phasedRegistrationNames: {
78 - bubbled: 'onClick',
79 - captured: 'onClickCapture',
80 - },
81 - },
82 - contextMenu: {
83 - phasedRegistrationNames: {
84 - bubbled: 'onContextMenu',
85 - captured: 'onContextMenuCapture',
86 - },
87 - },
88 - copy: {
89 - phasedRegistrationNames: {
90 - bubbled: 'onCopy',
91 - captured: 'onCopyCapture',
92 - },
93 - },
94 - cut: {
95 - phasedRegistrationNames: {
96 - bubbled: 'onCut',
97 - captured: 'onCutCapture',
98 - },
99 - },
100 - doubleClick: {
101 - phasedRegistrationNames: {
102 - bubbled: 'onDoubleClick',
103 - captured: 'onDoubleClickCapture',
104 - },
105 - },
106 - drag: {
107 - phasedRegistrationNames: {
108 - bubbled: 'onDrag',
109 - captured: 'onDragCapture',
110 - },
111 - },
112 - dragEnd: {
113 - phasedRegistrationNames: {
114 - bubbled: 'onDragEnd',
115 - captured: 'onDragEndCapture',
116 - },
117 - },
118 - dragEnter: {
119 - phasedRegistrationNames: {
120 - bubbled: 'onDragEnter',
121 - captured: 'onDragEnterCapture',
122 - },
123 - },
124 - dragExit: {
125 - phasedRegistrationNames: {
126 - bubbled: 'onDragExit',
127 - captured: 'onDragExitCapture',
128 - },
129 - },
130 - dragLeave: {
131 - phasedRegistrationNames: {
132 - bubbled: 'onDragLeave',
133 - captured: 'onDragLeaveCapture',
134 - },
135 - },
136 - dragOver: {
137 - phasedRegistrationNames: {
138 - bubbled: 'onDragOver',
139 - captured: 'onDragOverCapture',
140 - },
141 - },
142 - dragStart: {
143 - phasedRegistrationNames: {
144 - bubbled: 'onDragStart',
145 - captured: 'onDragStartCapture',
146 - },
147 - },
148 - drop: {
149 - phasedRegistrationNames: {
150 - bubbled: 'onDrop',
151 - captured: 'onDropCapture',
152 - },
153 - },
154 - durationChange: {
155 - phasedRegistrationNames: {
156 - bubbled: 'onDurationChange',
157 - captured: 'onDurationChangeCapture',
158 - },
159 - },
160 - emptied: {
161 - phasedRegistrationNames: {
162 - bubbled: 'onEmptied',
163 - captured: 'onEmptiedCapture',
164 - },
165 - },
166 - encrypted: {
167 - phasedRegistrationNames: {
168 - bubbled: 'onEncrypted',
169 - captured: 'onEncryptedCapture',
170 - },
171 - },
172 - ended: {
173 - phasedRegistrationNames: {
174 - bubbled: 'onEnded',
175 - captured: 'onEndedCapture',
176 - },
177 - },
178 - error: {
179 - phasedRegistrationNames: {
180 - bubbled: 'onError',
181 - captured: 'onErrorCapture',
182 - },
183 - },
184 - focus: {
185 - phasedRegistrationNames: {
186 - bubbled: 'onFocus',
187 - captured: 'onFocusCapture',
188 - },
189 - },
190 - input: {
191 - phasedRegistrationNames: {
192 - bubbled: 'onInput',
193 - captured: 'onInputCapture',
194 - },
195 - },
196 - invalid: {
197 - phasedRegistrationNames: {
198 - bubbled: 'onInvalid',
199 - captured: 'onInvalidCapture',
200 - },
201 - },
202 - keyDown: {
203 - phasedRegistrationNames: {
204 - bubbled: 'onKeyDown',
205 - captured: 'onKeyDownCapture',
206 - },
207 - },
208 - keyPress: {
209 - phasedRegistrationNames: {
210 - bubbled: 'onKeyPress',
211 - captured: 'onKeyPressCapture',
212 - },
213 - },
214 - keyUp: {
215 - phasedRegistrationNames: {
216 - bubbled: 'onKeyUp',
217 - captured: 'onKeyUpCapture',
218 - },
219 - },
220 - load: {
221 - phasedRegistrationNames: {
222 - bubbled: 'onLoad',
223 - captured: 'onLoadCapture',
224 - },
225 - },
226 - loadedData: {
227 - phasedRegistrationNames: {
228 - bubbled: 'onLoadedData',
229 - captured: 'onLoadedDataCapture',
230 - },
231 - },
232 - loadedMetadata: {
233 - phasedRegistrationNames: {
234 - bubbled: 'onLoadedMetadata',
235 - captured: 'onLoadedMetadataCapture',
236 - },
237 - },
238 - loadStart: {
239 - phasedRegistrationNames: {
240 - bubbled: 'onLoadStart',
241 - captured: 'onLoadStartCapture',
242 - },
243 - },
244 - // Note: We do not allow listening to mouseOver events. Instead, use the
245 - // onMouseEnter/onMouseLeave created by `EnterLeaveEventPlugin`.
246 - mouseDown: {
247 - phasedRegistrationNames: {
248 - bubbled: 'onMouseDown',
249 - captured: 'onMouseDownCapture',
250 - },
251 - },
252 - mouseMove: {
253 - phasedRegistrationNames: {
254 - bubbled: 'onMouseMove',
255 - captured: 'onMouseMoveCapture',
256 - },
257 - },
258 - mouseOut: {
259 - phasedRegistrationNames: {
260 - bubbled: 'onMouseOut',
261 - captured: 'onMouseOutCapture',
262 - },
263 - },
264 - mouseOver: {
265 - phasedRegistrationNames: {
266 - bubbled: 'onMouseOver',
267 - captured: 'onMouseOverCapture',
268 - },
269 - },
270 - mouseUp: {
271 - phasedRegistrationNames: {
272 - bubbled: 'onMouseUp',
273 - captured: 'onMouseUpCapture',
274 - },
275 - },
276 - paste: {
277 - phasedRegistrationNames: {
278 - bubbled: 'onPaste',
279 - captured: 'onPasteCapture',
280 - },
281 - },
282 - pause: {
283 - phasedRegistrationNames: {
284 - bubbled: 'onPause',
285 - captured: 'onPauseCapture',
286 - },
287 - },
288 - play: {
289 - phasedRegistrationNames: {
290 - bubbled: 'onPlay',
291 - captured: 'onPlayCapture',
292 - },
293 - },
294 - playing: {
295 - phasedRegistrationNames: {
296 - bubbled: 'onPlaying',
297 - captured: 'onPlayingCapture',
298 - },
299 - },
300 - progress: {
301 - phasedRegistrationNames: {
302 - bubbled: 'onProgress',
303 - captured: 'onProgressCapture',
304 - },
305 - },
306 - rateChange: {
307 - phasedRegistrationNames: {
308 - bubbled: 'onRateChange',
309 - captured: 'onRateChangeCapture',
310 - },
311 - },
312 - reset: {
313 - phasedRegistrationNames: {
314 - bubbled: 'onReset',
315 - captured: 'onResetCapture',
316 - },
317 - },
318 - scroll: {
319 - phasedRegistrationNames: {
320 - bubbled: 'onScroll',
321 - captured: 'onScrollCapture',
322 - },
323 - },
324 - seeked: {
325 - phasedRegistrationNames: {
326 - bubbled: 'onSeeked',
327 - captured: 'onSeekedCapture',
328 - },
329 - },
330 - seeking: {
331 - phasedRegistrationNames: {
332 - bubbled: 'onSeeking',
333 - captured: 'onSeekingCapture',
334 - },
335 - },
336 - stalled: {
337 - phasedRegistrationNames: {
338 - bubbled: 'onStalled',
339 - captured: 'onStalledCapture',
340 - },
341 - },
342 - submit: {
343 - phasedRegistrationNames: {
344 - bubbled: 'onSubmit',
345 - captured: 'onSubmitCapture',
346 - },
347 - },
348 - suspend: {
349 - phasedRegistrationNames: {
350 - bubbled: 'onSuspend',
351 - captured: 'onSuspendCapture',
352 - },
353 - },
354 - timeUpdate: {
355 - phasedRegistrationNames: {
356 - bubbled: 'onTimeUpdate',
357 - captured: 'onTimeUpdateCapture',
358 - },
359 - },
360 - touchCancel: {
361 - phasedRegistrationNames: {
362 - bubbled: 'onTouchCancel',
363 - captured: 'onTouchCancelCapture',
364 - },
365 - },
366 - touchEnd: {
367 - phasedRegistrationNames: {
368 - bubbled: 'onTouchEnd',
369 - captured: 'onTouchEndCapture',
370 - },
371 - },
372 - touchMove: {
373 - phasedRegistrationNames: {
374 - bubbled: 'onTouchMove',
375 - captured: 'onTouchMoveCapture',
376 - },
377 - },
378 - touchStart: {
379 - phasedRegistrationNames: {
380 - bubbled: 'onTouchStart',
381 - captured: 'onTouchStartCapture',
382 - },
383 - },
384 - transitionEnd: {
385 - phasedRegistrationNames: {
386 - bubbled: 'onTransitionEnd',
387 - captured: 'onTransitionEndCapture',
388 - },
389 - },
390 - volumeChange: {
391 - phasedRegistrationNames: {
392 - bubbled: 'onVolumeChange',
393 - captured: 'onVolumeChangeCapture',
394 - },
395 - },
396 - waiting: {
397 - phasedRegistrationNames: {
398 - bubbled: 'onWaiting',
399 - captured: 'onWaitingCapture',
400 - },
401 - },
402 - wheel: {
33 +/**
34 + * Turns
35 + * ['abort', ...]
36 + * into
37 + * eventTypes = {
38 + * 'abort': {
39 + * phasedRegistrationNames: {
40 + * bubbled: 'onAbort',
41 + * captured: 'onAbortCapture',
42 + * },
43 + * dependencies: ['topAbort'],
44 + * },
45 + * ...
46 + * };
47 + * topLevelEventsToDispatchConfig = {
48 + * 'topAbort': { sameConfig }
49 + * };
50 + */
51 +var eventTypes = {};
52 +var topLevelEventsToDispatchConfig = {};
53 +[
54 + 'abort',
55 + 'animationEnd',
56 + 'animationIteration',
57 + 'animationStart',
58 + 'blur',
59 + 'canPlay',
60 + 'canPlayThrough',
61 + 'click',
62 + 'contextMenu',
63 + 'copy',
64 + 'cut',
65 + 'doubleClick',
66 + 'drag',
67 + 'dragEnd',
68 + 'dragEnter',
69 + 'dragExit',
70 + 'dragLeave',
71 + 'dragOver',
72 + 'dragStart',
73 + 'drop',
74 + 'durationChange',
75 + 'emptied',
76 + 'encrypted',
77 + 'ended',
78 + 'error',
79 + 'focus',
80 + 'input',
81 + 'invalid',
82 + 'keyDown',
83 + 'keyPress',
84 + 'keyUp',
85 + 'load',
86 + 'loadedData',
87 + 'loadedMetadata',
88 + 'loadStart',
89 + 'mouseDown',
90 + 'mouseMove',
91 + 'mouseOut',
92 + 'mouseOver',
93 + 'mouseUp',
94 + 'paste',
95 + 'pause',
96 + 'play',
97 + 'playing',
98 + 'progress',
99 + 'rateChange',
100 + 'reset',
101 + 'scroll',
102 + 'seeked',
103 + 'seeking',
104 + 'stalled',
105 + 'submit',
106 + 'suspend',
107 + 'timeUpdate',
108 + 'touchCancel',
109 + 'touchEnd',
110 + 'touchMove',
111 + 'touchStart',
112 + 'transitionEnd',
113 + 'volumeChange',
114 + 'waiting',
115 + 'wheel',
116 +].forEach(event => {
117 + var capitalizedEvent = event[0].toUpperCase() + event.slice(1);
118 + var onEvent = 'on' + capitalizedEvent;
119 + var topEvent = 'top' + capitalizedEvent;
120 +
121 + var type = {
122 phasedRegistrationNames: {
404 - bubbled: 'onWheel',
405 - captured: 'onWheelCapture',
123 + bubbled: onEvent,
124 + captured: onEvent + 'Capture',
125 },
407 - },
408 -};
409 -
410 -var topLevelEventsToDispatchConfig = {
411 - topAbort: eventTypes.abort,
412 - topAnimationEnd: eventTypes.animationEnd,
413 - topAnimationIteration: eventTypes.animationIteration,
414 - topAnimationStart: eventTypes.animationStart,
415 - topBlur: eventTypes.blur,
416 - topCanPlay: eventTypes.canPlay,
417 - topCanPlayThrough: eventTypes.canPlayThrough,
418 - topClick: eventTypes.click,
419 - topContextMenu: eventTypes.contextMenu,
420 - topCopy: eventTypes.copy,
421 - topCut: eventTypes.cut,
422 - topDoubleClick: eventTypes.doubleClick,
423 - topDrag: eventTypes.drag,
424 - topDragEnd: eventTypes.dragEnd,
425 - topDragEnter: eventTypes.dragEnter,
426 - topDragExit: eventTypes.dragExit,
427 - topDragLeave: eventTypes.dragLeave,
428 - topDragOver: eventTypes.dragOver,
429 - topDragStart: eventTypes.dragStart,
430 - topDrop: eventTypes.drop,
431 - topDurationChange: eventTypes.durationChange,
432 - topEmptied: eventTypes.emptied,
433 - topEncrypted: eventTypes.encrypted,
434 - topEnded: eventTypes.ended,
435 - topError: eventTypes.error,
436 - topFocus: eventTypes.focus,
437 - topInput: eventTypes.input,
438 - topInvalid: eventTypes.invalid,
439 - topKeyDown: eventTypes.keyDown,
440 - topKeyPress: eventTypes.keyPress,
441 - topKeyUp: eventTypes.keyUp,
442 - topLoad: eventTypes.load,
443 - topLoadedData: eventTypes.loadedData,
444 - topLoadedMetadata: eventTypes.loadedMetadata,
445 - topLoadStart: eventTypes.loadStart,
446 - topMouseDown: eventTypes.mouseDown,
447 - topMouseMove: eventTypes.mouseMove,
448 - topMouseOut: eventTypes.mouseOut,
449 - topMouseOver: eventTypes.mouseOver,
450 - topMouseUp: eventTypes.mouseUp,
451 - topPaste: eventTypes.paste,
452 - topPause: eventTypes.pause,
453 - topPlay: eventTypes.play,
454 - topPlaying: eventTypes.playing,
455 - topProgress: eventTypes.progress,
456 - topRateChange: eventTypes.rateChange,
457 - topReset: eventTypes.reset,
458 - topScroll: eventTypes.scroll,
459 - topSeeked: eventTypes.seeked,
460 - topSeeking: eventTypes.seeking,
461 - topStalled: eventTypes.stalled,
462 - topSubmit: eventTypes.submit,
463 - topSuspend: eventTypes.suspend,
464 - topTimeUpdate: eventTypes.timeUpdate,
465 - topTouchCancel: eventTypes.touchCancel,
466 - topTouchEnd: eventTypes.touchEnd,
467 - topTouchMove: eventTypes.touchMove,
468 - topTouchStart: eventTypes.touchStart,
469 - topTransitionEnd: eventTypes.transitionEnd,
470 - topVolumeChange: eventTypes.volumeChange,
471 - topWaiting: eventTypes.waiting,
472 - topWheel: eventTypes.wheel,
473 -};
474 -
475 -for (var type in topLevelEventsToDispatchConfig) {
476 - topLevelEventsToDispatchConfig[type].dependencies = [type];
477 -}
126 + dependencies: [topEvent],
127 + };
128 + eventTypes[event] = type;
129 + topLevelEventsToDispatchConfig[topEvent] = type;
130 +});
131
132 var onClickListeners = {};
133