-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
123 lines (123 loc) · 6.07 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!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.<string></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.<Array.<string>></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:
<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:
<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>