fix(tscjs): fix typescript in cjs builds by using a separate type imp…

…ort (#2935)

Closes #2356

Taking this PR from another project as inspiration:
openapi-ts/openapi-typescript#1360

This should fix ariakit-react typing in Typescript projects using
NodeNext module/moduleresolution by explicitly pointing at a "cts" type
definition file. It should not bother existing use cases but I left
index.d.ts in the cjs module just in case.

.changeset/2935-violet-wasps-sleep.md

@@ -0,0 +1,8 @@
+---
+"@ariakit/core": patch
+"@ariakit/react": patch
+"@ariakit/react-core": patch
+"@ariakit/test": patch
+---
+
+Fixed TypeScript declaration files in CommonJS projects using `NodeNext` for `moduleResolution`.

packages/ariakit-react-core/src/utils/store.tsx

@@ -142,6 +142,7 @@ export function useStoreProps<
     if (value === undefined) return;
     canSyncValue.current = true;
     return sync(store, [key], () => {
+      if (value === undefined) return;
       if (!canSyncValue.current) return;
       store.setState(key, value);
     });

packages/ariakit-react-core/src/utils/system.tsx

@@ -57,7 +57,7 @@ export function memo<P, T extends React.FC<P>>(
  * <Component customProp render={<button />} />
  */
 export function createComponent<O extends Options>(
-  render: (props: Props<O>) => React.ReactNode,
+  render: (props: Props<O>) => React.ReactElement | null,
 ) {
   const Role = (props: Props<O>, ref: React.Ref<any>) =>
     render({ ref, ...props });
@@ -83,7 +83,7 @@ export function createComponent<O extends Options>(
  * <Component customProp render={<button />} />
  */
 export function createMemoComponent<O extends Options>(
-  render: (props: Props<O>) => React.ReactNode,
+  render: (props: Props<O>) => React.ReactElement | null,
 ) {
   const Role = createComponent(render);
   return React.memo(Role) as unknown as typeof Role;

scripts/build/build.js

@@ -1,5 +1,6 @@
+import { cpSync } from "fs";
 import spawn from "cross-spawn";
-import fse from "fs-extra";
+import { glob } from "glob";
 import { build } from "tsup";
 import {
   cleanBuild,
@@ -46,21 +47,33 @@ spawn.sync(
   { stdio: "inherit" },
 );
 
-fse.copySync(esmDir, cjsDir);
+cpSync(esmDir, cjsDir, { recursive: true });
+
+const declarationFiles = glob.sync("**/*.d.ts", {
+  cwd: cjsDir,
+  absolute: true,
+});
+
+for (const file of declarationFiles) {
+  const ctsFile = file.replace(/\.d\.ts$/, ".d.cts");
+  cpSync(file, ctsFile);
+}
 
 const builds = /** @type {const} */ ([
   { format: "esm", outDir: esmDir },
   { format: "cjs", outDir: cjsDir },
 ]);
 
-for (const { format, outDir } of builds) {
-  await build({
-    entry,
-    format,
-    outDir,
-    splitting: true,
-    esbuildOptions(options) {
-      options.chunkNames = "__chunks/[hash]";
-    },
-  });
-}
+await Promise.all(
+  builds.map(({ format, outDir }) =>
+    build({
+      entry,
+      format,
+      outDir,
+      splitting: true,
+      esbuildOptions(options) {
+        options.chunkNames = "__chunks/[hash]";
+      },
+    }),
+  ),
+);

scripts/build/utils.js

@@ -46,7 +46,10 @@ export function getPackageJson(rootPath, prod = false) {
     path = removeExt(path).replace(sourcePath, "");
     return {
       import: `./${join(esmDir, path)}.js`,
-      require: `./${join(cjsDir, path)}.cjs`,
+      require: {
+        types: `./${join(cjsDir, path)}.d.cts`,
+        default: `./${join(cjsDir, path)}.cjs`,
+      },
     };
   };
 

tsconfig.json

@@ -6,7 +6,6 @@
     "jsx": "react-jsx",
     "types": ["node", "vitest/globals"],
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "incremental": true,
     "noEmit": true,
     "skipLibCheck": true,
     "allowJs": true,
@@ -22,8 +21,7 @@
     "noUnusedParameters": true,
     "stripInternal": true,
     "noUncheckedIndexedAccess": true,
-    "verbatimModuleSyntax": true,
-    "isolatedModules": true
+    "verbatimModuleSyntax": true
   },
   "include": [
     "**/*.ts",