@longform/longform 0.0.7 → 0.0.9
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.
- package/README.md +28 -0
- package/dist/longform.cjs +128 -21
- package/dist/longform.cjs.map +1 -1
- package/dist/longform.d.ts +4 -4
- package/dist/longform.js +128 -21
- package/dist/longform.js.br +0 -0
- package/dist/longform.js.gz +0 -0
- package/dist/longform.js.map +1 -1
- package/dist/longform.min.js +128 -21
- package/dist/longform.min.js.br +0 -0
- package/dist/longform.min.js.gz +0 -0
- package/dist/longform.min.js.map +1 -1
- package/dist/types.d.ts +70 -1
- package/lib/longform.ts +168 -23
- package/lib/types.ts +91 -1
- package/package.json +19 -13
- package/lib/longform.test.ts +0 -354
package/lib/longform.test.ts
DELETED
|
@@ -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 <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 <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
|
-
<em>with preformatted html</em>
|
|
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
|
-
});
|