POC: Tree shaking with new operator

[ribeiroguilherme]

Summary

In order to support tree shaking, we need to slightly change how merchants integrate with us.

Importing AdyenCheckout and Components

1. auto - In case merchant does not care about bundle size and wants to go live ASAP, he can import the @adyen/adyen-web/auto , which will have all Components registered internally by default.
   That means that there is no need to pass paymentMethodComponents property to Drop-in

import { AdyenCheckout, Dropin } from '@adyen/adyen-web/auto';
import '@adyen/adyen-web/styles/adyen.css';

2. tree shaking - In case the merchant wants to have control of the bundle size, he can import from @adyen/adyen-web:

import { AdyenCheckout, Card, PayPal, ApplePay, Boleto, Ideal } from '@adyen/adyen-web';
import '@adyen/adyen-web/styles/adyen.css';

3. UMD - After loading the script from checkoutshopper, the AdyenWeb will be assigned to the window. The merchant can access it to pick up the required classes:

const { AdyenCheckout, Card, PayPal, ApplePay } = window.AdyenWeb;

Translations

All translations are being exported now. The library itself fallback to en-US for locale property, and it will always use en-US translations as fallback mechanism.
If any other language is desired, then it needs to be imported and passed to the library in the translationFile parameter:

import { AdyenCheckout, pt_BR } from '@adyen/adyen-web/auto';

const checkout = await AdyenCheckout({ 
  locale: 'pt-BR',
  translationFile: pt_BR
})

Creating Components

Components now are created using their own classes with the new keyword:

Drop-in (tree shakeable way)

const dropin = new Dropin({
    core: checkout,
    paymentMethodComponents: [Card, PayPal, ApplePay, Boleto, Ideal], // This line can be omitted for 'auto ' and 'umd' clients
    paymentMethodsConfiguration: {
        card: {
            enableStoreDetails: true,
        },
        paywithgoogle: {
            buttonType: 'plain'
        },
        //other stuff ...
    }
}).mount('#dropin-container');

Card:

 const card = new Card({
    core: checkout,
    brands: ['mc', 'visa', 'amex', 'bcmc', 'maestro'],
    installmentOptions: {
        mc: {
            values: [1, 2],
            preselectedValue: 2
        },
        visa: {
            values: [1, 2, 3, 4],
            plans: ['regular', 'revolving'],
            preselectedValue: 4
        }
    }
});

Standalone Redirect:

const alipay = new Redirect({ core: checkout, type: 'alipay' }).mount('.redirect-field');

Tested scenarios

Testing using local playground:

1. Checkout the branch, and run yarn && yarn build && yarn start

Testing ESM with tree shaking: (All commands must be used within Vagrant)

1. Go to the lib folder and run yarn build
2. Then run npm pack to generate the tarball file
3. Create a folder outside adyen-web project, and extract the tarball file in that folder;
4. Go to the new folder, open its package.json and remove the script tasks prepublishOnly and prepare from it
5. In the same folder, run the command npm link
6. Navigate to another project that you want to test the library (ex: adyen-web-playground) using the terminal, and run npm link "@adyen/adyen-web". This will link the adyen-web library to the folder that you just created
7. Start the 'adyen-web-playground' project, and fix the issues (library imports; create components using new instead of checkout.create. etc..). Check that everything works fine
8. To verify that tree shaking works, install the bundle analyzer
9. After installing it, add the following script into your package.json: "analyze": "source-map-explorer 'dist/*.js' --html report.html"
10. Then, run yarn build && yarn analyze - it will build the project and then analyze the bundle, creating the report.html file where you can visualize the bundle files

[sonarqubecloud]

SonarCloud Quality Gate failed.   

6 Bugs
0 Vulnerabilities
0 Security Hotspots
15 Code Smells

85.0% Coverage
0.0% Duplication

Catch issues before they fail your Quality Gate with our IDE extension SonarLint