• Stars
    star
    770
  • Rank 59,000 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 11 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Flexible JavaScript documentation generator used by AngularJS, Protractor and other JS projects

Dgeni - Documentation Generator Build Status

The node.js documentation generation utility by angular.js and other projects.

Dgeni is pronounced like the girl name Jenny (/ˈdΚ’Ι›ni/), i.e the d is silent and the g is soft.

Getting started

Try out the Dgeni example project. Or maybe you're looking for an example using AngularJS.

Watch Pete's ng-europe talk on Dgeni :

ScreenShot

Documenting AngularJS Apps

There are two projects out there that build upon dgeni to help create documentation for AngularJS apps:

Do check them out and thanks to Ilya and Bound State Software for putting these projects together.

Installation

You'll need node.js and a bunch of npm modules installed to use Dgeni. Get node.js from here: http://nodejs.org/.

In the project you want to document you install Dgeni by running:

npm install dgeni --save-dev

This will install Dgeni and any modules that Dgeni depends upon.

Running Dgeni

Dgeni on its own doesn't do much. You must configure it with Packages that contain Services and Processors. It is the Processors that actually convert your source files to documentation files.

To run the processors we create a new instance of Dgeni, providing to it an array of Packages to load. Then simply call the generate() method on this instance. The generate() method runs the processors asynchronously and returns a Promise that gets fulfilled with the generated documents.

var Dgeni = require('dgeni');

var packages = [require('./myPackage')];

var dgeni = new Dgeni(packages);

dgeni.generate().then(function(docs) {
  console.log(docs.length, 'docs generated');
});

Running from the Command Line

Dgeni is normally used from a build tool such as Gulp or Grunt but it does also come with a command line tool.

If you install Dgeni globally then you can run it from anywhere:

npm install -g dgeni
dgeni some/package.js

If Dgeni is only installed locally then you either have to specify the path explicitly:

npm install dgeni
node_modules/.bin/dgeni some/package.js

or you can run the tool in an npm script:

{
  ...
  scripts: {
    docs: 'dgeni some/package.js'
  }
  ...
}

The usage is:

dgeni path/to/mainPackage [path/to/other/packages ...] [--log level]

You must provide the path to one or more Dgeni Packages to load. You can, optionally, set the logging level.

Packages

Services, Processors, configuration values and templates are be bundled into a Package. Packages can depend upon other Packages. In this way you can build up your custom configuration on top of an existing configuration.

Defining a Package

Dgeni provides a Package constructor to create new Packages. A Package instance has methods to register Services and Processors, and to configure the properties of Processors:

var Package = require('dgeni').Package;
var myPackage = new Package('myPackage', ['packageDepencency1', 'packageDependency2']);

myPackage.processor(require('./processors/processor1'));
myPackage.processor(require('./processors/processor2'));

myPackage.factory(require('./services/service1'));
myPackage.factory(require('./services/service2'));

myPackage.config(function(processor1, service2) {
  service2.someProperty = 'some value';
  processor1.specialService = service2;
});

Services

Dgeni makes significant use of Dependency Injection (DI) to instantiate objects. Objects that will be instantiated by the DI system must be provided by a factory function, which is registered in a Package, either as a Processor, by myPackage.processor(factoryFn), or as a Service, by myPackage.factory(factoryFn).

Defining a Service

The parameters to a factory function are dependencies on other services that the DI system must find or instantiate and provide to the factory function.

car.js:

module.exports = function car(engine, wheels) {
  return {
    drive: function() {
      engine.start();
      wheels.turn();
    }
  };
};

Here we have defined a car service, which depends upon two other services, engine and wheels defined elsewhere. Note that this car service doesn't care how and where these dependencies are defined. It relies on the DI system to provide them when needed.

The car service returned by the factory function is an object containing one method, drive(), which in turn calls methods on engine and wheels.

Registering a Service

You then register the Service with a Package:

myPackage.js:

var Package = require('dgeni').Package;

module.exports = new Package('myPackage')
  .factory(require('./car'));

This car Service is then available to any other Service, Processor or configuration block:

var Package = require('dgeni').Package;

module.exports = new Package('greenTaxiPackage', ['myPackage'])

  .factory(function taxi(car) {
    return {
      orderTaxi: function(place) { car.driveTo(place); }
    };
  })

  .config(function(car) {
    car.fuel = 'hybrid';
  });

Processors

Processors are Services that contain a $process(docs) method. The processors are run one after another in a pipeline. Each Processor takes the collection documents from the previous Processor and manipulates it, maybe inserting new documents or adding meta data to documents that are there already.

