chore: upgrade dependencies

README.md

@@ -15,7 +15,7 @@ How do we solve this ? Developers love having framework overview by examples. It
 <details>
         <summary>
             <img width="18" height="18" src="public/framework/svelte.svg" />
-            <b>Svelte</b>
+            <b>Svelte 4</b>
             <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
 - [x] Reactivity
@@ -423,7 +423,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/qwik.svg" />
             <b>Qwik</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -450,8 +450,8 @@ How do we solve this ? Developers love having framework overview by examples. It
   - [x] Checkbox
   - [x] Radio
   - [x] Select
-- [ ] Webapp features
-  - [ ] Render app
+- [x] Webapp features
+  - [x] Render app
   - [x] Fetch data
   - [x] Router link
   - [x] Routing
@@ -530,6 +530,43 @@ How do we solve this ? Developers love having framework overview by examples. It
   - [x] Router link
   - [x] Routing
 
+</details><details>
+        <summary>
+            <img width="18" height="18" src="public/framework/svelte.svg" />
+            <b>Svelte 5 (preview)</b>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+
+- [x] Reactivity
+  - [x] Declare state
+  - [x] Update state
+  - [x] Computed state
+- [x] Templating
+  - [x] Minimal template
+  - [x] Styling
+  - [x] Loop
+  - [x] Event click
+  - [x] Dom ref
+  - [x] Conditional
+- [x] Lifecycle
+  - [x] On mount
+  - [x] On unmount
+- [x] Component composition
+  - [x] Props
+  - [x] Emit to parent
+  - [x] Slot
+  - [x] Slot fallback
+  - [x] Context
+- [x] Form input
+  - [x] Input text
+  - [x] Checkbox
+  - [x] Radio
+  - [x] Select
+- [x] Webapp features
+  - [x] Render app
+  - [x] Fetch data
+  - [x] Router link
+  - [x] Routing
+
 </details>
 <!-- progression end -->
 

content/2-templating/3-loop/vue2/Colors.vue

