@teamnovu/nuxt-image 0.5.4 → 1.0.0-beta.1

package/dist/runtime/components/nuxt-picture.vue

@@ -1,86 +0,0 @@
-<template>
-  <picture :key="nSources[0].src">
-    <source
-      v-if="nSources[1]"
-      :type="nSources[1].type"
-      :srcset="nSources[1].srcset"
-      :sizes="nSources[1].sizes"
-    >
-    <img
-      v-bind="nImgAttrs"
-      :src="nSources[0].src"
-      :srcset="nSources[0].srcset"
-      :sizes="nSources[0].sizes"
-    >
-  </picture>
-</template>
-
-<script>
-import {imageMixin} from "./image.mixin";
-import {getFileExtension} from "~image";
-const defineComponent = (opts) => opts;
-export default defineComponent({
-  name: "NuxtPicture",
-  mixins: [imageMixin],
-  props: {
-    legacyFormat: {type: String, default: null}
-  },
-  computed: {
-    isTransparent() {
-      return ["png", "webp", "gif"].includes(this.originalFormat);
-    },
-    originalFormat() {
-      return getFileExtension(this.src);
-    },
-    nFormat() {
-      if (this.format) {
-        return this.format;
-      }
-      if (this.originalFormat === "svg") {
-        return "svg";
-      }
-      return "webp";
-    },
-    nLegacyFormat() {
-      if (this.legacyFormat) {
-        return this.legacyFormat;
-      }
-      const formats = {
-        webp: this.isTransparent ? "png" : "jpeg",
-        svg: "png"
-      };
-      return formats[this.nFormat] || this.originalFormat;
-    },
-    nSources() {
-      if (this.nFormat === "svg") {
-        return [{
-          srcset: this.src
-        }];
-      }
-      const formats = this.nLegacyFormat !== this.nFormat ? [this.nLegacyFormat, this.nFormat] : [this.nFormat];
-      const sources = formats.map((format) => {
-        const {srcset, sizes, src} = this.$img.getSizes(this.src, {
-          ...this.nOptions,
-          sizes: this.sizes || this.$img.options.screens,
-          modifiers: {
-            ...this.nModifiers,
-            format
-          }
-        });
-        return {
-          src,
-          type: `image/${format}`,
-          sizes,
-          srcset
-        };
-      });
-      return sources;
-    }
-  },
-  created() {
-    if (process.server && process.static) {
-      this.nSources;
-    }
-  }
-});
-</script>

package/dist/runtime/components/nuxt-picture.vue.d.ts

@@ -1,15 +0,0 @@
-declare const _default: import("vue/types/vue").ExtendedVue<import("vue").default, unknown, unknown, {
-    isTransparent: boolean;
-    originalFormat: string;
-    nFormat: string;
-    nLegacyFormat: string;
-    nSources: {
-        srcset: string;
-        src?: string;
-        type?: string;
-        sizes?: string;
-    }[];
-}, {
-    legacyFormat: string;
-}>;
-export default _default;

package/dist/runtime/image.d.ts

@@ -1,2 +0,0 @@
-import type { CreateImageOptions, $Img } from '../types/image';
-export declare function createImage(globalOptions: CreateImageOptions, nuxtContext: any): $Img;

package/dist/runtime/image.js

