[WIP] Tests to validate exports for each build format

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,

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}')
+
+  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
+
+  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
+
+  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

ts-tests/.gitignore

@@ -1,3 +1,4 @@
 index.js
+bundle*.js
 package-lock.json
 node_modules/

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"
+  }
 }

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
+}];

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`);
+});

ts-tests/testESM.js

@@ -0,0 +1,27 @@
+/**
+ * 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 },
+  { name: 'PluggableStorage', inFull: true, 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`);
+});

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();
+});