gatsby-plugin-image
Version:
Adding responsive images to your site while maintaining high performance scores can be difficult to do manually. The Gatsby Image plugin handles the hard parts of producing images in multiple sizes and formats for you!
130 lines (129 loc) • 6.74 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
exports.__esModule = true;
exports.watchImage = void 0;
var chokidar_1 = __importDefault(require("chokidar"));
var image_processing_1 = require("./image-processing");
var watcher;
/**
* Watch a static source image for changes during develop
*/
function watchImage(_a) {
var _this = this;
var fullPath = _a.fullPath, pathPrefix = _a.pathPrefix, createNodeId = _a.createNodeId, createNode = _a.createNode, cache = _a.cache, reporter = _a.reporter;
// We use a shared watcher, but only create it if needed
if (!watcher) {
watcher = chokidar_1["default"].watch(fullPath);
watcher.on("change", function (path) { return __awaiter(_this, void 0, void 0, function () {
var node;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
reporter.verbose("Image changed: ".concat(path));
return [4 /*yield*/, (0, image_processing_1.createImageNode)({
fullPath: path,
createNodeId: createNodeId,
createNode: createNode,
reporter: reporter
})];
case 1:
node = _a.sent();
if (!node) {
reporter.warn("Could not process image ".concat(path));
return [2 /*return*/];
}
return [4 /*yield*/, updateImages({ node: node, cache: cache, pathPrefix: pathPrefix, reporter: reporter })];
case 2:
_a.sent();
return [2 /*return*/];
}
});
}); });
}
else {
// If we already have a watcher, just add this image to it
watcher.add(fullPath);
}
}
exports.watchImage = watchImage;
/**
* Update any static image instances that use a source image
*/
function updateImages(_a) {
var cache = _a.cache, node = _a.node, pathPrefix = _a.pathPrefix, reporter = _a.reporter;
return __awaiter(this, void 0, void 0, function () {
var imageRefs;
var _this = this;
return __generator(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, cache.get("ref-".concat(node.id))];
case 1:
imageRefs = _b.sent();
if (!imageRefs) {
return [2 /*return*/];
}
return [4 /*yield*/, Promise.all(Object.values(imageRefs).map(function (_a) {
var contentDigest = _a.contentDigest, args = _a.args, cacheFilename = _a.cacheFilename;
return __awaiter(_this, void 0, void 0, function () {
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
if (contentDigest && contentDigest === node.internal.contentDigest) {
// Skipping, because the file is unchanged
return [2 /*return*/];
}
// Update the image
return [4 /*yield*/, (0, image_processing_1.writeImage)(node, args, pathPrefix, reporter, cache, cacheFilename)];
case 1:
// Update the image
_b.sent();
return [2 /*return*/];
}
});
});
}))];
case 2:
_b.sent();
return [2 /*return*/];
}
});
});
}