@@ -1,194 +0,0 @@
-import defu from "defu";
-import {hasProtocol, parseURL, joinURL, withLeadingSlash} from "ufo";
-import {imageMeta} from "./utils/meta";
-import {parseSize} from "./utils";
-import {useStaticImageMap} from "./utils/static-map";
-export function createImage(globalOptions, nuxtContext) {
-  const staticImageManifest = process.client && process.static ? useStaticImageMap(nuxtContext) : {};
-  const ctx = {
-    options: globalOptions,
-    nuxtContext
-  };
-  const getImage = function(input, options = {}) {
-    const image = resolveImage(ctx, input, options);
-    if (image.isStatic) {
-      handleStaticImage(image, input);
-    }
-    return image;
-  };
-  const $img = function $img2(input, modifiers = {}, options = {}) {
-    return getImage(input, {
-      ...options,
-      modifiers: defu(modifiers, options.modifiers || {})
-    }).url;
-  };
-  function handleStaticImage(image, input) {
-    if (process.static) {
-      if (process.client && "fetchPayload" in window.$nuxt) {
-        const mappedURL = staticImageManifest[image.url];
-        image.url = mappedURL || input;
-        return image;
-      }
-      if (process.server) {
-        const {ssrContext} = ctx.nuxtContext;
-        if (ssrContext) {
-          const ssrState = ssrContext.nuxt || {};
-          const staticImages = ssrState._img = ssrState._img || {};
-          const ssrData = ssrState.data?.[0];
-          if (ssrData) {
-            ssrData._img = staticImages;
-          }
-          const mapToStatic = ssrContext.image?.mapToStatic;
-          if (typeof mapToStatic === "function") {
-            const mappedURL = mapToStatic(image, input);
-            if (mappedURL) {
-              staticImages[image.url] = mappedURL;
-              image.url = mappedURL;
-            }
-          }
-        }
-      }
-    } else if (process.env.NODE_ENV === "production") {
-      image.url = input;
-    }
-  }
-  for (const presetName in globalOptions.presets) {
-    $img[presetName] = (source, modifiers, options) => $img(source, modifiers, {...globalOptions.presets[presetName], ...options});
-  }
-  $img.options = globalOptions;
-  $img.getImage = getImage;
-  $img.getMeta = (input, options) => getMeta(ctx, input, options);
-  $img.getSizes = (input, options) => getSizes(ctx, input, options);
-  ctx.$img = $img;
-  return $img;
-}
-async function getMeta(ctx, input, options) {
-  const image = resolveImage(ctx, input, {...options});
-  if (typeof image.getMeta === "function") {
-    return await image.getMeta();
-  } else {
-    return await imageMeta(ctx, image.url);
-  }
-}
-function resolveImage(ctx, input, options) {
-  if (typeof input !== "string" || input === "") {
-    throw new TypeError(`input must be a string (received ${typeof input}: ${JSON.stringify(input)})`);
-  }
-  if (input.startsWith("data:")) {
-    return {
-      url: input
-    };
-  }
-  const {provider, defaults} = getProvider(ctx, options.provider || ctx.options.provider);
-  const preset = getPreset(ctx, options.preset);
-  input = hasProtocol(input) ? input : withLeadingSlash(input);
-  if (!provider.supportsAlias) {
-    for (const base in ctx.options.alias) {
-      if (input.startsWith(base)) {
-        input = joinURL(ctx.options.alias[base], input.substr(base.length));
-      }
-    }
-  }
-  if (provider.validateDomains && hasProtocol(input)) {
-    const inputHost = parseURL(input).host;
-    if (!ctx.options.domains.find((d) => d === inputHost)) {
-      return {
-        url: input
-      };
-    }
-  }
-  const _options = defu(options, preset, defaults);
-  _options.modifiers = {..._options.modifiers};
-  const expectedFormat = _options.modifiers.format;
-  if (_options.modifiers?.width) {
-    _options.modifiers.width = parseSize(_options.modifiers.width);
-  }
-  if (_options.modifiers?.height) {
-    _options.modifiers.height = parseSize(_options.modifiers.height);
-  }
-  const image = provider.getImage(input, _options, ctx);
-  image.format = image.format || expectedFormat || "";
-  return image;
-}
-function getProvider(ctx, name) {
-  const provider = ctx.options.providers[name];
-  if (!provider) {
-    throw new Error("Unknown provider: " + name);
-  }
-  return provider;
-}
-function getPreset(ctx, name) {
-  if (!name) {
-    return {};
-  }
-  if (!ctx.options.presets[name]) {
-    throw new Error("Unknown preset: " + name);
-  }
-  return ctx.options.presets[name];
-}
-function getSizes(ctx, input, opts) {
-  const width = parseSize(opts.modifiers?.width);
-  const height = parseSize(opts.modifiers?.height);
-  const hwRatio = width && height ? height / width : 0;
-  const variants = [];
-  const sizes = {};
-  if (typeof opts.sizes === "string") {
-    for (const entry of opts.sizes.split(/[\s,]+/).filter((e) => e)) {
-      const s = entry.split(":");
-      if (s.length !== 2) {
-        continue;
-      }
-      sizes[s[0].trim()] = s[1].trim();
-    }
-  } else {
-    Object.assign(sizes, opts.sizes);
-  }
-  for (const key in sizes) {
-    const screenMaxWidth = ctx.options.screens && ctx.options.screens[key] || parseInt(key);
-    let size = String(sizes[key]);
-    const isFluid = size.endsWith("vw");
-    if (!isFluid && /^\d+$/.test(size)) {
-      size = size + "px";
-    }
-    if (!isFluid && !size.endsWith("px")) {
-      continue;
-    }
-    let _cWidth = parseInt(size);
-    if (!screenMaxWidth || !_cWidth) {
-      continue;
-    }
-    if (isFluid) {
-      _cWidth = Math.round(_cWidth / 100 * screenMaxWidth);
-    }
-    const _cHeight = hwRatio ? Math.round(_cWidth * hwRatio) : height;
-    variants.push({
-      width: _cWidth,
-      size,
-      screenMaxWidth,
-      media: `(max-width: ${screenMaxWidth}px)`,
-      src: ctx.$img(input, {...opts.modifiers, width: _cWidth, height: _cHeight}, opts)
-    });
-  }
-  variants.sort((v1, v2) => v1.screenMaxWidth - v2.screenMaxWidth);
-  const defaultVar = variants[variants.length - 1];
-  if (defaultVar) {
-    defaultVar.media = "";
-  }
-  let srcset = [];
-  if (ctx.options.srcset && ctx.options.srcset.length) {
-    srcset = ctx.options.srcset.map((width2) => {
-      const _cHeight = hwRatio ? Math.round(width2 * hwRatio) : height;
-      return {
-        src: ctx.$img(input, {...opts.modifiers, width: width2, height: _cHeight}, opts),
-        width: width2
-      };
-    });
-  } else {
-    srcset = variants;
-  }
-  return {
-    sizes: variants.map((v) => `${v.media ? v.media + " " : ""}${v.size}`).join(", "),
-    srcset: srcset.map((v) => `${v.src} ${v.width}w`).join(", "),
-    src: defaultVar?.src
-  };
-}

