Add ESM wrapper to avoid dual package hazard

.github/workflows/ci.yaml

@@ -47,5 +47,6 @@ jobs:
             echo "No changed files detected."
           else
             echo "::error::Formatting resulted in changed files. Please make sure this branch is up to date and run 'pnpm format'. Verify the changes are what you want and commit them."
+            git diff
             exit 1
           fi

examples/react/basic/package.json

@@ -4,9 +4,8 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "clean": "rm -rf src/gen",
     "dev": "vite",
-    "generate": "buf generate --path eliza.proto",
+    "generate": "rm -rf src/gen && buf generate --path eliza.proto",
     "license-header": "license-header",
     "preview": "vite preview",
     "test": "jest",

packages/connect-query/package.json

@@ -1,33 +1,34 @@
 {
   "name": "@connectrpc/connect-query",
   "version": "0.5.1",
+  "description": "TypeScript-first expansion pack for TanStack Query that gives you Protobuf superpowers.",
+  "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/connectrpc/connect-query-es.git",
     "directory": "packages/connect-query"
   },
-  "license": "Apache-2.0",
-  "sideEffects": false,
-  "type": "module",
-  "exports": {
-    ".": {
-      "module": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.js"
-    }
-  },
-  "main": "./dist/index.cjs",
-  "files": [
-    "dist/**"
-  ],
   "scripts": {
-    "build": "tsup",
-    "clean": "rm -rf dist",
+    "clean": "rm -rf ./dist/*",
+    "build": "npm run build:cjs && npm run build:esm && npm run build:proxy",
+    "build:cjs": "tsc --project tsconfig.build.json --module commonjs --outDir ./dist/cjs --declaration --declarationDir ./dist/cjs && echo >./dist/cjs/package.json '{\"type\":\"commonjs\"}'",
+    "build:esm": "tsc --project tsconfig.build.json --module ES2015 --verbatimModuleSyntax --outDir ./dist/esm --declaration --declarationDir ./dist/esm",
+    "build:proxy": "node ../../scripts/gen-esm-proxy.mjs .",
     "generate": "buf generate --path eliza.proto",
     "test": "jest",
     "format": "prettier . --write --ignore-path ./.eslintignore && eslint . --fix && license-header",
     "attw": "attw --pack"
   },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/cjs/index.js",
+  "exports": {
+    ".": {
+      "module": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/proxy/index.js"
+    }
+  },
   "dependencies": {
     "stable-hash": "^0.0.3"
   },
@@ -55,5 +56,8 @@
     "@tanstack/react-query": "^4.20.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
-  }
+  },
+  "files": [
+    "dist/**"
+  ]
 }

scripts/gen-esm-proxy.mjs

@@ -0,0 +1,103 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import * as path from "node:path";
+import { exit, stderr, stdout, argv } from "node:process";
+
+const args = argv.slice(2);
+
+if (args.length === 0) {
+  stdout.write(`USAGE: ${path.basename(argv[1])} [...path]
+path: One or more subpath exports. A dot (.) is valid.
+
+Generates ESM wrappers for dual packages.
+
+Example:
+
+  ${path.basename(argv[1])} . foo
+
+Assumes that the following CJS artifacts exist: 
+
+  dist/cjs
+  ├── index.d.ts
+  ├── index.js
+  └── foo
+      ├── index.d.ts
+      └── index.js
+
+Generates the following ESM wrappers:
+
+  dist/proxy
+  ├── index.d.ts
+  ├── index.js
+  └── foo
+      ├── index.d.ts
+      └── index.js
+
+package.json must contain:
+
+  "type": "module", 
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/proxy/index.js"
+    },
+    "./protocol": {
+      "require": "./dist/cjs/foo/index.js",
+      "import": "./dist/proxy/foo/index.js"
+    },
+
+Known limitations:
+- expects CJS files with a .js extension, not .cjs
+- does not support default exports
+- supports only simple subpath directory exports, assuming a index.js file
+- does not support export patterns
+`);
+  exit(1);
+}
+
+const cjsDist = "dist/cjs";
+const proxyDist = "dist/proxy";
+
+const packageType = readPackageJsonType();
+if (packageType !== "module") {
+  stderr.write(`package.json is missing "type": "module" field.\n`);
+  exit(1);
+}
+
+for (const subpath of args) {
+  const cjsPath = path.join(cjsDist, subpath, "index.js");
+  if (!existsSync(cjsPath)) {
+    stderr.write(
+      `CommonJS artifact for subpath "${subpath}" not found at expected path ${cjsPath}\n`,
+    );
+    exit(1);
+  }
+  const proxyDir = path.join(proxyDist, subpath);
+  if (!existsSync(proxyDir)) {
+    mkdirSync(proxyDir, { recursive: true });
+  }
+  const cjsImportPath = path.relative(proxyDir, cjsPath);
+  writeFileSync(
+    path.join(proxyDir, "index.js"),
+    `export * from "${cjsImportPath}";\n`,
+  );
+  writeFileSync(
+    path.join(proxyDir, "index.d.ts"),
+    `export * from "${cjsImportPath}";\n`,
+  );
+}
+
+/**
+ * @return {"commonjs"|"module"}
+ */
+function readPackageJsonType() {
+  const pkgString = readFileSync("package.json", "utf-8");
+  const pkg = JSON.parse(pkgString);
+  const t = pkg.type;
+  if (typeof t !== "string") {
+    return "commonjs";
+  }
+  if (t.toLowerCase() === "module") {
+    return "module";
+  }
+  return "commonjs";
+}

turbo.json

@@ -1,9 +1,12 @@
 {
   "$schema": "https://turbo.build/schema.json",
-  "globalDependencies": ["tsconfig.base.json", ".eslintrc.js", "package.json"],
+  "globalDependencies": ["tsconfig.base.json", ".eslintrc.js", "package.json", "scripts/*"],
   "pipeline": {
+    "clean": {
+      "outputs": ["dist/**"]
+    },
     "build": {
-      "dependsOn": ["^build"],
+      "dependsOn": ["clean", "^build"],
       "outputs": ["dist/**"]
     },
     "generate": {