chore: improve magicbell cjs/esm support

.changeset/pink-paws-deliver.md

@@ -0,0 +1,5 @@
+---
+'magicbell': minor
+---
+
+publish proper cjs and esm type definitions

.github/workflows/main.yml

@@ -21,6 +21,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
       - uses: bahmutov/npm-install@v1
 
   eslint:
@@ -30,6 +33,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
       - uses: bahmutov/npm-install@v1
       - name: Lint
         run: yarn lint:eslint
@@ -41,6 +47,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
       - uses: bahmutov/npm-install@v1
         # we need to upgrade to Node16 module resolution so TSC can use package.json#exports
       - name: Build
@@ -55,6 +64,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
       - uses: bahmutov/npm-install@v1
       - run: yarn build
       - run: yarn playwright install --with-deps
@@ -68,6 +80,9 @@ jobs:
     if: github.event_name == 'pull_request'
     steps:
       - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
       - uses: bahmutov/npm-install@v1
       - run: yarn build
       - name: publish preview release

.gitignore

@@ -11,4 +11,7 @@ packages/react/yarn.lock
 yalc.lock
 
 .turbo
-coverage
+coverage
+
+.tshy
+.tshy-build

jest.config.cjs

@@ -8,6 +8,9 @@ const moduleNameMapper = Object.fromEntries(
     .map(x => [x[0], x[1][0].replace(/^packages/, '<rootDir>/packages')])
 );
 
+// import foo.ts as foo.js
+moduleNameMapper['(.+/.*)\\.js'] = '$1';
+
 // { '@magicbell/core': '<rootDir>/packages/core/src' } > [['@magicbell/core', '<rootDir>/packages/core']]
 const packages = Object.entries(moduleNameMapper)
   .map(([pkg, dir]) => [pkg, dir.split('/').slice(0, 3).join('/')])
@@ -21,7 +24,7 @@ const commonConfig = {
   testEnvironment: 'jest-environment-jsdom',
   transform: {
     '\\.[jt]sx?$': ['ts-jest', {
-      tsconfig: 'tsconfig.test.json'
+      tsconfig: 'tsconfig.test.json',
     }]
   },
   modulePathIgnorePatterns: ['<rootDir>/packages/magicbell/dist', '<rootDir>/packages/playground', '<rootDir>/packages/embeddable/cypress'],

package.json

@@ -26,7 +26,7 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:ci": "jest --runInBand --ci --coverage && yarn --cwd packages/in-app test",
-    "postinstall": "husky && node scripts/sync-paths.js && manypkg check && link-workspaces --no-source",
+    "postinstall": "husky && node scripts/sync-paths.js && manypkg check",
     "changeset": "changeset",
     "changeset:version": "changeset version",
     "changeset:release": "yarn build && changeset publish",
@@ -41,6 +41,7 @@
     ]
   },
   "dependencies": {
+    "@arethetypeswrong/cli": "^0.16.2",
     "@babel/core": "^7.25.2",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
@@ -95,6 +96,7 @@
     "tiny-glob": "^0.2.9",
     "ts-jest": "^29.2.0",
     "ts-morph": "^23.0.0",
+    "tshy": "^3.0.2",
     "tslib": "^2.6.2",
     "tsx": "^4.19.0",
     "turbo": "^2.1.0",

packages/magicbell/.gitignore

@@ -0,0 +1,4 @@
+/crypto/package.json
+/errors/package.json
+/project-client/package.json
+/user-client/package.json

packages/magicbell/crypto/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "../dist/commonjs/crypto.js",
+  "types": "../dist/commonjs/crypto.d.ts"
+}

packages/magicbell/errors/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "../dist/commonjs/errors.js",
+  "types": "../dist/commonjs/errors.d.ts"
+}

packages/magicbell/package.json

@@ -7,45 +7,74 @@
     "Stephan Meijer <stephan.meijer@gmail.com>"
   ],
   "license": "SEE LICENSE IN LICENSE",
+  "tshy": {
+    "project": "./tsconfig.build.json",
+    "exports": "./src/*.ts"
+  },
   "source": "./src/index.ts",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "typings": "./dist/index.d.ts",
