Merge pull request #791 from Lemoncode/qwik-review

JaimeSalas · web-flow · commit 87e85723e070 · 2024-12-08T12:34:33.000+01:00
Qwik review
diff --git a/04-frameworks/06-web-components/01-custom-element/readme.md b/04-frameworks/06-web-components/01-custom-element/readme.md
@@ -160,3 +160,15 @@ If we inspect the developer tools we're able to see inside `search-bar`, the new
   background-color: #c7d0f8;
 }
 ```
+
+Update `index.html`
+
+```diff
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Web Components</title>
++ <link rel="stylesheet" href="style.css">
+</head>
+```
diff --git a/04-frameworks/06-web-components/03-custom-element-with-events/readme.md b/04-frameworks/06-web-components/03-custom-element-with-events/readme.md
@@ -37,7 +37,7 @@ class SearchBar extends HTMLElement {
     container.appendChild(iconContainer);
     this.appendChild(container);
     /*diff*/
-    this.dispacthMyEvent();
+    this.dispatchMyEvent();
     /*diff*/
   }
 
@@ -48,7 +48,7 @@ class SearchBar extends HTMLElement {
     return placeholder;
   }
   /*diff*/
-  dispacthMyEvent() {
+  dispatchMyEvent() {
     const myEvent = eventFact("myEvent", {
       bubbles: true, // [1]
       cancelable: false, // [2]
diff --git a/04-frameworks/06-web-components/05-shadow-root/readme.md b/04-frameworks/06-web-components/05-shadow-root/readme.md
@@ -1,6 +1,8 @@
 # Shadow Root
 
-An important aspect of custom elements is encapsulation, because a custom element, by definition, is a piece of reusable functionality: it might be dropped into any web page and be expected to work. So it's important that code running in the page should not be able to accidentally break a custom element by modifying its internal implementation. Shadow DOM enables you to attach a DOM tree to an element, and have the internals of this tree hidden from JavaScript and CSS running in the page.
+An important aspect of custom elements is encapsulation, because a custom element, by definition, is a piece of reusable functionality: it might be dropped into any web page and be expected to work. So it's important that code running in the page should not be able to accidentally break a custom element by modifying its internal implementation. 
+
+`Shadow DOM` enables you to attach a DOM tree to an element, and have the internals of this tree hidden from JavaScript and CSS running in the page.
 
 ## Step by step
 
diff --git a/04-frameworks/06-web-components/07-custom-element-extended/readme.md b/04-frameworks/06-web-components/07-custom-element-extended/readme.md
@@ -24,6 +24,23 @@ In order to make it work, we need to update `customElements.define` arguments:
 +customElements.define("search-bar", SearchBar, { extends: "div" });
 ```
 
+If we run our code now, we will notice that the error has gone. But the `search-bar` component, is not rendering. Well since we are exteding from `HTMLDivElement` we must refer as a `div` instead a custom element. For this purpose we can use the `is` attribute:
+
+Update `index.html`
+
+```diff
+  <body style="font-family: Arial, Helvetica, sans-serif">
+    <h1>Web Componentes</h1>
+    <p>Custom Element</p>
+
+    <search-bar id="searchbar" ph="buscar..."></search-bar>
++   <div is="search-bar"></div>
+    <script type="module" src="searchbar.js"></script>
+    <script type="module" src="main.js"></script>
+  </body>
+```
+
 ## Reference
 
