@longform/longform 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,354 +0,0 @@
1
- import { longform, processTemplate } from './longform.ts';
2
- import type { ParsedResult } from './types.ts';
3
- import test from 'node:test';
4
- import assert from 'node:assert/strict';
5
- import vnu from 'vnu-jar';
6
- import { execFile } from "node:child_process";
7
- import { tmpdir } from "node:os";
8
- import { parse, resolve } from "node:path";
9
- import { randomUUID } from "node:crypto";
10
- import { writeFile, unlink } from "node:fs/promises";
11
- import * as prettier from 'prettier';
12
- import {execPath} from 'node:process';
13
-
14
- async function validate(html: string, type: 'html' | 'xml' = 'html'): Promise<boolean> {
15
- return true;
16
-
17
- const tmpfile = resolve(tmpdir(), randomUUID() + '.html');
18
- const format = type === 'xml'
19
- ? '--xml'
20
- : '--html';
21
-
22
- await writeFile(tmpfile, html, 'utf-8');
23
-
24
- return new Promise<boolean>((resolve, reject) => {
25
- execFile('java', [
26
- '-jar',
27
- `"${vnu}"`,
28
- format,
29
- '--text',
30
- 'json',
31
- tmpfile,
32
- ], { shell: true }, async (err) => {
33
- await unlink(tmpfile);
34
-
35
- if (err) {
36
- console.log(`HTML Validation error: ${err}`);
37
- console.log(await prettier.format(html, { parser: 'html' }));
38
- return reject(false);
39
- }
40
-
41
- resolve(true);
42
- });
43
- });
44
- }
45
-
46
- function wrapHead(html: string): string {
47
- return `<!doctype html><html lang=en><head>${html}</head><body><h1>Test</h1></body></html>`;
48
- }
49
-
50
- function wrapBody(html: string): string {
51
- return `<!doctype html><html lang=en><head><title>Test</title></head><body>${html}</body></html>`;
52
- }
53
-
54
- const lf1 = `
55
- #ignored
56
- div:: Test
57
-
58
- @doctype:: html
59
- html[lang=en]::
60
- head::
61
- title:: Longform title
62
- body::
63
- h1:: Longform h1
64
- `;
65
-
66
- const html1 = `\
67
- <!doctype html>\
68
- <html lang="en"><head><title>Longform title</title></head>\
69
- <body><h1>Longform h1</h1></body></html>`;
70
-
71
- test('It creates a root element with doctype', {only: false}, async () => {
72
- const res = longform(lf1);
73
- const html = res.root as string;
74
-
75
- assert(await validate(html));
76
- assert.equal(html, html1);
77
- });
78
-
79
- const lf2 = `\
80
- #page-info
81
- div.card.card--info::
82
- h4.card-header::
83
- The card's title goes here
84
- p.card-description::
85
- This is the body of the card. You
86
- can use&nbsp;<b>html</b> to inline
87
- elements which are hard to use in longform
88
- syntax, <strong>but they have to be allowed
89
- using longform directives</strong>.
90
- `;
91
-
92
- const html2 = `\
93
- <div id="page-info" class="card card--info"><h4 class="card-header">The card's \
94
- title goes here</h4><p class="card-description">\
95
- This is the body of the card. You can use&nbsp;<b>html</b> \
96
- to inline elements which are hard to use in \
97
- longform syntax, <strong>but they have to be \
98
- allowed using longform directives</strong>.</p>\
99
- </div>`;
100
- test('It creates an element with embedded identifier with inline html copy', {only: false}, async () => {
101
- const res = longform(lf2);
102
- const html = res.fragments['page-info'].html;
103
-
104
- assert(await validate(wrapBody(html)));
105
- assert.equal(html, html2);
106
- });
107
-
108
- const lf3 = `
109
- #head [
110
- title:: My Longform Test
111
- meta::
112
- [name=description]
113
- [content=This tests the validity and correctness of the longform output]
114
- ]
115
- `;
116
- const html3 = `\
117
- <title data-lf="head">My Longform Test</title>\
118
- <meta data-lf="head" name="description" content="This tests the validity and correctness of the longform output">\
119
- `;
120
- test('It creates a range of elements', {only: false}, async () => {
121
- const res = longform(lf3);
122
- const html = res.fragments['head'].html as string;
123
-
124
- assert.equal(html, html3);
125
- });
126
-
127
- const lf4 = `
128
- @xml:: version="1.0" encoding="UTF-8"
129
- h:html::
130
- [xmlns:xdc=http://www.xml.com/books]
131
- [xmlns:h=http://www.w3.org/HTML/1998/html4]
132
- h:head::
133
- h:title:: Book Review
134
- h:body::
135
- xdc:bookreview::
136
- xdc:title:: XML: A Primer
137
- h:table::
138
- h:tr[align=center]::
139
- h:td:: Author
140
- h:td:: Price
141
- h:td:: Pages
142
- h:td:: Date
143
- h:tr[align=left]::
144
- h:td::
145
- xdc:author:: Simon St. Laurent
146
- h:td::
147
- xdc:price:: 31.98
148
- h:td::
149
- xdc:pages:: 352
150
- h:td::
151
- xdc:date:: 1998/01
152
- `;
153
-
154
- const xml4 = `\
155
- <?xml version="1.0" encoding="UTF-8"?>\
156
- <h:html xmlns:xdc="http://www.xml.com/books" xmlns:h="http://www.w3.org/HTML/1998/html4">\
157
- <h:head><h:title>Book Review</h:title></h:head>\
158
- <h:body>\
159
- <xdc:bookreview>\
160
- <xdc:title>XML: A Primer</xdc:title>\
161
- <h:table>\
162
- <h:tr align="center">\
163
- <h:td>Author</h:td><h:td>Price</h:td>\
164
- <h:td>Pages</h:td><h:td>Date</h:td></h:tr>\
165
- <h:tr align="left">\
166
- <h:td><xdc:author>Simon St. Laurent</xdc:author></h:td>\
167
- <h:td><xdc:price>31.98</xdc:price></h:td>\
168
- <h:td><xdc:pages>352</xdc:pages></h:td>\
169
- <h:td><xdc:date>1998/01</xdc:date></h:td>\
170
- </h:tr>\
171
- </h:table>\
172
- </xdc:bookreview>\
173
- </h:body>\
174
- </h:html>\
175
- `;
176
- test('It parses an XML string', {only: false}, () => {
177
- const res = longform(lf4);
178
- const xml = res.root as string;
179
-
180
- assert.equal(xml, xml4);
181
- })
182
-
183
- const lf5 = `
184
- pre::
185
- code:: {
186
- div::
187
- Example longform
188
- <em>with preformatted html</em>
189
- }
190
- `;
191
- const html5 = `<pre data-lf-root><code>div::
192
- Example longform
193
- &lt;em&gt;with preformatted html&lt;/em&gt;
194
- </code></pre>`;
195
- test('It parses preformatted content', {only: false}, () => {
196
- const res = longform(lf5);
197
- const html = res.root as string;
198
-
199
- console.log(html)
200
-
201
- //assert.equal(html, html5);
202
- })
203
-
204
- const lf6 = `
205
- head::
206
- script:: {{
207
- const foo = 'bar';
208
-
209
- console.log(foo);
210
- }}
211
- `;
212
- const html6 = `\
213
- <head data-lf-root><script>const foo = 'bar';
214
- console.log(foo);
215
- </script></head>\
216
- `;
217
- test('It parses preformatted content', {only: false}, () => {
218
- const res = longform(lf6);
219
- const html = res.root as string;
220
-
221
- assert.equal(html, html6);
222
- })
223
-
224
- const lf7 = `
225
- #meta [
226
- title:: Ref test
227
- meta::
228
- [name=description]
229
- [content=Tests referencing other frags]
230
- ]
231
-
232
- #footer::
233
- footer::
234
- This is the footer
235
-
236
- @doctype:: html
237
- html[lang=en]::
238
- head::
239
- #[meta]
240
- body::
241
- Test #[header]
242
- #[main]
243
- #[footer]
244
-
245
- #header
246
- header::
247
- hgroup::
248
- h1:: Ref test
249
- p:: Tests referenceing other frags
250
-
251
- #p2
252
- p::
253
- The second p tag.
254
-
255
- #main
256
- main::
257
- #[p1]
258
- #[p2]
259
-
260
- #p1
261
- p::
262
- The first p tag.
263
- `;
264
-
265
- test('It embeds referenced fragments', { skip: true }, async () => {
266
- const res = longform(lf7);
267
- });
268
-
269
- const lf8 = `
270
- @root
271
- html::
272
- This is ignored
273
-
274
- @template
275
- #label "
276
- This is my #{position} label text #[ref]
277
- with a new line in it
278
- "
279
-
280
- ##ref
281
- p::
282
- This is referenced.
283
- "
284
- `;
285
-
286
- test('It renders plan text fragments', { skip: true }, () => {
287
- const parsed = longform(lf8);
288
- const res = processTemplate('label', { position: 4 }, parsed);
289
- })
290
-
291
- const lf9 = `
292
- @template
293
- #my-template
294
- div[aria-label=Something something #{position}]::
295
- Hello world!
296
-
297
- #other-fragment
298
- div::
299
- p:: Test
300
- `;
301
- const html9 = `\
302
- <div id="other-fragment"><p>Test</p></div>\
303
- `;
304
- const template9 = `\
305
- <div id="my-template" aria-label="Something something 4">Hello world!</div>\
306
- `;
307
- test('It renders templated element fragments', { only: false }, () => {
308
- const parsed = longform(lf9);
309
- console.log(parsed)
310
- const res = processTemplate(parsed.templates['my-template'], { position: 4 }, x => {
311
- return parsed.fragments[x]?.html;
312
- });
313
-
314
- assert.equal(parsed.fragments['other-fragment'].html, html9);
315
- assert.equal(res, template9);
316
- });
317
-
318
- const lf10 = `
319
- @root
320
- @doctype:: html
321
- html::
322
- @mount:: head
323
- head::
324
- body::
325
- @mount:: header
326
- header.header::
327
- @mount:: main
328
- main::
329
- @mount:: footer
330
- `;
331
- test('It breaks mount points up into individual dom slices', () => {
332
- const parsed = longform(lf10, console.log);
333
-
334
- console.log(parsed);
335
-
336
- assert(parsed.mountable);
337
- assert.equal(parsed.mountPoints[0].id, 'head');
338
- assert.equal(parsed.mountPoints[0].part, '<!doctype html><html><head data-lf-mount="head">');
339
- assert.equal(parsed.mountPoints[1].id, 'header');
340
- assert.equal(parsed.mountPoints[1].part, '</head><body><header data-lf-mount="header" class="header">');
341
- assert.equal(parsed.mountPoints[2].id, 'main');
342
- assert.equal(parsed.mountPoints[2].part, '</header><main data-lf-mount="main">');
343
- assert.equal(parsed.tail, '</main></body></html>');
344
- });
345
-
346
-
347
- const lf11 = `
348
- @doctype:: html
349
- html::
350
- [lang=en]
351
- `;
352
- test('It breaks mount points into individual dom slices #2', { only: true }, () => {
353
- console.log(longform(lf11));
354
- });