feat: new build settings (#820)

Changelogs:

- Changes have been made to export modules using the [sub-path
exports](https://nodejs.org/api/packages.html#subpath-exports) in the
package.json.
If you were using the package in a Native CJS environment, this might
have an impact.
You can migrate the path as follows:
  ```diff
- const ChannelList = require('@sendbird/uikit-react/cjs/ChannelList');
  + const ChannelList = require('@sendbird/uikit-react/ChannelList');
  ```
 - TypeScript support has been improved.
Now, precise types based on the source code are used.


---

- Fix type errors in source.
- Exports auto generated .d.ts files instead of manual `index.d.ts` file

### Before
1. run rollup
    1. read inputs (module entries)
    2. generate css and js files to
        - css: `/dist/dist/index.css`, `/dist/dist/cjs/dist/index.css`
        - js: `/dist` and `/dist/cjs`
    3. copy `README.md`, `LICESNSE`, `CHANGELOG.md`, `index.d.ts`
 2. run `scripts/post_build.js`
     1. append version to `index.d.ts`
     2. package.json: add dependencies and copy to `dist/package.json`

### After
1. run rollup
    1. read inputs (module entries)
    2. generate css and js files to
        - css: `/dist/dist/index.css`, `/dist/dist/cjs/dist/index.css`
        - js: `/dist` and `/dist/cjs`
    3. copy `README.md`, `LICESNSE`, `CHANGELOG.md`
 2. run `scripts/post_build.js`
1. package.json: add dependencies, exports, typesVersions and copy to
`dist/package.json`
     2. remove unused css files in `/dist/dist/cjs/dist`
     3. build `.d.ts` files

---

The biggest difference is that now we use the exports supported in
package.json.
You can find more information here:
https://nodejs.org/api/packages.html#subpath-exports

This may result in breaking changes because you can only use modules
that are specified in exports.
For example, the `@sendbird/chat/cjs/index.js` file actually exists, but
it is not exported in package.json, so you cannot use it in a strict
environment.

The advantages of this approach are as follows:
For paths that we directly specify in exports, files are assigned
accordingly in the esm/cjs environment.
Previously, for individually exported entries (modules) other than the
main entry, we had to specify the path directly depending on the module
environment.

For example:
> #### Before
>esm: @sendbird/chat (package.json > module: "index.js")
cjs: @sendbird/chat (package.json > main: "cjs/index.js")
>
>esm: @sendbird/chat/ChannelList (nothing in package.json)
cjs: @sendbird/chat/cjs/ChannelList (nothing in package.json)
>
> #### After
>esm: @sendbird/chat (package.json > exports: { ".": "index.js" } )
cjs: @sendbird/chat (package.json > exports: { ".": "cjs/index.js" } )
>
>esm: @sendbird/chat/ChannelList (package.json > exports: {
"./ChannelList": "ChannelList/index.js" } )
cjs: @sendbird/chat/ChannelList (package.json > exports: {
"./ChannelList": "cjs/ChannelList/index.js" } )

---

package.json example
```json
{
  "exports": {
      "./package.json": "./package.json",
      "./dist/index.css": "./dist/index.css",
      ".": {
        "types": "./types/index.d.ts",
        "require": "./cjs/index.js",
        "import": "./index.js",
        "default": "./index.js"
      },
      "./App": {
        "types": "./types/modules/App/index.d.ts",
        "require": "./cjs/App.js",
        "import": "./App.js",
        "default": "./App.js"
      },
      "./SendbirdProvider": {
        "types": "./types/lib/Sendbird.d.ts",
        "require": "./cjs/SendbirdProvider.js",
        "import": "./SendbirdProvider.js",
        "default": "./SendbirdProvider.js"
      },
      "./sendbirdSelectors": {
        "types": "./types/lib/selectors.d.ts",
        "require": "./cjs/sendbirdSelectors.js",
        "import": "./sendbirdSelectors.js",
        "default": "./sendbirdSelectors.js"
      },
      "./VoiceRecorder/context": {
        "types": "./types/hooks/VoiceRecorder/index.d.ts",
        "require": "./cjs/VoiceRecorder/context.js",
        "import": "./VoiceRecorder/context.js",
        "default": "./VoiceRecorder/context.js"
      },
      "./VoiceRecorder/useVoiceRecorder": {
        "types": "./types/hooks/VoiceRecorder/useVoiceRecorder.d.ts",
        "require": "./cjs/VoiceRecorder/useVoiceRecorder.js",
        "import": "./VoiceRecorder/useVoiceRecorder.js",
        "default": "./VoiceRecorder/useVoiceRecorder.js"
      }
  }
}
```

```sh
git rebase --onto main HEAD~13
```

Author: bang9

.circleci/config.yml

@@ -87,7 +87,7 @@ jobs:
           no_output_timeout: 15m
           name: Run test
           command: |
-            yarn test
+            yarn test --forceExit --runInBand
       - store_artifacts:
           path: coverage
           destination: coverage

README.md

@@ -13,8 +13,6 @@ We are introducing a new version of the Sendbird Chat UIKit. Version 3 features
 or if you're using yarn
 `yarn add @sendbird/uikit-react`
 
-For typescript projects, add `node_modules/@sendbird/uikit-react/index.d.ts` to your `include` section in tsconfig file to get type definitions
-
 ## Getting Started
 
 With Sendbird UI Kit React, we export these components:
@@ -122,13 +120,6 @@ yarn run lint
 ```
 * .eslintrc.json lints ts files and .eslintrc.js lints js files
 
-
-### Typescript
-
-* We are trying to progressively move our source code to typescript - which means older JS code and newly written TS code will coxist while we migrate older JS code to TS
-* .eslintrc.json lints ts files and .eslintrc.js lints js files
-* Type definition file can be `scripts/index.d.ts` which will be copied to `/dist` directory
-
 ### Webpack 5
 
 Webpack 5 removes stream and buffer componets from default polyfill
@@ -161,7 +152,6 @@ To read more: https://webpack.js.org/configuration/resolve/#resolvefallback
     'NewComponent/SubComponent': 'location/of/NewComponent/SubComponent',
     ```
     - This component can be imported by the consumer as: `import SubComponent from '@sendbird/uikit-react/NewComponent/SubComponent';`
-4. Add type definitions to `scripts/index.d.ts`.
 
 ### Scaffolding New Components
 

babel.config.js

@@ -4,5 +4,10 @@ module.exports = {
     '@babel/preset-react',
     '@babel/preset-typescript',
   ],
-  plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-syntax-export-default-from'],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-syntax-export-default-from',
+    '@babel/plugin-proposal-private-methods',
+    '@babel/plugin-proposal-private-property-in-object',
+  ],
 };

