New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

@cloudinary/html

Package Overview
Dependencies
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cloudinary/html - npm Package Compare versions

Comparing version
1.9.0
 to
1.9.1
setupTests.d.ts
+30
setupTests.js
expect.extend({
toEqualAnalyticsToken: function (received, expected) {
if (!received) {
return {
pass: false,
message: function () { return "Expected ".concat(received, " to be a valid string"); }
};
}
var parts = received.split("?_a=");
if (parts.length === 1) {
return {
pass: false,
message: function () { return "Expected ".concat(received, " to be have an analytics token"); }
};
}
var token = parts[1];
if (token === expected) {
return {
pass: true,
message: function () { return "Expected ".concat(received, " not to be a valid ISO date string"); },
};
}
else {
return {
pass: false,
message: function () { return "Expected ".concat(token, " to equal ").concat(expected); }
};
}
},
});
+9
-0
CHANGELOG.md

@@ -0,1 +1,10 @@

1.9.1 / 2023-02-06
==================
Html
-------
* Add analytics features to plugins
1.9.0 / 2023-01-17

@@ -2,0 +11,0 @@ ==================

+10
-10
index.d.ts
/**
* Import and export all needed types
*/
export { HtmlImageLayer } from './layers/htmlImageLayer.js';
export { HtmlVideoLayer } from './layers/htmlVideoLayer.js';
export { responsive } from './plugins/responsive.js';
export { lazyload } from './plugins/lazyload.js';
export { accessibility } from './plugins/accessibility.js';
export { placeholder } from './plugins/placeholder.js';
export { isBrowser } from './utils/isBrowser.js';
export { serverSideSrc } from './utils/serverSideSrc.js';
export { Plugins, VideoSources, VideoPoster, PictureSources } from './types.js';
export { cancelCurrentlyRunningPlugins } from './utils/cancelCurrentlyRunningPlugins.js';
export { HtmlImageLayer } from './layers/htmlImageLayer';
export { HtmlVideoLayer } from './layers/htmlVideoLayer';
export { responsive } from './plugins/responsive';
export { lazyload } from './plugins/lazyload';
export { accessibility } from './plugins/accessibility';
export { placeholder } from './plugins/placeholder';
export { isBrowser } from './utils/isBrowser';
export { serverSideSrc } from './utils/serverSideSrc';
export { Plugins, VideoSources, VideoPoster, PictureSources } from './types';
export { cancelCurrentlyRunningPlugins } from './utils/cancelCurrentlyRunningPlugins';
+9
-9
index.js
/**
* Import and export all needed types
*/
export { HtmlImageLayer } from './layers/htmlImageLayer.js';
export { HtmlVideoLayer } from './layers/htmlVideoLayer.js';
export { responsive } from './plugins/responsive.js';
export { lazyload } from './plugins/lazyload.js';
export { accessibility } from './plugins/accessibility.js';
export { placeholder } from './plugins/placeholder.js';
export { isBrowser } from './utils/isBrowser.js';
export { serverSideSrc } from './utils/serverSideSrc.js';
export { cancelCurrentlyRunningPlugins } from './utils/cancelCurrentlyRunningPlugins.js';
export { HtmlImageLayer } from './layers/htmlImageLayer';
export { HtmlVideoLayer } from './layers/htmlVideoLayer';
export { responsive } from './plugins/responsive';
export { lazyload } from './plugins/lazyload';
export { accessibility } from './plugins/accessibility';
export { placeholder } from './plugins/placeholder';
export { isBrowser } from './utils/isBrowser';
export { serverSideSrc } from './utils/serverSideSrc';
export { cancelCurrentlyRunningPlugins } from './utils/cancelCurrentlyRunningPlugins';
+4
-4
layers/htmlImageLayer.d.ts
import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";
import { Plugins, HtmlPluginState, AnalyticsOptions } from '../types.js';
import { Plugins, HtmlPluginState, BaseAnalyticsOptions } from '../types';
export declare class HtmlImageLayer {
private imgElement;
htmlPluginState: HtmlPluginState;
constructor(element: HTMLImageElement | null, userCloudinaryImage: CloudinaryImage, plugins?: Plugins, analyticsOptions?: AnalyticsOptions);
constructor(element: HTMLImageElement | null, userCloudinaryImage: CloudinaryImage, plugins?: Plugins, baseAnalyticsOptions?: BaseAnalyticsOptions);
/**

@@ -11,5 +11,5 @@ * Called when component is updated and re-triggers render

* @param plugins
* @param analyticsOptions
* @param baseAnalyticsOptions
*/
update(userCloudinaryImage: CloudinaryImage, plugins: any, analyticsOptions?: AnalyticsOptions): void;
update(userCloudinaryImage: CloudinaryImage, plugins: any, baseAnalyticsOptions?: BaseAnalyticsOptions): void;
}
+11
-9
layers/htmlImageLayer.js
import cloneDeep from 'lodash.clonedeep';
import { render } from '../utils/render.js';
import { render } from '../utils/render';
import { getAnalyticsOptions } from "../utils/analytics";
var HtmlImageLayer = /** @class */ (function () {
function HtmlImageLayer(element, userCloudinaryImage, plugins, analyticsOptions) {
function HtmlImageLayer(element, userCloudinaryImage, plugins, baseAnalyticsOptions) {
var _this = this;

@@ -10,6 +10,7 @@ this.imgElement = element;

var pluginCloudinaryImage = cloneDeep(userCloudinaryImage);
render(element, pluginCloudinaryImage, plugins, this.htmlPluginState, analyticsOptions)
.then(function () {
render(element, pluginCloudinaryImage, plugins, this.htmlPluginState, baseAnalyticsOptions)
.then(function (pluginResponse) {
_this.htmlPluginState.pluginEventSubscription.forEach(function (fn) { fn(); });
_this.imgElement.setAttribute('src', pluginCloudinaryImage.toURL(getAnalyticsOptions(analyticsOptions)));
var analyticsOptions = getAnalyticsOptions(baseAnalyticsOptions, pluginResponse);
_this.imgElement.setAttribute('src', pluginCloudinaryImage.toURL(analyticsOptions));
});

@@ -21,10 +22,11 @@ }

* @param plugins
* @param analyticsOptions
* @param baseAnalyticsOptions
*/
HtmlImageLayer.prototype.update = function (userCloudinaryImage, plugins, analyticsOptions) {
HtmlImageLayer.prototype.update = function (userCloudinaryImage, plugins, baseAnalyticsOptions) {
var _this = this;
var pluginCloudinaryImage = cloneDeep(userCloudinaryImage);
render(this.imgElement, pluginCloudinaryImage, plugins, this.htmlPluginState)
.then(function () {
_this.imgElement.setAttribute('src', pluginCloudinaryImage.toURL(getAnalyticsOptions(analyticsOptions)));
.then(function (pluginResponse) {
var featuredAnalyticsOptions = getAnalyticsOptions(baseAnalyticsOptions, pluginResponse);
_this.imgElement.setAttribute('src', pluginCloudinaryImage.toURL(featuredAnalyticsOptions));
});

@@ -31,0 +33,0 @@ };

+1
-1
layers/htmlVideoLayer.d.ts

@@ -1,2 +0,2 @@

import { Plugins, HtmlPluginState, VideoSources, VideoType, VideoPoster } from '../types.js';
import { Plugins, HtmlPluginState, VideoSources, VideoType, VideoPoster } from '../types';
import { CloudinaryVideo } from "@cloudinary/url-gen";

@@ -3,0 +3,0 @@ export declare class HtmlVideoLayer {

+2
-2
layers/htmlVideoLayer.js
import cloneDeep from 'lodash.clonedeep';
import { render } from '../utils/render.js';
import { VIDEO_MIME_TYPES } from "../utils/internalConstants.js";
import { render } from '../utils/render';
import { VIDEO_MIME_TYPES } from "../utils/internalConstants";
var ANALYTICS_DELIMITER = '?_a=';

@@ -5,0 +5,0 @@ var HtmlVideoLayer = /** @class */ (function () {

+10
-3
package.json
{
"name": "@cloudinary/html",
"version": "1.9.0",
"version": "1.9.1",
"description": "An HTML wrapper for Cloudinary",

@@ -15,3 +15,5 @@ "main": "./index.js",

"postbuild": "cp index.esm.* ./dist && cp index.umd.* ./dist",
"prepare-build": "cp package.json ./dist"
"prepare-build": "cp package.json ./dist",
"test": "jest --config jest.config.json",
"test-coverage": "jest --coverage"
},

@@ -24,6 +26,11 @@ "devDependencies": {

"@rollup/plugin-node-resolve": "^13.0.0",
"@types/jest": "^29.4.0",
"core-js": "^3.23.5",
"jest": "^29.3.1",
"jest-environment-jsdom": "^29.3.1",
"rollup": "^2.52.2",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-typescript2": "^0.30.0"
"rollup-plugin-typescript2": "^0.34.1",
"ts-jest": "^29.0.5",
"tslib": "^2.0.0"
},

@@ -30,0 +37,0 @@ "dependencies": {

+3
-3
plugins/accessibility.d.ts
import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";
import { Plugin, AccessibilityMode, HtmlPluginState } from "../types.js";
import { Plugin, AccessibilityMode, HtmlPluginState, PluginResponse } from "../types";
/**

@@ -15,3 +15,3 @@ * @namespace

* @description Accessibility plugin
* @param mode {accessibilityMode} The accessibility mode to use. Possible modes: 'darkmode' | 'brightmode' | 'monochrome' | 'colorblind'. Default: 'darkmode'.
* @param mode {AccessibilityMode} The accessibility mode to use. Possible modes: 'darkmode' | 'brightmode' | 'monochrome' | 'colorblind'. Default: 'darkmode'.
* @param element {HTMLImageElement} The image element.

@@ -21,2 +21,2 @@ * @param pluginCloudinaryImage {CloudinaryImage}

*/
export declare function accessibilityPlugin(mode: AccessibilityMode, element: HTMLImageElement, pluginCloudinaryImage: CloudinaryImage, htmlPluginState: HtmlPluginState): Promise<void | string> | boolean;
export declare function accessibilityPlugin(mode: AccessibilityMode, element: HTMLImageElement, pluginCloudinaryImage: CloudinaryImage, htmlPluginState: HtmlPluginState): Promise<PluginResponse> | boolean;
+5
-5
plugins/accessibility.js

@@ -1,4 +0,4 @@

import { ACCESSIBILITY_MODES } from '../utils/internalConstants.js';
import { isBrowser } from "../utils/isBrowser.js";
import { isImage } from "../utils/isImage.js";
import { ACCESSIBILITY_MODES } from '../utils/internalConstants';
import { isBrowser } from "../utils/isBrowser";
import { isImage } from "../utils/isImage";
/**

@@ -17,3 +17,3 @@ * @namespace

* @description Accessibility plugin
* @param mode {accessibilityMode} The accessibility mode to use. Possible modes: 'darkmode' | 'brightmode' | 'monochrome' | 'colorblind'. Default: 'darkmode'.
* @param mode {AccessibilityMode} The accessibility mode to use. Possible modes: 'darkmode' | 'brightmode' | 'monochrome' | 'colorblind'. Default: 'darkmode'.
* @param element {HTMLImageElement} The image element.

@@ -36,3 +36,3 @@ * @param pluginCloudinaryImage {CloudinaryImage}

pluginCloudinaryImage.effect(ACCESSIBILITY_MODES[mode]);
resolve();
resolve({ accessibility: true });
});

@@ -39,0 +39,0 @@ }

+1
-1
plugins/lazyload.d.ts

@@ -1,2 +0,2 @@

import { Plugin } from '../types.js';
import { Plugin } from '../types';
/**

@@ -3,0 +3,0 @@ * @namespace

+2
-2
plugins/lazyload.js

@@ -1,2 +0,2 @@

import { isBrowser } from "../utils/isBrowser.js";
import { isBrowser } from "../utils/isBrowser";
/**

@@ -37,3 +37,3 @@ * @namespace

return new Promise(function (resolve) {
var onIntersect = function () { return (resolve()); };
var onIntersect = function () { return (resolve({ lazyload: true })); };
var unobserve = detectIntersection(element, onIntersect, rootMargin, threshold);

@@ -40,0 +40,0 @@ htmlPluginState.cleanupCallbacks.push(function () {

+7
-6
plugins/placeholder.js
import cloneDeep from 'lodash.clonedeep';
import { PLACEHOLDER_IMAGE_OPTIONS, singleTransparentPixel } from '../utils/internalConstants.js';
import { isBrowser } from "../utils/isBrowser.js";
import { PLACEHOLDER_IMAGE_OPTIONS, singleTransparentPixel } from '../utils/internalConstants';
import { isBrowser } from "../utils/isBrowser";
import { Action } from "@cloudinary/url-gen/internal/Action";

@@ -25,5 +25,5 @@ import { isImage } from "../utils/isImage";

* @param htmlPluginState {htmlPluginState} Holds cleanup callbacks and event subscriptions.
* @param analyticsOptions {AnalyticsOptions} analytics options for the url to be created
* @param analyticsOptions {BaseAnalyticsOptions} analytics options for the url to be created
*/
function placeholderPlugin(mode, element, pluginCloudinaryImage, htmlPluginState, analyticsOptions) {
function placeholderPlugin(mode, element, pluginCloudinaryImage, htmlPluginState, baseAnalyticsOptions) {
// @ts-ignore

@@ -64,4 +64,5 @@ // If we're using an invalid mode, we default to vectorize

});
var analyticsOptions = getAnalyticsOptions(baseAnalyticsOptions, { placeholder: true });
// Set the SRC of the imageElement to the URL of the placeholder Image
element.src = placeholderClonedImage.toURL(getAnalyticsOptions(analyticsOptions));
element.src = placeholderClonedImage.toURL(analyticsOptions);
//Fallback, if placeholder errors, load a single transparent pixel

@@ -91,3 +92,3 @@ element.onerror = function () {

var largeImage = new Image();
largeImage.src = pluginCloudinaryImage.toURL(getAnalyticsOptions(analyticsOptions));
largeImage.src = pluginCloudinaryImage.toURL(analyticsOptions);
largeImage.onload = function () {

@@ -94,0 +95,0 @@ resolve();

+1
-1
plugins/responsive.d.ts

@@ -1,2 +0,2 @@

import { Plugin } from "../types.js";
import { Plugin } from "../types";
/**

@@ -3,0 +3,0 @@ * @namespace

+8
-7
plugins/responsive.js
import { scale } from "@cloudinary/url-gen/actions/resize";
import debounce from 'lodash.debounce';
import { isNum } from '../utils/isNum.js';
import { isBrowser } from "../utils/isBrowser.js";
import { isNum } from '../utils/isNum';
import { isBrowser } from "../utils/isBrowser";
import { Action } from "@cloudinary/url-gen/internal/Action";
import { isImage } from "../utils/isImage.js";
import { isImage } from "../utils/isImage";
import { getAnalyticsOptions } from '../utils/analytics';

@@ -27,5 +27,5 @@ /**

* @param htmlPluginState {HtmlPluginState} holds cleanup callbacks and event subscriptions
* @param analyticsOptions {AnalyticsOptions} analytics options for the url to be created
* @param analyticsOptions {BaseAnalyticsOptions} analytics options for the url to be created
*/
function responsivePlugin(steps, element, responsiveImage, htmlPluginState, analyticsOptions) {
function responsivePlugin(steps, element, responsiveImage, htmlPluginState, baseAnalyticsOptions) {
if (!isBrowser())

@@ -40,2 +40,3 @@ return true;

});
var analyticsOptions = getAnalyticsOptions(baseAnalyticsOptions, { responsive: true });
// Use a tagged generic action that can be later searched and replaced.

@@ -51,3 +52,3 @@ responsiveImage.addAction(new Action().setActionTag('responsive'));

});
resolve();
resolve({ responsive: true });
});

@@ -65,3 +66,3 @@ }

updateByContainerWidth(steps, element, responsiveImage);
element.src = responsiveImage.toURL(getAnalyticsOptions(analyticsOptions));
element.src = responsiveImage.toURL(analyticsOptions);
}

@@ -68,0 +69,0 @@ /**

+8
-2
types.d.ts
import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";
import { VideoCodecAction } from "@cloudinary/url-gen/actions/transcode/VideoCodecAction";
export type Plugin = (element: HTMLImageElement | HTMLVideoElement, cloudinaryImage: CloudinaryImage, htmlPluginState?: HtmlPluginState, analyticsOptions?: AnalyticsOptions) => Promise<string | void>;
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 Plugins = Plugin[];
export type PluginResponse = 'canceled' | void | Features;
export type AccessibilityMode = 'darkmode' | 'brightmode' | 'monochrome' | 'colorblind';

@@ -29,3 +31,3 @@ export type PlaceholderMode = 'vectorize' | 'pixelate' | 'blur' | 'predominant-color';

};
export type AnalyticsOptions = {
export type BaseAnalyticsOptions = {
sdkSemver: string;

@@ -35,2 +37,6 @@ techVersion: string;

};
export type AnalyticsOptions = Parameters<CloudinaryImage['toURL']>[0];
type FeatureNames = Omit<ITrackedPropertiesThroughAnalytics, 'sdkCode' | 'sdkSemver' | 'techVersion'>;
export type Features = Partial<Record<keyof FeatureNames, boolean>>;
export type VideoPoster = CloudinaryImage | 'auto';
export {};
+2
-8
utils/analytics.d.ts

@@ -1,8 +0,2 @@

import { AnalyticsOptions } from "../types";
export declare const getAnalyticsOptions: (options?: AnalyticsOptions) => {
trackedAnalytics: {
sdkCode: string;
sdkSemver: string;
techVersion: string;
};
};
import { BaseAnalyticsOptions, AnalyticsOptions, Features } from "../types";
export declare const getAnalyticsOptions: (options?: BaseAnalyticsOptions, features?: void | Features) => AnalyticsOptions;
+14
-6
utils/analytics.js

@@ -1,9 +0,17 @@

export var getAnalyticsOptions = function (options) {
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);
};
export var getAnalyticsOptions = function (options, features) {
if (features === void 0) { features = {}; }
return options ? {
trackedAnalytics: {
sdkCode: options.sdkCode,
sdkSemver: options.sdkSemver,
techVersion: options.techVersion,
}
trackedAnalytics: __assign({ sdkCode: options.sdkCode, sdkSemver: options.sdkSemver, techVersion: options.techVersion }, features)
} : null;
};
+1
-1
utils/cancelCurrentlyRunningPlugins.d.ts

@@ -1,2 +0,2 @@

import { HtmlPluginState } from '../types.js';
import { HtmlPluginState } from '../types';
/**

@@ -3,0 +3,0 @@ * Cancels currently running plugins. This is called from unmount or update

+3
-3
utils/render.d.ts

@@ -1,2 +0,2 @@

import { Plugins, HtmlPluginState, AnalyticsOptions } from '../types.js';
import { Plugins, HtmlPluginState, BaseAnalyticsOptions } from '../types';
import { CloudinaryVideo, CloudinaryImage } from "@cloudinary/url-gen";

@@ -10,4 +10,4 @@ /**

* @param pluginState {htmlPluginState} Holds cleanup callbacks and event subscriptions
* @param analyticsOptions {AnalyticsOptions} analytics options for the url to be created
* @param analyticsOptions {BaseAnalyticsOptions} analytics options for the url to be created
*/
export declare function render(element: HTMLImageElement | HTMLVideoElement, pluginCloudinaryAsset: CloudinaryImage | CloudinaryVideo, plugins: Plugins, pluginState: HtmlPluginState, analyticsOptions?: AnalyticsOptions): Promise<void>;
export declare function render(element: HTMLImageElement | HTMLVideoElement, pluginCloudinaryAsset: CloudinaryImage | CloudinaryVideo, plugins: Plugins, pluginState: HtmlPluginState, analyticsOptions?: BaseAnalyticsOptions): Promise<void | Partial<Record<"accessibility" | "lazyload" | "responsive" | "placeholder", boolean>>>;
+4
-1
utils/render.js

@@ -44,3 +44,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {

* @param pluginState {htmlPluginState} Holds cleanup callbacks and event subscriptions
* @param analyticsOptions {AnalyticsOptions} analytics options for the url to be created
* @param analyticsOptions {BaseAnalyticsOptions} analytics options for the url to be created
*/

@@ -65,2 +65,5 @@ export function render(element, pluginCloudinaryAsset, plugins, pluginState, analyticsOptions) {

}
else {
return [2 /*return*/, response];
}
_a.label = 3;

@@ -67,0 +70,0 @@ case 3:

+2
-2
utils/serverSideSrc.d.ts

@@ -8,3 +8,3 @@ /**

import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";
import { AnalyticsOptions, Plugins } from "../types.js";
export declare function serverSideSrc(plugins?: Plugins, serverCloudinaryImage?: CloudinaryImage, analyticsOptions?: AnalyticsOptions): string;
import { BaseAnalyticsOptions, Plugins } from "../types";
export declare function serverSideSrc(plugins?: Plugins, serverCloudinaryImage?: CloudinaryImage, analyticsOptions?: BaseAnalyticsOptions): string;
index.esm.js

Sorry, the diff of this file is too big to display

index.esm.js.map

Sorry, the diff of this file is too big to display

index.umd.js

Sorry, the diff of this file is too big to display

index.umd.js.map

Sorry, the diff of this file is too big to display