ukjinjang / react-channel-plugin Goto Github PK

Preview

show

show will be supported until 2022. After that time it will be deprecated.
NOTE: Recommend to use showMessenger instead.

https://developers.channel.io/docs/web-channel-io#show

It seems that the deprecated API needs to be changed.

Hi There,
I used this plugin with the react its working fine and great but showing following console warnings.

ch-plugin-core-20230626145524.js:95 Warning: onBoot API is deprecated and will be removed in a future release. Consider using boot callback instead. See https://developers.channel.io/docs/web-channelio#boot for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onShow API is deprecated and will be removed in a future release. Consider using onShowMessenger callback instead. See https://developers.channel.io/docs/web-channelio#onShowMessenger for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onHide API is deprecated and will be removed in a future release. Consider using onHideMessenger callback instead. See https://developers.channel.io/docs/web-channelio#onHideMessenger for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onChangeBadge API is deprecated and will be removed in a future release. Consider using onBadgeChanged callback instead. See https://developers.channel.io/docs/web-channelio#onBadgeChanged for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onCreateChat API is deprecated and will be removed in a future release. Consider using onChatCreated callback instead. See https://developers.channel.io/docs/web-channelio#onChatCreated for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onProfileChanged API is deprecated and will be removed in a future release. Consider using onFollowUpChanged callback instead. See https://developers.channel.io/docs/web-channelio#onFollowUpChanged for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onChangeProfile API is deprecated and will be removed in a future release. Consider using onFollowUpChanged callback instead. See https://developers.channel.io/docs/web-channelio#onFollowUpChanged for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onClickRedirect API is deprecated and will be removed in a future release. Consider using onUrlClicked callback instead. See https://developers.channel.io/docs/web-channelio#onUrlClicked for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onBoot API is deprecated and will be removed in a future release. Consider using boot callback instead. See https://developers.channel.io/docs/web-channelio#boot for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onShow API is deprecated and will be removed in a future release. Consider using onShowMessenger callback instead. See https://developers.channel.io/docs/web-channelio#onShowMessenger for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onHide API is deprecated and will be removed in a future release. Consider using onHideMessenger callback instead. See https://developers.channel.io/docs/web-channelio#onHideMessenger for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onChangeBadge API is deprecated and will be removed in a future release. Consider using onBadgeChanged callback instead. See https://developers.channel.io/docs/web-channelio#onBadgeChanged for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onCreateChat API is deprecated and will be removed in a future release. Consider using onChatCreated callback instead. See https://developers.channel.io/docs/web-channelio#onChatCreated for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onProfileChanged API is deprecated and will be removed in a future release. Consider using onFollowUpChanged callback instead. See https://developers.channel.io/docs/web-channelio#onFollowUpChanged for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onChangeProfile API is deprecated and will be removed in a future release. Consider using onFollowUpChanged callback instead. See https://developers.channel.io/docs/web-channelio#onFollowUpChanged for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onClickRedirect API is deprecated and will be removed in a future release. Consider using onUrlClicked callback instead. See https://developers.channel.io/docs/web-channelio#onUrlClicked for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core.4f497a3e.vendor.js:169 WebSocket connection to 'wss://1.front-ws.channel.io/socket.io/?EIO=4&transport=websocket' failed: WebSocket is closed before the connection is established. doClose @ ch-plugin-core.4f497a3e.vendor.js:169 index.js:63 Array(25) installHook.js:342 Array(25) ch-plugin-core-20230626145524.js:95 Warning: onBoot API is deprecated and will be removed in a future release. Consider using boot callback instead. See https://developers.channel.io/docs/web-channelio#boot for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onShow API is deprecated and will be removed in a future release. Consider using onShowMessenger callback instead. See https://developers.channel.io/docs/web-channelio#onShowMessenger for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onHide API is deprecated and will be removed in a future release. Consider using onHideMessenger callback instead. See https://developers.channel.io/docs/web-channelio#onHideMessenger for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onChangeBadge API is deprecated and will be removed in a future release. Consider using onBadgeChanged callback instead. See https://developers.channel.io/docs/web-channelio#onBadgeChanged for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onCreateChat API is deprecated and will be removed in a future release. Consider using onChatCreated callback instead. See https://developers.channel.io/docs/web-channelio#onChatCreated for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onProfileChanged API is deprecated and will be removed in a future release. Consider using onFollowUpChanged callback instead. See https://developers.channel.io/docs/web-channelio#onFollowUpChanged for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onChangeProfile API is deprecated and will be removed in a future release. Consider using onFollowUpChanged callback instead. See https://developers.channel.io/docs/web-channelio#onFollowUpChanged for more information. i @ ch-plugin-core-20230626145524.js:95 ch-plugin-core-20230626145524.js:95 Warning: onClickRedirect API is deprecated and will be removed in a future release. Consider using onUrlClicked callback instead. See https://developers.channel.io/docs/web-channelio#onUrlClicked for more information.

Can the plugin support Next.js?
Pls~ 🙏

The Problem

Throughout this repository, this pattern repeatly used around.

// ...
const someRef = useRef(someProp);

// ... someRef.current is used

useEffect(() => {
  someRef.current = someProp;
}, [someProp]);

When we change someProp for this component, we expect someProp is used and propagated through the component immediately. However using useRef and useEffect breaks this common expectation. Actually propagation of changed someProp requires additional event queue fetching.

This leads several unexpected and inconsistent behavior of the program.

Actual Issue We Found

One example we found ( and it's the actual reason we wrote this issue ) is the fact that rebootOnOptionChanged is not working as expected. (or... it could work in some environment but not guaranteed.)

In ReactChannelIO.tsx, when channelIOBootOption is changed, it triggers re-render of the component and runs several useEffect hooks. These are the hooks executed.

The optionRef Hook

  useEffect(() => {
    optionRef.current = channelIOBootOption;
  }, [channelIOBootOption]);

The reboot hook

  //
  // Re-boot channel plugin when boot option changed.
  //
  useDeepEffect(() => {
    if (isBooted && rebootOnOptionChanged) {
      debugLogger(verbose, 'Rebooting since option has been changed...');
      void boot().catch(() => void 0);
    }
  }, [channelIOBootOption]);

For the reboot to work properly with the changed channelIOBootOption, optionRef Hook must be executed first which is very hard to guarantee. The actual behavior we faced is that the component reboots Channel IO with old options.

Suggestion

We think you can safely remove most of useRef and just use the passed props directly.

As of December 15, There is some big changes to the ChannelTalk API schema.

https://developers.channel.io/docs/upcoming-changes-to-open-api-231215-~

The library does not currently support new versions.
So I'm seeing a lot of warnings right now, and we know you're aware of that.

However, we're still seeing pretty high numbers, with 2k weekly downloads.

What do you think about doing more work to keep up with the new version for a lot of developers?
I'd be happy to contribute. I'm here for you.