@integration-app/react

Releasing Package

To release a new version of a package (@integration-app/sdk, @integration-app/ui, @integration-app/react), do the following:

• Go to the package and type npm version -- patch (or npm version -- minor or npm version -- major) to bump the version.
• Create a PR with the changes.
• Merge the PR.
• Run a Github Action to publish a package.

Rollup Configuration

To see the complete configuration, refer to the rollup.config.mjs and rollup.dts.config.mjs files. Although these files are self-explanatory, here's some additional information:

In rollup.config.mjs, we set {external: [/node_modules/]} to exclude our dependencies from being bundled.

Bundle and DTS File Generation

We encountered issues with rollup-plugin-dts generating incorrect DTS files when used in the same configuration as @rollup/plugin-typescript. To resolve this, we use two Rollup configurations:

• rollup.config.mjs for bundle generation
• rollup.dts.config.mjs for DTS file generation.

Externals

We set external dependencies in rollup.config.mjs:

• {external: [/node_modules/]} to exclude all node_modules.
• @integration-app/sdk to prevent Rollup from bundling the @integration-app/sdk package during local development, when it is used via a symlink to the SDK in the root folder.
• react and react/jsx-runtime are excluded to avoid unresolved dependency errors, as React is a peer dependency.

Bundle and DTS File Generation Workflow

When using rollup-plugin-dts and @rollup/plugin-typescript in the same configuration, we experienced issues with generating incorrect DTS files. To solve this, we use two Rollup configurations:

• rollup.config.mjs for generating bundles
• rollup.dts.config.mjs for generating DTS files.

Build

For local build, the following steps are taken:

• Clean the /dist folder.
• Install local @integration-app/sdk pointed to sdk folder
• Remove react and react-dom packages from node_modules folder
  • We should do it to allow out package work in console, engine and other local projects
• Rollup with rollup.config.mjs configuration generates bundle files and basic DTS files, which are placed in the dist/dts folder.
• Rollup with rollup.dts.config.mjs configuration uses the basic DTS files to generate *.d.ts files for each bundle.

Development

During development, the following steps are taken:

• Run build to generate bundle and DTS files.
  • If not, Rollup with rollup.dts.config.mjs in watch mode fails due to missing DTS files (race condition).
• Concurrently run two Rollup processes in watch mode:
  • Rollup with rollup.config.mjs configuration to generate bundle files and basic DTS files.
  • Rollup with rollup.dts.config.mjs configuration to generate DTS files for each bundle.

Publish via GitHub

During publishing via GitHub, the following steps are taken:

• Clean the /dist folder.
• Install @integration-app/sdk@latest package
• Rollup with rollup.config.mjs configuration generates bundle files and basic DTS files, which are placed in the dist/dts folder.
• Rollup with rollup.dts.config.mjs configuration uses the basic DTS files to generate *.d.ts files for each bundle.

The build:publish command is used in GitHub Actions to ensure that the package uses the latest @integration-app/sdk package.

Package.json exports

{
  "exports": {
    "types": "./dist/index.d.ts",       // TypeScript typings for NodeNext modules
    "require": "./dist/index.js",       // used for require() in Node 12+
    "import": "./dist/index.module.mjs" // ESM bundle
  },
  "types": "./dist/index.d.ts",         // TypeScript typings
  "main": "./dist/index.js",            // CommonJS bundle
  "module": "./dist/index.module.mjs",  // ESM bundle
  "unpkg": "./dist/index.umd.js",       // UMD bundle
}