From ae1c8560200b67da66e70f0c0437fca3fcb4aec8 Mon Sep 17 00:00:00 2001 From: Yen Truong <36055303+yen-tt@users.noreply.github.com> Date: Mon, 11 Sep 2023 20:00:40 -0400 Subject: [PATCH] Ensures CJS/ESM bundle is compatible with Alpha (sonic), pagesJS (vite), and CRA (webpack) (#38) **Investigation:** This PR attempts to fix the following error in alpha/sonic: ![Screenshot 2023-08-31 at 4 40 11 PM](https://github.com/yext/chat-ui-react/assets/36055303/5ec087ff-9e94-4637-9939-96a90cec9221) This was a result of adding `"type": "module"` to our esm bundle for our library to be compatible with vite/pagesJS. Vite, and bundlers such as webpack, follow node's module resolution algorithm. and NodeJS have certain rules on how it recognize files as ES modules (https://nodejs.org/api/packages.html#determining-module-system) -- which include adding `"type": "module"` as an option. The fix is to update all of our paths to be explicit in order to include the mjs/js extensions, including (e.g. `./components` to `./components/index.js` and `../icons/DualSync` to `../icons/DualSync.js`). This currently can't be done by typescript compiler (tsc) as it's strictly a nodejs behavior and they don't want to support that ([long issue thread here](https://github.com/microsoft/TypeScript/issues/18442#issuecomment-408654005)), which is frustrating. So we would have to do it manually or have a script to update import/export paths in the final bundle generated by tsc. This is not ideal and can be error prone. **Solution:** I decided to **replace tsc with rollup to bundle our library and append .mjs extension to our final esm bundle**. Using `mjs` extension instead of `.js` also remove the need to do `"type": "module"` in our esm package.json, which previously introduce unnecessary caveats and one-off script to inject it into our esm bundle. NOTE: the default **interop** behavior for rollup is not compatible with alpha/sonic. As such, the rollup config in this PR uses `auto` to follow Typescript's `esModuleInterop` behavior in how it transpile named, default, and dynamic imports of external deps (the issue with alpha is related to how react-textarea-autosize was imported into ChatInput) NOTE: updated `tsconfig.json` to use `"jsx": "react"` instead of `"jsx": "react-jsx"` because of the way jsx-runtime is backported to react 16/17 without explicit exports field ([React github issue here](https://github.com/facebook/react/issues/20235#issuecomment-1095345193)). We would either need to export two separate bundles for latest and legacy versions in order to continue outputting the JSX syntactic sugar OR we could just output `React.createElement` directly. This is common for many React libraries that support older versions like React 16. (e.g. [ant design](https://github.com/ant-design/ant-design/blob/master/tsconfig.json#L15), [blueprint UI](https://github.com/palantir/blueprint/blob/develop/config/tsconfig.base.json#L9), [evergreen UI](https://github.com/segmentio/evergreen/blob/master/tsconfig.json#L6)) J=CLIP-520 TEST=manual see that the new build works with: - the local test-site of the component lib repo - pagejs/vite (released v0.6.0-alpha.38.6 to install and test) - sonic/alpha (released v0.6.0-alpha.38.6 to install and test) --- README.md | 2 + THIRD-PARTY-NOTICES | 18 +-- api-extractor.json | 2 +- docs/chat-ui-react.chatheader.md | 4 +- docs/chat-ui-react.chatinput.md | 4 +- docs/chat-ui-react.chatpanel.md | 4 +- docs/chat-ui-react.chatpopup.md | 4 +- docs/chat-ui-react.messagebubble.md | 4 +- etc/chat-ui-react.api.md | 14 +- package-lock.json | 194 ++++++++++++++++++++++----- package.json | 20 +-- rollup.config.mjs | 45 +++++++ scoped-bundle.sh | 2 - src/components/ChatHeader.tsx | 2 +- src/components/ChatInput.tsx | 2 +- src/components/ChatPanel.tsx | 2 +- src/components/ChatPopUp.tsx | 2 +- src/components/FeedbackButtons.tsx | 2 +- src/components/LoadingDots.tsx | 1 + src/components/Markdown.tsx | 2 +- src/components/MessageBubble.tsx | 1 + src/hooks/useReportAnalyticsEvent.ts | 3 +- src/icons/Arrow.tsx | 2 + src/icons/Chat.tsx | 2 + src/icons/Cross.tsx | 2 + src/icons/DualSync.tsx | 2 + src/icons/ThumbsDown.tsx | 2 + src/icons/ThumbsDownFill.tsx | 2 + src/icons/ThumbsUp.tsx | 2 + src/icons/ThumbsUpFill.tsx | 2 + test-site/craco.config.js | 19 --- test-site/package-lock.json | 161 +++++----------------- test-site/package.json | 7 +- test-site/src/index.tsx | 8 ++ test-site/tsconfig.json | 3 + tsconfig.cjs.json | 8 -- tsconfig.esm.json | 8 -- tsconfig.json | 12 +- update-lib-package.js | 39 ------ 39 files changed, 330 insertions(+), 285 deletions(-) create mode 100644 rollup.config.mjs delete mode 100644 test-site/craco.config.js delete mode 100644 tsconfig.cjs.json delete mode 100644 tsconfig.esm.json delete mode 100644 update-lib-package.js diff --git a/README.md b/README.md index 77de006..c2b2fb4 100644 --- a/README.md +++ b/README.md @@ -46,10 +46,12 @@ do not use Tailwind, a css bundle is exported as part of this package. To use it the file `@yext/chat-ui-react/bundle.css` into your normal CSS flow. Example for Yext Pages: + ```css /* index.css */ @import "@yext/chat-ui-react/bundle.css"; ``` + The CSS bundle is scoped to the target class `.yext-chat`, which is automatically included as a wrapper div in both `ChatPanel` and `ChatPopUp`. diff --git a/THIRD-PARTY-NOTICES b/THIRD-PARTY-NOTICES index 62c71d5..b46b1d2 100644 --- a/THIRD-PARTY-NOTICES +++ b/THIRD-PARTY-NOTICES @@ -132,7 +132,7 @@ MIT License The following npm package may be included in this product: - - @yext/analytics@0.6.2 + - @yext/analytics@0.6.4 This package contains the following license and notice below: @@ -173,9 +173,9 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. The following npm packages may be included in this product: - - @yext/chat-core@0.5.3 - - @yext/chat-headless-react@0.5.6 - - @yext/chat-headless@0.5.6 + - @yext/chat-core@0.7.0 + - @yext/chat-headless-react@0.6.1 + - @yext/chat-headless@0.7.1 These packages each contain the following license and notice below: @@ -830,7 +830,7 @@ THE SOFTWARE. The following npm package may be included in this product: - - layerr@2.0.0 + - layerr@2.0.1 This package contains the following license and notice below: @@ -1299,8 +1299,8 @@ SOFTWARE. The following npm packages may be included in this product: - - react-redux@8.1.1 - - redux-thunk@2.4.2 + - react-redux@8.1.2 + - redux@4.2.1 These packages each contain the following license and notice below: @@ -1359,7 +1359,7 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. The following npm package may be included in this product: - - redux@4.2.1 + - redux-thunk@2.4.2 This package contains the following license and notice below: @@ -1786,7 +1786,7 @@ THE SOFTWARE. The following npm package may be included in this product: - - ulidx@2.0.0 + - ulidx@2.1.0 This package contains the following license and notice below: diff --git a/api-extractor.json b/api-extractor.json index 2ed13e8..9b12754 100644 --- a/api-extractor.json +++ b/api-extractor.json @@ -77,7 +77,7 @@ * SUPPORTED TOKENS: , , * DEFAULT VALUE: "/tsconfig.json" */ - "tsconfigFilePath": "/tsconfig.esm.json" + "tsconfigFilePath": "/tsconfig.json" /** * Provides a compiler configuration that will be used instead of reading the tsconfig.json file from disk. * The object must conform to the TypeScript tsconfig schema: diff --git a/docs/chat-ui-react.chatheader.md b/docs/chat-ui-react.chatheader.md index ca5aa7e..dbdfe63 100644 --- a/docs/chat-ui-react.chatheader.md +++ b/docs/chat-ui-react.chatheader.md @@ -9,7 +9,7 @@ A component that renders the header of a chat bot panel, including the title and **Signature:** ```typescript -export declare function ChatHeader({ title, showRestartButton, restartButtonIcon, showCloseButton, closeButtonIcon, onClose, customCssClasses, }: ChatHeaderProps): import("react/jsx-runtime").JSX.Element; +export declare function ChatHeader({ title, showRestartButton, restartButtonIcon, showCloseButton, closeButtonIcon, onClose, customCssClasses, }: ChatHeaderProps): React.JSX.Element; ``` ## Parameters @@ -20,5 +20,5 @@ export declare function ChatHeader({ title, showRestartButton, restartButtonIcon **Returns:** -import("react/jsx-runtime").JSX.Element +React.JSX.Element diff --git a/docs/chat-ui-react.chatinput.md b/docs/chat-ui-react.chatinput.md index 7bece6e..627e0ef 100644 --- a/docs/chat-ui-react.chatinput.md +++ b/docs/chat-ui-react.chatinput.md @@ -9,7 +9,7 @@ A component that allows user to input message and send to Chat API. **Signature:** ```typescript -export declare function ChatInput({ placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, }: ChatInputProps): import("react/jsx-runtime").JSX.Element; +export declare function ChatInput({ placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, }: ChatInputProps): React.JSX.Element; ``` ## Parameters @@ -20,7 +20,7 @@ export declare function ChatInput({ placeholder, stream, inputAutoFocus, handleE **Returns:** -import("react/jsx-runtime").JSX.Element +React.JSX.Element ## Remarks diff --git a/docs/chat-ui-react.chatpanel.md b/docs/chat-ui-react.chatpanel.md index 73176f4..097e591 100644 --- a/docs/chat-ui-react.chatpanel.md +++ b/docs/chat-ui-react.chatpanel.md @@ -9,7 +9,7 @@ A component that renders a full panel for chat bot interactions. This includes t **Signature:** ```typescript -export declare function ChatPanel(props: ChatPanelProps): import("react/jsx-runtime").JSX.Element; +export declare function ChatPanel(props: ChatPanelProps): React.JSX.Element; ``` ## Parameters @@ -20,5 +20,5 @@ export declare function ChatPanel(props: ChatPanelProps): import("react/jsx-runt **Returns:** -import("react/jsx-runtime").JSX.Element +React.JSX.Element diff --git a/docs/chat-ui-react.chatpopup.md b/docs/chat-ui-react.chatpopup.md index cec1180..6217caf 100644 --- a/docs/chat-ui-react.chatpopup.md +++ b/docs/chat-ui-react.chatpopup.md @@ -9,7 +9,7 @@ A component that renders a popup button that displays and hides a panel for chat **Signature:** ```typescript -export declare function ChatPopUp(props: ChatPopUpProps): import("react/jsx-runtime").JSX.Element; +export declare function ChatPopUp(props: ChatPopUpProps): React.JSX.Element; ``` ## Parameters @@ -20,5 +20,5 @@ export declare function ChatPopUp(props: ChatPopUpProps): import("react/jsx-runt **Returns:** -import("react/jsx-runtime").JSX.Element +React.JSX.Element diff --git a/docs/chat-ui-react.messagebubble.md b/docs/chat-ui-react.messagebubble.md index 2eb9690..ab0ce93 100644 --- a/docs/chat-ui-react.messagebubble.md +++ b/docs/chat-ui-react.messagebubble.md @@ -9,7 +9,7 @@ A component that displays the provided message. **Signature:** ```typescript -export declare function MessageBubble({ message, showFeedbackButtons, showTimestamp, customCssClasses, formatTimestamp, }: MessageBubbleProps): import("react/jsx-runtime").JSX.Element; +export declare function MessageBubble({ message, showFeedbackButtons, showTimestamp, customCssClasses, formatTimestamp, }: MessageBubbleProps): React.JSX.Element; ``` ## Parameters @@ -20,5 +20,5 @@ export declare function MessageBubble({ message, showFeedbackButtons, showTimest **Returns:** -import("react/jsx-runtime").JSX.Element +React.JSX.Element diff --git a/etc/chat-ui-react.api.md b/etc/chat-ui-react.api.md index 64815bd..6c21a5f 100644 --- a/etc/chat-ui-react.api.md +++ b/etc/chat-ui-react.api.md @@ -4,13 +4,11 @@ ```ts -/// - -import { JSX as JSX_2 } from 'react/jsx-runtime'; import { Message } from '@yext/chat-headless-react'; +import { default as React_2 } from 'react'; // @public -export function ChatHeader({ title, showRestartButton, restartButtonIcon, showCloseButton, closeButtonIcon, onClose, customCssClasses, }: ChatHeaderProps): JSX_2.Element; +export function ChatHeader({ title, showRestartButton, restartButtonIcon, showCloseButton, closeButtonIcon, onClose, customCssClasses, }: ChatHeaderProps): React_2.JSX.Element; // @public export interface ChatHeaderCssClasses { @@ -40,7 +38,7 @@ export interface ChatHeaderProps { } // @public -export function ChatInput({ placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, }: ChatInputProps): JSX_2.Element; +export function ChatInput({ placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, }: ChatInputProps): React_2.JSX.Element; // @public export interface ChatInputCssClasses { @@ -63,7 +61,7 @@ export interface ChatInputProps { } // @public -export function ChatPanel(props: ChatPanelProps): JSX_2.Element; +export function ChatPanel(props: ChatPanelProps): React_2.JSX.Element; // @public export interface ChatPanelCssClasses { @@ -88,7 +86,7 @@ export interface ChatPanelProps extends Omit=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/plugin-json/node_modules/@rollup/pluginutils": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.4.tgz", + "integrity": "sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==", + "dev": true, + "dependencies": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/plugin-json/node_modules/@types/estree": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz", + "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==", + "dev": true + }, "node_modules/@rollup/pluginutils": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", @@ -9665,9 +9716,9 @@ "dev": true }, "node_modules/@yext/analytics": { - "version": "0.6.2", - "resolved": "https://registry.npmjs.org/@yext/analytics/-/analytics-0.6.2.tgz", - "integrity": "sha512-ZdvQUSyQw/184wPtk8CJbZCRd30eU04qGIh60mt8QplvmQz5L/rNVbxl0HVEAV+QXXWDmt/lNxpCivGm7IZNnw==", + "version": "0.6.4", + "resolved": "https://registry.npmjs.org/@yext/analytics/-/analytics-0.6.4.tgz", + "integrity": "sha512-cB9NJxaTmy6G2cP5BBn+vxVSetbBybsdXuBPE71dJvVjPVMzneio7TaZt3V4PGPuqrZdYMTVXjx7Kgbxep/O8A==", "dev": true, "dependencies": { "cross-fetch": "^3.1.5", @@ -9675,33 +9726,33 @@ } }, "node_modules/@yext/chat-core": { - "version": "0.5.3", - "resolved": "https://registry.npmjs.org/@yext/chat-core/-/chat-core-0.5.3.tgz", - "integrity": "sha512-XVM6EwWyzlKyjq7WKkraEkjNP9w1Zzuq+xuNO4FKzWlq7YhmQSKTDWGEEBFVxiuAj+dzTBzUhJT91bW6J6n9NA==", + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@yext/chat-core/-/chat-core-0.7.0.tgz", + "integrity": "sha512-D7PLurAhi2vQKu5Wo96W9XYGqfUUKJORj6fCKPZJanmIM+2GXvTnKoBbtMycPDniacWH99ONUzV8Akj7ysGFTw==", "dev": true, "dependencies": { "cross-fetch": "^3.1.5" } }, "node_modules/@yext/chat-headless": { - "version": "0.5.6", - "resolved": "https://registry.npmjs.org/@yext/chat-headless/-/chat-headless-0.5.6.tgz", - "integrity": "sha512-52j1hbXzbGQlAkuOnw/L4KR+NlFGRyS51ofihUDWpgHGOA8XdJwKtMLXWpD9Gb1t/fQ+Ssi5tHzPwBpDby+gsQ==", + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/@yext/chat-headless/-/chat-headless-0.7.1.tgz", + "integrity": "sha512-jM3UCYDuBd8eANXeE/yu+wT+qtMoTWV1+Iitz9VwDgs9yRWlh2of3Svexvkq4uo4YcCnyne3aXZDkxMnYoKCjA==", "dev": true, "dependencies": { "@reduxjs/toolkit": "^1.9.5", - "@yext/analytics": "^0.6.2", - "@yext/chat-core": "^0.5.3" + "@yext/analytics": "^0.6.3", + "@yext/chat-core": "^0.7.0" } }, "node_modules/@yext/chat-headless-react": { - "version": "0.5.6", - "resolved": "https://registry.npmjs.org/@yext/chat-headless-react/-/chat-headless-react-0.5.6.tgz", - "integrity": "sha512-ePx46JUoqZGdo/ltUh14ziI9/egy5zOh1Hv8500VlewLMWIk8O1MZabyaytE1IIHhIPbMRtQwTMTTY78r3wA6Q==", + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/@yext/chat-headless-react/-/chat-headless-react-0.6.1.tgz", + "integrity": "sha512-ArmGj/h1f1y6UMBaFuzhN1ThvnmfXAu9tqQKLNpX910U3AqnCch1FtbS29TfiZjIQbmDndmBJOis7PPTziCXpg==", "dev": true, "dependencies": { "@reduxjs/toolkit": "^1.9.5", - "@yext/chat-headless": "^0.5.6", + "@yext/chat-headless": "^0.7.1", "react-redux": "^8.0.5" }, "peerDependencies": { @@ -17567,9 +17618,9 @@ } }, "node_modules/layerr": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/layerr/-/layerr-2.0.0.tgz", - "integrity": "sha512-d17+qA3CAekh29Z67nLQaqCXJSvoo9zKBvZAziYdDwTOeA1XdOoTuLtNOLg+TW5Tse+D9bw8VHsTQo5vU7G/kA==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/layerr/-/layerr-2.0.1.tgz", + "integrity": "sha512-z0730CwG/JO24evdORnyDkwG1Q7b7mF2Tp1qRQ0YvrMMARbt1DFG694SOv439Gm7hYKolyZyaB49YIrYIfZBdg==", "dev": true }, "node_modules/lazy-universal-dotenv": { @@ -20201,9 +20252,9 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, "node_modules/react-redux": { - "version": "8.1.1", - "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.1.tgz", - "integrity": "sha512-5W0QaKtEhj+3bC0Nj0NkqkhIv8gLADH/2kYFMTHxCVqQILiWzLv6MaLuV5wJU3BQEdHKzTfcvPN0WMS6SC1oyA==", + "version": "8.1.2", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.2.tgz", + "integrity": "sha512-xJKYI189VwfsFc4CJvHqHlDrzyFTY/3vZACbE+rr/zQ34Xx1wQfB4OTOSeOSNrF6BDVe8OOdxIrAnMGXA3ggfw==", "dev": true, "dependencies": { "@babel/runtime": "^7.12.1", @@ -20790,9 +20841,9 @@ } }, "node_modules/rollup": { - "version": "3.26.2", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.26.2.tgz", - "integrity": "sha512-6umBIGVz93er97pMgQO08LuH3m6PUb3jlDUUGFsNJB6VgTCUaDFpupf5JfU30529m/UKOgmiX+uY6Sx8cOYpLA==", + "version": "3.28.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.1.tgz", + "integrity": "sha512-R9OMQmIHJm9znrU3m3cpE8uhN0fGdXiawME7aZIpQqvpS/85+Vt1Hq1/yVIcYfOmaQiHjvXkQAoJukvLpau6Yw==", "dev": true, "bin": { "rollup": "dist/bin/rollup" @@ -20805,6 +20856,85 @@ "fsevents": "~2.3.2" } }, + "node_modules/rollup-plugin-typescript2": { + "version": "0.35.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.35.0.tgz", + "integrity": "sha512-szcIO9hPUx3PhQl91u4pfNAH2EKbtrXaES+m163xQVE5O1CC0ea6YZV/5woiDDW3CR9jF2CszPrKN+AFiND0bg==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^4.1.2", + "find-cache-dir": "^3.3.2", + "fs-extra": "^10.0.0", + "semver": "^7.3.7", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "rollup": ">=1.26.3", + "typescript": ">=2.4.0" + } + }, + "node_modules/rollup-plugin-typescript2/node_modules/fs-extra": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", + "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/rollup-plugin-typescript2/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/rollup-plugin-typescript2/node_modules/semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/rollup-plugin-typescript2/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "dev": true + }, + "node_modules/rollup-plugin-typescript2/node_modules/universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", + "dev": true, + "engines": { + "node": ">= 10.0.0" + } + }, + "node_modules/rollup-plugin-typescript2/node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, "node_modules/run-async": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz", @@ -22176,12 +22306,12 @@ } }, "node_modules/ulidx": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ulidx/-/ulidx-2.0.0.tgz", - "integrity": "sha512-cz6HnYL8aQeR1l7qgo4qK88kLhnVQn1qLjALMoa4rtmj6/jw3yS2KUxu3r+d8GSKkeK9ctw+n8VmCygqfDtckA==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/ulidx/-/ulidx-2.1.0.tgz", + "integrity": "sha512-DlMi97oP9HASI3kLCjBlOhAG1SoisUrEqC2PJ7itiFbq9q5Zo0JejupXeu2Gke99W62epNzA4MFNToNiq8A5LA==", "dev": true, "dependencies": { - "layerr": "^2.0.0" + "layerr": "^2.0.1" }, "engines": { "node": ">=16" diff --git a/package.json b/package.json index 711b338..9d4250b 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,15 @@ { "name": "@yext/chat-ui-react", - "version": "0.6.0", + "version": "0.7.0", "description": "A library of React Components for powering Yext Chat integrations.", "author": "clippy@yext.com", "main": "./lib/commonjs/src/index.js", - "module": "./lib/esm/src/index.js", + "module": "./lib/esm/src/index.mjs", "types": "./lib/esm/src/index.d.ts", "sideEffects": false, "exports": { ".": { - "import": "./lib/esm/src/index.js", + "import": "./lib/esm/src/index.mjs", "require": "./lib/commonjs/src/index.js" }, "./bundle.css": "./lib/bundle.css" @@ -33,15 +33,14 @@ "lint": "prettier --write . && eslint --fix --max-warnings=0 .", "test": "jest --config=jest.config.json", "storybook": "storybook dev -p 6006", - "dev": "tsc --watch -p tsconfig.esm.json", + "dev": "tsc --watch -p tsconfig.json", "generate-docs": "api-extractor run --local --verbose && api-documenter markdown --input-folder temp --output-folder docs && rm -rf temp", "generate-notices": "generate-license-file --input package.json --output ./THIRD-PARTY-NOTICES --overwrite", "postcss": "postcss", "tailwindcss": "tailwindcss", "build:css": "./scoped-bundle.sh", - "build:js": "tsc -p tsconfig.esm.json && tsc -p tsconfig.cjs.json", - "update-lib-package": "node ./update-lib-package.js", - "build": "rm -rf lib/** && npm run build:js && npm run build:css && npm run update-lib-package && npm run generate-docs && npm run generate-notices", + "build:js": "rollup --config rollup.config.mjs", + "build": "rm -rf lib/** && npm run build:js && npm run build:css && npm run generate-docs && npm run generate-notices", "build-storybook": "storybook build" }, "devDependencies": { @@ -51,6 +50,7 @@ "@babel/preset-typescript": "^7.21.5", "@microsoft/api-documenter": "^7.22.8", "@microsoft/api-extractor": "^7.35.1", + "@rollup/plugin-json": "^6.0.0", "@storybook/addon-essentials": "^7.0.18", "@storybook/addon-interactions": "^7.0.18", "@storybook/addon-links": "^7.0.18", @@ -65,7 +65,7 @@ "@testing-library/user-event": "^14.4.3", "@types/jest": "^29.5.1", "@types/react": "^18.2.7", - "@yext/chat-headless-react": "^0.5.6", + "@yext/chat-headless-react": "^0.6.1", "@yext/eslint-config": "^1.0.0", "babel-jest": "^29.5.0", "eslint": "^8.39.0", @@ -80,12 +80,14 @@ "prettier": "^2.8.8", "react": "^18.2.0", "react-dom": "^18.2.0", + "rollup": "^3.28.1", + "rollup-plugin-typescript2": "^0.35.0", "storybook": "^7.0.17", "tailwindcss": "^3.3.2", "typescript": "^5.0.4" }, "peerDependencies": { - "@yext/chat-headless-react": "^0.5.4", + "@yext/chat-headless-react": "^0.6.1", "react": "^16.14 || ^17 || ^18", "react-dom": "^16.14 || ^17 || || ^18" }, diff --git a/rollup.config.mjs b/rollup.config.mjs new file mode 100644 index 0000000..e07ac42 --- /dev/null +++ b/rollup.config.mjs @@ -0,0 +1,45 @@ +/** + * \@rollup/plugin-typescript had issue with "export type": + * [!] RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript) + * Switched over to a fork rollup-plugin-typescript2 resolved the issue. + */ +import typescript from "rollup-plugin-typescript2"; +import json from "@rollup/plugin-json"; +import { defineConfig } from "rollup"; + +export default defineConfig({ + input: "src/index.ts", + output: [ + { + dir: "./lib/esm", + /** + * use mjs extension so NodeJS will recognize the bundle as ES modules + * https://nodejs.org/api/packages.html#determining-module-system + */ + entryFileNames: "[name].mjs", + format: "esm", + /** preserve original module files instead of compressing all to one file */ + preserveModules: true, + sourcemap: true, + /** + * set to "auto" to follow TypeScript's esModuleInterop behavior to ensures compatibility + * of default, namespace, and dynamic imports from external deps (e.g. react-textarea-autosize). + */ + interop: "auto", + }, + { + dir: "./lib/commonjs", + format: "cjs", + preserveModules: true, + sourcemap: true, + interop: "auto", + }, + ], + plugins: [ + /** required to resolve import of package.json */ + json(), + typescript({ + tsconfig: "./tsconfig.json", + }), + ], +}); diff --git a/scoped-bundle.sh b/scoped-bundle.sh index c171bcf..78f9439 100755 --- a/scoped-bundle.sh +++ b/scoped-bundle.sh @@ -18,6 +18,4 @@ sed -i '' 's/html{/{/' bundle.css sed -i '' 's/body{/{/' bundle.css # move bundle to lib -cp bundle.css ./lib/esm/bundle.css -cp bundle.css ./lib/commonjs/bundle.css mv bundle.css ./lib/bundle.css diff --git a/src/components/ChatHeader.tsx b/src/components/ChatHeader.tsx index 913ccbe..ec03de0 100644 --- a/src/components/ChatHeader.tsx +++ b/src/components/ChatHeader.tsx @@ -1,7 +1,7 @@ import { useChatActions } from "@yext/chat-headless-react"; import { DualSyncIcon } from "../icons/DualSync"; import { useComposedCssClasses } from "../hooks/useComposedCssClasses"; -import { useCallback, useRef, useState } from "react"; +import React, { useCallback, useRef, useState } from "react"; import { twMerge } from "tailwind-merge"; import { CrossIcon } from "../icons/Cross"; import { withStylelessCssClasses } from "../utils/withStylelessCssClasses"; diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx index 74c1cf1..057c010 100644 --- a/src/components/ChatInput.tsx +++ b/src/components/ChatInput.tsx @@ -1,4 +1,4 @@ -import { useCallback, useState } from "react"; +import React, { useCallback, useState } from "react"; import { useChatActions, useChatState } from "@yext/chat-headless-react"; import { ArrowIcon } from "../icons/Arrow"; import { useComposedCssClasses } from "../hooks"; diff --git a/src/components/ChatPanel.tsx b/src/components/ChatPanel.tsx index 87d814b..280c227 100644 --- a/src/components/ChatPanel.tsx +++ b/src/components/ChatPanel.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef } from "react"; +import React, { useEffect, useRef } from "react"; import { useChatState, useChatActions } from "@yext/chat-headless-react"; import { MessageBubble, diff --git a/src/components/ChatPopUp.tsx b/src/components/ChatPopUp.tsx index 4de2783..743fc7d 100644 --- a/src/components/ChatPopUp.tsx +++ b/src/components/ChatPopUp.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useState } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import { ChatIcon } from "../icons/Chat"; import { ChatPanel, ChatPanelCssClasses, ChatPanelProps } from "./ChatPanel"; import { diff --git a/src/components/FeedbackButtons.tsx b/src/components/FeedbackButtons.tsx index 0839292..205d250 100644 --- a/src/components/FeedbackButtons.tsx +++ b/src/components/FeedbackButtons.tsx @@ -1,6 +1,6 @@ import { ThumbsDownIcon } from "../icons/ThumbsDown"; import { ThumbsUpIcon } from "../icons/ThumbsUp"; -import { useCallback, useState } from "react"; +import React, { useCallback, useState } from "react"; import { ThumbsUpFillIcon } from "../icons/ThumbsUpFill"; import { ThumbsDownFillIcon } from "../icons/ThumbsDownFill"; import { withStylelessCssClasses } from "../utils/withStylelessCssClasses"; diff --git a/src/components/LoadingDots.tsx b/src/components/LoadingDots.tsx index 3c6302f..ed4be61 100644 --- a/src/components/LoadingDots.tsx +++ b/src/components/LoadingDots.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { twMerge } from "tailwind-merge"; /** diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx index c0d6ea2..619042c 100644 --- a/src/components/Markdown.tsx +++ b/src/components/Markdown.tsx @@ -5,7 +5,7 @@ import ReactMarkdown, { import remarkGfm from "remark-gfm"; import rehypeRaw from "rehype-raw"; import rehypeSanitize from "rehype-sanitize"; -import { useMemo } from "react"; +import React, { useMemo } from "react"; import { useReportAnalyticsEvent } from "../hooks/useReportAnalyticsEvent"; // The Remark and Rehype plugins to use in conjunction with ReactMarkdown. diff --git a/src/components/MessageBubble.tsx b/src/components/MessageBubble.tsx index 067e5d0..9bb1edf 100644 --- a/src/components/MessageBubble.tsx +++ b/src/components/MessageBubble.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { Message, MessageSource } from "@yext/chat-headless-react"; import { useComposedCssClasses } from "../hooks"; import { twMerge } from "tailwind-merge"; diff --git a/src/hooks/useReportAnalyticsEvent.ts b/src/hooks/useReportAnalyticsEvent.ts index 9b58803..fd8779b 100644 --- a/src/hooks/useReportAnalyticsEvent.ts +++ b/src/hooks/useReportAnalyticsEvent.ts @@ -1,7 +1,6 @@ import { ChatHeadless, useChatActions } from "@yext/chat-headless-react"; -import packageJson from "../../package.json"; +import { version } from "../../package.json"; import { useCallback } from "react"; -const { version } = packageJson; /** * Returns a function to send requests to Yext Analytics API. diff --git a/src/icons/Arrow.tsx b/src/icons/Arrow.tsx index fcc90a8..f5fb73c 100644 --- a/src/icons/Arrow.tsx +++ b/src/icons/Arrow.tsx @@ -1,3 +1,5 @@ +import React from "react"; + export function ArrowIcon(): JSX.Element { return ( =6" - }, - "peerDependencies": { - "react-scripts": "^5.0.0" - } - }, "node_modules/@cspotcode/source-map-support": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", - "devOptional": true, + "optional": true, + "peer": true, "dependencies": { "@jridgewell/trace-mapping": "0.3.9" }, @@ -1989,7 +1968,8 @@ "version": "0.3.9", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", - "devOptional": true, + "optional": true, + "peer": true, "dependencies": { "@jridgewell/resolve-uri": "^3.0.3", "@jridgewell/sourcemap-codec": "^1.4.10" @@ -3527,25 +3507,29 @@ "version": "1.0.9", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz", "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==", - "devOptional": true + "optional": true, + "peer": true }, "node_modules/@tsconfig/node12": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz", "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==", - "devOptional": true + "optional": true, + "peer": true }, "node_modules/@tsconfig/node14": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz", "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==", - "devOptional": true + "optional": true, + "peer": true }, "node_modules/@tsconfig/node16": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz", "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==", - "devOptional": true + "optional": true, + "peer": true }, "node_modules/@types/babel__core": { "version": "7.20.0", @@ -5034,20 +5018,6 @@ "wrap-ansi": "^7.0.0" } }, - "node_modules/clone-deep": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz", - "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==", - "dev": true, - "dependencies": { - "is-plain-object": "^2.0.4", - "kind-of": "^6.0.2", - "shallow-clone": "^3.0.0" - }, - "engines": { - "node": ">=6" - } - }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -5283,30 +5253,12 @@ "node": ">=10" } }, - "node_modules/cosmiconfig-typescript-loader": { - "version": "1.0.9", - "resolved": "https://registry.npmjs.org/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-1.0.9.tgz", - "integrity": "sha512-tRuMRhxN4m1Y8hP9SNYfz7jRwt8lZdWxdjg/ohg5esKmsndJIn4yT96oJVcf5x0eA11taXl+sIp+ielu529k6g==", - "dev": true, - "dependencies": { - "cosmiconfig": "^7", - "ts-node": "^10.7.0" - }, - "engines": { - "node": ">=12", - "npm": ">=6" - }, - "peerDependencies": { - "@types/node": "*", - "cosmiconfig": ">=7", - "typescript": ">=3" - } - }, "node_modules/create-require": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", - "devOptional": true + "optional": true, + "peer": true }, "node_modules/cross-spawn": { "version": "7.0.3", @@ -5882,7 +5834,8 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", - "devOptional": true, + "optional": true, + "peer": true, "engines": { "node": ">=0.3.1" } @@ -8211,18 +8164,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/is-plain-object": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", - "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", - "dev": true, - "dependencies": { - "isobject": "^3.0.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/is-potential-custom-element-name": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", @@ -8364,15 +8305,6 @@ "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==" }, - "node_modules/isobject": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", - "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/istanbul-lib-coverage": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz", @@ -10739,7 +10671,8 @@ "version": "1.3.6", "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", - "devOptional": true + "optional": true, + "peer": true }, "node_modules/makeerror": { "version": "1.0.12", @@ -13895,18 +13828,6 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, - "node_modules/shallow-clone": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz", - "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==", - "dev": true, - "dependencies": { - "kind-of": "^6.0.2" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -14765,7 +14686,8 @@ "version": "10.9.1", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz", "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==", - "devOptional": true, + "optional": true, + "peer": true, "dependencies": { "@cspotcode/source-map-support": "^0.8.0", "@tsconfig/node10": "^1.0.7", @@ -14808,7 +14730,8 @@ "version": "8.2.0", "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz", "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==", - "devOptional": true, + "optional": true, + "peer": true, "engines": { "node": ">=0.4.0" } @@ -14817,7 +14740,8 @@ "version": "4.1.3", "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", - "devOptional": true + "optional": true, + "peer": true }, "node_modules/tslib": { "version": "2.5.2", @@ -15081,7 +15005,8 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==", - "devOptional": true + "optional": true, + "peer": true }, "node_modules/v8-to-istanbul": { "version": "8.1.1", @@ -15439,19 +15364,6 @@ "node": ">=10.13.0" } }, - "node_modules/webpack-merge": { - "version": "5.9.0", - "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.9.0.tgz", - "integrity": "sha512-6NbRQw4+Sy50vYNTw7EyOn41OZItPiXB8GNv3INSoe3PSFaHJEz3SHTrYVaRm2LilNGnFUzh0FAwqPEmU/CwDg==", - "dev": true, - "dependencies": { - "clone-deep": "^4.0.1", - "wildcard": "^2.0.0" - }, - "engines": { - "node": ">=10.0.0" - } - }, "node_modules/webpack-sources": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz", @@ -15591,12 +15503,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/wildcard": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz", - "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==", - "dev": true - }, "node_modules/word-wrap": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", @@ -16041,7 +15947,8 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", - "devOptional": true, + "optional": true, + "peer": true, "engines": { "node": ">=6" } diff --git a/test-site/package.json b/test-site/package.json index 87d4e9d..c6cb29a 100644 --- a/test-site/package.json +++ b/test-site/package.json @@ -10,16 +10,15 @@ "react-scripts": "5.0.1" }, "devDependencies": { - "@craco/craco": "^7.1.0", "@types/react": "^18.2.7", "@types/react-dom": "^18.2.4", "eslint-config-react-app": "file:../node_modules/eslint-config-react-app", "tailwindcss": "^3.3.2" }, "scripts": { - "start": "craco start", - "build": "craco build", - "test": "craco test" + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test" }, "browserslist": { "production": [ diff --git a/test-site/src/index.tsx b/test-site/src/index.tsx index 1afcd2f..5d7770e 100644 --- a/test-site/src/index.tsx +++ b/test-site/src/index.tsx @@ -6,3 +6,11 @@ const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render(); + +// //For testing purposes -- React 16/17 +// import { render } from 'react-dom'; +// import App from "./App"; +// import "./index.css"; + +// const container = document.getElementById('root'); +// render(, container); diff --git a/test-site/tsconfig.json b/test-site/tsconfig.json index 3cf966d..741a83c 100644 --- a/test-site/tsconfig.json +++ b/test-site/tsconfig.json @@ -1,4 +1,7 @@ { "extends": "../tsconfig.json", + "compilerOptions": { + "jsx": "react-jsx" + }, "include": ["src"] } diff --git a/tsconfig.cjs.json b/tsconfig.cjs.json deleted file mode 100644 index fb27c3b..0000000 --- a/tsconfig.cjs.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "target": "ESNext", - "module": "commonjs", - "outDir": "lib/commonjs" - } -} diff --git a/tsconfig.esm.json b/tsconfig.esm.json deleted file mode 100644 index cccb9c9..0000000 --- a/tsconfig.esm.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "target": "ESNext", - "module": "ESNext", - "outDir": "lib/esm" - } -} diff --git a/tsconfig.json b/tsconfig.json index b92cd73..406889a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,7 +10,17 @@ "declaration": true, "declarationMap": true, "sourceMap": true, - "jsx": "react-jsx", + /** + * Use "react" instead of "react-jsx" to be compatible with lower React versions (e.g. 16) + * + * "react/jsx-runtime" have explicit "exports" field in React 18 but not in React 16/17 when + * it was backported. This would require our SDK to provide two bundles, one for React 18 and + * one for legacy versions that require us to define explicit paths + * (https://github.com/facebook/react/issues/20235). + * + * by using "react", we avoid the syntactic sugar JSX and output code directly using "React.createElement" + */ + "jsx": "react", "resolveJsonModule": true }, "include": ["src"] diff --git a/update-lib-package.js b/update-lib-package.js deleted file mode 100644 index 28ae549..0000000 --- a/update-lib-package.js +++ /dev/null @@ -1,39 +0,0 @@ -// eslint-disable-next-line @typescript-eslint/no-var-requires -const fs = require('fs'); - -const packagePathToType = { - "./lib/esm/package.json": "module", - "./lib/commonjs/package.json": "commonjs", -} - -Object.entries(packagePathToType).forEach(([packageJsonPath, type]) => { - // Read the package.json file - fs.readFile(packageJsonPath, 'utf8', (err, data) => { - if (err) { - console.error(`Error reading package.json: ${err}`); - return; - } - - try { - // Parse the package.json content - const packageJson = JSON.parse(data); - - // Add "type: module" or "type: commonjs" to the package.json - packageJson.type = type; - - // update css bundle path to point to the css file within the esm or commonjs lib folder - packageJson.exports["./bundle.css"] = "./bundle.css" - - // Write the updated package.json back to the file - fs.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2), 'utf8', (err) => { - if (err) { - console.error(`Error writing package.json: ${err}`); - return; - } - console.log(`Added "type: ${type}" to ${packageJsonPath}`); - }); - } catch (err) { - console.error(`Error parsing package.json: ${err}`); - } - }); -})