@compodoc/compodoc
Version:
The missing documentation tool for your Angular application
400 lines (352 loc) • 24.1 kB
HTML
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>@compodoc/compodoc documentation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/dark.css">
</head>
<body>
<script>
// Blocking script to avoid flickering dark mode
// Dark mode toggle button
var useDark = window.matchMedia('(prefers-color-scheme: dark)');
var darkModeState = useDark.matches;
var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
function checkToggle(check) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].checked = check;
}
}
function toggleDarkMode(state) {
if (window.localStorage) {
localStorage.setItem('compodoc_darkmode-state', state);
}
checkToggle(state);
const hasClass = document.body.classList.contains('dark');
if (state) {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.add('dark');
}
if (!hasClass) {
document.body.classList.add('dark');
}
} else {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.remove('dark');
}
if (hasClass) {
document.body.classList.remove('dark');
}
}
}
useDark.addEventListener('change', function (evt) {
toggleDarkMode(evt.matches);
});
if (darkModeStateLocal) {
darkModeState = darkModeStateLocal === 'true';
}
toggleDarkMode(darkModeState);
</script>
<script>
// --- Iframe navigation tracking for Template Playground ---
function sendCurrentUrlToParent() {
if (window.parent && window.parent !== window) {
window.parent.postMessage({
type: 'compodoc-iframe-navigate',
url: window.location.pathname + window.location.hash
}, '*');
}
}
window.addEventListener('hashchange', sendCurrentUrlToParent, false);
window.addEventListener('popstate', sendCurrentUrlToParent, false);
window.addEventListener('DOMContentLoaded', sendCurrentUrlToParent, false);
</script>
<div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
<div class="d-flex">
<a href="./" class="navbar-brand">@compodoc/compodoc documentation</a>
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
</div>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="d-none d-md-block menu">
<compodoc-menu mode="normal"></compodoc-menu>
</div>
<!-- START CONTENT -->
<div class="content contributing">
<div class="content-data">
<h1>Contributing to Compodoc</h1>
<p>Contributions are welcome and appreciated. As a contributor, here are the guidelines we would like you
to follow:</p>
<ul>
<li><a href="#stack">Stack</a></li>
<li><a href="#issue">Issues and Bugs</a></li>
<li><a href="#feature">Feature Requests</a></li>
<li><a href="#submit">Submission Guidelines</a></li>
<li><a href="#rules">Coding Rules</a></li>
<li><a href="#commit">Commit Message Guidelines</a></li>
</ul>
<h2>Stack</h2>
<p>Compodoc is written in TypeScript. The compiling process use <code>Rollup.js</code>.</p>
<h2>Architecture and operating</h2>
<p>See this folder for more details: <a href="./docs/README.md">DOCS</a>.</p>
<h3>Development process</h3>
<ol>
<li><p>Open one terminal and run inside <code>compodoc</code> folder:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-shell">npm run start</code></pre></div></li>
<li><p>Open another terminal with the source code of the <a href="https://github.com/compodoc/compodoc-demo-todomvc-angular">demo project</a>, and run: </p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-shell">node ../compodoc/bin/index-cli.js -p tsconfig.json -a screenshots -n 'TodoMVC Angular documentation' --includes additional-doc --toggleMenuItems "'all'" -s</code></pre></div></li>
</ol>
<h3>Debugging process</h3>
<ol>
<li><p>Install sleep package:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-shell">npm i sleep</code></pre></div></li>
<li><p>Add these lines in <code>index-cli.ts</code>, after <code>--files</code> check:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-JavaScript">const sleep = require('sleep');
const isInInspectMode = /--inspect/.test(process.execArgv.join(' '));
if (isInInspectMode) {
// wait 10 seconds for debugger to connect in Chrome devtools
sleep.sleep(10);
}</code></pre></div></li>
<li><p>Open one terminal and run inside compodoc folder:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-shell">npm run start</code></pre></div></li>
<li><p>Add <code>debugger</code> statement where you want to debug your code.</p>
</li>
<li><p>Open Chrome and this url: <code>chrome://inspect</code>.</p>
</li>
<li><p>Open another terminal with the source code of the <a href="https://github.com/compodoc/compodoc-demo-todomvc-angular">demo project</a>, and run:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-shell">node --inspect ../compodoc/bin/index-cli.js -p tsconfig.json -a screenshots -n 'TodoMVC Angular documentation' --includes additional-doc --toggleMenuItems "'all'" -s</code></pre></div></li>
<li><p>Compodoc will wait 10s before starting when it detects <code>--inspect</code> flag.</p>
</li>
<li><p>Open the debug window in Chrome, and click <code>inspect</code>.</p>
</li>
</ol>
<h2><a name="issue"></a> Found an Issue?</h2>
<p>If you find a bug in the source code or a mistake in the documentation, you can help us by <a href="#submit-issue">submitting an issue</a> to our <a href="https://github.com/compodoc/compodoc">GitHub Repository</a>. Even better, you can <a href="#submit-pr">submit a Pull Request</a> with a fix.</p>
<h2><a name="feature"></a> Want a Feature?</h2>
<p>You can <em>request</em> a new feature by <a href="#submit-issue">submitting an issue</a> to our <a href="https://github.com/compodoc/compodoc">GitHub
Repository</a>. If you would like to <em>implement</em> a new feature, please submit an issue with a proposal for your work first, to be sure that we can use it.
First, open an issue and outline your proposal so that it can be discussed. This will also allow us to better coordinate our efforts, prevent duplication of work, and help you to craft the change so that it is successfully accepted into the project.</p>
<h2><a name="submit"></a> Submission Guidelines</h2>
<h3><a name="submit-issue"></a> Submitting an Issue</h3>
<p>Before you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available.</p>
<p>We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs, we will systematically ask you to provide a minimal reproduction scenario. Having a reproducible scenario gives us wealth of important information without going back & forth to you with additional questions like:</p>
<ul>
<li>version of compodoc, Node.js used</li>
<li><code>.tsconfig.json</code> configuration</li>
<li>and most importantly - a use-case that fails</li>
</ul>
<p>A minimal reproduce scenario using allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem.</p>
<p>We will be insisting on a minimal reproduce scenario in order to save maintainers time, and ultimately be able to fix more bugs. Interestingly, from our experience users often find coding problems themselves while preparing a minimal repository. We understand that sometimes it might be hard to extract essential bits of code from a larger code-base, but we really need to isolate the problem before we can fix it.</p>
<p>Unfortunately, we are not able to investigate / fix bugs without a minimal reproduction, so if we don't hear back from you, we are going to close an issue that don't have enough info to be reproduced.</p>
<p>You can file new issues by filling out our <a href="https://github.com/compodoc/compodoc/issues/new">new issue form</a>.</p>
<h3><a name="submit-pr"></a> Submitting a Pull Request (PR)</h3>
<p>Before you submit your Pull Request (PR) consider the following guidelines:</p>
<ul>
<li><p>I use <a href="http://danielkummer.github.io/git-flow-cheatsheet/">Git flow</a> for the development.</p>
</li>
<li><p>Search <a href="https://github.com/compodoc/compodoc/pulls">GitHub</a> for an open or closed Pull Request
that relates to your submission.</p>
</li>
<li><p>Make your changes in a new git branch</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-shell">git checkout -b my-fix-branch develop</code></pre></div></li>
<li><p>Create your patch, <strong>including appropriate test cases</strong>.</p>
</li>
<li><p>Follow our <a href="#rules">Coding Rules</a>.</p>
</li>
<li><p>Ensure that all tests pass</p>
</li>
<li><p>Generate a new project with angular-cli:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-shell">ng new test-pr</code></pre></div></li>
<li><p>Test that a new project runs correctly:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-shell">cd test-pr
compodoc -p src/tsconfig.json</code></pre></div></li>
<li><p>Commit your changes using a descriptive commit message that follows our
<a href="#commit-message-format">commit message conventions</a>.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-shell">git commit -a</code></pre></div><p>Note: the optional commit <code>-a</code> command line option will automatically "add" and "rm" edited files.</p>
</li>
<li><p>Push your branch to GitHub:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-shell">git push origin my-fix-branch</code></pre></div></li>
<li><p>In GitHub, send a pull request to <code>compodoc/compodoc:develop</code>.</p>
</li>
<li><p>If I suggest changes then</p>
<ul>
<li><p>Make the required updates.</p>
</li>
<li><p>Re-run the tests and retest your sample generated project to ensure tests are still passing.</p>
</li>
<li><p>Rebase your branch and force push to your GitHub repository (this will update your Pull Request):</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-shell">git rebase master -i
git push -f</code></pre></div></li>
</ul>
</li>
</ul>
<p>That's it! Thank you for your contribution!</p>
<h4>After your pull request is merged</h4>
<p>After your pull request is merged, you can safely delete your branch and pull the changes
from the <code>main (upstream)</code> repository:</p>
<ul>
<li><p>Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-shell">git push origin --delete my-fix-branch</code></pre></div></li>
<li><p>Check out the <code>develop</code> branch:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-shell">git checkout develop -f</code></pre></div></li>
<li><p>Delete the local branch:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-shell">git branch -D my-fix-branch</code></pre></div></li>
<li><p>Update your <code>develop</code> with the latest upstream version:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-shell">git pull --ff upstream develop</code></pre></div></li>
</ul>
<h3>Fork the compodoc project</h3>
<p>Go to the <a href="https://github.com/compodoc/compodoc">compodoc project</a> and click on the "fork" button. You can then clone your own fork of the project, and start working on it.</p>
<p><a href="https://help.github.com/articles/fork-a-repo">Please read the Github forking documentation for more information</a></p>
<h3>Set NPM to use the cloned project</h3>
<p>In your cloned <code>compodoc</code> project, type <code>npm link</code>.</p>
<p>This will do a symbolic link from the global <code>node_modules</code> version to point to this folder, so when we run <code>compodoc</code>, you will now use the development version of Compodoc.</p>
<p>For testing, you will want to generate an application with angular-cli, and run <code>compodoc</code> installed globally.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-shell">compodoc ...</code></pre></div><h2><a name="rules"></a> Coding Rules</h2>
<p>To ensure consistency throughout the source code, keep these rules in mind as you are working:</p>
<ul>
<li>All features or bug fixes <strong>must be tested</strong> by one or more specs (unit-tests or e2e-tests).</li>
<li>All public API methods <strong>must be documented</strong>. (Details TBC).</li>
<li>We follow <a href="https://google.github.io/styleguide/jsguide.html">Google's JavaScript Style Guide</a>, but wrap all code at
<strong>100 characters</strong>.</li>
</ul>
<h2><a name="commit"></a> Commit Message Guidelines</h2>
<p>We have very precise rules over how our git commit messages can be formatted. This leads to <strong>more
readable messages</strong> that are easy to follow when looking through the <strong>project history</strong>. But also,
we use the git commit messages to <strong>generate the Angular CLI change log</strong>.</p>
<h3>Commit Message Format</h3>
<p>Each commit message consists of a <strong>header</strong>, a <strong>body</strong> and a <strong>footer</strong>. The header has a special
format that includes a <strong>type</strong>, a <strong>scope</strong> and a <strong>subject</strong>:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-none"><type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer></code></pre></div><p>The <strong>header</strong> is mandatory and the <strong>scope</strong> of the header is optional.</p>
<p>Any line of the commit message cannot be longer 100 characters! This allows the message to be easier
to read on GitHub as well as in various git tools.</p>
<h3>Revert</h3>
<p>If the commit reverts a previous commit, it should begin with <code>revert: </code>, followed by the header of the reverted commit. In the body, it should say: <code>This reverts commit <hash>.</code>, where the hash is the SHA of the commit being reverted.</p>
<h3>Type</h3>
<p>Must be one of the following:</p>
<ul>
<li><strong>build</strong>: Changes that affect the build system or external dependencies</li>
<li><strong>ci</strong>: Changes to our CI configuration files and scripts</li>
<li><strong>docs</strong>: Documentation only changes</li>
<li><strong>feat</strong>: A new feature</li>
<li><strong>fix</strong>: A bug fix</li>
<li><strong>perf</strong>: A code change that improves performance</li>
<li><strong>refactor</strong>: A code change that neither fixes a bug nor adds a feature</li>
<li><strong>style</strong>: Changes that do not affect the meaning of the code (white-space, formatting, missing
semi-colons, etc)</li>
<li><strong>test</strong>: Adding missing tests or correcting existing tests</li>
</ul>
<h3>Scope</h3>
<p>The scope should be the name of the npm package affected as perceived by the person reading changelog generated from the commit messages.</p>
<h3>Subject</h3>
<p>The subject contains succinct description of the change:</p>
<ul>
<li>use the imperative, present tense: "change" not "changed" nor "changes"</li>
<li>don't capitalize first letter</li>
<li>no dot (.) at the end</li>
</ul>
<h3>Body</h3>
<p>Just as in the <strong>subject</strong>, use the imperative, present tense: "change" not There are currently a few exceptions to the "use package name" rule:</p>
<ul>
<li><strong>packaging</strong>: used for changes that change the npm package layout in all of our packages, e.g. public path changes, <code>package.json</code> changes done to all packages, <code>d.ts</code> file/format changes, changes to bundles, etc.</li>
<li><strong>changelog</strong>: used for updating the release notes in <code>CHANGELOG.md</code>.</li>
<li>none/empty string: useful for <code>style</code>, <code>test</code> and <code>refactor</code> changes that are done across all packages (e.g. <code>style: add missing semicolons</code>)</li>
</ul>
<p><strong>Breaking Changes</strong> should start with the word <code>BREAKING CHANGE:</code> with a space or two newlines. The rest of the commit message is then used for this.</p>
<p>A detailed explanation can be found in this <a href="https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#">document</a>.</p>
<h2>Financial contributions</h2>
<p>We also welcome financial contributions in full transparency on our <a href="https://opencollective.com/compodoc">open collective</a>.
Anyone can file an expense. If the expense makes sense for the development of the community, it will be "merged" in the ledger of our open collective by the core contributors and the person who filed the expense will be reimbursed.</p>
<h2>Credits</h2>
<h3>Contributors</h3>
<p>Thank you to all the people who have already contributed to compodoc!
<a href="graphs/contributors"><img src="https://opencollective.com/compodoc/contributors.svg?width=890" /></a></p>
<h3>Backers</h3>
<p>Thank you to all our backers! [<a href="https://opencollective.com/compodoc#backer">Become a backer</a>]</p>
<p><a href="https://opencollective.com/compodoc#backers" target="_blank"><img src="https://opencollective.com/compodoc/backers.svg?width=890"></a></p>
<h3>Sponsors</h3>
<p>Thank you to all our sponsors! (please ask your company to also support this open source project by <a href="https://opencollective.com/compodoc#sponsor">becoming a sponsor</a>)</p>
<p><a href="https://opencollective.com/compodoc/sponsor/0/website" target="_blank"><img src="https://opencollective.com/compodoc/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/compodoc/sponsor/1/website" target="_blank"><img src="https://opencollective.com/compodoc/sponsor/1/avatar.svg"></a>
<a href="https://opencollective.com/compodoc/sponsor/2/website" target="_blank"><img src="https://opencollective.com/compodoc/sponsor/2/avatar.svg"></a>
<a href="https://opencollective.com/compodoc/sponsor/3/website" target="_blank"><img src="https://opencollective.com/compodoc/sponsor/3/avatar.svg"></a>
<a href="https://opencollective.com/compodoc/sponsor/4/website" target="_blank"><img src="https://opencollective.com/compodoc/sponsor/4/avatar.svg"></a>
<a href="https://opencollective.com/compodoc/sponsor/5/website" target="_blank"><img src="https://opencollective.com/compodoc/sponsor/5/avatar.svg"></a>
<a href="https://opencollective.com/compodoc/sponsor/6/website" target="_blank"><img src="https://opencollective.com/compodoc/sponsor/6/avatar.svg"></a>
<a href="https://opencollective.com/compodoc/sponsor/7/website" target="_blank"><img src="https://opencollective.com/compodoc/sponsor/7/avatar.svg"></a>
<a href="https://opencollective.com/compodoc/sponsor/8/website" target="_blank"><img src="https://opencollective.com/compodoc/sponsor/8/avatar.svg"></a>
<a href="https://opencollective.com/compodoc/sponsor/9/website" target="_blank"><img src="https://opencollective.com/compodoc/sponsor/9/avatar.svg"></a></p>
</div><div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
<!-- END CONTENT -->
</div>
</div>
<label class="dark-mode-switch">
<input type="checkbox">
<span class="slider">
<svg class="slider-icon" viewBox="0 0 24 24" fill="none" height="20" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
</svg>
</span>
</label>
<script>
var COMPODOC_CURRENT_PAGE_DEPTH = 0;
var COMPODOC_CURRENT_PAGE_CONTEXT = 'contributing';
var COMPODOC_CURRENT_PAGE_URL = 'contributing.html';
var MAX_SEARCH_RESULTS = 15;
</script>
<script>
$darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
checkToggle(darkModeState);
if ($darkModeToggleSwitchers.length > 0) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].addEventListener('change', function (event) {
darkModeState = !darkModeState;
toggleDarkMode(darkModeState);
});
}
}
</script>
<script src="./js/libs/custom-elements.min.js"></script>
<script src="./js/libs/lit-html.js"></script>
<script src="./js/menu-wc.js" defer></script>
<script nomodule src="./js/menu-wc_es5.js" defer></script>
<script src="./js/libs/bootstrap-native.js"></script>
<script src="./js/libs/es6-shim.min.js"></script>
<script src="./js/libs/EventDispatcher.js"></script>
<script src="./js/libs/promise.min.js"></script>
<script src="./js/compodoc.js"></script>
<script src="./js/tabs.js"></script>
<script src="./js/menu.js"></script>
<script src="./js/libs/clipboard.min.js"></script>
<script src="./js/libs/prism.js"></script>
<script src="./js/sourceCode.js"></script>
<script src="./js/search/search.js"></script>
<script src="./js/search/lunr.min.js"></script>
<script src="./js/search/search-lunr.js"></script>
<script src="./js/search/search_index.js"></script>
<script src="./js/lazy-load-graphs.js"></script>
</body>
</html>