@@ -345,7 +345,7 @@ const polyplug = function() {
345
345
Event handling functions for PolyPlug.
346
346
**************************************************************************/
347
347
348
- function registerEvent ( query , type , listener ) {
348
+ function registerEvent ( query , eventType , listener ) {
349
349
/*
350
350
Register an event listener, given:
351
351
@@ -362,7 +362,7 @@ const polyplug = function() {
362
362
*/
363
363
const elements = getElements ( query ) ;
364
364
elements . forEach ( function ( element ) {
365
- element . addEventListener ( type , function ( e ) {
365
+ element . addEventListener ( eventType , function ( e ) {
366
366
const detail = JSON . stringify ( {
367
367
type : e . type ,
368
368
target : toJS ( e . target ) ,
@@ -374,12 +374,150 @@ const polyplug = function() {
374
374
} ) ;
375
375
}
376
376
377
+ /**************************************************************************
378
+ Message handling functions for PolyPlug.
379
+ **************************************************************************/
380
+
381
+ function receiveMessage ( raw ) {
382
+ /*
383
+ Receive a raw message string (containing JSON). Deserialize it and
384
+ dispatch the message to the appropriate handler function.
385
+ */
386
+ const message = JSON . parse ( raw ) ;
387
+ switch ( message . type ) {
388
+ case "updateDOM" :
389
+ onUpdateDOM ( message ) ;
390
+ break ;
391
+ case "registerEvent" :
392
+ onRegisterEvent ( message ) ;
393
+ break ;
394
+ case "stdout" :
395
+ onStdout ( message ) ;
396
+ break ;
397
+ case "stderr" :
398
+ onStderr ( message ) ;
399
+ break ;
400
+ case "error" :
401
+ onError ( message ) ;
402
+ break ;
403
+ default :
404
+ console . log ( "Unknown message type." )
405
+ console . log ( message )
406
+ break ;
407
+ }
408
+ }
409
+
410
+ function onUpdateDOM ( msg ) {
411
+ /*
412
+ Handle messages from an interpreter to update the DOM.
413
+
414
+ Given a query to identify a target element, mutate it to the target
415
+ state (encoded as JSON).
416
+
417
+ Sample message:
418
+
419
+ msg = {
420
+ type: "updateDOM",
421
+ query: {
422
+ id: "idOfDomElementToMutate"
423
+ },
424
+ target: {
425
+ ... JSON representation of the target state ...
426
+ }
427
+ }
428
+ */
429
+ const elements = getElements ( msg . query ) ;
430
+ if ( elements . length === 1 ) {
431
+ // Update the single valid match to
432
+ const oldElement = elements [ 0 ] ;
433
+ const newElement = toNode ( msg . target )
434
+ mutate ( oldElement , newElement ) ;
435
+ }
436
+ }
437
+
438
+ function onRegisterEvent ( msg ) {
439
+ /*
440
+ Handle requests from an interpreter to register an event listener.
441
+
442
+ Given a query to identify target element[s], listen for the event type
443
+ and handle with the referenced listener function in the remote
444
+ interpreter.
445
+
446
+ Sample message:
447
+
448
+ msg = {
449
+ type: "registerEvent",
450
+ query: {
451
+ id: "idOfDomElement"
452
+ },
453
+ eventType: "click",
454
+ listener: "my_on_click_function"
455
+ }
456
+ */
457
+ registerEvent ( msg . query , msg . eventType , msg . listener ) ;
458
+ }
459
+
460
+ function onStdout ( msg ) {
461
+ /*
462
+ Handle "normal" STDOUT output.
463
+
464
+ Simply dispatch a "polyplugStdout" custom event with the event's detail
465
+ containing the emitted characters.
466
+
467
+ Sample message:
468
+
469
+ msg = {
470
+ type: "stdout",
471
+ content: "Some stuff to print to the terminal"
472
+ }
473
+ */
474
+ const polyplugStdout = new CustomEvent ( "polyplugStdout" , { detail : msg . content } ) ;
475
+ }
476
+
477
+ function onStderr ( msg ) {
478
+ /*
479
+ Handle "normal" STDERR output.
480
+
481
+ Simply dispatch a "polyplugStderr" custom event with the event's detail
482
+ containing the emitted characters.
483
+
484
+ Sample message:
485
+
486
+ msg = {
487
+ type: "stderr",
488
+ content: "Some stuff from stderr"
489
+ }
490
+ */
491
+ const polyplugStderr = new CustomEvent ( "polyplugStderr" , { detail : msg . content } ) ;
492
+ }
493
+
494
+ function onError ( msg ) {
495
+ /*
496
+ Handle generic error conditions from the interpreter.
497
+
498
+ Dispatch a "polyplugError" custom event with the event detail set to
499
+ the error context.
500
+
501
+ Sample message:
502
+
503
+ msg = {
504
+ type: "error",
505
+ context: {
506
+ ... arbitrary data about the error condition ...
507
+ (e.g. Exception name, line number, stack trace etc)
508
+ }
509
+ }
510
+ */
511
+ const polyplugError = new CustomEvent ( "polyplugError" , { detail : msg } ) ;
512
+ }
513
+
377
514
return {
378
515
toJSON : toJSON ,
379
516
toDOM : toDOM ,
380
517
mutate : mutate ,
381
518
getElements : getElements ,
382
- registerEvent : registerEvent
519
+ registerEvent : registerEvent ,
520
+ receiveMessage : receiveMessage
383
521
}
384
522
} ;
385
523
0 commit comments