Migration from Webpack to Vite

.prettierrc.js

@@ -0,0 +1,10 @@
+export default {
+    semi: true,
+    trailingComma: "es5",
+    singleQuote: false,
+    tabWidth: 4,
+    endOfLine: "auto",
+    printWidth: 80,
+    bracketSpacing: true,
+    arrowParens: "always",
+};

package.json

@@ -2,27 +2,22 @@
   "name": "portfolio",
   "version": "1.2.0",
   "main": "src/app/index.js",
+  "type": "module",
   "author": {
     "name": "Elias",
     "url": "https://EliasDevis.github.io"
   },
   "license": "MIT",
   "devDependencies": {
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.2",
-    "html-webpack-plugin": "^5.5.0",
-    "json-minimizer-webpack-plugin": "^4.0.0",
-    "mini-css-extract-plugin": "^2.7.2",
+    "prettier": "^3.4.2",
     "sass": "^1.56.1",
-    "sass-loader": "^13.2.0",
-    "style-loader": "^3.3.1",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.0",
-    "webpack-dev-server": "^4.11.1",
-    "node-sass": "^8.0.0"
+    "vite": "6.0.11"
   },
   "scripts": {
-    "build": "webpack",
-    "serve": "webpack serve"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
   }
 }

src/app/blocks/about/About.js

@@ -1,14 +1,18 @@
 export default (t) => {
-    return /*html*/`
+    return /*html*/ `
         <section class="about">
             <div class="about__illustrations">
                 <img src="/images/about-me.png" alt="" class="about__image">
             </div>
             <div class="about__text">
-                ${t.description.map(text => /*html*/`
+                ${t.description
+                    .map(
+                        (text) => /*html*/ `
                     <p class="about__description">${text}</p>
-                `).join("")}
+                `
+                    )
+                    .join("")}
             </div>
         </section>
-    `
-}
+    `;
+};

src/app/blocks/about/Facts.js

@@ -1,18 +1,22 @@
 export default (t) => {
-    return /*html*/`
+    return /*html*/ `
         <section class="facts">
             <h2 class="h2">${t.title}</h2>
             <div class="facts__content">
                 <ul class="facts__list">
-                    ${t.list.map(fact => /*html*/`
+                    ${t.list
+                        .map(
+                            (fact) => /*html*/ `
                         <li class="fact">${fact}</li>
-                    `).join("")}
+                    `
+                        )
+                        .join("")}
                 </ul>
                 <div class="facts__illustrations">
 
                 </div>
             </div>
 
         </section>
-    `
-}
+    `;
+};

src/app/blocks/about/Skills.js

@@ -1,15 +1,15 @@
-import SkillBlock from "@/components/SkillBlock"
-import skills from "@/consts/skills"
+import SkillBlock from "@/components/SkillBlock";
+import skills from "@/consts/skills";
 
 export default (t, t2) => {
-    return /*html*/`
+    return /*html*/ `
         <section class="skills">
             <h2 class="h2">${t.title}</h2>
             <div class="skills__content">
                 ${Object.keys(skills)
-                            .map((id) => SkillBlock({ id }, t2))
-                            .join("")}
+                    .map((id) => SkillBlock({ id }, t2))
+                    .join("")}
             </div>
         </section>
-    `
-}
+    `;
+};

src/app/blocks/home/About.js

