Code Monkey home page Code Monkey logo

ember-documentary's Introduction

Ember-documentary Build Status

Add JSDocs to your Ember components, then access those JSDocs elsewhere through an Ember component provided by ember-documentary. Great for living style guides.

Note: This addon is a work in progress, so the API may change a lot. To that end, this addon won't follow semver for versions 0.0.x. Once this addon hits version 0.1.0, this addon will follow semver from then on.

Installation

  • git clone this repository
  • npm install
  • bower install

Usage

Add JSDocs to your Ember components like so:

/**
 * Provides JSDoc information about a particular component.
 *
 * Pass a block to this component to define your own template and operate upon
 * the JSDoc information. The block should take one argument, which is the
 * instance of this component. So, you can use this component like so:
 *
 * ```hbs
 * {{#documentary-component 'documentary-component' as |meta|}}
 *   {{meta.signature}}
 * {{/documentary-component}}
 * ```
 *
 * @param {String} componentPath - Path to the component.
 */
export default Ember.Component.extend({
});

Then in an Ember template, you can access the JSDoc information. An example:

{{#documentary-component 'documentary-component' as |meta|}}
  {{meta.signature}}
{{/documentary-component}}

meta is an instance of documentary-component, so you should be able to access every property in the component definition. Still, a rudimentary list of the API is below.

API

  • signature: a generated signature for the Ember component. Example: {{cool-component title requiredParam=String [optionalParam="default"]}}
  • description: The main body of the JSDoc comment, without any tag information.
  • params: Array. (Keyword) param information for the Ember component.
  • positionalParams: Array. Positional param information for the Ember component.
  • ast: The raw JSDoc AST if you want to do low-level operations.

All the JSDoc tags (lines that start with @, like @param) have great documentation over at usejsdoc.

New JSDoc tag: @positionalParam

@positionalParam is not part of the official JSDoc spec. It is a custom tag I made for this library. It's implemented by preprocessing JSDoc comments and replacing any form of:

@positionalParam {OptionalType} name

with:

@param {OptionalType} __positional_param__name

The prefix __positional_param__ is stripped from the param name inside the documentary-component Ember.Component.

Tests

  • npm test (Runs ember try:testall to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

License

Copyright Kickstarter, PBC.

Released under an MIT License.

ember-documentary's People

Contributors

ember-tomster avatar sarenji avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.