Skip to content

Commit bc0e148

Browse files
JerryWu1234JerryWu1234
authored
feat: display all variable name (#45)
1 parent 290452b commit bc0e148

File tree

30 files changed

+2627
-623
lines changed

30 files changed

+2627
-623
lines changed

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,13 @@
1010
"release": "changeset version"
1111
},
1212
"devDependencies": {
13-
"tsx": "^4.19.2",
14-
"@types/node": "^22.10.5",
1513
"@changesets/cli": "^2.27.11",
1614
"@changesets/get-github-info": "^0.6.0",
1715
"@changesets/types": "^6.0.0",
18-
"tsdown": "^0.9.6"
16+
"@types/node": "^22.10.5",
17+
"tsdown": "^0.9.6",
18+
"tsx": "^4.19.2",
19+
"vitest": "^3.2.4"
1920
},
2021
"private": false,
2122
"keywords": [

‎packages/kit/src/constants.ts‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,74 @@
11
export const DEVTOOLS_VITE_MESSAGING_EVENT = 'qwik_tools:vite_messaging_event';
2+
export const USE_HOOK_LIST = [
3+
'useAsyncComputed',
4+
'useComputed',
5+
'useConstant',
6+
'useContext',
7+
'useContextProvider',
8+
'useErrorBoundary',
9+
'useId',
10+
'useOn',
11+
'useOnDocument',
12+
'useOnWindow',
13+
'useResource',
14+
'useSerializer',
15+
'useServerData',
16+
'useSignal',
17+
'useStore',
18+
'useStyles',
19+
'useStylesScoped',
20+
'useTask',
21+
'useVisibleTask',
22+
'useLocation',
23+
'useNavigate',
24+
'usePreventNavigate',
25+
'useContent',
26+
'useDocumentHead',
27+
] as const
28+
29+
30+
export const VARIABLE_DECLARATION_LIST = [
31+
'useStore',
32+
'useSignal',
33+
'useComputed',
34+
'useAsyncComputed',
35+
'useContext',
36+
'useId',
37+
'useStyles',
38+
'useStylesScoped',
39+
'useConstant',
40+
'useErrorBoundary',
41+
'useSerializer',
42+
'useServerData',
43+
'useLocation',
44+
'useNavigate',
45+
'useContent',
46+
'useDocumentHead',
47+
] as const
48+
49+
50+
export const EXPRESSION_STATEMENT_LIST = [
51+
'useVisibleTask',
52+
'useTask',
53+
'useResource',
54+
'useContextProvider',
55+
'usePreventNavigate',
56+
] as const
57+
58+
export const QSEQ = 'q:seq';
59+
export const QPROPS = 'q:props';
60+
export const QRENDERFN = 'q:renderFn';
61+
export const QTYPE = 'q:type';
62+
63+
export const VIRTUAL_QWIK_DEVTOOLS_KEY = 'virtual-qwik-devtools.ts';
64+
65+
export const INNER_USE_HOOK= 'useCollectHooks'
66+
67+
export const QWIK_DEVTOOLS_GLOBAL_STATE = 'QWIK_DEVTOOLS_GLOBAL_STATE'
68+
69+
export const QRL_KEY = '$qrl$';
70+
export const COMPUTED_QRL_KEY = '$computeQrl$';
71+
export const CHUNK_KEY = '$chunk$';
72+
export const CAPTURE_REF_KEY = '$captureRef$';
73+
74+
export const NORETURN_HOOK = [ 'useVisibleTask', 'useTask'] as const

‎packages/kit/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ export * from './client';
22
export * from './server';
33
export * from './context';
44
export * from './types';
5+
export * from './constants';

‎packages/kit/src/types.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { BirpcReturn } from 'birpc';
22
import { type Dree } from 'dree';
3+
import { VARIABLE_DECLARATION_LIST, EXPRESSION_STATEMENT_LIST } from './constants';
34
export { Type as RouteType } from 'dree';
45

56
export interface ClientFunctions {
@@ -21,6 +22,7 @@ export interface ServerFunctions {
2122
modules: any;
2223
error?: string;
2324
}[]>;
25+
parseQwikCode: (code: string) => Promise<Omit<ParsedStructure, '__start__'>[]>;
2426
}
2527

2628
export type ServerRpc = BirpcReturn<ClientFunctions, ServerFunctions>;
@@ -62,3 +64,18 @@ export interface Component {
6264
fileName: string;
6365
file: string;
6466
}
67+
68+
export type Category = 'variableDeclaration' | 'expressionStatement' | 'listener'
69+
export type HookType =
70+
| (typeof VARIABLE_DECLARATION_LIST)[number]
71+
| (typeof EXPRESSION_STATEMENT_LIST)[number]
72+
| 'customhook'
73+
74+
export interface ParsedStructure {
75+
variableName: string
76+
hookType: HookType
77+
category: Category
78+
__start__?: number
79+
data?: any
80+
}
81+

‎packages/playgrounds/src/components/Button/Button.tsx‎

Lines changed: 83 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,31 +14,53 @@ import {
1414
useStyles$,
1515
useStylesScoped$,
1616
createContextId,
17-
Resource
17+
Resource,
18+
useAsyncComputed$,
19+
useSerializer$,
20+
useConstant,
21+
useOn,
22+
useServerData,
23+
useErrorBoundary,
1824
} from '@qwik.dev/core';
1925
import { _getDomContainer, isServer, useVisibleTask$ } from '@qwik.dev/core/internal';
20-
import type { QRL } from '@qwik.dev/core';
21-
26+
import type { QRL, Signal } from '@qwik.dev/core';
27+
import { useLocation, useNavigate, Link, useContent, useDocumentHead } from '@qwik.dev/router';
28+
import { useDebouncer } from './debounce';
2229
const ButtonContext = createContextId<{ theme: string; size: string }>('button-context');
2330

2431
interface ButtonProps {
2532
class?: string;
2633
onClick$?: QRL<() => void>;
34+
testValue: Signal<string>;
2735
}
2836

29-
export default component$<ButtonProps>(({ class: className = '', onClick$ }) => {
30-
37+
export default component$<ButtonProps>((props) => {
38+
const { class: className = '', onClick$ } = props;
39+
const testValue2 = props.testValue
40+
console.log('testValue', testValue2)
3141
const store = useStore({
3242
count: 0,
43+
dd:12,
44+
cc: 33,
45+
aa: [1,2,3 ]
3346
});
34-
const signal = useSignal('111');
47+
const signal = useSignal<any>('111');
48+
const constantValue = useConstant(() => 'CONST');
49+
const serverData = useServerData<any>('demo-key');
50+
const errorBoundary = useErrorBoundary();
51+
const location = useLocation();
52+
const navigate = useNavigate();
53+
const content = useContent();
54+
const head = useDocumentHead();
55+
3556

3657

3758
useTask$(({ track }) => {
3859
track(() => store.count);
3960
signal.value = '33333'
4061
})
4162

63+
// eslint-disable-next-line qwik/no-use-visible-task
4264
useVisibleTask$(({ track }) => {
4365
track(() => store.count);
4466
signal.value = '2227'
@@ -57,14 +79,15 @@ export default component$<ButtonProps>(({ class: className = '', onClick$ }) =>
5779
}
5880
});
5981

60-
const asyncComputedValue = useComputed$(() => {
61-
return `Async computed: ${store.count}`;
62-
});
63-
82+
const asyncComputedValue = useAsyncComputed$(({ track }) =>
83+
Promise.resolve(track(signal) + 3),
84+
);
85+
6486
useContextProvider(ButtonContext, {
6587
theme: 'primary',
6688
size: 'large'
6789
});
90+
6891
const context = useContext(ButtonContext);
6992

7093
const buttonId = useId();
@@ -77,6 +100,10 @@ export default component$<ButtonProps>(({ class: className = '', onClick$ }) =>
77100
console.log('Window resized');
78101
}));
79102

103+
useOn('click', $(() => {
104+
console.log('Host clicked');
105+
}));
106+
80107
const resourceData = useResource$(async ({ track }) => {
81108
track(() => store.count);
82109
await new Promise(resolve => setTimeout(resolve, 200));
@@ -86,6 +113,14 @@ export default component$<ButtonProps>(({ class: className = '', onClick$ }) =>
86113
};
87114
});
88115

116+
const customSerialized = useSerializer$(() => ({
117+
deserialize: () => ({ n: store.count }),
118+
update: (current: { n: number }) => {
119+
current.n = store.count;
120+
return current;
121+
}
122+
}));
123+
89124
useStyles$(`
90125
.custom-button {
91126
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
@@ -111,30 +146,65 @@ export default component$<ButtonProps>(({ class: className = '', onClick$ }) =>
111146
cursor: pointer;
112147
}
113148
`);
149+
const debounce = useDebouncer(
150+
$((value: string) => {
151+
signal.value = value;
152+
}),
153+
1000
154+
);
155+
156+
useDebouncer($((value: string) => {
157+
signal.value = value;
158+
}),
159+
1000)
114160

115161
const handleClick = $(async () => {
116162
store.count++;
117163
console.log('Button clicked! Count:', store.count);
118-
164+
debounce(store.count)
119165
if (onClick$) {
120166
await onClick$();
121167
}
122168
});
123169

170+
const handleGoAbout = $(() => navigate('/about'));
171+
124172
return (
125173
<div>
126174
<button
127175
id={buttonId}
128176
class={`${className} custom-button scoped-button`}
129177
onClick$={handleClick}
130178
>
131-
Click me {store.count}{signal.value}{qwikContainer?.value?.qManifestHash}
179+
Click me {store.count}{signal.value}{qwikContainer.value?.qManifestHash}
180+
</button>
181+
<button
182+
class={`custom-button scoped-button`}
183+
style="margin-left: 8px"
184+
onClick$={handleGoAbout}
185+
>
186+
Go /about
132187
</button>
188+
<Link href="/blog" class={`scoped-button`} style="margin-left: 8px; padding: 8px 16px; display: inline-block; text-decoration: none;">
189+
Go /blog
190+
</Link>
133191

134192
<div style="margin-top: 10px; font-size: 12px; color: #666;">
193+
<div>Current Path: {location.url.pathname}</div>
194+
<div>Is Navigating: {location.isNavigating ? 'true' : 'false'}</div>
195+
<div>Params: {JSON.stringify(location.params)}</div>
196+
<div>Prev URL: {location.prevUrl ? location.prevUrl.pathname : '—'}</div>
197+
<div>Head Title: {head.title}</div>
198+
<div>Head Metas: {head.meta.length}</div>
199+
<div>Content Menu: {content.menu ? 'yes' : 'no'}</div>
200+
<div>Content Headings: {content.headings ? content.headings.length : 0}</div>
135201
<div>Async Computed: {asyncComputedValue.value}</div>
136-
<div>Context: {context?.theme} - {context?.size}</div>
202+
<div>Context: {context.theme} - {context.size}</div>
137203
<div>Button ID: {buttonId}</div>
204+
<div>Constant: {constantValue}</div>
205+
{errorBoundary.error && <div>Error captured</div>}
206+
<div>ServerData: {serverData ? JSON.stringify(serverData) : 'N/A'}</div>
207+
<div>Serialized N: {customSerialized.value.n}</div>
138208
<Resource
139209
value={resourceData}
140210
onPending={() => <div>Loading resource...</div>}

‎packages/playgrounds/src/components/Button/debounce.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { QRL, useSignal, $, useTask$ } from "@qwik.dev/core";
2+
3+
export const useDebouncer = (fn: QRL<(args: any) => void>, delay: number) => {
4+
const timeoutId = useSignal<number>(11);
5+
const timeout = useSignal<number>(11);
6+
useTask$(({ track }) => {
7+
track(() => timeout.value);
8+
9+
})
10+
return $((args: any) => {
11+
clearTimeout(timeoutId.value);
12+
console.log('timeout', timeout.value);
13+
timeoutId.value = Number(setTimeout(() => fn(args), delay));
14+
});
15+
};
16+
17+
// export const useDebouncer = implicit$FirstArg(useDebouncerx);

‎packages/playgrounds/src/components/ExportCom.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { component$, useSignal } from "@qwik.dev/core";
2+
3+
export const ExportCom = component$(() => {
4+
const signal = useSignal(0);
5+
return <div>11{signal.value}</div>;
6+
});
7+
8+
9+
export const ExportCom2 = component$(() => {
10+
const signal = useSignal(1);
11+
return <div>11{signal.value}</div>;
12+
});

‎packages/playgrounds/src/components/test-com.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { component$, useSignal } from "@qwik.dev/core";
2+
3+
export default component$(() => {
4+
const signal = useSignal(1);
5+
return <div>11{signal.value}</div>;
6+
});

‎packages/playgrounds/src/routes/index.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
1-
import { Link, type DocumentHead } from '@qwik.dev/router';
2-
import { component$, useSignal } from '@qwik.dev/core';
1+
import { Link, routeLoader$, type DocumentHead } from '@qwik.dev/router';
2+
import { component$, useSignal} from '@qwik.dev/core';
33
import Button from '../components/Button/Button';
44
import Text from '../components/Text/Text';
5-
export default component$(() => {
5+
import { ExportCom, ExportCom2 } from '../components/ExportCom';
6+
import ExportCom3 from '../components/test-com';
7+
export const useGetTime = routeLoader$(async () => {
8+
return { time: new Date() }
9+
});
10+
export default component$( () => {
611
const count = useSignal(0);
7-
12+
const signal = useGetTime();
13+
const testValue = useSignal('111');
814
return (
915
<>
10-
<h1>Hi 👋</h1>
16+
<h1>Hi 👋{signal.value.time.toLocaleTimeString()}</h1>
17+
<ExportCom />
18+
<ExportCom2 />
1119
<div>
1220
<Text />
1321
</div>
@@ -18,7 +26,9 @@ export default component$(() => {
1826
<div>
1927
<Link href="/blog">Blog</Link>
2028
</div>
21-
<Button data-testid="button" class='bg-red-500' onClick$={() => {
29+
30+
<ExportCom3 />
31+
<Button testValue={testValue} data-testid="button" class='bg-red-500' onClick$={() => {
2232
console.log('Button clicked! Count:', count.value);
2333
}}/>
2434
</>

0 commit comments

Comments
 (0)