Fix React embed ESM packaging for Vite 8

packages/constants/package.json

@@ -6,12 +6,23 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "main": "lib/index.js",
+  "main": "./lib/index.js",
+  "module": "./lib/esm/index.mjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/esm/index.mjs",
+      "require": "./lib/index.js",
+      "default": "./lib/esm/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
   "directories": {
     "lib": "lib"
   },
   "scripts": {
-    "build": "tsc --project tsconfig.build.json",
+    "build": "tsc --project tsconfig.build.json && vite build",
     "format": "eslint --ext .ts,.tsx src --fix",
     "lint": "eslint --ext .ts,.tsx src",
     "test": "jest",
@@ -32,7 +43,8 @@
     "eslint": "^8.12.0",
     "jest": "^29.7.0",
     "ts-jest": "^29.1.1",
-    "typescript": "^4.6.3"
+    "typescript": "^4.6.3",
+    "vite": "^6.4.2"
   },
   "jest": {
     "cacheDirectory": "./.jest-cache",

packages/constants/src/index.ts

@@ -1,7 +1,7 @@
 export { default as CustomQuestionMessage } from './custom-question-message';
 export { default as AnalyticsEventType } from './analytics-event-type';
 export { default as WebEmbedMessage } from './web-embed-message';
-export { default as AnswerSemanticType } from './semantic-type';
+export type { default as AnswerSemanticType } from './semantic-type';
 export * from './flow';
 export * from './core';
 export * from './embed-events';

packages/constants/vite.config.mts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: 'src/index.ts',
+      formats: ['es'],
+      fileName: () => 'index.mjs',
+    },
+    outDir: 'lib/esm',
+  },
+});

packages/embed-messaging-manager/package.json

@@ -6,12 +6,22 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
+  "main": "./lib/index.js",
+  "module": "./lib/esm/index.mjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/esm/index.mjs",
+      "require": "./lib/index.js",
+      "default": "./lib/esm/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "test": "jest",
     "coverage": "jest --coverage",
-    "build": "tsc --project tsconfig.build.json",
+    "build": "tsc --project tsconfig.build.json && vite build",
     "format": "eslint --ext .ts,.tsx src --fix",
     "lint": "eslint --ext .ts,.tsx src",
     "pack": "yarn pack",
@@ -31,7 +41,8 @@
     "eslint": "^8.12.0",
     "jest": "^29.7.0",
     "ts-jest": "^29.1.1",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "vite": "^6.4.2"
   },
   "jest": {
     "cacheDirectory": "./.jest-cache",

packages/embed-messaging-manager/vite.config.mts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: 'src/index.ts',
+      formats: ['es'],
+      fileName: () => 'index.mjs',
+    },
+    outDir: 'lib/esm',
+  },
+});

packages/react-embed/README.md

