How to use the cloudinary-core.Transformation.new function in cloudinary-core

sourceOptions() {
      const htmlAttrs = Transformation.new(
        this.transformation
      ).toHtmlAttributes();

      return {
        attrs: merge(
          { media: "all" },
          normalizeRest(this.$attrs),
          omit(htmlAttrs, ["width", "height"]),
          this.publicId
            ? {
                srcset: Cloudinary.new(this.configuration).url(
                  this.publicId,
                  this.transformation
                )
              }
            : null

pictureOptions() {
      const className = {
        "cld-picture": true
      };

      const htmlAttrs = Transformation.new(
        this.transformation
      ).toHtmlAttributes();

      return {
        class: className,
        attrs: merge(normalizeRest(this.$attrs), htmlAttrs)
      };
    },

render() {
    let {publicId, poster, sourceTypes, fallback, sourceTransformation: sourceTransformations, innerRef, ...options} = Object.assign({},
      this.getContext(),
      this.props);
    sourceTransformations = sourceTransformations || {};
    sourceTypes = sourceTypes || Cloudinary.DEFAULT_VIDEO_PARAMS.source_types;
    options = CloudinaryComponent.normalizeOptions(options, {});
    let cld = Cloudinary.new(Util.withSnakeCaseKeys(options));
    let sources = [];
    let tagAttributes = Transformation.new(options).toHtmlAttributes();
    let childTransformations = this.getTransformation(options);
    if (Util.isPlainObject(poster)) {
      let defaults = poster.publicId !== undefined && poster.publicId !== null ? Cloudinary.DEFAULT_IMAGE_PARAMS : DEFAULT_POSTER_OPTIONS;
      poster = cld.url(poster.publicId || publicId, Util.defaults({}, Util.withSnakeCaseKeys(poster), defaults));
    }
    if (!Util.isEmpty(poster)) {
      tagAttributes.poster = poster;
    }
    if (!Util.isEmpty(this.state.poster)) {
      tagAttributes.poster = this.state.poster;
    }

    if (Util.isArray(sourceTypes)) {
      sources = sourceTypes.map(srcType => {
          let sourceTransformation = sourceTransformations[srcType] || {};
          let src = cld.url(publicId, Util.defaults({}, sourceTransformation, childTransformations, {resource_type: 'video', format: srcType}));

if (this.lazy && !this.visible) {
        const src = getPlaceholderURL(
          this.placeholder,
          this.publicId,
          this.configuration,
          this.transformation
        );
        return {
          class: className,
          style: getResponsiveStyle(this.responsive),
          attrs: merge(normalizeNonCloudinary(this.$attrs), src ? { src } : {})
        };
      }

      const htmlAttrs = Transformation.new(
        this.transformation
      ).toHtmlAttributes();

      const src = Cloudinary.new(this.configuration).url(
        this.publicId,
        merge(this.transformation, {
          transformation: [
            ...(this.transformation.transformation || []),
            getResizeTransformation(
              this.responsive,
              this.size,
              evalBreakpoints(this.breakpoints)
            ),
            ...(this.progressive ? [{ flags: ["progressive"] }] : [])
          ]
        })