add --preserve-extensions option

src/cli.js

@@ -11,9 +11,13 @@ const cli = cac("@atomico/exports").version("1.11.0");
 
 cli.command("<...files>", "Build files")
     .option("--dist <dist>", "Destination directory")
-    .option("--main <dist>", "Nain file")
+    .option("--main <dist>", "Main file")
     .option("--watch", "watch mode")
     .option("--wrappers", "enable the wrapper generator")
+    .option(
+        "--preserve-extensions",
+        "preserve file extensions in exports, for broader ESM compatibility"
+    )
     .option("--ignore-types", "enable the wrapper generator")
     .option("--workspaces", "enable dependency merging")
     .option(
@@ -35,8 +39,10 @@ cli.command("<...files>", "Build files")
          * @param {string[]} src
          * @param {object} flags
          * @param {boolean} flags.watch
+         * @param {string} flags.dist
          * @param {string} flags.main
-         * @param {string} flags.wrappers
+         * @param {boolean} flags.wrappers
+         * @param {boolean} flags.preserveExtensions
          * @param {boolean} flags.tmp
          * @param {boolean} flags.workspaces
          * @param {boolean} flags.publish
@@ -49,6 +55,7 @@ cli.command("<...files>", "Build files")
             {
                 watch,
                 main = "index",
+                preserveExtensions,
                 wrappers,
                 dist,
                 tmp,
@@ -66,6 +73,7 @@ cli.command("<...files>", "Build files")
                     src,
                     main,
                     wrappers,
+                    preserveExtensions,
                     dist,
                     pkg: {
                         src: tmp

src/merge-exports.js

@@ -2,20 +2,22 @@ import glob from "fast-glob";
 import { createExports } from "./create-exports.js";
 import { createPublish } from "./create-publish.js";
 import { getJsonFormat, logger, read, write } from "./utils.js";
+import { extname } from "path";
 
 /**
  * @param {object} options
  * @param {string[]} options.src
  * @param {string} options.main
  * @param {string} options.dist
+ * @param {boolean} options.preserveExtensions
  * @param {boolean} options.wrappers
  * @param {boolean} options.workspaces
  * @param {boolean} [options.publish]
  * @param {boolean} [options.watch]
  * @param {boolean} [options.ignoreTypes]
  * @param {boolean} [options.centralizePackages]
  * @param {boolean} [options.centralizeWrappers]
- * @param {{src: string, snap: import("./create-exports").Pkg}} options.pkg
+ * @param {{src: string, snap: string}} options.pkg
  */
 export async function mergeExports(options) {
     logger(`getting files...`);
@@ -95,6 +97,7 @@ export async function mergeExports(options) {
         dist: options.dist,
         wrappers: options.wrappers,
         ignoreTypes: options.ignoreTypes,
+        preserveExtensions: options.preserveExtensions,
         centralizePackages: options.centralizePackages,
         centralizeWrappers: options.centralizeWrappers,
     });
@@ -112,6 +115,30 @@ export async function mergeExports(options) {
         logger(`${result.wrappers.length} wrappers created`);
     }
 
+    if (options.preserveExtensions) {
+        const mappedExports = {};
+        const mappedTypes = {};
+
+        for (const key in result.pkg.exports) {
+            const value = result.pkg.exports[key];
+            const k =
+                extname(value.default) === ".js" && key !== "."
+                    ? `${key}.js`
+                    : key;
+
+            mappedExports[k] = value;
+        }
+
+        for (const key in result.pkg.typesVersions["*"]) {
+            mappedTypes[`${key}.js`] = result.pkg.typesVersions["*"][key];
+        }
+
+        result.pkg.exports = mappedExports;
+        result.pkg.typesVersions["*"] = mappedTypes;
+
+        logger(`extensions preserved`);
+    }
+
     if (options.pkg?.src) {
         logger(`${pkg.name} updating...`);
         const format = getJsonFormat(options.pkg?.snap);

tests/extensions-dist/module/package.json

@@ -0,0 +1,75 @@
+{
+    "name": "demo",
+    "dependencies": {
+        "atomico": "latest"
+    },
+    "peerDependencies": {
+        "@atomico/react": "*",
+        "@atomico/vue": "*"
+    },
+    "peerDependenciesMeta": {
+        "@atomico/react": {
+            "optional": true
+        },
+        "@atomico/vue": {
+            "optional": true
+        }
+    },
+    "main": "./tests/module/atomico.js",
+    "module": "./tests/module/atomico.js",
+    "types": "./tests/module/atomico.d.ts",
+    "exports": {
+        "./atomico.js": {
+            "types": "./tests/module/atomico.d.ts",
+            "default": "./tests/module/atomico.js"
+        },
+        "./components/a.js": {
+            "default": "./tests/module/components/a/a.js"
+        },
+        "./components/b.js": {
+            "default": "./tests/module/components/b/b.js"
+        },
+        "./components/c.js": {
+            "types": "./tests/module/components/c/c.d.ts",
+            "default": "./tests/module/components/c/c.js"
+        },
+        "./react.js": {
+            "types": "./tests/extensions-dist/module/react.d.ts",
+            "default": "./tests/extensions-dist/module/react.js"
+        },
+        "./preact.js": {
+            "types": "./tests/extensions-dist/module/preact.d.ts",
+            "default": "./tests/extensions-dist/module/preact.js"
+        },
+        "./vue.js": {
+            "types": "./tests/extensions-dist/module/vue.d.ts",
+            "default": "./tests/extensions-dist/module/vue.js"
+        },
+        ".": {
+            "types": "./tests/module/atomico.d.ts",
+            "default": "./tests/module/atomico.js"
+        },
+        "./package.json": {
+            "default": "./tests/module/package.json"
+        }
+    },
+    "typesVersions": {
+        "*": {
+            "atomico.js": [
+                "./tests/module/atomico.d.ts"
+            ],
+            "components/c.js": [
+                "./tests/module/components/c/c.d.ts"
+            ],
+            "react.js": [
+                "./tests/extensions-dist/module/react.d.ts"
+            ],
+            "preact.js": [
+                "./tests/extensions-dist/module/preact.d.ts"
+            ],
+            "vue.js": [
+                "./tests/extensions-dist/module/vue.d.ts"
+            ]
+        }
+    }
+}

tests/extensions-dist/module/preact.d.ts

@@ -0,0 +1,8 @@
+import { MyComponent as _MyComponent } from "demo";
+import { Component } from "@atomico/react/preact";
+export const MyComponent: Component<typeof _MyComponent>;
+declare namespace JSX {
+   interface IntrinsicElements{
+      "my-component": Component<typeof _MyComponent>;
+   }
+}

tests/extensions-dist/module/preact.js

@@ -0,0 +1,4 @@
+"use client";
+import { MyComponent as _MyComponent } from "demo";
+import { auto } from "@atomico/react/preact";
+export const MyComponent = auto(_MyComponent);

tests/extensions-dist/module/react.d.ts

@@ -0,0 +1,8 @@
+import { MyComponent as _MyComponent } from "demo";
+import { Component } from "@atomico/react";
+export const MyComponent: Component<typeof _MyComponent>;
+declare namespace JSX {
+   interface IntrinsicElements{
+      "my-component": Component<typeof _MyComponent>;
+   }
+}

tests/extensions-dist/module/react.js

@@ -0,0 +1,4 @@
+"use client";
+import { MyComponent as _MyComponent } from "demo";
+import { auto } from "@atomico/react";
+export const MyComponent = auto(_MyComponent);

tests/extensions-dist/module/vue.d.ts

@@ -0,0 +1,3 @@
+import { MyComponent as _MyComponent } from "demo";
+import { Component } from "@atomico/vue";
+export const MyComponent: Component<typeof _MyComponent>;

tests/extensions-dist/module/vue.js

@@ -0,0 +1,4 @@
+"use client";
+import { MyComponent as _MyComponent } from "demo";
+import { auto } from "@atomico/vue";
+export const MyComponent = auto(_MyComponent);

tests/extensions-expect/module/package.json

@@ -0,0 +1,75 @@
+{
+    "name": "demo",
+    "dependencies": {
+        "atomico": "latest"
+    },
+    "peerDependencies": {
+        "@atomico/react": "*",
+        "@atomico/vue": "*"
+    },
+    "peerDependenciesMeta": {
+        "@atomico/react": {
+            "optional": true
+        },
+        "@atomico/vue": {
+            "optional": true
+        }
+    },
+    "main": "./tests/module/atomico.js",
+    "module": "./tests/module/atomico.js",
+    "types": "./tests/module/atomico.d.ts",
+    "exports": {
+        "./atomico.js": {
+            "types": "./tests/module/atomico.d.ts",
+            "default": "./tests/module/atomico.js"
+        },
+        "./components/a.js": {
+            "default": "./tests/module/components/a/a.js"
+        },
+        "./components/b.js": {
+            "default": "./tests/module/components/b/b.js"
+        },
+        "./components/c.js": {
+            "types": "./tests/module/components/c/c.d.ts",
+            "default": "./tests/module/components/c/c.js"
+        },
+        "./react.js": {
+            "types": "./tests/extensions-dist/module/react.d.ts",
+            "default": "./tests/extensions-dist/module/react.js"
+        },
+        "./preact.js": {
+            "types": "./tests/extensions-dist/module/preact.d.ts",
+            "default": "./tests/extensions-dist/module/preact.js"
+        },
+        "./vue.js": {
+            "types": "./tests/extensions-dist/module/vue.d.ts",
+            "default": "./tests/extensions-dist/module/vue.js"
+        },
+        ".": {
+            "types": "./tests/module/atomico.d.ts",
+            "default": "./tests/module/atomico.js"
+        },
+        "./package.json": {
+            "default": "./tests/module/package.json"
+        }
+    },
+    "typesVersions": {
+        "*": {
+            "atomico.js": [
+                "./tests/module/atomico.d.ts"
+            ],
+            "components/c.js": [
+                "./tests/module/components/c/c.d.ts"
+            ],
+            "react.js": [
+                "./tests/extensions-dist/module/react.d.ts"
+            ],
+            "preact.js": [
+                "./tests/extensions-dist/module/preact.d.ts"
+            ],
+            "vue.js": [
+                "./tests/extensions-dist/module/vue.d.ts"
+            ]
+        }
+    }
+}

tests/extensions-expect/module/preact.d.ts

@@ -0,0 +1,8 @@
+import { MyComponent as _MyComponent } from "demo";
+import { Component } from "@atomico/react/preact";
+export const MyComponent: Component<typeof _MyComponent>;
+declare namespace JSX {
+   interface IntrinsicElements{
+      "my-component": Component<typeof _MyComponent>;
+   }
+}

tests/extensions-expect/module/preact.js

@@ -0,0 +1,4 @@
+"use client";
+import { MyComponent as _MyComponent } from "demo";
+import { auto } from "@atomico/react/preact";
+export const MyComponent = auto(_MyComponent);

tests/extensions-expect/module/react.d.ts

@@ -0,0 +1,8 @@
+import { MyComponent as _MyComponent } from "demo";
+import { Component } from "@atomico/react";
+export const MyComponent: Component<typeof _MyComponent>;
+declare namespace JSX {
+   interface IntrinsicElements{
+      "my-component": Component<typeof _MyComponent>;
+   }
+}

tests/extensions-expect/module/react.js

@@ -0,0 +1,4 @@
+"use client";
+import { MyComponent as _MyComponent } from "demo";
+import { auto } from "@atomico/react";
+export const MyComponent = auto(_MyComponent);

tests/extensions-expect/module/vue.d.ts

@@ -0,0 +1,3 @@
+import { MyComponent as _MyComponent } from "demo";
+import { Component } from "@atomico/vue";
+export const MyComponent: Component<typeof _MyComponent>;

tests/extensions-expect/module/vue.js

@@ -0,0 +1,4 @@
+"use client";
+import { MyComponent as _MyComponent } from "demo";
+import { auto } from "@atomico/vue";
+export const MyComponent = auto(_MyComponent);

tests/merge-export.test.js

@@ -47,3 +47,47 @@ test("module/atomico", async (t) => {
         )
     );
 });
+
+test("module/atomico - preserve extensions", async (t) => {
+    const snapPkg = await readFile("./tests/module/package.json", "utf8");
+
+    await mergeExports({
+        main: "atomico",
+        src: ["./tests/module/**"],
+        dist: "./tests/extensions-dist/module",
+        preserveExtensions: true,
+        wrappers: true,
+        pkg: {
+            src: "./tests/extensions-dist/module/package.json",
+            snap: snapPkg,
+        },
+    });
+
+    const baseExpect = "./tests/extensions-expect";
+
+    const baseDist = "./tests/extensions-dist";
+
+    const filesExpect = await glob(`${baseExpect}/**`);
+
+    const filesDist = (await glob(`${baseDist}/**`)).reduce(
+        (files, file) => ({
+            ...files,
+            [file.replace(baseDist, "")]: file,
+        }),
+        {}
+    );
+
+    await Promise.all(
+        filesExpect.map(async (file) =>
+            t.is(
+                replaceLine(await readFile(file, "utf8")),
+                replaceLine(
+                    await readFile(
+                        filesDist[file.replace(baseExpect, "")],
+                        "utf8"
+                    )
+                )
+            )
+        )
+    );
+});