Skip to content

Commit

Permalink
feat: use ipx@0.5.x
Browse files Browse the repository at this point in the history
  • Loading branch information
pi0 committed Feb 3, 2021
1 parent a8f4c78 commit fe92ecf
Show file tree
Hide file tree
Showing 11 changed files with 158 additions and 136 deletions.
2 changes: 1 addition & 1 deletion package.json
Expand Up @@ -29,7 +29,7 @@
"fs-extra": "^9.0.1",
"hasha": "^5.2.2",
"image-meta": "^0.0.1",
"ipx": "^0.4.8",
"ipx": "^0.5.2",
"is-https": "^3.0.2",
"node-fetch": "^2.6.1",
"requrl": "^3.0.2",
Expand Down
19 changes: 9 additions & 10 deletions playground/nuxt.config.ts
Expand Up @@ -11,9 +11,10 @@ export default <NuxtConfig> {
'@nuxt/typescript-build'
],
image: {
accept: [
'nuxtjs.org',
'unsplash.com'
domains: [
'https://nuxtjs.org',
'https://unsplash.com',
'https://upload.wikimedia.org'
],
twicpics: {
baseURL: 'https://nuxt-demo.twic.pics'
Expand All @@ -30,24 +31,22 @@ export default <NuxtConfig> {
imagekit: {
baseURL: 'https://ik.imagekit.io/demo'
},

providers: {
custom: {
provider: "~/providers/custom",
provider: '~/providers/custom',
options: {
baseURL: "https://site.my"
baseURL: 'https://site.my'
}
}
},
presets: [
{
name: 's50',
presets: {
s50: {
modifiers: {
width: 50,
height: 50
}
}
],
},
intersectOptions: {
rootMargin: '50px'
}
Expand Down
4 changes: 2 additions & 2 deletions playground/pages/index.vue
Expand Up @@ -25,8 +25,8 @@
/>
<img ref="img" src="/images/damavand.jpg" width="200" height="100" loading="lazy">
<pre>{{ nuxtImgCode }}</pre>
</p><h2>SVG image from remote url</h2>
<NuxtImg src="https://nuxtjs.org/logos/nuxt.svg" width="400" height="400" />
<h2>SVG image from remote url</h2>
<NuxtImg src="https://nuxtjs.org/logos/nuxt.svg?foo=bar" width="400" height="400" />

<h2>JPEG image inside project</h2>
<NuxtImg responsive src="/images/damavand.jpg" />
Expand Down
28 changes: 4 additions & 24 deletions src/ipx.ts
@@ -1,25 +1,5 @@
export function createIPXMiddleware (options) {
const { IPX, IPXMiddleware } = require('ipx')

const ipx = new IPX({
inputs: [
{
name: 'remote',
adapter: 'remote',
accept: [/.*/]
},
{
name: 'static',
adapter: 'fs',
dir: options.dir
}
],
cache: {
dir: options.cacheDir,
cleanCron: options.clearCache
},
sharp: options.sharp
})

return IPXMiddleware(ipx)
export function createIPXMiddleware (ipxOptions) {
const { createIPX, createIPXMiddleware } = require('ipx')
const ipx = createIPX(ipxOptions)
return createIPXMiddleware(ipx)
}
27 changes: 14 additions & 13 deletions src/module.ts
Expand Up @@ -12,17 +12,13 @@ async function imageModule (moduleOptions: ModuleOptions) {
const defaults: ModuleOptions = {
provider: 'static',
presets: {},
static: {
baseURL: '/_img',
dir: resolve(nuxt.options.srcDir, nuxt.options.dir.static),
clearCache: false,
cacheDir: 'node_modules/.cache/nuxt-image', /* TODO */
accept: [],
sharp: {}
},
dir: resolve(nuxt.options.srcDir, nuxt.options.dir.static),
domains: [],
sharp: {},
sizes: undefined,
internalUrl: '',
providers: {},
accept: [],
static: {},
intersectOptions: {}
}

Expand All @@ -39,10 +35,11 @@ async function imageModule (moduleOptions: ModuleOptions) {
'sizes',
'presets',
'provider',
'intersectOptions',
'accept'
'intersectOptions'
])

options.static.domains = options.domains

const providers = await resolveProviders(nuxt, options)

// Transpile and alias runtime
Expand All @@ -61,8 +58,12 @@ async function imageModule (moduleOptions: ModuleOptions) {
})

addServerMiddleware({
path: options.static.baseURL,
handle: createIPXMiddleware(options.static)
path: '/_ipx',
handle: createIPXMiddleware({
dir: options.dir,
domains: options.domains,
sharp: options.sharp
})
})

nuxt.options.build.loaders = defu({
Expand Down
6 changes: 2 additions & 4 deletions src/runtime/image.ts
@@ -1,6 +1,5 @@
import { allowList } from 'allowlist'
import defu from 'defu'
import { hasProtocol, joinURL } from 'ufo'
import { joinURL } from 'ufo'
import type { ImageOptions, CreateImageOptions, ResolvedImage, MapToStatic, ImageCTX, $Img } from '../types/image'
import { imageMeta } from './utils/meta'
import { parseSize } from './utils'
Expand All @@ -11,7 +10,6 @@ export function createImage (globalOptions: CreateImageOptions, nuxtContext) {

const ctx: ImageCTX = {
options: globalOptions,
accept: allowList(globalOptions.accept),
nuxtContext
}

Expand Down Expand Up @@ -95,7 +93,7 @@ function resolveImage (ctx: ImageCTX, input: string, options: ImageOptions): Res
throw new TypeError(`input must be a string (received ${typeof input}: ${JSON.stringify(input)})`)
}

if (input.startsWith('data:') || (hasProtocol(input) && !ctx.accept(input))) {
if (input.startsWith('data:')) {
return {
url: input
}
Expand Down
36 changes: 16 additions & 20 deletions src/runtime/providers/ipx.ts
@@ -1,43 +1,39 @@
import { ProviderGetImage } from 'src'
import { hasProtocol, joinURL } from 'ufo'
import { joinURL, encodeQueryItem, encodePath, hasProtocol } from 'ufo'
import { createOperationsGenerator } from '~image'

const operationsGenerator = createOperationsGenerator({
keyMap: {
fit: 'f',
format: 'f',
fit: 'fit',
width: 'w',
height: 'h',
resize: 's',
quality: 'q',
background: 'b'
background: 'bg'
},
valueMap: {
background (value = '') {
if (value.startsWith('#')) {
return value.replace('#', 'hex_')
}
return value
}
},
joinWith: ',',
formatter: (key, value) => `${key}_${value}`
joinWith: '&',
formatter: (key, val) => encodeQueryItem(key, val)
})

export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL = '/' } = {}) => {
const format = modifiers.format || '_'
delete modifiers.format

export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL = '/_ipx', domains = [] } = {}) => {
if (modifiers.width && modifiers.height) {
modifiers.resize = `${modifiers.width}_${modifiers.height}`
delete modifiers.width
delete modifiers.height
}

const operationsString = operationsGenerator(modifiers) || '_'
const params = operationsGenerator(modifiers)

const type = hasProtocol(src) ? 'remote' : 'static'
if (hasProtocol(src)) {
if (!domains.find(d => src.startsWith(d))) {
return {
url: src
}
}
}

return {
url: joinURL(baseURL, type, format, operationsString, src)
url: joinURL(baseURL, encodePath(src) + (params ? '?' + params : ''))
}
}
1 change: 0 additions & 1 deletion src/runtime/utils/static-map.ts
Expand Up @@ -4,7 +4,6 @@ function updateImageMap () {
if (typeof window.$nuxt !== 'undefined') {
const pageImages = (window.$nuxt as any)._pagePayload?.data?.[0]?._img || {}
Object.assign(staticImageMap, pageImages)
console.log(staticImageMap)
}
}

Expand Down
4 changes: 0 additions & 4 deletions src/types/image.d.ts
@@ -1,5 +1,3 @@
import type { AllowlistOptions, Matcher } from 'allowlist'

export interface ImageModifiers {
width: number
height: number
Expand Down Expand Up @@ -34,7 +32,6 @@ export interface CreateImageOptions {
provider: string
intersectOptions: object
sizes?: (number | string)[]
accept: AllowlistOptions
}

export interface ImageInfo {
Expand All @@ -61,7 +58,6 @@ export interface $Img {

export interface ImageCTX {
options: CreateImageOptions,
accept: Matcher<any>
nuxtContext: {
ssrContext: any
cache?: any
Expand Down
35 changes: 15 additions & 20 deletions src/types/module.d.ts
@@ -1,35 +1,30 @@
import type { IPXOptions } from 'ipx'
import type { ImageOptions } from './image'

export interface InputProvider {
export interface InputProvider<T=any> {
name?: string
provider?: string
options?: any
baseURL?: string
options?: T
}

export interface ImageProviders {
cloudinary?: InputProvider,
fastly?: InputProvider,
imagekit?: InputProvider,
imgix?: InputProvider,
twicpics?: InputProvider,
cloudinary?: any
fastly?: any
imagekit?: any
imgix?: any
twicpics?: any
ipx?: Partial<IPXOptions>
static?: Partial<IPXOptions>
}

export interface ModuleOptions extends ImageProviders {
provider: string
presets: { [name: string]: ImageOptions }
static: {
baseURL: string
dir: string
clearCache: boolean | string
cacheDir: string
accept: string[]
sharp: { [key: string]: any }
}
sizes?: (number|string)[],
internalUrl?: string
accept: any
dir: string
domains: string[]
sharp: {}
sizes: (number|string)[],
internalUrl: string
intersectOptions: object

providers: { [name: string]: InputProvider | any } & ImageProviders
}

0 comments on commit fe92ecf

Please sign in to comment.