[ENHANCEMENT] - Migrate from Rollup to TypeScript-Driven Module Build for Improved Compatibility and Simplicity

[DaevMithran]

Description

I was able to integrate lit-protocol natively within the sp-sdk, and here are my findings.

Background

Currently, SDK depends on Rollup as the bundler of choice to generate both CJS and ESM outputs. Since such an approach seemed good enough for past use cases, this indeed creates many problems and compatibility issues.

Proposed Solution: Direct TypeScript Compilation Approach

This proposal ensures that a move to a modern "exports"-based configuration would better solve module resolution, compatibility, and maintainability issues. The summary of the approach is given below.

Changes in Build:

• Use tsc to directly produce ESM (build/esm) and CJS (build/cjs) outputs.
• Use tsc to generate a types folder, and remember to add in your exports map type definitions, such as "types": "./build/types/index.d.ts".
• Explicit exports in package.json

Example:

{
  "exports": {
    ".": {
      "import": "./build/esm/index.js",
      "require": "./build/cjs/index.js"
    },
    "./IndexingService": {
      "import": "./build/esm/IndexingService.js",
      "require": "./build/cjs/IndexingService.js"
    },
    "./utils": {
      "import": "./build/esm/utils/index.js",
      "require": "./build/cjs/utils/index.js"
    }
  },
  "scripts": {
    "build": "rm -rf build && npm run build:types && npm run build:esm",
    "build:types": "tsc -p tsconfig.types.json",
    "build:esm": "tsc -p tsconfig.esm.json",
    "build:cjs": "tsc -p tsconfig.cjs.json"
 }
}

Other Suggestions

• Also, I noticed the sdk depends on react, vocs, etc. which are gonna cause compatibility issue during switching mobile and browser envs.
• Clearly separating concerns between the SDK's core functionality and UI-related features.

Advantages

• Better Compatibility
• Quicker Installation times: Observed first installation times reduced from 53s to 16s
• Smaller bundle sizes, with changes suggested below I was able to cut down the build size from 4.9mb to 1.9mb

Codebase URL

https://github.com/DaevMithran/SignxLit
@daevm/ethsign-sp-sdk

Reproduction steps

1. Install '@lit-protocol/lit-node-client'
2. Import the dependency in index.js and publish it
3. Using the sdk now in nodejs envs will throw a window is undefined error with a lot of .css in the trace
4. See error

ReferenceError: window is not defined
    at Object.<anonymous> (/node_modules/@ethsign/sp-sdk/dist/index.cjs:376452:1