call js function with context about react-swf

[syranide]

See #9

ReactSWF is not involved in this and there's nothing ReactSWF can do that isn't opinionated/intrusive and would require special code built into the SWF.

Flash Player can only call functions exposed on window, so you're left with two choices:

1. Each instance should store a uniquely named function on window, say my_swf_cb_123456(). Then pass the function name in flash-vars to the SWF.
2. Export a named function on window with an extra ID parameter, say my_swf_cb(id). Each instance should generate a unique ID and store the ID and instance in a map used by my_swf_cb. Then pass the ID in flash-vars to the SWF.
3. EDIT If there's only ever once instance, just store a bound callback on window and call that from the SWF.

I'm refactoring ReactSWF a bit and I may end up providing this functionality through a separate complementary module, but due to the design of FlashPlayer this is not something ReactSWF should provide.

EDIT: You cannot pass functions through flashVars because it has to be serialized into a string and passed to FlashPlayer.

[syranide]

Hmm... it could make sense to have ReactSWF detect functions passed in flash-vars and special-case them perhaps. I'll think about this.

[syranide]

Oh right facebook/react#4000 prevents this from being a good idea at the moment.

[syranide]

const SWF_ID_PREFIX = '__MyExternalInterfaceExample_SWFID_';
const SWF_CALL_NAME_PREFIX = '__MyExternalInterfaceExample_SWFCall_';

let nextUID = 0;

class MyExternalInterfaceExample extends React.Component {
  constructor(props) {
    super(props);

    // For most purposes nextUID is sufficient. However, if you rely on
    // non-trivial server rendering you must generate deterministic UIDs per
    // React root to avoid markup mismatch.
    this._uid = nextUID++;

    window[SWF_CALL_NAME_PREFIX + this._uid] = this.handleSWFCall.bind(this);
  }

  componentWillUnmount() {
    delete window[SWF_CALL_NAME_PREFIX + this._uid];
  }

  handleSWFCall() {
    // Beware; SWF calls are executed in the context of SWF Player.
    console.log('SWFCall', arguments);
    return 'foobar';
  }

  invokeSWFMyCallback(arg) {
    // Beware; SWF Player does not sufficiently escape serialized arguments.
    return this._swfPlayerNode.myCallback(arg);
  }

  render() {
    // Globally unique ID is required for ExternalInterface callbacks in IE<11.
    return (
      <ReactSWF
        ...
        ref={c => this._swfPlayerNode = c}
        id={SWF_ID_PREFIX + this._uid}
        flashVars={{myCallbackName: SWF_CALL_NAME_PREFIX + this._uid}}
      />
    );
  }
}

[tadjik1]

thanks a lot!