package/dist/runtime/index.d.ts

@@ -1,2 +0,0 @@
-export * from './image';
-export * from './utils';

package/dist/runtime/index.js

@@ -1,2 +0,0 @@
-export * from "./image";
-export * from "./utils";

package/dist/runtime/ipx.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="node" />
-declare const _default: (req: import("http").IncomingMessage, res: import("http").ServerResponse) => void;
-export default _default;

package/dist/runtime/ipx.js

@@ -1,3 +0,0 @@
-import {createIPX, createIPXMiddleware} from "ipx";
-const ipx = createIPX("__IPX_OPTIONS__");
-export default createIPXMiddleware(ipx);

package/dist/runtime/plugin.d.ts

@@ -1 +0,0 @@
-export default function _default(nuxtContext: any, inject: any): void;

package/dist/runtime/plugin.js

@@ -1,31 +0,0 @@
-import Vue from 'vue'
-import { createImage} from '~image'
-import NuxtImg from '~image/components/nuxt-img.vue'
-import NuxtPicture from '~image/components/nuxt-picture.vue'
-
-<%=options.providers.map(p => `import * as ${p.importName} from '${p.runtime}'`).join('\n')%>
-
-const imageOptions = <%= JSON.stringify(options.imageOptions, null, 2) %>
-
-imageOptions.providers = {
-<%=options.providers.map(p => `  ['${p.name}']: { provider: ${p.importName}, defaults: ${JSON.stringify(p.runtimeOptions)} }`).join(',\n') %>
-}
-
-
-Vue.component(NuxtImg.name, NuxtImg)
-Vue.component(NuxtPicture.name, NuxtPicture)
-Vue.component('NImg', NuxtImg)
-Vue.component('NPicture', NuxtPicture)
-
-export default function (nuxtContext, inject) {
-  const $img = createImage(imageOptions, nuxtContext)
-
-  if (process.static && process.server) {
-    nuxtContext.beforeNuxtRender(({ nuxtState }) => {
-      const ssrData = nuxtState.data[0] || {}
-      ssrData._img = nuxtState._img || {}
-    })
-  }
-  
-  inject('img', $img)
-}

package/dist/runtime/providers/cloudinary.d.ts

@@ -1,2 +0,0 @@
-import type { ProviderGetImage } from 'src';
-export declare const getImage: ProviderGetImage;

package/dist/runtime/providers/cloudinary.js

