Ensures CJS/ESM bundle is compatible with Alpha (sonic), pagesJS (vite), and CRA (webpack)

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`.
 

api-extractor.json

@@ -77,7 +77,7 @@
      * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
      * DEFAULT VALUE: "<projectFolder>/tsconfig.json"
      */
-    "tsconfigFilePath": "<projectFolder>/tsconfig.esm.json"
+    "tsconfigFilePath": "<projectFolder>/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:

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",
@@ -80,6 +80,8 @@
     "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"

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",
+    }),
+  ],
+});

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

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.