@cloudinary/html - npm Package Compare versions

Comparing version 1.11.2 to 1.12.0

utils/isPluginUsed.d.ts

+import { Plugin } from "../types";
+declare const initialPlugins: {
+    accessibility: boolean;
+    lazyload: boolean;
+    placeholder: boolean;
+    responsive: boolean;
+};
+export declare const isPluginUsed: (plugins: Plugin[], pluginType: keyof typeof initialPlugins) => boolean;
+export {};

utils/isPluginUsed.js

+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var initialPlugins = {
+    accessibility: false,
+    lazyload: false,
+    placeholder: false,
+    responsive: false,
+};
+var getPluginType = function (name) { return name.replace('bound ', '').replace('Plugin', ''); };
+export var isPluginUsed = function (plugins, pluginType) {
+    if (plugins === void 0) { plugins = []; }
+    var usedPlugins = plugins.reduce(function (used, _a) {
+        var _b;
+        var name = _a.name;
+        return (__assign(__assign({}, used), (_b = {}, _b[getPluginType(name)] = true, _b)));
+    }, initialPlugins);
+    return usedPlugins[pluginType];
+};

package.json

 {
   "name": "@cloudinary/html",
-  "version": "1.11.2",
+  "version": "1.12.0",
   "description": "An HTML wrapper for Cloudinary",
@@ -22,3 +22,3 @@ "main": "./index.js",
     "@babel/preset-typescript": "^7.14.5",
-    "@cloudinary/url-gen": "^1.8.7",
+    "@cloudinary/url-gen": "^1.16.0",
     "@rollup/plugin-commonjs": "^19.0.0",
@@ -25,0 +25,0 @@ "@rollup/plugin-node-resolve": "^13.0.0",

plugins/accessibility.d.ts

@@ -20,2 +20,2 @@ import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";
  */
-export declare function accessibilityPlugin(mode: AccessibilityMode, element: HTMLImageElement, pluginCloudinaryImage: CloudinaryImage, htmlPluginState: HtmlPluginState): Promise<PluginResponse> | boolean;
+export declare function accessibilityPlugin(mode: AccessibilityMode, element: HTMLImageElement, pluginCloudinaryImage: CloudinaryImage, htmlPluginState: HtmlPluginState, plugins?: Plugin[]): Promise<PluginResponse> | boolean;

plugins/accessibility.js

@@ -22,3 +22,3 @@ import { ACCESSIBILITY_MODES } from '../utils/internalConstants';
  */
-export function accessibilityPlugin(mode, element, pluginCloudinaryImage, htmlPluginState) {
+export function accessibilityPlugin(mode, element, pluginCloudinaryImage, htmlPluginState, plugins) {
     if (isBrowser()) {
@@ -25,0 +25,0 @@ if (!isImage(element))

plugins/lazyload.js

@@ -30,3 +30,3 @@ import { isBrowser } from "../utils/isBrowser";
  */
-function lazyloadPlugin(rootMargin, threshold, element, cloudinaryImage, htmlPluginState) {
+function lazyloadPlugin(rootMargin, threshold, element, cloudinaryImage, htmlPluginState, plugins) {
     if (rootMargin === void 0) { rootMargin = '0px'; }
@@ -67,3 +67,3 @@ if (threshold === void 0) { threshold = 0.1; }
             onIntersect();
-            return;
+            return function () { };
         }
@@ -70,0 +70,0 @@ // Detect intersection with given element using IntersectionObserver

plugins/placeholder.js

@@ -27,3 +27,3 @@ import cloneDeep from 'lodash.clonedeep';
  */
-function placeholderPlugin(mode, element, pluginCloudinaryImage, htmlPluginState, baseAnalyticsOptions) {
+function placeholderPlugin(mode, element, pluginCloudinaryImage, htmlPluginState, baseAnalyticsOptions, plugins) {
     // @ts-ignore
@@ -30,0 +30,0 @@ // If we're using an invalid mode, we default to vectorize

plugins/responsive.js

@@ -8,2 +8,3 @@ import { scale } from "@cloudinary/url-gen/actions/resize";
 import { getAnalyticsOptions } from '../utils/analytics';
+import { isPluginUsed } from "../utils/isPluginUsed";
 /**
@@ -30,3 +31,3 @@ * @namespace
  */
-function responsivePlugin(steps, element, responsiveImage, htmlPluginState, baseAnalyticsOptions) {
+function responsivePlugin(steps, element, responsiveImage, htmlPluginState, baseAnalyticsOptions, plugins) {
     if (!isBrowser())
@@ -44,4 +45,10 @@ return true;
         responsiveImage.addAction(new Action().setActionTag('responsive'));
-        // Immediately run the resize plugin, ensuring that first render gets a responsive image.
-        onResize(steps, element, responsiveImage, analyticsOptions);
+        var shouldRunImmediately = !isPluginUsed(plugins, 'placeholder');
+        if (shouldRunImmediately) {
+            // Immediately run the resize plugin, ensuring that first render gets a responsive image.
+            onResize(steps, element, responsiveImage, analyticsOptions);
+        }
+        else {
+            updateByContainerWidth(steps, element, responsiveImage);
+        }
         var resizeRef;
@@ -48,0 +55,0 @@ htmlPluginState.pluginEventSubscription.push(function () {

types.d.ts

 import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";
 import { VideoCodecAction } from "@cloudinary/url-gen/actions/transcode/VideoCodecAction";
 import { ITrackedPropertiesThroughAnalytics } from "@cloudinary/url-gen/sdkAnalytics/interfaces/ITrackedPropertiesThroughAnalytics";
-export type Plugin = (element: HTMLImageElement | HTMLVideoElement, cloudinaryImage: CloudinaryImage, htmlPluginState?: HtmlPluginState, baseAnalyticsOptions?: BaseAnalyticsOptions) => Promise<PluginResponse>;
+export type Plugin = (element: HTMLImageElement | HTMLVideoElement, cloudinaryImage: CloudinaryImage, htmlPluginState?: HtmlPluginState, baseAnalyticsOptions?: BaseAnalyticsOptions, plugins?: Plugins) => Promise<PluginResponse>;
 export type Plugins = Plugin[];
@@ -37,5 +37,5 @@ export type PluginResponse = 'canceled' | void | Features;
 export type AnalyticsOptions = Parameters<CloudinaryImage['toURL']>[0];
-type FeatureNames = Omit<ITrackedPropertiesThroughAnalytics, 'sdkCode' | 'sdkSemver' | 'techVersion'>;
+type FeatureNames = Pick<ITrackedPropertiesThroughAnalytics, 'accessibility' | 'lazyload' | 'responsive' | 'placeholder'>;
 export type Features = Partial<Record<keyof FeatureNames, boolean>>;
 export type VideoPoster = CloudinaryImage | 'auto';
 export {};

utils/render.js

@@ -58,3 +58,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
                     if (!(i < plugins.length)) return [3 /*break*/, 4];
-                    return [4 /*yield*/, plugins[i](element, pluginCloudinaryAsset, pluginState, analyticsOptions)];
+                    return [4 /*yield*/, plugins[i](element, pluginCloudinaryAsset, pluginState, analyticsOptions, plugins)];
                 case 2:
@@ -61,0 +61,0 @@ response = _a.sent();

New alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1193836

2.94%

Number of package files

46

4.55%

Lines of code

12294

2.49%

Worsened metrics

Number of low supply chain risk alerts

52

4%

No dependency changes