Skip to content

Commit e534db9

Browse files
tomekmarchitomekmarchi
committed
Random ASCII Art Test
Change encode/decode return
1 parent 330a413 commit e534db9

File tree

3 files changed

+155
-29
lines changed

3 files changed

+155
-29
lines changed

‎serverApp/compileUML.js‎

Lines changed: 94 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,119 @@
1+
import { currentPath, isArray, isString } from '@universalweb/acid';
12
import { decode, encode } from '#utilities/serialize';
23
import { parse, parseFragment } from 'parse5';
3-
// EXPERIMENTAL
4+
import { read } from '#utilities/file';
5+
import zlib from 'zlib';
6+
const dirname = currentPath(import.meta);
7+
// EXPERIMENTAL CONVERT HTML STRING TO COMPRESSED UML THEN COMPARE
48
function htmlToJson(node, index) {
5-
console.log(node, index);
6-
if (node.length) {
9+
let tagName = node.tagName;
10+
if (isArray(node) && node.length) {
711
return node.map(htmlToJson);
812
}
913
if (node.nodeName === '#text') {
10-
return node.value.trim() ? node.value : null;
14+
if (node.value.trim()) {
15+
return node.value;
16+
}
17+
return;
18+
}
19+
if (node.nodeName === '#documentType') {
20+
return [`!DOCTYPE ${node.name}`];
21+
}
22+
if (node.nodeName === '#document-fragment') {
23+
// console.log('Document-fragment', node);
24+
return htmlToJson(node.childNodes);
25+
}
26+
if (node.nodeName === '#document') {
27+
// console.log('Document', node);
28+
return htmlToJson(node.childNodes);
1129
}
1230
if (!node.tagName && node.childNodes?.length) {
31+
// console.log(node.nodeName, node.tagName);
1332
return htmlToJson(node.childNodes);
1433
}
15-
const tagName = node.tagName;
1634
const attributes = {};
1735
if (node.attrs) {
36+
if (node.attrs.id) {
37+
tagName += `#${node.attrs.id}`;
38+
}
39+
if (node.attrs.class) {
40+
tagName += `.${node.attrs.class}`;
41+
}
42+
if (node.attrs.length) {
43+
tagName += ` `;
44+
}
1845
for (const attr of node.attrs) {
19-
attributes[attr.name] = attr.value;
46+
if (attr.name === 'class' || attr.name === 'id') {
47+
continue;
48+
}
49+
tagName += `${attr.name}="${attr.value}" `;
2050
}
51+
// tagName = tagName.trim();
2152
}
2253
const children = (node.childNodes || [])
2354
.map(htmlToJson)
2455
.filter((child) => {
25-
return child !== null;
26-
}); // Remove null entries
27-
return [
28-
tagName, Object.keys(attributes).length ? attributes : undefined, children.length ? children : undefined
29-
].filter((x) => {
56+
if (child !== null && child !== undefined) {
57+
return child;
58+
}
59+
return false;
60+
}).filter((x) => {
61+
return x !== undefined;
62+
});
63+
const result = [];
64+
if (tagName) {
65+
result[0] = tagName;
66+
if (children.length) {
67+
result.push(...children);
68+
}
69+
} else if (children.length) {
70+
result.push(...children);
71+
}
72+
return result.filter((x) => {
3073
return x !== undefined;
3174
});
3275
}
76+
async function unWrap(source) {
77+
return source;
78+
}
3379
async function convertHtmlToMsgPack(html) {
34-
const doc = await parseFragment(html);
35-
console.log(doc.childNodes);
36-
const jsonStructure = await htmlToJson(doc.childNodes);
37-
console.dir(jsonStructure, {
38-
depth: null,
39-
colors: true
40-
});
41-
// return encode(jsonStructure);
80+
const doc = await parse(html);
81+
// console.log(doc);
82+
const jsonStructure = await htmlToJson(doc);
83+
if (jsonStructure) {
84+
const unWrapped = await unWrap(jsonStructure);
85+
return unWrapped;
86+
}
4287
}
4388
// Example HTML
44-
const htmlContent = `<div id="container"><h1>Hello</h1><p class="text">World</p></div>`;
89+
const htmlFile = await read(`${dirname}/resources/randomData.html`);
90+
const htmlContent = htmlFile.toString('utf8');
4591
// Convert and encode
46-
const packedData = await convertHtmlToMsgPack(htmlContent);
47-
// console.log('MessagePack Buffer:', packedData);
48-
// console.log('MessagePack length:', packedData.length, Buffer.from(htmlContent, 'utf8').length);
49-
console.dir(decode(packedData), {
50-
depth: null,
51-
colors: true
52-
});
92+
const packedDataStructure = await convertHtmlToMsgPack(htmlContent);
93+
// console.dir(packedDataStructure, {
94+
// depth: null,
95+
// colors: true
96+
// });
97+
const packedData = encode(packedDataStructure);
98+
console.log('UML uncompressed size:', packedData.length);
99+
console.log('RAW HTML SIZE', htmlFile.length);
100+
const compressedString = zlib.brotliCompressSync(htmlFile);
101+
// zlib.brotliDecompressSync(compressedString).toString()
102+
console.log('compressedString', compressedString.length);
103+
const dictionary = Buffer.from('');
104+
const compressOptions = {
105+
level: 9,
106+
memLevel: 9,
107+
windowBits: 15,
108+
dictionary
109+
};
110+
const compressedUML = zlib.brotliCompressSync(packedData);
111+
const decompress = zlib.brotliDecompressSync(compressedUML);
112+
const decoded = decode(decompress);
113+
console.log('compressedUML', compressedUML.length, decompress.length);
114+
// console.log(zlib.gzipSync(packedData, compressOptions).length);
115+
// console.log(decoded[1]);
116+
// console.dir(decode(packedData), {
117+
// depth: null,
118+
// colors: true
119+
// });

‎serverApp/resources/randomData.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Compression Test</title>
8+
<style>
9+
.random-class {
10+
color: red;
11+
font-size: 14px;
12+
}
13+
14+
#unique-id {
15+
background: blue;
16+
padding: 10px;
17+
}
18+
19+
</style>
20+
</head>
21+
22+
<body>
23+
<header>
24+
<h1 class="random-class" data-value="123">Test Page</h1>
25+
<nav>
26+
<ul>
27+
<li><a href="#" rel="nofollow">Home</a></li>
28+
<li><a href="#about" target="_blank">About</a></li>
29+
<li><a href="#contact" aria-label="Contact">Contact</a></li>
30+
</ul>
31+
</nav>
32+
</header>
33+
<main>
34+
<section id="intro" class="content-section">
35+
<p style="text-align: center;" data-info="xyz">This is a test paragraph with some random <span style="font-weight: bold;">inline text</span>.</p>
36+
<img src="random.jpg" alt="Random Image" width="300" height="200">
37+
</section>
38+
<section id="features">
39+
<article>
40+
<h2>Feature 1</h2>
41+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
42+
</article>
43+
<article>
44+
<h2>Feature 2</h2>
45+
<p>Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
46+
</article>
47+
</section>
48+
</main>
49+
<footer>
50+
<p>&copy; 2025 Compression Test. <a href="terms.html">Terms of Service</a></p>
51+
</footer>
52+
<script>
53+
document.addEventListener('DOMContentLoaded',function() {
54+
console.log("Page Loaded");
55+
});
56+
</script>
57+
</body>
58+
59+
</html>

‎utilities/serialize.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export function decode(data) {
1212
return decodeRaw(data);
1313
} catch (error) {
1414
// console.error(error);
15-
return false;
15+
return;
1616
}
1717
}
1818
export function encode(data) {
@@ -23,6 +23,6 @@ export function encode(data) {
2323
return encodeRaw(data);
2424
} catch (error) {
2525
// console.error(error);
26-
return false;
26+
return;
2727
}
2828
}

0 commit comments

Comments
 (0)