+  "main": "./dist/commonjs/index.js",
+  "module": "./dist/esm/index.js",
   "exports": {
+    "./crypto": {
+      "import": {
+        "types": "./dist/esm/crypto.d.ts",
+        "default": "./dist/esm/crypto.js"
+      },
+      "require": {
+        "types": "./dist/commonjs/crypto.d.ts",
+        "default": "./dist/commonjs/crypto.js"
+      }
+    },
+    "./errors": {
+      "import": {
+        "types": "./dist/esm/errors.d.ts",
+        "default": "./dist/esm/errors.js"
+      },
+      "require": {
+        "types": "./dist/commonjs/errors.d.ts",
+        "default": "./dist/commonjs/errors.js"
+      }
+    },
     ".": {
-      "types": "./dist/*.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/commonjs/index.d.ts",
+        "default": "./dist/commonjs/index.js"
+      }
     },
     "./project-client": {
-      "types": "./dist/project-client.d.ts",
-      "import": "./dist/project-client.mjs",
-      "require": "./dist/project-client.cjs"
+      "import": {
+        "types": "./dist/esm/project-client.d.ts",
+        "default": "./dist/esm/project-client.js"
+      },
+      "require": {
+        "types": "./dist/commonjs/project-client.d.ts",
+        "default": "./dist/commonjs/project-client.js"
+      }
     },
     "./user-client": {
-      "types": "./dist/user-client.d.ts",
-      "import": "./dist/user-client.mjs",
-      "require": "./dist/user-client.cjs"
+      "import": {
+        "types": "./dist/esm/user-client.d.ts",
+        "default": "./dist/esm/user-client.js"
+      },
+      "require": {
+        "types": "./dist/commonjs/user-client.d.ts",
+        "default": "./dist/commonjs/user-client.js"
+      }
     },
-    "./crypto": {
-      "types": "./dist/crypto.d.ts",
-      "import": "./dist/crypto.mjs",
-      "require": "./dist/crypto.cjs"
-    },
-    "./errors": {
-      "types": "./dist/errors.d.ts",
-      "import": "./dist/errors.mjs",
-      "require": "./dist/errors.cjs"
-    }
-  },
-  "publishConfig": {
-    "access": "public",
-    "directory": "./dist"
+    "./package.json": "./package.json"
   },
   "sideEffects": false,
   "files": [
     "/dist",
-    "LICENSE"
+    "LICENSE",
+    "/crypto/package.json",
+    "/errors/package.json",
+    "/project-client/package.json",
+    "/user-client/package.json"
   ],
   "homepage": "https://magicbell.com",
   "keywords": [
@@ -65,12 +94,10 @@
   },
   "scripts": {
     "clean": "rimraf dist",
-    "build": "run-s clean 'build:entry:*'",
-    "build:entry:index": "cross-env ENTRY=src/index.ts vite build",
-    "build:entry:project-client": "cross-env ENTRY=src/project-client.ts vite build",
-    "build:entry:user-client": "cross-env ENTRY=src/user-client.ts vite build",
-    "build:entry:crypto": "cross-env ENTRY=src/crypto.ts vite build",
-    "build:entry:errors": "cross-env ENTRY=src/errors.ts vite build",
+    "build": "run-s clean build:bundle build:node10 build:attw",
+    "build:bundle": "tshy",
+    "build:node10": "tsx scripts/fix-node10.ts",
+    "build:attw": "attw -P",
     "codegen": "tsx scripts/generate-resources.ts --dest ./src",
     "start": "npm run clean && run-p 'build:entry:* --watch'",
     "size": "size-limit"
@@ -96,10 +123,12 @@
     "tsx": "^4.19.0"
   },
   "dependencies": {
+    "@smeijer/ky": "^1.7.2",
     "debug": "^4.3.4",
     "fetch-addons": "^1.3.0",
     "json-schema-to-ts": "3.1.0",
-    "ky": "npm:@smeijer/ky@^0.33.3",
     "url-join": "^4.0.1"
-  }
+  },
+  "type": "module",
+  "types": "./dist/commonjs/index.d.ts"
 }

packages/magicbell/project-client/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "../dist/commonjs/project-client.js",
+  "types": "../dist/commonjs/project-client.d.ts"
+}

packages/magicbell/scripts/fix-node10.ts

