From db31e59064c4820e0c4e7ca7baf82f2391a87f1c Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Thu, 14 Oct 2021 18:08:58 -0300 Subject: [PATCH 1/2] tests to validate that modules are exported correctly for each build --- package.json | 2 +- rollup.ci.config.js | 2 +- scripts/ts-tests.sh | 41 +++++++++++++++++++++++++++++---- ts-tests/.gitignore | 1 + ts-tests/package.json | 6 ++++- ts-tests/rollup.config.js | 25 ++++++++++++++++++++ ts-tests/testCJSandUMD.js | 35 ++++++++++++++++++++++++++++ ts-tests/testESM.js | 26 +++++++++++++++++++++ ts-tests/testESM_TreeShaking.js | 25 ++++++++++++++++++++ 9 files changed, 156 insertions(+), 7 deletions(-) create mode 100644 ts-tests/rollup.config.js create mode 100644 ts-tests/testCJSandUMD.js create mode 100644 ts-tests/testESM.js create mode 100644 ts-tests/testESM_TreeShaking.js diff --git a/package.json b/package.json index 9ed792f..fcf3021 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "test:e2e-errors": "karma start karma/e2e.errors.karma.conf.js", "test:e2e-push": "karma start karma/e2e.push.karma.conf.js", "test:e2e-gaintegration": "karma start karma/e2e.gaintegration.karma.conf.js", - "pretest-ts-decls": "npm run build:esm && npm run build:cjs && npm link", + "pretest-ts-decls": "npm run build && npm link", "test-ts-decls": "./scripts/ts-tests.sh", "posttest-ts-decls": "npm unlink && npm install", "publish:rc": "npm run check && npm run build && npm publish --tag rc", diff --git a/rollup.ci.config.js b/rollup.ci.config.js index bfa6279..436a0d9 100644 --- a/rollup.ci.config.js +++ b/rollup.ci.config.js @@ -3,7 +3,7 @@ import { terser } from 'rollup-plugin-terser'; export default env => { - const fileName = (outputSuffix) => `split-browser${env.branch !== 'main' ? `-dev-${env.commit_hash || VERSION}` : `-${VERSION}`}${outputSuffix ? `.${outputSuffix}` : ''}`; + const fileName = (outputSuffix) => `split-browser${env.branch !== 'main' ? `-dev-${env.commit_hash}` : `-${VERSION}`}${outputSuffix ? `.${outputSuffix}` : ''}`; const createRollupConfig = (input, outputSuffix) => ({ input, diff --git a/scripts/ts-tests.sh b/scripts/ts-tests.sh index f3a9491..1ac8d29 100755 --- a/scripts/ts-tests.sh +++ b/scripts/ts-tests.sh @@ -11,10 +11,43 @@ echo "Running tsc compiler." if [ $? -eq 0 ] then echo "✅ Successfully compiled TS tests." + + npm run test-cjs-and-umd + if [ $? -ne 0 ] + then + echo "☠️ Error testing modules in CJS and UMD builds." + npm unlink @splitsoftware/splitio-browserjs + exit 1 + fi + + npm run test-esm + if [ $? -ne 0 ] + then + echo "☠️ Error testing modules in ESM build." + npm unlink @splitsoftware/splitio-browserjs + exit 1 + fi + + SIZE_FULL_BUNDLE=$(wc -c ./bundleESM.js | awk '{print $1}') + SIZE_SLIM_WITH_LOCALHOST_BUNDLE=$(wc -c ./bundleESM_TreeShaking.js | awk '{print $1}') + + if [[ $SIZE_FULL_BUNDLE > 110000 ]] ;then + echo "Minified file with all modules shouldn't be larger than 110KB" + npm unlink @splitsoftware/splitio-browserjs + exit 1 + fi + + if [[ $SIZE_SLIM_WITH_LOCALHOST_BUNDLE > 85000 ]] ;then + echo "Minified file with tree-shaking shouldn't be larger than 85KB" + npm unlink @splitsoftware/splitio-browserjs + exit 1 + fi + + echo "✅ Successfully run modules tests." npm unlink @splitsoftware/splitio-browserjs exit 0 -else - echo "☠️ Error compiling TS tests." - npm unlink @splitsoftware/splitio-browserjs - exit 1 fi + +echo "☠️ Error compiling TS tests." +npm unlink @splitsoftware/splitio-browserjs +exit 1 \ No newline at end of file diff --git a/ts-tests/.gitignore b/ts-tests/.gitignore index e00a366..2876f9a 100644 --- a/ts-tests/.gitignore +++ b/ts-tests/.gitignore @@ -1,3 +1,4 @@ index.js +bundle*.js package-lock.json node_modules/ \ No newline at end of file diff --git a/ts-tests/package.json b/ts-tests/package.json index 0a34f53..363a8e2 100644 --- a/ts-tests/package.json +++ b/ts-tests/package.json @@ -8,5 +8,9 @@ "type": "git", "url": "git+https://github.com/splitio/javascript-browser-client.git" }, - "dependencies": {} + "dependencies": {}, + "scripts": { + "test-cjs-and-umd": "node testCJSandUMD.js", + "test-esm": "rollup -c && node bundleESM.js && node bundleESM_TreeShaking.js" + } } diff --git a/ts-tests/rollup.config.js b/ts-tests/rollup.config.js new file mode 100644 index 0000000..ea3fa45 --- /dev/null +++ b/ts-tests/rollup.config.js @@ -0,0 +1,25 @@ +import resolve from '@rollup/plugin-node-resolve'; +import commonjs from '@rollup/plugin-commonjs'; +import { terser } from 'rollup-plugin-terser'; + +const plugins = [ + resolve(), // uses `module` as `mainFields` by default + commonjs(), + terser() +]; + +export default [{ + input: './testESM.js', + output: { + file: './bundleESM.js', + format: 'cjs' + }, + plugins +}, { + input: './testESM_TreeShaking.js', + output: { + file: './bundleESM_TreeShaking.js', + format: 'cjs' + }, + plugins +}]; diff --git a/ts-tests/testCJSandUMD.js b/ts-tests/testCJSandUMD.js new file mode 100644 index 0000000..e89ec84 --- /dev/null +++ b/ts-tests/testCJSandUMD.js @@ -0,0 +1,35 @@ +/** + * This file is meant to run in Node to validate that UMD and CJS builds export modules correctly. + * + * We cannot validate ESM build here, because in Node: + * - CommonJS and ES modules imports cannot be used together (https://nodejs.org/api/esm.html#esm_no_require_exports_or_module_exports) + * - The statement `import ... from '@splitsoftware/splitio-browserjs/full'` result in a "Unsupported Directory Import" error (https://nodejs.org/api/esm.html#esm_mandatory_file_extensions) + */ + +const splitioSlimCJS = require('@splitsoftware/splitio-browserjs'); +const splitioFullCJS = require('@splitsoftware/splitio-browserjs/full'); + +const splitioSlimUMD = require('../umd/split-browser-dev-'); +const splitioFullUMD = require('../umd/split-browser-dev-.full'); + +const assert = require('assert'); + +const modules = [ + { name: 'SplitFactory', inFull: true, inSlim: true, inSlimUMD: true }, + { name: 'InLocalStorage', inFull: true, inSlim: true, inSlimUMD: false }, + { name: 'GoogleAnalyticsToSplit', inFull: true, inSlim: true, inSlimUMD: false }, + { name: 'SplitToGoogleAnalytics', inFull: true, inSlim: true, inSlimUMD: false }, + { name: 'ErrorLogger', inFull: true, inSlim: true, inSlimUMD: false }, + { name: 'WarnLogger', inFull: true, inSlim: true, inSlimUMD: false }, + { name: 'InfoLogger', inFull: true, inSlim: true, inSlimUMD: false }, + { name: 'DebugLogger', inFull: true, inSlim: true, inSlimUMD: false }, + { name: 'LocalhostFromObject', inFull: false, inSlim: true, inSlimUMD: false }, +]; + +modules.forEach(({ name, inFull, inSlim, inSlimUMD }) => { + assert.strictEqual(typeof splitioFullCJS[name], inFull ? 'function' : 'undefined', `Module '${name}' should ${inFull ? '' : 'not '}be exported in CJS full`); + assert.strictEqual(typeof splitioFullUMD[name], inFull ? 'function' : 'undefined', `Module '${name}' should ${inFull ? '' : 'not '}be exported in UMD full`); + + assert.strictEqual(typeof splitioSlimCJS[name], inSlim ? 'function' : 'undefined', `Module '${name}' should ${inSlim ? '' : 'not '}be exported in CJS slim`); + assert.strictEqual(typeof splitioSlimUMD[name], inSlimUMD ? 'function' : 'undefined', `Module '${name}' should ${inSlimUMD ? '' : 'not '}be exported in UMD slim`); +}); diff --git a/ts-tests/testESM.js b/ts-tests/testESM.js new file mode 100644 index 0000000..f39f484 --- /dev/null +++ b/ts-tests/testESM.js @@ -0,0 +1,26 @@ +/** + * This file is meant to be bundled with Rollup and run in Node to validate that ESM build exports modules correctly. + */ + +import * as splitioSlimESM from '@splitsoftware/splitio-browserjs'; +import * as splitioFullESM from '@splitsoftware/splitio-browserjs/full'; + +import assert from 'assert'; + +const modules = [ + { name: 'SplitFactory', inFull: true, inSlim: true, inSlimUMD: true }, + { name: 'InLocalStorage', inFull: true, inSlim: true, inSlimUMD: false }, + { name: 'GoogleAnalyticsToSplit', inFull: true, inSlim: true, inSlimUMD: false }, + { name: 'SplitToGoogleAnalytics', inFull: true, inSlim: true, inSlimUMD: false }, + { name: 'ErrorLogger', inFull: true, inSlim: true, inSlimUMD: false }, + { name: 'WarnLogger', inFull: true, inSlim: true, inSlimUMD: false }, + { name: 'InfoLogger', inFull: true, inSlim: true, inSlimUMD: false }, + { name: 'DebugLogger', inFull: true, inSlim: true, inSlimUMD: false }, + { name: 'LocalhostFromObject', inFull: false, inSlim: true, inSlimUMD: false }, +]; + +modules.forEach(({ name, inFull, inSlim }) => { + assert.strictEqual(typeof splitioFullESM[name], inFull ? 'function' : 'undefined', `Module '${name}' should ${inFull ? '' : 'not '}be exported in ESM full`); + + assert.strictEqual(typeof splitioSlimESM[name], inSlim ? 'function' : 'undefined', `Module '${name}' should ${inSlim ? '' : 'not '}be exported in ESM slim`); +}); diff --git a/ts-tests/testESM_TreeShaking.js b/ts-tests/testESM_TreeShaking.js new file mode 100644 index 0000000..d9a2853 --- /dev/null +++ b/ts-tests/testESM_TreeShaking.js @@ -0,0 +1,25 @@ +/** + * This file is bundled with Rollup to validate tree-shaking optimization when using ESM build. + */ + +import { SplitFactory, LocalhostFromObject } from '@splitsoftware/splitio-browserjs'; + +import assert from 'assert'; + +const client = SplitFactory({ + core: { + authorizationKey: 'localhost' + }, + features: { 'test_split': 'on'}, + sync: { + localhostMode: LocalhostFromObject() + } +}).client(); + +assert.strictEqual(client.getTreatment('test_split'), 'control'); + +client.on(client.Event.SDK_READY, () => { + assert.strictEqual(client.getTreatment('test_split'), 'on'); + + client.destroy(); +}); From 73da5f9b8e88f4a243bbf7f3e5dd2a8e09cbbc1b Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Tue, 25 Jan 2022 20:22:35 -0300 Subject: [PATCH 2/2] updated size limits --- scripts/ts-tests.sh | 8 ++++---- ts-tests/testESM.js | 1 + 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/scripts/ts-tests.sh b/scripts/ts-tests.sh index 1ac8d29..bc1a808 100755 --- a/scripts/ts-tests.sh +++ b/scripts/ts-tests.sh @@ -31,14 +31,14 @@ then SIZE_FULL_BUNDLE=$(wc -c ./bundleESM.js | awk '{print $1}') SIZE_SLIM_WITH_LOCALHOST_BUNDLE=$(wc -c ./bundleESM_TreeShaking.js | awk '{print $1}') - if [[ $SIZE_FULL_BUNDLE > 110000 ]] ;then - echo "Minified file with all modules shouldn't be larger than 110KB" + echo "Minified file with all modules shouldn't be larger than 120KB. Current size: $SIZE_FULL_BUNDLE" + if [[ $SIZE_FULL_BUNDLE > 120000 ]] ;then npm unlink @splitsoftware/splitio-browserjs exit 1 fi - if [[ $SIZE_SLIM_WITH_LOCALHOST_BUNDLE > 85000 ]] ;then - echo "Minified file with tree-shaking shouldn't be larger than 85KB" + echo "Minified file with tree-shaking shouldn't be larger than 90KB. Current size: $SIZE_SLIM_WITH_LOCALHOST_BUNDLE" + if [[ $SIZE_SLIM_WITH_LOCALHOST_BUNDLE > 90000 ]] ;then npm unlink @splitsoftware/splitio-browserjs exit 1 fi diff --git a/ts-tests/testESM.js b/ts-tests/testESM.js index f39f484..9724c1c 100644 --- a/ts-tests/testESM.js +++ b/ts-tests/testESM.js @@ -17,6 +17,7 @@ const modules = [ { name: 'InfoLogger', inFull: true, inSlim: true, inSlimUMD: false }, { name: 'DebugLogger', inFull: true, inSlim: true, inSlimUMD: false }, { name: 'LocalhostFromObject', inFull: false, inSlim: true, inSlimUMD: false }, + { name: 'PluggableStorage', inFull: true, inSlim: true, inSlimUMD: false }, ]; modules.forEach(({ name, inFull, inSlim }) => {