feat: bundle packages to be Ecmascript modules (T-186)

examples/nextjs/next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  // Until the @apollo-client fixes the ESM modules support (https://github.com/apollographql/apollo-feature-requests/issues/287)
+  // it's required to either transpile the `@lens-protocol` packages or make sure they won't get `imported` during SSR.
+  transpilePackages: ['@lens-protocol/react', '@lens-protocol/wagmi'],
 };
 
 module.exports = nextConfig;

examples/web-wagmi/src/profiles/components/ProfileCard.tsx

@@ -1,5 +1,4 @@
 import { ProfileFieldsFragment } from '@lens-protocol/react';
-import { Link } from 'react-router-dom';
 
 import { ProfilePicture } from './ProfilePicture';
 
@@ -10,9 +9,7 @@ type ProfileCardProps = {
 export function ProfileCard({ profile }: ProfileCardProps) {
   return (
     <article>
-      <Link to={`/profile/handle/${profile.handle}`}>
-        <ProfilePicture picture={profile.picture} />
-      </Link>
+      <ProfilePicture picture={profile.picture} />
       <p>Handle: {profile?.handle}</p>
       <p>Name: {profile?.name}</p>
       <p>Bio: {profile?.bio}</p>

examples/web-wagmi/src/publications/components/PublicationCard.tsx

@@ -1,5 +1,4 @@
 import { CommentFragment, MirrorFragment, PostFragment } from '@lens-protocol/react';
-import { Link } from 'react-router-dom';
 
 import { ProfilePicture } from '../../profiles/components/ProfilePicture';
 
@@ -10,9 +9,7 @@ type PublicationProps = {
 export function PublicationCard({ publication }: PublicationProps) {
   return (
     <article>
-      <Link to={`/profile/handle/${publication.profile.handle}`}>
-        <ProfilePicture picture={publication.profile.picture} />
-      </Link>
+      <ProfilePicture picture={publication.profile.picture} />
       <p>{publication.profile.name ?? `@${publication.profile.handle}`}</p>
       <p>{publication.metadata.content}</p>
     </article>

examples/web-wagmi/tsconfig.json

@@ -3,7 +3,7 @@
     "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
+    "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,

packages/api-bindings/mocks/package.json

@@ -1,4 +1,4 @@
 {
   "type": "module",
-  "main": "../dist/esm/mocks.js"
+  "main": "../dist/mocks.js"
 }

packages/api-bindings/package.json

@@ -10,37 +10,24 @@
   "type": "module",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.js"
-      },
-      "require": {
-        "types": "./dist/cjs/index.d.ts",
-        "default": "./dist/cjs/index.js"
-      }
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
     "./mocks": {
-      "import": {
-        "types": "./dist/esm/mocks.d.ts",
-        "default": "./dist/esm/mocks.js"
-      },
-      "require": {
-        "types": "./dist/cjs/mocks.d.ts",
-        "default": "./dist/cjs/mocks.js"
-      }
-    }
+      "types": "./dist/mocks.d.ts",
+      "default": "./dist/mocks.js"
+    },
+    "./package.json": "./package.json"
   },
-  "types": "./dist/cjs/index.d.ts",
-  "main": "./dist/cjs/index.js",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
     "dist/**/*",
     "mocks"
   ],
   "scripts": {
-    "build:cjs": "tsc -p ./tsconfig.build-cjs.json",
-    "build:esm": "tsc -p ./tsconfig.build.json",
-    "build": "pnpm clean && pnpm build:esm && pnpm build:cjs",
+    "build": "pnpm clean && tsup",
     "clean": "rimraf ./dist",
     "test": "jest --passWithNoTests",
     "eslint:fix": "pnpm run eslint --fix",
@@ -79,7 +66,8 @@
     "jest": "^29.3.1",
     "rimraf": "^3.0.2",
     "ts-jest": "^29.0.3",
-    "typescript": "^4.9.3"
+    "typescript": "^4.9.3",
+    "tsup": "^6.5.0"
   },
   "prettier": "@lens-protocol/prettier-config"
 }

packages/api-bindings/tsup.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'tsup';
+
+import { dependencies, devDependencies } from './package.json';
+
+export default defineConfig({
+  entry: ['src/index.ts', 'src/mocks.ts'],
+  format: ['esm'],
+  dts: true,
+  external: [
+    ...Object.keys(dependencies),
+    // required to not bundle `jest` into exported mocks
+    ...Object.keys(devDependencies),
+  ],
+});

packages/domain/entities/package.json

@@ -1,4 +1,4 @@
 {
   "type": "module",
-  "main": "../dist/esm/entities/index.js"
+  "main": "../dist/entities/index.js"
 }

packages/domain/jest.config.js

@@ -1,5 +1,6 @@
 export default {
-  preset: 'ts-jest',
+  preset: 'ts-jest/presets/js-with-ts',
   testEnvironment: 'node',
   testPathIgnorePatterns: ['/node_modules/', '/dist/'],
+  transformIgnorePatterns: [`/node_modules/(?!@lens-protocol/*)`],
 };

packages/domain/mocks/package.json

@@ -1,4 +1,4 @@
 {
   "type": "module",
-  "main": "../dist/esm/mocks.js"
+  "main": "../dist/mocks.js"
 }

packages/domain/package.json

@@ -8,48 +8,24 @@
     "url": "git://github.com/lens-protocol/lens-sdk.git"
   },
   "type": "module",
