Skip to content

Custom member types

Rene Saarsoo edited this page May 28, 2013 · 7 revisions

For member tags we derive our tag class from JsDuck::Tag::MemberTag class.

Lets implement a @hook tag to describe a special class of functions that will provide a way to hook into the internals of a class and extend it. For example:

/**
 * @hook before
 * Runs before the component is initialized.
 * @param {Object} self The component itself.
 * @param {Object} cfg Config options passed in constructor.
 */

An implementation for this is quite simple:

require "jsduck/tag/member_tag"

class Hook < JsDuck::Tag::MemberTag
  def initialize
    @tagname = :hook
    @pattern = "hook"
    @member_type = {
      :title => "Hooks",
      :position => MEMBER_POS_CFG - 0.1,
      :icon => File.dirname(__FILE__) + "/hook.png",
    }
  end

  def parse_doc(scanner, position)
    return {
      :tagname => :hook,
      :name => scanner.ident,
    }
  end

  def process_doc(context, hook_tags, position)
    context[:name] = hook_tags[0][:name]
  end

  def to_html(hook, cls)
    member_link(hook) + member_params(hook[:params])
  end
end

The thing that turns this tag into a new member type is the setting of @member_type variable. There we set a few rendering options.

:position defines the ordering of member sections in the final page. Here we position hooks at the very top - before configs. The title is shown at the top of each members section and is also used as a title for toolbar button.

:icon defines the icon file to use. It must be a transparent PNG file, referenced with an absolute path - calling File.dirname(__FILE__) gives us the directory where our Hook class is defined in.

parse_doc and process_doc are fairly trivial. We parse the name of the hook using builtin scanner.ident method, and assign the value to :name field in context hash.

to_html method is the one responsible for rendering the member signature line. In out case we just render the hook name (using member_link method) and its parameters (using member_params method).

The result will look like this:

Screenshot of custom hook member type