Add Video component and update package structure for improved functionality

Author: manu4543

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@imagekit/vue",
   "version": "4.0.0-beta.1",
-  "main": "dist/index.cjs",
+  "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "files": [

src/components/Image.vue

@@ -50,14 +50,14 @@ const imgData = computed(() => {
   } = merged.value;
 
   if (!urlEndpoint || urlEndpoint.trim() === "") {
-    console.error("urlEndpoint is neither provided in this component nor in the ImageKitContext.");
+    console.error("urlEndpoint is neither provided in this component nor in any parent ImageKitProvider.");
     return { src, loading };
   }
 
   if (responsive === false) {
     const normalSrc = buildSrc({
       src,
-      transformation,
+      transformation: [...transformation],
       queryParameters,
       urlEndpoint,
       transformationPosition,
@@ -70,7 +70,7 @@ const imgData = computed(() => {
 
   const { src: newSrc, srcSet } = getResponsiveImageAttributes({
     src,
-    transformation,
+    transformation: [...transformation],
     width: isNaN(widthInt) ? undefined : widthInt,
     sizes,
     queryParameters,

src/components/Video.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { buildSrc } from "@imagekit/javascript";
+import { computed, inject, useAttrs } from "vue";
+import type { IKVideoProps, ImageKitProviderProps } from "../interface";
+import { ImageKitContextKey } from "../provider/keys";
+
+const props = defineProps<IKVideoProps>();
+const context = inject<ImageKitProviderProps>(ImageKitContextKey, {});
+
+function mergeDefined<T extends Record<string, any>>(base: ImageKitProviderProps, override: IKVideoProps): T {
+  const out = { ...base } as Record<string, any>;
+  for (const [k, v] of Object.entries(override)) {
+    if (v !== undefined) out[k] = v;
+  }
+  return out as T;
+}
+
+const merged = computed(() => mergeDefined(context, props));
+
+const videoData = computed(() => {
+  const {
+    src = "",
+    transformation = [],
+    queryParameters,
+    urlEndpoint,
+    transformationPosition,
+  } = merged.value;
+
+  if (!urlEndpoint || urlEndpoint.trim() === "") {
+    console.error("urlEndpoint is neither provided in this component nor in any parent ImageKitProvider.");
+    return { src };
+  }
+
+  const finalSrc = buildSrc({
+    urlEndpoint,
+    src,
+    transformation: [...transformation],
+    queryParameters,
+    transformationPosition,
+  });
+
+  return { src: finalSrc };
+});
+
+/* ------------------------------------------------------------------ */
+/* forward non-ImageKit attrs                                         */
+/* ------------------------------------------------------------------ */
+
+const IK_KEYS = [
+  "src",
+  "transformation",
+  "queryParameters",
+  "urlEndpoint",
+  "transformationPosition",
+] as const;
+
+const attrs = useAttrs();
+const nonIKAttrs = computed(() => {
+  const obj: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(attrs)) {
+    if (!IK_KEYS.includes(k as (typeof IK_KEYS)[number])) obj[k] = v;
+  }
+  return obj;
+});
+</script>
+
+<template>
+  <video v-bind="nonIKAttrs" :src="videoData.src" />
+</template>

src/index.ts

@@ -1,17 +1,21 @@
-import Image from './components/Image.vue'
-import ImageKitProvider from './provider/ImageKitProvider.vue'
-import type { SrcOptions, Transformation, UploadOptions, UploadResponse, GetImageAttributesOptions, ResponsiveImageAttributes } from '@imagekit/javascript';
+import type { GetImageAttributesOptions, ResponsiveImageAttributes, SrcOptions, Transformation, UploadOptions, UploadResponse } from '@imagekit/javascript';
+import { buildSrc, buildTransformationString, getResponsiveImageAttributes, ImageKitAbortError, ImageKitInvalidRequestError, ImageKitServerError, ImageKitUploadNetworkError, upload } from '@imagekit/javascript';
+import Image from './components/Image.vue';
+import Video from './components/Video.vue';
+import ImageKitProvider from './provider/ImageKitProvider.vue';
+import { ImageKitContextKey } from './provider/keys';
 
-import type { ImageKitProviderProps, IKImageProps } from './interface'
-export { Image, ImageKitProvider }
+import type { IKImageProps, IKVideoProps, ImageKitProviderProps } from './interface';
+
+export { buildSrc, buildTransformationString, getResponsiveImageAttributes, Image, ImageKitAbortError, ImageKitContextKey, ImageKitInvalidRequestError, ImageKitProvider, ImageKitServerError, ImageKitUploadNetworkError, upload, Video };
 
 export type {
+    GetImageAttributesOptions, IKImageProps, IKVideoProps,
+    // Vue 3 specific
+    ImageKitProviderProps, ResponsiveImageAttributes,
+    // JS SDK types
     SrcOptions,
     Transformation,
     UploadOptions,
-    UploadResponse,
-    GetImageAttributesOptions,
-    ResponsiveImageAttributes,
-
-    ImageKitProviderProps, IKImageProps
-}
+    UploadResponse
+};

src/interface/index.ts

@@ -1,6 +1,39 @@
 import type { GetImageAttributesOptions, SrcOptions } from '@imagekit/javascript';
 
-export type IKImageProps = Pick<GetImageAttributesOptions, "deviceBreakpoints" | "imageBreakpoints"> & {
+export type IKImageProps = Pick<GetImageAttributesOptions, "deviceBreakpoints" | "imageBreakpoints"> & CommonProps & {
+    /**
+     * Set to `false` to disable automatic responsive `srcSet` generation.
+     * Defaults to `true`.
+     */
+    responsive?: Boolean;
+
+    /**
+     * The intended display width of the image.
+     *
+     * - Accepts a number (e.g. `100`) or a numeric string (e.g. `"100"`).
+     * - If you pass units such as `"100px"` or a percentage like `"100%"`, the value
+     *   is ignored when generating the `srcSet`. In that case, a broad range of
+     *   widths is produced to cover all possible viewport sizes.
+     */
+    width?: number | `${number}`;
+
+    /**
+     * Define the sizes of the image at different breakpoints. Used by the browser to choose the most appropriate size from the generated srcset.
+     */
+    sizes?: string;
+
+    /**
+     * Controls when the image should start loading.
+     * 
+     * * `lazy` -  Defer loading the image until it reaches a calculated distance from the viewport.
+     * * `eager` - Load the image immediately, regardless of its position in the page.
+     * 
+     * `lazy` is the default value.
+     */
+    loading?: "lazy" | "eager";
+}
+
+type CommonProps = {
     /**
      * Accepts a relative or absolute path of the resource. If a relative path is provided, it is appended to the `urlEndpoint`.
      * If an absolute path is provided, `urlEndpoint` is ignored.
@@ -14,8 +47,9 @@ export type IKImageProps = Pick<GetImageAttributesOptions, "deviceBreakpoints" |
      * 
      * @example
      * ```jsx
-     * import { ImageKitProvider, Image } from "@imagekit/react";
+     * import { ImageKitProvider, Image, Video } from "@imagekit/vue";
      * <ImageKitProvider urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
+     *   <Video src="/video.mp4" />
      *   <Image src="/default-image.jpg" />
      * </ImageKitProvider>
      * ```
@@ -41,37 +75,8 @@ export type IKImageProps = Pick<GetImageAttributesOptions, "deviceBreakpoints" |
      * If you want to add the transformation string in the path of the URL, set this to `path`, final URL will look like `https://ik.imagekit.io/your_imagekit_id/tr:w-100,h-100/default-image.jpg`.
      */
     transformationPosition?: "path" | "query";
-
-    /**
-     * Set to `false` to disable automatic responsive `srcSet` generation.
-     * Defaults to `true`.
-     */
-    responsive?: Boolean;
-
-    /**
-     * The intended display width of the image.
-     *
-     * - Accepts a number (e.g. `100`) or a numeric string (e.g. `"100"`).
-     * - If you pass units such as `"100px"` or a percentage like `"100%"`, the value
-     *   is ignored when generating the `srcSet`. In that case, a broad range of
-     *   widths is produced to cover all possible viewport sizes.
-     */
-    width?: number | `${number}`;
-
-    /**
-     * Define the sizes of the image at different breakpoints. Used by the browser to choose the most appropriate size from the generated srcset.
-     */
-    sizes?: string;
-
-    /**
-     * Controls when the image should start loading.
-     * 
-     * * `lazy` -  Defer loading the image until it reaches a calculated distance from the viewport.
-     * * `eager` - Load the image immediately, regardless of its position in the page.
-     * 
-     * `lazy` is the default value.
-     */
-    loading?: "lazy" | "eager";
 }
 
+export type IKVideoProps = CommonProps;
+
 export type ImageKitProviderProps = Pick<IKImageProps, "urlEndpoint" | "transformationPosition">

vite.config.ts

@@ -17,6 +17,7 @@ export default defineConfig({
     lib: {
       entry: resolve(__dirname, 'src/index.ts'),
       name: 'VueImagekit',
+      formats: ['es', 'umd', "cjs"],
       fileName: format => `index.${format}.js`
     },
     rollupOptions: {