feat(core): create Image component

.vulmix/assets/img/README.md

@@ -0,0 +1,3 @@
+# `.vulmix/assets/img`
+
+All your images will be compiled here.

.vulmix/components/Image.vue

@@ -0,0 +1,103 @@
+<template>
+  <img
+    :src="image"
+    :width="props.width && props.width.replace(/(\d+)(px|rem|em|%|)/i, '$1')"
+    :height="props.height && props.height.replace(/(\d+)(px|rem|em|%|)/i, '$1')"
+    :alt="props.alt"
+    :title="props.title"
+    :loading="props.loading"
+  />
+</template>
+
+<script setup>
+  import { ref, onMounted } from 'vue'
+  import { useWindowSize } from '@vueuse/core'
+
+  const { width: windowWidth, height: windowHeight } = useWindowSize()
+
+  const imageSize = ref({})
+
+  const props = defineProps({
+    src: {
+      type: String,
+      default: '',
+    },
+    width: {
+      type: String,
+    },
+    height: {
+      type: String,
+    },
+    alt: {
+      type: String,
+      default: 'Imagem',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    loading: {
+      type: String,
+      default: 'eager', // or 'lazy'
+    },
+    webp: {
+      type: String,
+      default: 'true',
+    },
+  })
+
+  const image = ref('')
+
+  function replace(size) {
+    let currentIndex
+    const sizes = ['300', '600', '900', '1200', '1920']
+
+    sizes.forEach((item, i) => {
+      if (item === size) {
+        currentIndex = i
+      }
+    })
+
+    const img = new Image()
+
+    image.value = props.src.replace(
+      /\/assets\/img\/(|.*)([a-zA-Z0-9_-])\.(png|jpg|jpeg|gif)$/i,
+      `/.vulmix/assets/img/$1$2@${size}.${
+        props.webp === 'true' ? 'webp' : '$3'
+      }`
+    )
+
+    img.src = image.value
+
+    img.onerror = function () {
+      image.value = props.src.replace(
+        /\/assets\/img\/(|.*)([a-zA-Z0-9_-])\.(png|jpg|jpeg|gif)$/i,
+        `/.vulmix/assets/img/$1$2@${sizes[currentIndex - 1]}.${
+          props.webp === 'true' ? 'webp' : '$3'
+        }`
+      )
+
+      replace(sizes[currentIndex - 1])
+    }
+  }
+
+  function loadImage() {
+    if (windowWidth.value < 320) {
+      replace('300')
+    } else if (windowWidth.value >= 320 && windowWidth.value < 578) {
+      replace('600')
+    } else if (windowWidth.value >= 578 && windowWidth.value < 768) {
+      replace('900')
+    } else if (windowWidth.value >= 992 && windowWidth.value < 1600) {
+      replace('1200')
+    } else {
+      replace('1920')
+    }
+  }
+
+  onMounted(() => {
+    window.addEventListener('load', () => {
+      loadImage()
+    })
+  })
+</script>

.vulmix/mix.js

@@ -1,6 +1,8 @@
 const mix = require('laravel-mix')
+const config = require('../webpack.config.js')
 
 require('laravel-mix-serve')
+require('laravel-mix-simple-image-processing')
 
 class VueMixInit {
   name() {
@@ -11,6 +13,8 @@ class VueMixInit {
     mix
       .setPublicPath('.dist/')
 
+      .webpackConfig(config)
+
       .serve(
         'npx http-server -p 8000 -a localhost -c-1 --proxy http://localhost:8000?',
         {
@@ -25,6 +29,18 @@ class VueMixInit {
         devtool: 'source-map',
       })
 
+      .imgs({
+        source: 'assets/img',
+        destination: '.vulmix/assets/img',
+        webp: true,
+        thumbnailsSizes: [1920, 1200, 900, 600, 300],
+        smallerThumbnailsOnly: true,
+        thumbnailsOnly: true,
+        imageminWebpOptions: {
+          quality: 80,
+        },
+      })
+
       .sass('.vulmix/assets/sass/main.scss', '.dist/.vulmix/dist/css')
 
       .js('.vulmix/main.js', '.dist/.vulmix/dist/js')

components/MyComponent.vue

@@ -1,7 +1,14 @@
 <template>
-  <div class="p-8 bg-slate-600 text-white rounded-xl w-fit">
-    <h2 class="text-3xl mb-6">My test component</h2>
+  <div class="p-8 bg-slate-600 text-white rounded-xl w-fit max-w-full flex flex-col md:flex-row gap-6">
+    <Image
+      class="w-[300px] max-w-full aspect-square object-cover object-bottom"
+      src="/assets/img/sample.jpg"
+    />
 
-    <p>Here's some paragraph for ya.</p>
+    <div>
+      <h2 class="text-3xl mb-6">My test component</h2>
+
+      <p>Here's some paragraph for ya.</p>
+    </div>
   </div>
 </template>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vulmix",
-  "version": "0.0.2-alpha",
+  "version": "0.1.0-alpha",
   "description": "Tiny boilerplate to work with Vue and Laravel Mix.",
   "main": "index.js",
   "scripts": {
@@ -13,21 +13,25 @@
   "author": "Victor Ribeiro",
   "license": "MIT",
   "devDependencies": {
-    "laravel-mix": "^6.0.49",
-    "vue": "^3.2.37",
-    "vue-loader": "^16.8.3",
-    "vue-router": "^4.1.3",
     "@vue/compiler-sfc": "^3.2.37",
-    "sass": "^1.54.5",
-    "sass-loader": "^10.3.1",
+    "@vueuse/core": "^9.2.0",
+    "autoprefixer": "^10.4.8",
     "browser-sync": "^2.27.10",
     "browser-sync-webpack-plugin": "^2.3.0",
-    "resolve-url-loader": "^5.0.0",
+    "imagemin-jpegtran": "^7.0.0",
+    "laravel-mix": "^6.0.49",
+    "laravel-mix-serve": "^2.2.2",
+    "laravel-mix-simple-image-processing": "^1.0.7",
     "path": "^0.12.7",
     "postcss": "^8.4.16",
-    "autoprefixer": "^10.4.8",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.54.5",
+    "sass-loader": "^10.3.1",
     "tailwindcss": "^3.1.8",
-    "laravel-mix-serve": "^2.2.2"
+    "vue": "^3.2.37",
+    "vue-loader": "^16.8.3",
+    "vue-router": "^4.1.3",
+    "webpack": "^5.74.0"
   },
   "dependencies": {}
 }

webpack.config.js

@@ -0,0 +1,15 @@
+const path = require('path')
+
+module.exports = {
+  resolve: {
+    extensions: ['.js', '.vue'],
+    alias: {
+      '@': path.resolve(__dirname, '.vulmix'),
+      '@assets': path.resolve(__dirname, 'assets'),
+      '@components': path.resolve(__dirname, 'components'),
+      '@composables': path.resolve(__dirname, 'composables'),
+      '@pages': path.resolve(__dirname, 'pages'),
+      '@sass': path.resolve(__dirname, 'assets/sass'),
+    },
+  },
+}

webpack.mix.js

@@ -1,19 +1,9 @@
 const mix = require('laravel-mix')
-const path = require('path')
 
 require('./.vulmix/mix.js')
 
 mix
   .vueMix()
 
-  .alias({
-    '@': path.join(__dirname, '.vulmix'),
-    '@assets': path.join(__dirname, 'assets'),
-    '@components': path.join(__dirname, 'components'),
-    '@composables': path.join(__dirname, 'composables'),
-    '@pages': path.join(__dirname, 'pages'),
-    '@sass': path.join(__dirname, 'assets/sass'),
-  })
-
   .sass('assets/sass/main.scss', '.dist/css')