Skip to content

Commit 42619f9

Browse files
VarixoVarixo
committed
feat: update state and html parser
1 parent 301ea99 commit 42619f9

File tree

3 files changed

+70
-48
lines changed

3 files changed

+70
-48
lines changed

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

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { component$, useSignal, useComputed$, useStyles$ } from '@qwik.dev/core';
2-
import { CodeBlock } from '../../../../components/code-block/code-block';
32
import { _getDomContainer } from '@qwik.dev/core/internal';
43
import { _dumpState, _preprocessState, _vnode_toString } from '@qwik.dev/core/internal';
4+
import type { DocumentHead } from '@qwik.dev/router';
55

66
export default component$(() => {
77
useStyles$(`
@@ -141,7 +141,7 @@ export default component$(() => {
141141
<div>
142142
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">VNode Tree</h2>
143143
<p class="text-sm text-gray-600 dark:text-gray-300">
144-
Qwik container structure and parsed state
144+
Qwik container VNode tree structure
145145
</p>
146146
</div>
147147
</div>
@@ -170,11 +170,21 @@ export default component$(() => {
170170
</div>
171171
</div>
172172
<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" />
173+
<div class="rounded-xl border border-gray-200 dark:border-gray-600 text-sm shadow-inner bg-gray-900 p-4">
174+
<pre>{parsedHtml.value}</pre>
175175
</div>
176176
</div>
177177
</div>
178178
</div>
179179
);
180180
});
181+
182+
export const head: DocumentHead = {
183+
title: 'HTML Parser',
184+
meta: [
185+
{
186+
name: 'description',
187+
content: 'Parse HTML to Qwik VNode tree',
188+
},
189+
],
190+
};

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

Lines changed: 43 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -31,47 +31,49 @@ export default component$(() => {
3131
</div>
3232

3333
{/* Navigation Links */}
34-
<div class="flex space-x-1 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-1 shadow-lg border border-white/20 dark:border-gray-700 mb-8">
35-
<a
36-
href="/playground/parser/state"
37-
class={`flex-1 px-4 py-3 rounded-lg font-medium transition-all duration-200 ${
38-
selectedTab.value === 'state'
39-
? 'bg-blue-500 text-gray-900 shadow-md'
40-
: 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
41-
}`}
42-
>
43-
<span class="flex items-center gap-2">
44-
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
45-
<path
46-
stroke-linecap="round"
47-
stroke-linejoin="round"
48-
stroke-width="2"
49-
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
50-
/>
51-
</svg>
52-
State Parser
53-
</span>
54-
</a>
55-
<a
56-
href="/playground/parser/html"
57-
class={`flex-1 px-4 py-3 rounded-lg font-medium transition-all duration-200 ${
58-
selectedTab.value === 'html'
59-
? 'bg-green-500 text-gray-900 shadow-md'
60-
: 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
61-
}`}
62-
>
63-
<span class="flex items-center gap-2">
64-
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
65-
<path
66-
stroke-linecap="round"
67-
stroke-linejoin="round"
68-
stroke-width="2"
69-
d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
70-
/>
71-
</svg>
72-
HTML Parser
73-
</span>
74-
</a>
34+
<div class="flex justify-center mb-8">
35+
<div class="gap-1 inline-flex space-x-0.5 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl p-0.5 shadow-lg border border-white/20 dark:border-gray-700">
36+
<a
37+
href="/playground/parser/state"
38+
class={`px-2 py-2 rounded-lg font-medium text-sm transition-all duration-200 ${
39+
selectedTab.value === 'state'
40+
? 'bg-blue-500 text-gray-900 shadow-md'
41+
: 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
42+
}`}
43+
>
44+
<span class="flex items-center gap-1.5">
45+
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
46+
<path
47+
stroke-linecap="round"
48+
stroke-linejoin="round"
49+
stroke-width="2"
50+
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
51+
/>
52+
</svg>
53+
State Parser
54+
</span>
55+
</a>
56+
<a
57+
href="/playground/parser/html"
58+
class={`px-2 py-2 rounded-lg font-medium text-sm transition-all duration-200 ${
59+
selectedTab.value === 'html'
60+
? 'bg-green-500 text-gray-900 shadow-md'
61+
: 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
62+
}`}
63+
>
64+
<span class="flex items-center gap-1.5">
65+
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
66+
<path
67+
stroke-linecap="round"
68+
stroke-linejoin="round"
69+
stroke-width="2"
70+
d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
71+
/>
72+
</svg>
73+
HTML Parser
74+
</span>
75+
</a>
76+
</div>
7577
</div>
7678

7779
{/* Content Area */}

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { component$, useSignal, useComputed$, useStyles$ } from '@qwik.dev/core';
22
import { _dumpState, _preprocessState } from '@qwik.dev/core/internal';
3-
import { CodeBlock } from '../../../../components/code-block/code-block';
3+
import type { DocumentHead } from '@qwik.dev/router';
44

55
export default component$(() => {
66
useStyles$(`
@@ -185,11 +185,21 @@ export default component$(() => {
185185
</div>
186186
</div>
187187
<div class="p-6 flex-1 code-output-container">
188-
<div class="rounded-xl border border-gray-200 dark:border-gray-600 text-sm shadow-inner bg-gray-900">
189-
<CodeBlock code={parsedState.value} language="clike" />
188+
<div class="rounded-xl border border-gray-200 dark:border-gray-600 text-sm shadow-inner bg-gray-900 p-4">
189+
<pre>{parsedState.value}</pre>
190190
</div>
191191
</div>
192192
</div>
193193
</div>
194194
);
195195
});
196+
197+
export const head: DocumentHead = {
198+
title: 'State Parser',
199+
meta: [
200+
{
201+
name: 'description',
202+
content: 'Parse Qwik state data',
203+
},
204+
],
205+
};

0 commit comments

Comments
 (0)