How to create a declaration for an npm module?

Question

I can't figure out how to create a declaration for a specific npm module. Namely bbcode-to-react.

The main file is indicated as index.js and has only a little code:

'use strict';

var _parser = require('./parser');

var _parser2 = _interopRequireDefault(_parser);

var _tag = require('./tag');

var _tag2 = _interopRequireDefault(_tag);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

module.exports = new _parser2.default();
module.exports.Parser = _parser2.default;
module.exports.Tag = _tag2.default;

Both './parser' and './tag' contain classes I need.

I can't figure out from the typescript docs, how to declare/export this set-up in the d.ts file. The best I can find related to module.exports is all about exporting a single class or function but I need both the Parser and Tag classes.

Diullei · Accepted Answer · 2017-04-05 23:48:54Z

4

Here is the typing to bbcode-to-react:

declare module 'bbcode-to-react' {
    import * as React from 'react';

    function toReact(input: string): JSX.Element;
    function registerTag(name: string, tag: typeof Tag): void;

    class Tag {
        name: string;
        parent: JSX.Element;
        text: string;
        params: { [index: string]: any };
        children: JSX.Element[];

        getComponents(): JSX.Element;
        getContent(raw?: boolean): string;
        toText(contentAsHTML?: boolean): string;
        toHTML(): string;
        toReact(): JSX.Element;
    }
}

put this code inside a bbcode-to-react.d.ts file.

Make sure you have @types/react and @types/react-dom installed

An example using this typing:

import * as React from 'react';
import * as parser from 'bbcode-to-react';
import { Tag } from 'bbcode-to-react';
import { renderToString } from 'react-dom/server';

const Example1 = (props: any) => {
    return (
        <p>{parser.toReact('[b]strong[/b]')}</p>
    );
}

console.log(renderToString(<Example1 />));

class YoutubeTag extends Tag {
    toReact() {
        const attributes = {
            src: this.getContent(true),
            width: this.params.width || 420,
            height: this.params.height || 315,
        };
        return (
            <iframe
                {...attributes}
                frameBorder="0"
                allowFullScreen
            />
        );
    }
}

class BoldTag extends Tag {
    toReact() {
        return (
            <b>{this.getComponents()}</b>
        );
    }
}

parser.registerTag('youtube', YoutubeTag);
parser.registerTag('b', BoldTag);

const Example2 = (props: any) => {
    return (
        <p>{parser.toReact('[youtube width="400"]https://www.youtube.com/embed/AB6RjNeDII0[/youtube]')}</p>
    );
}

console.log(renderToString(<Example2 />));

answered Apr 5, 2017 at 23:48

Diullei

12.5k2 gold badges30 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Strawberry Bunny Over a year ago

Thank you for this. I wasn't expecting someone to write it for me but now I can see it, I can see why it's set up this particular way.

Diullei Over a year ago

I'm glad to help you! :)

Free Hong Kong · Accepted Answer · 2020-08-31 08:56:09Z

0

A pull request just got merged on DefinitelyTyped. See this link. Now anyone want to use typescript with bbcode-to-react module can easily do

npm install --dev @types/bbcode-to-react

for strong-typing.

You are also welcome to help contribute by opening more pull requests on DefinitelyTyped. Hope it can help.

answered Aug 31, 2020 at 8:56

Free Hong Kong

1

Collectives™ on Stack Overflow

How to create a declaration for an npm module?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related