@cloudinary/react - npm Package Compare versions

Comparing version 1.0.0-beta.9 to 1.0.0-beta.10

AdvancedImage.d.ts

 import React from 'react';
-import { CloudinaryImage } from '@cloudinary/base/assets/CloudinaryImage';
+import { CloudinaryImage } from '@cloudinary/url-gen/assets/CloudinaryImage';
 import { HtmlImageLayer, Plugins } from '@cloudinary/html';
@@ -19,3 +19,3 @@ interface ImgProps {
  * // Example
- * import {CloudinaryImage} from "@cloudinary/base/assets/CloudinaryImage";
+ * import {CloudinaryImage} from "@cloudinary/url-gen/assets/CloudinaryImage";
  * import {
@@ -54,3 +54,3 @@ *  AdvancedImage,
  * @description The Cloudinary image component
- * @prop {CloudinaryImage} cldImg Generated by @cloudinary/base
+ * @prop {CloudinaryImage} cldImg Generated by @cloudinary/url-gen
  * @prop {Plugins} plugins Advanced image component plugins accessibility(), responsive(), lazyload(), placeholder()
@@ -57,0 +57,0 @@ */

AdvancedPicture.d.ts

 import React from 'react';
-import { CloudinaryImage } from '@cloudinary/base/assets/CloudinaryImage';
+import { CloudinaryImage } from '@cloudinary/url-gen/assets/CloudinaryImage';
 import { HtmlPictureLayer, PictureSources } from '@cloudinary/html';
 interface PictureProps {
     cldImg: CloudinaryImage;
-    sources: PictureSources;
+    breakpoints?: number[];
+    sources?: PictureSources;
+    autoOptimalBreakpoints?: boolean;
+    relativeWidth?: number;
     [x: string]: any;
@@ -13,3 +16,3 @@ }
  * @description The Cloudinary picture component
- * @prop {CloudinaryImage} transformation Generated by @cloudinary/base
+ * @prop {CloudinaryImage} transformation Generated by @cloudinary/url-gen
  * @prop {PictureSources} sources sources to generate source tag
@@ -16,0 +19,0 @@ * @example

AdvancedVideo.d.ts

 import { Component, EventHandler, MutableRefObject, SyntheticEvent } from 'react';
-import { CloudinaryVideo } from '@cloudinary/base';
+import { CloudinaryVideo } from '@cloudinary/url-gen';
 import { HtmlVideoLayer, Plugins, VideoSources } from '@cloudinary/html';
@@ -27,3 +27,3 @@ declare type ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;
  * @description The Cloudinary video component
- * @prop {CloudinaryVideo} transformation Generated by @cloudinary/base
+ * @prop {CloudinaryVideo} transformation Generated by @cloudinary/url-gen
  * @prop {Plugins} plugins Advanced image component plugins lazyload()
@@ -30,0 +30,0 @@ * @prop videoAttributes Optional attributes include controls, loop, muted, poster, preload, autoplay

CHANGELOG.md

@@ -0,1 +1,12 @@
+1.0.0-beta.10 / 2021-09-14
+==================
+
+New functionality
+-----------------
+* added autoOptimalBreakpoints to picture tag (#86)
+
+Other changes
+-----------------
+* changed to url-gen package name (#94)
+
 1.0.0-beta.9 / 2021-07-04
@@ -2,0 +13,0 @@ ==================

index.esm.js

@@ -55,3 +55,3 @@ import { HtmlImageLayer, cancelCurrentlyRunningPlugins, isBrowser, serverSideSrc, HtmlVideoLayer, HtmlPictureLayer } from '@cloudinary/html';
  * // Example
- * import {CloudinaryImage} from "@cloudinary/base/assets/CloudinaryImage";
+ * import {CloudinaryImage} from "@cloudinary/url-gen/assets/CloudinaryImage";
  * import {
@@ -91,3 +91,3 @@ *  AdvancedImage,
  * @description The Cloudinary image component
- * @prop {CloudinaryImage} cldImg Generated by @cloudinary/base
+ * @prop {CloudinaryImage} cldImg Generated by @cloudinary/url-gen
  * @prop {Plugins} plugins Advanced image component plugins accessibility(), responsive(), lazyload(), placeholder()
@@ -166,3 +166,3 @@ */
  * @description The Cloudinary video component
- * @prop {CloudinaryVideo} transformation Generated by @cloudinary/base
+ * @prop {CloudinaryVideo} transformation Generated by @cloudinary/url-gen
  * @prop {Plugins} plugins Advanced image component plugins lazyload()
@@ -282,3 +282,3 @@ * @prop videoAttributes Optional attributes include controls, loop, muted, poster, preload, autoplay
 
-var _excluded = ["cldImg", "sources"];
+var _excluded = ["cldImg", "breakpoints", "sources", "autoOptimalBreakpoints", "relativeWidth"];
 /**
@@ -288,3 +288,3 @@ * @memberOf ReactSDK
  * @description The Cloudinary picture component
- * @prop {CloudinaryImage} transformation Generated by @cloudinary/base
+ * @prop {CloudinaryImage} transformation Generated by @cloudinary/url-gen
  * @prop {PictureSources} sources sources to generate source tag
@@ -332,3 +332,3 @@ * @example
   _proto.componentDidMount = function componentDidMount() {
-    this.htmlPictureLayerInstance = new HtmlPictureLayer(this.pictureRef.current, this.props.cldImg, this.props.sources);
+    this.htmlPictureLayerInstance = new HtmlPictureLayer(this.pictureRef.current, this.props.cldImg, this.props.breakpoints, this.props.sources, this.props.autoOptimalBreakpoints, this.props.relativeWidth);
   }
@@ -343,3 +343,3 @@ /**
     // call html layer to update the dom
-    this.htmlPictureLayerInstance.update(this.props.cldImg, this.props.sources);
+    this.htmlPictureLayerInstance.update(this.props.cldImg, this.props.breakpoints, this.props.sources, this.props.autoOptimalBreakpoints, this.props.relativeWidth);
   };
@@ -346,0 +346,0 @@

index.esm.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/AdvancedImage.tsx","../src/AdvancedVideo.tsx","../src/AdvancedPicture.tsx"],"sourcesContent":["import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/base/assets/CloudinaryImage';\n\nimport {\n  HtmlImageLayer,\n  Plugins,\n  isBrowser,\n  serverSideSrc,\n  cancelCurrentlyRunningPlugins\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: HtmlImageLayer;\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 HtmlImageLayer(\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    cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\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    cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\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","import React, { Component, createRef, EventHandler, MutableRefObject, SyntheticEvent } from 'react';\nimport { CloudinaryVideo } from '@cloudinary/base';\n\nimport {\n  HtmlVideoLayer,\n  Plugins,\n  VideoSources,\n  cancelCurrentlyRunningPlugins\n} from '@cloudinary/html';\n\ntype ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;\n\ninterface VideoProps {\n  cldVid: CloudinaryVideo,\n  plugins?: Plugins,\n  sources?: VideoSources,\n  innerRef?: ((instance: any) => void) | MutableRefObject<unknown> | null\n\n  // supported video attributes\n  controls?: boolean\n  loop?: boolean,\n  muted?: boolean,\n  poster?: string,\n  preload?: string,\n  autoPlay?: boolean,\n  playsInline?: boolean\n\n  // supported video events\n  onPlay?: ReactEventHandler<any>,\n  onLoadStart?: ReactEventHandler<any>,\n  onPlaying?: ReactEventHandler<any>,\n  onError?: ReactEventHandler<any>,\n  onEnded?: ReactEventHandler<any>\n}\n\n/**\n * @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary video component\n * @prop {CloudinaryVideo} transformation Generated by @cloudinary/base\n * @prop {Plugins} plugins Advanced image component plugins lazyload()\n * @prop videoAttributes Optional attributes include controls, loop, muted, poster, preload, autoplay\n * @prop videoEvents Optional video events include play, loadstart, playing, error, ended\n * @prop {VideoSources} sources Optional sources to generate\n * @example\n *  <caption>\n *  Using custom defined resources.\n * </caption>\n * const vid = new CloudinaryVideo('dog', {cloudName: 'demo'});\n * const videoEl = useRef();\n * const sources = [\n *  {\n *    type: 'mp4',\n *    codecs: ['vp8', 'vorbis'],\n *    transcode: videoCodec(auto())\n *  },\n *  {\n *    type: 'webm',\n *    codecs: ['avc1.4D401E', 'mp4a.40.2'],\n *    videoCodec: videoCodec(auto())\n *  }];\n *\n * return <AdvancedVideo cldVid={vid} sources={sources} ref={videoEl} controls />\n */\nclass AdvancedVideo extends Component <VideoProps> {\n  videoRef: MutableRefObject<HTMLVideoElement | null>\n  htmlVideoLayerInstance: HtmlVideoLayer;\n\n  constructor(props: VideoProps) {\n    super(props);\n    this.videoRef = createRef();\n    this.attachRef = this.attachRef.bind(this);\n  }\n\n  /**\n   * On mount creates a new HTMLVideoLayer instance and initialises with ref to video element,\n   * user generated cloudinaryVideo and the plugins to be used\n   */\n  componentDidMount() {\n    this.htmlVideoLayerInstance = new HtmlVideoLayer(\n      this.videoRef && this.videoRef.current,\n      this.props.cldVid,\n      this.props.sources,\n      this.props.plugins,\n      this.getVideoAttributes()\n    )\n  }\n\n  /**\n   * On update we cancel running plugins and update the video instance if the src\n   * was changed\n   */\n  componentDidUpdate() {\n    cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState);\n    // call html layer to update the dom again with plugins and reset toBeCanceled\n    this.htmlVideoLayerInstance.update(this.props.cldVid, this.props.sources, this.props.plugins, this.getVideoAttributes())\n  }\n\n  /**\n   * On unmount we cancel the currently running plugins\n   */\n  componentWillUnmount() {\n    // safely cancel running events on unmount\n    cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState)\n  }\n\n  /**\n   * returns video attributes\n   */\n  getVideoAttributes() {\n    return {\n      controls: this.props.controls,\n      loop: this.props.loop,\n      muted: this.props.muted,\n      poster: this.props.poster,\n      preload: this.props.preload,\n      autoplay: this.props.autoPlay,\n      playsinline: this.props.playsInline\n    };\n  }\n\n  /**\n   * Attach both this.videoRef and props.innerRef as ref to the given element\n   * @param element - the element to attach a ref to\n   */\n  attachRef(element: HTMLVideoElement) {\n    this.videoRef.current = element;\n    const { innerRef } = this.props;\n\n    if (innerRef) {\n      if (innerRef instanceof Function) {\n        innerRef(element);\n      } else {\n        innerRef.current = element;\n      }\n    }\n  };\n\n  render() {\n    const {\n      cldVid,\n      plugins,\n      sources,\n      innerRef,\n      ...videoEvents // Assume any other props are for the base element\n    } = this.props;\n\n    return <video {...videoEvents} ref={this.attachRef} />\n  }\n}\n\nexport { AdvancedVideo };\n","import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/base/assets/CloudinaryImage';\n\nimport {\n  HtmlPictureLayer,\n  PictureSources,\n} from '@cloudinary/html'\n\ninterface PictureProps {\n  cldImg: CloudinaryImage,\n  sources: PictureSources,\n  [x: string]: any\n}\n\n/**\n * @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary picture component\n * @prop {CloudinaryImage} transformation Generated by @cloudinary/base\n * @prop {PictureSources} sources sources to generate source tag\n * @example\n *  <caption>\n *  Using custom defined resources.\n * </caption>\n * const img = new CloudinaryImage('sample', { cloudName: 'demo'});\n * const sources = [\n *  {\n *    minWidth:500,\n *    maxWidth:2000,\n *    sizes: \"80vw,\n *    image: img\n *  },\n *  {\n *    minWidth:3000,\n *    maxWidth:4000,\n *    sizes: \"80vw,\n *    image: img\n *  }];\n *\n * return <AdvancedPicture cldImg={img} sources={sources} />\n */\nclass AdvancedPicture extends React.Component <PictureProps> {\n  pictureRef: React.RefObject<HTMLPictureElement>;\n  htmlPictureLayerInstance: HtmlPictureLayer;\n\n  constructor(props: PictureProps) {\n    super(props);\n    this.pictureRef = React.createRef();\n  }\n\n  /**\n   * On mount creates a new HTMLPictureLayer instance and initialises with ref to picture element,\n   * user generated cloudinaryImage and the sources to be used\n   */\n  componentDidMount() {\n    this.htmlPictureLayerInstance = new HtmlPictureLayer(\n      this.pictureRef.current,\n      this.props.cldImg,\n      this.props.sources\n    )\n  }\n\n  /**\n   * On update we update the image instance with the state of user\n   * cloudinaryImage and the state of sources\n   */\n  componentDidUpdate() {\n    // call html layer to update the dom\n    this.htmlPictureLayerInstance.update(this.props.cldImg, this.props.sources);\n  }\n\n  render() {\n    const {\n      cldImg,\n      sources,\n      ...otherProps // Assume any other props are for the base element\n    } = this.props;\n    return <picture {...otherProps} ref={this.pictureRef} />\n  }\n}\n\nexport { AdvancedPicture };\n"],"names":["AdvancedImage","props","imageRef","React","createRef","componentDidMount","htmlLayerInstance","HtmlImageLayer","current","cldImg","plugins","componentDidUpdate","cancelCurrentlyRunningPlugins","htmlPluginState","update","componentWillUnmount","render","otherProps","isBrowser","suppressHydrationWarning","ref","src","serverSideSrc","Component","AdvancedVideo","videoRef","attachRef","bind","htmlVideoLayerInstance","HtmlVideoLayer","cldVid","sources","getVideoAttributes","controls","loop","muted","poster","preload","autoplay","autoPlay","playsinline","playsInline","element","innerRef","Function","videoEvents","AdvancedPicture","pictureRef","htmlPictureLayerInstance","HtmlPictureLayer"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../src/AdvancedImage.tsx","../src/AdvancedVideo.tsx","../src/AdvancedPicture.tsx"],"sourcesContent":["import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/url-gen/assets/CloudinaryImage';\n\nimport {\n  HtmlImageLayer,\n  Plugins,\n  isBrowser,\n  serverSideSrc,\n  cancelCurrentlyRunningPlugins\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/url-gen/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/url-gen\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: HtmlImageLayer;\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 HtmlImageLayer(\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    cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\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    cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\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","import React, { Component, createRef, EventHandler, MutableRefObject, SyntheticEvent } from 'react';\nimport { CloudinaryVideo } from '@cloudinary/url-gen';\n\nimport {\n  HtmlVideoLayer,\n  Plugins,\n  VideoSources,\n  cancelCurrentlyRunningPlugins\n} from '@cloudinary/html';\n\ntype ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;\n\ninterface VideoProps {\n  cldVid: CloudinaryVideo,\n  plugins?: Plugins,\n  sources?: VideoSources,\n  innerRef?: ((instance: any) => void) | MutableRefObject<unknown> | null\n\n  // supported video attributes\n  controls?: boolean\n  loop?: boolean,\n  muted?: boolean,\n  poster?: string,\n  preload?: string,\n  autoPlay?: boolean,\n  playsInline?: boolean\n\n  // supported video events\n  onPlay?: ReactEventHandler<any>,\n  onLoadStart?: ReactEventHandler<any>,\n  onPlaying?: ReactEventHandler<any>,\n  onError?: ReactEventHandler<any>,\n  onEnded?: ReactEventHandler<any>\n}\n\n/**\n * @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary video component\n * @prop {CloudinaryVideo} transformation Generated by @cloudinary/url-gen\n * @prop {Plugins} plugins Advanced image component plugins lazyload()\n * @prop videoAttributes Optional attributes include controls, loop, muted, poster, preload, autoplay\n * @prop videoEvents Optional video events include play, loadstart, playing, error, ended\n * @prop {VideoSources} sources Optional sources to generate\n * @example\n *  <caption>\n *  Using custom defined resources.\n * </caption>\n * const vid = new CloudinaryVideo('dog', {cloudName: 'demo'});\n * const videoEl = useRef();\n * const sources = [\n *  {\n *    type: 'mp4',\n *    codecs: ['vp8', 'vorbis'],\n *    transcode: videoCodec(auto())\n *  },\n *  {\n *    type: 'webm',\n *    codecs: ['avc1.4D401E', 'mp4a.40.2'],\n *    videoCodec: videoCodec(auto())\n *  }];\n *\n * return <AdvancedVideo cldVid={vid} sources={sources} ref={videoEl} controls />\n */\nclass AdvancedVideo extends Component <VideoProps> {\n  videoRef: MutableRefObject<HTMLVideoElement | null>\n  htmlVideoLayerInstance: HtmlVideoLayer;\n\n  constructor(props: VideoProps) {\n    super(props);\n    this.videoRef = createRef();\n    this.attachRef = this.attachRef.bind(this);\n  }\n\n  /**\n   * On mount creates a new HTMLVideoLayer instance and initialises with ref to video element,\n   * user generated cloudinaryVideo and the plugins to be used\n   */\n  componentDidMount() {\n    this.htmlVideoLayerInstance = new HtmlVideoLayer(\n      this.videoRef && this.videoRef.current,\n      this.props.cldVid,\n      this.props.sources,\n      this.props.plugins,\n      this.getVideoAttributes()\n    )\n  }\n\n  /**\n   * On update we cancel running plugins and update the video instance if the src\n   * was changed\n   */\n  componentDidUpdate() {\n    cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState);\n    // call html layer to update the dom again with plugins and reset toBeCanceled\n    this.htmlVideoLayerInstance.update(this.props.cldVid, this.props.sources, this.props.plugins, this.getVideoAttributes())\n  }\n\n  /**\n   * On unmount we cancel the currently running plugins\n   */\n  componentWillUnmount() {\n    // safely cancel running events on unmount\n    cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState)\n  }\n\n  /**\n   * returns video attributes\n   */\n  getVideoAttributes() {\n    return {\n      controls: this.props.controls,\n      loop: this.props.loop,\n      muted: this.props.muted,\n      poster: this.props.poster,\n      preload: this.props.preload,\n      autoplay: this.props.autoPlay,\n      playsinline: this.props.playsInline\n    };\n  }\n\n  /**\n   * Attach both this.videoRef and props.innerRef as ref to the given element\n   * @param element - the element to attach a ref to\n   */\n  attachRef(element: HTMLVideoElement) {\n    this.videoRef.current = element;\n    const { innerRef } = this.props;\n\n    if (innerRef) {\n      if (innerRef instanceof Function) {\n        innerRef(element);\n      } else {\n        innerRef.current = element;\n      }\n    }\n  };\n\n  render() {\n    const {\n      cldVid,\n      plugins,\n      sources,\n      innerRef,\n      ...videoEvents // Assume any other props are for the base element\n    } = this.props;\n\n    return <video {...videoEvents} ref={this.attachRef} />\n  }\n}\n\nexport { AdvancedVideo };\n","import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/url-gen/assets/CloudinaryImage';\n\nimport {\n  HtmlPictureLayer,\n  PictureSources\n} from '@cloudinary/html'\n\ninterface PictureProps {\n  cldImg: CloudinaryImage,\n  breakpoints?: number[],\n  sources?: PictureSources,\n  autoOptimalBreakpoints?: boolean,\n  relativeWidth?: number\n  [x: string]: any\n}\n\n/**\n * @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary picture component\n * @prop {CloudinaryImage} transformation Generated by @cloudinary/url-gen\n * @prop {PictureSources} sources sources to generate source tag\n * @example\n *  <caption>\n *  Using custom defined resources.\n * </caption>\n * const img = new CloudinaryImage('sample', { cloudName: 'demo'});\n * const sources = [\n *  {\n *    minWidth:500,\n *    maxWidth:2000,\n *    sizes: \"80vw,\n *    image: img\n *  },\n *  {\n *    minWidth:3000,\n *    maxWidth:4000,\n *    sizes: \"80vw,\n *    image: img\n *  }];\n *\n * return <AdvancedPicture cldImg={img} sources={sources} />\n */\nclass AdvancedPicture extends React.Component <PictureProps> {\n  pictureRef: React.RefObject<HTMLPictureElement>;\n  htmlPictureLayerInstance: HtmlPictureLayer;\n\n  constructor(props: PictureProps) {\n    super(props);\n    this.pictureRef = React.createRef();\n  }\n\n  /**\n   * On mount creates a new HTMLPictureLayer instance and initialises with ref to picture element,\n   * user generated cloudinaryImage and the sources to be used\n   */\n  componentDidMount() {\n    this.htmlPictureLayerInstance = new HtmlPictureLayer(\n      this.pictureRef.current,\n      this.props.cldImg,\n      this.props.breakpoints,\n      this.props.sources,\n      this.props.autoOptimalBreakpoints,\n      this.props.relativeWidth\n    )\n  }\n\n  /**\n   * On update we update the image instance with the state of user\n   * cloudinaryImage and the state of sources\n   */\n  componentDidUpdate() {\n    // call html layer to update the dom\n    this.htmlPictureLayerInstance.update(\n      this.props.cldImg,\n      this.props.breakpoints,\n      this.props.sources,\n      this.props.autoOptimalBreakpoints,\n      this.props.relativeWidth\n    );\n  }\n\n  render() {\n    const {\n      cldImg,\n      breakpoints,\n      sources,\n      autoOptimalBreakpoints,\n      relativeWidth,\n      ...otherProps // Assume any other props are for the base element\n    } = this.props;\n    return <picture {...otherProps} ref={this.pictureRef} />\n  }\n}\n\nexport { AdvancedPicture };\n"],"names":["AdvancedImage","props","imageRef","React","createRef","componentDidMount","htmlLayerInstance","HtmlImageLayer","current","cldImg","plugins","componentDidUpdate","cancelCurrentlyRunningPlugins","htmlPluginState","update","componentWillUnmount","render","otherProps","isBrowser","suppressHydrationWarning","ref","src","serverSideSrc","Component","AdvancedVideo","videoRef","attachRef","bind","htmlVideoLayerInstance","HtmlVideoLayer","cldVid","sources","getVideoAttributes","controls","loop","muted","poster","preload","autoplay","autoPlay","playsinline","playsInline","element","innerRef","Function","videoEvents","AdvancedPicture","pictureRef","htmlPictureLayerInstance","HtmlPictureLayer","breakpoints","autoOptimalBreakpoints","relativeWidth"],"mappings":"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"}

index.js

@@ -58,3 +58,3 @@ var html = require('@cloudinary/html');
  * // Example
- * import {CloudinaryImage} from "@cloudinary/base/assets/CloudinaryImage";
+ * import {CloudinaryImage} from "@cloudinary/url-gen/assets/CloudinaryImage";
  * import {
@@ -94,3 +94,3 @@ *  AdvancedImage,
  * @description The Cloudinary image component
- * @prop {CloudinaryImage} cldImg Generated by @cloudinary/base
+ * @prop {CloudinaryImage} cldImg Generated by @cloudinary/url-gen
  * @prop {Plugins} plugins Advanced image component plugins accessibility(), responsive(), lazyload(), placeholder()
@@ -169,3 +169,3 @@ */
  * @description The Cloudinary video component
- * @prop {CloudinaryVideo} transformation Generated by @cloudinary/base
+ * @prop {CloudinaryVideo} transformation Generated by @cloudinary/url-gen
  * @prop {Plugins} plugins Advanced image component plugins lazyload()
@@ -285,3 +285,3 @@ * @prop videoAttributes Optional attributes include controls, loop, muted, poster, preload, autoplay
 
-var _excluded = ["cldImg", "sources"];
+var _excluded = ["cldImg", "breakpoints", "sources", "autoOptimalBreakpoints", "relativeWidth"];
 /**
@@ -291,3 +291,3 @@ * @memberOf ReactSDK
  * @description The Cloudinary picture component
- * @prop {CloudinaryImage} transformation Generated by @cloudinary/base
+ * @prop {CloudinaryImage} transformation Generated by @cloudinary/url-gen
  * @prop {PictureSources} sources sources to generate source tag
@@ -335,3 +335,3 @@ * @example
   _proto.componentDidMount = function componentDidMount() {
-    this.htmlPictureLayerInstance = new html.HtmlPictureLayer(this.pictureRef.current, this.props.cldImg, this.props.sources);
+    this.htmlPictureLayerInstance = new html.HtmlPictureLayer(this.pictureRef.current, this.props.cldImg, this.props.breakpoints, this.props.sources, this.props.autoOptimalBreakpoints, this.props.relativeWidth);
   }
@@ -346,3 +346,3 @@ /**
     // call html layer to update the dom
-    this.htmlPictureLayerInstance.update(this.props.cldImg, this.props.sources);
+    this.htmlPictureLayerInstance.update(this.props.cldImg, this.props.breakpoints, this.props.sources, this.props.autoOptimalBreakpoints, this.props.relativeWidth);
   };
@@ -349,0 +349,0 @@

index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","sources":["../src/AdvancedImage.tsx","../src/AdvancedVideo.tsx","../src/AdvancedPicture.tsx"],"sourcesContent":["import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/base/assets/CloudinaryImage';\n\nimport {\n  HtmlImageLayer,\n  Plugins,\n  isBrowser,\n  serverSideSrc,\n  cancelCurrentlyRunningPlugins\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: HtmlImageLayer;\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 HtmlImageLayer(\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    cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\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    cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\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","import React, { Component, createRef, EventHandler, MutableRefObject, SyntheticEvent } from 'react';\nimport { CloudinaryVideo } from '@cloudinary/base';\n\nimport {\n  HtmlVideoLayer,\n  Plugins,\n  VideoSources,\n  cancelCurrentlyRunningPlugins\n} from '@cloudinary/html';\n\ntype ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;\n\ninterface VideoProps {\n  cldVid: CloudinaryVideo,\n  plugins?: Plugins,\n  sources?: VideoSources,\n  innerRef?: ((instance: any) => void) | MutableRefObject<unknown> | null\n\n  // supported video attributes\n  controls?: boolean\n  loop?: boolean,\n  muted?: boolean,\n  poster?: string,\n  preload?: string,\n  autoPlay?: boolean,\n  playsInline?: boolean\n\n  // supported video events\n  onPlay?: ReactEventHandler<any>,\n  onLoadStart?: ReactEventHandler<any>,\n  onPlaying?: ReactEventHandler<any>,\n  onError?: ReactEventHandler<any>,\n  onEnded?: ReactEventHandler<any>\n}\n\n/**\n * @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary video component\n * @prop {CloudinaryVideo} transformation Generated by @cloudinary/base\n * @prop {Plugins} plugins Advanced image component plugins lazyload()\n * @prop videoAttributes Optional attributes include controls, loop, muted, poster, preload, autoplay\n * @prop videoEvents Optional video events include play, loadstart, playing, error, ended\n * @prop {VideoSources} sources Optional sources to generate\n * @example\n *  <caption>\n *  Using custom defined resources.\n * </caption>\n * const vid = new CloudinaryVideo('dog', {cloudName: 'demo'});\n * const videoEl = useRef();\n * const sources = [\n *  {\n *    type: 'mp4',\n *    codecs: ['vp8', 'vorbis'],\n *    transcode: videoCodec(auto())\n *  },\n *  {\n *    type: 'webm',\n *    codecs: ['avc1.4D401E', 'mp4a.40.2'],\n *    videoCodec: videoCodec(auto())\n *  }];\n *\n * return <AdvancedVideo cldVid={vid} sources={sources} ref={videoEl} controls />\n */\nclass AdvancedVideo extends Component <VideoProps> {\n  videoRef: MutableRefObject<HTMLVideoElement | null>\n  htmlVideoLayerInstance: HtmlVideoLayer;\n\n  constructor(props: VideoProps) {\n    super(props);\n    this.videoRef = createRef();\n    this.attachRef = this.attachRef.bind(this);\n  }\n\n  /**\n   * On mount creates a new HTMLVideoLayer instance and initialises with ref to video element,\n   * user generated cloudinaryVideo and the plugins to be used\n   */\n  componentDidMount() {\n    this.htmlVideoLayerInstance = new HtmlVideoLayer(\n      this.videoRef && this.videoRef.current,\n      this.props.cldVid,\n      this.props.sources,\n      this.props.plugins,\n      this.getVideoAttributes()\n    )\n  }\n\n  /**\n   * On update we cancel running plugins and update the video instance if the src\n   * was changed\n   */\n  componentDidUpdate() {\n    cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState);\n    // call html layer to update the dom again with plugins and reset toBeCanceled\n    this.htmlVideoLayerInstance.update(this.props.cldVid, this.props.sources, this.props.plugins, this.getVideoAttributes())\n  }\n\n  /**\n   * On unmount we cancel the currently running plugins\n   */\n  componentWillUnmount() {\n    // safely cancel running events on unmount\n    cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState)\n  }\n\n  /**\n   * returns video attributes\n   */\n  getVideoAttributes() {\n    return {\n      controls: this.props.controls,\n      loop: this.props.loop,\n      muted: this.props.muted,\n      poster: this.props.poster,\n      preload: this.props.preload,\n      autoplay: this.props.autoPlay,\n      playsinline: this.props.playsInline\n    };\n  }\n\n  /**\n   * Attach both this.videoRef and props.innerRef as ref to the given element\n   * @param element - the element to attach a ref to\n   */\n  attachRef(element: HTMLVideoElement) {\n    this.videoRef.current = element;\n    const { innerRef } = this.props;\n\n    if (innerRef) {\n      if (innerRef instanceof Function) {\n        innerRef(element);\n      } else {\n        innerRef.current = element;\n      }\n    }\n  };\n\n  render() {\n    const {\n      cldVid,\n      plugins,\n      sources,\n      innerRef,\n      ...videoEvents // Assume any other props are for the base element\n    } = this.props;\n\n    return <video {...videoEvents} ref={this.attachRef} />\n  }\n}\n\nexport { AdvancedVideo };\n","import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/base/assets/CloudinaryImage';\n\nimport {\n  HtmlPictureLayer,\n  PictureSources,\n} from '@cloudinary/html'\n\ninterface PictureProps {\n  cldImg: CloudinaryImage,\n  sources: PictureSources,\n  [x: string]: any\n}\n\n/**\n * @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary picture component\n * @prop {CloudinaryImage} transformation Generated by @cloudinary/base\n * @prop {PictureSources} sources sources to generate source tag\n * @example\n *  <caption>\n *  Using custom defined resources.\n * </caption>\n * const img = new CloudinaryImage('sample', { cloudName: 'demo'});\n * const sources = [\n *  {\n *    minWidth:500,\n *    maxWidth:2000,\n *    sizes: \"80vw,\n *    image: img\n *  },\n *  {\n *    minWidth:3000,\n *    maxWidth:4000,\n *    sizes: \"80vw,\n *    image: img\n *  }];\n *\n * return <AdvancedPicture cldImg={img} sources={sources} />\n */\nclass AdvancedPicture extends React.Component <PictureProps> {\n  pictureRef: React.RefObject<HTMLPictureElement>;\n  htmlPictureLayerInstance: HtmlPictureLayer;\n\n  constructor(props: PictureProps) {\n    super(props);\n    this.pictureRef = React.createRef();\n  }\n\n  /**\n   * On mount creates a new HTMLPictureLayer instance and initialises with ref to picture element,\n   * user generated cloudinaryImage and the sources to be used\n   */\n  componentDidMount() {\n    this.htmlPictureLayerInstance = new HtmlPictureLayer(\n      this.pictureRef.current,\n      this.props.cldImg,\n      this.props.sources\n    )\n  }\n\n  /**\n   * On update we update the image instance with the state of user\n   * cloudinaryImage and the state of sources\n   */\n  componentDidUpdate() {\n    // call html layer to update the dom\n    this.htmlPictureLayerInstance.update(this.props.cldImg, this.props.sources);\n  }\n\n  render() {\n    const {\n      cldImg,\n      sources,\n      ...otherProps // Assume any other props are for the base element\n    } = this.props;\n    return <picture {...otherProps} ref={this.pictureRef} />\n  }\n}\n\nexport { AdvancedPicture };\n"],"names":["AdvancedImage","props","imageRef","React","createRef","componentDidMount","htmlLayerInstance","HtmlImageLayer","current","cldImg","plugins","componentDidUpdate","cancelCurrentlyRunningPlugins","htmlPluginState","update","componentWillUnmount","render","otherProps","isBrowser","suppressHydrationWarning","ref","src","serverSideSrc","Component","AdvancedVideo","videoRef","attachRef","bind","htmlVideoLayerInstance","HtmlVideoLayer","cldVid","sources","getVideoAttributes","controls","loop","muted","poster","preload","autoplay","autoPlay","playsinline","playsInline","element","innerRef","Function","videoEvents","AdvancedPicture","pictureRef","htmlPictureLayerInstance","HtmlPictureLayer"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/AdvancedImage.tsx","../src/AdvancedVideo.tsx","../src/AdvancedPicture.tsx"],"sourcesContent":["import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/url-gen/assets/CloudinaryImage';\n\nimport {\n  HtmlImageLayer,\n  Plugins,\n  isBrowser,\n  serverSideSrc,\n  cancelCurrentlyRunningPlugins\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/url-gen/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/url-gen\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: HtmlImageLayer;\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 HtmlImageLayer(\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    cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\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    cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\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","import React, { Component, createRef, EventHandler, MutableRefObject, SyntheticEvent } from 'react';\nimport { CloudinaryVideo } from '@cloudinary/url-gen';\n\nimport {\n  HtmlVideoLayer,\n  Plugins,\n  VideoSources,\n  cancelCurrentlyRunningPlugins\n} from '@cloudinary/html';\n\ntype ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;\n\ninterface VideoProps {\n  cldVid: CloudinaryVideo,\n  plugins?: Plugins,\n  sources?: VideoSources,\n  innerRef?: ((instance: any) => void) | MutableRefObject<unknown> | null\n\n  // supported video attributes\n  controls?: boolean\n  loop?: boolean,\n  muted?: boolean,\n  poster?: string,\n  preload?: string,\n  autoPlay?: boolean,\n  playsInline?: boolean\n\n  // supported video events\n  onPlay?: ReactEventHandler<any>,\n  onLoadStart?: ReactEventHandler<any>,\n  onPlaying?: ReactEventHandler<any>,\n  onError?: ReactEventHandler<any>,\n  onEnded?: ReactEventHandler<any>\n}\n\n/**\n * @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary video component\n * @prop {CloudinaryVideo} transformation Generated by @cloudinary/url-gen\n * @prop {Plugins} plugins Advanced image component plugins lazyload()\n * @prop videoAttributes Optional attributes include controls, loop, muted, poster, preload, autoplay\n * @prop videoEvents Optional video events include play, loadstart, playing, error, ended\n * @prop {VideoSources} sources Optional sources to generate\n * @example\n *  <caption>\n *  Using custom defined resources.\n * </caption>\n * const vid = new CloudinaryVideo('dog', {cloudName: 'demo'});\n * const videoEl = useRef();\n * const sources = [\n *  {\n *    type: 'mp4',\n *    codecs: ['vp8', 'vorbis'],\n *    transcode: videoCodec(auto())\n *  },\n *  {\n *    type: 'webm',\n *    codecs: ['avc1.4D401E', 'mp4a.40.2'],\n *    videoCodec: videoCodec(auto())\n *  }];\n *\n * return <AdvancedVideo cldVid={vid} sources={sources} ref={videoEl} controls />\n */\nclass AdvancedVideo extends Component <VideoProps> {\n  videoRef: MutableRefObject<HTMLVideoElement | null>\n  htmlVideoLayerInstance: HtmlVideoLayer;\n\n  constructor(props: VideoProps) {\n    super(props);\n    this.videoRef = createRef();\n    this.attachRef = this.attachRef.bind(this);\n  }\n\n  /**\n   * On mount creates a new HTMLVideoLayer instance and initialises with ref to video element,\n   * user generated cloudinaryVideo and the plugins to be used\n   */\n  componentDidMount() {\n    this.htmlVideoLayerInstance = new HtmlVideoLayer(\n      this.videoRef && this.videoRef.current,\n      this.props.cldVid,\n      this.props.sources,\n      this.props.plugins,\n      this.getVideoAttributes()\n    )\n  }\n\n  /**\n   * On update we cancel running plugins and update the video instance if the src\n   * was changed\n   */\n  componentDidUpdate() {\n    cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState);\n    // call html layer to update the dom again with plugins and reset toBeCanceled\n    this.htmlVideoLayerInstance.update(this.props.cldVid, this.props.sources, this.props.plugins, this.getVideoAttributes())\n  }\n\n  /**\n   * On unmount we cancel the currently running plugins\n   */\n  componentWillUnmount() {\n    // safely cancel running events on unmount\n    cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState)\n  }\n\n  /**\n   * returns video attributes\n   */\n  getVideoAttributes() {\n    return {\n      controls: this.props.controls,\n      loop: this.props.loop,\n      muted: this.props.muted,\n      poster: this.props.poster,\n      preload: this.props.preload,\n      autoplay: this.props.autoPlay,\n      playsinline: this.props.playsInline\n    };\n  }\n\n  /**\n   * Attach both this.videoRef and props.innerRef as ref to the given element\n   * @param element - the element to attach a ref to\n   */\n  attachRef(element: HTMLVideoElement) {\n    this.videoRef.current = element;\n    const { innerRef } = this.props;\n\n    if (innerRef) {\n      if (innerRef instanceof Function) {\n        innerRef(element);\n      } else {\n        innerRef.current = element;\n      }\n    }\n  };\n\n  render() {\n    const {\n      cldVid,\n      plugins,\n      sources,\n      innerRef,\n      ...videoEvents // Assume any other props are for the base element\n    } = this.props;\n\n    return <video {...videoEvents} ref={this.attachRef} />\n  }\n}\n\nexport { AdvancedVideo };\n","import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/url-gen/assets/CloudinaryImage';\n\nimport {\n  HtmlPictureLayer,\n  PictureSources\n} from '@cloudinary/html'\n\ninterface PictureProps {\n  cldImg: CloudinaryImage,\n  breakpoints?: number[],\n  sources?: PictureSources,\n  autoOptimalBreakpoints?: boolean,\n  relativeWidth?: number\n  [x: string]: any\n}\n\n/**\n * @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary picture component\n * @prop {CloudinaryImage} transformation Generated by @cloudinary/url-gen\n * @prop {PictureSources} sources sources to generate source tag\n * @example\n *  <caption>\n *  Using custom defined resources.\n * </caption>\n * const img = new CloudinaryImage('sample', { cloudName: 'demo'});\n * const sources = [\n *  {\n *    minWidth:500,\n *    maxWidth:2000,\n *    sizes: \"80vw,\n *    image: img\n *  },\n *  {\n *    minWidth:3000,\n *    maxWidth:4000,\n *    sizes: \"80vw,\n *    image: img\n *  }];\n *\n * return <AdvancedPicture cldImg={img} sources={sources} />\n */\nclass AdvancedPicture extends React.Component <PictureProps> {\n  pictureRef: React.RefObject<HTMLPictureElement>;\n  htmlPictureLayerInstance: HtmlPictureLayer;\n\n  constructor(props: PictureProps) {\n    super(props);\n    this.pictureRef = React.createRef();\n  }\n\n  /**\n   * On mount creates a new HTMLPictureLayer instance and initialises with ref to picture element,\n   * user generated cloudinaryImage and the sources to be used\n   */\n  componentDidMount() {\n    this.htmlPictureLayerInstance = new HtmlPictureLayer(\n      this.pictureRef.current,\n      this.props.cldImg,\n      this.props.breakpoints,\n      this.props.sources,\n      this.props.autoOptimalBreakpoints,\n      this.props.relativeWidth\n    )\n  }\n\n  /**\n   * On update we update the image instance with the state of user\n   * cloudinaryImage and the state of sources\n   */\n  componentDidUpdate() {\n    // call html layer to update the dom\n    this.htmlPictureLayerInstance.update(\n      this.props.cldImg,\n      this.props.breakpoints,\n      this.props.sources,\n      this.props.autoOptimalBreakpoints,\n      this.props.relativeWidth\n    );\n  }\n\n  render() {\n    const {\n      cldImg,\n      breakpoints,\n      sources,\n      autoOptimalBreakpoints,\n      relativeWidth,\n      ...otherProps // Assume any other props are for the base element\n    } = this.props;\n    return <picture {...otherProps} ref={this.pictureRef} />\n  }\n}\n\nexport { AdvancedPicture };\n"],"names":["AdvancedImage","props","imageRef","React","createRef","componentDidMount","htmlLayerInstance","HtmlImageLayer","current","cldImg","plugins","componentDidUpdate","cancelCurrentlyRunningPlugins","htmlPluginState","update","componentWillUnmount","render","otherProps","isBrowser","suppressHydrationWarning","ref","src","serverSideSrc","Component","AdvancedVideo","videoRef","attachRef","bind","htmlVideoLayerInstance","HtmlVideoLayer","cldVid","sources","getVideoAttributes","controls","loop","muted","poster","preload","autoplay","autoPlay","playsinline","playsInline","element","innerRef","Function","videoEvents","AdvancedPicture","pictureRef","htmlPictureLayerInstance","HtmlPictureLayer","breakpoints","autoOptimalBreakpoints","relativeWidth"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA;;;;;;;;IAOMA;;;AAIJ,yBAAYC,KAAZ;;;AACE,wCAAMA,KAAN;AACA,UAAKC,QAAL,gBAAgBC,yBAAK,CAACC,SAAN,EAAhB;;AACD;AAED;;;;;;;;SAIAC,oBAAA;AACE,SAAKC,iBAAL,GAAyB,IAAIC,mBAAJ,CACvB,KAAKL,QAAL,CAAcM,OADS,EAEvB,KAAKP,KAAL,CAAWQ,MAFY,EAGvB,KAAKR,KAAL,CAAWS,OAHY,CAAzB;AAKD;AAED;;;;;;SAIAC,qBAAA;AACEC,IAAAA,kCAA6B,CAAC,KAAKN,iBAAL,CAAuBO,eAAxB,CAA7B;;AAEA,SAAKP,iBAAL,CAAuBQ,MAAvB,CAA8B,KAAKb,KAAL,CAAWQ,MAAzC,EAAiD,KAAKR,KAAL,CAAWS,OAA5D;AACD;AAED;;;;;SAGAK,uBAAA;AACE;AACAH,IAAAA,kCAA6B,CAAC,KAAKN,iBAAL,CAAuBO,eAAxB,CAA7B;AACD;;SAEDG,SAAA;AACE,sBAII,KAAKf,KAJT;AAAA,QAGKgB,UAHL;;AAKA,QAAIC,cAAS,EAAb,EAAiB;AAAE;AACjB,0BAAOf,uCAAA,MAAA;AAAKgB,QAAAA,wBAAwB;SAAKF;AAAYG,QAAAA,GAAG,EAAE,KAAKlB;QAAxD,CAAP;AACD,KAFD,MAEO;AAAE;AACP,UAAMmB,GAAG,GAAGC,kBAAa,CACvB,KAAKrB,KAAL,CAAWS,OADY,EAEvB,KAAKT,KAAL,CAAWQ,MAFY,CAAzB;AAIA,0BAAON,uCAAA,MAAA,oBAASc;AAAYI,QAAAA,GAAG,EAAEA;QAA1B,CAAP;AACD;AACF;;;EAtDyBlB,yBAAK,CAACoB;;;AC9BlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6BMC;;;AAIJ,yBAAYvB,KAAZ;;;AACE,kCAAMA,KAAN;AACA,UAAKwB,QAAL,gBAAgBrB,eAAS,EAAzB;AACA,UAAKsB,SAAL,GAAiB,MAAKA,SAAL,CAAeC,IAAf,+BAAjB;;AACD;AAED;;;;;;;;SAIAtB,oBAAA;AACE,SAAKuB,sBAAL,GAA8B,IAAIC,mBAAJ,CAC5B,KAAKJ,QAAL,IAAiB,KAAKA,QAAL,CAAcjB,OADH,EAE5B,KAAKP,KAAL,CAAW6B,MAFiB,EAG5B,KAAK7B,KAAL,CAAW8B,OAHiB,EAI5B,KAAK9B,KAAL,CAAWS,OAJiB,EAK5B,KAAKsB,kBAAL,EAL4B,CAA9B;AAOD;AAED;;;;;;SAIArB,qBAAA;AACEC,IAAAA,kCAA6B,CAAC,KAAKgB,sBAAL,CAA4Bf,eAA7B,CAA7B;;AAEA,SAAKe,sBAAL,CAA4Bd,MAA5B,CAAmC,KAAKb,KAAL,CAAW6B,MAA9C,EAAsD,KAAK7B,KAAL,CAAW8B,OAAjE,EAA0E,KAAK9B,KAAL,CAAWS,OAArF,EAA8F,KAAKsB,kBAAL,EAA9F;AACD;AAED;;;;;SAGAjB,uBAAA;AACE;AACAH,IAAAA,kCAA6B,CAAC,KAAKgB,sBAAL,CAA4Bf,eAA7B,CAA7B;AACD;AAED;;;;;SAGAmB,qBAAA;AACE,WAAO;AACLC,MAAAA,QAAQ,EAAE,KAAKhC,KAAL,CAAWgC,QADhB;AAELC,MAAAA,IAAI,EAAE,KAAKjC,KAAL,CAAWiC,IAFZ;AAGLC,MAAAA,KAAK,EAAE,KAAKlC,KAAL,CAAWkC,KAHb;AAILC,MAAAA,MAAM,EAAE,KAAKnC,KAAL,CAAWmC,MAJd;AAKLC,MAAAA,OAAO,EAAE,KAAKpC,KAAL,CAAWoC,OALf;AAMLC,MAAAA,QAAQ,EAAE,KAAKrC,KAAL,CAAWsC,QANhB;AAOLC,MAAAA,WAAW,EAAE,KAAKvC,KAAL,CAAWwC;AAPnB,KAAP;AASD;AAED;;;;;;SAIAf,YAAA,mBAAUgB,OAAV;AACE,SAAKjB,QAAL,CAAcjB,OAAd,GAAwBkC,OAAxB;AACA,QAAQC,QAAR,GAAqB,KAAK1C,KAA1B,CAAQ0C,QAAR;;AAEA,QAAIA,QAAJ,EAAc;AACZ,UAAIA,QAAQ,YAAYC,QAAxB,EAAkC;AAChCD,QAAAA,QAAQ,CAACD,OAAD,CAAR;AACD,OAFD,MAEO;AACLC,QAAAA,QAAQ,CAACnC,OAAT,GAAmBkC,OAAnB;AACD;AACF;AACF;;SAED1B,SAAA;AACE,sBAMI,KAAKf,KANT;AAAA,QAKK4C,WALL;;AAQA,wBAAO1C,uCAAA,QAAA,oBAAW0C;AAAazB,MAAAA,GAAG,EAAE,KAAKM;MAAlC,CAAP;AACD;;;EApFyBH;;;AC/C5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2BMuB;;;AAIJ,2BAAY7C,KAAZ;;;AACE,wCAAMA,KAAN;AACA,UAAK8C,UAAL,gBAAkB5C,yBAAK,CAACC,SAAN,EAAlB;;AACD;AAED;;;;;;;;SAIAC,oBAAA;AACE,SAAK2C,wBAAL,GAAgC,IAAIC,qBAAJ,CAC9B,KAAKF,UAAL,CAAgBvC,OADc,EAE9B,KAAKP,KAAL,CAAWQ,MAFmB,EAG9B,KAAKR,KAAL,CAAWiD,WAHmB,EAI9B,KAAKjD,KAAL,CAAW8B,OAJmB,EAK9B,KAAK9B,KAAL,CAAWkD,sBALmB,EAM9B,KAAKlD,KAAL,CAAWmD,aANmB,CAAhC;AAQD;AAED;;;;;;SAIAzC,qBAAA;AACE;AACA,SAAKqC,wBAAL,CAA8BlC,MAA9B,CACE,KAAKb,KAAL,CAAWQ,MADb,EAEE,KAAKR,KAAL,CAAWiD,WAFb,EAGE,KAAKjD,KAAL,CAAW8B,OAHb,EAIE,KAAK9B,KAAL,CAAWkD,sBAJb,EAKE,KAAKlD,KAAL,CAAWmD,aALb;AAOD;;SAEDpC,SAAA;AACE,sBAOI,KAAKf,KAPT;AAAA,QAMKgB,UANL;;AAQA,wBAAOd,uCAAA,UAAA,oBAAac;AAAYG,MAAAA,GAAG,EAAE,KAAK2B;MAAnC,CAAP;AACD;;;EAjD2B5C,yBAAK,CAACoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

index.umd.js

@@ -60,3 +60,3 @@ (function (global, factory) {
    * // Example
-   * import {CloudinaryImage} from "@cloudinary/base/assets/CloudinaryImage";
+   * import {CloudinaryImage} from "@cloudinary/url-gen/assets/CloudinaryImage";
    * import {
@@ -96,3 +96,3 @@ *  AdvancedImage,
    * @description The Cloudinary image component
-   * @prop {CloudinaryImage} cldImg Generated by @cloudinary/base
+   * @prop {CloudinaryImage} cldImg Generated by @cloudinary/url-gen
    * @prop {Plugins} plugins Advanced image component plugins accessibility(), responsive(), lazyload(), placeholder()
@@ -171,3 +171,3 @@ */
    * @description The Cloudinary video component
-   * @prop {CloudinaryVideo} transformation Generated by @cloudinary/base
+   * @prop {CloudinaryVideo} transformation Generated by @cloudinary/url-gen
    * @prop {Plugins} plugins Advanced image component plugins lazyload()
@@ -287,3 +287,3 @@ * @prop videoAttributes Optional attributes include controls, loop, muted, poster, preload, autoplay
 
-  var _excluded = ["cldImg", "sources"];
+  var _excluded = ["cldImg", "breakpoints", "sources", "autoOptimalBreakpoints", "relativeWidth"];
   /**
@@ -293,3 +293,3 @@ * @memberOf ReactSDK
    * @description The Cloudinary picture component
-   * @prop {CloudinaryImage} transformation Generated by @cloudinary/base
+   * @prop {CloudinaryImage} transformation Generated by @cloudinary/url-gen
    * @prop {PictureSources} sources sources to generate source tag
@@ -337,3 +337,3 @@ * @example
     _proto.componentDidMount = function componentDidMount() {
-      this.htmlPictureLayerInstance = new html.HtmlPictureLayer(this.pictureRef.current, this.props.cldImg, this.props.sources);
+      this.htmlPictureLayerInstance = new html.HtmlPictureLayer(this.pictureRef.current, this.props.cldImg, this.props.breakpoints, this.props.sources, this.props.autoOptimalBreakpoints, this.props.relativeWidth);
     }
@@ -348,3 +348,3 @@ /**
       // call html layer to update the dom
-      this.htmlPictureLayerInstance.update(this.props.cldImg, this.props.sources);
+      this.htmlPictureLayerInstance.update(this.props.cldImg, this.props.breakpoints, this.props.sources, this.props.autoOptimalBreakpoints, this.props.relativeWidth);
     };
@@ -351,0 +351,0 @@

index.umd.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.umd.js","sources":["../src/AdvancedImage.tsx","../src/AdvancedVideo.tsx","../src/AdvancedPicture.tsx"],"sourcesContent":["import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/base/assets/CloudinaryImage';\n\nimport {\n  HtmlImageLayer,\n  Plugins,\n  isBrowser,\n  serverSideSrc,\n  cancelCurrentlyRunningPlugins\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: HtmlImageLayer;\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 HtmlImageLayer(\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    cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\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    cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\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","import React, { Component, createRef, EventHandler, MutableRefObject, SyntheticEvent } from 'react';\nimport { CloudinaryVideo } from '@cloudinary/base';\n\nimport {\n  HtmlVideoLayer,\n  Plugins,\n  VideoSources,\n  cancelCurrentlyRunningPlugins\n} from '@cloudinary/html';\n\ntype ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;\n\ninterface VideoProps {\n  cldVid: CloudinaryVideo,\n  plugins?: Plugins,\n  sources?: VideoSources,\n  innerRef?: ((instance: any) => void) | MutableRefObject<unknown> | null\n\n  // supported video attributes\n  controls?: boolean\n  loop?: boolean,\n  muted?: boolean,\n  poster?: string,\n  preload?: string,\n  autoPlay?: boolean,\n  playsInline?: boolean\n\n  // supported video events\n  onPlay?: ReactEventHandler<any>,\n  onLoadStart?: ReactEventHandler<any>,\n  onPlaying?: ReactEventHandler<any>,\n  onError?: ReactEventHandler<any>,\n  onEnded?: ReactEventHandler<any>\n}\n\n/**\n * @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary video component\n * @prop {CloudinaryVideo} transformation Generated by @cloudinary/base\n * @prop {Plugins} plugins Advanced image component plugins lazyload()\n * @prop videoAttributes Optional attributes include controls, loop, muted, poster, preload, autoplay\n * @prop videoEvents Optional video events include play, loadstart, playing, error, ended\n * @prop {VideoSources} sources Optional sources to generate\n * @example\n *  <caption>\n *  Using custom defined resources.\n * </caption>\n * const vid = new CloudinaryVideo('dog', {cloudName: 'demo'});\n * const videoEl = useRef();\n * const sources = [\n *  {\n *    type: 'mp4',\n *    codecs: ['vp8', 'vorbis'],\n *    transcode: videoCodec(auto())\n *  },\n *  {\n *    type: 'webm',\n *    codecs: ['avc1.4D401E', 'mp4a.40.2'],\n *    videoCodec: videoCodec(auto())\n *  }];\n *\n * return <AdvancedVideo cldVid={vid} sources={sources} ref={videoEl} controls />\n */\nclass AdvancedVideo extends Component <VideoProps> {\n  videoRef: MutableRefObject<HTMLVideoElement | null>\n  htmlVideoLayerInstance: HtmlVideoLayer;\n\n  constructor(props: VideoProps) {\n    super(props);\n    this.videoRef = createRef();\n    this.attachRef = this.attachRef.bind(this);\n  }\n\n  /**\n   * On mount creates a new HTMLVideoLayer instance and initialises with ref to video element,\n   * user generated cloudinaryVideo and the plugins to be used\n   */\n  componentDidMount() {\n    this.htmlVideoLayerInstance = new HtmlVideoLayer(\n      this.videoRef && this.videoRef.current,\n      this.props.cldVid,\n      this.props.sources,\n      this.props.plugins,\n      this.getVideoAttributes()\n    )\n  }\n\n  /**\n   * On update we cancel running plugins and update the video instance if the src\n   * was changed\n   */\n  componentDidUpdate() {\n    cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState);\n    // call html layer to update the dom again with plugins and reset toBeCanceled\n    this.htmlVideoLayerInstance.update(this.props.cldVid, this.props.sources, this.props.plugins, this.getVideoAttributes())\n  }\n\n  /**\n   * On unmount we cancel the currently running plugins\n   */\n  componentWillUnmount() {\n    // safely cancel running events on unmount\n    cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState)\n  }\n\n  /**\n   * returns video attributes\n   */\n  getVideoAttributes() {\n    return {\n      controls: this.props.controls,\n      loop: this.props.loop,\n      muted: this.props.muted,\n      poster: this.props.poster,\n      preload: this.props.preload,\n      autoplay: this.props.autoPlay,\n      playsinline: this.props.playsInline\n    };\n  }\n\n  /**\n   * Attach both this.videoRef and props.innerRef as ref to the given element\n   * @param element - the element to attach a ref to\n   */\n  attachRef(element: HTMLVideoElement) {\n    this.videoRef.current = element;\n    const { innerRef } = this.props;\n\n    if (innerRef) {\n      if (innerRef instanceof Function) {\n        innerRef(element);\n      } else {\n        innerRef.current = element;\n      }\n    }\n  };\n\n  render() {\n    const {\n      cldVid,\n      plugins,\n      sources,\n      innerRef,\n      ...videoEvents // Assume any other props are for the base element\n    } = this.props;\n\n    return <video {...videoEvents} ref={this.attachRef} />\n  }\n}\n\nexport { AdvancedVideo };\n","import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/base/assets/CloudinaryImage';\n\nimport {\n  HtmlPictureLayer,\n  PictureSources,\n} from '@cloudinary/html'\n\ninterface PictureProps {\n  cldImg: CloudinaryImage,\n  sources: PictureSources,\n  [x: string]: any\n}\n\n/**\n * @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary picture component\n * @prop {CloudinaryImage} transformation Generated by @cloudinary/base\n * @prop {PictureSources} sources sources to generate source tag\n * @example\n *  <caption>\n *  Using custom defined resources.\n * </caption>\n * const img = new CloudinaryImage('sample', { cloudName: 'demo'});\n * const sources = [\n *  {\n *    minWidth:500,\n *    maxWidth:2000,\n *    sizes: \"80vw,\n *    image: img\n *  },\n *  {\n *    minWidth:3000,\n *    maxWidth:4000,\n *    sizes: \"80vw,\n *    image: img\n *  }];\n *\n * return <AdvancedPicture cldImg={img} sources={sources} />\n */\nclass AdvancedPicture extends React.Component <PictureProps> {\n  pictureRef: React.RefObject<HTMLPictureElement>;\n  htmlPictureLayerInstance: HtmlPictureLayer;\n\n  constructor(props: PictureProps) {\n    super(props);\n    this.pictureRef = React.createRef();\n  }\n\n  /**\n   * On mount creates a new HTMLPictureLayer instance and initialises with ref to picture element,\n   * user generated cloudinaryImage and the sources to be used\n   */\n  componentDidMount() {\n    this.htmlPictureLayerInstance = new HtmlPictureLayer(\n      this.pictureRef.current,\n      this.props.cldImg,\n      this.props.sources\n    )\n  }\n\n  /**\n   * On update we update the image instance with the state of user\n   * cloudinaryImage and the state of sources\n   */\n  componentDidUpdate() {\n    // call html layer to update the dom\n    this.htmlPictureLayerInstance.update(this.props.cldImg, this.props.sources);\n  }\n\n  render() {\n    const {\n      cldImg,\n      sources,\n      ...otherProps // Assume any other props are for the base element\n    } = this.props;\n    return <picture {...otherProps} ref={this.pictureRef} />\n  }\n}\n\nexport { AdvancedPicture };\n"],"names":["AdvancedImage","props","imageRef","React","createRef","componentDidMount","htmlLayerInstance","HtmlImageLayer","current","cldImg","plugins","componentDidUpdate","cancelCurrentlyRunningPlugins","htmlPluginState","update","componentWillUnmount","render","otherProps","isBrowser","suppressHydrationWarning","ref","src","serverSideSrc","Component","AdvancedVideo","videoRef","attachRef","bind","htmlVideoLayerInstance","HtmlVideoLayer","cldVid","sources","getVideoAttributes","controls","loop","muted","poster","preload","autoplay","autoPlay","playsinline","playsInline","element","innerRef","Function","videoEvents","AdvancedPicture","pictureRef","htmlPictureLayerInstance","HtmlPictureLayer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCA;;;;;;;;MAOMA;;;EAIJ,yBAAYC,KAAZ;;;EACE,wCAAMA,KAAN;EACA,UAAKC,QAAL,gBAAgBC,yBAAK,CAACC,SAAN,EAAhB;;EACD;EAED;;;;;;;;WAIAC,oBAAA;EACE,SAAKC,iBAAL,GAAyB,IAAIC,mBAAJ,CACvB,KAAKL,QAAL,CAAcM,OADS,EAEvB,KAAKP,KAAL,CAAWQ,MAFY,EAGvB,KAAKR,KAAL,CAAWS,OAHY,CAAzB;EAKD;EAED;;;;;;WAIAC,qBAAA;EACEC,IAAAA,kCAA6B,CAAC,KAAKN,iBAAL,CAAuBO,eAAxB,CAA7B;;EAEA,SAAKP,iBAAL,CAAuBQ,MAAvB,CAA8B,KAAKb,KAAL,CAAWQ,MAAzC,EAAiD,KAAKR,KAAL,CAAWS,OAA5D;EACD;EAED;;;;;WAGAK,uBAAA;EACE;EACAH,IAAAA,kCAA6B,CAAC,KAAKN,iBAAL,CAAuBO,eAAxB,CAA7B;EACD;;WAEDG,SAAA;EACE,sBAII,KAAKf,KAJT;EAAA,QAGKgB,UAHL;;EAKA,QAAIC,cAAS,EAAb,EAAiB;EAAE;EACjB,0BAAOf,uCAAA,MAAA;EAAKgB,QAAAA,wBAAwB;WAAKF;EAAYG,QAAAA,GAAG,EAAE,KAAKlB;UAAxD,CAAP;EACD,KAFD,MAEO;EAAE;EACP,UAAMmB,GAAG,GAAGC,kBAAa,CACvB,KAAKrB,KAAL,CAAWS,OADY,EAEvB,KAAKT,KAAL,CAAWQ,MAFY,CAAzB;EAIA,0BAAON,uCAAA,MAAA,oBAASc;EAAYI,QAAAA,GAAG,EAAEA;UAA1B,CAAP;EACD;EACF;;;IAtDyBlB,yBAAK,CAACoB;;;EC9BlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA6BMC;;;EAIJ,yBAAYvB,KAAZ;;;EACE,kCAAMA,KAAN;EACA,UAAKwB,QAAL,gBAAgBrB,eAAS,EAAzB;EACA,UAAKsB,SAAL,GAAiB,MAAKA,SAAL,CAAeC,IAAf,+BAAjB;;EACD;EAED;;;;;;;;WAIAtB,oBAAA;EACE,SAAKuB,sBAAL,GAA8B,IAAIC,mBAAJ,CAC5B,KAAKJ,QAAL,IAAiB,KAAKA,QAAL,CAAcjB,OADH,EAE5B,KAAKP,KAAL,CAAW6B,MAFiB,EAG5B,KAAK7B,KAAL,CAAW8B,OAHiB,EAI5B,KAAK9B,KAAL,CAAWS,OAJiB,EAK5B,KAAKsB,kBAAL,EAL4B,CAA9B;EAOD;EAED;;;;;;WAIArB,qBAAA;EACEC,IAAAA,kCAA6B,CAAC,KAAKgB,sBAAL,CAA4Bf,eAA7B,CAA7B;;EAEA,SAAKe,sBAAL,CAA4Bd,MAA5B,CAAmC,KAAKb,KAAL,CAAW6B,MAA9C,EAAsD,KAAK7B,KAAL,CAAW8B,OAAjE,EAA0E,KAAK9B,KAAL,CAAWS,OAArF,EAA8F,KAAKsB,kBAAL,EAA9F;EACD;EAED;;;;;WAGAjB,uBAAA;EACE;EACAH,IAAAA,kCAA6B,CAAC,KAAKgB,sBAAL,CAA4Bf,eAA7B,CAA7B;EACD;EAED;;;;;WAGAmB,qBAAA;EACE,WAAO;EACLC,MAAAA,QAAQ,EAAE,KAAKhC,KAAL,CAAWgC,QADhB;EAELC,MAAAA,IAAI,EAAE,KAAKjC,KAAL,CAAWiC,IAFZ;EAGLC,MAAAA,KAAK,EAAE,KAAKlC,KAAL,CAAWkC,KAHb;EAILC,MAAAA,MAAM,EAAE,KAAKnC,KAAL,CAAWmC,MAJd;EAKLC,MAAAA,OAAO,EAAE,KAAKpC,KAAL,CAAWoC,OALf;EAMLC,MAAAA,QAAQ,EAAE,KAAKrC,KAAL,CAAWsC,QANhB;EAOLC,MAAAA,WAAW,EAAE,KAAKvC,KAAL,CAAWwC;EAPnB,KAAP;EASD;EAED;;;;;;WAIAf,YAAA,mBAAUgB,OAAV;EACE,SAAKjB,QAAL,CAAcjB,OAAd,GAAwBkC,OAAxB;EACA,QAAQC,QAAR,GAAqB,KAAK1C,KAA1B,CAAQ0C,QAAR;;EAEA,QAAIA,QAAJ,EAAc;EACZ,UAAIA,QAAQ,YAAYC,QAAxB,EAAkC;EAChCD,QAAAA,QAAQ,CAACD,OAAD,CAAR;EACD,OAFD,MAEO;EACLC,QAAAA,QAAQ,CAACnC,OAAT,GAAmBkC,OAAnB;EACD;EACF;EACF;;WAED1B,SAAA;EACE,sBAMI,KAAKf,KANT;EAAA,QAKK4C,WALL;;EAQA,wBAAO1C,uCAAA,QAAA,oBAAW0C;EAAazB,MAAAA,GAAG,EAAE,KAAKM;QAAlC,CAAP;EACD;;;IApFyBH;;;EClD5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BMuB;;;EAIJ,2BAAY7C,KAAZ;;;EACE,wCAAMA,KAAN;EACA,UAAK8C,UAAL,gBAAkB5C,yBAAK,CAACC,SAAN,EAAlB;;EACD;EAED;;;;;;;;WAIAC,oBAAA;EACE,SAAK2C,wBAAL,GAAgC,IAAIC,qBAAJ,CAC9B,KAAKF,UAAL,CAAgBvC,OADc,EAE9B,KAAKP,KAAL,CAAWQ,MAFmB,EAG9B,KAAKR,KAAL,CAAW8B,OAHmB,CAAhC;EAKD;EAED;;;;;;WAIApB,qBAAA;EACE;EACA,SAAKqC,wBAAL,CAA8BlC,MAA9B,CAAqC,KAAKb,KAAL,CAAWQ,MAAhD,EAAwD,KAAKR,KAAL,CAAW8B,OAAnE;EACD;;WAEDf,SAAA;EACE,sBAII,KAAKf,KAJT;EAAA,QAGKgB,UAHL;;EAKA,wBAAOd,uCAAA,UAAA,oBAAac;EAAYG,MAAAA,GAAG,EAAE,KAAK2B;QAAnC,CAAP;EACD;;;IArC2B5C,yBAAK,CAACoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.umd.js","sources":["../src/AdvancedImage.tsx","../src/AdvancedVideo.tsx","../src/AdvancedPicture.tsx"],"sourcesContent":["import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/url-gen/assets/CloudinaryImage';\n\nimport {\n  HtmlImageLayer,\n  Plugins,\n  isBrowser,\n  serverSideSrc,\n  cancelCurrentlyRunningPlugins\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/url-gen/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/url-gen\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: HtmlImageLayer;\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 HtmlImageLayer(\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    cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\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    cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\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","import React, { Component, createRef, EventHandler, MutableRefObject, SyntheticEvent } from 'react';\nimport { CloudinaryVideo } from '@cloudinary/url-gen';\n\nimport {\n  HtmlVideoLayer,\n  Plugins,\n  VideoSources,\n  cancelCurrentlyRunningPlugins\n} from '@cloudinary/html';\n\ntype ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;\n\ninterface VideoProps {\n  cldVid: CloudinaryVideo,\n  plugins?: Plugins,\n  sources?: VideoSources,\n  innerRef?: ((instance: any) => void) | MutableRefObject<unknown> | null\n\n  // supported video attributes\n  controls?: boolean\n  loop?: boolean,\n  muted?: boolean,\n  poster?: string,\n  preload?: string,\n  autoPlay?: boolean,\n  playsInline?: boolean\n\n  // supported video events\n  onPlay?: ReactEventHandler<any>,\n  onLoadStart?: ReactEventHandler<any>,\n  onPlaying?: ReactEventHandler<any>,\n  onError?: ReactEventHandler<any>,\n  onEnded?: ReactEventHandler<any>\n}\n\n/**\n * @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary video component\n * @prop {CloudinaryVideo} transformation Generated by @cloudinary/url-gen\n * @prop {Plugins} plugins Advanced image component plugins lazyload()\n * @prop videoAttributes Optional attributes include controls, loop, muted, poster, preload, autoplay\n * @prop videoEvents Optional video events include play, loadstart, playing, error, ended\n * @prop {VideoSources} sources Optional sources to generate\n * @example\n *  <caption>\n *  Using custom defined resources.\n * </caption>\n * const vid = new CloudinaryVideo('dog', {cloudName: 'demo'});\n * const videoEl = useRef();\n * const sources = [\n *  {\n *    type: 'mp4',\n *    codecs: ['vp8', 'vorbis'],\n *    transcode: videoCodec(auto())\n *  },\n *  {\n *    type: 'webm',\n *    codecs: ['avc1.4D401E', 'mp4a.40.2'],\n *    videoCodec: videoCodec(auto())\n *  }];\n *\n * return <AdvancedVideo cldVid={vid} sources={sources} ref={videoEl} controls />\n */\nclass AdvancedVideo extends Component <VideoProps> {\n  videoRef: MutableRefObject<HTMLVideoElement | null>\n  htmlVideoLayerInstance: HtmlVideoLayer;\n\n  constructor(props: VideoProps) {\n    super(props);\n    this.videoRef = createRef();\n    this.attachRef = this.attachRef.bind(this);\n  }\n\n  /**\n   * On mount creates a new HTMLVideoLayer instance and initialises with ref to video element,\n   * user generated cloudinaryVideo and the plugins to be used\n   */\n  componentDidMount() {\n    this.htmlVideoLayerInstance = new HtmlVideoLayer(\n      this.videoRef && this.videoRef.current,\n      this.props.cldVid,\n      this.props.sources,\n      this.props.plugins,\n      this.getVideoAttributes()\n    )\n  }\n\n  /**\n   * On update we cancel running plugins and update the video instance if the src\n   * was changed\n   */\n  componentDidUpdate() {\n    cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState);\n    // call html layer to update the dom again with plugins and reset toBeCanceled\n    this.htmlVideoLayerInstance.update(this.props.cldVid, this.props.sources, this.props.plugins, this.getVideoAttributes())\n  }\n\n  /**\n   * On unmount we cancel the currently running plugins\n   */\n  componentWillUnmount() {\n    // safely cancel running events on unmount\n    cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState)\n  }\n\n  /**\n   * returns video attributes\n   */\n  getVideoAttributes() {\n    return {\n      controls: this.props.controls,\n      loop: this.props.loop,\n      muted: this.props.muted,\n      poster: this.props.poster,\n      preload: this.props.preload,\n      autoplay: this.props.autoPlay,\n      playsinline: this.props.playsInline\n    };\n  }\n\n  /**\n   * Attach both this.videoRef and props.innerRef as ref to the given element\n   * @param element - the element to attach a ref to\n   */\n  attachRef(element: HTMLVideoElement) {\n    this.videoRef.current = element;\n    const { innerRef } = this.props;\n\n    if (innerRef) {\n      if (innerRef instanceof Function) {\n        innerRef(element);\n      } else {\n        innerRef.current = element;\n      }\n    }\n  };\n\n  render() {\n    const {\n      cldVid,\n      plugins,\n      sources,\n      innerRef,\n      ...videoEvents // Assume any other props are for the base element\n    } = this.props;\n\n    return <video {...videoEvents} ref={this.attachRef} />\n  }\n}\n\nexport { AdvancedVideo };\n","import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/url-gen/assets/CloudinaryImage';\n\nimport {\n  HtmlPictureLayer,\n  PictureSources\n} from '@cloudinary/html'\n\ninterface PictureProps {\n  cldImg: CloudinaryImage,\n  breakpoints?: number[],\n  sources?: PictureSources,\n  autoOptimalBreakpoints?: boolean,\n  relativeWidth?: number\n  [x: string]: any\n}\n\n/**\n * @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary picture component\n * @prop {CloudinaryImage} transformation Generated by @cloudinary/url-gen\n * @prop {PictureSources} sources sources to generate source tag\n * @example\n *  <caption>\n *  Using custom defined resources.\n * </caption>\n * const img = new CloudinaryImage('sample', { cloudName: 'demo'});\n * const sources = [\n *  {\n *    minWidth:500,\n *    maxWidth:2000,\n *    sizes: \"80vw,\n *    image: img\n *  },\n *  {\n *    minWidth:3000,\n *    maxWidth:4000,\n *    sizes: \"80vw,\n *    image: img\n *  }];\n *\n * return <AdvancedPicture cldImg={img} sources={sources} />\n */\nclass AdvancedPicture extends React.Component <PictureProps> {\n  pictureRef: React.RefObject<HTMLPictureElement>;\n  htmlPictureLayerInstance: HtmlPictureLayer;\n\n  constructor(props: PictureProps) {\n    super(props);\n    this.pictureRef = React.createRef();\n  }\n\n  /**\n   * On mount creates a new HTMLPictureLayer instance and initialises with ref to picture element,\n   * user generated cloudinaryImage and the sources to be used\n   */\n  componentDidMount() {\n    this.htmlPictureLayerInstance = new HtmlPictureLayer(\n      this.pictureRef.current,\n      this.props.cldImg,\n      this.props.breakpoints,\n      this.props.sources,\n      this.props.autoOptimalBreakpoints,\n      this.props.relativeWidth\n    )\n  }\n\n  /**\n   * On update we update the image instance with the state of user\n   * cloudinaryImage and the state of sources\n   */\n  componentDidUpdate() {\n    // call html layer to update the dom\n    this.htmlPictureLayerInstance.update(\n      this.props.cldImg,\n      this.props.breakpoints,\n      this.props.sources,\n      this.props.autoOptimalBreakpoints,\n      this.props.relativeWidth\n    );\n  }\n\n  render() {\n    const {\n      cldImg,\n      breakpoints,\n      sources,\n      autoOptimalBreakpoints,\n      relativeWidth,\n      ...otherProps // Assume any other props are for the base element\n    } = this.props;\n    return <picture {...otherProps} ref={this.pictureRef} />\n  }\n}\n\nexport { AdvancedPicture };\n"],"names":["AdvancedImage","props","imageRef","React","createRef","componentDidMount","htmlLayerInstance","HtmlImageLayer","current","cldImg","plugins","componentDidUpdate","cancelCurrentlyRunningPlugins","htmlPluginState","update","componentWillUnmount","render","otherProps","isBrowser","suppressHydrationWarning","ref","src","serverSideSrc","Component","AdvancedVideo","videoRef","attachRef","bind","htmlVideoLayerInstance","HtmlVideoLayer","cldVid","sources","getVideoAttributes","controls","loop","muted","poster","preload","autoplay","autoPlay","playsinline","playsInline","element","innerRef","Function","videoEvents","AdvancedPicture","pictureRef","htmlPictureLayerInstance","HtmlPictureLayer","breakpoints","autoOptimalBreakpoints","relativeWidth"],"mappings":"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"}

package.json

 {
   "name": "@cloudinary/react",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.0-beta.10",
   "description": "A React component for Cloudinary",
@@ -28,3 +28,3 @@ "author": "cloudinary",
     "@babel/preset-typescript": "^7.12.7",
-    "@cloudinary/base": "^1.0.0-beta.2",
+    "@cloudinary/url-gen": "^1.0.0-beta.5",
     "@sinonjs/fake-timers": "^6.0.1",
@@ -68,3 +68,3 @@ "@testing-library/jest-dom": "^4.2.4",
     "transformIgnorePatterns": [
-      "node_modules/(?!(@cloudinary/base)).*\\.js$"
+      "node_modules/(?!(@cloudinary/url-gen)).*\\.js$"
     ],
@@ -71,0 +71,0 @@ "setupFilesAfterEnv": [

README.md

@@ -27,3 +27,3 @@ # Cloudinary Frontend Frameworks
 ```bash
-npm i @cloudinary/react @cloudinary/base
+npm i @cloudinary/react @cloudinary/url-gen
 ```
@@ -43,7 +43,7 @@
 import React, { Component } from 'react'
-import {Cloudinary} from "@cloudinary/base";
+import {Cloudinary} from "@cloudinary/url-gen";
 import { AdvancedImage, accessibility, responsive } from '@cloudinary/react';
 
 // Once per project/app - configure your instance,
-// See the documentation in @cloudinary/base for more information 
+// See the documentation in @cloudinary/url-gen for more information 
 const myCld = new Cloudinary({ cloudName: 'demo'});
@@ -50,0 +50,0 @@

No alert changes

Improved metrics

Total package byte prevSize

95946

3.25%

Lines of code

1190

0.25%

No dependency changes