Merge pull request #94 from imagekit-developer/improve-type-defination

Improve type defination

Author: imagekitio

CHANGELOG.md

@@ -0,0 +1,23 @@
+# Changelog
+
+## SDK Version 3.0.0
+
+### Breaking Changes
+
+- **Overlay Syntax Update**  
+  In version 3.0.0, the old overlay syntax parameters for transformations (e.g., `oi`, `ot`, `obg`, and others as detailed [here](https://imagekit.io/docs/add-overlays-on-images)) have been removed. These parameters are deprecated and will now return errors when used in URLs.
+
+  **Action Required:**  
+  Migrate to the new layers syntax which supports overlay nesting, offers improved positional control, and allows more transformations at the layer level. For a quick start, refer to the [examples](https://imagekit.io/docs/add-overlays-on-images). Use the `raw` transformation parameter to implement this migration.
+
+---
+
+## SDK Version 2.0.0
+
+### Breaking Changes
+
+- **Authentication Process Update**  
+  Previously, client-side file uploads required the SDK to be initialized with both the `publicKey` and `authenticationEndpoint` to fetch security parameters (`signature`, `token`, and `expire`).
+
+  **Action Required:**  
+  With version 2.0.0, you must now generate the security parameters (`signature`, `token`, and `expire`) yourself, eliminating the need for the `authenticationEndpoint`. When invoking the SDK's upload method, be sure to include these parameters along with other [upload options](https://imagekit.io/docs/api-reference/upload-file/upload-file#Request). For further details, consult the documentation [here](https://imagekit.io/docs/api-reference/upload-file/upload-file#how-to-implement-client-side-file-upload).

README.md

@@ -1,6 +1,6 @@
 {
     "name": "imagekit-javascript",
-    "version": "3.0.2",
+    "version": "3.1.0",
     "description": "Javascript SDK for using ImageKit.io in the browser",
     "main": "dist/imagekit.cjs.js",
     "module": "dist/imagekit.esm.js",

package-lock.json

@@ -8,6 +8,7 @@ const path = require('path');
 const pugTemplatePath = path.join(__dirname, "../views/index.pug");
 
 const app = express();
+app.use(express.static('static'))
 app.use(cors());
 app.set('view engine', 'pug');
 

package.json

@@ -1,5 +1,6 @@
 html
     body
+        img(id="my-image")
         h3 Imagekit Demo
         form(action='#' onSubmit='upload(event)')
             input(type='file' id='file1')
@@ -18,16 +19,29 @@ html
                     p
                         img(src="")    
 
-        script(type='text/javascript' src="https://unpkg.com/imagekit-javascript/dist/imagekit.min.js")
+        // Copy paste manually from dist
+        script(type='text/javascript' src="./imagekit.min.js")
         script.
             try {
                 var imagekit = new ImageKit({
                     publicKey: "!{publicKey}",
                     urlEndpoint: "!{urlEndpoint}",
                 });
 
+
                 window.imagekit = imagekit;
 
+                var url = imagekit.url({
+                    src: "https://ik.imagekit.io/demo/default-image.jpg",
+                    transformation: [{
+                        height: 100
+                    }]
+                })
+
+                var img = document.getElementById("my-image");
+                console.log(url);
+                img.src = url;
+
 
                 function upload(e) {
                     e.preventDefault();
@@ -119,4 +133,4 @@ html
                 }
             } catch(ex) {
                 console.log(ex);
-            }
+            }

samples/sample-app/server/server.js

@@ -1,167 +1,75 @@
 /**
- * @link https://docs.imagekit.io/features/image-transformations
+ * {@link https://imagekit.io/docs/transformations}
  */
-const supportedTransforms: { [key: string]: string } = {
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#width-w
-   */
+export const supportedTransforms: { [key: string]: string } = {
+  // Basic sizing & layout
   width: "w",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#height-h
-   */
   height: "h",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#aspect-ratio-ar
-   */
   aspectRatio: "ar",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#quality-q
-   */
-  quality: "q",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#crop-crop-modes-and-focus
-   */
+  background: "bg",
+  border: "b",
   crop: "c",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#crop-crop-modes-and-focus
-   */
   cropMode: "cm",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#focus-fo
-   */
+  dpr: "dpr",
   focus: "fo",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#examples-focus-using-cropped-image-coordinates
-   */
+  quality: "q",
   x: "x",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#examples-focus-using-cropped-image-coordinates
-   */
+  xCenter: "xc",
   y: "y",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#format-f
-   */
+  yCenter: "yc",
   format: "f",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#radius-r
-   */
+  videoCodec: "vc",
+  audioCodec: "ac",
   radius: "r",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#background-color-bg
-   */
-  background: "bg",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#border-b
-   */
-  border: "b",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#rotate-rt
-   */
   rotation: "rt",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#rotate-rt
-   */
-  rotate: "rt",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#blur-bl
-   */
   blur: "bl",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#named-transformation-n
-   */
   named: "n",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#progressive-image-pr
-   */
-  progressive: "pr",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#lossless-webp-and-png-lo
-   */
-  lossless: "lo",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#trim-edges-t
-   */
-  trim: "t",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#image-metadata-md
-   */
-  metadata: "md",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#color-profile-cp
-   */
-  colorProfile: "cp",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#default-image-di
-   */
   defaultImage: "di",
+  flip: "fl",
+  original: "orig",
+  startOffset: "so",
+  endOffset: "eo",
+  duration: "du",
+  streamingResolutions: "sr",
 
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#dpr-dpr
-   */
-  dpr: "dpr",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/image-enhancement-and-color-manipulation#sharpen-e-sharpen
-   */
+  // Old deprecated mappings
   effectSharpen: "e-sharpen",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/image-enhancement-and-color-manipulation#unsharp-mask-e-usm
-   */
   effectUSM: "e-usm",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/image-enhancement-and-color-manipulation#contrast-stretch-e-contrast
-   */
   effectContrast: "e-contrast",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#grayscale-e-grayscale
-   */
   effectGray: "e-grayscale",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#original-image-orig
-   */
-  original: "orig",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/image-enhancement-and-color-manipulation#shadow-e-shadow
-   */
   effectShadow: "e-shadow",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/image-enhancement-and-color-manipulation#gradient-e-gradient
-   */
   effectGradient: "e-gradient",
+  rotate: "rt",
+
+  // AI & advanced effects
+  grayscale: "e-grayscale",
+  aiUpscale: "e-upscale",
+  aiRetouch: "e-retouch",
+  aiVariation: "e-genvar",
+  aiDropShadow: "e-dropshadow",
+  aiChangeBackground: "e-changebg",
+  aiRemoveBackground: "e-bgremove",
+  aiRemoveBackgroundExternal: "e-removedotbg",
+  contrastStretch: "e-contrast",
+  shadow: "e-shadow",
+  sharpen: "e-sharpen",
+  unsharpMask: "e-usm",
+  gradient: "e-gradient",
+
+  // Other flags & finishing
+  progressive: "pr",
+  lossless: "lo",
+  colorProfile: "cp",
+  metadata: "md",
+  opacity: "o",
+  trim: "t",
+  zoom: "z",
+  page: "pg",
+
+  // Raw pass-through
+  raw: "raw",
+};
 
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/conditional-transformations
-   */
-   raw: "raw",
-}
 
 
 export default supportedTransforms

samples/sample-app/views/index.pug

@@ -55,27 +55,16 @@ class ImageKit {
   }
 
   /**
-   * You can add multiple origins in the same ImageKit.io account.
-   * URL endpoints allow you to configure which origins are accessible through your account and set their preference order as well.
-   *
-   * @see {@link https://github.com/imagekit-developer/imagekit-nodejs#url-generation}
-   * @see {@link https://docs.imagekit.io/integration/url-endpoints}
-   *
-   * @param urlOptions
+   * A utility function to generate asset URL. It applies the specified transformations and other parameters to the URL.
    */
   url(urlOptions: UrlOptions): string {
     return url(urlOptions, this.options);
   }
 
   /**
-   * You can upload files to ImageKit.io media library from your server-side using private API key authentication.
-   *
-   * File size limit
-   * The maximum upload file size is limited to 25MB.
-   *
-   * @see {@link https://docs.imagekit.io/api-reference/upload-file-api/server-side-file-upload}
+   * For uploading files directly from the browser to ImageKit.io.
    *
-   * @param uploadOptions
+   * {@link https://imagekit.io/docs/api-reference/upload-file/upload-file#how-to-implement-client-side-file-upload}
    */
   upload(uploadOptions: UploadOptions, options?: Partial<ImageKitOptions>): Promise<IKResponse<UploadResponse>>
   upload(uploadOptions: UploadOptions, callback: (err: Error | null, response: IKResponse<UploadResponse> | null) => void, options?: Partial<ImageKitOptions>): void;