@@ -3,22 +3,36 @@
 Embed [Formsort](https://formsort.com) flows within react components.
 
 This is a handy wrapper around [@formsort/web-embed-api](https://github.com/formsort/oss/tree/master/packages/web-embed-api).
+The package publishes both ESM and CommonJS entrypoints.
 
 **Important note:** This package is intended for use in React web applications. If you're looking to embed Formsort flows in React Native applications, please see [React native embed guide](./ReactNativeEmbed.md).
 
 ## Installation
 
 Add `@formsort/react-embed` to your project by executing `yarn add @formsort/react-embed` or `npm install @formsort/react-embed`.
 
+## Upgrading
+
+Documented root imports continue to work for both ESM and CommonJS consumers:
+
+```tsx
+import EmbedFlow from '@formsort/react-embed';
+```
+
+```js
+const EmbedFlow = require('@formsort/react-embed').default;
+```
+
+This is a minor upgrade because the package output and React lifecycle behavior were modernized. `EmbedFlow` now reloads when load props such as `clientLabel`, `flowLabel`, `variantLabel`, `queryParams`, or `embedConfig` change. Deep imports from internal `lib/*` paths are not part of the public API and are not guaranteed.
+
 ## Usage
 
 Here's an example of basic usage:
 
 ```tsx
-import React from 'react';
 import EmbedFlow from '@formsort/react-embed';
 
-const EmbedFlowExample: React.FunctionComponent = () => (
+const EmbedFlowExample = () => (
   <div>
     <EmbedFlow
       clientLabel="formsort"
@@ -37,7 +51,7 @@ const EmbedFlowExample: React.FunctionComponent = () => (
 
 ### Events
 
-You can add event listeners to flows like `Flowloaded`, `redirect` etc. See [all event listeners](https://github.com/formsort/oss/tree/master/packages/web-embed-api#event-listeners)
+You can add event listeners to flows like `FlowLoaded`, `redirect` etc. See [all event listeners](https://github.com/formsort/oss/tree/master/packages/web-embed-api#event-listeners)
 
 ### Props
 
@@ -54,25 +68,24 @@ You can add event listeners to flows like `Flowloaded`, `redirect` etc. See [all
 | onFlowClosed    | [event listener](https://github.com/formsort/oss/tree/master/packages/web-embed-api#flowclosed-answers--key-string-any---void)                                   | no       | `() => { console.log('flow closed') }`                     |
 | onFlowFinalized | [event listener](https://github.com/formsort/oss/tree/master/packages/web-embed-api#flowfinalized-answers--key-string-any---void)                                | no       | `() => { console.log('flow finalized') }`                  |
 | onStepLoaded    | [event listener](https://github.com/formsort/oss/tree/master/packages/web-embed-api#steploaded-answers--key-string-any---void)                                   | no       | `() => { console.log('step loaded') }`                     |
-| onStepCompleted | [event listener](https://github.com/formsort/oss/tree/master/packages/web-embed-api#steploaded-answers--key-string-any---void)                                   | no       | `() => { console.log('step loaded') }`                     |
-| onRedirect      | [event listener](https://github.com/formsort/oss/tree/master/packages/web-embed-api#redirect--url-string-answers--key-string-any-----cancel-boolean---undefined) | no       | `(url: string) => { console.log('redirecting to:', url) }` |
+| onStepCompleted | [event listener](https://github.com/formsort/oss/tree/master/packages/web-embed-api#steploaded-answers--key-string-any---void)                                   | no       | `() => { console.log('step completed') }`                  |
+| onRedirect      | [event listener](https://github.com/formsort/oss/tree/master/packages/web-embed-api#redirect--url-string-answers--key-string-any-----cancel-boolean---undefined) | no       | `({ url }) => { console.log('redirecting to:', url) }`     |
 | onUnauthorized  | [event listener](https://github.com/formsort/oss/tree/master/packages/web-embed-api#unauthorized---void)                                                         | no       | `() => { console.log('ID token is missing or invalid.') }` |
 
 ### Loading a specific variant revision
 
 You can use query parameters to load a specific variant revision. Don't use it if you want to show latest variant.
 
 ```tsx
-import React from 'react';
 import EmbedFlow from '@formsort/react-embed';
 
-const EmbedFlowExample: React.FunctionComponent = () => (
+const EmbedFlowExample = () => (
   <div>
     <EmbedFlow
       clientLabel="formsort"
       flowLabel="onboarding"
       variantLabel="main"
-      queryParams={['variantRevisionUuid', '<uuidv4>']}
+      queryParams={[['variantRevisionUuid', '<uuidv4>']]}
     />
   </div>
 );

packages/react-embed/package.json

@@ -2,17 +2,29 @@
   "name": "@formsort/react-embed",
   "version": "3.5.0",
   "description": "Embed formsort flows in react components",
+  "type": "module",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
+  "main": "./lib/cjs/index.cjs",
+  "module": "./lib/esm/index.js",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "import": "./lib/esm/index.js",
+      "require": "./lib/cjs/index.cjs",
+      "default": "./lib/esm/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
   "directories": {
     "example": "example"
   },
   "scripts": {
-    "build": "tsc --project tsconfig.build.json",
+    "build": "rm -rf lib && tsc --project tsconfig.build.esm.json && tsc --project tsconfig.build.cjs.json && mv lib/cjs/index.js lib/cjs/index.cjs && tsc --project tsconfig.build.types.json",
     "test": "jest",
     "format": "eslint --ext .ts,.tsx src --fix",
     "lint": "eslint --ext .ts,.tsx src",
@@ -61,7 +73,7 @@
     "@formsort/web-embed-api": "^2.10.0"
   },
   "peerDependencies": {
-    "react": ">=16.13.0, <19.0.0"
+    "react": ">=16.13.0 <20.0.0"
   },
   "jest": {
     "cacheDirectory": "./.jest-cache",