-  "main": "./dist/cjs/index.js",
-  "types": "./dist/cjs/index.d.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     "./entities": {
-      "import": {
-        "types": "./dist/esm/entities/index.d.ts",
-        "default": "./dist/esm/entities/index.js"
-      },
-      "require": {
-        "types": "./dist/cjs/entities/index.d.ts",
-        "default": "./dist/cjs/entities/index.js"
-      }
+      "types": "./dist/entities/index.d.ts",
+      "default": "./dist/entities/index.js"
     },
     "./use-cases": {
-      "import": {
-        "types": "./dist/esm/use-cases/index.d.ts",
-        "default": "./dist/esm/use-cases/index.js"
-      },
-      "require": {
-        "types": "./dist/cjs/use-cases/index.d.ts",
-        "default": "./dist/cjs/use-cases/index.js"
-      }
+      "types": "./dist/use-cases/index.d.ts",
+      "default": "./dist/use-cases/index.js"
     },
     "./use-cases/*": {
-      "import": {
-        "types": "./dist/esm/use-cases/*/index.d.ts",
-        "default": "./dist/esm/use-cases/*/index.js"
-      },
-      "require": {
-        "types": "./dist/cjs/use-cases/*/index.d.ts",
-        "default": "./dist/cjs/use-cases/*/index.js"
-      }
+      "types": "./dist/use-cases/*/index.d.ts",
+      "default": "./dist/use-cases/*/index.js"
     },
     "./mocks": {
-      "import": {
-        "types": "./dist/esm/mocks.d.ts",
-        "default": "./dist/esm/mocks.js"
-      },
-      "require": {
-        "types": "./dist/cjs/mocks.d.ts",
-        "default": "./dist/cjs/mocks.js"
-      }
+      "types": "./dist/mocks.d.ts",
+      "default": "./dist/mocks.js"
     },
     "./package.json": "./package.json"
   },
@@ -61,9 +37,7 @@
     "mocks"
   ],
   "scripts": {
-    "build:cjs": "tsc -p tsconfig.build-cjs.json",
-    "build:esm": "tsc -p tsconfig.build.json",
-    "build": "pnpm clean && pnpm build:esm && pnpm build:cjs",
+    "build": "pnpm clean && tsup",
     "clean": "rimraf ./dist",
     "eslint:fix": "pnpm run eslint --fix",
     "eslint": "eslint src",
@@ -94,6 +68,7 @@
     "rimraf": "^3.0.2",
     "ts-jest": "^29.0.3",
     "typescript": "^4.9.3",
+    "tsup": "^6.5.0",
     "wait-for-expect": "^3.0.2"
   },
   "prettier": "@lens-protocol/prettier-config"

packages/domain/tsconfig.base.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "allowJs": false,
+    "allowJs": true,
     "declaration": true,
     "declarationMap": true,
     "esModuleInterop": true,

