diff --git a/packages/docs/src/routes/examples/apps/partial/hackernews-index/app.tsx b/packages/docs/src/routes/examples/apps/partial/hackernews-index/app.tsx index 8dfc8e7ddc9..7c938f6a5dc 100644 --- a/packages/docs/src/routes/examples/apps/partial/hackernews-index/app.tsx +++ b/packages/docs/src/routes/examples/apps/partial/hackernews-index/app.tsx @@ -1,22 +1,22 @@ -import { component$, useTask$, useStore, useStyles$ } from '@builder.io/qwik'; +import { component$, useTask$, useSignal, useStyles$ } from '@builder.io/qwik'; import { isServer } from '@builder.io/qwik'; import HackerNewsCSS from './hacker-news.css?inline'; export const HackerNews = component$(() => { useStyles$(HackerNewsCSS); - const store = useStore({ data: null }); + const data = useSignal(); useTask$(async () => { if (isServer) { const response = await fetch('https://node-hnapi.herokuapp.com/news?page=0'); - store.data = await response.json(); + data.value = await response.json(); } }); return (
); }); @@ -50,10 +50,9 @@ export const Nav = component$(() => { ); }); -export const Stories = component$<{ data: any }>((props) => { +export const Stories = component$<{ stories?: IStory[] }>(({ stories }) => { const page = 1; const type = 'list'; - const stories = props.data; return (
diff --git a/packages/docs/src/routes/examples/apps/reactivity/counter/app.tsx b/packages/docs/src/routes/examples/apps/reactivity/counter/app.tsx index b6a6eb39d3d..9c0a714e6c2 100644 --- a/packages/docs/src/routes/examples/apps/reactivity/counter/app.tsx +++ b/packages/docs/src/routes/examples/apps/reactivity/counter/app.tsx @@ -1,13 +1,13 @@ -import { component$, useStore } from '@builder.io/qwik'; +import { component$, useSignal } from '@builder.io/qwik'; export default component$(() => { - const store = useStore({ count: 0 }); + const count = useSignal(0); return (
-

Count: {store.count}

+

Count: {count.value}

- +

); diff --git a/packages/docs/src/routes/examples/apps/reactivity/task/app.tsx b/packages/docs/src/routes/examples/apps/reactivity/task/app.tsx index fc90e1a1c54..ede8ce4e7a4 100644 --- a/packages/docs/src/routes/examples/apps/reactivity/task/app.tsx +++ b/packages/docs/src/routes/examples/apps/reactivity/task/app.tsx @@ -1,23 +1,16 @@ -import { component$, useTask$, useStore } from '@builder.io/qwik'; - -interface State { - count: number; - debounced: number; -} +import { component$, useTask$, useSignal } from '@builder.io/qwik'; export default component$(() => { - const store = useStore({ - count: 0, - debounced: 0, - }); + const count = useSignal(0); + const debounced = useSignal(0); useTask$(({ track }) => { - // track changes in store.count - track(() => store.count); + // track changes in count + const value = track(count); console.log('count changed'); const timer = setTimeout(() => { - store.debounced = store.count; + debounced.value = value; }, 2000); return () => { clearTimeout(timer); @@ -27,25 +20,25 @@ export default component$(() => { console.log(' renders'); return (
- -
); }); -export const Child = component$((props: { state: State }) => { +export const Child = component$((props: { count: number; debounced: number }) => { console.log(' render'); return (
-
{props.state.count}
- +
{props.count}
+
); }); -export const GrandChild = component$((props: { state: State }) => { +export const GrandChild = component$((props: { debounced: number }) => { console.log(' render'); - return
Debounced: {props.state.debounced}
; + return
Debounced: {props.debounced}
; }); diff --git a/packages/qwik/src/core/render/ssr/render-ssr.ts b/packages/qwik/src/core/render/ssr/render-ssr.ts index 06ca202b6a2..8e3bf69d6bf 100644 --- a/packages/qwik/src/core/render/ssr/render-ssr.ts +++ b/packages/qwik/src/core/render/ssr/render-ssr.ts @@ -459,8 +459,11 @@ const renderSSRComponent = ( listeners.push(...elCtx.li); elCtx.$flags$ &= ~HOST_FLAG_NEED_ATTACH_LISTENER; placeholderCtx.$id$ = getNextIndex(rCtx); + /** + * This is a placeholder for qwik attributes when the component does not have a DOM + * element. We keep it empty, so it can be a script tag without type. + */ const attributes: Record = { - type: 'placeholder', hidden: '', 'q:id': placeholderCtx.$id$, }; diff --git a/packages/qwik/src/core/render/ssr/render-ssr.unit.tsx b/packages/qwik/src/core/render/ssr/render-ssr.unit.tsx index 1fd47bc1472..5d917734163 100644 --- a/packages/qwik/src/core/render/ssr/render-ssr.unit.tsx +++ b/packages/qwik/src/core/render/ssr/render-ssr.unit.tsx @@ -1229,7 +1229,7 @@ test('component useBrowserVisibleTask() without elements', async () => { Hola - + @@ -1248,7 +1248,7 @@ test('component useBrowserVisibleTask() inside ', async () => { Hola - +