Publish library as ES5/CJS and ES2015/ESM

[aldo-roman]

Is your feature request related to a problem?

Currently, AWS Amplify distributes ES5 compiled code bundled as CJS, ES5/CJS for short. This is not optimal for a JS library.

Describe the solution you'd like

AWS Amplify publishes both ES5/CJS and ES2015/ESM. This proposal will bundle the library packages using rollup instead of webpack, given the easy of setup as well as preference of rollup over webpack for libraries. See https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c

The artifacts published will also be tree-shaked, so final artifacts will be smaller than they are today.

Also, this proposal includes the deprecation of default exports. See #1, #2, #3. Change avoids breaking change by exporting both as named and default, but default is marked as deprecated. Tests should rely on named exports.

Notice this proposal does not bundle code as IIFE or UMD. This is because AWS Amplify is not intended to be consumed directly on browser, but through a JS bundler like webpack.

Sample results

Package	Before (ES5/CJS)	After (ES5/CJS)	After (ES2015/ESM)
core	105 KB	88 KB (-17%)	73 KB (-31%)
storage	34 KB	31 KB (-6%)	22 KB (-35%)

Progress:

• amazon-cognito-identity-js
• amplify-ui [PR]
• analytics
• api [PR]
• auth [PR]
• aws-amplify
• aws-amplify-angular
• aws-amplify-react [PR]
• aws-amplify-react-native
• aws-amplify-vue
• cache [PR]
• core [PR]
• interactions
• pubsub
• pushnotification
• storage [PR]
• xr [PR]

Describe alternatives you've considered

Keep using current build setup. This forbids the usage of modern bundlers features, like tree-shaking (webpack, parcel, etc). We are already affected by this, see #1831

Additional context

Also fixes #2199, #1336, #2401

[aldo-roman]

Hi @haverchuck @manueliglesias

Can we restart the development on this feature?

I would like to volunteer to make the required changes. All I would need is help on the review.
The changes will all be backwards compatible.

The builds on my project have seen improvements of ~20% in compiled bundles.

[powerful23]

@aldo-roman Hi, really sorry for the late response. Currently I'm also working on improving the bundle size of amplify so I can review the pr you sent. Thanks for your contribution, really appreciate it.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[willkara]

Hey guys, any movement on this? I'm still having issues with the UI module.

Seems to be similar to #2365 & #2460

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "types": [
      "node"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
    // "enableIvy": true
  }
}

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

package.json

{
  "name": "****",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.1.3",
    "@angular/cdk": "^8.1.2",
    "@angular/common": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/material": "^8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "aws-amplify": "^1.1.26",
    "@aws-amplify/ui": "^1.0.18",
    "change-case": "^3.1.0",
    "hammerjs": "^2.0.8",
    "highlightjs": "^9.12.0",
    "marked": "^0.7.0",
    "moment": "^2.24.0",
    "ngx-markdown": "^8.1.0",
    "ngx-markdown-editor": "^2.0.0",
    "rxjs": "~6.4.0",
    "simplemde": "^1.11.2",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^8.10.51",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

[Amplifiyer]

@aldo-roman We are doing a phased release and have published ESM builds in our unstable release (publishing both ES5/CJS and ES5/ESM builds for maximum backwards compatibility). Please try and let us know if you have any feedback.

[sammartinez]

Im going to close this feature request as this is implemented in the latest version of Amplify.

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.