Fix various issues with tree shaking (#440)

patrick-tolosa · web-flow · commit 74142eb6198e · 2021-09-19T12:26:16.000+03:00
- Remove dynamic objects from the main exports (Actions, Qualifiers, SDKURLGen etc.)
- Remove import/export pairing - use export directly from the import path
- Remove Actions/Qualifiers from the index.ts entrypoint
- Improve the bundle-size testing by adding more cases and added safety to detect false-imports (I.E an import that imports nothing)
diff --git a/__TESTS_BUNDLE_SIZE__/bundleSizeTestCases.ts b/__TESTS_BUNDLE_SIZE__/bundleSizeTestCases.ts
@@ -15,7 +15,7 @@ import importFromPackage from "./utils/stringGenerators/importFromPackage";
 const bundleSizeTestCases:ITestCase[] = [
   {
     name: 'Tests CloudinaryImage with Resize',
-    sizeLimitInKB: 20,
+    sizeLimitInKB: 17,
     importsArray: [
       importFromDist('assets/CloudinaryImage', 'CloudinaryImage'),
       importFromDist('instance/Cloudinary', 'Cloudinary'),
@@ -24,7 +24,7 @@ const bundleSizeTestCases:ITestCase[] = [
   },
   {
     name: 'Tests CloudinaryImage with Resize and Adjust',
-    sizeLimitInKB: 30,
+    sizeLimitInKB: 20,
     importsArray: [
       importFromDist('assets/CloudinaryImage', 'CloudinaryImage'),
       importFromDist('instance/Cloudinary', 'Cloudinary'),
@@ -34,7 +34,7 @@ const bundleSizeTestCases:ITestCase[] = [
   },
   {
     name: 'Tests CloudinaryImage with Resize, Adjust and Border',
-    sizeLimitInKB: 30,
+    sizeLimitInKB: 20,
     importsArray: [
       importFromDist('assets/CloudinaryImage', 'CloudinaryImage'),
       importFromDist('instance/Cloudinary', 'Cloudinary'),
@@ -45,7 +45,7 @@ const bundleSizeTestCases:ITestCase[] = [
   },
   {
     name: 'Tests CloudinaryImage image with Resize, adjust and delivery',
-    sizeLimitInKB: 32,
+    sizeLimitInKB: 21,
     importsArray: [
       importFromDist('assets/CloudinaryImage', 'CloudinaryImage'),
       importFromDist('instance/Cloudinary', 'Cloudinary'),
@@ -56,7 +56,7 @@ const bundleSizeTestCases:ITestCase[] = [
   },
   {
     name: 'Tests Overlay imports',
-    sizeLimitInKB: 50,
+    sizeLimitInKB: 20,
     importsArray: [
       importFromDist('assets/CloudinaryImage', 'CloudinaryImage'),
       importFromDist('actions/overlay', 'Overlay'),
@@ -67,7 +67,7 @@ const bundleSizeTestCases:ITestCase[] = [
   },
   {
     name: 'Import backwards compatibility function',
-    sizeLimitInKB: 57,
+    sizeLimitInKB: 45,
     importsArray: [
       importFromPackage('createCloudinaryLegacyURL')
     ]
@@ -76,7 +76,28 @@ const bundleSizeTestCases:ITestCase[] = [
     name: 'Import all of the SDK',
     sizeLimitInKB: 118,
     importsArray: [
-      importFromPackage('CloudinaryURLGEN')
+      importFromPackage('* as CloudinaryURLGEN')
+    ]
+  },
+  {
+    name: 'Import a Transformation Object',
+    sizeLimitInKB: 5,
+    importsArray: [
+      importFromPackage('Transformation')
+    ]
+  },
+  {
+    name: 'Import All Actions',
+    sizeLimitInKB: 30,
+    importsArray: [
+      importFromPackage('Actions')
+    ]
+  },
+  {
+    name: 'Import All Qualifiers',
+    sizeLimitInKB: 35,
+    importsArray: [
+      importFromPackage('Qualifiers')
     ]
   }
 ];
diff --git a/__TESTS_BUNDLE_SIZE__/bundleSizeTestRunner.ts b/__TESTS_BUNDLE_SIZE__/bundleSizeTestRunner.ts
@@ -28,6 +28,7 @@ async function bundleSizeTestRunner():Promise<void> {
     const OUTPUT_FILE = `bundle${i}`;
     const TEST_NAME = testCases[i].name;
     const EXPECTED_SIZE_IN_KB = testCases[i].sizeLimitInKB;
+    const ALLOWED_MIN_SIZE_IN_KB = testCases[i].minAllowedSize || 2;
 
     // Create the entry file for Webpack
     log.debug('Starting to build webpack loop');
@@ -42,10 +43,11 @@ async function bundleSizeTestRunner():Promise<void> {
     const bundleInfo = getBundleInfo(OUTPUT_FILE);
     const ACTUAL_SIZE_IN_KB = Math.round(bundleInfo.size / 1024);
 
-    if (ACTUAL_SIZE_IN_KB <= EXPECTED_SIZE_IN_KB) {
+
+    if (ACTUAL_SIZE_IN_KB <= EXPECTED_SIZE_IN_KB && ACTUAL_SIZE_IN_KB > ALLOWED_MIN_SIZE_IN_KB) {
       handleTestSuccess(testCases[i], ACTUAL_SIZE_IN_KB);
     } else {
-      handleTestError(TEST_NAME, EXPECTED_SIZE_IN_KB, ACTUAL_SIZE_IN_KB);
+      handleTestError(TEST_NAME, EXPECTED_SIZE_IN_KB, ACTUAL_SIZE_IN_KB, ALLOWED_MIN_SIZE_IN_KB);
       fail_count++;
     }
   }
diff --git a/__TESTS_BUNDLE_SIZE__/interfaces/ITestCase.ts b/__TESTS_BUNDLE_SIZE__/interfaces/ITestCase.ts
@@ -1,5 +1,9 @@
 export interface ITestCase {
   sizeLimitInKB: number,
+  // The minimum allowed size, a bundle size below this size will fail the test
+  // Useful to ensure that something is actually imported!
+  // Defaults internally to 2kb if field is omitted
+  minAllowedSize?:number,
   importsArray: string[],
   name: string,
   importString?: string
diff --git a/__TESTS_BUNDLE_SIZE__/utils/stringGenerators/importFromPackage.ts b/__TESTS_BUNDLE_SIZE__/utils/stringGenerators/importFromPackage.ts
@@ -5,10 +5,13 @@
  * @returns string
  */
 function importFromPackage(exportedObject: string): string {
+  const importString = exportedObject.includes('* as') ? exportedObject : `{${exportedObject}}`;
+  const variableName = exportedObject.includes('* as') ? exportedObject.split(' as ')[1] : exportedObject;
+
   return `
-    import {${exportedObject}} from "${process.cwd()}/dist";
+    import ${importString} from "${process.cwd()}/dist";
     // we console log to force the bundle not to tree shake
-    console.log(${exportedObject});  
+    console.log(${variableName});  
   `;
 }
 
diff --git a/__TESTS_BUNDLE_SIZE__/utils/testLifeCycle/handleTestError.ts b/__TESTS_BUNDLE_SIZE__/utils/testLifeCycle/handleTestError.ts
@@ -6,9 +6,9 @@ import log from "../log";
  * @param expected
  * @param received
  */
-function handleTestError(name: string, expected: number, received: number) {
+function handleTestError(name: string, expected: number, received: number, minAllowed: number) {
   log.error(name);
-  log.error(`\tExpected size: ${expected} KB`);
+  log.error(`\tExpected size(range): ${minAllowed} - ${expected} KB`);
   log.error(`\tActual size: ${received} KB\n`);
 }
 
diff --git a/__TESTS__/TestUtils/createCloudinaryFile.ts b/__TESTS__/TestUtils/createCloudinaryFile.ts
@@ -1,6 +1,6 @@
 import ICloudConfig from "../../src/config/interfaces/Config/ICloudConfig";
 import IURLConfig from "../../src/config/interfaces/Config/IURLConfig";
-import {CloudinaryFile} from "../../src";
+import {CloudinaryFile} from "../../src/assets/CloudinaryFile";
 
 /**
  *
diff --git a/__TESTS__/backwardsComaptibility/createLegacyURL.test.ts b/__TESTS__/backwardsComaptibility/createLegacyURL.test.ts
@@ -1,6 +1,6 @@
 import {createTestURL} from "./transformationLegacyTests/utils/createTestURL";
-import {createCloudinaryLegacyURL} from "../../src";
 import Transformation from "../../src/backwards/transformation";
+import {createCloudinaryLegacyURL} from "../../src/backwards/createCloudinaryLegacyURL";
 
 describe('Create legacy urls', () => {
   it('Should throw without cloudName', () => {
diff --git a/__TESTS__/backwardsComaptibility/transformationLegacyTests/utils/createTestURL.ts b/__TESTS__/backwardsComaptibility/transformationLegacyTests/utils/createTestURL.ts
@@ -1,6 +1,6 @@
 import {Cloudinary} from 'cloudinary-core';
-import {createCloudinaryLegacyURL} from "../../../../src";
 import {LegacyITransforamtionOptions} from "../../../../src/types/types";
+import {createCloudinaryLegacyURL} from "../../../../src/backwards/createCloudinaryLegacyURL";
 
 const CLegacy = Cloudinary.new( { cloud_name: "demo"});
 
diff --git a/__TESTS__/compilationsOutput.test.ts b/__TESTS__/compilationsOutput.test.ts
@@ -30,7 +30,7 @@ import { FocusOn } from "qualifiers/focusOn";
 import { AutoFocus } from "qualifiers/autoFocus";
 import { VideoCodec } from "qualifiers/videoCodec";
 import { Adjust } from "actions/adjust";
-import { ImageTransformation } from "index";
+import { ImageTransformation } from "transformation/ImageTransformation";
 import { Effect } from "actions/effect";
 import { Conditional } from "actions/conditional";
 import { Underlay } from "actions/underlay";
diff --git a/__TESTS__/unit/analytics/testUtils/createNewImageWithAnalytics.ts b/__TESTS__/unit/analytics/testUtils/createNewImageWithAnalytics.ts
@@ -1,7 +1,7 @@
 import ICloudConfig from "../../../../src/config/interfaces/Config/ICloudConfig";
 import IURLConfig from "../../../../src/config/interfaces/Config/IURLConfig";
-import {CloudinaryImage} from "../../../../src";
 import {createNewImage} from "../../../TestUtils/createCloudinaryImage";
+import {CloudinaryImage} from "../../../../src/assets/CloudinaryImage";
 
 /**
  * Create a new CloudinaryImage with analytics turned on by default
diff --git a/jest.config.json b/jest.config.json
@@ -17,7 +17,7 @@
   "coverageThreshold": {
     "global": {
       "branches": 84.9,
-      "functions": 95,
+      "functions": 90,
       "lines": 95,
       "statements": 95
     }
diff --git a/src/actions.ts b/src/actions.ts
@@ -0,0 +1,15 @@
+export {Resize} from "./actions/resize";
+export {Border} from "./actions/border";
+export {RoundCorners} from "./actions/roundCorners";
+export {Effect} from "./actions/effect";
+export {Rotate} from "./actions/rotate";
+export {Adjust} from "./actions/adjust";
+export {Overlay} from "./actions/overlay";
+export {Underlay} from "./actions/underlay";
+export {NamedTransformation} from "./actions/namedTransformation";
+export {Delivery} from "./actions/delivery";
+export {CustomFunction} from "./actions/customFunction";
+export {VideoEdit} from "./actions/videoEdit";
+export {Transcode} from "./actions/transcode";
+export {PSDTools} from "./actions/psdTools";
+export {Animated} from "./actions/animated";
diff --git a/src/index.ts b/src/index.ts
@@ -1,141 +1,11 @@
-import {Transformation} from "./transformation/Transformation.js";
-import {ImageTransformation} from "./transformation/ImageTransformation.js";
-import {VideoTransformation} from "./transformation/VideoTransformation.js";
-import {CloudinaryImage} from "./assets/CloudinaryImage.js";
-import {CloudinaryVideo} from "./assets/CloudinaryVideo.js";
-import {CloudinaryFile} from "./assets/CloudinaryFile.js";
-import {CloudinaryMedia} from "./assets/CloudinaryMedia.js";
-import {Cloudinary} from "./instance/Cloudinary.js";
-import {createCloudinaryLegacyURL} from "./backwards/createCloudinaryLegacyURL.js";
-
-import {RoundCorners} from "./actions/roundCorners.js";
-import {Resize} from "./actions/resize.js";
-import {Border} from "./actions/border.js";
-import {Effect} from "./actions/effect.js";
-import {Rotate} from "./actions/rotate.js";
-import {Adjust} from "./actions/adjust.js";
-import {VideoEdit} from "./actions/videoEdit.js";
-import {Overlay} from "./actions/overlay.js";
-import {Underlay} from "./actions/underlay.js";
-import {NamedTransformation} from './actions/namedTransformation.js';
-import {Delivery} from "./actions/delivery.js";
-import {CustomFunction} from './actions/customFunction.js';
-import {Transcode} from "./actions/transcode.js";
-import {PSDTools} from "./actions/psdTools.js";
-import {Animated} from "./actions/animated.js";
-import {TextDecoration} from "./qualifiers/textDecoration.js";
-import {TextAlignment} from "./qualifiers/textAlignment.js";
-import {Stroke} from "./qualifiers/textStroke.js";
-import {StreamingProfile} from "./qualifiers/streamingProfile.js";
-import {SimulateColorBlind} from "./qualifiers/simulateColorBlind.js";
-import {RotationMode} from "./qualifiers/rotationMode.js";
-import {Region} from "./qualifiers/region.js";
-import {Quality} from "./qualifiers/quality.js";
-import {Position} from "./qualifiers/position.js";
-import {OutlineMode} from "./qualifiers/outlineMode.js";
-import {ImproveMode} from "./qualifiers/improveMode.js";
-import {GradientDirection} from "./qualifiers/gradientDirection.js";
-import {Format} from "./qualifiers/format.js";
-import {FontWeight} from "./qualifiers/fontWeight.js";
-import {FontStyle} from "./qualifiers/fontStyle.js";
-import {FontHinting} from "./qualifiers/fontHinting.js";
-import {Expression} from "./qualifiers/expression.js";
-import {Dither} from "./qualifiers/dither.js";
-import {ColorSpace} from "./qualifiers/colorSpace.js";
-import {Color} from "./qualifiers/color.js";
-import {Background} from "./qualifiers/background.js";
-import {AudioFrequency} from "./qualifiers/audioFrequency.js";
-import {AudioCodec} from "./qualifiers/audioCodec.js";
-import {AspectRatio} from "./qualifiers/aspectRatio.js";
-import {ArtisticFilter} from "./qualifiers/artisticFilter.js";
-import {AnimatedFormat} from "./qualifiers/animatedFormat.js";
-import {Gravity} from "./qualifiers/gravity.js";
-import {ChromaSubSampling} from "./qualifiers/chromaSubSampling.js";
-import {Dpr} from "./qualifiers/dpr.js";
-import {Source} from "./qualifiers/source.js";
-import {GradientFade} from "./qualifiers/GradientFade.js";
-
-const Actions = {
-  Resize,
-  Border,
-  RoundCorners,
-  Effect,
-  Rotate,
-  Adjust,
-  Overlay,
-  Underlay,
-  NamedTransformation,
-  Delivery,
-  CustomFunction,
-  VideoEdit,
-  Transcode,
-  PSDTools,
-  Animated
-};
-
-const Qualifiers = {
-  TextDecoration,
-  TextAlignment,
-  Stroke,
-  StreamingProfile,
-  SimulateColorBlind,
-  RotationMode,
-  Region,
-  Quality,
-  Position,
-  OutlineMode,
-  ImproveMode,
-  GradientDirection,
-  Format,
-  FontWeight,
-  FontStyle,
-  FontHinting,
-  Expression,
-  Dither,
-  ColorSpace,
-  Color,
-  Background,
-  AudioFrequency,
-  AudioCodec,
-  AspectRatio,
-  ArtisticFilter,
-  AnimatedFormat,
-  Gravity,
-  ChromaSubSampling,
-  Dpr,
-  Sources: Source,
-  GradientFade
-};
-
-/**
- * @namespace SDK
- */
-const CloudinaryURLGEN = {
-  Transformation,
-  ImageTransformation,
-  VideoTransformation,
-  Actions,
-  Qualifiers,
-  Cloudinary,
-  CloudinaryImage,
-  CloudinaryVideo,
-  CloudinaryMedia,
-  CloudinaryFile,
-  createCloudinaryLegacyURL: createCloudinaryLegacyURL
-};
-
-export {
-  Transformation,
-  ImageTransformation,
-  VideoTransformation,
-  Actions,
-  Qualifiers,
-  Cloudinary,
-  CloudinaryImage,
-  CloudinaryVideo,
-  CloudinaryMedia,
-  CloudinaryFile,
-  createCloudinaryLegacyURL,
-  CloudinaryURLGEN,
-  CloudinaryURLGEN as default
-};
+export {Transformation} from "./transformation/Transformation.js";
+export {ImageTransformation} from "./transformation/ImageTransformation.js";
+export {VideoTransformation} from "./transformation/VideoTransformation.js";
+export {CloudinaryImage} from "./assets/CloudinaryImage.js";
+export {CloudinaryVideo} from "./assets/CloudinaryVideo.js";
+export {CloudinaryFile} from "./assets/CloudinaryFile.js";
+export {CloudinaryMedia} from "./assets/CloudinaryMedia.js";
+export {Cloudinary} from "./instance/Cloudinary.js";
+export {createCloudinaryLegacyURL} from "./backwards/createCloudinaryLegacyURL.js";
+export * as Actions from './actions.js';
+export * as Qualifiers from './qualifiers.js';
diff --git a/src/qualifiers.ts b/src/qualifiers.ts
@@ -0,0 +1,31 @@
+export {TextDecoration} from "./qualifiers/textDecoration";
+export {TextAlignment} from "./qualifiers/textAlignment";
+export {Stroke} from "./qualifiers/textStroke";
+export {StreamingProfile} from "./qualifiers/streamingProfile";
+export {SimulateColorBlind} from "./qualifiers/simulateColorBlind";
+export {RotationMode} from "./qualifiers/rotationMode";
+export {Region} from "./qualifiers/region";
+export {Quality} from "./qualifiers/quality";
+export {Position} from "./qualifiers/position";
+export {OutlineMode} from "./qualifiers/outlineMode";
+export {ImproveMode} from "./qualifiers/improveMode";
+export {GradientDirection} from "./qualifiers/gradientDirection";
+export {Format} from "./qualifiers/format";
+export {FontWeight} from "./qualifiers/fontWeight";
+export {FontStyle} from "./qualifiers/fontStyle";
+export {FontHinting} from "./qualifiers/fontHinting";
+export {Expression} from "./qualifiers/expression";
+export {Dither} from "./qualifiers/dither";
+export {ColorSpace} from "./qualifiers/colorSpace";
+export {Color} from "./qualifiers/color";
+export {Background} from "./qualifiers/background";
+export {AudioFrequency} from "./qualifiers/audioFrequency";
+export {AudioCodec} from "./qualifiers/audioCodec";
+export {AspectRatio} from "./qualifiers/aspectRatio";
+export {ArtisticFilter} from "./qualifiers/artisticFilter";
+export {AnimatedFormat} from "./qualifiers/animatedFormat";
+export {Gravity} from "./qualifiers/gravity";
+export {ChromaSubSampling} from "./qualifiers/chromaSubSampling";
+export {Dpr} from "./qualifiers/dpr";
+export {Source} from "./qualifiers/source";
+export {GradientFade} from "./qualifiers/GradientFade";

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`import ICloudConfig from "../../src/config/interfaces/Config/ICloudConfig";`
`2`	`2`	`import IURLConfig from "../../src/config/interfaces/Config/IURLConfig";`
`3`		`-import {CloudinaryFile} from "../../src";`
	`3`	`+import {CloudinaryFile} from "../../src/assets/CloudinaryFile";`
`4`	`4`
`5`	`5`	`/**`
`6`	`6`	`*`