Fix types and exports of the package

.changeset/strong-otters-brush.md

@@ -0,0 +1,5 @@
+---
+"single-spa-react": patch
+---
+
+fix: types and exports of the package

.gitignore

@@ -2,5 +2,4 @@ node_modules/
 .DS_Store
 lib/
 yarn-error.log
-coverage
-parcel/
+coverage

package.json

@@ -2,34 +2,45 @@
   "name": "single-spa-react",
   "version": "5.1.4",
   "description": "Single-spa lifecycles helper for React apps",
-  "main": "lib/umd/single-spa-react.js",
+  "main": "lib/cjs/single-spa-react.cjs",
   "module": "lib/esm/single-spa-react.js",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "import": "./lib/esm/single-spa-react.js",
-      "require": "./lib/cjs/single-spa-react.cjs"
+      "import": {
+        "types": "./types/single-spa-react.d.ts",
+        "default": "./lib/esm/single-spa-react.js"
+      },
+      "require": {
+        "types": "./types/single-spa-react.d.cts",
+        "default": "./lib/cjs/single-spa-react.cjs"
+      }
     },
     "./parcel": {
-      "import": "./lib/esm/parcel.js",
-      "require": "./lib/cjs/parcel.cjs"
+      "import": {
+        "types": "./types/parcel/index.d.ts",
+        "default": "./lib/esm/parcel.js"
+      },
+      "require": {
+        "types": "./types/parcel/index.d.cts",
+        "default": "./lib/cjs/parcel.cjs"
+      }
     }
   },
+  "types": "types/single-spa-react.d.cts",
   "files": [
     "lib",
     "parcel",
-    "types/single-spa-react.d.ts",
+    "types",
     "README.md"
   ],
   "tsd": {
     "directory": "src"
   },
-  "types": "types/single-spa-react.d.ts",
   "scripts": {
     "build": "concurrently pnpm:build:*",
     "build:rollup": "rollup -c",
-    "build:types": "rimraf parcel && copyfiles -f types/parcel/index.d.ts ./parcel",
     "lint": "eslint src",
     "test": "concurrently pnpm:test:*",
     "test:browser": "cross-env BABEL_ENV=test NODE_OPTIONS=--experimental-vm-modules jest --coverage",

parcel/README.md

@@ -0,0 +1,20 @@
+# Parcel Folder
+
+## Overview
+This folder contains a `package.json` stub that redirects module resolutions, following the `package-json-redirects` strategy.
+
+## Why It's Here
+Serves as a compatibility layer for Node 10, which does not support the `exports` field in `package.json`. A separate `package.json` with `main` and `types` fields directs Node 10's resolution strategy to the appropriate files.
+
+```json
+{
+  "main": "./lib/cjs/parcel.cjs",
+  "types": "./types/parcel/index.d.cts"
+}
+```
+
+## How It Works
+When Node 10 attempts to import from this folder, it consults the `main` and `types` fields in `package.json` to locate the actual implementation and types files. This facilitates keeping those files in separate subfolders while making them accessible to older Node versions.
+
+## Reference
+For more detailed information and examples, see [this GitHub repository](https://github.com/andrewbranch/example-subpath-exports-ts-compat/tree/main/examples/node_modules/package-json-redirects).

parcel/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "../lib/cjs/parcel.cjs",
+  "types": "../types/parcel/index.d.cts"
+}

src/single-spa-react.js

@@ -48,7 +48,7 @@ const defaultOpts = {
   unmountResolves: {},
 };
 
-export default function singleSpaReact(userOpts) {
+function singleSpaReact(userOpts) {
   if (typeof userOpts !== "object") {
     throw new Error(`single-spa-react requires a configuration object`);
   }
@@ -375,3 +375,15 @@ function createSingleSpaRoot(opts) {
 
   return SingleSpaRoot;
 }
+
+/**
+ * If module is running in a CommonJS environment, a compatibility layer for node16 resolution strategy is inserted.
+ * During transpilation, Rollup correctly inserts the "exports.default", and "exports.__esModule" properties, but they are not respected by some bundlers.
+ * For more information see https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/docs/problems/CJSOnlyExportsDefault.md
+ */
+if (typeof module !== "undefined" && module.exports) {
+  module.exports = singleSpaReact;
+  module.exports.default = singleSpaReact;
+}
+
+export default singleSpaReact;

types/parcel/index.d.cts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import {
+  ParcelConfig,
+  ParcelProps,
+  Parcel as SingleSpaParcel,
+} from "single-spa";
+
+interface ParcelCompProps<ExtraProps = {}> {
+  config: ParcelConfig<ExtraProps>;
+  mountParcel?: (
+    parcelConfig: ParcelConfig,
+    parcelProps: ParcelProps & ExtraProps
+  ) => SingleSpaParcel;
+  wrapWith?: string;
+  wrapStyle?: React.CSSProperties;
+  wrapClassName?: string;
+  appendTo?: HTMLElement;
+  parcelDidMount?: () => any;
+  handleError?: (err: Error) => any;
+  [extraProp: string]: any;
+}
+
+interface ParcelState {
+  hasError: boolean;
+}
+
+declare class Parcel<ExtraProps = {}> extends React.Component<
+  ParcelCompProps<ExtraProps>,
+  ParcelState
+> {}
+
+export = Parcel;
+
+declare namespace Parcel {
+  export { ParcelCompProps, ParcelState };
+}

types/single-spa-react.d.cts

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { AppProps, CustomProps, LifeCycleFn } from "single-spa";
+
+declare const SingleSpaContext: React.Context<CustomProps & AppProps>;
+
+type DeprecatedRenderTypes =
+  | "createBlockingRoot"
+  | "unstable_createRoot"
+  | "unstable_createBlockingRoot";
+
+type LegacyRenderType = "hydrate" | "render";
+
+type RenderType = "createRoot" | "hydrateRoot" | LegacyRenderType;
+
+interface SingleSpaReactOpts<RootComponentProps> {
+  React: any;
+  ReactDOM?: {
+    [T in LegacyRenderType]?: any;
+  };
+  ReactDOMClient?: {
+    [T in RenderType]?: any;
+  };
+  rootComponent?:
+    | React.ComponentClass<RootComponentProps, any>
+    | React.FunctionComponent<RootComponentProps>;
+  loadRootComponent?: (
+    props?: RootComponentProps
+  ) => Promise<React.ElementType<typeof props>>;
+  errorBoundary?: (
+    err: Error,
+    errInfo: React.ErrorInfo,
+    props: RootComponentProps
+  ) => React.ReactElement;
+  errorBoundaryClass?: React.ComponentClass<RootComponentProps>;
+  parcelCanUpdate?: boolean;
+  suppressComponentDidCatchWarning?: boolean;
+  domElementGetter?: (props: RootComponentProps) => HTMLElement;
+  renderType?: RenderType | (() => RenderType);
+}
+
+interface ReactAppOrParcel<ExtraProps> {
+  bootstrap: LifeCycleFn<ExtraProps>;
+  mount: LifeCycleFn<ExtraProps>;
+  unmount: LifeCycleFn<ExtraProps>;
+  update?: LifeCycleFn<ExtraProps>;
+}
+
+declare function singleSpaReact<ExtraProps = {}>(
+  opts: SingleSpaReactOpts<ExtraProps & AppProps>
+): ReactAppOrParcel<ExtraProps>;
+
+export = singleSpaReact;
+
+declare namespace singleSpaReact {
+  export {
+    SingleSpaContext,
+    DeprecatedRenderTypes,
+    LegacyRenderType,
+    RenderType,
+    SingleSpaReactOpts,
+    ReactAppOrParcel,
+  };
+}