packages/domain/tsup.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'tsup';
+
+import { dependencies, devDependencies } from './package.json';
+
+export default defineConfig({
+  entry: [
+    'src/index.ts',
+    'src/mocks.ts',
+    'src/entities/index.ts',
+    'src/use-cases/index.ts',
+    'src/use-cases/**/index.ts',
+  ],
+
+  format: ['esm'],
+  dts: true,
+  external: [
+    ...Object.keys(dependencies),
+    // required to not bundle `jest` into exported mocks
+    ...Object.keys(devDependencies),
+  ],
+});

packages/domain/use-cases/lifecycle/package.json

@@ -1,4 +1,4 @@
 {
   "type": "module",
-  "main": "../../dist/esm/use-cases/lifecycle/index.js"
+  "main": "../../dist/use-cases/lifecycle/index.js"
 }

packages/domain/use-cases/package.json

@@ -1,4 +1,4 @@
 {
   "type": "module",
-  "main": "../dist/esm/use-cases/index.js"
+  "main": "../dist/use-cases/index.js"
 }

packages/domain/use-cases/profile/package.json

@@ -1,4 +1,4 @@
 {
   "type": "module",
-  "main": "../../dist/esm/use-cases/profile/index.js"
+  "main": "../../dist/use-cases/profile/index.js"
 }

packages/domain/use-cases/publications/package.json

@@ -1,4 +1,4 @@
 {
   "type": "module",
-  "main": "../../dist/esm/use-cases/publications/index.js"
+  "main": "../../dist/use-cases/publications/index.js"
 }

packages/domain/use-cases/transactions/package.json

@@ -1,4 +1,4 @@
 {
   "type": "module",
-  "main": "../../dist/esm/use-cases/transactions/index.js"
+  "main": "../../dist/use-cases/transactions/index.js"
 }

packages/domain/use-cases/wallets/package.json

@@ -1,4 +1,4 @@
 {
   "type": "module",
-  "main": "../../dist/esm/use-cases/wallets/index.js"
+  "main": "../../dist/use-cases/wallets/index.js"
 }

packages/react/jest.config.js

@@ -1,6 +1,7 @@
 export default {
-  preset: 'ts-jest',
+  preset: 'ts-jest/presets/js-with-ts',
   testEnvironment: 'jsdom',
   testRegex: '/__tests__/.*|(\\.|/)spec\\.tsx?$',
   testPathIgnorePatterns: ['/node_modules/', '/dist/'],
+  transformIgnorePatterns: [`/node_modules/(?!@lens-protocol/*)`],
 };

packages/react/package.json

@@ -10,38 +10,24 @@
   "type": "module",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.js"
-      },
-      "require": {
-        "types": "./dist/cjs/index.d.ts",
-        "default": "./dist/cjs/index.js"
-      }
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
     "./web": {
-      "import": {
-        "types": "./dist/esm/web/index.d.ts",
-        "default": "./dist/esm/web/index.js"
-      },
-      "require": {
-        "types": "./dist/cjs/web/index.d.ts",
-        "default": "./dist/cjs/web/index.js"
-      }
+      "types": "./dist/web/index.d.ts",
+      "default": "./dist/web/index.js"
     },
     "./package.json": "./package.json"
   },
-  "types": "./dist/cjs/index.d.ts",
-  "main": "./dist/cjs/index.js",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
     "dist",
     "web"
   ],
   "scripts": {
-    "build:cjs": "tsc -p ./tsconfig.build-cjs.json",
-    "build:esm": "tsc -p ./tsconfig.build.json",
-    "build": "pnpm clean && pnpm build:esm && pnpm build:cjs",
+    "build": "pnpm clean && tsup",
     "clean": "rimraf ./dist",
     "eslint:fix": "pnpm run eslint --fix",
     "eslint": "eslint src",
@@ -94,7 +80,8 @@
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
     "ts-jest": "^29.0.3",
-    "typescript": "^4.9.3"
+    "typescript": "^4.9.3",
+    "tsup": "^6.5.0"
   },
   "peerDependencies": {
     "ethers": "^5.7.2",