feat: new build settings

[bang9]

Changelogs:

• Changes have been made to export modules using the sub-path 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:

  - 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

{
  "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"
      }
  }
}

git rebase --onto main HEAD~13

[liamcho]

what is this for?

[bang9]

I added this to resolve the Storybook error. It serves the purpose of modifying certain transpile options in Babel, resulting in some differences in the generated code.

But we did not use the 'loose' option, so I removed it, and when there are plugins included in preset-env but not explicitly added, it can cause these errors. I've found and applied these changes to resolve the issue.
babel/babel#11622 (comment)

66b488a

[HoonBaek]

Super awesome job! Thank you @bang9 I really appreciate this!

[liamcho]

LGTM, awesome job @bang9 !

[bang9]

I'll merge it after testing in the sample environment.