@cloudinary/react - npm Package Compare versions

Comparing version 1.0.0-alpha.3 to 1.0.0-alpha.4

AdvancedImage.d.ts

+import React from 'react';
+import { CloudinaryImage } from '@cloudinary/base/assets/CloudinaryImage';
+import { HtmlLayer, plugins } from '@cloudinary/html';
+interface ImgProps {
+    cldImg: CloudinaryImage;
+    plugins?: plugins;
+    [x: string]: any;
+}
+/**
+ * @mixin ReactSDK
+ * @description The Coudinday React SDK contains components like <AdvancedImage> to easily render your media assets from Cloudinary.
+ * The SDK also comes with support for optional js plugins that make the components smart, with features like lazy loading, placeholder, accessibility & responsiveness
+ *
+ * @example
+ * <caption>
+ *  Please note that the order of the plugins is important. See home for more details.
+ * </caption>
+ * // Example
+ * import {CloudinaryImage} from "@cloudinary/base/assets/CloudinaryImage";
+ * import {
+ *  AdvancedImage,
+ *  accessibility,
+ *  responsive,
+ *  lazyload,
+ *  placeholder
+ * } from '@cloudinary/react';
+ *
+ * const App = () => {
+ *
+ * const myCld = new Cloudinary({ cloudName: 'demo'});
+ * let img = myCld().image('sample');
+ *
+ *   return (
+ *      <div>
+ *         <div style={{height: "1000px"}}/>
+ *         <AdvancedImage
+ *            cldImg={img}
+ *            plugins={[lazyload(), responsive(100), placeholder()]}
+ *         />
+ *      </div>
+ *   )
+ * };
+ *
+ *
+ *
+ *
+ *
+ */
+/**
+ * @memberOf ReactSDK
+ * @type {Component}
+ * @description The Cloudinary image component
+ * @prop {CloudinaryImage} cldImg Generated by @cloudinary/base
+ * @prop {plugins} plugins Advanced image component plugins accessibility(), responsive(), lazyload(), placeholder()
+ */
+declare class AdvancedImage extends React.Component<ImgProps> {
+    imageRef: React.RefObject<HTMLImageElement>;
+    htmlLayerInstance: HtmlLayer;
+    constructor(props: ImgProps);
+    /**
+     * On mount creates a new HTMLLayer instance and initialises with ref to img element,
+     * user generated cloudinaryImage and the plugins to be used
+     */
+    componentDidMount(): void;
+    /**
+     * On update we cancel running plugins and update image instance with the state of user
+     * cloudinaryImage and the state of plugins
+     */
+    componentDidUpdate(): void;
+    /**
+     * On unmount we cancel the currently running plugins
+     */
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+export { AdvancedImage };

index.esm.js

+import{HtmlLayer as t,isBrowser as n,serverSideSrc as e}from"@cloudinary/html";export{accessibility,lazyload,placeholder,responsive}from"@cloudinary/html";import r from"react";var i=function(i){var o,s;function c(t){var n;return(n=i.call(this,t)||this).imageRef=r.createRef(),n}s=i,(o=c).prototype=Object.create(s.prototype),o.prototype.constructor=o,o.__proto__=s;var p=c.prototype;return p.componentDidMount=function(){this.htmlLayerInstance=new t(this.imageRef.current,this.props.cldImg,this.props.plugins)},p.componentDidUpdate=function(){this.htmlLayerInstance.cancelCurrentlyRunningPlugins(),this.htmlLayerInstance.update(this.props.cldImg,this.props.plugins)},p.componentWillUnmount=function(){this.htmlLayerInstance.cancelCurrentlyRunningPlugins()},p.render=function(){var t=function(t,n){if(null==t)return{};var e,r,i={},o=Object.keys(t);for(r=0;r<o.length;r++)n.indexOf(e=o[r])>=0||(i[e]=t[e]);return i}(this.props,["cldImg","plugins"]);if(n())return r.createElement("img",Object.assign({suppressHydrationWarning:!0},t,{ref:this.imageRef}));var i=e(this.props.plugins,this.props.cldImg);return r.createElement("img",Object.assign({},t,{src:i}))},c}(r.Component);export{i as AdvancedImage};
+//# sourceMappingURL=index.esm.js.map

index.esm.js.map

+{"version":3,"file":"index.esm.js","sources":["../src/AdvancedImage.tsx"],"sourcesContent":["import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/base/assets/CloudinaryImage';\n\nimport {\n  HtmlLayer,\n  plugins,\n  isBrowser,\n  serverSideSrc\n} from '@cloudinary/html'\n\ninterface ImgProps {\n  cldImg: CloudinaryImage,\n  plugins?: plugins,\n  [x: string]: any\n}\n\n/**\n * @mixin ReactSDK\n * @description The Coudinday React SDK contains components like <AdvancedImage> to easily render your media assets from Cloudinary.\n * The SDK also comes with support for optional js plugins that make the components smart, with features like lazy loading, placeholder, accessibility & responsiveness\n *\n * @example\n * <caption>\n *  Please note that the order of the plugins is important. See home for more details.\n * </caption>\n * // Example\n * import {CloudinaryImage} from \"@cloudinary/base/assets/CloudinaryImage\";\n * import {\n *  AdvancedImage,\n *  accessibility,\n *  responsive,\n *  lazyload,\n *  placeholder\n * } from '@cloudinary/react';\n *\n * const App = () => {\n *\n * const myCld = new Cloudinary({ cloudName: 'demo'});\n * let img = myCld().image('sample');\n *\n *   return (\n *      <div>\n *         <div style={{height: \"1000px\"}}/>\n *         <AdvancedImage\n *            cldImg={img}\n *            plugins={[lazyload(), responsive(100), placeholder()]}\n *         />\n *      </div>\n *   )\n * };\n *\n *\n *\n *\n *\n */\n\n/**\n * @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary image component\n * @prop {CloudinaryImage} cldImg Generated by @cloudinary/base\n * @prop {plugins} plugins Advanced image component plugins accessibility(), responsive(), lazyload(), placeholder()\n */\nclass AdvancedImage extends React.Component <ImgProps> {\n  imageRef: React.RefObject<HTMLImageElement>;\n  htmlLayerInstance: HtmlLayer;\n\n  constructor(props: ImgProps) {\n    super(props);\n    this.imageRef = React.createRef();\n  }\n\n  /**\n   * On mount creates a new HTMLLayer instance and initialises with ref to img element,\n   * user generated cloudinaryImage and the plugins to be used\n   */\n  componentDidMount() {\n    this.htmlLayerInstance = new HtmlLayer(\n      this.imageRef.current,\n      this.props.cldImg,\n      this.props.plugins\n    )\n  }\n\n  /**\n   * On update we cancel running plugins and update image instance with the state of user\n   * cloudinaryImage and the state of plugins\n   */\n  componentDidUpdate() {\n    this.htmlLayerInstance.cancelCurrentlyRunningPlugins();\n    // call html layer to update the dom again with plugins and reset toBeCanceled\n    this.htmlLayerInstance.update(this.props.cldImg, this.props.plugins)\n  }\n\n  /**\n   * On unmount we cancel the currently running plugins\n   */\n  componentWillUnmount() {\n    // safely cancel running events on unmount\n    this.htmlLayerInstance.cancelCurrentlyRunningPlugins()\n  }\n\n  render() {\n    const {\n      cldImg,\n      plugins,\n      ...otherProps // Assume any other props are for the base element\n    } = this.props;\n    if (isBrowser()) { // on client side render\n      return <img suppressHydrationWarning {...otherProps} ref={this.imageRef} />\n    } else { // on server side render\n      const src = serverSideSrc(\n        this.props.plugins,\n        this.props.cldImg\n      );\n      return <img {...otherProps} src={src} />\n    }\n  }\n}\n\nexport { AdvancedImage };\n"],"names":["AdvancedImage","props","_this","imageRef","React","createRef","componentDidMount","this","htmlLayerInstance","HtmlLayer","current","cldImg","plugins","componentDidUpdate","cancelCurrentlyRunningPlugins","update","componentWillUnmount","render","otherProps","isBrowser","suppressHydrationWarning","ref","src","serverSideSrc","Component"],"mappings":"gLAgEMA,IAAAA,sBAIJ,WAAYC,gBACVC,cAAMD,UACDE,SAAWC,EAAMC,gIAOxBC,kBAAA,WACEC,KAAKC,kBAAoB,IAAIC,EAC3BF,KAAKJ,SAASO,QACdH,KAAKN,MAAMU,OACXJ,KAAKN,MAAMW,YAQfC,mBAAA,WACEN,KAAKC,kBAAkBM,gCAEvBP,KAAKC,kBAAkBO,OAAOR,KAAKN,MAAMU,OAAQJ,KAAKN,MAAMW,YAM9DI,qBAAA,WAEET,KAAKC,kBAAkBM,mCAGzBG,OAAA,eAIOC,qIACDX,KAAKN,4BACT,GAAIkB,IACF,OAAOf,qCAAKgB,6BAA6BF,GAAYG,IAAKd,KAAKJ,YAE/D,IAAMmB,EAAMC,EACVhB,KAAKN,MAAMW,QACXL,KAAKN,MAAMU,QAEb,OAAOP,uCAASc,GAAYI,IAAKA,SApDXlB,EAAMoB"}

index.umd.js

+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@cloudinary/html"),require("react")):"function"==typeof define&&define.amd?define(["exports","@cloudinary/html","react"],t):t((e||self).react={},e.html,e.react)}(this,function(e,t,n){function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(n),o=function(e){var n,r;function o(t){var n;return(n=e.call(this,t)||this).imageRef=i.default.createRef(),n}r=e,(n=o).prototype=Object.create(r.prototype),n.prototype.constructor=n,n.__proto__=r;var c=o.prototype;return c.componentDidMount=function(){this.htmlLayerInstance=new t.HtmlLayer(this.imageRef.current,this.props.cldImg,this.props.plugins)},c.componentDidUpdate=function(){this.htmlLayerInstance.cancelCurrentlyRunningPlugins(),this.htmlLayerInstance.update(this.props.cldImg,this.props.plugins)},c.componentWillUnmount=function(){this.htmlLayerInstance.cancelCurrentlyRunningPlugins()},c.render=function(){var e=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(i[n]=e[n]);return i}(this.props,["cldImg","plugins"]);if(t.isBrowser())return i.default.createElement("img",Object.assign({suppressHydrationWarning:!0},e,{ref:this.imageRef}));var n=t.serverSideSrc(this.props.plugins,this.props.cldImg);return i.default.createElement("img",Object.assign({},e,{src:n}))},o}(i.default.Component);Object.defineProperty(e,"accessibility",{enumerable:!0,get:function(){return t.accessibility}}),Object.defineProperty(e,"lazyload",{enumerable:!0,get:function(){return t.lazyload}}),Object.defineProperty(e,"placeholder",{enumerable:!0,get:function(){return t.placeholder}}),Object.defineProperty(e,"responsive",{enumerable:!0,get:function(){return t.responsive}}),e.AdvancedImage=o});
+//# sourceMappingURL=index.umd.js.map

index.umd.js.map

+{"version":3,"file":"index.umd.js","sources":["../src/AdvancedImage.tsx"],"sourcesContent":["import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/base/assets/CloudinaryImage';\n\nimport {\n  HtmlLayer,\n  plugins,\n  isBrowser,\n  serverSideSrc\n} from '@cloudinary/html'\n\ninterface ImgProps {\n  cldImg: CloudinaryImage,\n  plugins?: plugins,\n  [x: string]: any\n}\n\n/**\n * @mixin ReactSDK\n * @description The Coudinday React SDK contains components like <AdvancedImage> to easily render your media assets from Cloudinary.\n * The SDK also comes with support for optional js plugins that make the components smart, with features like lazy loading, placeholder, accessibility & responsiveness\n *\n * @example\n * <caption>\n *  Please note that the order of the plugins is important. See home for more details.\n * </caption>\n * // Example\n * import {CloudinaryImage} from \"@cloudinary/base/assets/CloudinaryImage\";\n * import {\n *  AdvancedImage,\n *  accessibility,\n *  responsive,\n *  lazyload,\n *  placeholder\n * } from '@cloudinary/react';\n *\n * const App = () => {\n *\n * const myCld = new Cloudinary({ cloudName: 'demo'});\n * let img = myCld().image('sample');\n *\n *   return (\n *      <div>\n *         <div style={{height: \"1000px\"}}/>\n *         <AdvancedImage\n *            cldImg={img}\n *            plugins={[lazyload(), responsive(100), placeholder()]}\n *         />\n *      </div>\n *   )\n * };\n *\n *\n *\n *\n *\n */\n\n/**\n * @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary image component\n * @prop {CloudinaryImage} cldImg Generated by @cloudinary/base\n * @prop {plugins} plugins Advanced image component plugins accessibility(), responsive(), lazyload(), placeholder()\n */\nclass AdvancedImage extends React.Component <ImgProps> {\n  imageRef: React.RefObject<HTMLImageElement>;\n  htmlLayerInstance: HtmlLayer;\n\n  constructor(props: ImgProps) {\n    super(props);\n    this.imageRef = React.createRef();\n  }\n\n  /**\n   * On mount creates a new HTMLLayer instance and initialises with ref to img element,\n   * user generated cloudinaryImage and the plugins to be used\n   */\n  componentDidMount() {\n    this.htmlLayerInstance = new HtmlLayer(\n      this.imageRef.current,\n      this.props.cldImg,\n      this.props.plugins\n    )\n  }\n\n  /**\n   * On update we cancel running plugins and update image instance with the state of user\n   * cloudinaryImage and the state of plugins\n   */\n  componentDidUpdate() {\n    this.htmlLayerInstance.cancelCurrentlyRunningPlugins();\n    // call html layer to update the dom again with plugins and reset toBeCanceled\n    this.htmlLayerInstance.update(this.props.cldImg, this.props.plugins)\n  }\n\n  /**\n   * On unmount we cancel the currently running plugins\n   */\n  componentWillUnmount() {\n    // safely cancel running events on unmount\n    this.htmlLayerInstance.cancelCurrentlyRunningPlugins()\n  }\n\n  render() {\n    const {\n      cldImg,\n      plugins,\n      ...otherProps // Assume any other props are for the base element\n    } = this.props;\n    if (isBrowser()) { // on client side render\n      return <img suppressHydrationWarning {...otherProps} ref={this.imageRef} />\n    } else { // on server side render\n      const src = serverSideSrc(\n        this.props.plugins,\n        this.props.cldImg\n      );\n      return <img {...otherProps} src={src} />\n    }\n  }\n}\n\nexport { AdvancedImage };\n"],"names":["AdvancedImage","props","_this","imageRef","React","createRef","componentDidMount","this","htmlLayerInstance","HtmlLayer","current","cldImg","plugins","componentDidUpdate","cancelCurrentlyRunningPlugins","update","componentWillUnmount","render","otherProps","isBrowser","suppressHydrationWarning","ref","src","serverSideSrc","Component"],"mappings":"6YAgEMA,sBAIJ,WAAYC,gBACVC,cAAMD,UACDE,SAAWC,UAAMC,gIAOxBC,kBAAA,WACEC,KAAKC,kBAAoB,IAAIC,YAC3BF,KAAKJ,SAASO,QACdH,KAAKN,MAAMU,OACXJ,KAAKN,MAAMW,YAQfC,mBAAA,WACEN,KAAKC,kBAAkBM,gCAEvBP,KAAKC,kBAAkBO,OAAOR,KAAKN,MAAMU,OAAQJ,KAAKN,MAAMW,YAM9DI,qBAAA,WAEET,KAAKC,kBAAkBM,mCAGzBG,OAAA,eAIOC,qIACDX,KAAKN,4BACT,GAAIkB,cACF,OAAOf,6CAAKgB,6BAA6BF,GAAYG,IAAKd,KAAKJ,YAE/D,IAAMmB,EAAMC,gBACVhB,KAAKN,MAAMW,QACXL,KAAKN,MAAMU,QAEb,OAAOP,+CAASc,GAAYI,IAAKA,SApDXlB,UAAMoB"}

index.d.ts

@@ -1,3 +0,3 @@
-import { placeholder, accessibility, lazyload, responsive } from '../../html/dist';
-import { CldImg } from "./CldImg";
-export { placeholder, accessibility, lazyload, responsive, CldImg };
+import { placeholder, accessibility, lazyload, responsive } from '@cloudinary/html';
+import { AdvancedImage } from "./AdvancedImage";
+export { placeholder, accessibility, lazyload, responsive, AdvancedImage };

package.json

 {
   "name": "@cloudinary/react",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.4",
   "description": "A React component for Cloudinary",
@@ -9,3 +9,5 @@ "author": "cloudinary",
   "main": "dist/index.js",
-  "module": "dist/index.modern.js",
+  "umd:main": "./dist/index.umd.js",
+  "module": "dist/index.esm.js",
+  "sideEffects": false,
   "source": "src/index.tsx",
@@ -16,4 +18,4 @@ "engines": {
   "scripts": {
-    "build": "npm run build --prefix ../html && microbundle-crl --no-compress --format modern,cjs && cp package.json ./dist",
-    "start": "microbundle-crl watch --no-compress --format modern,cjs",
+    "build": "npm run build --prefix ../html && microbundle --format esm,umd,cjs --jsx React.createElement && cp package.json ./dist",
+    "start": "microbundle watch --no-compress --format modern,cjs",
     "test": "jest",
@@ -28,3 +30,4 @@ "test-coverage": "jest --coverage"
     "@babel/preset-typescript": "^7.12.7",
-    "@cloudinary/base": "^1.0.0-alpha.9",
+    "@cloudinary/base": "^1.0.0-alpha.11",
+    "@sinonjs/fake-timers": "^6.0.1",
     "@testing-library/jest-dom": "^4.2.4",
@@ -37,2 +40,3 @@ "@types/enzyme": "^3.10.8",
     "@types/react-dom": "^16.9.7",
+    "@types/sinonjs__fake-timers": "^6.0.2",
     "@typescript-eslint/eslint-plugin": "^2.26.0",
@@ -56,3 +60,3 @@ "@typescript-eslint/parser": "^2.26.0",
     "gh-pages": "^2.2.0",
-    "microbundle-crl": "^0.13.10",
+    "microbundle": "^0.13.0",
     "npm-run-all": "^4.1.5",
@@ -64,5 +68,3 @@ "prettier": "^2.0.4",
     "ts-jest": "^26.4.4",
-    "typescript": "^3.7.5",
-    "@sinonjs/fake-timers": "^6.0.1",
-    "@types/sinonjs__fake-timers": "^6.0.2"
+    "typescript": "^3.7.5"
   },
@@ -75,4 +77,11 @@ "jest": {
       "./src/setupTests.js"
+    ],
+    "testPathIgnorePatterns": [
+      "<rootDir>/__tests__/testUtils",
+      "<rootDir>/dist"
     ]
+  },
+  "dependencies": {
+    "@cloudinary/html": "^1.0.0-alpha.4"
   }
 }

CldImg.d.ts

-import React from 'react';
-import { CloudinaryImage } from "@cloudinary/base/assets/CloudinaryImage";
-import { HtmlLayer, plugins } from '../../html/dist';
-interface ImgProps {
-    transformation: CloudinaryImage;
-    plugins?: plugins;
-    [x: string]: any;
-}
-/**
- * @mixin ReactSDK
- * @description This is our React SDK. The objective of this library is to render images
- * as is or with our plugins
- *
- * @example
- * <caption>
- *  Please note that the order of the plugins is important. See home for more details.
- * </caption>
- * // Example
- * import {CloudinaryImage} from "@cloudinary/base/assets/CloudinaryImage";
- * import {
- *  CldImg,
- *  accessibility,
- *  responsive,
- *  lazyload,
- *  placeholder
- * } from '@cloudinary/react';
- *
- * const App = () => {
- *   let img = new CloudinaryImage()
- *     .setConfig({
- *        cloud: {
- *          cloudName: 'demo'
- *        }})
- *     .setPublicID('sample');
- *
- *   return (
- *      <div>
- *         <div style={{height: "1000px"}}/>
- *         <CldImg
- *            transformation={img}
- *            plugins={[lazyload(), responsive(100), placeholder()]}
- *         />
- *      </div>
- *   )
- * };
- *
- *
- *
- *
- *
- */
-/**
- * @memberOf ReactSDK
- * @type {Component}
- * @description The Cloudinary image component
- * @prop {CloudinaryImage} transformation Generated by @cloudinary/base
- * @prop {plugins} plugins Advanced image component plugins accessibility(), responsive(), lazyload(), placeholder()
- */
-declare class CldImg extends React.Component<ImgProps> {
-    imageRef: React.RefObject<HTMLImageElement>;
-    htmlLayerInstance: HtmlLayer;
-    constructor(props: ImgProps);
-    /**
-     * On mount creates a new HTMLLayer instance and initialises with ref to img element,
-     * user generated cloudinaryImage and the plugins to be used
-     */
-    componentDidMount(): void;
-    /**
-     * On update we cancel running plugins and update image instance with the state of user
-     * cloudinaryImage and the state of plugins
-     */
-    componentDidUpdate(): void;
-    /**
-     * On unmount we cancel the currently running plugins
-     */
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-}
-export { CldImg };

index.test.d.ts

-export {};

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify 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

Improved metrics

Number of package files

10

11.11%

Number of medium supply chain risk alerts

1

-75%

Worsened metrics

Total package byte prevSize

22705

-97.55%

Dependency count

2

100%

Lines of code

102

-98.27%

Number of low quality alerts

5

150%

Dependency changes

• + Added

  @cloudinary/html@^1.0.0-alpha.4

• + Added

  @cloudinary/html@1.13.5
  (transitive)

• + Added

  @types/lodash@4.17.24
  (transitive)

• + Added

  @types/lodash.clonedeep@4.5.9
  (transitive)

• + Added

  @types/lodash.debounce@4.0.9
  (transitive)

• + Added

  @types/node@14.18.63
  (transitive)

• + Added

  lodash.clonedeep@4.5.0
  (transitive)

• + Added

  lodash.debounce@4.0.8
  (transitive)

• + Added

  typescript@4.9.5
  (transitive)