Processors can expose properties that tell Dgeni where in the pipeline they should be run and how to validate the configuration of the Processor.

  • $enabled - if set to false then this Processor will not be included in the pipeline
  • $runAfter - an array of strings, where each string is the name of a Processor that must appear earlier in the pipeline than this Processor
  • $runBefore - an array of strings, where each string is the name of a Processor that must appear later in the pipeline than this one
  • $validate - a http://validatejs.org/ constraint object that Dgeni uses to validate the properties of this Processor.

Note that the validation feature has been moved to its own Dgeni Package processorValidation. Currently dgeni automatically adds this new package to a new instance of dgeni so that is still available for backward compatibility. In a future release this package will be moved to dgeni-packages.

Defining a Processor

You define Processors just like you would a Service:

myDocProcessor.js:

module.exports = function myDocProcessor(dependency1, dependency2) {
  return {
    $process: function (docs) {
        //... do stuff with the docs ...
    },
    $runAfter: ['otherProcessor1'],
    $runBefore: ['otherProcessor2', 'otherProcessor3'],
    $validate: {
      myProperty: { presence: true }
    },
    myProperty: 'some config value'
  };
};

Registering a Processor

You then register the Processor with a Package: myPackage.js:

var Package = require('dgeni').Package;

module.exports = new Package('myPackage')
  .processor(require('./myDocProcessor'));

Asynchronous Processing

The $process(docs) method can be synchronous or asynchronous:

  • If synchronous then it should return undefined or a new array of documents. If it returns a new array of docs then this array will replace the previous docs array.
  • If asynchronous then it must return a Promise, which should resolve to an array of documents that will replace the previous array. By returning a Promise, the processor tells Dgeni that it is asynchronous and Dgeni will wait for the promise to resolve before calling the next processor.

Here is an example of an asynchronous Processor

