Skip to content

Commit 6964cf9

Browse files
wmertenswmertens
committed
fix(repl): address comments
1 parent ee426e8 commit 6964cf9

File tree

3 files changed

+70
-38
lines changed

3 files changed

+70
-38
lines changed

‎packages/docs/src/repl/repl-output-panel.tsx

Lines changed: 59 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,67 @@
11
import { component$, useComputed$ } from '@qwik.dev/core';
22
import { CodeBlock } from '../components/code-block/code-block';
33
import { ReplOutputModules } from './repl-output-modules';
4-
import { ReplOutputSegments } from './repl-output-segments.tsx';
4+
import { ReplOutputSegments } from './repl-output-segments';
55
import { ReplTabButton } from './repl-tab-button';
66
import { ReplTabButtons } from './repl-tab-buttons';
77
import type { ReplAppInput, ReplStore } from './types';
88
import { _deserialize, _getDomContainer } from '@qwik.dev/core/internal';
9-
import { dumpState, preprocessState } from '../../../qwik/src/core/shared/shared-serialization.ts';
10-
import { vnode_toString } from '../../../qwik/src/core/client/vnode.ts';
9+
import { dumpState, preprocessState } from '../../../qwik/src/core/shared/shared-serialization';
10+
import { vnode_toString } from '../../../qwik/src/core/client/vnode';
1111

1212
export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProps) => {
1313
const diagnosticsLen = useComputed$(
1414
() => store.diagnostics.length + store.monacoDiagnostics.length
1515
);
1616

1717
const domContainerFromResultHtml = useComputed$(() => {
18-
const parser = new DOMParser();
19-
const doc = parser.parseFromString(store.htmlResult.rawHtml, 'text/html');
20-
return _getDomContainer(doc.documentElement);
18+
try {
19+
const parser = new DOMParser();
20+
const doc = parser.parseFromString(store.htmlResult.rawHtml, 'text/html');
21+
return _getDomContainer(doc.documentElement);
22+
} catch (err) {
23+
console.error(err);
24+
return null;
25+
}
2126
});
2227

2328
const parsedState = useComputed$(() => {
24-
const container = domContainerFromResultHtml.value;
25-
const doc = container.element;
26-
const qwikStates = doc.querySelectorAll('script[type="qwik/state"]');
27-
if (qwikStates.length !== 0) {
28-
const data = qwikStates[qwikStates.length - 1];
29-
const origState = JSON.parse(data?.textContent || '[]');
30-
preprocessState(origState, container as any);
31-
return origState
32-
? dumpState(origState, false, '', null)
33-
//remove first new line
34-
.replace(/\n/, '')
35-
: 'No state found';
29+
try {
30+
const container = domContainerFromResultHtml.value;
31+
const doc = container!.element;
32+
const qwikStates = doc.querySelectorAll('script[type="qwik/state"]');
33+
if (qwikStates.length !== 0) {
34+
const data = qwikStates[qwikStates.length - 1];
35+
const origState = JSON.parse(data?.textContent || '[]');
36+
preprocessState(origState, container as any);
37+
return origState
38+
? dumpState(origState, false, '', null)
39+
//remove first new line
40+
.replace(/\n/, '')
41+
: 'No state found';
42+
}
43+
return 'No state found';
44+
} catch (err) {
45+
console.error(err);
46+
return null;
3647
}
37-
return 'No state found';
3848
});
3949

4050
const vdomTree = useComputed$(() => {
41-
const container = domContainerFromResultHtml.value;
42-
return vnode_toString.call(
43-
container.rootVNode as any,
44-
Number.MAX_SAFE_INTEGER,
45-
'',
46-
true,
47-
false,
48-
false
49-
);
51+
try {
52+
const container = domContainerFromResultHtml.value;
53+
return vnode_toString.call(
54+
container!.rootVNode as any,
55+
Number.MAX_SAFE_INTEGER,
56+
'',
57+
true,
58+
false,
59+
false
60+
);
61+
} catch (err) {
62+
console.error(err);
63+
return null;
64+
}
5065
});
5166

5267
return (
@@ -144,16 +159,23 @@ export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProp
144159
<div class="output-result output-html flex flex-col gap-2">
145160
<div>
146161
<span class="code-block-info">HTML</span>
147-
<CodeBlock language="markup" code={store.htmlResult.prettyHtml} />
148-
</div>
149-
<div>
150-
<span class="code-block-info">Parsed State</span>
151-
<CodeBlock language="clike" code={parsedState.value} />
152-
</div>
153-
<div>
154-
<span class="code-block-info">VNode Tree</span>
155-
<CodeBlock language="markup" code={vdomTree.value} />
162+
<CodeBlock
163+
language="markup"
164+
code={store.htmlResult.prettyHtml || store.htmlResult.rawHtml}
165+
/>
156166
</div>
167+
{parsedState.value ? (
168+
<div>
169+
<span class="code-block-info">Parsed State</span>
170+
<CodeBlock language="clike" code={parsedState.value} />
171+
</div>
172+
) : null}
173+
{vdomTree.value ? (
174+
<div>
175+
<span class="code-block-info">VNode Tree</span>
176+
<CodeBlock language="markup" code={vdomTree.value} />
177+
</div>
178+
) : null}
157179
</div>
158180
) : null}
159181

‎packages/docs/src/repl/repl-output-segments.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,16 @@ export const ReplOutputSegments = component$(({ outputs }: ReplOutputSegmentsPro
4242
<div class="file-item" data-symbol-item={i} key={o.path}>
4343
<div class="file-info">
4444
<span>{o.segment!.canonicalFilename}</span>
45+
{o.segment!.paramNames && (
46+
<div>
47+
Params: <code>{o.segment!.paramNames.join(', ')}</code>
48+
</div>
49+
)}
50+
{o.segment!.captureNames && (
51+
<div>
52+
Captures: <code>{o.segment!.captureNames.join(', ')}</code>
53+
</div>
54+
)}
4555
</div>
4656
<div class="file-text">
4757
<CodeBlock

‎packages/qwik/src/core/client/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export interface QDocument extends Document {
6969
* converted into separate text nodes.
7070
* - If Element: It means that the element tag attributes have not yet been read from the DOM.
7171
*
72-
* Inflation and materialization are not the same, they are two independent things.-
72+
* Inflation and materialization are not the same, they are two independent things.
7373
*
7474
* @internal
7575
*/

0 commit comments

Comments
 (0)