Merge pull request #7962 from QwikDev/small-things

use signals in the playground examples, and a possible fix for old safari mobile clients

Author: wmertens

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<IStory[]>();
 
   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 (
     <div class="hacker-news">
       <Nav />
-      <Stories data={store.data} />
+      <Stories stories={data.value} />
     </div>
   );
 });
@@ -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 (
     <main class="news-view">
       <section class="news-list-nav">

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 (
     <main>
-      <p>Count: {store.count}</p>
+      <p>Count: {count.value}</p>
       <p>
-        <button onClick$={() => store.count++}>Click</button>
+        <button onClick$={() => count.value++}>Click</button>
       </p>
     </main>
   );

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<State>({
-    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('<App> renders');
   return (
     <div>
-      <Child state={store} />
-      <button id="add" onClick$={() => store.count++}>
+      <Child count={count.value} debounced={debounced.value} />
+      <button id="add" onClick$={() => count.value++}>
         +
       </button>
     </div>
   );
 });
 
-export const Child = component$((props: { state: State }) => {
+export const Child = component$((props: { count: number; debounced: number }) => {
   console.log('<Child> render');
   return (
     <div>
-      <div id="child">{props.state.count}</div>
-      <GrandChild state={props.state} />
+      <div id="child">{props.count}</div>
+      <GrandChild debounced={props.debounced} />
     </div>
   );
 });
 
-export const GrandChild = component$((props: { state: State }) => {
+export const GrandChild = component$((props: { debounced: number }) => {
   console.log('<GrandChild> render');
-  return <div id="debounced">Debounced: {props.state.debounced}</div>;
+  return <div id="debounced">Debounced: {props.debounced}</div>;
 });

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<string, string> = {
-            type: 'placeholder',
             hidden: '',
             'q:id': placeholderCtx.$id$,
           };

packages/qwik/src/core/render/ssr/render-ssr.unit.tsx

@@ -1229,7 +1229,7 @@ test('component useBrowserVisibleTask() without elements', async () => {
       <body>
         <!--qv q:id=0 q:key=sX:-->
         Hola
-        <script type="placeholder" hidden q:id="1" on-document:qinit="/runtimeQRL#_[0]\n/runtimeQRL#_[1]"></script>
+        <script hidden q:id="1" on-document:qinit="/runtimeQRL#_[0]\n/runtimeQRL#_[1]"></script>
         <!--/qv-->
       </body>
     </html>
@@ -1248,7 +1248,7 @@ test('component useBrowserVisibleTask() inside <head>', async () => {
       <head q:head>
         <!--qv q:id=0 q:key=sX:-->
         Hola
-        <script type="placeholder" hidden q:id="1" on-document:qinit="/runtimeQRL#_[0]\n/runtimeQRL#_[1]"></script>
+        <script hidden q:id="1" on-document:qinit="/runtimeQRL#_[0]\n/runtimeQRL#_[1]"></script>
         <!--/qv-->
         <!--qv q:id=2 q:key=sX:-->
         <style on-document:qinit="/runtimeQRL#_[0]\n/runtimeQRL#_[1]" q:id="3" q:head></style>