package.json

@@ -53,8 +53,7 @@
     "stylelint": "stylelint 'src/**'",
     "generate-component": "plop",
     "deploy-storybook": "storybook-to-ghpages",
-    "inspect": "yarn test; yarn lint;",
-    "bundle": "dts-bundle-generator -o ./dist/my.d.ts ./src/index.d.ts"
+    "inspect": "yarn test; yarn lint;"
   },
   "repository": {
     "type": "git",
@@ -78,27 +77,27 @@
   },
   "homepage": "https://sendbird.com",
   "devDependencies": {
-    "@babel/core": "^7.8.4",
-    "@babel/eslint-parser": "^7.21.8",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-export-default-from": "^7.8.3",
-    "@babel/preset-env": "^7.8.3",
-    "@babel/preset-react": "^7.8.3",
-    "@babel/preset-typescript": "^7.10.4",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-eslint": "^8.0.1",
-    "@rollup/plugin-node-resolve": "^7.1.3",
-    "@rollup/plugin-replace": "^2.4.2",
-    "@rollup/plugin-typescript": "^8.2.1",
+    "@babel/core": "^7.23.2",
+    "@babel/eslint-parser": "^7.22.15",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-export-default-from": "^7.22.17",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-eslint": "^9.0.5",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.4",
+    "@rollup/plugin-typescript": "^11.1.5",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-docs": "^6.5.10",
     "@storybook/addon-links": "^6.5.10",
     "@storybook/addons": "^6.5.10",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.5.10",
     "@storybook/storybook-deployer": "^2.8.12",
-    "@svgr/rollup": "^5.5.0",
+    "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^5.1.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
@@ -111,7 +110,6 @@
     "browserslist": "^4.14.5",
     "caniuse-lite": "^1.0.30001148",
     "css-loader": "^3.4.2",
-    "dts-bundle-generator": "^6.5.0",
     "eslint": "^8.40.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -132,19 +130,18 @@
     "postcss": "^8.3.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^2.53.1",
+    "rollup": "^4.1.4",
     "rollup-plugin-analyzer": "^4.0.0",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-polyfill-node": "^0.10.1",
-    "rollup-plugin-postcss": "^4.0.0",
-    "rollup-plugin-scss": "^3.0.0",
-    "rollup-plugin-visualizer": "^5.9.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-polyfill-node": "^0.12.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-scss": "^4.0.0",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "rollup-plugin-visualizer": "^5.9.2",
     "sass": "^1.55.0",
     "sass-loader": "^10.2.0",
-    "style-loader": "^1.1.3",
     "stylelint": "^13.0.0",
     "stylelint-config-sass-guidelines": "^7.0.0",
-    "ts-loader": "^7.0.5",
     "ts-pattern": "^4.2.2",
     "tslib": "^2.0.0",
     "typescript": "^4.7.4"

rollup.config.js

@@ -0,0 +1,111 @@
+// plugins
+import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import svgr from "@svgr/rollup";
+import scss from "rollup-plugin-scss";
+import postcss from "rollup-plugin-postcss";
+import replace from "@rollup/plugin-replace";
+import autoprefixer from "autoprefixer";
+import copy from "rollup-plugin-copy";
+import nodePolyfills from "rollup-plugin-polyfill-node";
+import {visualizer} from "rollup-plugin-visualizer";
+import ts2 from "rollup-plugin-typescript2"
+
+// config from package.json
+import pkg from "./package.json" assert {type: "json"};
+import inputs from "./rollup.module-exports.mjs";
+
+const APP_VERSION_STRING = "__react_dev_mode__";
+
+export default {
+  // To bundle split
+  input: inputs,
+  output: [
+    {
+      dir: "./dist",
+      chunkFileNames: 'chunks/bundle-[hash].js',
+      format: "esm",
+      sourcemap: true,
+    },
+    {
+      dir: "./dist/cjs",
+      chunkFileNames: 'chunks/bundle-[hash].js',
+      format: "cjs",
+      sourcemap: true,
+    },
+  ],
+  external: [
+    "@sendbird/chat",
+    "@sendbird/chat/groupChannel",
+    "@sendbird/chat/openChannel",
+    "@sendbird/chat/message",
+    "@sendbird/uikit-tools",
+    "react",
+    "react-dom",
+    "css-vars-ponyfill",
+    "date-fns",
+    "dompurify",
+    // todo@v4: remove this
+    // we do not add ts-pattern as dep to avoid conflict with client base
+    // 'ts-pattern',
+  ],
+  plugins: [
+    postcss({
+      preprocessor: (content, id) =>
+        new Promise((resolvecss) => {
+          const result = scss.renderSync({ file: id });
+          resolvecss({ code: result.css.toString() });
+        }),
+      plugins: [autoprefixer],
+      sourceMap: true,
+      extract: "dist/index.css",
+      extensions: [".sass", ".scss", ".css"],
+    }),
+    replace({
+      preventAssignment: false,
+      exclude: "node_modules/**",
+      [APP_VERSION_STRING]: pkg.version,
+    }),
+    ts2({
+      tsconfig: 'tsconfig.json',
+      tsconfigOverride: {
+        compilerOptions:{
+          declaration: false,
+        }
+      }
+    }),
+    svgr(),
+    resolve({
+      preferBuiltins: true,
+    }),
+    commonjs(),
+    nodePolyfills({
+      include: ["buffer", "stream"],
+    }),
+    copy({
+      verbose: true,
+      targets: [
+        {
+          src: "./README.md",
+          dest: "dist",
+        },
+        {
+          src: "./LICENSE",
+          dest: "dist",
+        },
+        {
+          src: "./CHANGELOG.md",
+          dest: "dist",
+        },
+      ],
+    }),
+    visualizer({
+      filename: "bundle-analysis.json",
+      gzipSize: true,
+      template: "raw-data",
+      brotliSize: false,
+    }),
+    // Uncomment the below line, if you want to see box-graph of bundle size
+    // visualizer(),
+  ],
+};