var qfs = require('q-io/fs');
module.exports = function readFileProcessor() {
  return {
    filePath: 'some/file.js',
    $process(docs) {
      return qfs.readFile(this.filePath).then(function(response) {
        docs.push(response.data);
        return docs;
      });
    }
  };

Standard Dgeni Packages

The dgeni-packages repository contains many Processors - from basic essentials to complex, angular.js specific. These processors are grouped into Packages:

  • base - contains the basic file reading and writing Processors as well as an abstract rendering Processor.

  • jsdoc - depends upon base and adds Processors and Services to support parsing and extracting jsdoc style tags from comments in code.

  • typescript - depends upon base and adds Processors and Services to support parsing and extracting jsdoc style tags from comments in TypeScript (*.ts) code.

  • nunjucks - provides a nunjucks based rendering engine.

  • ngdoc - depends upon jsdoc and nunjucks and adds additional processing for the AngularJS extensions to jsdoc.

  • examples - depends upon jsdoc and provides Processors for extracting examples from jsdoc comments and converting them to files that can be run.

  • dgeni - support for documenting dgeni Packages.

Pseudo Marker Processors

You can define processors that don't do anything but act as markers for stages of the processing. You can use these markers in $runBefore and $runAfter properties to ensure that your Processor is run at the right time.

The Packages in dgeni-packages define some of these marker processors. Here is a list of these in the order that Dgeni will add them to the processing pipeline:

  • reading-files (defined in base)
  • files-read (defined in base)
  • parsing-tags (defined in jsdoc)
  • tags-parsed (defined in jsdoc)
  • extracting-tags (defined in jsdoc)
  • tags-extracted (defined in jsdoc)
  • processing-docs (defined in base)
  • docs-processed (defined in base)
  • adding-extra-docs (defined in base)
  • extra-docs-added (defined in base)
  • computing-ids (defined in base)
  • ids-computed (defined in base)
  • computing-paths (defined in base)
  • paths-computed (defined in base)
  • rendering-docs (defined in base)
  • docs-rendered (defined in base)
  • writing-files (defined in base)
  • files-written (defined in base)

Configuration Blocks

You can configure the Services and Processors defined in a Package or its dependencies by registering Configuration Blocks with the Package. These are functions that can be injected with Services and Processors by the DI system, giving you the opportunity to set properties on them.

Registering a Configuration Block

You register a Configuration Block by calling config(configFn) on a Package.

myPackage.config(function(readFilesProcessor) {
  readFilesProcessor.sourceFiles = ['src/**/*.js'];
});

Dgeni Events

In Dgeni you can trigger and handle events to allow packages to take part in the processing lifecycle of the documentation generation.

Triggering Events

You trigger an event simply by calling triggerEvent(eventName, ...) on a Dgeni instance.

The eventName is a string that identifies the event to be triggered, which is used to wire up event handlers. Additional arguments are passed through to the handlers.

Each handler that is registered for the event is called in series. The return value from the call is a promise to the event being handled. This allows event handlers to be async. If any handler returns a rejected promise the event triggering is cancelled and the rejected promise is returned.

For example:

var eventPromise = dgeni.triggerEvent('someEventName', someArg, otherArg);

Handling Events

You register an event handler in a Package, by calling handleEvent(eventName, handlerFactory) on the package instance. The handlerFactory will be used by the DI system to get the handler, which allows you to inject services to be available to the handler.

The handler factory should return the handler function. This function will receive all the arguments passed to the triggerHandler method. As a minimum this will include the eventName.

For example:

myPackage.eventHandler('generationStart', function validateProcessors(log, dgeni) {
  return function validateProcessorsImpl(eventName) {
    ...
  };
});

Built-in Events

Dgeni itself triggers the following events during documentation generation:

  • generationStart: triggered after the injector has been configured and before the processors begin their work.
  • generationEnd: triggered after the processors have all completed their work successfully.
  • processorStart: triggered just before the call to $process, for each processor.
  • processorEnd: triggered just after $process has completed successfully, for each processor.

More Repositories

1

angular

Deliver web apps with confidence πŸš€
TypeScript
96,000
star
2

angular.js

AngularJS - HTML enhanced for web apps!
JavaScript
59,091
star
3

angular-cli

CLI tool for Angular
TypeScript
26,756
star
4

components

Component infrastructure and Material Design components for Angular
TypeScript
24,333
star
5

material

Material design for AngularJS
JavaScript
16,637
star
6

angular-seed

Seed project for angular apps.
JavaScript
13,027
star
7

protractor

E2E test framework for Angular apps
JavaScript
8,780
star
8

angularfire

Angular + Firebase = ❀️
TypeScript
7,692
star
9

flex-layout

Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API
TypeScript
5,904
star
10

universal

Server-side rendering and Prerendering for Angular
TypeScript
4,040
star
11

zone.js

Implements Zones for JavaScript
TypeScript
3,243
star
12

quickstart

Angular QuickStart - source from the documentation
JavaScript
3,128
star
13

angular-phonecat

Tutorial on building an angular application.
JavaScript
3,128
star
14

batarang

AngularJS WebInspector Extension for Chrome
JavaScript
2,444
star
15

material-start

Starter Repository for AngularJS Material
JavaScript
2,214
star
16

universal-starter

Angular Universal starter kit by @AngularClass
TypeScript
2,028
star
17

mobile-toolkit

Tools for building progressive web apps with Angular
JavaScript
1,344
star
18

in-memory-web-api

The code for this project has moved to the angular/angular repo. This repo is now archived.
TypeScript
1,172
star
19

angular.io

Website for the Angular project (see github.com/angular/angular for the project repo)
HTML
1,032
star
20

angular2-seed

TypeScript
1,011
star
21

tsickle

Tsickle β€” TypeScript to Closure Translator
TypeScript
893
star
22

material.angular.io

Docs site for Angular Components
TypeScript
889
star
23

di.js

Dependency Injection Framework for the future generations...
JavaScript
822
star
24

react-native-renderer

Use Angular and React Native to build applications for Android and iOS
TypeScript
789
star
25

vscode-ng-language-service

Angular extension for Visual Studio Code
TypeScript
777
star
26

angular-cn

Chinese localization of angular.io
Pug
761
star
27

router

The Angular 1 Component Router
JavaScript
667
star
28

angular-electron

Angular2 + Electron
TypeScript
610
star
29

devkit

549
star
30

bower-material

This repository is used for publishing the AngularJS Material v1.x library
JavaScript
506
star
31

watchtower.js

ES6 Port of Angular.dart change detection code.
JavaScript
410
star
32

preboot

Coordinate transfer of state from server to client view for isomorphic/universal JavaScript web applications
TypeScript
384
star
33

angular-hint

run-time hinting for AngularJS applications
JavaScript
368
star
34

angular-bazel-example

MOVED to the bazel nodejs monorepo πŸ‘‰
TypeScript
350
star
35

builtwith.angularjs.org

builtwith.angularjs.org
HTML
271
star
36

protractor-accessibility-plugin

Runs a set of accessibility audits
JavaScript
263
star
37

angularjs.org

code for angularjs.org site
JavaScript
260
star
38

angular-update-guide

An interactive guide to updating the version of Angular in your apps
TypeScript
251
star
39

webdriver-manager

A binary manager for E2E testing
TypeScript
225
star
40

bower-angular

Bower package for AngularJS
CSS
224
star
41

angular-ja

repository for Japanese localization of angular.io
TypeScript
212
star
42

ngSocket

WebSocket support for angular
JavaScript
204
star
43

peepcode-tunes

Peepcode's Backbone.js Music Player Reimplemented in AngularJS
JavaScript
204
star
44

clutz

Closure to TypeScript `.d.ts` generator
Java
163
star
45

benchpress

JavaScript
160
star
46

code.angularjs.org

code.angularjs.org
153
star
47

ngcc-validation

Angular Ivy library compatibility validation project
TypeScript
146
star
48

dgeni-packages

A collection of dgeni packages for generating documentation from source code.
JavaScript
143
star
49

bower-angular-route

angular-route bower repo
JavaScript
143
star
50

atscript-playground

A repo to play with AtScript.
JavaScript
141
star
51

bower-angular-animate

Bower package for the AngularJS animation module
JavaScript
137
star
52

protractor-cookbook

Examples for using Protractor in various common scenarios.
TypeScript
130
star
53

diary.js

Flexible logging and profiling library for JavaScript
JavaScript
127
star
54

bower-angular-i18n

internationalization module for AngularJS
JavaScript
125
star
55

ts-minify

A tool to aid minification of Typescript code, using Typescript's type information.
TypeScript
119
star
56

closure-demo

TypeScript
114
star
57

ngMigration-Forum

109
star
58

watScript

The next generation JavaScript language that will kill ALL the frameworks!
101
star
59

material-adaptive

Adaptive template development with Angular Material
JavaScript
101
star
60

bower-angular-sanitize

angular-sanitize bower repo
JavaScript
99
star
61

code-of-conduct

A code of conduct for all Angular projects
99
star
62

clang-format

Node repackaging of the clang-format native binary
Python
97
star
63

tactical

Data access library for Angular
TypeScript
93
star
64

bower-angular-resource

angular-resource bower repo
JavaScript
92
star
65

dashboard.angularjs.org

AngularJS Dashboard
JavaScript
89
star
66

angular-jquery-ui

jQueryUI widgets wrapped as angular widgets
JavaScript
88
star
67

bower-angular-mocks

angular-mocks.js bower repo
JavaScript
87
star
68

bower-angular-cookies

angular-cookies bower repo
JavaScript
85
star
69

issue-zero

TypeScript
82
star
70

bower-angular-touch

JavaScript
79
star
71

templating

Templating engine for Angular 2.0
JavaScript
76
star
72

a

Library for annotating ES5
JavaScript
67
star
73

material-icons

Common resources for material design in AngularJS
66
star
74

vladivostok

TypeScript
65
star
75

dev-infra

Angular Development Infrastructure
JavaScript
65
star
76

bower-angular-messages

JavaScript
63
star
77

angular-component-spec

Specification for reusable AngularJS components
61
star
78

ci.angularjs.org

ci.angularjs.org CI server scripts
Shell
60
star
79

projects

github reference application for Angular 2.0
JavaScript
58
star
80

codelabs

55
star
81

code.material.angularjs.org

Documentation site for AngularJS Material
HTML
50
star
82

material-tools

Tools for AngularJS Material
TypeScript
47
star
83

jasminewd

Adapter for Jasmine-to-WebDriverJS
JavaScript
46
star
84

material-update-tool

Standalone update tool for updating Angular CDK and Material
TypeScript
46
star
85

material-builds

Build snapshots for @angular/material
JavaScript
45
star
86

material2-docs-content

Docs content for @angular/material
HTML
39
star
87

cdk-builds

Angular CDK builds
JavaScript
38
star
88

benchpress-tree

A reference implementation of a benchpress deep-tree benchmark as seen in Angular
JavaScript
37
star
89

router-builds

@angular/router build artifacts
JavaScript
36
star
90

angular-ko

HTML
36
star
91

prophecy

Deferred/Promise for AngularJS 2.0
JavaScript
36
star
92

answers-app

TypeScript
36
star
93

assert

A runtime type assertion library.
JavaScript
35
star
94

ngo

TypeScript
34
star
95

protractor-console-plugin

Checks the browser log after each test for warnings and errors
JavaScript
34
star
96

examples

TypeScript
33
star
97

introduction-to-angular

TypeScript
33
star
98

microsites

Master repository for sites on the angular.io subdomains (universal.angular.io, material.angular.io, etc)
HTML
29
star
99

core-builds

@angular/core build artifacts
JavaScript
29
star
100

ngtools-webpack-builds

Build artifacts for @ngtools/webpack
JavaScript
28
star