Skip to content

Commit 2cc2ab4

Browse files
JerryWu1234JerryWu1234
authored
Merge branch 'QwikDev:main' into main
2 parents dfb0860 + ab8a429 commit 2cc2ab4

File tree

24 files changed

+499
-298
lines changed

24 files changed

+499
-298
lines changed

‎packages/playgrounds/.eslintrc.cjs‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,37 @@ module.exports = {
66
node: true,
77
},
88
extends: [
9-
"eslint:recommended",
10-
"plugin:@typescript-eslint/recommended",
11-
"plugin:qwik/recommended",
9+
'eslint:recommended',
10+
'plugin:@typescript-eslint/recommended',
11+
'plugin:qwik/recommended',
1212
],
13-
parser: "@typescript-eslint/parser",
13+
parser: '@typescript-eslint/parser',
1414
parserOptions: {
1515
tsconfigRootDir: __dirname,
16-
project: ["./tsconfig.json"],
16+
project: ['./tsconfig.json'],
1717
ecmaVersion: 2021,
18-
sourceType: "module",
18+
sourceType: 'module',
1919
ecmaFeatures: {
2020
jsx: true,
2121
},
2222
},
23-
plugins: ["@typescript-eslint"],
23+
plugins: ['@typescript-eslint'],
2424
rules: {
25-
"@typescript-eslint/no-explicit-any": "off",
26-
"@typescript-eslint/explicit-module-boundary-types": "off",
27-
"@typescript-eslint/no-inferrable-types": "off",
28-
"@typescript-eslint/no-non-null-assertion": "off",
29-
"@typescript-eslint/no-empty-interface": "off",
30-
"@typescript-eslint/no-namespace": "off",
31-
"@typescript-eslint/no-empty-function": "off",
32-
"@typescript-eslint/no-this-alias": "off",
33-
"@typescript-eslint/ban-types": "off",
34-
"@typescript-eslint/ban-ts-comment": "off",
35-
"prefer-spread": "off",
36-
"no-case-declarations": "off",
37-
"no-console": "off",
38-
"@typescript-eslint/no-unused-vars": ["error"],
39-
"@typescript-eslint/consistent-type-imports": "warn",
40-
"@typescript-eslint/no-unnecessary-condition": "warn",
25+
'@typescript-eslint/no-explicit-any': 'off',
26+
'@typescript-eslint/explicit-module-boundary-types': 'off',
27+
'@typescript-eslint/no-inferrable-types': 'off',
28+
'@typescript-eslint/no-non-null-assertion': 'off',
29+
'@typescript-eslint/no-empty-interface': 'off',
30+
'@typescript-eslint/no-namespace': 'off',
31+
'@typescript-eslint/no-empty-function': 'off',
32+
'@typescript-eslint/no-this-alias': 'off',
33+
'@typescript-eslint/ban-types': 'off',
34+
'@typescript-eslint/ban-ts-comment': 'off',
35+
'prefer-spread': 'off',
36+
'no-case-declarations': 'off',
37+
'no-console': 'off',
38+
'@typescript-eslint/no-unused-vars': ['error'],
39+
'@typescript-eslint/consistent-type-imports': 'warn',
40+
'@typescript-eslint/no-unnecessary-condition': 'warn',
4141
},
4242
};

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

