@teamnovu/nuxt-image 0.5.5 → 1.0.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +229 -24
- package/dist/module.d.mts +70 -0
- package/dist/module.json +12 -0
- package/dist/module.mjs +67 -0
- package/dist/runtime/components/NovuBunnyImage.d.vue.ts +11 -0
- package/dist/runtime/components/NovuBunnyImage.vue +67 -0
- package/dist/runtime/components/NovuBunnyImage.vue.d.ts +11 -0
- package/dist/runtime/components/NovuCloudinaryImage.d.vue.ts +19 -0
- package/dist/runtime/components/NovuCloudinaryImage.vue +79 -0
- package/dist/runtime/components/NovuCloudinaryImage.vue.d.ts +19 -0
- package/dist/runtime/components/NovuImage.d.vue.ts +28 -0
- package/dist/runtime/components/NovuImage.vue +90 -0
- package/dist/runtime/components/NovuImage.vue.d.ts +28 -0
- package/dist/runtime/components/NovuImgproxyImage.d.vue.ts +12 -0
- package/dist/runtime/components/NovuImgproxyImage.vue +68 -0
- package/dist/runtime/components/NovuImgproxyImage.vue.d.ts +12 -0
- package/dist/runtime/components/NovuStatamicImage.d.vue.ts +17 -0
- package/dist/runtime/components/NovuStatamicImage.vue +87 -0
- package/dist/runtime/components/NovuStatamicImage.vue.d.ts +17 -0
- package/dist/runtime/composables/useResponsiveImage.d.ts +42 -0
- package/dist/runtime/composables/useResponsiveImage.js +115 -0
- package/dist/runtime/providers/imgproxy.d.ts +68 -0
- package/dist/runtime/providers/imgproxy.js +160 -0
- package/dist/runtime/types.d.ts +56 -0
- package/dist/runtime/types.js +0 -0
- package/dist/runtime/utils/focal.d.ts +11 -0
- package/dist/runtime/utils/focal.js +33 -0
- package/dist/runtime/utils/i18n.d.ts +1 -0
- package/dist/runtime/utils/i18n.js +10 -0
- package/dist/runtime/utils/numbers.d.ts +1 -0
- package/dist/runtime/utils/numbers.js +6 -0
- package/dist/runtime/utils/providerModifiers.d.ts +4 -0
- package/dist/runtime/utils/providerModifiers.js +36 -0
- package/dist/runtime/utils/screens.d.ts +5 -0
- package/dist/runtime/utils/screens.js +19 -0
- package/dist/runtime/utils/statamic.d.ts +3 -0
- package/dist/runtime/utils/statamic.js +143 -0
- package/dist/types.d.mts +3 -0
- package/package.json +65 -68
- package/CHANGELOG.md +0 -373
- package/LICENSE +0 -21
- package/dist/module.js +0 -482
- package/dist/runtime/components/image.mixin.d.ts +0 -46
- package/dist/runtime/components/image.mixin.js +0 -58
- package/dist/runtime/components/nuxt-img.vue +0 -49
- package/dist/runtime/components/nuxt-img.vue.d.ts +0 -12
- package/dist/runtime/components/nuxt-picture.vue +0 -86
- package/dist/runtime/components/nuxt-picture.vue.d.ts +0 -15
- package/dist/runtime/image.d.ts +0 -2
- package/dist/runtime/image.js +0 -194
- package/dist/runtime/index.d.ts +0 -2
- package/dist/runtime/index.js +0 -2
- package/dist/runtime/ipx.d.ts +0 -3
- package/dist/runtime/ipx.js +0 -3
- package/dist/runtime/plugin.d.ts +0 -1
- package/dist/runtime/plugin.js +0 -31
- package/dist/runtime/providers/cloudinary.d.ts +0 -2
- package/dist/runtime/providers/cloudinary.js +0 -96
- package/dist/runtime/providers/fastly.d.ts +0 -2
- package/dist/runtime/providers/fastly.js +0 -21
- package/dist/runtime/providers/glide.d.ts +0 -2
- package/dist/runtime/providers/glide.js +0 -49
- package/dist/runtime/providers/imagekit.d.ts +0 -2
- package/dist/runtime/providers/imagekit.js +0 -172
- package/dist/runtime/providers/imgix.d.ts +0 -3
- package/dist/runtime/providers/imgix.js +0 -153
- package/dist/runtime/providers/ipx.d.ts +0 -4
- package/dist/runtime/providers/ipx.js +0 -28
- package/dist/runtime/providers/netlify.d.ts +0 -3
- package/dist/runtime/providers/netlify.js +0 -40
- package/dist/runtime/providers/prismic.d.ts +0 -2
- package/dist/runtime/providers/prismic.js +0 -10
- package/dist/runtime/providers/sanity.d.ts +0 -2
- package/dist/runtime/providers/sanity.js +0 -87
- package/dist/runtime/providers/static.d.ts +0 -3
- package/dist/runtime/providers/static.js +0 -6
- package/dist/runtime/providers/storyblok.d.ts +0 -2
- package/dist/runtime/providers/storyblok.js +0 -27
- package/dist/runtime/providers/twicpics.d.ts +0 -2
- package/dist/runtime/providers/twicpics.js +0 -58
- package/dist/runtime/providers/vercel.d.ts +0 -3
- package/dist/runtime/providers/vercel.js +0 -28
- package/dist/runtime/utils/index.d.ts +0 -17
- package/dist/runtime/utils/index.js +0 -72
- package/dist/runtime/utils/meta.d.ts +0 -2
- package/dist/runtime/utils/meta.js +0 -67
- package/dist/runtime/utils/static-map.d.ts +0 -2
- package/dist/runtime/utils/static-map.js +0 -20
- package/dist/types.d.ts +0 -172
- package/vetur/attributes.json +0 -32
- package/vetur/tags.json +0 -32
package/dist/module.js
DELETED
|
@@ -1,482 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const upath = require('upath');
|
|
4
|
-
const defu = require('defu');
|
|
5
|
-
const ufo = require('ufo');
|
|
6
|
-
const require$$0 = require('fs');
|
|
7
|
-
const util = require('util');
|
|
8
|
-
const stream = require('stream');
|
|
9
|
-
const fsExtra = require('fs-extra');
|
|
10
|
-
const fetch = require('node-fetch');
|
|
11
|
-
const pLimit = require('p-limit');
|
|
12
|
-
const consola = require('consola');
|
|
13
|
-
const require$$1 = require('path');
|
|
14
|
-
const require$$2 = require('crypto');
|
|
15
|
-
const require$$4 = require('worker_threads');
|
|
16
|
-
const rc9 = require('rc9');
|
|
17
|
-
const semver = require('semver');
|
|
18
|
-
|
|
19
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
|
-
|
|
21
|
-
function _interopNamespace(e) {
|
|
22
|
-
if (e && e.__esModule) return e;
|
|
23
|
-
var n = Object.create(null);
|
|
24
|
-
if (e) {
|
|
25
|
-
Object.keys(e).forEach(function (k) {
|
|
26
|
-
if (k !== 'default') {
|
|
27
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
28
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
29
|
-
enumerable: true,
|
|
30
|
-
get: function () {
|
|
31
|
-
return e[k];
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
n['default'] = e;
|
|
38
|
-
return Object.freeze(n);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
const defu__default = /*#__PURE__*/_interopDefaultLegacy(defu);
|
|
42
|
-
const require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
|
|
43
|
-
const stream__default = /*#__PURE__*/_interopDefaultLegacy(stream);
|
|
44
|
-
const fetch__default = /*#__PURE__*/_interopDefaultLegacy(fetch);
|
|
45
|
-
const pLimit__default = /*#__PURE__*/_interopDefaultLegacy(pLimit);
|
|
46
|
-
const consola__default = /*#__PURE__*/_interopDefaultLegacy(consola);
|
|
47
|
-
const require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1);
|
|
48
|
-
const require$$2__default = /*#__PURE__*/_interopDefaultLegacy(require$$2);
|
|
49
|
-
const require$$4__default = /*#__PURE__*/_interopDefaultLegacy(require$$4);
|
|
50
|
-
|
|
51
|
-
const isStream$1 = stream =>
|
|
52
|
-
stream !== null &&
|
|
53
|
-
typeof stream === 'object' &&
|
|
54
|
-
typeof stream.pipe === 'function';
|
|
55
|
-
|
|
56
|
-
isStream$1.writable = stream =>
|
|
57
|
-
isStream$1(stream) &&
|
|
58
|
-
stream.writable !== false &&
|
|
59
|
-
typeof stream._write === 'function' &&
|
|
60
|
-
typeof stream._writableState === 'object';
|
|
61
|
-
|
|
62
|
-
isStream$1.readable = stream =>
|
|
63
|
-
isStream$1(stream) &&
|
|
64
|
-
stream.readable !== false &&
|
|
65
|
-
typeof stream._read === 'function' &&
|
|
66
|
-
typeof stream._readableState === 'object';
|
|
67
|
-
|
|
68
|
-
isStream$1.duplex = stream =>
|
|
69
|
-
isStream$1.writable(stream) &&
|
|
70
|
-
isStream$1.readable(stream);
|
|
71
|
-
|
|
72
|
-
isStream$1.transform = stream =>
|
|
73
|
-
isStream$1.duplex(stream) &&
|
|
74
|
-
typeof stream._transform === 'function' &&
|
|
75
|
-
typeof stream._transformState === 'object';
|
|
76
|
-
|
|
77
|
-
var isStream_1 = isStream$1;
|
|
78
|
-
|
|
79
|
-
const fs = require$$0__default['default'];
|
|
80
|
-
const path = require$$1__default['default'];
|
|
81
|
-
const crypto = require$$2__default['default'];
|
|
82
|
-
const isStream = isStream_1;
|
|
83
|
-
|
|
84
|
-
const {Worker} = (() => {
|
|
85
|
-
try {
|
|
86
|
-
return require$$4__default['default'];
|
|
87
|
-
} catch (_) {
|
|
88
|
-
return {};
|
|
89
|
-
}
|
|
90
|
-
})();
|
|
91
|
-
|
|
92
|
-
let worker; // Lazy
|
|
93
|
-
let taskIdCounter = 0;
|
|
94
|
-
const tasks = new Map();
|
|
95
|
-
|
|
96
|
-
const recreateWorkerError = sourceError => {
|
|
97
|
-
const error = new Error(sourceError.message);
|
|
98
|
-
|
|
99
|
-
for (const [key, value] of Object.entries(sourceError)) {
|
|
100
|
-
if (key !== 'message') {
|
|
101
|
-
error[key] = value;
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
return error;
|
|
106
|
-
};
|
|
107
|
-
|
|
108
|
-
const createWorker = () => {
|
|
109
|
-
worker = new Worker(path.join(__dirname, 'thread.js'));
|
|
110
|
-
|
|
111
|
-
worker.on('message', message => {
|
|
112
|
-
const task = tasks.get(message.id);
|
|
113
|
-
tasks.delete(message.id);
|
|
114
|
-
|
|
115
|
-
if (tasks.size === 0) {
|
|
116
|
-
worker.unref();
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
if (message.error === undefined) {
|
|
120
|
-
task.resolve(message.value);
|
|
121
|
-
} else {
|
|
122
|
-
task.reject(recreateWorkerError(message.error));
|
|
123
|
-
}
|
|
124
|
-
});
|
|
125
|
-
|
|
126
|
-
worker.on('error', error => {
|
|
127
|
-
// Any error here is effectively an equivalent of segfault, and have no scope, so we just throw it on callback level
|
|
128
|
-
throw error;
|
|
129
|
-
});
|
|
130
|
-
};
|
|
131
|
-
|
|
132
|
-
const taskWorker = (method, args, transferList) => new Promise((resolve, reject) => {
|
|
133
|
-
const id = taskIdCounter++;
|
|
134
|
-
tasks.set(id, {resolve, reject});
|
|
135
|
-
|
|
136
|
-
if (worker === undefined) {
|
|
137
|
-
createWorker();
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
worker.ref();
|
|
141
|
-
worker.postMessage({id, method, args}, transferList);
|
|
142
|
-
});
|
|
143
|
-
|
|
144
|
-
const hasha = (input, options = {}) => {
|
|
145
|
-
let outputEncoding = options.encoding || 'hex';
|
|
146
|
-
|
|
147
|
-
if (outputEncoding === 'buffer') {
|
|
148
|
-
outputEncoding = undefined;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
const hash = crypto.createHash(options.algorithm || 'sha512');
|
|
152
|
-
|
|
153
|
-
const update = buffer => {
|
|
154
|
-
const inputEncoding = typeof buffer === 'string' ? 'utf8' : undefined;
|
|
155
|
-
hash.update(buffer, inputEncoding);
|
|
156
|
-
};
|
|
157
|
-
|
|
158
|
-
if (Array.isArray(input)) {
|
|
159
|
-
input.forEach(update);
|
|
160
|
-
} else {
|
|
161
|
-
update(input);
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
return hash.digest(outputEncoding);
|
|
165
|
-
};
|
|
166
|
-
|
|
167
|
-
hasha.stream = (options = {}) => {
|
|
168
|
-
let outputEncoding = options.encoding || 'hex';
|
|
169
|
-
|
|
170
|
-
if (outputEncoding === 'buffer') {
|
|
171
|
-
outputEncoding = undefined;
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
const stream = crypto.createHash(options.algorithm || 'sha512');
|
|
175
|
-
stream.setEncoding(outputEncoding);
|
|
176
|
-
return stream;
|
|
177
|
-
};
|
|
178
|
-
|
|
179
|
-
hasha.fromStream = async (stream, options = {}) => {
|
|
180
|
-
if (!isStream(stream)) {
|
|
181
|
-
throw new TypeError('Expected a stream');
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
return new Promise((resolve, reject) => {
|
|
185
|
-
// TODO: Use `stream.pipeline` and `stream.finished` when targeting Node.js 10
|
|
186
|
-
stream
|
|
187
|
-
.on('error', reject)
|
|
188
|
-
.pipe(hasha.stream(options))
|
|
189
|
-
.on('error', reject)
|
|
190
|
-
.on('finish', function () {
|
|
191
|
-
resolve(this.read());
|
|
192
|
-
});
|
|
193
|
-
});
|
|
194
|
-
};
|
|
195
|
-
|
|
196
|
-
if (Worker === undefined) {
|
|
197
|
-
hasha.fromFile = async (filePath, options) => hasha.fromStream(fs.createReadStream(filePath), options);
|
|
198
|
-
hasha.async = async (input, options) => hasha(input, options);
|
|
199
|
-
} else {
|
|
200
|
-
hasha.fromFile = async (filePath, {algorithm = 'sha512', encoding = 'hex'} = {}) => {
|
|
201
|
-
const hash = await taskWorker('hashFile', [algorithm, filePath]);
|
|
202
|
-
|
|
203
|
-
if (encoding === 'buffer') {
|
|
204
|
-
return Buffer.from(hash);
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
return Buffer.from(hash).toString(encoding);
|
|
208
|
-
};
|
|
209
|
-
|
|
210
|
-
hasha.async = async (input, {algorithm = 'sha512', encoding = 'hex'} = {}) => {
|
|
211
|
-
if (encoding === 'buffer') {
|
|
212
|
-
encoding = undefined;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
const hash = await taskWorker('hash', [algorithm, input]);
|
|
216
|
-
|
|
217
|
-
if (encoding === undefined) {
|
|
218
|
-
return Buffer.from(hash);
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
return Buffer.from(hash).toString(encoding);
|
|
222
|
-
};
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
hasha.fromFileSync = (filePath, options) => hasha(fs.readFileSync(filePath), options);
|
|
226
|
-
|
|
227
|
-
var hasha_1 = hasha;
|
|
228
|
-
|
|
229
|
-
var name = "@teamnovu/nuxt-image";
|
|
230
|
-
var version = "0.5.5";
|
|
231
|
-
|
|
232
|
-
const logger = consola__default['default'].withScope("@teamnovu/nuxt-image");
|
|
233
|
-
const pkg = {name, version};
|
|
234
|
-
function hash(value, length = 6) {
|
|
235
|
-
return hasha_1(value).substr(0, length);
|
|
236
|
-
}
|
|
237
|
-
function pick(obj, keys) {
|
|
238
|
-
const newobj = {};
|
|
239
|
-
for (const key of keys) {
|
|
240
|
-
newobj[key] = obj[key];
|
|
241
|
-
}
|
|
242
|
-
return newobj;
|
|
243
|
-
}
|
|
244
|
-
function guessExt(input = "") {
|
|
245
|
-
var _a;
|
|
246
|
-
const ext = (_a = input.split(".").pop()) == null ? void 0 : _a.split("?")[0];
|
|
247
|
-
if (ext && /^[\w0-9]+$/.test(ext)) {
|
|
248
|
-
return "." + ext;
|
|
249
|
-
}
|
|
250
|
-
return "";
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
const pipeline = util.promisify(stream__default['default'].pipeline);
|
|
254
|
-
function setupStaticGeneration(nuxt, options) {
|
|
255
|
-
const staticImages = {};
|
|
256
|
-
nuxt.hook("vue-renderer:ssr:prepareContext", (renderContext) => {
|
|
257
|
-
renderContext.image = renderContext.image || {};
|
|
258
|
-
renderContext.image.mapToStatic = function({url, format}, input) {
|
|
259
|
-
if (!staticImages[url]) {
|
|
260
|
-
const {pathname} = ufo.parseURL(input);
|
|
261
|
-
const params = {
|
|
262
|
-
name: upath.trimExt(upath.basename(pathname)),
|
|
263
|
-
ext: format && `.${format}` || guessExt(input),
|
|
264
|
-
hash: hash(url),
|
|
265
|
-
publicPath: nuxt.options.app.cdnURL ? "/" : ufo.withoutTrailingSlash(nuxt.options.build.publicPath)
|
|
266
|
-
};
|
|
267
|
-
staticImages[url] = options.staticFilename.replace(/\[(\w+)]/g, (match, key) => params[key] || match);
|
|
268
|
-
}
|
|
269
|
-
return ufo.joinURL(nuxt.options.app.cdnURL || nuxt.options.app.basePath, staticImages[url]);
|
|
270
|
-
};
|
|
271
|
-
});
|
|
272
|
-
nuxt.hook("generate:done", async () => {
|
|
273
|
-
const limit = pLimit__default['default'](8);
|
|
274
|
-
const downloads = Object.entries(staticImages).map(([url, name]) => {
|
|
275
|
-
if (!ufo.hasProtocol(url)) {
|
|
276
|
-
url = ufo.joinURL(options.internalUrl, url);
|
|
277
|
-
}
|
|
278
|
-
return limit(() => downloadImage({
|
|
279
|
-
url,
|
|
280
|
-
name,
|
|
281
|
-
outDir: nuxt.options.generate.dir
|
|
282
|
-
}));
|
|
283
|
-
});
|
|
284
|
-
await Promise.all(downloads);
|
|
285
|
-
});
|
|
286
|
-
}
|
|
287
|
-
async function downloadImage({url, name, outDir}) {
|
|
288
|
-
try {
|
|
289
|
-
const response = await fetch__default['default'](url);
|
|
290
|
-
if (!response.ok) {
|
|
291
|
-
throw new Error(`Unexpected response ${response.statusText}`);
|
|
292
|
-
}
|
|
293
|
-
const dstFile = upath.join(outDir, name);
|
|
294
|
-
await fsExtra.mkdirp(upath.dirname(dstFile));
|
|
295
|
-
await pipeline(response.body, require$$0.createWriteStream(dstFile));
|
|
296
|
-
logger.success("Generated static image " + upath.relative(process.cwd(), dstFile));
|
|
297
|
-
} catch (error) {
|
|
298
|
-
logger.error(error.message);
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
const ipxSetup = async (_providerOptions, moduleOptions, nuxt) => {
|
|
303
|
-
const isStatic = nuxt.options.target === "static";
|
|
304
|
-
const runtimeDir = upath.resolve(__dirname, "runtime");
|
|
305
|
-
const ipxOptions = {
|
|
306
|
-
dir: upath.resolve(nuxt.options.rootDir, moduleOptions.dir),
|
|
307
|
-
domains: moduleOptions.domains,
|
|
308
|
-
sharp: moduleOptions.sharp,
|
|
309
|
-
alias: moduleOptions.alias
|
|
310
|
-
};
|
|
311
|
-
const hasUserProvidedIPX = !!nuxt.options.serverMiddleware.find((mw) => mw.path && mw.path.startsWith("/_ipx"));
|
|
312
|
-
if (!hasUserProvidedIPX) {
|
|
313
|
-
const {createIPX, createIPXMiddleware} = await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('ipx')); });
|
|
314
|
-
const ipx = createIPX(ipxOptions);
|
|
315
|
-
nuxt.options.serverMiddleware.push({
|
|
316
|
-
path: "/_ipx",
|
|
317
|
-
handle: createIPXMiddleware(ipx)
|
|
318
|
-
});
|
|
319
|
-
}
|
|
320
|
-
const installedInModules = nuxt.options.modules.some((mod) => typeof mod === "string" && mod.includes("@teamnovu/nuxt-image"));
|
|
321
|
-
if (!isStatic && !hasUserProvidedIPX && !installedInModules && semver.lt(nuxt.constructor.version, "2.16.0")) {
|
|
322
|
-
console.warn("[@teamnovu/nuxt-image] If you would like to use the `ipx` provider at runtime.\nMake sure to follow the instructions at https://image.nuxtjs.org/providers/ipx .");
|
|
323
|
-
}
|
|
324
|
-
if (nuxt.options.dev || hasUserProvidedIPX) {
|
|
325
|
-
return;
|
|
326
|
-
}
|
|
327
|
-
nuxt.hook("build:done", async () => {
|
|
328
|
-
const handler = await fsExtra.readFile(upath.resolve(runtimeDir, "ipx.js"), "utf-8");
|
|
329
|
-
const distDir = upath.resolve(nuxt.options.buildDir, "dist");
|
|
330
|
-
const apiDir = upath.resolve(distDir, "api");
|
|
331
|
-
const apiFile = upath.resolve(apiDir, "ipx.js");
|
|
332
|
-
const relativeApiFile = "~~/" + upath.relative(nuxt.options.rootDir, apiFile);
|
|
333
|
-
await fsExtra.mkdirp(apiDir);
|
|
334
|
-
await fsExtra.writeFile(apiFile, handler.replace(/.__IPX_OPTIONS__./, JSON.stringify(ipxOptions)));
|
|
335
|
-
rc9.update({serverMiddleware: [{path: "/_ipx", handler: relativeApiFile}]}, {dir: distDir, name: "nuxtrc"});
|
|
336
|
-
});
|
|
337
|
-
};
|
|
338
|
-
|
|
339
|
-
const BuiltInProviders = [
|
|
340
|
-
"cloudinary",
|
|
341
|
-
"fastly",
|
|
342
|
-
"glide",
|
|
343
|
-
"imagekit",
|
|
344
|
-
"imgix",
|
|
345
|
-
"ipx",
|
|
346
|
-
"netlify",
|
|
347
|
-
"prismic",
|
|
348
|
-
"sanity",
|
|
349
|
-
"static",
|
|
350
|
-
"twicpics",
|
|
351
|
-
"storyblok",
|
|
352
|
-
"vercel"
|
|
353
|
-
];
|
|
354
|
-
const providerSetup = {
|
|
355
|
-
ipx: ipxSetup,
|
|
356
|
-
static: ipxSetup,
|
|
357
|
-
async vercel(_providerOptions, moduleOptions, nuxt) {
|
|
358
|
-
const imagesConfig = upath.resolve(nuxt.options.rootDir, ".vercel_build_output/config/images.json");
|
|
359
|
-
await fsExtra.mkdirp(upath.dirname(imagesConfig));
|
|
360
|
-
await fsExtra.writeJson(imagesConfig, {
|
|
361
|
-
domains: moduleOptions.domains,
|
|
362
|
-
sizes: Array.from(new Set(Object.values(moduleOptions.screens || {})))
|
|
363
|
-
});
|
|
364
|
-
}
|
|
365
|
-
};
|
|
366
|
-
function resolveProviders(nuxt, options) {
|
|
367
|
-
const providers = [];
|
|
368
|
-
for (const key in options) {
|
|
369
|
-
if (BuiltInProviders.includes(key)) {
|
|
370
|
-
providers.push(resolveProvider(nuxt, key, {provider: key, options: options[key]}));
|
|
371
|
-
}
|
|
372
|
-
}
|
|
373
|
-
for (const key in options.providers) {
|
|
374
|
-
providers.push(resolveProvider(nuxt, key, options.providers[key]));
|
|
375
|
-
}
|
|
376
|
-
return providers;
|
|
377
|
-
}
|
|
378
|
-
function resolveProvider(nuxt, key, input) {
|
|
379
|
-
if (typeof input === "string") {
|
|
380
|
-
input = {name: input};
|
|
381
|
-
}
|
|
382
|
-
if (!input.name) {
|
|
383
|
-
input.name = key;
|
|
384
|
-
}
|
|
385
|
-
if (!input.provider) {
|
|
386
|
-
input.provider = input.name;
|
|
387
|
-
}
|
|
388
|
-
input.provider = BuiltInProviders.includes(input.provider) ? require.resolve("./runtime/providers/" + input.provider) : nuxt.resolver.resolvePath(input.provider);
|
|
389
|
-
const setup = input.setup || providerSetup[input.name];
|
|
390
|
-
return {
|
|
391
|
-
...input,
|
|
392
|
-
setup,
|
|
393
|
-
runtime: upath.normalize(input.provider),
|
|
394
|
-
importName: `${key}Runtime$${hash(input.provider, 4)}`,
|
|
395
|
-
runtimeOptions: input.options
|
|
396
|
-
};
|
|
397
|
-
}
|
|
398
|
-
function detectProvider(userInput, isStatic = false) {
|
|
399
|
-
if (process.env.NUXT_IMAGE_PROVIDER) {
|
|
400
|
-
return process.env.NUXT_IMAGE_PROVIDER;
|
|
401
|
-
}
|
|
402
|
-
if (userInput && userInput !== "auto") {
|
|
403
|
-
return userInput;
|
|
404
|
-
}
|
|
405
|
-
if (process.env.VERCEL || process.env.VERCEL_ENV || process.env.NOW_BUILDER) {
|
|
406
|
-
return "vercel";
|
|
407
|
-
}
|
|
408
|
-
return isStatic ? "static" : "ipx";
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
const imageModule = async function imageModule2(moduleOptions) {
|
|
412
|
-
const {nuxt, addPlugin} = this;
|
|
413
|
-
const defaults = {
|
|
414
|
-
staticFilename: "[publicPath]/image/[hash][ext]",
|
|
415
|
-
provider: "auto",
|
|
416
|
-
presets: {},
|
|
417
|
-
dir: upath.resolve(nuxt.options.srcDir, nuxt.options.dir.static),
|
|
418
|
-
domains: [],
|
|
419
|
-
sharp: {},
|
|
420
|
-
screens: {
|
|
421
|
-
xs: 320,
|
|
422
|
-
sm: 640,
|
|
423
|
-
md: 768,
|
|
424
|
-
lg: 1024,
|
|
425
|
-
xl: 1280,
|
|
426
|
-
xxl: 1536,
|
|
427
|
-
"2xl": 1536
|
|
428
|
-
},
|
|
429
|
-
srcset: [],
|
|
430
|
-
internalUrl: "",
|
|
431
|
-
providers: {},
|
|
432
|
-
static: {},
|
|
433
|
-
alias: {}
|
|
434
|
-
};
|
|
435
|
-
const options = defu__default['default'](moduleOptions, nuxt.options.image, defaults);
|
|
436
|
-
options.domains = options.domains.map((domain) => ufo.parseURL(domain, "https://").host).filter(Boolean);
|
|
437
|
-
options.alias = Object.fromEntries(Object.entries(options.alias).map((e) => [ufo.withLeadingSlash(e[0]), e[1]]));
|
|
438
|
-
options.provider = detectProvider(options.provider, nuxt.options.target === "static");
|
|
439
|
-
options[options.provider] = options[options.provider] || {};
|
|
440
|
-
const imageOptions = pick(options, [
|
|
441
|
-
"screens",
|
|
442
|
-
"srcset",
|
|
443
|
-
"presets",
|
|
444
|
-
"provider",
|
|
445
|
-
"domains",
|
|
446
|
-
"alias"
|
|
447
|
-
]);
|
|
448
|
-
const providers = resolveProviders(nuxt, options);
|
|
449
|
-
for (const p of providers) {
|
|
450
|
-
if (typeof p.setup === "function") {
|
|
451
|
-
await p.setup(p, options, nuxt);
|
|
452
|
-
}
|
|
453
|
-
}
|
|
454
|
-
const runtimeDir = upath.resolve(__dirname, "runtime");
|
|
455
|
-
nuxt.options.alias["~image"] = runtimeDir;
|
|
456
|
-
nuxt.options.build.transpile.push(runtimeDir, "@teamnovu/nuxt-image", "allowlist", "defu", "ufo");
|
|
457
|
-
addPlugin({
|
|
458
|
-
fileName: "image.js",
|
|
459
|
-
src: upath.resolve(runtimeDir, "plugin.js"),
|
|
460
|
-
options: {
|
|
461
|
-
imageOptions,
|
|
462
|
-
providers
|
|
463
|
-
}
|
|
464
|
-
});
|
|
465
|
-
nuxt.options.build.loaders = defu__default['default']({
|
|
466
|
-
vue: {transformAssetUrls: {"nuxt-img": "src", "nuxt-picture": "src", NuxtPicture: "src", NuxtImg: "src"}}
|
|
467
|
-
}, nuxt.options.build.loaders || {});
|
|
468
|
-
nuxt.hook("generate:before", () => {
|
|
469
|
-
setupStaticGeneration(nuxt, options);
|
|
470
|
-
});
|
|
471
|
-
const LruCache = await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('lru-cache')); }).then((r) => r.default || r);
|
|
472
|
-
const cache = new LruCache();
|
|
473
|
-
nuxt.hook("vue-renderer:context", (ssrContext) => {
|
|
474
|
-
ssrContext.cache = cache;
|
|
475
|
-
});
|
|
476
|
-
nuxt.hook("listen", (_, listener) => {
|
|
477
|
-
options.internalUrl = `http://localhost:${listener.port}`;
|
|
478
|
-
});
|
|
479
|
-
};
|
|
480
|
-
imageModule.meta = pkg;
|
|
481
|
-
|
|
482
|
-
module.exports = imageModule;
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
export declare const imageMixin: {
|
|
2
|
-
nImgAttrs: {
|
|
3
|
-
width?: number;
|
|
4
|
-
height?: number;
|
|
5
|
-
alt?: string;
|
|
6
|
-
referrerpolicy?: string;
|
|
7
|
-
usemap?: string;
|
|
8
|
-
longdesc?: string;
|
|
9
|
-
ismap?: boolean;
|
|
10
|
-
crossorigin?: '' | 'anonymous' | 'use-credentials';
|
|
11
|
-
loading?: string;
|
|
12
|
-
decoding?: 'async' | 'auto' | 'sync';
|
|
13
|
-
};
|
|
14
|
-
nModifiers: {
|
|
15
|
-
width?: number;
|
|
16
|
-
height?: number;
|
|
17
|
-
format?: string;
|
|
18
|
-
quality?: string | number;
|
|
19
|
-
background?: string;
|
|
20
|
-
fit?: string;
|
|
21
|
-
} & Record<string, any>;
|
|
22
|
-
nOptions: {
|
|
23
|
-
provider?: string;
|
|
24
|
-
preset?: string;
|
|
25
|
-
};
|
|
26
|
-
} & {
|
|
27
|
-
src: string;
|
|
28
|
-
format: string;
|
|
29
|
-
quality: string | number;
|
|
30
|
-
background: string;
|
|
31
|
-
fit: string;
|
|
32
|
-
modifiers: Record<string, any>;
|
|
33
|
-
preset: string;
|
|
34
|
-
provider: string;
|
|
35
|
-
sizes: string | Record<string, any>;
|
|
36
|
-
width: string | number;
|
|
37
|
-
height: string | number;
|
|
38
|
-
alt: string;
|
|
39
|
-
referrerpolicy: string;
|
|
40
|
-
usemap: string;
|
|
41
|
-
longdesc: string;
|
|
42
|
-
ismap: boolean;
|
|
43
|
-
crossorigin: boolean | "" | "anonymous" | "use-credentials";
|
|
44
|
-
loading: string;
|
|
45
|
-
decoding: "async" | "auto" | "sync";
|
|
46
|
-
} & import("vue").VueConstructor<import("vue").default>;
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import {parseSize} from "../utils";
|
|
2
|
-
const defineMixin = (opts) => opts;
|
|
3
|
-
export const imageMixin = defineMixin({
|
|
4
|
-
props: {
|
|
5
|
-
src: {type: String, required: true},
|
|
6
|
-
format: {type: String, default: void 0},
|
|
7
|
-
quality: {type: [Number, String], default: void 0},
|
|
8
|
-
background: {type: String, default: void 0},
|
|
9
|
-
fit: {type: String, default: void 0},
|
|
10
|
-
modifiers: {type: Object, default: void 0},
|
|
11
|
-
preset: {type: String, default: void 0},
|
|
12
|
-
provider: {type: String, default: void 0},
|
|
13
|
-
sizes: {type: [Object, String], default: void 0},
|
|
14
|
-
width: {type: [String, Number], default: void 0},
|
|
15
|
-
height: {type: [String, Number], default: void 0},
|
|
16
|
-
alt: {type: String, default: void 0},
|
|
17
|
-
referrerpolicy: {type: String, default: void 0},
|
|
18
|
-
usemap: {type: String, default: void 0},
|
|
19
|
-
longdesc: {type: String, default: void 0},
|
|
20
|
-
ismap: {type: Boolean, default: void 0},
|
|
21
|
-
crossorigin: {type: [Boolean, String], default: void 0, validator: (val) => ["anonymous", "use-credentials", "", true, false].includes(val)},
|
|
22
|
-
loading: {type: String, default: void 0},
|
|
23
|
-
decoding: {type: String, default: void 0, validator: (val) => ["async", "auto", "sync"].includes(val)}
|
|
24
|
-
},
|
|
25
|
-
computed: {
|
|
26
|
-
nImgAttrs() {
|
|
27
|
-
return {
|
|
28
|
-
width: parseSize(this.width),
|
|
29
|
-
height: parseSize(this.height),
|
|
30
|
-
alt: this.alt,
|
|
31
|
-
referrerpolicy: this.referrerpolicy,
|
|
32
|
-
usemap: this.usemap,
|
|
33
|
-
longdesc: this.longdesc,
|
|
34
|
-
ismap: this.ismap,
|
|
35
|
-
crossorigin: this.crossorigin === true ? "anonymous" : this.crossorigin || void 0,
|
|
36
|
-
loading: this.loading,
|
|
37
|
-
decoding: this.decoding
|
|
38
|
-
};
|
|
39
|
-
},
|
|
40
|
-
nModifiers() {
|
|
41
|
-
return {
|
|
42
|
-
...this.modifiers,
|
|
43
|
-
width: parseSize(this.width),
|
|
44
|
-
height: parseSize(this.height),
|
|
45
|
-
format: this.format,
|
|
46
|
-
quality: this.quality,
|
|
47
|
-
background: this.background,
|
|
48
|
-
fit: this.fit
|
|
49
|
-
};
|
|
50
|
-
},
|
|
51
|
-
nOptions() {
|
|
52
|
-
return {
|
|
53
|
-
provider: this.provider,
|
|
54
|
-
preset: this.preset
|
|
55
|
-
};
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
});
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<img
|
|
3
|
-
:key="nSrc"
|
|
4
|
-
:src="nSrc"
|
|
5
|
-
v-bind="nAttrs"
|
|
6
|
-
>
|
|
7
|
-
</template>
|
|
8
|
-
|
|
9
|
-
<script>
|
|
10
|
-
import {imageMixin} from "./image.mixin";
|
|
11
|
-
import {parseSize} from "~image";
|
|
12
|
-
const defineComponent = (opts) => opts;
|
|
13
|
-
export default defineComponent({
|
|
14
|
-
name: "NuxtImg",
|
|
15
|
-
mixins: [imageMixin],
|
|
16
|
-
computed: {
|
|
17
|
-
nAttrs() {
|
|
18
|
-
const attrs = this.nImgAttrs;
|
|
19
|
-
if (this.sizes) {
|
|
20
|
-
const {sizes, srcset} = this.nSizes;
|
|
21
|
-
attrs.sizes = sizes;
|
|
22
|
-
attrs.srcset = srcset;
|
|
23
|
-
}
|
|
24
|
-
return attrs;
|
|
25
|
-
},
|
|
26
|
-
nSrc() {
|
|
27
|
-
return this.sizes ? this.nSizes.src : this.$img(this.src, this.nModifiers, this.nOptions);
|
|
28
|
-
},
|
|
29
|
-
nSizes() {
|
|
30
|
-
return this.$img.getSizes(this.src, {
|
|
31
|
-
...this.nOptions,
|
|
32
|
-
sizes: this.sizes,
|
|
33
|
-
modifiers: {
|
|
34
|
-
...this.nModifiers,
|
|
35
|
-
width: parseSize(this.width),
|
|
36
|
-
height: parseSize(this.height)
|
|
37
|
-
}
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
},
|
|
41
|
-
created() {
|
|
42
|
-
if (process.server && process.static) {
|
|
43
|
-
if (this.sizes) {
|
|
44
|
-
this.nSizes;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
</script>
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import type { ImageSizes } from '../../types';
|
|
2
|
-
import { imageMixin } from './image.mixin';
|
|
3
|
-
declare type NAttrs = typeof imageMixin['nImgAttrs'] & {
|
|
4
|
-
sizes?: string;
|
|
5
|
-
srcset?: string;
|
|
6
|
-
};
|
|
7
|
-
declare const _default: import("vue/types/vue").ExtendedVue<import("vue").default, unknown, unknown, {
|
|
8
|
-
nAttrs: NAttrs;
|
|
9
|
-
nSrc: string;
|
|
10
|
-
nSizes: ImageSizes;
|
|
11
|
-
}, unknown>;
|
|
12
|
-
export default _default;
|