|
| 1 | +import { component$, useSignal, useComputed$, useStyles$ } from '@qwik.dev/core'; |
| 2 | +import { _getDomContainer } from '@qwik.dev/core/internal'; |
| 3 | +import { _dumpState, _preprocessState, _vnode_toString } from '@qwik.dev/core/internal'; |
| 4 | +import type { DocumentHead } from '@qwik.dev/router'; |
| 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 VNode tree structure |
| 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 p-4"> |
| 174 | + <pre>{parsedHtml.value}</pre> |
| 175 | + </div> |
| 176 | + </div> |
| 177 | + </div> |
| 178 | + </div> |
| 179 | + ); |
| 180 | +}); |
| 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 | +}; |
0 commit comments