springroll / bellhop Goto Github PK

Hello,

Currently using a function-based respond('eventName', () => { return val; }) implementation to return data from a fetch('eventName', (e) => { const val = e?.data }) call.

If you modify val and then call fetch() again, it returns the old value, not the modified one.

I noticed that respond() looks like it's mutating the data value you pass in on line 295:
data = data();

This means that the next time respond() is called, data might be returning value from the last call, not the function itself.

Seems like the fix could involve assigning to a new variable rather than overriding the input data variable.

Cheers,
Cameron Harvey

Extra note: my current workaround is to set the runOnce parameter to true, and then re-register with the same function call inside that function, e.g.
bellhop.respond('eventName', func, true) where func() { bellhop.respond('eventName', func, true); return val; }

I used bellhop in my nuxt v2 project, import with es6 module import { Bellhop } from 'bellhop-iframe'

But I hit the error SyntaxError: Unexpected token 'export'

12-27 15:52:37:   SyntaxError: Unexpected token 'export'
12-27 15:52:37:   at internalCompileFunction (node:internal/vm:73:18)
12-27 15:52:37:   at wrapSafe (node:internal/modules/cjs/loader:1178:20)
12-27 15:52:37:   at Module._compile (node:internal/modules/cjs/loader:1220:27)
12-27 15:52:37:   at Module._extensions..js (node:internal/modules/cjs/loader:13
12-27 15:52:37:   at Module.load (node:internal/modules/cjs/loader:1119:32)
12-27 15:52:37:   at Module._load (node:internal/modules/cjs/loader:960:12)
12-27 15:52:37:   at Module.require (node:internal/modules/cjs/loader:1143:19)
12-27 15:52:37:   at Hook._require.Module.require (/usr/local/lib/node_modules/p
12-27 15:52:37:   at require (node:internal/modules/cjs/helpers:119:18)
12-27 15:52:37:   at node_modules/vue-server-renderer/build.prod.js:1:76653
12-27 15:52:37:   at Object.<anonymous> (webpack:/external "bellhop-iframe":1:0)
12-27 15:52:37:   at __webpack_require__ (webpack/bootstrap:25:0)
12-27 15:52:37:   at Module.<anonymous> (server.js:72187:32)
12-27 15:52:37:   at __webpack_require__ (webpack/bootstrap:25:0)
12-27 15:52:37:   at Object.<anonymous> (server.js:50352:18)
12-27 15:52:37:   at __webpack_require__ (webpack/bootstrap:25:0)

In my project import other all modules using es6 , e.g

import * as dayjs from 'dayjs'
import Element from 'element-ui'

So I assume there must some setting related to module that causes this error. I tried to tinker with nuxt.config.js, e.g. transpile bellhop but I failed.

When, from the main window, you send messages to an iframe from the connected handler, those messages are never received.

I think the reason lies here: https://github.com/SpringRoll/Bellhop/blob/master/src/Bellhop.js#L124.

I believe this line should be moved to the end of onConnectionReceived(), so that messages sent from the connected handler are sent after: 1. The 'connected' message and 2. The waiting sends (so that the sending order is respected).

I noticed an issue in fetch where a client could request data from the other side of an iframe but never receive a response. A quick code example:

// in the outer frame
var bellhop = new Bellhop();
bellhop.connect();
bellhop.fetch('ping', e => console.log('Received', e.data));

// in the inner frame
var bellhop = new Bellhop();
bellhop.connect();
// bellhop.respond('ping', 'pong')

In this case, the callback will never be called. This to me makes sense because it's asking the other side "if you have data, please provide", rather than "I need this data in order to move forward". However, I can see a case (UserData in springroll core for example), where it might be useful for the requestor to know if there isn't anyone listening on the other side so the app can respond accordingly.

The solution in my mind is to potentially add a timeout before eventually rejecting the event. However, I don't see any mechanism through the callback system to notify the requestor that it was an error, rather than an "real" response from the other side. What would be the correct approach?

If you disconnect and reconnect, you end up receiving each message twice.

This is due to the fact that Bellhop.disconnect() doesn't release the event listener. Indeed, addEventListener (see this line) and removeEventListener (see this line) are not called on the same function.

What's the recommended way to include bellhop in a SpringRoll project now? It used bower originally, but with the update we're getting an error about bellhop.js not being found. Should I just lock in the earlier version of bellhop?

In the source code, respond() is advertised as being able to take a function as its data argument:

/**
   *  A convience method for listening to an event and then responding with some data
   *  right away. Automatically removes the listener
   ...
   *  @param {Object} [data = {}] The object to pass back.
   *  	May also be a function; the return value will be sent as data in this case.
   ...
   */
respond(event, data = {}, runOnce = false) 

But it doesn't work. Only plain objects are supported.

This is too bad, as doing some dynamic computation before sending the data back is often required.

For the record, this line causes a random bug in the code generated by the current version of Google closure compiler:

for (let i = 0, length = this._sendLater.length; i < length; i++) {

It seems the bug causes the loop to sometimes be executed only once, even when there are more elements in the array. I couldn't reproduce the problem in a simple program.

Replacing the above code by the code below solves the problem (and it's also cleaner, as the intermediate length variable serves no purpose anymore):

for (let i = 0; i < this._sendLater.length; i++) {