From d4d5174572382583015ca1dbd442aaacf0bcd4f0 Mon Sep 17 00:00:00 2001 From: Nicolas Langle Date: Thu, 27 Jun 2024 07:00:34 +0200 Subject: [PATCH 1/3] feat (theme): watch conf-img/tpl folder and never forget to generate sizes and locations json --- assets/conf-img/image-locations.json | 28 --- assets/conf-img/image-sizes.json | 19 -- config/WebpackImageSizesPlugin.js | 261 ++++++++++++++++++++++++++ config/image-sizes.js | 264 --------------------------- config/plugins.js | 4 + package.json | 5 +- src/img/default/.gitkeep | 0 src/js/post-build.js | 3 - yarn.lock | 134 +------------- 9 files changed, 269 insertions(+), 449 deletions(-) delete mode 100644 assets/conf-img/image-locations.json delete mode 100644 assets/conf-img/image-sizes.json create mode 100644 config/WebpackImageSizesPlugin.js delete mode 100644 config/image-sizes.js delete mode 100644 src/img/default/.gitkeep diff --git a/assets/conf-img/image-locations.json b/assets/conf-img/image-locations.json deleted file mode 100644 index f83964d4..00000000 --- a/assets/conf-img/image-locations.json +++ /dev/null @@ -1,28 +0,0 @@ -[ - { - "square": [ - { - "srcsets": [ - { - "srcset": "", - "size": "img-100-100" - }, - { - "srcset": "2x", - "size": "img-200-200" - }, - { - "srcset": "", - "size": "img-200-200" - }, - { - "srcset": "2x", - "size": "img-400-400" - } - ], - "default_img": "default-400-400.jpg", - "img_base": "img-400-400" - } - ] - } -] \ No newline at end of file diff --git a/assets/conf-img/image-sizes.json b/assets/conf-img/image-sizes.json deleted file mode 100644 index 1c4975b7..00000000 --- a/assets/conf-img/image-sizes.json +++ /dev/null @@ -1,19 +0,0 @@ -[ - { - "img-100-100": { - "width": "100", - "height": "100", - "crop": true - }, - "img-200-200": { - "width": "200", - "height": "200", - "crop": true - }, - "img-400-400": { - "width": "400", - "height": "400", - "crop": true - } - } -] \ No newline at end of file diff --git a/config/WebpackImageSizesPlugin.js b/config/WebpackImageSizesPlugin.js new file mode 100644 index 00000000..cff9c0d1 --- /dev/null +++ b/config/WebpackImageSizesPlugin.js @@ -0,0 +1,261 @@ +const chalk = require('chalk') +const path = require('path') +const fs = require('fs') +const sharp = require('sharp') + +const logId = '[' + chalk.blue('WebpackImageSizesPlugin') + ']' + +class WebpackImageSizesPlugin { + constructor(options) { + // folders + this._confImgFolder = path.resolve(__dirname, '../assets/conf-img') + '/' + this._tplFolder = this._confImgFolder + 'tpl/' + this._defaultImagesFolder = path.resolve(__dirname, '../dist/images') + '/' + + // files + this._imageSisesJson = this._confImgFolder + 'image-sizes.json' + this._imageLocationsJson = this._confImgFolder + 'image-locations.json' + this._imageDefault = path.resolve(__dirname, '../src/img/static') + '/default.jpg' + + // list of [filnename]: sizes + this._defaultImages = {} + + if (options.watch) { + fs.watch(this._tplFolder, () => { + this.runImageSizeScript() + this.generateDefaultImages() + }) + } + + this.runImageSizeScript() + } + + /** + * apply + */ + apply(compiler) { + compiler.hooks.afterEmit.tapAsync('WebpackImageSizesPlugin', (compilation, callback) => { + this.generateDefaultImages() + callback() + }) + } + + /** + * Image size script + */ + runImageSizeScript() { + const that = this + const regex = { + srcset: /data-srcset="(.[^"]*)"/gm, + crop: /crop="(.[^"]*)"/gm, + img: /img-\d*-\d*/gm, + } + + const locations = {} + const sizes = {} + + let nbLocations = 0 + let nbSizes = 0 + + /** + * reset defaultImages + */ + this._defaultImages = {} + + /** + * Return an array of names of tpl files + * @return {array} + */ + function getTemplateFileNames() { + return fs.readdirSync(that._tplFolder).filter((tpl) => { + if (tpl !== 'default-picture.tpl' && tpl !== 'default-picture-caption.tpl') { + return tpl + } + }) + } + + /** + * Return content of tpl file + * @param {string} templateFileName + * @return {string} + */ + function getTemplateFileContent(templateFileName) { + return fs.readFileSync(that._tplFolder + templateFileName, 'utf8') + } + + /** + * Create a json file + * @param {string} destPath + * @param data + * @return undefined + */ + function createJsonFile(destPath, data) { + createFile(destPath, JSON.stringify(data, null, 2)) + } + + /** + * Remove extension template name + * @param {string} name + * @return {String} + */ + function removeFileExtension(name) { + return name.split('.')[0] + } + + /** + * Generate default location name based on image size + * @param {String} size + * @return {String} + */ + function getDefaultImgName(str) { + return `${str.replace('img', 'default')}.jpg` + } + + /** + * Check if srcset is retina + * @param {String} src + * @return {Array} + */ + function isRetina(src) { + const retina = [] + src.split(',').forEach((val) => { + if (val.includes('2x')) { + retina.push('2x') + } else { + retina.push('') + } + }) + return retina + } + + /** + * Create file if he does not exist + * @param {String} filename + * @param {String} json + */ + function createFile(filename, json) { + fs.open(filename, 'r', () => { + fs.writeFileSync(filename, json) + }) + } + + /** + * Get image locations informations from tpl files + */ + function imageLocationsFromTpl() { + const templateFileNames = getTemplateFileNames() + + templateFileNames.forEach((tplName) => { + nbLocations += 1 + const tplContent = getTemplateFileContent(tplName) + const srcsetArr = tplContent.match(regex.srcset) || [] + const cropArr = tplContent.match(regex.crop) + const storage = { + srcsets: [], + default_img: '', + img_base: '', + } + + srcsetArr.forEach((src) => { + const dimensions = src.match(regex.img) + const retina = isRetina(src) + const crop = !(cropArr && cropArr[0] === 'crop="false"') + + dimensions.forEach((size, index) => { + const splitSize = size.split('-') + const srcsetObj = { + srcset: retina[index], + size, + } + + if (sizes[size] && sizes[size].crop !== crop) { + console.log(logId, '\nSize already exists but crop is not equal :', size) + } + + if (!sizes[size]) { + sizes[size] = { + width: splitSize[1], + height: splitSize[2], + crop, + } + + nbSizes += 1 + } + + storage.srcsets.push(srcsetObj) + storage.default_img = getDefaultImgName(size) + storage.img_base = size + + that._defaultImages[getDefaultImgName(size)] = sizes[size] + }) + + locations[removeFileExtension(tplName)] = [storage] + }) + }) + } + + /** + * Init + */ + console.log(logId, 'Generate image locations and sizes JSON files') + + imageLocationsFromTpl() + + createJsonFile(this._imageLocationsJson, [locations]) + createJsonFile(this._imageSisesJson, [sizes]) + + console.log(logId, 'JSON files successfully generated !') + console.log(logId, 'Number of locations:', nbLocations) + console.log(logId, 'Number of sizes:', nbSizes) + + return this + } + + /** + * generate default images + */ + generateDefaultImages() { + if (!fs.existsSync(this._defaultImagesFolder)) { + fs.mkdirSync(this._defaultImagesFolder, { recursive: true }) + } + + for (const filename in this._defaultImages) { + const sizes = this._defaultImages[filename] + const outputFile = this._defaultImagesFolder + filename + + try { + if (fs.existsSync(outputFile)) { + continue + } + + const width = parseInt(sizes.width, 10) + const height = parseInt(sizes.height, 10) + + if (width >= 9999 || height >= 9999) { + continue + } + + sharp(this._imageDefault) + .resize(width, height, { + fit: 'cover', + position: 'center', + }) + .jpeg({ quality: 70, chromaSubsampling: '4:4:4' }) + .toFile(outputFile, (err, info) => { + if (err) { + console.error(logId, err) + } else { + console.log(logId, `Created ${info.width}x${info.height} image`) + console.log(logId, 'at', outputFile.split('/themes/')[1] || '') + } + }) + } catch (err) { + console.error(logId, err) + } + } + + return this + } +} + +module.exports = WebpackImageSizesPlugin diff --git a/config/image-sizes.js b/config/image-sizes.js deleted file mode 100644 index 6c02b8ed..00000000 --- a/config/image-sizes.js +++ /dev/null @@ -1,264 +0,0 @@ -const fs = require('fs') -const ora = require('ora') -const sharp = require('sharp') -const Json2csvParser = require('json2csv').Parser -const fields = ['location', 'sizes.width', 'sizes.height', 'sizes.retina', 'sizes.ratio'] -const dir = { - conf: './assets/conf-img/', - tpl: './assets/conf-img/tpl/', - defaultImages: './src/img/default/', -} -const path = { - imagesSizesCsv: `${dir.conf}images-sizes.csv`, - imagesSizesJson: `${dir.conf}image-sizes.json`, - imageLocationsJson: `${dir.conf}image-locations.json`, -} -const regex = { - srcset: /data-srcset="(.[^"]*)"/gm, - crop: /crop="(.[^"]*)"/gm, - img: /img-\d*-\d*/gm, -} -//the default image -const defaultFile = './src/img/static/default.jpg' -// the default image quality -const compression = 70 - -const locations = {} -const sizes = {} - -const isExport = process.argv[2] === 'csv' -let nbLocations = 0 -let nbSizes = 0 - -/** - * Return an array of names of tpl files - * @return {array} - */ -function getTemplateFileNames() { - return fs.readdirSync(dir.tpl).filter((tpl) => { - if (tpl !== 'default-picture.tpl' && tpl !== 'default-picture-caption.tpl') { - return tpl - } - }) -} - -/** - * Return content of tpl file - * @param {string} templateFileName - * @return {string} - */ -function getTemplateFileContent(templateFileName) { - return fs.readFileSync(dir.tpl + templateFileName, 'utf8') -} - -/** - * Create a json file - * @param {string} destPath - * @param data - * @return undefined - */ -function createJsonFile(destPath, data) { - createFile(destPath, JSON.stringify(data, null, 2)) -} - -/** - * Remove extension template name - * @param {string} name - * @return {String} - */ -function removeFileExtension(name) { - return name.split('.')[0] -} - -/** - * Generate default location name based on image size - * @param {String} size - * @return {String} - */ -function getDefaultImgName(str) { - return `${str.replace('img', 'default')}.jpg` -} - -/** - * Check if srcset is retina - * @param {String} src - * @return {Array} - */ -function isRetina(src) { - const retina = [] - src.split(',').forEach((val) => { - if (val.includes('2x')) { - retina.push('2x') - } else { - retina.push('') - } - }) - return retina -} - -/** - * Create file if he does not exist - * @param {String} filename - * @param {String} json - */ -function createFile(filename, json) { - fs.open(filename, 'r', () => { - fs.writeFileSync(filename, json) - }) -} - -/** - * Get image locations informations from tpl files - */ -function imageLocationsFromTpl() { - const templateFileNames = getTemplateFileNames() - - templateFileNames.forEach((tplName) => { - nbLocations += 1 - const tplContent = getTemplateFileContent(tplName) - const srcsetArr = tplContent.match(regex.srcset) - const cropArr = tplContent.match(regex.crop) - const storage = { - srcsets: [], - default_img: '', - img_base: '', - } - - srcsetArr.forEach((src) => { - const dimensions = src.match(regex.img) - const retina = isRetina(src) - const crop = !(cropArr && cropArr[0] === 'crop="false"') - - dimensions.forEach((size, index) => { - const splitSize = size.split('-') - const srcsetObj = { - srcset: retina[index], - size, - } - - // TODO: check if size already exists - if (sizes[size] && sizes[size].crop !== crop) { - console.log('\nSize already exists but crop is not equal :', size) - } - - if (!sizes[size]) { - sizes[size] = { - width: splitSize[1], - height: splitSize[2], - crop, - } - - nbSizes += 1 - } - - storage.srcsets.push(srcsetObj) - storage.default_img = getDefaultImgName(size) - storage.img_base = size - - generateDefaultImage(sizes[size], getDefaultImgName(size)) - }) - - locations[removeFileExtension(tplName)] = [storage] - }) - }) -} - -/** - * Generate a default file from width and height - * @param {object} sizes dimensions of image - * @param {string} filename default image filename - * @returns {void} - */ -function generateDefaultImage(sizes, filename) { - const outputFile = dir.defaultImages + filename - try { - if (fs.existsSync(outputFile)) { - return - } - - const width = parseInt(sizes.width, 10) - const height = parseInt(sizes.height, 10) - - if (width >= 9999 || height >= 9999) { - return - } - - sharp(defaultFile) - .resize(width, height, { - fit: 'cover', - position: 'center', - }) - .jpeg({ quality: compression, chromaSubsampling: '4:4:4' }) - .toFile(outputFile, (err, info) => { - if (err) { - console.error(err) - } else { - console.log(`Created ${info.width}x${info.height} image at ${outputFile}`) - } - }) - } catch (err) { - console.error(err) - } -} - -/** - * Export all data as CSV - */ -function exportCSV() { - const CSVInfo = [] - const json2csvParser = new Json2csvParser({ - fields, - unwind: 'sizes', - }) - let csv - let location - - for (location in locations) { - const srcsets = locations[location][0].srcsets - const CSVObj = { - location, - sizes: [], - } - - CSVInfo.push(CSVObj) - - srcsets.forEach((val) => { - const splitSize = val.size.split('-') - - CSVObj.sizes.push({ - retina: val.srcset === '2x' ? '✓' : '×', - width: `${splitSize[1]}px`, - height: `${splitSize[2]}px`, - ratio: splitSize[1] / splitSize[2], - }) - }) - } - - csv = json2csvParser.parse(CSVInfo) - csv = csv.replace(/sizes./g, '') - createFile(path.imagesSizesCsv, csv) -} - -/** - * Init function - */ -function init() { - const spinner = ora('Generate image locations and sizes JSON files').start() - imageLocationsFromTpl() - - createJsonFile(path.imageLocationsJson, [locations]) - createJsonFile(path.imagesSizesJson, [sizes]) - - if (isExport) { - exportCSV() - spinner.succeed( - `JSON files successfully generated !\nNumber of locations : ${nbLocations} \nNumber of sizes : ${nbSizes} \nCSV exported` - ) - return - } - spinner.succeed( - `JSON files successfully generated !\nNumber of locations : ${nbLocations} \nNumber of sizes : ${nbSizes}` - ) -} - -init() diff --git a/config/plugins.js b/config/plugins.js index 1e15da99..275aba60 100644 --- a/config/plugins.js +++ b/config/plugins.js @@ -11,6 +11,7 @@ const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extract const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin const browsersyncConfig = require('./browsersync.config') +const WebpackImageSizesPlugin = require('./WebpackImageSizesPlugin') module.exports = { get: function (mode) { @@ -33,6 +34,9 @@ module.exports = { color: '#ffe600', }), new DependencyExtractionWebpackPlugin(), + new WebpackImageSizesPlugin({ + watch: mode !== 'production', + }), ] if (mode === 'production') { diff --git a/package.json b/package.json index 9772e0a1..90595126 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,7 @@ "lint:css": "node_modules/.bin/stylelint \"src/scss/**/*.scss\"", "lint:js": "node_modules/.bin/eslint \"src/js/**/*.js\"", "lint": "node_modules/.bin/concurrently \"npx yarn lint:css\" \"npx yarn lint:js\"", - "bundle-report": "yarn build && yarn webpack-bundle-analyzer dist/stats.json", - "image": "yarn node config/image-sizes.js" + "bundle-report": "yarn build && yarn webpack-bundle-analyzer dist/stats.json" }, "license": "GPL-2.0", "dependencies": { @@ -45,9 +44,7 @@ "imagemin-optipng": "^8.0.0", "imagemin-svgo": "^10.0.1", "js-yaml": "^4.1.0", - "json2csv": "^5.0.6", "mini-css-extract-plugin": "^1.5.0", - "ora": "^5.4.0", "portfinder": "^1.0.28", "postcss": "^8.4.24", "postcss-import": "^15.1.0", diff --git a/src/img/default/.gitkeep b/src/img/default/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/src/js/post-build.js b/src/js/post-build.js index 26e0a806..3e5db5d3 100644 --- a/src/js/post-build.js +++ b/src/js/post-build.js @@ -5,8 +5,5 @@ function requireAll(r) { // SVG requireAll(require.context('../img/icons', true, /\.svg$/)) -// DEFAULT -requireAll(require.context('../img/default', true, /\.(png|jpe?g)$/)) - // STATIC requireAll(require.context('../img/static', true, /\.(png|jpe?g|gif)$/)) diff --git a/yarn.lock b/yarn.lock index 7d878329..4e129e59 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1994,11 +1994,9 @@ __metadata: imagemin-optipng: ^8.0.0 imagemin-svgo: ^10.0.1 js-yaml: ^4.1.0 - json2csv: ^5.0.6 lazysizes: ^5.3.2 mini-css-extract-plugin: ^1.5.0 oneloop.js: ^5.0.0 - ora: ^5.4.0 portfinder: ^1.0.28 postcss: ^8.4.24 postcss-import: ^15.1.0 @@ -2111,7 +2109,7 @@ __metadata: languageName: node linkType: hard -"bl@npm:^4.0.3, bl@npm:^4.1.0": +"bl@npm:^4.0.3": version: 4.1.0 resolution: "bl@npm:4.1.0" dependencies: @@ -2618,22 +2616,6 @@ __metadata: languageName: node linkType: hard -"cli-cursor@npm:^3.1.0": - version: 3.1.0 - resolution: "cli-cursor@npm:3.1.0" - dependencies: - restore-cursor: ^3.1.0 - checksum: 2692784c6cd2fd85cfdbd11f53aea73a463a6d64a77c3e098b2b4697a20443f430c220629e1ca3b195ea5ac4a97a74c2ee411f3807abf6df2b66211fec0c0a29 - languageName: node - linkType: hard - -"cli-spinners@npm:^2.5.0": - version: 2.9.2 - resolution: "cli-spinners@npm:2.9.2" - checksum: 1bd588289b28432e4676cb5d40505cfe3e53f2e4e10fbe05c8a710a154d6fe0ce7836844b00d6858f740f2ffe67cdc36e0fce9c7b6a8430e80e6388d5aa4956c - languageName: node - linkType: hard - "clipboard@npm:^2.0.8": version: 2.0.11 resolution: "clipboard@npm:2.0.11" @@ -2698,13 +2680,6 @@ __metadata: languageName: node linkType: hard -"clone@npm:^1.0.2": - version: 1.0.4 - resolution: "clone@npm:1.0.4" - checksum: d06418b7335897209e77bdd430d04f882189582e67bd1f75a04565f3f07f5b3f119a9d670c943b6697d0afb100f03b866b3b8a1f91d4d02d72c4ecf2bb64b5dd - languageName: node - linkType: hard - "clone@npm:^2.1.1": version: 2.1.2 resolution: "clone@npm:2.1.2" @@ -2795,13 +2770,6 @@ __metadata: languageName: node linkType: hard -"commander@npm:^6.1.0": - version: 6.2.1 - resolution: "commander@npm:6.2.1" - checksum: d7090410c0de6bc5c67d3ca41c41760d6d268f3c799e530aafb73b7437d1826bbf0d2a3edac33f8b57cc9887b4a986dce307fa5557e109be40eadb7c43b21742 - languageName: node - linkType: hard - "commander@npm:^7.0.0, commander@npm:^7.2.0": version: 7.2.0 resolution: "commander@npm:7.2.0" @@ -3462,15 +3430,6 @@ __metadata: languageName: node linkType: hard -"defaults@npm:^1.0.3": - version: 1.0.4 - resolution: "defaults@npm:1.0.4" - dependencies: - clone: ^1.0.2 - checksum: 3a88b7a587fc076b84e60affad8b85245c01f60f38fc1d259e7ac1d89eb9ce6abb19e27215de46b98568dd5bc48471730b327637e6f20b0f1bc85cf00440c80a - languageName: node - linkType: hard - "define-data-property@npm:^1.0.1, define-data-property@npm:^1.1.4": version: 1.1.4 resolution: "define-data-property@npm:1.1.4" @@ -6081,13 +6040,6 @@ __metadata: languageName: node linkType: hard -"is-interactive@npm:^1.0.0": - version: 1.0.0 - resolution: "is-interactive@npm:1.0.0" - checksum: 824808776e2d468b2916cdd6c16acacebce060d844c35ca6d82267da692e92c3a16fdba624c50b54a63f38bdc4016055b6f443ce57d7147240de4f8cdabaf6f9 - languageName: node - linkType: hard - "is-jpg@npm:^2.0.0": version: 2.0.0 resolution: "is-jpg@npm:2.0.0" @@ -6302,13 +6254,6 @@ __metadata: languageName: node linkType: hard -"is-unicode-supported@npm:^0.1.0": - version: 0.1.0 - resolution: "is-unicode-supported@npm:0.1.0" - checksum: a2aab86ee7712f5c2f999180daaba5f361bdad1efadc9610ff5b8ab5495b86e4f627839d085c6530363c6d6d4ecbde340fb8e54bdb83da4ba8e0865ed5513c52 - languageName: node - linkType: hard - "is-utf8@npm:^0.2.0": version: 0.2.1 resolution: "is-utf8@npm:0.2.1" @@ -6531,19 +6476,6 @@ __metadata: languageName: node linkType: hard -"json2csv@npm:^5.0.6": - version: 5.0.7 - resolution: "json2csv@npm:5.0.7" - dependencies: - commander: ^6.1.0 - jsonparse: ^1.3.1 - lodash.get: ^4.4.2 - bin: - json2csv: bin/json2csv.js - checksum: 81b511e4f5abba1dcda90593c193d15e5f05f1def91377b6289536e31fdb629889da6a2b4612b9ff699116a29b1758d20c0d71f7921fcfb09863da5b2d883139 - languageName: node - linkType: hard - "json2php@npm:^0.0.7": version: 0.0.7 resolution: "json2php@npm:0.0.7" @@ -6583,13 +6515,6 @@ __metadata: languageName: node linkType: hard -"jsonparse@npm:^1.3.1": - version: 1.3.1 - resolution: "jsonparse@npm:1.3.1" - checksum: 6514a7be4674ebf407afca0eda3ba284b69b07f9958a8d3113ef1005f7ec610860c312be067e450c569aab8b89635e332cee3696789c750692bb60daba627f4d - languageName: node - linkType: hard - "junk@npm:^3.1.0": version: 3.1.0 resolution: "junk@npm:3.1.0" @@ -6783,13 +6708,6 @@ __metadata: languageName: node linkType: hard -"lodash.get@npm:^4.4.2": - version: 4.4.2 - resolution: "lodash.get@npm:4.4.2" - checksum: e403047ddb03181c9d0e92df9556570e2b67e0f0a930fcbbbd779370972368f5568e914f913e93f3b08f6d492abc71e14d4e9b7a18916c31fa04bd2306efe545 - languageName: node - linkType: hard - "lodash.isfinite@npm:^3.3.2": version: 3.3.2 resolution: "lodash.isfinite@npm:3.3.2" @@ -6832,16 +6750,6 @@ __metadata: languageName: node linkType: hard -"log-symbols@npm:^4.1.0": - version: 4.1.0 - resolution: "log-symbols@npm:4.1.0" - dependencies: - chalk: ^4.1.0 - is-unicode-supported: ^0.1.0 - checksum: fce1497b3135a0198803f9f07464165e9eb83ed02ceb2273930a6f8a508951178d8cf4f0378e9d28300a2ed2bc49050995d2bd5f53ab716bb15ac84d58c6ef74 - languageName: node - linkType: hard - "logalot@npm:^2.0.0": version: 2.1.0 resolution: "logalot@npm:2.1.0" @@ -7717,7 +7625,7 @@ __metadata: languageName: node linkType: hard -"onetime@npm:^5.1.0, onetime@npm:^5.1.2": +"onetime@npm:^5.1.2": version: 5.1.2 resolution: "onetime@npm:5.1.2" dependencies: @@ -7777,23 +7685,6 @@ __metadata: languageName: node linkType: hard -"ora@npm:^5.4.0": - version: 5.4.1 - resolution: "ora@npm:5.4.1" - dependencies: - bl: ^4.1.0 - chalk: ^4.1.0 - cli-cursor: ^3.1.0 - cli-spinners: ^2.5.0 - is-interactive: ^1.0.0 - is-unicode-supported: ^0.1.0 - log-symbols: ^4.1.0 - strip-ansi: ^6.0.0 - wcwidth: ^1.0.1 - checksum: 28d476ee6c1049d68368c0dc922e7225e3b5600c3ede88fade8052837f9ed342625fdaa84a6209302587c8ddd9b664f71f0759833cbdb3a4cf81344057e63c63 - languageName: node - linkType: hard - "os-filter-obj@npm:^2.0.0": version: 2.0.0 resolution: "os-filter-obj@npm:2.0.0" @@ -9673,16 +9564,6 @@ __metadata: languageName: node linkType: hard -"restore-cursor@npm:^3.1.0": - version: 3.1.0 - resolution: "restore-cursor@npm:3.1.0" - dependencies: - onetime: ^5.1.0 - signal-exit: ^3.0.2 - checksum: f877dd8741796b909f2a82454ec111afb84eb45890eb49ac947d87991379406b3b83ff9673a46012fca0d7844bb989f45cc5b788254cf1a39b6b5a9659de0630 - languageName: node - linkType: hard - "ret@npm:~0.1.10": version: 0.1.15 resolution: "ret@npm:0.1.15" @@ -10154,7 +10035,7 @@ __metadata: languageName: node linkType: hard -"signal-exit@npm:^3.0.0, signal-exit@npm:^3.0.2, signal-exit@npm:^3.0.3, signal-exit@npm:^3.0.7": +"signal-exit@npm:^3.0.0, signal-exit@npm:^3.0.3, signal-exit@npm:^3.0.7": version: 3.0.7 resolution: "signal-exit@npm:3.0.7" checksum: a2f098f247adc367dffc27845853e9959b9e88b01cb301658cfe4194352d8d2bb32e18467c786a7fe15f1d44b233ea35633d076d5e737870b7139949d1ab6318 @@ -11832,15 +11713,6 @@ __metadata: languageName: node linkType: hard -"wcwidth@npm:^1.0.1": - version: 1.0.1 - resolution: "wcwidth@npm:1.0.1" - dependencies: - defaults: ^1.0.3 - checksum: 814e9d1ddcc9798f7377ffa448a5a3892232b9275ebb30a41b529607691c0491de47cba426e917a4d08ded3ee7e9ba2f3fe32e62ee3cd9c7d3bafb7754bd553c - languageName: node - linkType: hard - "webpack-bundle-analyzer@npm:^4.4.1": version: 4.10.2 resolution: "webpack-bundle-analyzer@npm:4.10.2" From b0e78424493443581178dce03863a14b3c5ac35e Mon Sep 17 00:00:00 2001 From: Nicolas Langle Date: Thu, 27 Jun 2024 07:01:32 +0200 Subject: [PATCH 2/3] feat (theme): gitignore conf-img/*.json --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index d9f1f3c7..ab56dea5 100644 --- a/.gitignore +++ b/.gitignore @@ -82,3 +82,6 @@ package-lock.json ### config /vendor/ composer.lock + +### conf-img +assets/conf-img/*.json \ No newline at end of file From a3ac6f9a9d8d7f18b35a43294787d42c86241be1 Mon Sep 17 00:00:00 2001 From: Nicolas Langle Date: Thu, 27 Jun 2024 08:30:14 +0200 Subject: [PATCH 3/3] refactor (theme): rename WebpackImageSizesPlugin method --- config/WebpackImageSizesPlugin.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/config/WebpackImageSizesPlugin.js b/config/WebpackImageSizesPlugin.js index cff9c0d1..9302c500 100644 --- a/config/WebpackImageSizesPlugin.js +++ b/config/WebpackImageSizesPlugin.js @@ -22,12 +22,12 @@ class WebpackImageSizesPlugin { if (options.watch) { fs.watch(this._tplFolder, () => { - this.runImageSizeScript() + this.generateImageJsonFiles() this.generateDefaultImages() }) } - this.runImageSizeScript() + this.generateImageJsonFiles() } /** @@ -41,9 +41,9 @@ class WebpackImageSizesPlugin { } /** - * Image size script + * Generate image-sises.json and image-location.json */ - runImageSizeScript() { + generateImageJsonFiles() { const that = this const regex = { srcset: /data-srcset="(.[^"]*)"/gm,