depfu[bot] commented 1 year ago

Here is everything you need to know about this upgrade. Please take a good look at what changed and the test results before merging this pull request.

What changed?

✳️ svgo (^2.8.0 → ^3.0.0) · Repo · Changelog

Release Notes

3.0.0

SVGO v3

Improvements and fixes

fixed datauri option when multipass is not enabled
improved default preset warnings

Breaking channges

Node.js 14+ is required for version
stable package is replaced with native stable sort (required node 12+)

Config

Typescript types are exposed out of the box. No longer need to install @types/svgo

// svgo.config.js
/**
 * @type {import('svgo').Config}
 */
export default {
  // svgo configuration
}

Active flag is no longer supported

export default {
  plugins: [
    {
      name: 'removeDoctype',
      active: true
    },
    {
      name: 'removeComments',
      active: false
    }
  ]
}

extendDefaultPlugins is removed, preset-default plugin should be used instead
when need to customize plugins defaults

export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // plugins customization
        }
      }
    }
  ]
}

Enabled sortAttrs plugin by default to get better gzip compression.

<svg>
-  <rect fill-opacity="" stroke="" fill="" stroke-opacity="" />
+  <rect fill="" fill-opacity="" stroke="" stroke-opacity="" />
</svg>

Can be disabled if necessary

export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          sortAttrs: false
        }
      }
    }
  ]
}

cleanupIDs plugin is renamed to cleanupIds

export default {
  plugins: [
    'cleanupIds'
  ]
}
// or
export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          cleanupIds: {}
        }
      }
    }
  ]
}

Removed cleanupIds plugin "prefix" param, prefixIds should be used instead

export default {
  plugins: [
    'cleanupIds',
    {
      name: 'prefixIds',
      params: {
        prefix: 'my-prefix'
      }
    }
  ]
}

Public API

Removed width and height from optimization result.

const { width, height } = optimize(svg).info

Can be found with custom plugin

let width = null
let height = null
const plugin = {
  name: 'find-size',
  fn: () => {
    return {
      element: {
        enter: (node, parentNode) => {
          if (parentNode.type === 'root') {
            width = node.attributes.width
            height = node.attributes.height
          }
        }
      }
    }
  }
}
optimize(svg, {
  plugins: ['preset-default', plugin]
})

Removed error and modernError from optimization result

const {data, error, modernError } = optimize(svg)

Now all errors are thrown, parsing error can be checked by name

try {
  const { data } = optimize(svg)
} catch (error) {
  if (error.name === 'SvgoParserError') {
    // formatted error
    error.toString()
  } else {
    // runtime error
  }
}

Custom plugins

Removed full, perItem and perItemReverse plugin types.
visitor is the only supported plugin api so plugin.type
is no longer required.

Removed plugin.active flag.

Removed plugin.params used as default params, destructuring with defaults can be used instead

name and fn are only required now

const plugin = {
  name: 'my-custom-plugin',
  fn: (root, params) => {
    const { myParam = true } = params
    return {}
  }
}

Removed createContentItem and JSAPI class from nodes.
All nodes are now plain objects with one exception.
parentNode need to be defined to not break builtin plugins.

const plugin = {
  name: 'my-custom-plugin',
  fn: () => {
    return {
      element: {
        enter: (node) => {
          if (node === 'g') {
            const child = {
              type: 'element',
              name: 'g',
              attributes: {},
              children: []
            }
            Object.defineProperty(child, 'parentNode', {
              writable: true,
              value: node,
            })
            node.children.push(child)
          }
        }
      }
    }
  }
}

Thanks to @istarkov, @boidolr, @deining, @ranman, @mondeja, @liamcmitchell-sc, @rogierslag, @kriskowal, @hugolpz and @TrySound

Does any of this look wrong? Please let us know.

Commits

See the full diff on Github. The new version differs by 48 commits:

Depfu Status

Depfu will automatically keep this PR conflict-free, as long as you don't add any commits to this branch yourself. You can also trigger a rebase manually by commenting with @depfu rebase.

All Depfu comment commands

@depfu rebase
Rebases against your default branch and redoes this update

@depfu recreate
Recreates this PR, overwriting any edits that you've made to it

@depfu merge
Merges this PR once your tests are passing and conflicts are resolved

@depfu close
Closes this PR and deletes the branch

@depfu reopen
Restores the branch and reopens this PR (if it's closed)

@depfu pause
Ignores all future updates for this dependency and closes this PR

@depfu pause [minor|major]
Ignores all future minor/major updates for this dependency and closes this PR

@depfu resume
Future versions of this dependency will create PRs again (leaves this PR as is)

papandreou commented 1 year ago

Note: Requires node.js 14+, we still support 12.