@@ -10,10 +10,7 @@ export default {
 
 <template>
   <ul>
-    <li
-      v-for="color in colors"
-      :key="color"
-    >
+    <li v-for="color in colors" :key="color">
       {{ color }}
     </li>
   </ul>

content/2-templating/3-loop/vue3/Colors.vue

@@ -4,10 +4,7 @@ const colors = ["red", "green", "blue"];
 
 <template>
   <ul>
-    <li
-      v-for="color in colors"
-      :key="color"
-    >
+    <li v-for="color in colors" :key="color">
       {{ color }}
     </li>
   </ul>

content/2-templating/5-dom-ref/vue2/InputFocused.vue

@@ -7,5 +7,5 @@ export default {
 </script>
 
 <template>
-  <input ref="inputElement">
+  <input ref="inputElement" />
 </template>

content/2-templating/5-dom-ref/vue3/InputFocused.vue

@@ -9,5 +9,5 @@ onMounted(() => {
 </script>
 
 <template>
-  <input ref="inputElement">
+  <input ref="inputElement" />
 </template>

content/4-component-composition/2-emit-to-parent/svelte5/AnswerButton.svelte

@@ -1,5 +1,5 @@
 <script>
-  let { onYes, onNo } = $props()
+  let { onYes, onNo } = $props();
 </script>
 
 <button onclick={onYes}> YES </button>

content/4-component-composition/2-emit-to-parent/vue2/App.vue

@@ -23,10 +23,7 @@ export default {
 <template>
   <div>
     <p>Are you happy?</p>
-    <AnswerButton
-      @yes="onAnswerYes"
-      @no="onAnswerNo"
-    />
+    <AnswerButton @yes="onAnswerYes" @no="onAnswerNo" />
     <p style="font-size: 50px">
       {{ isHappy ? "😀" : "😥" }}
     </p>

content/4-component-composition/2-emit-to-parent/vue3/App.vue

@@ -15,10 +15,7 @@ function onAnswerYes() {
 
 <template>
   <p>Are you happy?</p>
-  <AnswerButton
-    @yes="onAnswerYes"
-    @no="onAnswerNo"
-  />
+  <AnswerButton @yes="onAnswerYes" @no="onAnswerNo" />
   <p style="font-size: 50px">
     {{ isHappy ? "😀" : "😥" }}
   </p>

content/6-form-input/1-input-text/angular/input-hello.component.ts

@@ -1,13 +1,13 @@
 import { Component } from "@angular/core";
-import { CommonModule } from '@angular/common';
-import {FormsModule} from "@angular/forms";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
 
 @Component({
   selector: "app-input-hello",
   standalone: true,
   imports: [CommonModule, FormsModule],
-  template: `<p>{{text}}</p>
-  <input [(ngModel)]="text">`,
+  template: `<p>{{ text }}</p>
+    <input [(ngModel)]="text" />`,
 })
 export class InputHelloComponent {
   text = "";

content/6-form-input/1-input-text/vue2/InputHello.vue

@@ -11,6 +11,6 @@ export default {
 <template>
   <div>
     <p>{{ text }}</p>
-    <input v-model="text">
+    <input v-model="text" />
   </div>
 </template>

content/6-form-input/1-input-text/vue3/InputHello.vue

@@ -5,5 +5,5 @@ const text = ref("Hello World");
 
 <template>
   <p>{{ text }}</p>
-  <input v-model="text">
+  <input v-model="text" />
 </template>

content/6-form-input/2-checkbox/angular/is-available.component.ts

@@ -1,21 +1,16 @@
 import { Component } from "@angular/core";
-import { CommonModule } from '@angular/common';
-import {FormsModule} from "@angular/forms";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
 
 @Component({
   selector: "app-is-available",
   standalone: true,
   imports: [CommonModule, FormsModule],
   template: `
-    <input
-      id="is-available"
-      type="checkbox"
-      [(ngModel)] = "isAvailable"
-    />
+    <input id="is-available" type="checkbox" [(ngModel)]="isAvailable" />
     <label for="is-available">Is available</label>
   `,
 })
 export class IsAvailableComponent {
   isAvailable = false;
-
 }

content/6-form-input/2-checkbox/vue2/IsAvailable.vue

@@ -10,11 +10,7 @@ export default {
 
 <template>
   <div>
-    <input
-      id="is-available"
-      v-model="isAvailable"
-      type="checkbox"
-    >
+    <input id="is-available" v-model="isAvailable" type="checkbox" />
     <label for="is-available">Is available</label>
   </div>
 </template>

content/6-form-input/2-checkbox/vue3/IsAvailable.vue

@@ -5,10 +5,6 @@ const isAvailable = ref(true);
 </script>
 
 <template>
-  <input
-    id="is-available"
-    v-model="isAvailable"
-    type="checkbox"
-  >
+  <input id="is-available" v-model="isAvailable" type="checkbox" />
   <label for="is-available">Is available</label>
 </template>

content/6-form-input/3-radio/angular/pick-pill.component.ts

@@ -1,6 +1,6 @@
 import { Component } from "@angular/core";
-import { CommonModule } from '@angular/common';
-import {FormsModule} from "@angular/forms";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
 
 @Component({
   selector: "app-pick-pill",
@@ -9,20 +9,10 @@ import {FormsModule} from "@angular/forms";
   template: `
     <div>Picked: {{ picked }}</div>
 
-    <input
-      id="blue-pill"
-      type="radio"
-      value="blue"
-      [(ngModel)]="picked"
-    />
+    <input id="blue-pill" type="radio" value="blue" [(ngModel)]="picked" />
     <label for="blue-pill">Blue pill</label>
 
-    <input
-      id="red-pill"
-      type="radio"
-      value="red"
-      [(ngModel)]="picked"
-    />
+    <input id="red-pill" type="radio" value="red" [(ngModel)]="picked" />
     <label for="red-pill">Red pill</label>
   `,
 })

content/6-form-input/3-radio/vue2/PickPill.vue

@@ -12,20 +12,10 @@ export default {
   <div>
     <div>Picked: {{ picked }}</div>
 
-    <input
-      id="blue-pill"
-      v-model="picked"
-      type="radio"
-      value="blue"
-    >
+    <input id="blue-pill" v-model="picked" type="radio" value="blue" />
     <label for="blue-pill">Blue pill</label>
 
-    <input
-      id="red-pill"
-      v-model="picked"
-      type="radio"
-      value="red"
-    >
+    <input id="red-pill" v-model="picked" type="radio" value="red" />
     <label for="red-pill">Red pill</label>
   </div>
 </template>

content/6-form-input/3-radio/vue3/PickPill.vue

@@ -7,19 +7,9 @@ const picked = ref("red");
 <template>
   <div>Picked: {{ picked }}</div>
 
-  <input
-    id="blue-pill"
-    v-model="picked"
-    type="radio"
-    value="blue"
-  >
+  <input id="blue-pill" v-model="picked" type="radio" value="blue" />
   <label for="blue-pill">Blue pill</label>
 
-  <input
-    id="red-pill"
-    v-model="picked"
-    type="radio"
-    value="red"
-  >
+  <input id="red-pill" v-model="picked" type="radio" value="red" />
   <label for="red-pill">Red pill</label>
 </template>

content/6-form-input/4-select/angular/color-select.component.ts

@@ -1,6 +1,6 @@
 import { Component } from "@angular/core";
-import { CommonModule } from '@angular/common';
-import {FormsModule} from "@angular/forms";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
 
 @Component({
   selector: "app-color-select",

content/7-webapp-features/1-render-app/qwik/app.tsx

@@ -1,5 +1,5 @@
-import { component$, useSignal } from '@builder.io/qwik'
+import { component$, useSignal } from "@builder.io/qwik";
 
 export const App = component$(() => {
   return <h1>Hello world</h1>;
-})
+});

content/7-webapp-features/1-render-app/qwik/main.tsx

@@ -1,5 +1,5 @@
-import '@builder.io/qwik/qwikloader.js'
-import { render } from '@builder.io/qwik'
-import { App } from './app.tsx'
+import "@builder.io/qwik/qwikloader.js";
+import { render } from "@builder.io/qwik";
+import { App } from "./app.tsx";
 
-render(document.getElementById('app') as HTMLElement, <App />)
+render(document.getElementById("app") as HTMLElement, <App />);

content/7-webapp-features/1-render-app/svelte5/app.js

@@ -1,4 +1,4 @@
-import { mount } from "svelte"
+import { mount } from "svelte";
 import App from "./App.svelte";
 
 const app = mount(App, {

content/7-webapp-features/2-fetch-data/vue2/App.vue

@@ -33,14 +33,8 @@ export default {
   <p v-if="isLoading">Fetching users...</p>
   <p v-else-if="error">An error ocurred while fetching users</p>
   <ul v-else-if="users">
-    <li
-      v-for="user in users"
-      :key="user.login.uuid"
-    >
-      <img
-        :src="user.picture.thumbnail"
-        alt="user"
-      >
+    <li v-for="user in users" :key="user.login.uuid">
+      <img :src="user.picture.thumbnail" alt="user" />
       <p>
         {{ user.name.first }}
         {{ user.name.last }}

content/7-webapp-features/2-fetch-data/vue3/App.vue

@@ -8,14 +8,8 @@ const { isLoading, error, data: users } = useFetchUsers();
   <p v-if="isLoading">Fetching users...</p>
   <p v-else-if="error">An error ocurred while fetching users</p>
   <ul v-else-if="users">
-    <li
-      v-for="user in users"
-      :key="user.login.uuid"
-    >
-      <img
-        :src="user.picture.thumbnail"
-        alt="user"
-      >
+    <li v-for="user in users" :key="user.login.uuid">
+      <img :src="user.picture.thumbnail" alt="user" />
       <p>
         {{ user.name.first }}
         {{ user.name.last }}