Search code examples
javascriptgoogle-closure-compilerjsdocpixi.js

Closure Compiler EXTERNS for PIXI.js - custom object parameter annotations

I am preparing externs file for pixijs library to work with closure compiler. The only problem I am having so far is with custom object parameters. Here is a short example:

pixi.js source:

/**
 * Set the style of the text
 *
 * @param [style] {object} The style parameters
 * @param [style.font='bold 20pt Arial'] {string} The style and size of the font
 * @param [style.fill='black'] {string|number} A canvas fillstyle that will be used on the text eg 'red', '#00FF00'
 * @param [style.align='left'] {string} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text

closure compiler output:

lib/pixi-externs.js:3266: WARNING - Parse error. invalid param name "style.font"
* @param [style.font='bold 20pt Arial'] {string} The style and size of the font
      ^

lib/pixi-externs.js:3266: WARNING - Bad type annotation. missing closing ]
* @param [style.font='bold 20pt Arial'] {string} The style and size of the font
                        ^

lib/pixi-externs.js:3267: WARNING - Parse error. invalid param name "style.fill"
* @param [style.fill='black'] {string|number} A canvas fillstyle that will be used on the text eg 'red', '#00FF00'
      ^

lib/pixi-externs.js:3268: WARNING - Parse error. invalid param name "style.align"
* @param [style.align='left'] {string} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
      ^

How can these pixijs annotations be adapted to closure compiler annotations?

If there is no way to achieve this through annotations, could I overcome this by defining a new object ?

* @param {PIXI.TextStyleObject} style The style parameters

and creating a separate TextStyleObject object definition like so ?

PIXI.TextStyleObject = {};
PIXI.TextStyleObject.font;
PIXI.TextStyleObject.fill;
PIXI.TextStyleObject.align;

What is the correct way to solve this issue?

Solution

  • You'll want to use a record object to do this:

    /** @param {{
 *        font: string,
 *        fill: string,
 *        align: string
 *      }} object
 */

    If you find yourself re-using the same record object more than once, you can use a typedef to alias it:

    /** @typedef {{
 *        font: string,
 *        fill: string,
 *        align: string
 *      }}
 */
 var PixiStyleOptions;

/** @param {PixiStyleOptions} object */