Lines changed: 86 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import {
2-
component$,
1+
import {
2+
component$,
33
useStore,
4-
useSignal,
5-
useTask$,
6-
useComputed$,
4+
useSignal,
5+
useTask$,
6+
useComputed$,
77
$,
88
useContext,
99
useContextProvider,
@@ -22,11 +22,23 @@ import {
2222
useServerData,
2323
useErrorBoundary,
2424
} from '@qwik.dev/core';
25-
import { _getDomContainer, isServer, useVisibleTask$ } from '@qwik.dev/core/internal';
25+
import {
26+
_getDomContainer,
27+
isServer,
28+
useVisibleTask$,
29+
} from '@qwik.dev/core/internal';
2630
import type { QRL, Signal } from '@qwik.dev/core';
27-
import { useLocation, useNavigate, Link, useContent, useDocumentHead } from '@qwik.dev/router';
31+
import {
32+
useLocation,
33+
useNavigate,
34+
Link,
35+
useContent,
36+
useDocumentHead,
37+
} from '@qwik.dev/router';
2838
import { useDebouncer } from './debounce';
29-
const ButtonContext = createContextId<{ theme: string; size: string }>('button-context');
39+
const ButtonContext = createContextId<{ theme: string; size: string }>(
40+
'button-context',
41+
);
3042

3143
interface ButtonProps {
3244
class?: string;
@@ -36,13 +48,13 @@ interface ButtonProps {
3648

3749
export default component$<ButtonProps>((props) => {
3850
const { class: className = '', onClick$ } = props;
39-
const testValue2 = props.testValue
40-
console.log('testValue', testValue2)
51+
const testValue2 = props.testValue;
52+
console.log('testValue', testValue2);
4153
const store = useStore({
4254
count: 0,
43-
dd:12,
55+
dd: 12,
4456
cc: 33,
45-
aa: [1,2,3 ]
57+
aa: [1, 2, 3],
4658
});
4759
const signal = useSignal<any>('111');
4860
const constantValue = useConstant(() => 'CONST');
@@ -53,23 +65,21 @@ export default component$<ButtonProps>((props) => {
5365
const content = useContent();
5466
const head = useDocumentHead();
5567

56-
57-
5868
useTask$(({ track }) => {
5969
track(() => store.count);
60-
signal.value = '33333'
61-
})
70+
signal.value = '33333';
71+
});
6272

6373
// eslint-disable-next-line qwik/no-use-visible-task
6474
useVisibleTask$(({ track }) => {
6575
track(() => store.count);
66-
signal.value = '2227'
67-
})
76+
signal.value = '2227';
77+
});
6878

6979
const qwikContainer = useComputed$(() => {
7080
try {
71-
if(isServer){
72-
return null
81+
if (isServer) {
82+
return null;
7383
}
7484
const htmlElement = document.documentElement;
7585
return _getDomContainer(htmlElement);
@@ -79,37 +89,46 @@ export default component$<ButtonProps>((props) => {
7989
}
8090
});
8191

82-
const asyncComputedValue = useAsyncComputed$(({ track }) =>
92+
const asyncComputedValue = useAsyncComputed$(({ track }) =>
8393
Promise.resolve(track(signal) + 3),
8494
);
85-
95+
8696
useContextProvider(ButtonContext, {
8797
theme: 'primary',
88-
size: 'large'
98+
size: 'large',
8999
});
90100

91101
const context = useContext(ButtonContext);
92102

93103
const buttonId = useId();
94104

95-
useOnDocument('keydown', $(() => {
96-
console.log('Document keydown event');
97-
}));
105+
useOnDocument(
106+
'keydown',
107+
$(() => {
108+
console.log('Document keydown event');
109+
}),
110+
);
98111

99-
useOnWindow('resize', $(() => {
100-
console.log('Window resized');
101-
}));
112+
useOnWindow(
113+
'resize',
114+
$(() => {
115+
console.log('Window resized');
116+
}),
117+
);
102118

103-
useOn('click', $(() => {
104-
console.log('Host clicked');
105-
}));
119+
useOn(
120+
'click',
121+
$(() => {
122+
console.log('Host clicked');
123+
}),
124+
);
106125

107126
const resourceData = useResource$(async ({ track }) => {
108127
track(() => store.count);
109-
await new Promise(resolve => setTimeout(resolve, 200));
128+
await new Promise((resolve) => setTimeout(resolve, 200));
110129
return {
111130
message: `Resource data for count: ${store.count}`,
112-
timestamp: Date.now()
131+
timestamp: Date.now(),
113132
};
114133
});
115134

@@ -118,7 +137,7 @@ export default component$<ButtonProps>((props) => {
118137
update: (current: { n: number }) => {
119138
current.n = store.count;
120139
return current;
121-
}
140+
},
122141
}));
123142

124143
useStyles$(`
@@ -150,18 +169,20 @@ export default component$<ButtonProps>((props) => {
150169
$((value: string) => {
151170
signal.value = value;
152171
}),
153-
1000
172+
1000,
173+
);
174+
175+
useDebouncer(
176+
$((value: string) => {
177+
signal.value = value;
178+
}),
179+
1000,
154180
);
155-
156-
useDebouncer($((value: string) => {
157-
signal.value = value;
158-
}),
159-
1000)
160181

161182
const handleClick = $(async () => {
162183
store.count++;
163184
console.log('Button clicked! Count:', store.count);
164-
debounce(store.count)
185+
debounce(store.count);
165186
if (onClick$) {
166187
await onClick$();
167188
}
@@ -171,35 +192,47 @@ export default component$<ButtonProps>((props) => {
171192

172193
return (
173194
<div>
174-
<button
195+
<button
175196
id={buttonId}
176197
class={`${className} custom-button scoped-button`}
177198
onClick$={handleClick}
178199
>
179-
Click me {store.count}{signal.value}{qwikContainer.value?.qManifestHash}
200+
Click me {store.count}
201+
{signal.value}
202+
{qwikContainer.value?.qManifestHash}
180203
</button>
181-
<button
204+
<button
182205
class={`custom-button scoped-button`}
183206
style="margin-left: 8px"
184207
onClick$={handleGoAbout}
185208
>
186209
Go /about
187210
</button>
188-
<Link href="/blog" class={`scoped-button`} style="margin-left: 8px; padding: 8px 16px; display: inline-block; text-decoration: none;">
211+
<Link
212+
href="/blog"
213+
class={`scoped-button`}
214+
style="margin-left: 8px; padding: 8px 16px; display: inline-block; text-decoration: none;"
215+
>
189216
Go /blog
190217
</Link>
191-
218+
192219
<div style="margin-top: 10px; font-size: 12px; color: #666;">
193220
<div>Current Path: {location.url.pathname}</div>
194221
<div>Is Navigating: {location.isNavigating ? 'true' : 'false'}</div>
195222
<div>Params: {JSON.stringify(location.params)}</div>
196-
<div>Prev URL: {location.prevUrl ? location.prevUrl.pathname : '—'}</div>
223+
<div>
224+
Prev URL: {location.prevUrl ? location.prevUrl.pathname : '—'}
225+
</div>
197226
<div>Head Title: {head.title}</div>
198227
<div>Head Metas: {head.meta.length}</div>
199228
<div>Content Menu: {content.menu ? 'yes' : 'no'}</div>
200-
<div>Content Headings: {content.headings ? content.headings.length : 0}</div>
229+
<div>
230+
Content Headings: {content.headings ? content.headings.length : 0}
231+
</div>
201232
<div>Async Computed: {asyncComputedValue.value}</div>
202-
<div>Context: {context.theme} - {context.size}</div>
233+
<div>
234+
Context: {context.theme} - {context.size}
235+
</div>
203236
<div>Button ID: {buttonId}</div>
204237
<div>Constant: {constantValue}</div>
205238
{errorBoundary.error && <div>Error captured</div>}
@@ -211,7 +244,9 @@ export default component$<ButtonProps>((props) => {
211244
onResolved={(data) => <div>Resource: {data.message}</div>}
212245
onRejected={(error) => <div>Error: {error.message}</div>}
213246
/>
214-
<div>Count: {store.count}, Signal: {signal.value}</div>
247+
<div>
248+
Count: {store.count}, Signal: {signal.value}
249+
</div>
215250
</div>
216251
</div>
217252
);

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1-
import { QRL, useSignal, $, useTask$ } from "@qwik.dev/core";
1+
import { QRL, useSignal, $, useTask$ } from '@qwik.dev/core';
22

33
export const useDebouncer = (fn: QRL<(args: any) => void>, delay: number) => {
44
const timeoutId = useSignal<number>(11);
55
const timeout = useSignal<number>(11);
66
useTask$(({ track }) => {
77
track(() => timeout.value);
8-
9-
})
8+
});
109
return $((args: any) => {
1110
clearTimeout(timeoutId.value);
1211
console.log('timeout', timeout.value);
1312
timeoutId.value = Number(setTimeout(() => fn(args), delay));
1413
});
1514
};
1615

17-
// export const useDebouncer = implicit$FirstArg(useDebouncerx);
16+
// export const useDebouncer = implicit$FirstArg(useDebouncerx);

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import { component$, useSignal } from "@qwik.dev/core";
1+
import { component$, useSignal } from '@qwik.dev/core';
22

33
export const ExportCom = component$(() => {
44
const signal = useSignal(0);
55
return <div>11{signal.value}</div>;
66
});
77

8-
98
export const ExportCom2 = component$(() => {
109
const signal = useSignal(1);
1110
return <div>11{signal.value}</div>;

‎packages/playgrounds/src/components/router-head/router-head.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { useDocumentHead, useLocation } from "@qwik.dev/router";
2-
import { component$ } from "@qwik.dev/core";
1+
import { useDocumentHead, useLocation } from '@qwik.dev/router';
2+
import { component$ } from '@qwik.dev/core';
33

44
/**
55
* The RouterHead component is placed inside of the document `<head>` element.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { component$, useSignal } from "@qwik.dev/core";
1+
import { component$, useSignal } from '@qwik.dev/core';
22

33
export default component$(() => {
44
const signal = useSignal(1);

‎packages/playgrounds/src/entry.dev.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
* - More code is transferred to the browser than in SSR mode.
1010
* - Optimizer/Serialization/Deserialization code is not exercised!
1111
*/
12-
import { render, type RenderOptions } from "@qwik.dev/core";
13-
import Root from "./root";
12+
import { render, type RenderOptions } from '@qwik.dev/core';
13+
import Root from './root';
1414

1515
export default function (opts: RenderOptions) {
1616
return render(document, <Root />, opts);

‎packages/playgrounds/src/entry.preview.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@
1010
* - https://vitejs.dev/config/preview-options.html#preview-options
1111
*
1212
*/
13-
import qwikRouterConfig from "@qwik-router-config";
14-
import { createQwikRouter } from "@qwik.dev/router/middleware/node";
13+
import qwikRouterConfig from '@qwik-router-config';
14+
import { createQwikRouter } from '@qwik.dev/router/middleware/node';
1515
// make sure qwikRouterConfig is imported before entry
16-
import render from "./entry.ssr";
16+
import render from './entry.ssr';
1717

1818
/**
1919
* The default export is the QwikRouter adapter used by Vite preview.

0 commit comments

Comments
 (0)