Add Vue image component

.github/workflows/publish.yaml

@@ -32,5 +32,6 @@ jobs:
 
       - name: Publish package
         run: npm publish --provenance
+        working-directory: ./image-vue
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}

image-vue/Image.mts

@@ -0,0 +1,62 @@
+import { defineComponent, h } from "vue";
+import type { ImageLoader } from "../core/types.mjs";
+import { generateSrcSet } from "../core/generate-src-set.mjs";
+
+export type { ImageLoader } from "../core/types.mjs";
+
+export type ImageProps = {
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+  loading: "eager" | "lazy";
+  sizes?: string;
+  srcset?: string;
+  decoding?: "async" | "auto" | "sync";
+  loader: ImageLoader;
+  // Quality passed to the loader
+  quality?: number;
+};
+
+export const Image = defineComponent(
+  (props: ImageProps) => {
+    const loader = props.loader !== undefined
+      ? props.loader
+      : ({ src }: { src: string }) => src;
+    const quality = props.quality ?? 45;
+
+    return () =>
+      h("img", {
+        src: props.src,
+        alt: props.alt,
+        width: props.width,
+        height: props.height,
+        loading: props.loading,
+        sizes: props.sizes,
+        srcset: props.srcset ||
+          generateSrcSet({
+            loader,
+            src: props.src,
+            width: props.width,
+            quality,
+            sizes: props.sizes,
+          }),
+        decoding: props.decoding ?? "async",
+        quality,
+      });
+  },
+  {
+    props: [
+      "src",
+      "alt",
+      "width",
+      "height",
+      "loading",
+      "sizes",
+      "srcset",
+      "decoding",
+      "loader",
+      "quality",
+    ],
+  },
+);

image-vue/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@voorhoede/image-vue",
+  "version": "0.0.0",
+  "description": "Optimized CDN image component",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build"
+  },
+  "dependencies": {
+    "vue": "^3.4.27"
+  },
+  "devDependencies": {
+    "@tsconfig/node-lts": "^20.1.3",
+    "typescript": "^5.4.5"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": "./dist/image-vue-pure/Image.mjs",
+  "types": "./dist/image-vue-pure/Image.d.mts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/voorhoede/open-source-project.git",
+    "directory": "image-vue"
+  },
+  "keywords": [
+    "vue",
+    "image",
+    "component"
+  ],
+  "author": "De Voorhoede (https://www.voorhoede.nl/)",
+  "license": "ISC"
+}

image-vue/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@tsconfig/node-lts/tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "outDir": "dist"
+  },
+  "files": [
+    "Image.mts"
+  ]
+}