index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jsdoctypeparser live demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="npm_copies/bootstrap.min.css" media="all">
  <link rel="stylesheet" href="styles/prettify.css" media="all">
  <link rel="stylesheet" href="styles/jsdoctypeparser-demo.css" media="all" />
  <link rel="stylesheet" href="npm_copies/gh-fork-ribbon.css" />
  <!--[if lt IE 9]>
    <link rel="stylesheet" href="npm_copies/gh-fork-ribbon.ie.css" />
  <![endif]-->
  <link rel="stylesheet" href="styles/gh-fork-ribbon.theme.css" media="all">
</head>
<body>
  <div>
    <a class="github-fork-ribbon right-top" data-ribbon="Fork me on GitHub" href="https://github.com/jsdoctypeparser/jsdoctypeparser">Fork me on GitHub</a>
  </div>
  <div class="container">
    <div class="page-header">
      <h1>
        jsdoctypeparser live demo
        <a href="https://travis-ci.org/jsdoctypeparser/jsdoctypeparser"><img src="https://travis-ci.org/jsdoctypeparser/jsdoctypeparser.svg?branch=master" alt="build status" /></a>
        <a href="https://badge.fury.io/js/jsdoctypeparser"><img src="https://badge.fury.io/js/jsdoctypeparser.svg" alt="NPM version" /></a>
      </h1>
    </div>
    <div class="row">
      <div class="col-md-6">
        <h3>What is jsdoctypeparser?</h3>
        <p>
          jsdoctypeparser is a <a href="https://github.com/jsdoc3/jsdoc/">JSDoc</a> type expression parser module.
          This module can parse:
        </p>
        <dl class="dl-horizontal">
          <dt><a href="https://jsdoc.app/tags-type.html" target="jsdoc-type-expr">JSDoc style</a></dt>
          <dd><code>foo.bar</code>, <code>String[]</code>, <code>module:foo/bar</code></dd>
          <dt><a href="https://developers.google.com/closure/compiler/docs/js-for-compiler" target="closure-compiler-type-expr">Closure Compiler style</a></dt>
          <dd><code>Array.&lt;string&gt;</code>, <code>function(arg1, arg2): ret</code></dd>
          <dt><a href="https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html">TypeScript types</a> (<a href="https://github.com/jsdoctypeparser/jsdoctypeparser/issues/50">some</a>)</dt>
          <dd><code>[string, string]</code>, <code>import("./package").Type</code></dd>
          <dt>Complex types</dt>
          <dd><code>Array.&lt;Array.&lt;string&gt;&gt;</code>, <code>{ length: number }</code></dd>
        </dl>
        <p>
          This module is available on <a href="https://github.com/jsdoctypeparser/jsdoctypeparser">github</a> or <a href="https://npmjs.org/package/jsdoctypeparser">npm</a>.
        </p>
        <hr />
        <h3>Let's try!</h3>
        <div class="type-expr-form">
          <form id="form" class="form">
            <div class="form-group">
              <span class="type-exp">/** @type {</span>
              <textarea id="input" class="form-control" placeholder="?TypeExpression="></textarea>
              <span class="type-exp">} */</span>
            </div>
            <div class="form-group">
              <h3>Options</h3>
            </div>
            <div class="form-group">
              <label>
                Rule: &nbsp;
                <select id="startRule">
                  <option value="TopTypeExpr">Top-level rule</option>
                  <option value="BroadNamepathExpr">Namepath (broad)</option>
                  <option value="NamepathExpr">Namepath (narrow)</option>
                  <option value="ExternalNameExpr">External namepath</option>
                  <option value="ModuleNameExpr">Module namepath (not in TypeScript)</option>
                </select>
              </label>
            </div>
            <div class="form-group">
              <label>
                Mode: &nbsp;
                <select id="mode">
                  <option value="jsdoc">JSDoc</option>
                  <option value="closure">Closure (Google Closure Compiler)</option>
                  <option value="typescript">TypeScript</option>
                  <option value="permissive">Permissive</option>
                </select>
              </label>
            </div>
          </form>
        </div>
        <div class="alert-container">
          <div id="success" class="alert alert-success">
            Complete parsing!
          </div>
          <div id="err" class="alert alert-danger">
            <p><strong>Syntax Error</strong></p>
            <pre id="err-msg"></pre>
          </div>
        </div>
        <hr />
        <h4>Any questions?</h4>
        <p>Please file an <a href="https://github.com/jsdoctypeparser/jsdoctypeparser/issues/">issue</a> or join us on our <a href="https://discord.gg/x4aXh7">Discord chat for jsdoc</a>.</p>
      </div>
      <div class="col-md-6">
        <h3>Result</h3>
        <h4>Parsing</h4>
        <pre class="prettyprint lang-js linenums">const {parse} = require('jsdoctypeparser');
const result = parse(yourTypeExpression);
console.log(result);</pre>
        <p>The console output is:</p>
        <pre class="prettyprint lang-js linenums" id="output-obj"></pre>
        <hr />
        <h4>Publishing</h4>
        <pre class="prettyprint lang-js linenums">const {publish} = require('jsdoctypeparser');
console.log(publish(result));</pre>
        <pre id="output-str" class="prettyprint lang-html linenums"></pre>
      </div>
    </div>
  </div>
  <div class="footer">
    <p><a href="https://github.com/jsdoctypeparser/jsdoctypeparser" target="jsdoctypeparser">jsdoctypeparser</a> licensed under <a href="http://jsdoctypeparser.mit-license.org/" target="jsdoctypeparser-mit-license">MIT</a>.</p>
    <p><a href="https://getbootstrap.com/" target="bootstrap">Twitter Bootstrap</a> licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="apache-license">Apache License v2.0</a>.</p>
    <p><a href="https://validator.w3.org/check?uri=https%3A%2F%2Fjsdoctypeparser.github.io"><img src="images/valid_html5.png" alt="This page is valid HTML5." /></a></p>
  </div>
  <script src="npm_copies/jquery.min.js"></script>
  <script src="npm_copies/prettify.js"></script>
  <script src="dist/jsdoctypeparser-demo.js"></script>
</body>
</html>