-- https://dev.to/danieldekel/extending-native-elements-4h31
+- [Extending Native Elements](https://dev.to/danieldekel/extending-native-elements-4h31)
+- [Registering a custom element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#registering_a_custom_element)
diff --git a/04-frameworks/06-web-components/08-life-cycle/readme.md b/04-frameworks/06-web-components/08-life-cycle/readme.md
@@ -6,13 +6,13 @@ The DOM manipulation is something that we will align to `lifecycle callbacks`
 
 ## connectedCallback
 
-The connectedCallback method is run whenever your element gets attached to the document, either by the HTML parser or by any JavaScript that appends it to a parent element. This is where you probably want to put most of your actual setup code, but be aware that `connectedCallback` can be run multiple times if your element is moved around.
+The `connectedCallback` method is run whenever your element gets attached to the document, either by the HTML parser or by any JavaScript that appends it to a parent element. This is where you probably want to put most of your actual setup code, but be aware that `connectedCallback` can be run multiple times if your element is moved around.
 
 Set up for HTML template and events.
 
 ## disconnectedCallback
 
-As the name implies, this method gets called when your element is disconnected from the document. It's a good place to put any cleanup code: removing observers or event listeners that might have been added in `connectedCallback()`. Don't assume that this will be called once for each connectedCallback(), either before or after.
+As the name implies, this method gets called when your element is disconnected from the document. It's a good place to put any cleanup code: removing observers or event listeners that might have been added in `connectedCallback()`. Don't assume that this will be called once for each `connectedCallback()`, either before or after.
 
 ## attributeChangedCallback
 
@@ -34,6 +34,20 @@ static get observedAttributes() {
 
 ### 1. Using `connectedCallback`
 
+Update `index.html`
+
+```diff
+  <body style="font-family: Arial, Helvetica, sans-serif">
+    <h1>Web Componentes</h1>
+    <p>Custom Element</p>
+
+    <search-bar id="searchbar" ph="buscar..."></search-bar>
+-   <div is="search-bar"></div>
+    <script type="module" src="searchbar.js"></script>
+    <script type="module" src="main.js"></script>
+  </body>
+```
+
 Update `searchbar.js`
 
 ```diff
diff --git a/04-frameworks/06-web-components/09-template-slot/readme.md b/04-frameworks/06-web-components/09-template-slot/readme.md
@@ -174,4 +174,4 @@ Update `index.html`
 
 ## References
 
-- https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots
+- [Using Templates and Slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots)
diff --git a/04-frameworks/06-web-components/10-shadow-root-styling/readme.md b/04-frameworks/06-web-components/10-shadow-root-styling/readme.md
@@ -182,4 +182,4 @@ We can notice that is not taking any effect since is used **OUTSIDE** the Shadow
 
 ## References
 
-- https://stackoverflow.com/questions/50999753/host-selector-not-working-for-custom-element-having-shadow-dom
+- [Host Selector not working Shadow DOM](https://stackoverflow.com/questions/50999753/host-selector-not-working-for-custom-element-having-shadow-dom) 
diff --git a/04-frameworks/10-solid/3-LSP.md b/04-frameworks/10-solid/3-LSP.md
@@ -141,7 +141,7 @@ Asumamos que nuestra clase base trabaja con una propiedad que es un int. Ahora,
 
 - Postconditions can not be weakened in a subclass.
 
-Asumamos el mismo escenario, pero en este caso la clase base garantiza que la propiedad sea positiva (no acepta números que no sean positivos en su setter). Y en este caso, la clase base sobreescribe el comportamiento del setter para que permita números negativos. Un código que use un getter de la propiedad asumiendo que siempre va a ser positivo (porque la clase base lo garantizaba) ahora estará roto debido a que se ha debilitado dicha restricción del getter.
+Asumamos el mismo escenario, pero en este caso la clase base garantiza que la propiedad sea positiva (no acepta números que no sean positivos en su setter). Y en este caso, la subclase sobreescribe el comportamiento del setter para que permita números negativos. Un código que use un getter de la propiedad asumiendo que siempre va a ser positivo (porque la clase base lo garantizaba) ahora estará roto debido a que se ha debilitado dicha restricción del getter.
 
 ## Ejemplo de precondiciones y postcondiciones
 
diff --git a/04-frameworks/14-qwik/02-components/readme.md b/04-frameworks/14-qwik/02-components/readme.md
@@ -4,7 +4,7 @@
 
 Components are declared using [component$()](https://qwik.builder.io/docs/components/overview/#component) and at a minimum need to return a JSX Element.
 
-The trailing `$` allows the `Optimizer` to break the components into an application tree into a separate chunk so that each chunk can be loaded (or not loaded if it is not needed) independently.**Without the $ the component would be always loaded if the parent component needs to be loaded.**
+The trailing `$` allows the `Optimizer` to break the components into an application tree into a separate chunk so that each chunk can be loaded (or not loaded if it is not needed) independently. **Without the `$` the component would be always loaded if the parent component needs to be loaded.**
 
 Update `qwik-app/src/routes/index.tsx`
 
diff --git a/04-frameworks/14-qwik/03-events/readme.md b/04-frameworks/14-qwik/03-events/readme.md
@@ -91,7 +91,7 @@ Consider the following simplified HTML of the application below.
    - The `$` is a signal to the optimizer to extract the code for lazy-loading.
    - The `$` is a signal to you that lazy-loading "magic" happens at this point.
    - TypeScript rules ensure you don't skip any places where the `$` should appear.
-2. The optimizer looks for the $ and extracts the function wrapped by $ into a separate [lazy-loadable chunk](https://qwik.builder.io/docs/advanced/optimizer/).
+2. The optimizer looks for the `$` and extracts the function wrapped by `$` into a separate [lazy-loadable chunk](https://qwik.builder.io/docs/advanced/optimizer/).
 3. As the server renders the page, the JSX is executed and notices that there is a click listener. The click listener is serialized into the `<button>` element as `on:click` attribute. Qwik then knows how to hook this event back up on the client.
 4. Qwikloader scripts get inlined into HTML. The Qwikloader script sets up a global listener for all events in the browser. Qwikloader is about 1kb and executes in about 1ms.
 5. When a user clicks on the button, the Qwikloader intercepts the event and looks for an element with `on:click` attribute.
@@ -163,7 +163,13 @@ export default component$(() => {
 });
 ```
 
-We can see the confirmation dialog and immediately navigates to `GiTHub`. e wish to prevent this and call our callback instead. Add `preventdefault:click` to the `<a href>` to achieve this.
+Let's run the app:
+
+```bash
+npm start
+```
+
+We can see the confirmation dialog and immediately navigates to `GitHub`. We wish to prevent this and call our callback instead. Add `preventdefault:click` to the `<a href>` to achieve this.
 
 Update `qwik-app/src/components/footer.component.tsx`
 
@@ -208,7 +214,7 @@ export const Footer = component$(() => {
       event.preventDefault();
       window.open("https://github.com/lemoncode");
     };
-    aHref.value!.addEventListener("click", handler);
+    aHref.value?.addEventListener("click", handler);
     cleanup(() => aHref.value!.removeEventListener("click", handler));
   });
   return (
@@ -226,7 +232,45 @@ Qwik warns us what is going on:
 
 ![warning](./resources/02-warning.png)
 
-Lets back to previous version just to remove the current warning:
+## `sync$()` Restriction (BETA)
+
+Although it stills in BETA, it's the recommended way to handle code synchrounisly. The main issue with `$sync`, **can NOT close over anything**. What are the implications of this?
+
+- access any state: The recommended way to get the state into function is to place on element attrbutes.
+- access any non-browser functions: No imports or closing over any variables or functions are allowed.
+- the function should be small as it will get inlined into the resulting HTML.
+
+Because above reasons the recomendation is to breaking up event handlers into two parts:
+
+1. **`sync$()`** The part which must be synchronous
+2. **`$()`** The part which can be asynchronous.
+
+Update `qwik-app/src/components/footer.component.tsx`
+
+```tsx
+import { component$, sync$, $ } from "@builder.io/qwik";
+
+export const Footer = component$(() => {
+  return (
+    <a
+      href="https://github.com/lemoncode"
+      onClick$={[
+        sync$((event: Event) => {
+          event.preventDefault();
+        }),
+        $(() => {
+          window.open("https://github.com/lemoncode");
+        }),
+      ]}
+    >
+      Go To Lemonland
+    </a>
+  );
+});
+
+```
+
+Sadly, seems to not to be working... Lets back to first version just to remove the warning and make it work:
 
 ```tsx
 import { component$ } from "@builder.io/qwik";
diff --git a/04-frameworks/14-qwik/04-lifecycle-hooks/01-usevisibletask.md b/04-frameworks/14-qwik/04-lifecycle-hooks/01-usevisibletask.md
@@ -101,13 +101,13 @@ import { Clock } from "~/components/clock";
 
 export default component$(() => {
   return (
-    <main style={{ backgroundColor: "black", color: "white" }}>
+    <main style={{ backgroundColor: "black", color: "white", fontFamily: 'sans-serif' }}>
       <p>
         This is an example of Lazy executing code on component when component
         becomes visible.
       </p>
 
-      <p style={{ height: "800px" }}>
+      <p style={{ height: "1200px" }}>
         ⬇️ <strong>Scroll down</strong> until the clock is in view.
       </p>
 
diff --git a/04-frameworks/14-qwik/04-lifecycle-hooks/02-usesignal.md b/04-frameworks/14-qwik/04-lifecycle-hooks/02-usesignal.md
@@ -1,36 +1,34 @@
 # useSignal
 
-We use `useSignal()` to store any single value. 
+We use `useSignal()` to store any single value.
 
-`useSignal` is heavily optimized when it comes to re-rendering components. It is able to skip re-renderings of parent components even when the signal itself is defined in the parent. `useSignal` works with all [primitive types](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) as well as with not nested / flat objects. 
+`useSignal` is heavily optimized when it comes to re-rendering components. It is able to skip re-renderings of parent components even when the signal itself is defined in the parent. `useSignal` works with all [primitive types](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) as well as with not nested / flat objects.
 
 > If you need to store arrays or complex objects use `useStore` instead.
 
 Some examples would be:
 
-Some examples would be:
-
 ```ts
 const intStore = useSignal(0);
-const stringStore = useSignal('foo');
+const stringStore = useSignal("foo");
 const booleanStore = useSignal(true);
-const objectStore = useSignal({fruit: 'apple', color: 'green'});
- 
+const objectStore = useSignal({ fruit: "apple", color: "green" });
+
 // DON'T DO THIS!
-const arrayStore = useSignal(['banana','oranges']);
+const arrayStore = useSignal(["banana", "oranges"]);
 const nestedObjectStore = useSignal({
   fruits: {
     banana: 10,
-    apple: 5
+    apple: 5,
   },
   vegetables: {
     tomato: 7,
-    broccoli: 14
-  }
+    broccoli: 14,
+  },
 });
 ```
 
-To read or update the values you can simply access the value property:
+To read or update the values you can simply access the _value_ property:
 
 ```tsx
 <>
@@ -83,7 +81,6 @@ export default component$(() => {
     </main>
   );
 });
-
 ```
 
 If we run the code now it's not going to work, because the reference is not assing to `aside`
@@ -93,4 +90,4 @@ If we run the code now it's not going to work, because the reference is not assi
 +<aside ref={outputRef} style={{ border: "1px solid red", width: "100px" }}>
   Change text value here to stretch the box.
 </aside>
-```
+```
diff --git a/04-frameworks/14-qwik/04-lifecycle-hooks/readme.md b/04-frameworks/14-qwik/04-lifecycle-hooks/readme.md
@@ -2,6 +2,6 @@
 
 Working with Qwik requires a new mental schema. Resumability makes that code runs first on server and paused and then gets resumed on client. We have APIs / methods to track the state, react to changes, run code on server, or force to run on client.
 
-- useTask$()
-- useVisibleTask$()
-- useSignal()
+- [useTask$()](https://qwik.dev/docs/components/tasks/#usetask)
+- [useVisibleTask$()](https://qwik.dev/docs/components/tasks/#usevisibletask)
+- [useSignal()](https://qwik.dev/docs/components/state/#usesignal)
diff --git a/04-frameworks/14-qwik/05-stores/readme.md b/04-frameworks/14-qwik/05-stores/readme.md
@@ -8,7 +8,7 @@ Qwik tracks application state for two reasons:
 
 2. To create subscriptions on stores so that Qwik knows which components to re-render. If Qwik didn't track subscriptions, it would have to re-render the whole application - which would defeat the purpose of lazy-loading.
 
-Create `qwik-app/src/routes/examples/stores/index.tsx`
+Create `qwik-app/src/routes/examples/stores/serialization/index.tsx`
 
 ```tsx
 import { component$ } from "@builder.io/qwik";
@@ -36,7 +36,7 @@ This component doesn't work yet because **counter is just a plain object with no
 
 Lets fix this. We will wrap counter in [useStore()](https://qwik.builder.io/docs/components/state/#usestore) to enable dependency tracking and automatic re-rendering.
 
-Update `qwik-app/src/routes/examples/stores/index.tsx`
+Update `qwik-app/src/routes/examples/stores/serialization/index.tsx`
 
 ```diff
 -import { component$ } from "@builder.io/qwik";
@@ -59,7 +59,7 @@ export default component$(() => {
 
 Open the HTML tab to see what information is serialized by the server. Look in the `<script type="qwik/json">` block for serialization information and notice that:
 
-1. {count: 0} is in the serialized state.
+1. `{count: 0}` is in the serialized state.
 2. At the end of the serialized state are subs which contain "count". These subscriptions tell Qwik which component to re-render as the state changes.
 
 ```html
@@ -197,7 +197,7 @@ Stores can also include [Qwik URLs (QRLs)](https://qwik.builder.io/docs/advanced
 
 There is no limit to how many stores can be created per component, nor to where they are passed. While the best practice is to implement top-down data flows, Qwik doesn't require this design philosophy.
 
-Update `qwik-app/src/routes/examples/stores/index.tsx`
+Update `qwik-app/src/routes/examples/stores/graph/index.tsx`
 
 ```tsx
 import { QRL, component$, useStore, $ } from "@builder.io/qwik";
@@ -245,7 +245,13 @@ export default component$(() => {
 
 ```
 
-Lets update the code to insert a new chidren each time we increment the coun.
+Lets see if it works:
+
+```bash
+npm start
+```
+
+Lets update the code to insert a new chidren each time we increment the count.
 
 ```diff
 <button
diff --git a/04-frameworks/14-qwik/06-reactivity/03-fetching-data.md b/04-frameworks/14-qwik/06-reactivity/03-fetching-data.md
@@ -112,7 +112,7 @@ export const head: DocumentHead = {
 
 ```
 
-1. Use useResource$() to set up how the data is fetched from the server.
+1. Use `useResource$()` to set up how the data is fetched from the server.
 2. We need a way to re-run fetching data whenever the `github.org` changes. Use `track` to trigger re-running of the this data fetching function.
 3. A good practice is to use `AbortController` to abort the fetching of data if new request comes in. We create a new `AbortController` and register a `cleanup` function which is called when this function re-runs.
 4. Fetch the data and return the promises.

Original file line number	Diff line number	Diff line change
@@ -174,4 +174,4 @@ Update `index.html`
`174`	`174`
`175`	`175`	`## References`
`176`	`176`
`177`		`-- https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots`
	`177`	`+- [Using Templates and Slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots)`
Original file line number	Diff line number	Diff line change
`@@ -182,4 +182,4 @@ We can notice that is not taking any effect since is used OUTSIDE the Shadow`
`182`	`182`
`183`	`183`	`## References`
`184`	`184`
`185`		`-- https://stackoverflow.com/questions/50999753/host-selector-not-working-for-custom-element-having-shadow-dom`
	`185`	`+- [Host Selector not working Shadow DOM](https://stackoverflow.com/questions/50999753/host-selector-not-working-for-custom-element-having-shadow-dom)`