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/create-exports.js

@@ -8,6 +8,7 @@ import { cleanPath, getModules, isJs, isTsDeclaration } from "./utils.js";
  * @param {Pkg} options.pkg
  * @param {string} [options.main]
  * @param {string} [options.dist]
+ * @param {boolean} [options.preserveExtensions]
  * @param {boolean} [options.wrappers]
  * @param {boolean} [options.ignoreTypes]
  * @param {boolean} [options.centralizePackages]
@@ -49,6 +50,7 @@ export async function createExports(options) {
               input: filesJs,
               scope: options.pkg.name,
               dist: options.dist,
+              preserveExtensions: options.preserveExtensions,
               centralizeWrappers: options.centralizeWrappers,
               main,
           })
@@ -130,33 +132,47 @@ export async function createExports(options) {
     return {
         pkg: {
             ...meta,
-            exports: filesJs.reduce(
-                (current, [path, file]) => ({
+            exports: filesJs.reduce((current, [path, file]) => {
+                let resolvedPath = path;
+
+                if (isJs(file) && path !== "." && options.preserveExtensions) {
+                    resolvedPath += ".js";
+                }
+
+                return {
                     ...current,
                     [cleanPath(
                         formatFirstDot(
-                            path.startsWith(".") ? path : `./${path}`
+                            resolvedPath.startsWith(".")
+                                ? resolvedPath
+                                : `./${resolvedPath}`
                         )
                     )]: {
                         ...(filesTsByPath[path]
                             ? { types: formatFirstDot(filesTsByPath[path]) }
                             : {}),
                         default: formatFirstDot(file),
                     },
-                }),
-                options.pkg?.exports || {}
-            ),
+                };
+            }, options.pkg?.exports || {}),
             typesVersions: {
                 ...options.pkg?.typesVersions,
                 "*": filesTs
                     .filter(([name]) => name)
-                    .reduce(
-                        (current, [path, file]) => ({
+                    .reduce((current, [path, file]) => {
+                        let resolvedPath = path;
+
+                        if (options.preserveExtensions) {
+                            resolvedPath += ".js";
+                        }
+
+                        return {
                             ...current,
-                            [cleanPath(path, { relative: true })]: [file],
-                        }),
-                        options.pkg?.typesVersions?.["*"] || {}
-                    ),
+                            [cleanPath(resolvedPath, { relative: true })]: [
+                                file,
+                            ],
+                        };
+                    }, options.pkg?.typesVersions?.["*"] || {}),
             },
         },
         wrappers,

src/create-wrapper.js

@@ -23,6 +23,7 @@ export const peerDependencies = [
  * @param {[string,string][]} options.input
  * @param {string} [options.dist]
  * @param {string} [options.main]
+ * @param {boolean} [options.preserveExtensions]
  * @param {boolean} [options.centralizeWrappers]
  * @returns {ReturnType<typeof createWrapper>}
  */
@@ -35,6 +36,7 @@ export async function createWrappers(options) {
                 createWrapper({
                     scope: options.scope,
                     main: options.main,
+                    preserveExtensions: options.preserveExtensions,
                     input,
                     path,
                     dist,
@@ -78,6 +80,7 @@ export async function createWrappers(options) {
  * @param {string} options.path
  * @param {string} options.dist
  * @param {string} options.main
+ * @param {boolean} options.preserveExtensions
  */
 export async function createWrapper(options) {
     const code = await readFile(options.input, "utf8");
@@ -148,10 +151,16 @@ export async function createWrapper(options) {
     if (!elements.length) return;
 
     const imports = elements.map(([name]) => `${name} as _${name}`);
+    const subPath =
+        origin === options.main || !origin
+            ? ""
+            : options.preserveExtensions
+            ? `/${origin}.js`
+            : `/${origin}`;
 
     const originModule = `import { ${imports.join(", ")} } from "${
         options.scope
-    }${origin === options.main || !origin ? "" : "/" + origin}";`;
+    }${subPath}";`;
 
     const tagNames = elements.map(
         ([name, { tagName }]) =>

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,
     });

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>;
+   }
+}