chore: migrate plugin types to plugin (#2111)

Author: SethFalco

CONTRIBUTING.md

@@ -55,7 +55,7 @@ You should read our [Plugin Architecture](https://svgo.dev/docs/plugins-api/) do
 
 SVGO plugins can optionally have parameters. These can be consumed by the plugin to tailor the behavior.
 
-As types are managed through TypeScript definition files and JSDocs, you must define the parameter types in [`plugins/plugin-types.d.ts`](https://github.com/svg/svgo/blob/main/plugins/plugins-types.d.ts) for built-in plugins. Then you'll have code completion and type checking as you'd expect while editing the plugin if your code editor supports that.
+Parameters must have types declared in a [`@typedef`](https://jsdoc.app/tags-typedef) at the top of the file. For new plugins, you must also append the appropriate type in [`plugins/plugin-types.d.ts`](https://github.com/svg/svgo/blob/main/plugins/plugins-types.d.ts). This way built-in plugins will have code completion and type checking as you'd expect while editing the plugin.
 
 ## Documentation
 

lib/parser.js

@@ -20,7 +20,7 @@ export class SvgoParserError extends Error {
    * @param {number} line
    * @param {number} column
    * @param {string} source
-   * @param {string|undefined} file
+   * @param {string | undefined} file
    */
   constructor(message, line, column, source, file = undefined) {
     super(message);

lib/style.js

@@ -284,7 +284,7 @@ export const computeStyle = (stylesheet, node) => {
  * if a `.class` or `#id` is included by passing `name=class` or `name=id`
  * respectively.
  *
- * @param {csstree.ListItem<csstree.CssNode>|string} selector
+ * @param {csstree.ListItem<csstree.CssNode> | string} selector
  * @param {string} name
  * @param {?string} value
  * @param {boolean} traversed

lib/svgo.js

@@ -35,7 +35,7 @@ function getPlugin(name) {
 }
 
 /**
- * @param {string|PluginConfig} plugin
+ * @param {string | PluginConfig} plugin
  * @returns {?PluginConfig}
  */
 const resolvePluginConfig = (plugin) => {

lib/types.d.ts

@@ -105,9 +105,9 @@ export type PluginInfo = {
   multipassCount: number;
 };
 
-export type Plugin<Params> = (
+export type Plugin<P = null> = (
   root: XastRoot,
-  params: Params,
+  params: P,
   info: PluginInfo,
 ) => Visitor | null | void;
 

plugins/_transforms.js

@@ -183,7 +183,7 @@ const getDecompositions = (matrix) => {
 
 /**
  * @param {TransformItem} matrix
- * @returns {TransformItem[]|undefined}
+ * @returns {TransformItem[] | undefined}
  * @see {@link https://frederic-wang.fr/2013/12/01/decomposition-of-2d-transform-matrices/} Where applicable, variables are named in accordance with this document.
  */
 const decomposeQRAB = (matrix) => {
@@ -238,7 +238,7 @@ const decomposeQRAB = (matrix) => {
 
 /**
  * @param {TransformItem} matrix
- * @returns {TransformItem[]|undefined}
+ * @returns {TransformItem[] | undefined}
  * @see {@link https://frederic-wang.fr/2013/12/01/decomposition-of-2d-transform-matrices/} Where applicable, variables are named in accordance with this document.
  */
 const decomposeQRCD = (matrix) => {

plugins/addAttributesToSVGElement.js

@@ -1,3 +1,9 @@
+/**
+ * @typedef AddAttributesToSVGElementParams
+ * @property {string | Record<string, null | string>=} attribute
+ * @property {Array<string | Record<string, null | string>>=} attributes
+ */
+
 export const name = 'addAttributesToSVGElement';
 export const description = 'adds attributes to an outer <svg> element';
 
@@ -45,7 +51,7 @@ plugins: [
  *
  * @author April Arcus
  *
- * @type {import('./plugins-types.js').Plugin<'addAttributesToSVGElement'>}
+ * @type {import('../lib/types.js').Plugin<AddAttributesToSVGElementParams>}
  */
 export const fn = (root, params) => {
   if (!Array.isArray(params.attributes) && !params.attribute) {

plugins/addClassesToSVGElement.js

@@ -1,3 +1,12 @@
+/**
+ * @typedef {import('../lib/types.js').PluginInfo} PluginInfo
+ * @typedef {import('../lib/types.js').XastElement} XastElement
+ *
+ * @typedef AddClassesToSVGElementParams
+ * @property {string | ((node: XastElement, info: PluginInfo) => string)=} className
+ * @property {Array<string | ((node: XastElement, info: PluginInfo) => string)>=} classNames
+ */
+
 export const name = 'addClassesToSVGElement';
 export const description = 'adds classnames to an outer <svg> element';
 
@@ -47,7 +56,7 @@ plugins: [
  *
  * @author April Arcus
  *
- * @type {import('./plugins-types.js').Plugin<'addClassesToSVGElement'>}
+ * @type {import('../lib/types.js').Plugin<AddClassesToSVGElementParams>}
  */
 export const fn = (root, params, info) => {
   if (

plugins/cleanupAttrs.js

@@ -1,3 +1,10 @@
+/**
+ * @typedef CleanupAttrsParams
+ * @property {boolean=} newlines
+ * @property {boolean=} trim
+ * @property {boolean=} spaces
+ */
+
 export const name = 'cleanupAttrs';
 export const description =
   'cleanups attributes from newlines, trailing and repeating spaces';
@@ -10,7 +17,7 @@ const regSpaces = /\s{2,}/g;
  * Cleanup attributes values from newlines, trailing and repeating spaces.
  *
  * @author Kir Belevich
- * @type {import('./plugins-types.js').Plugin<'cleanupAttrs'>}
+ * @type {import('../lib/types.js').Plugin<CleanupAttrsParams>}
  */
 export const fn = (root, params) => {
   const { newlines = true, trim = true, spaces = true } = params;

plugins/cleanupEnableBackground.js

@@ -17,7 +17,7 @@ const regEnableBackground =
  *             ⬇
  * <svg width="100" height="50">
  * @author Kir Belevich
- * @type {import('./plugins-types.js').Plugin<'cleanupEnableBackground'>}
+ * @type {import('../lib/types.js').Plugin}
  */
 export const fn = (root) => {
   let hasFilter = false;