Skip to content

Commit 2294d44

Browse files
VarixoVarixo
committed
feat(docs): add state parser
1 parent af205e2 commit 2294d44

File tree

1 file changed

+188
-0
lines changed
  • packages/docs/src/routes/playground/parser

1 file changed

+188
-0
lines changed

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

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
import { component$, useSignal, useComputed$ } from '@qwik.dev/core';
2+
import { _dumpState, _preprocessState } from '@qwik.dev/core/internal';
3+
import { CodeBlock } from '../../../components/code-block/code-block';
4+
5+
export default component$(() => {
6+
const inputState = useSignal('');
7+
8+
const parsedState = useComputed$(() => {
9+
if (!inputState.value.trim()) {
10+
return '// Parsed state will appear here after you paste data in the left panel';
11+
}
12+
13+
try {
14+
// Try to parse the input as Qwik state
15+
const stateData = JSON.parse(inputState.value);
16+
17+
// Create a simple container for state processing
18+
const container = {
19+
$getObjectById$: (id: number | string) => id,
20+
element: null,
21+
getSyncFn: (id: number) => () => {},
22+
$storeProxyMap$: new WeakMap(),
23+
$forwardRefs$: null,
24+
$initialQRLsIndexes$: null,
25+
$scheduler$: null,
26+
};
27+
28+
// Preprocess the state for Qwik
29+
_preprocessState(stateData, container as any);
30+
31+
// Dump the state in a readable format
32+
const dumpedState = _dumpState(stateData, false, '', null);
33+
34+
return dumpedState;
35+
} catch (error) {
36+
// If parsing fails, try to clean the input and retry
37+
try {
38+
// Remove any script tags and extract content
39+
const cleanInput = inputState.value
40+
.replace(/<script[^>]*>/gi, '')
41+
.replace(/<\/script>/gi, '')
42+
.trim();
43+
44+
if (cleanInput) {
45+
const stateData = JSON.parse(cleanInput);
46+
const container = {
47+
$getObjectById$: (id: number | string) => id,
48+
element: null,
49+
getSyncFn: (id: number) => () => {},
50+
$storeProxyMap$: new WeakMap(),
51+
$forwardRefs$: null,
52+
$initialQRLsIndexes$: null,
53+
$scheduler$: null,
54+
};
55+
_preprocessState(stateData, container as any);
56+
const dumpedState = _dumpState(stateData, false, '', null);
57+
return dumpedState;
58+
}
59+
} catch (secondError) {
60+
return `// Error parsing state: ${error instanceof Error ? error.message : 'Invalid state format'}\n\n// Raw input:\n${inputState.value}`;
61+
}
62+
}
63+
64+
return '// Unable to parse the provided state';
65+
});
66+
67+
return (
68+
<div class="min-h-screen p-4 bg-gradient-to-br from-slate-50 to-blue-50 dark:from-gray-900 dark:to-slate-800">
69+
<div class="max-w-7xl mx-auto">
70+
{/* Header with improved styling */}
71+
<div class="text-center mb-8">
72+
<div class="inline-flex items-center gap-3 mb-4">
73+
<div class="w-12 h-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl flex items-center justify-center">
74+
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
75+
<path
76+
stroke-linecap="round"
77+
stroke-linejoin="round"
78+
stroke-width="2"
79+
d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
80+
/>
81+
</svg>
82+
</div>
83+
<h1 class="text-4xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300 bg-clip-text text-transparent">
84+
State Parser
85+
</h1>
86+
</div>
87+
<p class="max-w-2xl mx-auto text-lg text-gray-600 dark:text-gray-300">
88+
Transform your Qwik state data into beautifully formatted and syntax-highlighted output
89+
</p>
90+
</div>
91+
92+
{/* Main Content with improved layout */}
93+
<div class="grid grid-cols-1 xl:grid-cols-2 gap-8 h-[calc(100vh-280px)]">
94+
{/* Left Column - Input with enhanced styling */}
95+
<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">
96+
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 px-6 py-4 border-b border-blue-100 dark:border-gray-600">
97+
<div class="flex items-center gap-3">
98+
<div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
99+
<svg
100+
class="w-4 h-4 text-white"
101+
fill="none"
102+
stroke="currentColor"
103+
viewBox="0 0 24 24"
104+
>
105+
<path
106+
stroke-linecap="round"
107+
stroke-linejoin="round"
108+
stroke-width="2"
109+
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"
110+
/>
111+
</svg>
112+
</div>
113+
<div>
114+
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Input State</h2>
115+
<p class="text-sm text-gray-600 dark:text-gray-300">Paste your Qwik state data</p>
116+
</div>
117+
</div>
118+
</div>
119+
<div class="p-6 flex-1 flex flex-col">
120+
<textarea
121+
bind:value={inputState}
122+
placeholder="Paste your state here..."
123+
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-blue-500 focus:border-blue-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"
124+
spellcheck={false}
125+
/>
126+
</div>
127+
</div>
128+
129+
{/* Right Column - Output with enhanced styling */}
130+
<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">
131+
<div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-gray-700 dark:to-gray-600 px-6 py-4 border-b border-green-100 dark:border-gray-600">
132+
<div class="flex items-center gap-3">
133+
<div class="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center">
134+
<svg
135+
class="w-4 h-4 text-white"
136+
fill="none"
137+
stroke="currentColor"
138+
viewBox="0 0 24 24"
139+
>
140+
<path
141+
stroke-linecap="round"
142+
stroke-linejoin="round"
143+
stroke-width="2"
144+
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
145+
/>
146+
</svg>
147+
</div>
148+
<div>
149+
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Parsed State</h2>
150+
<p class="text-sm text-gray-600 dark:text-gray-300">
151+
Formatted and syntax-highlighted output
152+
</p>
153+
</div>
154+
</div>
155+
</div>
156+
<div class="p-6 flex-1 overflow-auto">
157+
<div class="rounded-xl overflow-hidden border border-gray-200 dark:border-gray-600 text-sm max-w-full shadow-inner bg-gray-900">
158+
<CodeBlock code={parsedState.value} language="clike" />
159+
</div>
160+
</div>
161+
</div>
162+
</div>
163+
164+
{/* Enhanced Footer */}
165+
<div class="mt-8 text-center">
166+
<div class="inline-flex items-center gap-2 px-4 py-2 bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm rounded-full border border-white/20 dark:border-gray-600">
167+
<svg
168+
class="w-4 h-4 text-blue-500"
169+
fill="none"
170+
stroke="currentColor"
171+
viewBox="0 0 24 24"
172+
>
173+
<path
174+
stroke-linecap="round"
175+
stroke-linejoin="round"
176+
stroke-width="2"
177+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
178+
/>
179+
</svg>
180+
<p class="text-sm text-gray-600 dark:text-gray-300">
181+
Perfect for debugging Qwik applications and analyzing state structure
182+
</p>
183+
</div>
184+
</div>
185+
</div>
186+
</div>
187+
);
188+
});

0 commit comments

Comments
 (0)