Skip to content

Commit 26cd767

Browse files
committed
chore(docs examples): prefer signals
1 parent d1b2642 commit 26cd767

File tree

3 files changed

+22
-30
lines changed

3 files changed

+22
-30
lines changed

packages/docs/src/routes/examples/apps/partial/hackernews-index/app.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
import { component$, useTask$, useStore, useStyles$ } from '@builder.io/qwik';
1+
import { component$, useTask$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import { isServer } from '@builder.io/qwik';
33
import HackerNewsCSS from './hacker-news.css?inline';
44

55
export const HackerNews = component$(() => {
66
useStyles$(HackerNewsCSS);
7-
const store = useStore({ data: null });
7+
const data = useSignal<IStory[]>();
88

99
useTask$(async () => {
1010
if (isServer) {
1111
const response = await fetch('https://node-hnapi.herokuapp.com/news?page=0');
12-
store.data = await response.json();
12+
data.value = await response.json();
1313
}
1414
});
1515

1616
return (
1717
<div class="hacker-news">
1818
<Nav />
19-
<Stories data={store.data} />
19+
<Stories stories={data.value} />
2020
</div>
2121
);
2222
});
@@ -50,10 +50,9 @@ export const Nav = component$(() => {
5050
);
5151
});
5252

53-
export const Stories = component$<{ data: any }>((props) => {
53+
export const Stories = component$<{ stories?: IStory[] }>(({ stories }) => {
5454
const page = 1;
5555
const type = 'list';
56-
const stories = props.data;
5756
return (
5857
<main class="news-view">
5958
<section class="news-list-nav">

packages/docs/src/routes/examples/apps/reactivity/counter/app.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { component$, useStore } from '@builder.io/qwik';
1+
import { component$, useSignal } from '@builder.io/qwik';
22

33
export default component$(() => {
4-
const store = useStore({ count: 0 });
4+
const count = useSignal(0);
55

66
return (
77
<main>
8-
<p>Count: {store.count}</p>
8+
<p>Count: {count.value}</p>
99
<p>
10-
<button onClick$={() => store.count++}>Click</button>
10+
<button onClick$={() => count.value++}>Click</button>
1111
</p>
1212
</main>
1313
);
Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,16 @@
1-
import { component$, useTask$, useStore } from '@builder.io/qwik';
2-
3-
interface State {
4-
count: number;
5-
debounced: number;
6-
}
1+
import { component$, useTask$, useSignal } from '@builder.io/qwik';
72

83
export default component$(() => {
9-
const store = useStore<State>({
10-
count: 0,
11-
debounced: 0,
12-
});
4+
const count = useSignal(0);
5+
const debounced = useSignal(0);
136

147
useTask$(({ track }) => {
15-
// track changes in store.count
16-
track(() => store.count);
8+
// track changes in count
9+
const value = track(count);
1710
console.log('count changed');
1811

1912
const timer = setTimeout(() => {
20-
store.debounced = store.count;
13+
debounced.value = value;
2114
}, 2000);
2215
return () => {
2316
clearTimeout(timer);
@@ -27,25 +20,25 @@ export default component$(() => {
2720
console.log('<App> renders');
2821
return (
2922
<div>
30-
<Child state={store} />
31-
<button id="add" onClick$={() => store.count++}>
23+
<Child count={count.value} debounced={debounced.value} />
24+
<button id="add" onClick$={() => count.value++}>
3225
+
3326
</button>
3427
</div>
3528
);
3629
});
3730

38-
export const Child = component$((props: { state: State }) => {
31+
export const Child = component$((props: { count: number; debounced: number }) => {
3932
console.log('<Child> render');
4033
return (
4134
<div>
42-
<div id="child">{props.state.count}</div>
43-
<GrandChild state={props.state} />
35+
<div id="child">{props.count}</div>
36+
<GrandChild debounced={props.debounced} />
4437
</div>
4538
);
4639
});
4740

48-
export const GrandChild = component$((props: { state: State }) => {
41+
export const GrandChild = component$((props: { debounced: number }) => {
4942
console.log('<GrandChild> render');
50-
return <div id="debounced">Debounced: {props.state.debounced}</div>;
43+
return <div id="debounced">Debounced: {props.debounced}</div>;
5144
});

0 commit comments

Comments
 (0)