@@ -1,96 +0,0 @@
-import {joinURL, encodePath} from "ufo";
-import defu from "defu";
-import {createOperationsGenerator} from "~image";
-const convertHextoRGBFormat = (value) => value.startsWith("#") ? value.replace("#", "rgb_") : value;
-const removePathExtension = (value) => value.replace(/\.[^/.]+$/, "");
-const operationsGenerator = createOperationsGenerator({
-  keyMap: {
-    fit: "c",
-    width: "w",
-    height: "h",
-    format: "f",
-    quality: "q",
-    background: "b",
-    rotate: "a",
-    roundCorner: "r",
-    gravity: "g",
-    effect: "e",
-    color: "co",
-    flags: "fl",
-    dpr: "dpr",
-    opacity: "o",
-    overlay: "l",
-    underlay: "u",
-    transformation: "t",
-    zoom: "z",
-    colorSpace: "cs",
-    customFunc: "fn",
-    density: "dpi"
-  },
-  valueMap: {
-    fit: {
-      fill: "fill",
-      inside: "pad",
-      outside: "lpad",
-      cover: "fit",
-      contain: "scale",
-      minCover: "mfit",
-      minInside: "mpad",
-      thumbnail: "thumb",
-      cropping: "crop",
-      coverLimit: "limit"
-    },
-    format: {
-      jpeg: "jpg"
-    },
-    background(value) {
-      return convertHextoRGBFormat(value);
-    },
-    color(value) {
-      return convertHextoRGBFormat(value);
-    },
-    gravity: {
-      auto: "auto",
-      subject: "auto:subject",
-      face: "face",
-      sink: "sink",
-      faceCenter: "face:center",
-      multipleFaces: "faces",
-      multipleFacesCenter: "faces:center",
-      north: "north",
-      northEast: "north_east",
-      northWest: "north_west",
-      west: "west",
-      southWest: "south_west",
-      south: "south",
-      southEast: "south_east",
-      east: "east",
-      center: "center"
-    }
-  },
-  joinWith: ",",
-  formatter: (key, value) => `${key}_${value}`
-});
-const defaultModifiers = {
-  format: "auto",
-  quality: "auto"
-};
-export const getImage = (src, {modifiers = {}, baseURL = "/"} = {}) => {
-  const mergeModifiers = defu(modifiers, defaultModifiers);
-  const operations = operationsGenerator(mergeModifiers);
-  const remoteFolderMapping = baseURL.match(/\/image\/upload\/(.*)/);
-  if (remoteFolderMapping?.length >= 1) {
-    const remoteFolder = remoteFolderMapping[1];
-    const baseURLWithoutRemoteFolder = baseURL.replace(remoteFolder, "");
-    return {
-      url: joinURL(baseURLWithoutRemoteFolder, operations, remoteFolder, src)
-    };
-  } else if (/\/image\/fetch\/?/.test(baseURL)) {
-    src = encodePath(src);
-  } else {
-    src = removePathExtension(src);
-  }
-  return {
-    url: joinURL(baseURL, operations, src)
-  };
-};

package/dist/runtime/providers/fastly.d.ts

@@ -1,2 +0,0 @@
-import type { ProviderGetImage } from 'src';
-export declare const getImage: ProviderGetImage;

package/dist/runtime/providers/fastly.js

@@ -1,21 +0,0 @@
-import {joinURL} from "ufo";
-import {createOperationsGenerator} from "~image";
-const operationsGenerator = createOperationsGenerator({
-  valueMap: {
-    fit: {
-      fill: "crop",
-      inside: "crop",
-      outside: "crop",
-      cover: "bounds",
-      contain: "bounds"
-    }
-  },
-  joinWith: "&",
-  formatter: (key, value) => `${key}=${value}`
-});
-export const getImage = (src, {modifiers = {}, baseURL = "/"} = {}) => {
-  const operations = operationsGenerator(modifiers);
-  return {
-    url: joinURL(baseURL, src + (operations ? "?" + operations : ""))
-  };
-};

package/dist/runtime/providers/glide.d.ts

@@ -1,2 +0,0 @@
-import { ProviderGetImage } from 'src';
-export declare const getImage: ProviderGetImage;

package/dist/runtime/providers/glide.js

@@ -1,49 +0,0 @@
-import {joinURL, encodeQueryItem, encodePath} from "ufo";
-import {createOperationsGenerator} from "~image";
-const operationsGenerator = createOperationsGenerator({
-  keyMap: {
-    orientation: "or",
-    flip: "flip",
-    crop: "crop",
-    width: "w",
-    height: "h",
-    fit: "fit",
-    dpr: "dpr",
-    bri: "bri",
-    con: "con",
-    gam: "gam",
-    sharp: "sharp",
-    blur: "blur",
-    pixel: "pixel",
-    filt: "filt",
-    mark: "mark",
-    markw: "markw",
-    markh: "markh",
-    markx: "markx",
-    marky: "marky",
-    markpad: "markpad",
-    markpos: "markpos",
-    markalpha: "markalpha",
-    background: "bg",
-    border: "border",
-    quality: "q",
-    format: "fm"
-  },
-  valueMap: {
-    fit: {
-      fill: "fill",
-      inside: "max",
-      outside: "stretch",
-      cover: "crop",
-      contain: "contain"
-    }
-  },
-  joinWith: "&",
-  formatter: (key, val) => encodeQueryItem(key, val)
-});
-export const getImage = (src, {modifiers = {}, baseURL = "/"} = {}) => {
-  const params = operationsGenerator(modifiers);
-  return {
-    url: joinURL(baseURL, encodePath(src) + (params ? "?" + params : ""))
-  };
-};

package/dist/runtime/providers/imagekit.d.ts

@@ -1,2 +0,0 @@
-import type { ProviderGetImage } from 'src';
-export declare const getImage: ProviderGetImage;