chore: upgrade dependencies

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

@@ -10,7 +10,10 @@ 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,7 +4,10 @@ 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/2-templating/6-conditional/angular/trafficlight.component.ts

@@ -10,16 +10,16 @@ const TRAFFIC_LIGHTS = ["red", "orange", "green"];
     <p>
       You must
       @switch (light) {
-        @case("red") {
+        @case ("red") {
           <span>STOP</span>
-          }
-        @case("orange") {
+        }
+        @case ("orange") {
           <span>SLOW DOWN</span>
-          }
-        @case("green") {
+        }
+        @case ("green") {
           <span>GO</span>
-          }
         }
+      }
     </p>
   `,
 })

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

@@ -23,7 +23,10 @@ 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,7 +15,10 @@ 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/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/vue2/IsAvailable.vue

@@ -10,7 +10,11 @@ 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,6 +5,10 @@ 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/vue2/PickPill.vue

@@ -12,10 +12,20 @@ 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,9 +7,19 @@ 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/7-webapp-features/2-fetch-data/vue2/App.vue

@@ -33,8 +33,14 @@ 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,8 +8,14 @@ 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 }}

jsconfig.json

@@ -24,11 +24,11 @@
      * Disable this if you'd like to use dynamic types.
      */
     "checkJs": true,
-    "experimentalDecorators": true
+    "experimentalDecorators": true,
   },
   /**
    * Use global.d.ts instead of compilerOptions.types
    * to avoid limiting type declarations.
    */
-  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"],
 }

package.json

@@ -24,61 +24,61 @@
     "heroiconsvelte": "^1.0.2"
   },
   "devDependencies": {
-    "@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",
+    "@angular-eslint/eslint-plugin": "^17.2.1",
+    "@angular-eslint/eslint-plugin-template": "^17.2.1",
+    "@angular-eslint/template-parser": "^17.2.1",
+    "@angular/core": "^17.1.2",
+    "@aurelia/router": "2.0.0-beta.10",
+    "@babel/core": "^7.23.9",
+    "@babel/eslint-parser": "^7.23.10",
+    "@babel/plugin-proposal-decorators": "^7.23.9",
     "@matschik/lz-string": "^0.0.2",
     "@stefanprobst/remark-shiki": "^2.2.1",
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@tailwindcss/typography": "^0.5.10",
-    "@typescript-eslint/eslint-plugin": "^6.17.0",
-    "@typescript-eslint/parser": "^6.17.0",
-    "aurelia": "2.0.0-beta.9",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
+    "aurelia": "2.0.0-beta.10",
     "aurelia-framework": "^1.4.1",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.17",
     "chokidar": "^3.5.3",
     "codesandbox": "^2.2.3",
     "eslint": "^8.56.0",
-    "eslint-plugin-ember": "^11.12.0",
+    "eslint-plugin-ember": "^12.0.0",
     "eslint-plugin-lit": "^1.11.0",
-    "eslint-plugin-prettier": "^5.1.2",
-    "eslint-plugin-qwik": "^1.3.2",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-qwik": "^1.4.3",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-solid": "^0.13.1",
-    "eslint-plugin-vue": "^9.19.2",
+    "eslint-plugin-vue": "^9.21.1",
     "esm": "^3.2.25",
     "folder-hash": "^4.0.4",
-    "husky": "^8.0.3",
-    "lint-staged": "^15.2.0",
-    "lit": "^3.1.0",
+    "husky": "^9.0.10",
+    "lint-staged": "^15.2.1",
+    "lit": "^3.1.2",
     "lodash.kebabcase": "^4.1.1",
     "micache": "^2.4.1",
     "pkg-dir": "^8.0.0",
-    "postcss": "^8.4.32",
-    "prettier": "^3.1.1",
+    "postcss": "^8.4.33",
+    "prettier": "^3.2.4",
     "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.7",
-    "solid-js": "^1.8.8",
-    "svelte": "^4.2.8",
+    "remark-rehype": "^11.1.0",
+    "shiki": "1.0.0-beta.3",
+    "solid-js": "^1.8.12",
+    "svelte": "^4.2.9",
     "svelte-preprocess": "^5.1.3",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
     "unified": "^11.0.4",
-    "vite": "^5.0.10",
-    "vite-plugin-html": "^3.2.1",
-    "vue": "^3.4.4"
+    "vite": "^5.0.12",
+    "vite-plugin-html": "^3.2.2",
+    "vue": "^3.4.15"
   },
   "overrides": {
     "@stefanprobst/remark-shiki": {