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,5 +1,5 @@
 import { Component } from "@angular/core";
-import { CommonModule } from '@angular/common';
+import { CommonModule } from "@angular/common";
 import { FormsModule } from "@angular/forms";
 
 @Component({
@@ -7,7 +7,7 @@ import {FormsModule} from "@angular/forms";
   standalone: true,
   imports: [CommonModule, FormsModule],
   template: `<p>{{ text }}</p>
-  <input [(ngModel)]="text">`,
+    <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,5 +1,5 @@
 import { Component } from "@angular/core";
-import { CommonModule } from '@angular/common';
+import { CommonModule } from "@angular/common";
 import { FormsModule } from "@angular/forms";
 
 @Component({
@@ -7,15 +7,10 @@ import {FormsModule} from "@angular/forms";
   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,5 +1,5 @@
 import { Component } from "@angular/core";
-import { CommonModule } from '@angular/common';
+import { CommonModule } from "@angular/common";
 import { FormsModule } from "@angular/forms";
 
 @Component({
@@ -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,5 +1,5 @@
 import { Component } from "@angular/core";
-import { CommonModule } from '@angular/common';
+import { CommonModule } from "@angular/common";
 import { FormsModule } from "@angular/forms";
 
 @Component({

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 }}

package.json

@@ -18,66 +18,66 @@
   },
   "dependencies": {
     "@veljs/svelte": "^0.1.11",
-    "classnames": "^2.3.2",
-    "eslint-plugin-svelte": "^2.33.2",
+    "classnames": "^2.5.1",
+    "eslint-plugin-svelte": "^2.35.1",
     "heroiconsvelte": "^1.0.2"
   },
   "devDependencies": {
-    "@angular-eslint/eslint-plugin": "^16.2.0",
-    "@angular-eslint/eslint-plugin-template": "^16.2.0",
-    "@angular-eslint/template-parser": "^16.2.0",
-    "@angular/core": "^16.2.5",
-    "@aurelia/router": "2.0.0-beta.8",
-    "@babel/core": "^7.22.20",
-    "@babel/eslint-parser": "^7.22.15",
-    "@babel/plugin-proposal-decorators": "^7.22.15",
+    "@angular-eslint/eslint-plugin": "^17.1.1",
+    "@angular-eslint/eslint-plugin-template": "^17.1.1",
+    "@angular-eslint/template-parser": "^17.1.1",
+    "@angular/core": "^17.0.8",
+    "@aurelia/router": "2.0.0-beta.9",
+    "@babel/core": "^7.23.7",
+    "@babel/eslint-parser": "^7.23.3",
+    "@babel/plugin-proposal-decorators": "^7.23.7",
     "@matschik/lz-string": "^0.0.2",
     "@stefanprobst/remark-shiki": "^2.2.1",
-    "@sveltejs/vite-plugin-svelte": "^2.4.6",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@tailwindcss/typography": "^0.5.10",
-    "@typescript-eslint/eslint-plugin": "^6.7.2",
-    "@typescript-eslint/parser": "^6.7.2",
-    "aurelia": "2.0.0-beta.8",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
+    "aurelia": "2.0.0-beta.9",
     "aurelia-framework": "^1.4.1",
-    "autoprefixer": "^10.4.15",
+    "autoprefixer": "^10.4.16",
     "chokidar": "^3.5.3",
     "codesandbox": "^2.2.3",
-    "eslint": "^8.49.0",
-    "eslint-plugin-ember": "^11.11.1",
-    "eslint-plugin-lit": "^1.9.1",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-qwik": "^1.2.12",
+    "eslint": "^8.56.0",
+    "eslint-plugin-ember": "^11.12.0",
+    "eslint-plugin-lit": "^1.11.0",
+    "eslint-plugin-prettier": "^5.1.2",
+    "eslint-plugin-qwik": "^1.3.2",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-solid": "^0.13.0",
-    "eslint-plugin-vue": "^9.17.0",
+    "eslint-plugin-solid": "^0.13.1",
+    "eslint-plugin-vue": "^9.19.2",
     "esm": "^3.2.25",
     "folder-hash": "^4.0.4",
     "husky": "^8.0.3",
-    "lint-staged": "^14.0.1",
-    "lit": "^2.8.0",
+    "lint-staged": "^15.2.0",
+    "lit": "^3.1.0",
     "lodash.kebabcase": "^4.1.1",
     "micache": "^2.4.1",
-    "pkg-dir": "^7.0.0",
-    "postcss": "^8.4.30",
-    "prettier": "^3.0.3",
-    "prettier-plugin-svelte": "^3.0.3",
+    "pkg-dir": "^8.0.0",
+    "postcss": "^8.4.32",
+    "prettier": "^3.1.1",
+    "prettier-plugin-svelte": "^3.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rehype-raw": "^7.0.0",
     "rehype-stringify": "^10.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.0.0",
-    "shiki": "^0.14.4",
-    "solid-js": "^1.7.12",
-    "svelte": "^4.2.0",
-    "svelte-preprocess": "^5.0.4",
-    "tailwindcss": "^3.3.3",
+    "shiki": "^0.14.7",
+    "solid-js": "^1.8.8",
+    "svelte": "^4.2.8",
+    "svelte-preprocess": "^5.1.3",
+    "tailwindcss": "^3.4.0",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
-    "unified": "^11.0.3",
-    "vite": "^4.4.9",
-    "vite-plugin-html": "^3.2.0",
-    "vue": "^3.3.4"
+    "typescript": "^5.3.3",
+    "unified": "^11.0.4",
+    "vite": "^5.0.10",
+    "vite-plugin-html": "^3.2.1",
+    "vue": "^3.4.4"
   },
   "overrides": {
     "@stefanprobst/remark-shiki": {

scripts/generateReadMeProgress.js

@@ -54,9 +54,9 @@ ${list}
 
   const newProgressionContent =
     "\n" +
-    prettier.format(progressionContent, {
+    (await prettier.format(progressionContent, {
       parser: "markdown",
-    });
+    }));
 
   const newReadmeContent = readmeContent.replace(
     progressionContentRegex,