support esm, cjs both

integrations/react/esbuild.config.js

@@ -7,11 +7,27 @@ Promise.all([
   context({
     ...config({
       entryPoints: ["./src/**/*"],
+      outdir: "dist/cjs",
+    }),
+    bundle: false,
+    sourcemap: false,
+    external: undefined,
+    format: "cjs",
+  }).then((ctx) =>
+    watch ? ctx.watch() : ctx.rebuild().then(() => ctx.dispose()),
+  ),
+  context({
+    ...config({
+      entryPoints: ["./src/**/*"],
+      outdir: "dist/esm",
     }),
     bundle: false,
-    format: "esm",
     sourcemap: false,
     external: undefined,
+    format: "esm",
+    outExtension: {
+      ".js": ".mjs",
+    },
   }).then((ctx) =>
     watch ? ctx.watch() : ctx.rebuild().then(() => ctx.dispose()),
   ),

integrations/react/package.json

@@ -9,29 +9,32 @@
   "license": "MIT",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "types": "./dist/esm/index.d.ts",
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/esm/index.mjs"
     },
     "./stable": {
-      "types": "./dist/stable/index.d.ts",
-      "import": "./dist/stable/index.js"
+      "types": "./dist/esm/stable/index.d.ts",
+      "require": "./dist/cjs/stable/index.js",
+      "import": "./dist/esm/stable/index.mjs"
     },
     "./future": {
-      "types": "./dist/future/index.d.ts",
-      "import": "./dist/future/index.js"
+      "types": "./dist/esm/future/index.d.ts",
+      "require": "./dist/cjs/future/index.js",
+      "import": "./dist/esm/future/index.mjs"
     }
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.mjs",
+  "types": "./dist/esm/index.d.ts",
   "files": [
     "dist",
     "src",
     "README.md"
   ],
   "scripts": {
     "build": "yarn build:js && yarn build:dts",
-    "build:dts": "tsc --emitDeclarationOnly",
+    "build:dts": "tsc --emitDeclarationOnly --outDir dist/esm && tsc --emitDeclarationOnly --outDir dist/cjs",
     "build:js": "node ./esbuild.config.js",
     "clean": "rimraf dist",
     "dev": "yarn build:js --watch && yarn build:dts --watch",
@@ -48,6 +51,7 @@
     "@stackflow/esbuild-config": "^1.0.3",
     "@types/react": "^18.3.3",
     "esbuild": "^0.23.0",
+    "esbuild-plugin-file-path-extensions": "^2.1.2",
     "react": "^18.3.1",
     "rimraf": "^3.0.2",
     "typescript": "^5.5.3"

integrations/react/src/future/Actions.ts

@@ -0,0 +1,29 @@
+import type {
+  InferActivityParams,
+  RegisteredActivityParamTypes,
+} from "@stackflow/config";
+
+export type Actions = {
+  push<K extends Extract<keyof RegisteredActivityParamTypes, string>>(
+    activityName: K,
+    activityParams: InferActivityParams<K>,
+    options?: {
+      animate?: boolean;
+    },
+  ): {
+    activityId: string;
+  };
+  replace<K extends Extract<keyof RegisteredActivityParamTypes, string>>(
+    activityName: K,
+    activityParams: InferActivityParams<K>,
+    options?: {
+      animate?: boolean;
+      activityId?: string;
+    },
+  ): {
+    activityId: string;
+  };
+  pop(): void;
+  pop(options: { animate?: boolean }): void;
+  pop(count: number, options?: { animate?: boolean }): void;
+};

integrations/react/src/future/StepActions.ts

@@ -0,0 +1,5 @@
+export type StepActions<ActivityParams> = {
+  pushStep: (params: ActivityParams, options?: {}) => void;
+  replaceStep: (params: ActivityParams, options?: {}) => void;
+  popStep: (options?: {}) => void;
+};

integrations/react/src/future/index.ts

@@ -1,12 +1,23 @@
-export * from "../__internal__/activity/useActivity";
-export * from "../__internal__/stack/useStack";
+/**
+ * Stack
+ */
+export * from "./stack";
+
+/**
+ * Types
+ */
 export * from "../__internal__/StackflowReactPlugin";
 export * from "./ActivityComponentType";
 export * from "./StackComponentType";
-export * from "./stack";
-export * from "./makeActions";
-export * from "./makeStepActions";
-export * from "./loader/useLoaderData";
+export * from "./Actions";
+export * from "./StepActions";
+
+/**
+ * Hooks
+ */
+export * from "../__internal__/stack/useStack";
+export * from "../__internal__/activity/useActivity";
 export * from "./useActivityParams";
+export * from "./loader/useLoaderData";
 export * from "./useFlow";
 export * from "./useStepFlow";

integrations/react/src/future/makeActions.ts

@@ -1,9 +1,6 @@
-import type {
-  InferActivityParams,
-  RegisteredActivityParamTypes,
-} from "@stackflow/config";
 import type { CoreStore } from "@stackflow/core";
 import { makeActivityId } from "../__internal__/activity";
+import type { Actions } from "./Actions";
 
 function parseActionOptions(options?: { animate?: boolean }) {
   if (!options) {
@@ -19,31 +16,6 @@ function parseActionOptions(options?: { animate?: boolean }) {
   return { skipActiveState: !options.animate };
 }
 
-export type Actions = {
-  push<K extends Extract<keyof RegisteredActivityParamTypes, string>>(
-    activityName: K,
-    activityParams: InferActivityParams<K>,
-    options?: {
-      animate?: boolean;
-    },
-  ): {
-    activityId: string;
-  };
-  replace<K extends Extract<keyof RegisteredActivityParamTypes, string>>(
-    activityName: K,
-    activityParams: InferActivityParams<K>,
-    options?: {
-      animate?: boolean;
-      activityId?: string;
-    },
-  ): {
-    activityId: string;
-  };
-  pop(): void;
-  pop(options: { animate?: boolean }): void;
-  pop(count: number, options?: { animate?: boolean }): void;
-};
-
 export function makeActions(
   getCoreActions: () => CoreStore["actions"] | undefined,
 ): Actions {

integrations/react/src/future/makeStepActions.ts

@@ -1,12 +1,7 @@
 import type { ActivityBaseParams } from "@stackflow/config";
 import type { CoreStore } from "@stackflow/core";
 import { makeStepId } from "../__internal__/activity";
-
-export type StepActions<ActivityParams> = {
-  pushStep: (params: ActivityParams, options?: {}) => void;
-  replaceStep: (params: ActivityParams, options?: {}) => void;
-  popStep: (options?: {}) => void;
-};
+import type { StepActions } from "./StepActions";
 
 export function makeStepActions(
   getCoreActions: () => CoreStore["actions"] | undefined,

integrations/react/src/future/stack.tsx

@@ -16,10 +16,12 @@ import { CoreProvider } from "../__internal__/core";
 import { PluginsProvider } from "../__internal__/plugins";
 import { isBrowser, makeRef } from "../__internal__/utils";
 import type { ActivityComponentType, StackflowReactPlugin } from "../stable";
+import type { Actions } from "./Actions";
 import type { StackComponentType } from "./StackComponentType";
+import type { StepActions } from "./StepActions";
 import { loaderPlugin } from "./loader";
-import { type Actions, makeActions } from "./makeActions";
-import { type StepActions, makeStepActions } from "./makeStepActions";
+import { makeActions } from "./makeActions";
+import { makeStepActions } from "./makeStepActions";
 
 export type StackflowPluginsEntry =
   | StackflowReactPlugin<never>

integrations/react/src/future/useFlow.ts

@@ -1,5 +1,6 @@
 import { useCoreActions } from "../__internal__/core";
-import { type Actions, makeActions } from "./makeActions";
+import type { Actions } from "./Actions";
+import { makeActions } from "./makeActions";
 
 export type FlowOutput = {
   useFlow: () => Actions;

integrations/react/src/future/useStepFlow.ts

@@ -3,7 +3,8 @@ import type {
   RegisteredActivityParamTypes,
 } from "@stackflow/config";
 import { useCoreActions } from "../__internal__/core";
-import { type StepActions, makeStepActions } from "./makeStepActions";
+import type { StepActions } from "./StepActions";
+import { makeStepActions } from "./makeStepActions";
 
 export function useStepFlow<
   ActivityName extends Extract<keyof RegisteredActivityParamTypes, string>,

yarn.lock

@@ -2621,6 +2621,7 @@ __metadata:
     "@stackflow/esbuild-config": "npm:^1.0.3"
     "@types/react": "npm:^18.3.3"
     esbuild: "npm:^0.23.0"
+    esbuild-plugin-file-path-extensions: "npm:^2.1.2"
     history: "npm:^5.3.0"
     react: "npm:^18.3.1"
     react-fast-compare: "npm:^3.2.2"
@@ -4759,6 +4760,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-plugin-file-path-extensions@npm:^2.1.2":
+  version: 2.1.2
+  resolution: "esbuild-plugin-file-path-extensions@npm:2.1.2"
+  checksum: 10/01e00d5bb35d719ebe9d1b2526278923e5790f7c3d78c9b0af05af17408be076c914135eef43a3e6021c07f715214d9c848d93c648f4d4cb3fa0605d83d2b55a
+  languageName: node
+  linkType: hard
+
 "esbuild@npm:^0.21.3, esbuild@npm:esbuild@~0.17.6 || ~0.18.0 || ~0.19.0 || ~0.20.0 || ~0.21.0":
   version: 0.21.5
   resolution: "esbuild@npm:0.21.5"