@@ -0,0 +1,35 @@
+import { fileURLToPath } from 'node:url';
+
+import fs from 'fs';
+import { sync } from 'globby';
+import path from 'path';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const pkgJson = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf-8'));
+const files = sync(pkgJson.tshy.exports);
+const pkgPaths = [];
+
+for (const file of files) {
+  const relativePath = file.replace('./src/', '');
+  const dir = relativePath.slice(0, -path.extname(relativePath).length);
+  if (dir === 'index') continue;
+
+  const pkgJson = {
+    main: `../dist/commonjs/${relativePath.replace(path.extname(file), '.js')}`,
+    types: `../dist/commonjs/${relativePath.replace(path.extname(file), '.d.ts')}`,
+  };
+
+  const pkgPath = path.join(dir, 'package.json');
+  fs.mkdirSync(dir, { recursive: true });
+  fs.writeFileSync(pkgPath, JSON.stringify(pkgJson, null, 2), 'utf-8');
+  pkgPaths.push(`/${pkgPath}`);
+}
+
+fs.writeFileSync(path.join(__dirname, '..', '.gitignore'), pkgPaths.join('\n') + '\n', 'utf-8');
+
+for (const file of pkgPaths) {
+  if (pkgJson.files.includes(file)) continue;
+  pkgJson.files.push(file);
+}
+
+fs.writeFileSync(path.join(__dirname, '..', 'package.json'), JSON.stringify(pkgJson, null, 2), 'utf-8');

packages/magicbell/scripts/generate-resources.ts

@@ -185,7 +185,7 @@ async function createResource(resource: Resource, children?: Resource[]) {
       // ),
     ]);
 
-  const imports = children?.map((x) => b.importDeclaration([pascalCase((x as any).name)], `./${x.path}`)) || [];
+  const imports = children?.map((x) => b.importDeclaration([pascalCase((x as any).name)], `./${x.path}.js`)) || [];
 
   const methods = resource.methods
     .filter((x) => !x.private)
@@ -213,10 +213,10 @@ async function createResource(resource: Resource, children?: Resource[]) {
     ],
     body: [
       b.importDeclaration(['type FromSchema'], 'json-schema-to-ts'),
-      hasListMethod && b.importDeclaration(['type IterablePromise'], `${dots}/client/method`),
-      b.importDeclaration(['Resource'], `${dots}/client/resource`),
-      b.importDeclaration(['type RequestOptions'], `${dots}/client/types`),
-      b.importDeclaration('* as schemas', `${dots}/schemas/${hyphenCase(resource.path)}`),
+      hasListMethod && b.importDeclaration(['type IterablePromise'], `${dots}/client/method.js`),
+      b.importDeclaration(['Resource'], `${dots}/client/resource.js`),
+      b.importDeclaration(['type RequestOptions'], `${dots}/client/types.js`),
+      b.importDeclaration('* as schemas', `${dots}/schemas/${hyphenCase(resource.path)}.js`),
       ...imports,
       ...types,
       builders.exportNamedDeclaration.from({
@@ -372,7 +372,7 @@ async function updateClient(filePath: string, files: File[]) {
     .map((x) => x.name.replace(/\.ts$/, ''))
     .map((filepath) => [filepath, path.relative(baseDir, filepath).replace(/\//g, '-')] as const)
     .map(([filepath, name]) => ({
-      file: `./${filepath}`,
+      file: `./${filepath}.js`,
       class: pascalCase(name),
       property: camelCase(name),
     }))

packages/magicbell/src/client/client.test.ts

@@ -1,6 +1,6 @@
 import { mockHandlers, setupMockServer } from '@magicbell/utils';
 
-import { Client as Client } from './client';
+import { Client as Client } from './client.js';
 
 const server = setupMockServer(...mockHandlers);
 

packages/magicbell/src/client/client.ts

@@ -1,13 +1,15 @@
-import ky from 'ky';
+import '../lib/signal-polyfill.js';
+
+import ky from '@smeijer/ky';
 import urlJoin from 'url-join';
 
-import { tryParse } from '../lib/utils';
-import { createError } from './error';
-import { withRequestHeaders } from './headers';
-import { withRequestLogging } from './log';
-import { assertHasSomeOptions, assertHasValidOptions, mergeHooks } from './options';
-import { withRequestTelemetry } from './telemetry';
-import { ClientOptions, FeatureFlag, RequestArgs, RequestOptions } from './types';
+import { tryParse } from '../lib/utils.js';
+import { createError } from './error.js';
+import { withRequestHeaders } from './headers.js';
+import { withRequestLogging } from './log.js';
+import { assertHasSomeOptions, assertHasValidOptions, mergeHooks } from './options.js';
+import { withRequestTelemetry } from './telemetry.js';
+import { ClientOptions, FeatureFlag, RequestArgs, RequestOptions } from './types.js';
 
 export const DEFAULT_OPTIONS: Partial<ClientOptions> = {
   host: 'https://api.magicbell.com',