Skip to content

Commit 301ea99

Browse files
VarixoVarixo
committed
feat(docs): add html parser
1 parent 2294d44 commit 301ea99

File tree

5 files changed

+486
-188
lines changed

5 files changed

+486
-188
lines changed

‎packages/docs/src/routes/playground/parser/html/index.tsx

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
import { component$, useSignal, useComputed$, useStyles$ } from '@qwik.dev/core';
2+
import { CodeBlock } from '../../../../components/code-block/code-block';
3+
import { _getDomContainer } from '@qwik.dev/core/internal';
4+
import { _dumpState, _preprocessState, _vnode_toString } from '@qwik.dev/core/internal';
5+
6+
export default component$(() => {
7+
useStyles$(`
8+
pre {
9+
background: none !important;
10+
}
11+
12+
/* Ensure code block can scroll horizontally */
13+
.code-output-container {
14+
overflow-x: auto;
15+
overflow-y: auto;
16+
}
17+
18+
.code-output-container > div {
19+
width: fit-content;
20+
min-width: 100%;
21+
}
22+
23+
.code-output-container pre[class*='language-'] {
24+
margin: 0;
25+
min-width: max-content;
26+
}
27+
`);
28+
29+
const inputHtml = useSignal('');
30+
const parsingTime = useSignal<number | null>(null);
31+
32+
const parsedHtml = useComputed$(() => {
33+
if (!inputHtml.value.trim()) {
34+
parsingTime.value = null;
35+
return '// VNode tree will appear here after you paste HTML in the left panel';
36+
}
37+
38+
const startTime = performance.now();
39+
40+
try {
41+
// Use DOMParser for basic HTML parsing
42+
const parser = new DOMParser();
43+
const doc = parser.parseFromString(inputHtml.value, 'text/html');
44+
45+
let output = '';
46+
47+
// Try to get Qwik container if available
48+
try {
49+
const container = _getDomContainer(doc.documentElement);
50+
if (container) {
51+
output += '// Qwik Container Found:\n';
52+
output += `- Container Type: ${container.qContainer}\n`;
53+
output += `- Manifest Hash: ${container.qManifestHash}\n\n`;
54+
55+
// Try to get VNode tree first
56+
try {
57+
const vdomTree = _vnode_toString.call(
58+
container!.rootVNode as any,
59+
Number.MAX_SAFE_INTEGER,
60+
'',
61+
true,
62+
false,
63+
false
64+
);
65+
output += '// VNode Tree:\n' + vdomTree + '\n\n';
66+
} catch (vnodeErr) {
67+
output += '// VNode parsing error: ' + vnodeErr + '\n\n';
68+
}
69+
} else {
70+
output = '// No Qwik container found in the HTML';
71+
}
72+
} catch (containerErr) {
73+
output = '// No Qwik container found or error: ' + containerErr;
74+
}
75+
76+
parsingTime.value = performance.now() - startTime;
77+
return output;
78+
} catch (error) {
79+
parsingTime.value = performance.now() - startTime;
80+
return `// Error parsing HTML: ${error instanceof Error ? error.message : 'Invalid HTML format'}\n\n// Raw input:\n${inputHtml.value}`;
81+
}
82+
});
83+
84+
return (
85+
<div class="grid grid-cols-1 xl:grid-cols-2 gap-8 h-[calc(100vh-400px)]">
86+
{/* Left Column - Input with enhanced styling */}
87+
<div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl shadow-xl border border-white/20 dark:border-gray-700 overflow-hidden flex flex-col">
88+
<div class="bg-gradient-to-r from-green-50 to-teal-50 dark:from-gray-700 dark:to-gray-600 px-6 py-4 border-b border-green-100 dark:border-gray-600">
89+
<div class="flex items-center gap-3">
90+
<div class="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center">
91+
<svg
92+
class="w-4 h-4 text-gray-900"
93+
fill="none"
94+
stroke="currentColor"
95+
viewBox="0 0 24 24"
96+
>
97+
<path
98+
stroke-linecap="round"
99+
stroke-linejoin="round"
100+
stroke-width="2"
101+
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
102+
/>
103+
</svg>
104+
</div>
105+
<div>
106+
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Input HTML</h2>
107+
<p class="text-sm text-gray-600 dark:text-gray-300">Paste your HTML code</p>
108+
</div>
109+
</div>
110+
</div>
111+
<div class="p-6 flex-1 flex flex-col">
112+
<textarea
113+
bind:value={inputHtml}
114+
placeholder="Paste your HTML here..."
115+
class="w-full flex-1 p-4 text-sm font-mono bg-gray-50/50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500 resize-none transition-all duration-200 placeholder:text-gray-600 dark:placeholder:text-gray-400 placeholder:opacity-100 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-900 dark:text-white"
116+
spellcheck={false}
117+
/>
118+
</div>
119+
</div>
120+
121+
{/* Right Column - Output with enhanced styling */}
122+
<div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl shadow-xl border border-white/20 dark:border-gray-700 overflow-hidden flex flex-col">
123+
<div class="bg-gradient-to-r from-teal-50 to-cyan-50 dark:from-gray-700 dark:to-gray-600 px-6 py-4 border-b border-teal-100 dark:border-gray-600">
124+
<div class="flex items-center justify-between">
125+
<div class="flex items-center gap-3">
126+
<div class="w-8 h-8 bg-teal-500 rounded-lg flex items-center justify-center">
127+
<svg
128+
class="w-4 h-4 text-gray-900"
129+
fill="none"
130+
stroke="currentColor"
131+
viewBox="0 0 24 24"
132+
>
133+
<path
134+
stroke-linecap="round"
135+
stroke-linejoin="round"
136+
stroke-width="2"
137+
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
138+
/>
139+
</svg>
140+
</div>
141+
<div>
142+
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">VNode Tree</h2>
143+
<p class="text-sm text-gray-600 dark:text-gray-300">
144+
Qwik container structure and parsed state
145+
</p>
146+
</div>
147+
</div>
148+
{parsingTime.value !== null && (
149+
<div class="flex items-center gap-2 px-3 py-1 bg-teal-100 dark:bg-teal-900/30 rounded-lg">
150+
<svg
151+
class="w-4 h-4 text-teal-600 dark:text-teal-400"
152+
fill="none"
153+
stroke="currentColor"
154+
viewBox="0 0 24 24"
155+
>
156+
<path
157+
stroke-linecap="round"
158+
stroke-linejoin="round"
159+
stroke-width="2"
160+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
161+
/>
162+
</svg>
163+
<span class="text-sm font-medium text-teal-700 dark:text-teal-300">
164+
{parsingTime.value < 1
165+
? `${(parsingTime.value * 1000).toFixed(0)}μs`
166+
: `${parsingTime.value.toFixed(2)}ms`}
167+
</span>
168+
</div>
169+
)}
170+
</div>
171+
</div>
172+
<div class="p-6 flex-1 code-output-container">
173+
<div class="rounded-xl border border-gray-200 dark:border-gray-600 text-sm shadow-inner bg-gray-900">
174+
<CodeBlock code={parsedHtml.value} language="markup" />
175+
</div>
176+
</div>
177+
</div>
178+
</div>
179+
);
180+
});

‎packages/docs/src/routes/playground/parser/index.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import type { RequestHandler } from '@qwik.dev/router';
2+
3+
export const onRequest: RequestHandler = ({ redirect }) => {
4+
throw redirect(308, '/playground/parser/state');
5+
};

‎packages/docs/src/routes/playground/parser/index.tsx

Lines changed: 0 additions & 188 deletions
This file was deleted.

0 commit comments

Comments
 (0)