vexchords icon indicating copy to clipboard operation
vexchords copied to clipboard

Add typescript support

Open Mazurco066 opened this issue 2 years ago • 1 comments

Description

Please add typescript support for this package, even adding the code mentioned on attachments section to my decs file an error will be returned informing Cannot use import statement outside a module because inner vexchords modules are imported by module setup without a propper ts declaration.

Attachments

decs.d.ts file on root folder

declare module "vexchords"

Described error: image

Suggestion

Please provide a package named @types/vexchords for typescript usage

Mazurco066 avatar Oct 08 '22 13:10 Mazurco066

For the people wanting to use typescript, or maybe as a little help for the author, I think the following type definitions cover everything:

declare module "vexchords" {
    export interface ChordBoxOptions {
        /**
         * Canvas width
         */
        width?: number;

        /**
         * Canvas height
         */
        height?: number;

        /**
         * Note circle radius
         */
        circleRadius?: number;

        /**
         * Number of strings (e.g., 4 for bass)
         */
        numStrings?: number;

        /**
         * Number of frets (e.g., 7 for stretch chords)
         */
        numFrets?: number;

        /**
         * Show tuning keys
         */
        showTuning?: boolean;

        defaultColor?: string;
        bgColor?: string;
        strokeColor?: string;
        textColor?: string;
        stringColor?: string;
        fretColor?: string;
        labelColor?: string;

        fretWidth?: string;
        stringWidth?: string;

        fontFamily?: CSSStyleDeclaration.fontFamily;
        fontSize?: CSSStyleDeclaration.fontSize;
        fontWeight?: CSSStyleDeclaration.fontWeight;
        fontStyle?: CSSStyleDeclaration.fontStyle;
        labelWeight?: CSSStyleDeclaration.fontWeight;
    };

    export interface DrawOptions {
        /**
         * position marker
         */
        position?: number
        /**
         * Array of [string, fret, label (optional)]
         */
        chord: Array<number, number|string, string?>[],
        /**
         * Barres definitions
         * @example
         * // Creates a barre line over six strings on the first fret
         * {
         *      barres: [{fromString: 6, toString: 1, fret: 1}]
         * }
         */
        barres?: {fromString: number, toString: number, fret: number}[],
        tuning?: string[]
    };

    export class ChordBox
    {
        constructor(selector: string|Element, options?: ChordBoxOptions);
        draw(options: DrawOptions);
    };

    export function draw(selector: string|Element, options: DrawOptions);
};

danivdwerf avatar May 27 '23 20:05 danivdwerf