jlengrand/adyen-web
1
0
Fork 0
mirror of https://github.com/jlengrand/adyen-web.git synced 2026-03-10 08:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use babel to transpile typescript, remove global polyfill and add modern bundle (#1343)

Browse Source 
* Fixes global scoped polyfills

* adds babel and babel/runtime for polyfilling

* updated yarn checksums

* adds preset-typescript and preset-react

* Fixing e2e tests (#1312)

* Fixing e2e tests that were failing after changes to attributes on iframes in securedFields release 3.5.4

* Adding missing closing bracket to selectors

* removing log

* Bump url-parse from 1.5.1 to 1.5.3

Bumps [url-parse](https://github.com/unshiftio/url-parse) from 1.5.1 to 1.5.3.
- [Release notes](https://github.com/unshiftio/url-parse/releases)
- [Commits](https://github.com/unshiftio/url-parse/compare/1.5.1...1.5.3)

---
updated-dependencies:
- dependency-name: url-parse
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

* Fixing e2e tests (#1324)

* fix: e2e for v5

* fix: binLookup error tests

* fix: custom card errors

* fix: removing unused import

* Highlighted issuers for Online Banking payments (#1313)

* feat: initial draft with issuers on top

* feat: predefined issuers connected to main flow

* feat: added tests + cleanup

* feat: added e2e test case

* feat: preventing ui to show invalid predefined issuers + ui adjustments

* feat: clean up useless changes

* fix: e2e files scanner

* feat: simplified config

* feat: translations

* feat: including highlighted issuers in the dropdown

* fix: i18n

* fix: adjusted margin

* Enhance the object stored in state.errors for securedFields (#1329)

* Enhance the object stored in state.errors, for a particular securedField, with the properties that we used to send to the onError handler

* Fixed error handling for securedFields (custom card) playground

* Fixed material design example for securedFields (custom card) playground

* Removed unused import in securedFields playground file

* E2E tests for Sessions (#1327)

* feat: e2e test for sessions

* fix: merged master and fixed conflict

* Fix Paypal Component submit flow

* Correctly call onPaymentCompleted on Google Pay component when using Checkout Sessions

* Correctly call onPaymentCompleted on Apple Pay component

* Release 5.1.0

* add back size script

* updates babel config

* adds target version, used for unit tests

* adds typescript typechecking before rollup

* adds babel to jest

* adds modern version of the build

* fixes yarn.lock

* adds modern export

* removes duplciate es.modern config

* clean up comment

* updates to not use runtime plugins directly

* adds ChildElement.remove() back

* removes global .remove() polyfill

Co-authored-by: sponglord <nicholas.spong@adyen.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Guilherme Ribeiro <guilhermemrr@gmail.com>
Co-authored-by: marcp <marc.pereziribas@adyen.com>
This commit is contained in:
António Ferreira
2021-12-13 17:45:36 +01:00
committed by GitHub
parent 41cc28ca76
commit 3885a2f9c8
17 changed files with 1441 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/lib/babel.config.json Normal file
View File

@@ -0,0 +1,30 @@
{
"presets": [
[
"@babel/preset-typescript",
{
"isTSX": true,
"allExtensions": true,
"jsxPragma": "h",
"jsxPragmaFrag": "Fragment"
}
],
[
"@babel/preset-react",
{
"pragma": "h",
"pragmaFrag": "Fragment"
}
],
[
"@babel/preset-env",
{
"useBuiltIns": false,
"targets": {
"esmodules": true
},
"bugfixes": true
}
]
]
}

3
packages/lib/config/jest.config.js
View File

@@ -1,8 +1,9 @@
module.exports = {
transformIgnorePatterns: ['node_modules'],
transform: {
"\\.[jt]sx?$": "babel-jest",
'^.+\\.ts?$': 'ts-jest',
'^.+\\.tsx?$': 'ts-jest'
'^.+\\.tsx?$': 'ts-jest',
},
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/config/testMocks/fileMock.js',

100
packages/lib/config/rollup.config.js
View File

@@ -1,14 +1,16 @@
import typescript from 'rollup-plugin-typescript2';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import json from '@rollup/plugin-json';
import postcss from 'rollup-plugin-postcss';
import replace from '@rollup/plugin-replace';
import eslint from '@rollup/plugin-eslint';
import terserConfig from './terser.config';
import babel from '@rollup/plugin-babel';
import { terserConfig, modernTerserConfig } from './terser.config';
import pkg from '../package.json';
const currentVersion = require('./version')();
import path from 'path';
require('dotenv').config({ path: path.resolve('../../', '.env') });
if (process.env.CI !== 'true') {
@@ -20,7 +22,6 @@ if (process.env.CI !== 'true') {
const isProduction = process.env.NODE_ENV === 'production';
const isBundleAnalyzer = process.env.NODE_ENV === 'analyze';
const transformWith = process.env.EXPERIMENTAL_DEVBUILD === 'true' ? 'esbuild' : 'typescript';
const input = 'src/index.ts';
const watchConfig = {
@@ -32,9 +33,29 @@ const watchConfig = {
exclude: 'node_modules/**'
};
async function getPlugins({ compress, analyze, version, useTypescript = true }) {
const extensions = ['.js', '.jsx', '.ts', '.tsx'];
const polyfillPlugin = [
'@babel/plugin-transform-runtime',
{
corejs: 3,
absoluteRuntime: false
}
];
const polyfillPreset = [
'@babel/preset-env',
{
useBuiltIns: false
}
];
async function getPlugins({ compress, analyze, version, modern }) {
const babelPlugins = modern ? [] : [polyfillPlugin];
const babelPreset = modern ? [] : [polyfillPreset];
return [
resolve(),
resolve({ extensions }),
commonjs(),
eslint({
include: ['./src/**'],
@@ -51,16 +72,15 @@ async function getPlugins({ compress, analyze, version, useTypescript = true })
},
preventAssignment: true
}),
useTypescript &&
typescript({
useTsconfigDeclarationDir: true,
check: false,
cacheRoot: `./node_modules/.cache/.rts2_cache`
}),
!useTypescript &&
(await import('rollup-plugin-esbuild')).default({
target: 'es2017'
}),
babel({
configFile: path.resolve(__dirname, '..', 'babel.config.json'),
extensions,
exclude: ['node_modules/**', '**/*.test.*'],
ignore: [/core-js/, /@babel\/runtime/],
babelHelpers: modern ? 'bundled' : 'runtime',
plugins: babelPlugins,
presets: babelPreset
}),
json({ namedExports: false, compact: true, preferConst: true }),
postcss({
config: {
@@ -70,8 +90,12 @@ async function getPlugins({ compress, analyze, version, useTypescript = true })
inject: false,
extract: 'adyen.css'
}),
compress && (await import('rollup-plugin-terser')).terser(terserConfig),
analyze && (await import('rollup-plugin-visualizer')).default({ title: 'Adyen Web bundle visualizer', gzipSize: true })
compress && (await import('rollup-plugin-terser')).terser(modern ? modernTerserConfig : terserConfig),
analyze &&
(await import('rollup-plugin-visualizer')).default({
title: 'Adyen Web bundle visualizer',
gzipSize: true
})
];
}
@@ -79,18 +103,25 @@ function getExternals() {
const peerDeps = Object.keys(pkg.peerDependencies || {});
const dependencies = Object.keys(pkg.dependencies || {});
return [...peerDeps, ...dependencies];
return [/@babel\/runtime/, ...peerDeps, ...dependencies];
}
export default async () => {
const plugins = await getPlugins({
useTypescript: transformWith === 'typescript',
compress: isProduction,
analyze: isBundleAnalyzer,
version: currentVersion
version: currentVersion,
modern: false
});
return [
const modernPlugins = await getPlugins({
compress: isProduction,
analyze: isBundleAnalyzer,
version: currentVersion,
modern: true
});
const build = [
{
input,
external: getExternals(),
@@ -110,8 +141,26 @@ export default async () => {
}
],
watch: watchConfig
},
{
}
];
// only add modern build and umd when building in production
if (isProduction) {
build.push({
input,
external: getExternals(),
plugins: modernPlugins,
output: [
{
dir: 'dist/es.modern',
format: 'esm',
chunkFileNames: '[name].js',
...(!isProduction ? { sourcemap: true } : {})
}
],
watch: watchConfig
});
build.push({
input,
plugins,
output: {
@@ -122,6 +171,7 @@ export default async () => {
sourcemap: true
},
watch: watchConfig
}
];
});
}
return build;
};

12
packages/lib/config/terser.config.js
View File

@@ -1,4 +1,4 @@
const terserConfig = {
export const terserConfig = {
output: {
ecma: 5,
comments: false,
@@ -8,4 +8,12 @@ const terserConfig = {
}
};
export default terserConfig;
export const modernTerserConfig = {
output: {
ecma: 2017,
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true
}
};

21
packages/lib/package.json
View File

@@ -19,6 +19,7 @@
"import": "./dist/es/index.js",
"require": "./dist/cjs/index.js"
},
"./modern": "./dist/es.modern/index.js",
"./dist/adyen.css": "./dist/adyen.css",
"./package.json": "./package.json"
},
@@ -34,18 +35,28 @@
"start:fast": "EXPERIMENTAL_DEVBUILD=true npm run dev-server",
"dev-server": "cross-env NODE_ENV=development rollup --watch --config config/rollup.config.js",
"docs:generate": "typedoc --out docs src --exclude \"**/*+(index|.test).ts\"",
"build": "rm -rf dist/ && cross-env NODE_ENV=production rollup --config config/rollup.config.js",
"build": "rm -rf dist/ && npm run type-check-generate && cross-env NODE_ENV=production rollup --config config/rollup.config.js",
"build:analyze": "rm -rf dist/ && cross-env NODE_ENV=analyze rollup --config config/rollup.config.js",
"test": "jest --config config/jest.config.js",
"test:watch": "npm run test -- --watchAll",
"test:coverage": "npm run test -- --coverage",
"size": "npm run build && node ./scripts/size",
"size-only": "node ./scripts/size",
"type-check": "tsc --noEmit",
"type-check-generate": "tsc --emitDeclarationOnly",
"lint": "eslint 'src/**/*.{js,ts,tsx}' --quiet",
"lint:fix": "npm run lint -- --fix",
"prepublishOnly": "npm run build"
},
"devDependencies": {
"@babel/cli": "^7.16.0",
"@babel/core": "^7.16.0",
"@babel/plugin-transform-runtime": "^7.15.8",
"@babel/preset-env": "^7.16.0",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0",
"@babel/runtime-corejs3": "^7.16.3",
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^19.0.0",
"@rollup/plugin-eslint": "^8.0.1",
"@rollup/plugin-json": "^4.1.0",
@@ -57,6 +68,7 @@
"@typescript-eslint/eslint-plugin": "^4.28.3",
"@typescript-eslint/parser": "^4.28.3",
"autoprefixer": "^10.3.6",
"babel-jest": "^27.3.1",
"cross-env": "^7.0.3",
"cssnano": "^5.0.6",
"dotenv": "^10.0.0",
@@ -68,6 +80,8 @@
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-tsdoc": "^0.2.14",
"filesize": "^8.0.6",
"gzip-size": "^6.0.0",
"jest": "^26.6.3",
"node-sass": "^6.0.1",
"postcss": "^8.3.5",
@@ -77,7 +91,6 @@
"rollup-plugin-esbuild": "^4.5.0",
"rollup-plugin-postcss": "^4.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.30.0",
"rollup-plugin-visualizer": "^5.5.1",
"stylelint": "^13.13.1",
"stylelint-config-recommended": "^5.0.0",
@@ -87,10 +100,12 @@
"whatwg-fetch": "^3.6.2"
},
"dependencies": {
"@babel/runtime": "^7.15.4",
"@babel/runtime-corejs3": "^7.16.3",
"@types/applepayjs": "^3.0.2",
"@types/googlepay": "^0.6.2",
"classnames": "^2.3.1",
"core-js": "^3.18.1",
"core-js-pure": "^3.18.1",
"preact": "^10.5.13"
},
"files": [

16
packages/lib/scripts/size.js Normal file
View File

@@ -0,0 +1,16 @@
const fs = require('fs');
const gzipSize = require('gzip-size').sync;
const filesize = require('filesize');
const path = require('path');
const filePath = path.join(__dirname, '..', '/dist/adyen.js');
try {
const fileContents = fs.readFileSync(filePath);
const size = gzipSize(fileContents);
console.log(`Measuring size of ${filePath}`);
console.log(filesize(size));
} catch (e) {
console.log(e);
}

2
packages/lib/src/components/internal/SecuredFields/SecuredFieldsProvider.ts
View File

@@ -79,7 +79,7 @@ class SecuredFieldsProvider extends Component<SFPProps, SFPState> {
data: {},
cvcPolicy: CVC_POLICY_REQUIRED,
isSfpValid: false,
hasKoreanFields: this.props.hasKoreanFields
hasKoreanFields: props.hasKoreanFields
};
this.state = stateObj;

4
packages/lib/src/core/Analytics/Analytics.test.ts
View File

@@ -5,8 +5,8 @@ import postTelemetry from '../Services/analytics/post-telemetry';
jest.mock('../Services/analytics/collect-id');
jest.mock('../Services/analytics/post-telemetry');
const mockedCollectId = <jest.Mock>collectId;
const mockedPostTelemetry = <jest.Mock>postTelemetry;
const mockedCollectId = collectId as jest.Mock;
const mockedPostTelemetry = postTelemetry as jest.Mock;
describe('Analytics', () => {
const collectIdPromiseMock = jest.fn(() => Promise.resolve('123456'));

2
packages/lib/src/core/RiskModule/RiskModule.tsx
View File

@@ -87,7 +87,7 @@ export default class RiskElement extends BaseElement<RiskModuleProps> {
}
public cleanUp = () => {
if (this.nodeRiskContainer) this.nodeRiskContainer.remove();
if (this.nodeRiskContainer && this.nodeRiskContainer.parentNode) this.nodeRiskContainer.parentNode.removeChild(this.nodeRiskContainer);
};
componentWillUnmount() {

1
packages/lib/src/index.ts
View File

@@ -5,7 +5,6 @@ if (process.env.NODE_ENV === 'development') {
// require('preact/debug');
}
import './polyfills';
import Checkout from './core';
/* eslint-enable */

37
packages/lib/src/polyfills.ts
View File

@@ -1,37 +0,0 @@
import 'core-js/es/object/assign';
import 'core-js/es/object/keys';
import 'core-js/es/array/includes';
import 'core-js/es/array/find';
import 'core-js/es/array/find-index';
import 'core-js/es/promise';
// ChildNode.remove()
(function() {
function polyfill(item) {
if (item.hasOwnProperty('remove')) {
return;
}
Object.defineProperty(item, 'remove', {
configurable: true,
enumerable: true,
writable: true,
value: function remove() {
if (this.parentNode === null) {
return;
}
this.parentNode.removeChild(this);
}
});
}
if (typeof Element !== 'undefined') {
polyfill(Element.prototype);
}
if (typeof CharacterData !== 'undefined') {
polyfill(CharacterData.prototype);
}
if (typeof DocumentType !== 'undefined') {
polyfill(DocumentType.prototype);
}
})();

2
packages/lib/src/utils/Script.ts
View File

@@ -54,7 +54,7 @@ class Script {
}
});
public remove = () => this.script.remove();
public remove = () => this.script.parentNode && this.script.parentNode.removeChild(this.script);
}
export default Script;

3
packages/lib/tsconfig.json
View File

@@ -1,12 +1,11 @@
{
"compilerOptions": {
"outDir": "./dist/",
"declaration": true,
"declarationDir": "./dist/types",
"moduleResolution": "node",
"module": "esnext",
"target": "es5",
"target": "es2021",
"jsx": "react",
"jsxFactory": "h",
"resolveJsonModule": true,

7
packages/playground/config/polyfills.js
View File

@@ -19,10 +19,3 @@ import 'whatwg-fetch';
});
});
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
import 'core-js/es/object/assign';
import 'core-js/es/object/keys';
import 'core-js/es/array/includes';
import 'core-js/es/array/find';
import 'core-js/es/array/find-index';
import 'core-js/es/promise';

2
packages/playground/package.json
View File

@@ -23,7 +23,7 @@
"devDependencies": {
"@adyen/adyen-web-server": "1.0.0",
"autoprefixer": "^10.3.6",
"core-js": "^3.18.1",
"core-js-pure": "^3.18.1",
"cross-env": "^7.0.3",
"css-loader": "^5.2.7",
"dotenv": "^10.0.0",

1
packages/playground/src/pages/Dropin/Dropin.js
View File

@@ -1,4 +1,3 @@
import '../../../config/polyfills';
import '../../style.scss';
import { initSession } from './session';
import { initManual } from './manual';

1347
yarn.lock
View File

File diff suppressed because it is too large Load Diff