-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CDN Bundle Fixes #333
CDN Bundle Fixes #333
Conversation
Coverage Report
File CoverageNo changed files found. |
Related to ably/ably-chat-js#333 Currently, only the UMD variant of Chat works with ably-js, so we need to point to that. Also expands the example of how to use the CDN-served library.
src/react/README.md
Outdated
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script> | ||
<script src="https://cdn.ably.com/lib/ably-chat-react.umd.cjs-0.js"></script> | ||
<script> | ||
const chatClient = new AblyChat.ChatClient(realtime); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we include some example calling AblyChatReact
here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In hindsight... I'm going to get rid of React on the CDN. It's very complicated for what is probably very little usage.
6bd3bde
to
4addd7e
Compare
Related to ably/ably-chat-js#333 Currently, only the UMD variant of Chat works with ably-js, so we need to point to that. Also expands the example of how to use the CDN-served library.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested locally and it works, nicely done!
4addd7e
to
a065608
Compare
The library was not working on the CDN when using the ESM version. This is because ably-js does not export an ESM variant, and thus the import statement from Chat (which marks ably-js as external during build) fails to resolve the module. This change fixes the issue by updating the README to point at the UMD version of Chat when using the CDN: which does work. We also update the library names in the Vite config, which allows you to use the Chat SDK like so `const chatClient = new AblyChat.ChatClient()` rather than having to do `new window["ably-chat-js"].ChatClient()`.
Bundling the DOM or runtime into chat means that the consuming application could have multiple versions of React in play. This could cause issues down the line, so mark these packages as external: requiring consuming applications to provide them. This is common practice in other packages, e.g. react-router.
a065608
to
7e1a99d
Compare
Related to ably/ably-chat-js#333 Currently, only the UMD variant of Chat works with ably-js, so we need to point to that. Also expands the example of how to use the CDN-served library.
Related to ably/ably-chat-js#333 Currently, only the UMD variant of Chat works with ably-js, so we need to point to that. Also expands the example of how to use the CDN-served library.
Context
We were having some issues with using ably-js and ably-chat-js from the CDN, as the former doesn't export an ESM module (and the later tries to import it).
Description
AblyChat
andAblyChatReact
respectively. This means that users can doconst chatClient = new AblyChat.ChatClient()
instead ofconst chatClient = new window['ably-chat-js'].ChatClient()
in the browser.react-dom
andreact/jsx-runtime
externals - requiring the consumer to provide them and avoiding conflicts.Checklist
Testing Instructions (Optional)
Minimal working example:
If the above doesn't error, you're good!