-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.xhtml
358 lines (358 loc) · 23.7 KB
/
index.xhtml
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sparser - Universal Parser</title>
<link href="https://sparser.io" rel="canonical" type="application/xhtml+xml"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="index, follow" name="robots"/>
<meta content="Sparser - Universal Parser" name="DC.title"/>
<meta content="#fff" name="theme-color"/>
<meta content="Austin Cheney" name="author"/>
<meta content="Sparser is a programming language parsing utility that can interpret many different languages using a single simple data model." name="description"/>
<meta content="Global" name="distribution"/>
<meta content="en" http-equiv="Content-Language"/>
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type"/>
<meta content="blendTrans(Duration=0)" http-equiv="Page-Enter"/>
<meta content="blendTrans(Duration=0)" http-equiv="Page-Exit"/>
<meta content="text/css" http-equiv="content-style-type"/>
<meta content="application/javascript" http-equiv="content-script-type"/>
<meta content="google515f7751c9f8a155" name="google-site-verification"/>
<meta content="#bbbbff" name="msapplication-TileColor"/>
<link href="website.css" media="all" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="top_menu">
<h1><a href="/">Sparser</a></h1>
<ul>
<li class="donate"><a href="https://liberapay.com/prettydiff/donate">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" height="16" width="16" x="7" y="7">
<g transform="translate(-78.37-208.06)" fill="#111">
<path d="m104.28 271.1c-3.571 0-6.373-.466-8.41-1.396-2.037-.93-3.495-2.199-4.375-3.809-.88-1.609-1.308-3.457-1.282-5.544.025-2.086.313-4.311.868-6.675l9.579-40.05 11.69-1.81-10.484 43.44c-.202.905-.314 1.735-.339 2.489-.026.754.113 1.421.415 1.999.302.579.817 1.044 1.546 1.395.729.353 1.747.579 3.055.679l-2.263 9.278"/><path d="m146.52 246.14c0 3.671-.604 7.03-1.811 10.07-1.207 3.043-2.879 5.669-5.01 7.881-2.138 2.213-4.702 3.935-7.693 5.167-2.992 1.231-6.248 1.848-9.767 1.848-1.71 0-3.42-.151-5.129-.453l-3.394 13.651h-11.162l12.52-52.19c2.01-.603 4.311-1.143 6.901-1.622 2.589-.477 5.393-.716 8.41-.716 2.815 0 5.242.428 7.278 1.282 2.037.855 3.708 2.024 5.02 3.507 1.307 1.484 2.274 3.219 2.904 5.205.627 1.987.942 4.11.942 6.373m-27.378 15.461c.854.202 1.91.302 3.167.302 1.961 0 3.746-.364 5.355-1.094 1.609-.728 2.979-1.747 4.111-3.055 1.131-1.307 2.01-2.877 2.64-4.714.628-1.835.943-3.858.943-6.071 0-2.161-.479-3.998-1.433-5.506-.956-1.508-2.615-2.263-4.978-2.263-1.61 0-3.118.151-4.525.453l-5.28 21.948"/>
</g>
</svg>
Donate</a></li>
<li>
<a href="demo/?scrolldown">Demo</a>
</li>
<li>
<a href="docs-html/tech-documentation.xhtml">Documentation</a>
</li>
<li>
<a href="https://github.com/unibeautify/sparser">Github</a>
</li>
<li>
<a href="https://www.npmjs.com/package/sparser">NPM</a>
</li>
</ul>
<span class="clear"></span>
</div>
<div id="content">
<h1>
<span>Sparser</span>The Universal Parser</h1>
<div class="section">
<h2>License:
<a href="license">Creative Commons Zero v1.0 Universal (cc0-1.0)</a>
</h2>
<h2>Version: <span>1.4.12</span>
</h2>
</div>
<div class="section">
<h2>The So What</h2>
<p>Sparser is a language parser created to provide a simple data format that may accurately describe any language. This universal nature is achieved through three realizations:</p>
<ol>
<li>
<h3>Languages are composed of structures.</h3>
A structure is a logical grouping that is typically defined by a language through syntax and sometimes by context. A simple scheme that identifies the atomic particles of a language by structure is sufficient to describe the language. That simple scheme is what allows Sparser to describe different languages equally and universally.</li>
<li>
<h3>Descriptions of language structures are universally extensible.</h3>
Language structures are not flat. One structure may include other child structures. Those child structures may be of a different grammar, syntax, or language from the parent structure. A universal description of language structure allows complex documents, which are documents composed of more than one language, to be described as a single uniform piece of data.</li>
<li>
<h3>Structure provides context.</h3>
Understanding any arrangment of complex information takes into account <em>context</em>. Context is the meaning of a thing in relation to other things of close proximity. Sometimes the pieces of a language are partially or wholly defined by their context. A uniform and universal description of structure provides implicit definitions of a language fragment that becomes explicit when extended with additional descriptive data.</li>
</ol>
</div>
<div class="section">
<h2>Example</h2>
<p>Provided is a simple example of trivial code and the resultant parser output formatted as an HTML table. Try out your code samples on the
<a href="demo/">demo page</a>.</p>
<h3>JSX Code Sample</h3>
<!-- parse-ignore-start -->
<code><![CDATA[var content = (
<Nav> {/* child comment, put {} around */}
<cPerson
name={
window.isLoggedIn
? window.name
: ''
}
// end of line comment
/>
</Nav>
);]]></code>
<!-- parse-ignore-end -->
<h3>Parsed Output</h3>
<table>
<thead>
<tr class="header">
<th class="numb">index</th>
<th class="numb">begin</th>
<th class="numb">ender</th>
<th>lexer</th>
<th class="numb">lines</th>
<th>stack</th>
<th>types</th>
<th>token</th>
</tr>
</thead>
<tbody>
<tr class="script even">
<th class="numb">0</th>
<td class="numb">-1</td>
<td class="numb">-1</td>
<td>script</td>
<td class="numb">0</td>
<td>global</td>
<td>word</td>
<td>var</td>
</tr>
<tr class="script odd">
<th class="numb">1</th>
<td class="numb">-1</td>
<td class="numb">-1</td>
<td>script</td>
<td class="numb">1</td>
<td>global</td>
<td>reference</td>
<td>content</td>
</tr>
<tr class="script even">
<th class="numb">2</th>
<td class="numb">-1</td>
<td class="numb">-1</td>
<td>script</td>
<td class="numb">1</td>
<td>global</td>
<td>operator</td>
<td>=</td>
</tr>
<tr class="script odd">
<th class="numb">3</th>
<td class="numb">-1</td>
<td class="numb">23</td>
<td>script</td>
<td class="numb">1</td>
<td>global</td>
<td>start</td>
<td>(</td>
</tr>
<tr class="markup even">
<th class="numb">4</th>
<td class="numb">3</td>
<td class="numb">22</td>
<td>markup</td>
<td class="numb">2</td>
<td>paren</td>
<td>start</td>
<td><Nav></td>
</tr>
<tr class="markup odd">
<th class="numb">5</th>
<td class="numb">4</td>
<td class="numb">7</td>
<td>markup</td>
<td class="numb">2</td>
<td>Nav</td>
<td>script_start</td>
<td>{</td>
</tr>
<tr class="script even">
<th class="numb">6</th>
<td class="numb">5</td>
<td class="numb">7</td>
<td>script</td>
<td class="numb">0</td>
<td>script</td>
<td>comment</td>
<td>/* child comment, put {} around */</td>
</tr>
<tr class="markup odd">
<th class="numb">7</th>
<td class="numb">5</td>
<td class="numb">7</td>
<td>markup</td>
<td class="numb">0</td>
<td>script</td>
<td>script_end</td>
<td>}</td>
</tr>
<tr class="markup even">
<th class="numb">8</th>
<td class="numb">4</td>
<td class="numb">22</td>
<td>markup</td>
<td class="numb">2</td>
<td>Nav</td>
<td>singleton</td>
<td><cPerson/></td>
</tr>
<tr class="markup odd">
<th class="numb">9</th>
<td class="numb">8</td>
<td class="numb">20</td>
<td>markup</td>
<td class="numb">2</td>
<td>cPerson</td>
<td>jsx_attribute_start</td>
<td>name={</td>
</tr>
<tr class="script even">
<th class="numb">10</th>
<td class="numb">9</td>
<td class="numb">20</td>
<td>script</td>
<td class="numb">0</td>
<td>jsx_attribute</td>
<td>word</td>
<td>window</td>
</tr>
<tr class="script odd">
<th class="numb">11</th>
<td class="numb">9</td>
<td class="numb">20</td>
<td>script</td>
<td class="numb">0</td>
<td>jsx_attribute</td>
<td>separator</td>
<td>.</td>
</tr>
<tr class="script even"><th class="numb">12</th><td class="numb">9</td><td class="numb">20</td><td>script</td><td class="numb">0</td><td>jsx_attribute</td><td>word</td><td>isLoggedIn</td></tr>
<tr class="script odd"><th class="numb">13</th><td class="numb">9</td><td class="numb">20</td><td>script</td><td class="numb">1</td><td>jsx_attribute</td><td>operator</td><td>?</td></tr>
<tr class="script even"><th class="numb">14</th><td class="numb">9</td><td class="numb">20</td><td>script</td><td class="numb">1</td><td>jsx_attribute</td><td>word</td><td>window</td></tr>
<tr class="script odd"><th class="numb">15</th><td class="numb">9</td><td class="numb">20</td><td>script</td><td class="numb">0</td><td>jsx_attribute</td><td>separator</td><td>.</td></tr>
<tr class="script even"><th class="numb">16</th><td class="numb">9</td><td class="numb">20</td><td>script</td><td class="numb">0</td><td>jsx_attribute</td><td>word</td><td>name</td></tr>
<tr class="script odd"><th class="numb">17</th><td class="numb">9</td><td class="numb">20</td><td>script</td><td class="numb">1</td><td>jsx_attribute</td><td>operator</td><td>:</td></tr>
<tr class="script even"><th class="numb">18</th><td class="numb">9</td><td class="numb">20</td><td>script</td><td class="numb">1</td><td>jsx_attribute</td><td>string</td><td>''</td></tr>
<tr class="script odd"><th class="numb">19</th><td class="numb">9</td><td class="numb">20</td><td>script</td><td class="numb">0</td><td>jsx_attribute</td><td>separator</td><td>x;</td></tr>
<tr class="markup even">
<th class="numb">20</th>
<td class="numb">9</td>
<td class="numb">20</td>
<td>markup</td>
<td class="numb">0</td>
<td>jsx_attribute</td>
<td>jsx_attribute_end</td>
<td>}</td>
</tr>
<tr class="markup odd">
<th class="numb">21</th>
<td class="numb">8</td>
<td class="numb">22</td>
<td>markup</td>
<td class="numb">1</td>
<td>cPerson</td>
<td>comment_attribute</td>
<td>// end of line comment</td>
</tr>
<tr class="markup even">
<th class="numb">22</th>
<td class="numb">4</td>
<td class="numb">22</td>
<td>markup</td>
<td class="numb">2</td>
<td>Nav</td>
<td>end</td>
<td></Nav></td>
</tr>
<tr class="script odd">
<th class="numb">23</th>
<td class="numb">3</td>
<td class="numb">23</td>
<td>script</td>
<td class="numb">2</td>
<td>paren</td>
<td>end</td>
<td>)</td>
</tr>
<tr class="script even">
<th class="numb">24</th>
<td class="numb">-1</td>
<td class="numb">-1</td>
<td>script</td>
<td class="numb">0</td>
<td>global</td>
<td>separator</td>
<td>;</td>
</tr>
</tbody>
</table>
<p>You can see from the above output example a couple of different types of code syntax are parsed and yet the output is uniform across all types of syntax. The example also demonstrates a JavaScript structure that contains markup code, which then contains a section of JavaScript code.</p>
<p>The <em>begin</em> and <em>ender</em> data columns describe the start and finish points of a structure while the <em>stack</em> data column names that structure. For more information please read the <a href="docs-html/tech-documentation.xhtml">technical documentation</a> or try it out in the <a href="demo/">demo tool</a>.</p>
</div>
<div class="section">
<h2>Usage Examples</h2>
<p>The production application files are written to be environment agnostic. The application files for use with brwoser and Node.js are actually identical aside from a single global reference.</p>
<h3>Get and Configure the Application</h3>
<p>Get the code from Github</p>
<!-- parse-ignore-start -->
<code>git clone https://github.com/Unibeautify/sparser.git
cd sparser
npm install
node js/services build</code>
<!-- parse-ignore-end -->
<p>Locally install the code from NPM</p>
<!-- parse-ignore-start -->
<code>npm install sparser
cd node_modules/sparser
npm install
node js/services build</code>
<!-- parse-ignore-end -->
<p>Or perform an NPM global install and not have to configure anything</p>
<code>npm install sparser -g</code>
<h3>Execute the application in the terminal with Node</h3>
<p>The command documentation is built into the terminal API. To access this documenation use the <strong>commands</strong> command to see all available commands and guidance for examples.</p>
<p>Locally installed</p>
<code>node js/services commands</code>
<p>Globally installed</p>
<code>sparser commands</code>
<h3>Execute the application in a Node.js application</h3>
<!-- parse-ignore-start -->
<code>require("sparser");
const output = "";
global.sparser.options.source = "my code";
output = global.sparser.parser();</code>
<!-- parse-ignore-end -->
<h3>Execute the application in the browser</h3>
<p>First, include the application into HTML.</p>
<code><script type="application/javascript" src="sparser/js/browser.js"></script></code>
<p>Second, execute the application</p>
<!-- parse-ignore-start -->
<code>const output = "";
window.sparser.options.source = "my code";
output = window.sparser.parser();</code>
<!-- parse-ignore-end -->
</div>
<div class="section">
<h2>Currently Supported Languages by Processing Lexer</h2>
<ul> <li><h3>markdown</h3><ul> <li><a href="https://spec.commonmark.org/">markdown</a></li> </ul></li> <li><h3>markup</h3><ul> <li><a href="https://velocity.apache.org/">Apache Velocity</a></li> <li><a href="https://support.microsoft.com/en-us/help/976112/introduction-to-asp-net-inline-expressions-in-the-net-framework">ASP Inline Expression</a></li> <li><a href="https://www.adobe.com/products/coldfusion-family.html">CFML (ColdFusion Markup Language)</a></li> <li><a href="https://docs.djangoproject.com/en/2.1/topics/forms/">Django Inline HTML</a></li> <li><a href="https://www.dustjs.com/">Dust.js</a></li> <li><a href="https://hexdocs.pm/eex/EEx.html">EEX Elixir Templates</a></li> <li><a href="https://www.ejs.co/">EJS (Embedded JavaScript) Templates</a></li> <li><a href="https://ruby-doc.org/stdlib-1.9.3/libdoc/erb/rdoc/ERB.html">ERB (Embedded Ruby)</a></li> <li><a href="https://freemarker.apache.org/">FreeMarker</a></li> <li><a href="https://genshi.edgewall.org/">Genshi</a></li> <li><a href="https://handlebarsjs.com/">Handlebars</a></li> <li><a href="https://helpx.adobe.com/experience-manager/htl/using/getting-started.html">HTL (HTML Templating Language)</a></li> <li><a href="https://www.w3.org/TR/html52/">HTML</a></li> <li><a href="https://jekyllrb.com/docs/liquid/">Jekyll</a></li> <li><a href="http://jinja.pocoo.org/">Jinja</a></li> <li><a href="https://github.com/eclipse-ee4j/jstl-api">JSTL (Java Standard Tag Library)</a></li> <li><a href="https://shopify.github.io/liquid/">Liquid</a></li> <li><a href="https://mustache.github.io/">Mustache</a></li> <li><a href="https://mozilla.github.io/nunjucks/">Nunjucks</a></li> <li><a href="https://www.iso.org/standard/16387.html">SGML</a></li> <li><a href="https://docs.silverstripe.org/en/4/developer_guides/templates/syntax/">SilverStripe</a></li> <li><a href="http://blazejs.org/guide/spacebars.html">Spacebars templates</a></li> <li><a href="https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html">ThymeLeaf</a></li> <li><a href="https://underscorejs.org/#template">Underscore Templates (TPL)</a></li> <li><a href="https://twig.symfony.com/">Twig</a></li> <li><a href="https://docs.vapor.codes/3.0/leaf/overview/">Vapor Leaf</a></li> <li><a href="https://github.com/kirbysayshi/vash">Vash</a></li> <li><a href="https://phalcon-php-framework-documentation.readthedocs.io/en/latest/reference/volt.html">Volt</a></li> <li><a href="https://www.w3.org/TR/REC-xml/">XML</a></li> <li><a href="https://www.w3.org/standards/xml/transformation">XSLT</a></li> </ul></li> <li><h3>script</h3><ul> <li><a href="https://flow.org/">Flow</a></li> <li><a href="https://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">JavaScript / ECMAScript</a></li> <li><a href="https://json.org/">JSON</a></li> <li><a href="https://doc.qt.io/qt-5/qmlfirststeps.html">QML</a></li> <li><a href="https://reactjs.org/docs/introducing-jsx.html">React JSX</a></li> <li><a href="https://www.styled-components.com/">styled-components</a></li> <li><a href="https://github.com/zeit/styled-jsx#readme">styled-jsx</a></li> <li><a href="https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.TextField">TSS (Titanium Style Sheets)</a></li> <li><a href="https://www.typescriptlang.org/docs/handbook/jsx.html">TSX</a></li> <li><a href="https://www.typescriptlang.org/">TypeScript</a></li> </ul></li> <li><h3>style</h3><ul> <li><a href="https://www.w3.org/Style/CSS/#news">CSS</a></li> <li><a href="http://lesscss.org/">LESS</a></li> <li><a href="https://postcss.org/">PostCSS</a></li> <li><a href="https://sass-lang.com/">SCSS (Sass)</a></li> </ul></li> </ul> <p class="lang_total"><strong>45</strong> total languages.</p><!-- end html inventory -->
</div>
<div class="section">
<h2>Contributions are welcome.</h2>
<p>This project is young. All manners of contributions are welcome. Here are some suggested areas:</p>
<ul>
<li>Finding and logging defects</li>
<li>Extending and improving documentation</li>
<li>Adding or streamlining automation, APIs, and integrations</li>
<li>Adding support for new language rules</li>
<li>Contributor resources</li>
</ul>
</div>
</div>
<div id="blobs">
<span id="svg_left"></span>
<span id="svg_right"></span>
<div></div>
</div>
<script src="js/website.js" type="application/javascript"></script>
</body>
</html>