@@ -4,10 +4,12 @@ export default (t) => {
             <div class="about__content">
                 <h2 class="h2">${t.title}</h2>
                 <div class="about__text">
-                    ${t.description.map(
-                        (text) =>
-                            /*html*/ `<p class="about__description">${text}</p>`
-                    ).join("")}
+                    ${t.description
+                        .map(
+                            (text) =>
+                                /*html*/ `<p class="about__description">${text}</p>`
+                        )
+                        .join("")}
                 </div>
 
                 <a href="/about-me" class="button">${t.button} -></a>

src/app/blocks/home/Contacts.js

@@ -8,7 +8,7 @@ const contacts = [
     {
         name: "email",
         text: media.emailRaw,
-    }
+    },
 ];
 
 export default (t) => {

src/app/blocks/home/Quote.js

@@ -1,8 +1,8 @@
 export default (t) => {
-    return /*html*/`
+    return /*html*/ `
         <figure class="quote">
             <blockquote class="quote__text">${t.text}</blockquote>
             <figcaption class="quote__author">${t.author}</figcaption>
         </figure>
-    `
-}
+    `;
+};

src/app/blocks/home/Skills.js

@@ -14,7 +14,7 @@ export default (t, t2) => {
                 </div>
                 <div class="skills__list">
                     ${Object.keys(skills)
-                        .filter(id => id !== "tool")
+                        .filter((id) => id !== "tool")
                         .map((id) => SkillBlock({ id }, t2))
                         .join("")}
                 </div>

src/app/components/Dots.js

@@ -2,20 +2,22 @@ const radius = 4;
 const gap = 16;
 
 export default ({ width = 5, height = 5 } = {}) => {
-    const svgWidth = (radius * 2 + gap) * width - gap
-    const svgHeight = (radius * 2 + gap) * height - gap
+    const svgWidth = (radius * 2 + gap) * width - gap;
+    const svgHeight = (radius * 2 + gap) * height - gap;
 
     return /*html*/ `
         <svg width="100%" class="dots" viewBox="0 0 ${svgWidth} ${svgHeight}">
             ${new Array(width)
                 .fill(new Array(height).fill(""))
                 .map((arr, i) =>
-                    arr.map((_, j) => {
-                        const x = radius + i * (radius * 2 + gap);
-                        const y = radius + j * (radius * 2 + gap);
+                    arr
+                        .map((_, j) => {
+                            const x = radius + i * (radius * 2 + gap);
+                            const y = radius + j * (radius * 2 + gap);
 
-                        return /*html*/ `<circle cx="${x}" cy="${y}" r="${radius}" />`;
-                    }).join("")
+                            return /*html*/ `<circle cx="${x}" cy="${y}" r="${radius}" />`;
+                        })
+                        .join("")
                 )
                 .join("")}
         </svg>

src/app/components/Header.js

@@ -1,7 +1,7 @@
 import routes from "@/consts/routes";
 import MediaIcon from "./MediaIcon";
 
-const paths = ["/", "/projects", "/about-me"]
+const paths = ["/", "/projects", "/about-me"];
 
 export default (t) => {
     return /*html*/ `

src/app/components/Path.js

@@ -1,8 +1,8 @@
 export default ({ description }) => {
-    return /*html*/`
+    return /*html*/ `
         <div class="path">
             <h1 class="h1 path__name">${window.location.pathname.slice(1)}</h1>
             <p class="path__description">${description}</p>
         </div>
-    `
-}
+    `;
+};

src/app/components/Project.js

@@ -6,11 +6,12 @@ import media from "@/consts/media";
 function mapLinks(links) {
     function map(link) {
         let href =
-        "https://" + (link === "live" ? "" : websites[link]) + links[link];
-
-        if (link === "figma") href = `https://figma.com/community/file/${links[link]}`
-        if (link === "github" && links[link].startsWith("/")) href = media.github + links[link]
+            "https://" + (link === "live" ? "" : websites[link]) + links[link];
 
+        if (link === "figma")
+            href = `https://figma.com/community/file/${links[link]}`;
+        if (link === "github" && links[link].startsWith("/"))
+            href = media.github + links[link];
 
         const className = link === "cached" ? "button__secondary" : "";
         const name = `${link[0].toUpperCase()}${link.slice(1)}`;
@@ -22,9 +23,11 @@ function mapLinks(links) {
 }
 
 export default ({ id }, t) => {
-    const { hasImage, techs: projectTech, links } = projects.find(
-        (project) => project.id === id
-    );
+    const {
+        hasImage,
+        techs: projectTech,
+        links,
+    } = projects.find((project) => project.id === id);
 
     return /*html*/ `
         <div class="project">

src/app/components/ProjectList.js

@@ -1,7 +1,6 @@
 import Project from "@/components/Project";
 import projects from "@/consts/projects";
 
-
 export default ({ title, filter = () => true, limit = projects.length }, t) => {
     return /*html*/ `
             ${title ? `<div> <h2 class="h2">${title}</h2>` : ""}

src/app/components/SkillBlock.js

@@ -6,7 +6,8 @@ export default ({ id }, t) => {
         <div class="skill-block">
             <div class="skill-block__name">${t[id]}</div>
             <ul class="skill-block__list">
-                ${(skills[id].map((techIndex) => techs[techIndex]))
+                ${skills[id]
+                    .map((techIndex) => techs[techIndex])
                     .map(
                         (tech) =>
                             /*html*/ `<li class="skill-block__skill">${tech}</li>`

src/app/consts/media.js

@@ -1,4 +1,4 @@
-import proxy from "../proxies/media"
+import proxy from "../proxies/media";
 
 const media = {
     discord: {
@@ -17,9 +17,7 @@ const media = {
     cssBattle: "elias_dev",
     codepen: "elias_dev",
     dribble: "Elias_dev",
-    email: "elias.devis@protonmail.com"
-
-}
+    email: "elias.devis@protonmail.com",
+};
 
 export default new Proxy(media, proxy);
-

src/app/consts/projects.js

@@ -7,7 +7,7 @@ const projects = [
         links: {
             figma: "1198393124994627983",
             live: "deplos.github.io",
-            github: "Deplos/deplos.github.io"
+            github: "Deplos/deplos.github.io",
         },
         techs: ["pug", "stylus", "node"],
         hasImage: true,
@@ -19,13 +19,13 @@ const projects = [
             github: "pixelate-it/pixelbattle-frontend",
         },
         techs: ["preact", "css", "pixijs", "ts"],
-        hasImage: true
+        hasImage: true,
     },
     {
         id: "feedrum",
         links: {
             github: "Feedrum-Project/feedrum-next",
-            figma: "1314605686829534158"
+            figma: "1314605686829534158",
         },
         techs: ["node", "next", "react", "zod"],
         hasImage: true,
@@ -70,7 +70,7 @@ const projects = [
         links: {
             figma: "1164933568884615740",
             github: "/EliasDevis.github.io",
-            live: "eliasdevis.github.io"
+            live: "eliasdevis.github.io",
         },
         hasImage: true,
     },

src/app/consts/routes.js

@@ -1,4 +1,3 @@
-
 /**
  * @type {import("../../types/Routes").Routes}
  */
@@ -19,9 +18,9 @@ export default {
         name: "404",
         element: "PageNotFound",
     },
-    
+
     // "/contacts": {
     //     name: "contacts",
     //     element: "Contacts",
     // },
-};
+};

src/app/consts/skills.js

@@ -1,7 +1,17 @@
 export default {
     language: ["js", "ts", "python"],
     database: ["sqlite", "postgreSql"],
-    other: ["html", "css", "sass", "scss", "less", "stylus", "ejs", "jinja", "pug"],
+    other: [
+        "html",
+        "css",
+        "sass",
+        "scss",
+        "less",
+        "stylus",
+        "ejs",
+        "jinja",
+        "pug",
+    ],
     tool: ["vscode", "nvim", "figma", "git"],
-    framework: ["react", "next", "gulp", "express", "flask", "quart"]   
-}
+    framework: ["react", "next", "gulp", "express", "flask", "quart"],
+};

src/app/consts/techs.js

@@ -33,4 +33,4 @@ export default {
     deno: "Deno",
     pixijs: "PixiJS",
     preact: "Preact",
-}
+};

src/app/consts/websites.js

@@ -9,5 +9,5 @@ export default {
     cssBattle: "cssbattle.dev/player/",
     codepen: "codepen.io/",
     dribble: "dribbble.com/",
-    email: "mailto:"
-}
+    email: "mailto:",
+};