From 87efd024b7f61328c64e23504f8fd927ef77966a Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Thu, 15 Dec 2022 09:29:38 +0600 Subject: [PATCH 01/27] Add package image-guide --- pnpm-lock.yaml | 66 ++++++---- .../js-packages/image-guide/.eslintrc.cjs | 44 +++++++ .../js-packages/image-guide/.gitattributes | 17 +++ projects/js-packages/image-guide/.gitignore | 3 + projects/js-packages/image-guide/CHANGELOG.md | 7 ++ projects/js-packages/image-guide/README.md | 20 +++ .../js-packages/image-guide/babel.config.js | 10 ++ .../image-guide/changelog/.gitkeep | 0 .../js-packages/image-guide/composer.json | 55 +++++++++ projects/js-packages/image-guide/package.json | 39 ++++++ .../image-guide/src/MeasurableImage.ts | 116 ++++++++++++++++++ .../image-guide/src/find-image-elements.ts | 111 +++++++++++++++++ projects/js-packages/image-guide/src/index.ts | 4 + .../image-guide/tests/index.test.js | 7 ++ .../js-packages/image-guide/tsconfig.json | 9 ++ .../js-packages/image-guide/webpack.config.js | 42 +++++++ 16 files changed, 527 insertions(+), 23 deletions(-) create mode 100644 projects/js-packages/image-guide/.eslintrc.cjs create mode 100644 projects/js-packages/image-guide/.gitattributes create mode 100644 projects/js-packages/image-guide/.gitignore create mode 100644 projects/js-packages/image-guide/CHANGELOG.md create mode 100644 projects/js-packages/image-guide/README.md create mode 100644 projects/js-packages/image-guide/babel.config.js create mode 100644 projects/js-packages/image-guide/changelog/.gitkeep create mode 100644 projects/js-packages/image-guide/composer.json create mode 100644 projects/js-packages/image-guide/package.json create mode 100644 projects/js-packages/image-guide/src/MeasurableImage.ts create mode 100644 projects/js-packages/image-guide/src/find-image-elements.ts create mode 100644 projects/js-packages/image-guide/src/index.ts create mode 100644 projects/js-packages/image-guide/tests/index.test.js create mode 100644 projects/js-packages/image-guide/tsconfig.json create mode 100644 projects/js-packages/image-guide/webpack.config.js diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index de7f62bb3029..bf2374d99c43 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -364,6 +364,18 @@ importers: react-dom: 17.0.2_react@17.0.2 react-test-renderer: 17.0.2_react@17.0.2 + projects/js-packages/image-guide: + specifiers: + '@automattic/jetpack-webpack-config': workspace:1.3.19 + jest: 29.3.1 + webpack: 5.72.1 + webpack-cli: 4.9.1 + devDependencies: + '@automattic/jetpack-webpack-config': link:../webpack-config + jest: 29.3.1 + webpack: 5.72.1_webpack-cli@4.9.1 + webpack-cli: 4.9.1_webpack@5.72.1 + projects/js-packages/licensing: specifiers: '@automattic/jetpack-analytics': workspace:* @@ -4178,7 +4190,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/types': 29.3.1 - '@types/node': 18.11.13 + '@types/node': 18.11.15 chalk: 4.1.2 jest-message-util: 29.3.1 jest-util: 29.3.1 @@ -4199,14 +4211,14 @@ packages: '@jest/test-result': 29.3.1 '@jest/transform': 29.3.1 '@jest/types': 29.3.1 - '@types/node': 18.11.13 + '@types/node': 18.11.15 ansi-escapes: 4.3.2 chalk: 4.1.2 ci-info: 3.7.0 exit: 0.1.2 graceful-fs: 4.2.10 jest-changed-files: 29.2.0 - jest-config: 29.3.1_@types+node@18.11.13 + jest-config: 29.3.1_@types+node@18.11.15 jest-haste-map: 29.3.1 jest-message-util: 29.3.1 jest-regex-util: 29.2.0 @@ -4233,7 +4245,7 @@ packages: dependencies: '@jest/fake-timers': 29.3.1 '@jest/types': 29.3.1 - '@types/node': 18.11.13 + '@types/node': 18.11.15 jest-mock: 29.3.1 dev: true @@ -4260,7 +4272,7 @@ packages: dependencies: '@jest/types': 29.3.1 '@sinonjs/fake-timers': 9.1.2 - '@types/node': 18.11.13 + '@types/node': 18.11.15 jest-message-util: 29.3.1 jest-mock: 29.3.1 jest-util: 29.3.1 @@ -4293,7 +4305,7 @@ packages: '@jest/transform': 29.3.1 '@jest/types': 29.3.1 '@jridgewell/trace-mapping': 0.3.17 - '@types/node': 18.11.13 + '@types/node': 18.11.15 chalk: 4.1.2 collect-v8-coverage: 1.0.1 exit: 0.1.2 @@ -4415,7 +4427,7 @@ packages: '@jest/schemas': 29.0.0 '@types/istanbul-lib-coverage': 2.0.4 '@types/istanbul-reports': 3.0.1 - '@types/node': 18.11.13 + '@types/node': 18.11.15 '@types/yargs': 17.0.17 chalk: 4.1.2 dev: true @@ -6892,12 +6904,12 @@ packages: resolution: {integrity: sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==} dependencies: '@types/eslint': 8.4.10 - '@types/estree': 1.0.0 + '@types/estree': 0.0.51 /@types/eslint/8.4.10: resolution: {integrity: sha512-Sl/HOqN8NKPmhWo2VBEPm0nvHnu2LL3v9vKo8MEq0EtbJ4eVzGPl41VNPvn5E1i5poMk4/XD8UriLHpJvEP/Nw==} dependencies: - '@types/estree': 1.0.0 + '@types/estree': 0.0.51 '@types/json-schema': 7.0.11 /@types/estree/0.0.39: @@ -6909,6 +6921,7 @@ packages: /@types/estree/1.0.0: resolution: {integrity: sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==} + dev: true /@types/fs-extra/8.1.2: resolution: {integrity: sha512-SvSrYXfWSc7R4eqnOzbQF4TZmfpNSM9FrSWLU3EUnWBuyZqNBOrv1B1JA3byUDPUl9z4Ab3jeZG2eDdySlgNMg==} @@ -6933,7 +6946,7 @@ packages: /@types/graceful-fs/4.1.5: resolution: {integrity: sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==} dependencies: - '@types/node': 18.11.13 + '@types/node': 18.11.15 dev: true /@types/hast/2.3.4: @@ -7043,6 +7056,9 @@ packages: /@types/node/18.11.13: resolution: {integrity: sha512-IASpMGVcWpUsx5xBOrxMj7Bl8lqfuTY7FKAnPmu5cHkfQVWF8GulWS1jbRqA934qZL35xh5xN/+Xe/i26Bod4w==} + /@types/node/18.11.15: + resolution: {integrity: sha512-VkhBbVo2+2oozlkdHXLrb3zjsRkpdnaU2bXmX8Wgle3PUi569eLRaHGlgETQHR7lLL1w7GiG3h9SnePhxNDecw==} + /@types/normalize-package-data/2.4.1: resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==} dev: true @@ -9913,7 +9929,7 @@ packages: dependencies: caniuse-lite: 1.0.30001439 electron-to-chromium: 1.4.284 - node-releases: 2.0.6 + node-releases: 2.0.7 update-browserslist-db: 1.0.10_browserslist@4.21.4 /bs-logger/0.2.6: @@ -14431,7 +14447,7 @@ packages: '@jest/expect': 29.3.1 '@jest/test-result': 29.3.1 '@jest/types': 29.3.1 - '@types/node': 18.11.13 + '@types/node': 18.11.15 chalk: 4.1.2 co: 4.6.0 dedent: 0.7.0 @@ -14516,7 +14532,7 @@ packages: - supports-color dev: true - /jest-config/29.3.1_@types+node@18.11.13: + /jest-config/29.3.1_@types+node@18.11.15: resolution: {integrity: sha512-y0tFHdj2WnTEhxmGUK1T7fgLen7YK4RtfvpLFBXfQkh2eMJAQq24Vx9472lvn5wg0MAO6B+iPfJfzdR9hJYalg==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} peerDependencies: @@ -14531,7 +14547,7 @@ packages: '@babel/core': 7.20.5 '@jest/test-sequencer': 29.3.1 '@jest/types': 29.3.1 - '@types/node': 18.11.13 + '@types/node': 18.11.15 babel-jest: 29.3.1_@babel+core@7.20.5 chalk: 4.1.2 ci-info: 3.7.0 @@ -14623,7 +14639,7 @@ packages: '@jest/environment': 29.3.1 '@jest/fake-timers': 29.3.1 '@jest/types': 29.3.1 - '@types/node': 18.11.13 + '@types/node': 18.11.15 jest-mock: 29.3.1 jest-util: 29.3.1 dev: true @@ -14678,7 +14694,7 @@ packages: dependencies: '@jest/types': 29.3.1 '@types/graceful-fs': 4.1.5 - '@types/node': 18.11.13 + '@types/node': 18.11.15 anymatch: 3.1.3 fb-watchman: 2.0.2 graceful-fs: 4.2.10 @@ -14739,7 +14755,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/types': 29.3.1 - '@types/node': 18.11.13 + '@types/node': 18.11.15 jest-util: 29.3.1 dev: true @@ -14799,7 +14815,7 @@ packages: '@jest/test-result': 29.3.1 '@jest/transform': 29.3.1 '@jest/types': 29.3.1 - '@types/node': 18.11.13 + '@types/node': 18.11.15 chalk: 4.1.2 emittery: 0.13.1 graceful-fs: 4.2.10 @@ -14830,7 +14846,7 @@ packages: '@jest/test-result': 29.3.1 '@jest/transform': 29.3.1 '@jest/types': 29.3.1 - '@types/node': 18.11.13 + '@types/node': 18.11.15 chalk: 4.1.2 cjs-module-lexer: 1.2.2 collect-v8-coverage: 1.0.1 @@ -14906,7 +14922,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/types': 29.3.1 - '@types/node': 18.11.13 + '@types/node': 18.11.15 chalk: 4.1.2 ci-info: 3.7.0 graceful-fs: 4.2.10 @@ -14931,7 +14947,7 @@ packages: dependencies: '@jest/test-result': 29.3.1 '@jest/types': 29.3.1 - '@types/node': 18.11.13 + '@types/node': 18.11.15 ansi-escapes: 4.3.2 chalk: 4.1.2 emittery: 0.13.1 @@ -14952,7 +14968,7 @@ packages: resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 18.11.13 + '@types/node': 18.11.15 merge-stream: 2.0.0 supports-color: 8.1.1 @@ -14960,7 +14976,7 @@ packages: resolution: {integrity: sha512-lY4AnnmsEWeiXirAIA0c9SDPbuCBq8IYuDVL8PMm0MZ2PEs2yPvRA/J64QBXuZp7CYKrDM/rmNrc9/i3KJQncw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@types/node': 18.11.13 + '@types/node': 18.11.15 jest-util: 29.3.1 merge-stream: 2.0.0 supports-color: 8.1.1 @@ -16028,6 +16044,10 @@ packages: /node-releases/2.0.6: resolution: {integrity: sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==} + dev: false + + /node-releases/2.0.7: + resolution: {integrity: sha512-EJ3rzxL9pTWPjk5arA0s0dgXpnyiAbJDE6wHT62g7VsgrgQgmmZ+Ru++M1BFofncWja+Pnn3rEr3fieRySAdKQ==} /normalize-package-data/2.5.0: resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==} diff --git a/projects/js-packages/image-guide/.eslintrc.cjs b/projects/js-packages/image-guide/.eslintrc.cjs new file mode 100644 index 000000000000..05da5afd741a --- /dev/null +++ b/projects/js-packages/image-guide/.eslintrc.cjs @@ -0,0 +1,44 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +const loadIgnorePatterns = require( 'jetpack-js-tools/load-eslint-ignore.js' ); + +module.exports = { + root: true, + extends: [ + require.resolve( 'jetpack-js-tools/eslintrc/base' ), + require.resolve( 'jetpack-js-tools/eslintrc/wp-eslint-plugin/recommended' ), + require.resolve( 'jetpack-js-tools/eslintrc/svelte' ), + ], + ignorePatterns: loadIgnorePatterns( __dirname ), + parserOptions: { + babelOptions: { + configFile: require.resolve( './babel.config.js' ), + }, + sourceType: 'module', + tsconfigRootDir: __dirname, + project: [ './tsconfig.json' ], + }, + overrides: [ + // .js and .cjs files in the root are not part of the TypeScript project. + { + files: [ '*.js', '*.cjs' ], + parserOptions: { + project: null, + }, + }, + ], + rules: { + // Apparently, we like dangling commas + 'comma-dangle': 0, + + 'jsdoc/no-undefined-types': [ + 1, + { + definedTypes: [ 'TemplateVars', 'ErrorSet', 'Readable' ], + }, + ], + + 'no-nested-ternary': 0, + 'prettier/prettier': 0, + camelcase: 0, + }, +}; diff --git a/projects/js-packages/image-guide/.gitattributes b/projects/js-packages/image-guide/.gitattributes new file mode 100644 index 000000000000..184dd44ad5b7 --- /dev/null +++ b/projects/js-packages/image-guide/.gitattributes @@ -0,0 +1,17 @@ +# Files not needed to be distributed in the package. +.gitattributes export-ignore +node_modules export-ignore +package.json export-ignore + +# Files to include in the mirror repo, but excluded via gitignore +# Remember to end all directories with `/**` to properly tag every file. +/build/** production-include + +# Files to exclude from the mirror repo +/changelog/** production-exclude +/.eslintrc.cjs production-exclude +.gitignore production-exclude +tests/** production-exclude +babel.config.js production-exclude +webpack.config.js production-exclude +tsconfig.json production-exclude \ No newline at end of file diff --git a/projects/js-packages/image-guide/.gitignore b/projects/js-packages/image-guide/.gitignore new file mode 100644 index 000000000000..1b9987be870e --- /dev/null +++ b/projects/js-packages/image-guide/.gitignore @@ -0,0 +1,3 @@ +vendor/ +node_modules/ +build/ \ No newline at end of file diff --git a/projects/js-packages/image-guide/CHANGELOG.md b/projects/js-packages/image-guide/CHANGELOG.md new file mode 100644 index 000000000000..721294abd00a --- /dev/null +++ b/projects/js-packages/image-guide/CHANGELOG.md @@ -0,0 +1,7 @@ +# Changelog + +All notable changes to this project will be documented in this file. + +The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) +and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). + diff --git a/projects/js-packages/image-guide/README.md b/projects/js-packages/image-guide/README.md new file mode 100644 index 000000000000..cd969508f848 --- /dev/null +++ b/projects/js-packages/image-guide/README.md @@ -0,0 +1,20 @@ +# image-guide + +Go through the dom to analyze image size on screen vs actual file size. + +## How to install image-guide + +### Installation From Git Repo + +## Contribute + +## Get Help + +## Security + +Need to report a security vulnerability? Go to [https://automattic.com/security/](https://automattic.com/security/) or directly to our security bug bounty site [https://hackerone.com/automattic](https://hackerone.com/automattic). + +## License + +image-guide is licensed under [GNU General Public License v2 (or later)](./LICENSE.txt) + diff --git a/projects/js-packages/image-guide/babel.config.js b/projects/js-packages/image-guide/babel.config.js new file mode 100644 index 000000000000..96978eea8221 --- /dev/null +++ b/projects/js-packages/image-guide/babel.config.js @@ -0,0 +1,10 @@ +module.exports = { + presets: [ + [ + '@automattic/jetpack-webpack-config/babel/preset', + { + /* options */ + }, + ], + ], +}; diff --git a/projects/js-packages/image-guide/changelog/.gitkeep b/projects/js-packages/image-guide/changelog/.gitkeep new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/projects/js-packages/image-guide/composer.json b/projects/js-packages/image-guide/composer.json new file mode 100644 index 000000000000..2fbdd22f2111 --- /dev/null +++ b/projects/js-packages/image-guide/composer.json @@ -0,0 +1,55 @@ +{ + "name": "automattic/jetpack-image-guide", + "description": "Go through the dom to analyze image size on screen vs actual file size.", + "type": "library", + "license": "GPL-2.0-or-later", + "require": {}, + "require-dev": { + "yoast/phpunit-polyfills": "1.0.4", + "automattic/jetpack-changelogger": "@dev" + }, + "autoload": { + "classmap": [ + "src/" + ] + }, + "scripts": { + "phpunit": [ + "./vendor/phpunit/phpunit/phpunit --colors=always" + ], + "test-coverage": [ + "php -dpcov.directory=. ./vendor/bin/phpunit --coverage-clover \"$COVERAGE_DIR/clover.xml\"" + ], + "test-php": [ + "@composer phpunit" + ], + "build-development": [ + "pnpm run build" + ], + "build-production": [ + "NODE_ENV=production pnpm run build" + ], + "watch": [ + "Composer\\Config::disableProcessTimeout", + "pnpm run watch" + ] + }, + "repositories": [ + { + "type": "path", + "url": "../../packages/*", + "options": { + "monorepo": true + } + } + ], + "minimum-stability": "dev", + "prefer-stable": true, + "extra": { + "mirror-repo": "Automattic/jetpack-image-guide", + "changelogger": { + "link-template": "https://github.com/Automattic/jetpack-image-guide/compare/v${old}...v${new}" + }, + "autotagger": true + } +} diff --git a/projects/js-packages/image-guide/package.json b/projects/js-packages/image-guide/package.json new file mode 100644 index 000000000000..1357369dc7d0 --- /dev/null +++ b/projects/js-packages/image-guide/package.json @@ -0,0 +1,39 @@ +{ + "private": true, + "name": "@automattic/jetpack-image-guide", + "version": "0.1.0-alpha", + "description": "Go through the dom to analyze image size on screen vs actual file size.", + "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/image-guide/#readme", + "bugs": { + "url": "https://github.com/Automattic/jetpack/labels/[JS Package] Image Guide" + }, + "repository": { + "type": "git", + "url": "https://github.com/Automattic/jetpack.git", + "directory": "projects/js-packages/image-guide" + }, + "license": "GPL-2.0-or-later", + "author": "Automattic", + "scripts": { + "build": "pnpm run clean && pnpm run build-client", + "build-client": "pnpm webpack --config webpack.config.js", + "clean": "rm -rf build/", + "watch": "pnpm run build && pnpm webpack watch", + "test": "jest --config=tests/jest.config.js" + }, + "devDependencies": { + "@automattic/jetpack-webpack-config": "workspace:1.3.19", + "jest": "29.3.1", + "webpack": "5.72.1", + "webpack-cli": "4.9.1" + }, + "engines": { + "node": "^16.13.2", + "yarn": "use pnpm instead - see docs/yarn-upgrade.md" + }, + "exports": { + ".": "./index.jsx", + "./state": "./src/state", + "./action-types": "./src/state/action-types" + } +} diff --git a/projects/js-packages/image-guide/src/MeasurableImage.ts b/projects/js-packages/image-guide/src/MeasurableImage.ts new file mode 100644 index 000000000000..cdfb12084503 --- /dev/null +++ b/projects/js-packages/image-guide/src/MeasurableImage.ts @@ -0,0 +1,116 @@ +export type SourceCallbackFn = ( node: HTMLElement ) => string | null; +export type Dimensions = { width: number; height: number }; +export type Weight = { weight: number }; + +/** + * A class that represents a DOM Element that + * has an image that should be measured and + * provides measurement utilities. + */ +export class MeasurableImage { + readonly node: HTMLElement | HTMLImageElement; + private getURLCallback: SourceCallbackFn; + + /** + * @param node - The DOM Element that contains the image. + * @param getURL - A function that takes in the node and returns the URL of the image. + */ + constructor( node: HTMLElement | HTMLImageElement, getURL: SourceCallbackFn ) { + this.node = node; + this.getURLCallback = getURL; + } + + public getURL() { + return this.getURLCallback( this.node ); + } + + public getSizeOnPage() { + const { width, height } = this.node.getBoundingClientRect(); + + return { + width: Math.round( width ), + height: Math.round( height ), + }; + } + + public async getFileSize( url: string ) { + const [ weight, { width, height } ] = await Promise.all( [ + this.fetchFileWeight( url ), + this.fetchFileDimensions( url ), + ] ); + + return { + width, + height, + weight, + }; + } + + public getPotentialSavings( fileSize: Dimensions & Weight, sizeOnPage: Dimensions ) { + const oversizedRatio = this.getOversizedRatio( fileSize, sizeOnPage ); + if ( oversizedRatio <= 1 ) { + return null; + } + return Math.round( fileSize.weight - fileSize.weight / oversizedRatio ); + } + + /** + * To get the expected size of the image, + * the image size on page has to be multiplied by the device pixel ratio. + * + * @param sizeOnPage - The size of the image on the page. + */ + public getExpectedSize( sizeOnPage: Dimensions ) { + const dpr = window.devicePixelRatio || 1; + return { + width: Math.round( sizeOnPage.width * dpr ), + height: Math.round( sizeOnPage.height * dpr ), + }; + } + + public getOversizedRatio( fileSize: Dimensions, sizeOnPage: Dimensions ) { + const { width, height } = this.getExpectedSize( sizeOnPage ); + return ( fileSize.width * fileSize.height ) / ( width * height ); + } + + /** + * Fetches the weight of the image at the given URL, + * by reading the Content-Length header. + * + * @param url - string The URL of the image. + */ + private async fetchFileWeight( url: string ) { + const response = await fetch( url, { method: 'HEAD', mode: 'no-cors' } ); + if ( ! response.url ) { + // eslint-disable-next-line no-console + console.log( `Can't get image size for ${ url } likely due to a CORS error.` ); + return -1; + } + + const size = response.headers.get( 'content-length' ); + if ( size ) { + return parseInt( size, 10 ) / 1024; + } + + return -1; + } + + /** + * Fetches the dimensions of the image at the given URL, + * This creates a new image element and loads the image. + * + * @param url - image url + */ + private async fetchFileDimensions( url: string ) { + const img = new Image(); + img.src = url; + return new Promise< { width: number; height: number } >( resolve => { + img.onload = () => { + resolve( { width: Math.round( img.width ), height: Math.round( img.height ) } ); + }; + img.onerror = () => { + resolve( { width: -1, height: -1 } ); + }; + } ); + } +} diff --git a/projects/js-packages/image-guide/src/find-image-elements.ts b/projects/js-packages/image-guide/src/find-image-elements.ts new file mode 100644 index 000000000000..b8784ff40003 --- /dev/null +++ b/projects/js-packages/image-guide/src/find-image-elements.ts @@ -0,0 +1,111 @@ +import { MeasurableImage } from './MeasurableImage'; + +/** + * Get elements that either are image tags or have a background image. + * + * @param nodes - A list of nodes to filter + */ +export function findMeasurableElements( nodes: Element[] ): HTMLElement[] | HTMLImageElement[] { + return nodes.filter( ( el ): el is HTMLElement | HTMLImageElement => { + if ( el instanceof HTMLImageElement ) { + return true; + } + if ( el instanceof HTMLElement ) { + const style = getComputedStyle( el ); + return 'none' !== style.backgroundImage; + } + return false; + } ); +} + +/** + * Get the current image source from a node. + * + * @param node - HTMLImageElement + */ +export function imageTagSource( node: HTMLImageElement ) { + if ( imageLikeURL( node.currentSrc ) ) { + return node.currentSrc; + } + if ( imageLikeURL( node.src ) ) { + return node.src; + } + + return null; +} + +/** + * Get the background image URL from a node. + * + * @param node - HTMLElement + */ +export function backgroundImageSource( node: HTMLElement ) { + const src = getComputedStyle( node ).backgroundImage; + const url = src.match( /url\(.?(.*?).?\)/i ); + if ( url && url[ 1 ] && imageLikeURL( url[ 1 ] ) ) { + return url[ 1 ]; + } +} + +/** + * Create MeasurableImage objects from a list of nodes + * and remove any nodes that can't be measured. + * + * @param domNodes - A list of nodes to measure + */ +export function getMeasurableImages( domNodes: Element[] ): MeasurableImage[] { + const nodes = findMeasurableElements( domNodes ); + return nodes + .map( node => { + if ( node instanceof HTMLImageElement ) { + return new MeasurableImage( node, imageTagSource ); + } else if ( node instanceof HTMLElement ) { + if ( ! backgroundImageSource( node ) ) { + /** + * Background elements that have no valid URL + * shouldn't be measured. + */ + return null; + } + + return new MeasurableImage( node, backgroundImageSource ); + } + + return null; + } ) + .filter( image => image !== null ); +} + +/** + * isImageLikeURL - a helper function to determine if URL could be an image. + * + * This function ensures that the value passed in looks like a URL. + * This is because `background: url(...)` and `src="..."` can + * contain various values that are not URLs, like: + * - none + * - linear-gradient(...) + * - data:image/png;base64,... + * - ... + * + * For the purposes of analyzing image sizes, + * we also don't consider SVGs to be images. + * + * @param value - string to check + */ +function imageLikeURL( value: string ): boolean { + // Look for relative URLs that are not SVGs + // Intentionally not using an allow-list because images may + // be served from weird URLs like /images/1234?size=large + if ( value.startsWith( '/' ) ) { + // Remove query string parameters + const path = value.split( '?' )[ 0 ]; + return ! path.endsWith( '.svg' ); + } + + try { + const url = new URL( value ); + return url.protocol === 'http:' || url.protocol === 'https:'; + } catch ( e ) { + return false; + } +} diff --git a/projects/js-packages/image-guide/src/index.ts b/projects/js-packages/image-guide/src/index.ts new file mode 100644 index 000000000000..c1b7ecb3a10a --- /dev/null +++ b/projects/js-packages/image-guide/src/index.ts @@ -0,0 +1,4 @@ +import { MeasurableImage } from './MeasurableImage'; +import { getMeasurableImages } from './find-image-elements'; + +export { MeasurableImage, getMeasurableImages }; diff --git a/projects/js-packages/image-guide/tests/index.test.js b/projects/js-packages/image-guide/tests/index.test.js new file mode 100644 index 000000000000..d34c1ab3fc54 --- /dev/null +++ b/projects/js-packages/image-guide/tests/index.test.js @@ -0,0 +1,7 @@ +// We recommend using `jest` for testing. If you're testing React code, we recommend `@testing-library/react` and related packages. +// Please match the versions used elsewhere in the monorepo. +// +// Please don't add new uses of `mocha`, `chai`, `sinon`, `enzyme`, and so on. We're trying to standardize on one testing framework. +// +// The default setup is to have files named like "name.test.js" (or .jsx, .ts, or .tsx) in this `tests/` directory. +// But you could instead put them in `src/`, or put files like "name.js" (or .jsx, .ts, or .tsx) in `test` or `__tests__` directories somewhere. diff --git a/projects/js-packages/image-guide/tsconfig.json b/projects/js-packages/image-guide/tsconfig.json new file mode 100644 index 000000000000..c1b827d7fcbc --- /dev/null +++ b/projects/js-packages/image-guide/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "jetpack-js-tools/tsconfig.base.json", + "include": [ "./src" ], + "compilerOptions": { + "typeRoots": [ "./node_modules/@types/", "src" ], + "sourceMap": true, + "forceConsistentCasingInFileNames": true + } +} diff --git a/projects/js-packages/image-guide/webpack.config.js b/projects/js-packages/image-guide/webpack.config.js new file mode 100644 index 000000000000..60c62eb7436d --- /dev/null +++ b/projects/js-packages/image-guide/webpack.config.js @@ -0,0 +1,42 @@ +const path = require( 'path' ); +const jetpackWebpackConfig = require( '@automattic/jetpack-webpack-config/webpack' ); + +module.exports = { + entry: { + index: './src/index.ts', + }, + mode: jetpackWebpackConfig.mode, + devtool: jetpackWebpackConfig.devtool, + output: { + ...jetpackWebpackConfig.output, + path: path.resolve( __dirname, 'build' ), + }, + optimization: { + ...jetpackWebpackConfig.optimization, + }, + resolve: { + ...jetpackWebpackConfig.resolve, + }, + node: false, + plugins: [ ...jetpackWebpackConfig.StandardPlugins() ], + module: { + strictExportPresence: true, + rules: [ + // Transpile JavaScript. + jetpackWebpackConfig.TranspileRule( { + exclude: /node_modules\//, + } ), + + // Transpile @automattic/jetpack-* in node_modules too. + jetpackWebpackConfig.TranspileRule( { + includeNodeModules: [ '@automattic/jetpack-' ], + } ), + + // Handle CSS. + jetpackWebpackConfig.CssRule(), + + // Handle images. + jetpackWebpackConfig.FileRule(), + ], + }, +}; From 711ea5fe1f8ceb257bccea35a310b07d074d026a Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Thu, 15 Dec 2022 12:21:31 +0600 Subject: [PATCH 02/27] [not verified] Attempt to use the image-guide package --- pnpm-lock.yaml | 269 +++++++++++++----- .../js-packages/image-guide/.eslintrc.cjs | 1 + projects/js-packages/image-guide/package.json | 8 +- projects/js-packages/image-guide/src/index.ts | 3 +- .../js-packages/image-guide/webpack.config.js | 42 --- .../image-guide/src/MeasurableImage.ts | 116 -------- .../image-guide/src/find-image-elements.ts | 111 -------- .../app/features/image-guide/src/index.ts | 4 +- .../features/image-guide/src/initialize.ts | 2 +- .../src/stores/MeasurableImageStore.ts | 2 +- projects/plugins/boost/package.json | 5 +- projects/plugins/boost/rollup.config.js | 9 + 12 files changed, 226 insertions(+), 346 deletions(-) delete mode 100644 projects/js-packages/image-guide/webpack.config.js delete mode 100644 projects/plugins/boost/app/features/image-guide/src/MeasurableImage.ts delete mode 100644 projects/plugins/boost/app/features/image-guide/src/find-image-elements.ts diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bf2374d99c43..a07f98d669fa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -367,12 +367,18 @@ importers: projects/js-packages/image-guide: specifiers: '@automattic/jetpack-webpack-config': workspace:1.3.19 + '@typescript-eslint/parser': 5.36.1 + eslint: 8.22.0 jest: 29.3.1 + typescript: 4.8.2 webpack: 5.72.1 webpack-cli: 4.9.1 devDependencies: '@automattic/jetpack-webpack-config': link:../webpack-config + '@typescript-eslint/parser': 5.36.1_shit3uhl6a7megkzgoz6xssnfa + eslint: 8.22.0 jest: 29.3.1 + typescript: 4.8.2 webpack: 5.72.1_webpack-cli@4.9.1 webpack-cli: 4.9.1_webpack@5.72.1 @@ -1386,8 +1392,9 @@ importers: projects/plugins/boost: specifiers: - '@automattic/jetpack-base-styles': workspace:* - '@automattic/jetpack-components': workspace:* + '@automattic/jetpack-base-styles': workspace:0.3.16 + '@automattic/jetpack-components': workspace:0.26.4-alpha + '@automattic/jetpack-image-guide': workspace:0.1.0-alpha '@babel/core': 7.20.5 '@babel/preset-env': 7.20.2 '@babel/preset-react': 7.18.6 @@ -1433,6 +1440,7 @@ importers: svelte-navigator: 3.1.5_blprp4ovaphqvsbuhbk2xnyjlu devDependencies: '@automattic/jetpack-components': link:../../js-packages/components + '@automattic/jetpack-image-guide': link:../../js-packages/image-guide '@babel/core': 7.20.5 '@babel/preset-env': 7.20.2_@babel+core@7.20.5 '@babel/preset-react': 7.18.6_@babel+core@7.20.5 @@ -4566,7 +4574,7 @@ packages: '@motionone/easing': 10.15.1 '@motionone/types': 10.15.1 '@motionone/utils': 10.15.1 - tslib: 2.4.1 + tslib: 2.3.1 /@motionone/dom/10.12.0: resolution: {integrity: sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==} @@ -4576,20 +4584,20 @@ packages: '@motionone/types': 10.15.1 '@motionone/utils': 10.15.1 hey-listen: 1.0.8 - tslib: 2.4.1 + tslib: 2.3.1 /@motionone/easing/10.15.1: resolution: {integrity: sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==} dependencies: '@motionone/utils': 10.15.1 - tslib: 2.4.1 + tslib: 2.3.1 /@motionone/generators/10.15.1: resolution: {integrity: sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==} dependencies: '@motionone/types': 10.15.1 '@motionone/utils': 10.15.1 - tslib: 2.4.1 + tslib: 2.3.1 /@motionone/types/10.15.1: resolution: {integrity: sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA==} @@ -4599,7 +4607,7 @@ packages: dependencies: '@motionone/types': 10.15.1 hey-listen: 1.0.8 - tslib: 2.4.1 + tslib: 2.3.1 /@mrmlnc/readdir-enhanced/2.2.1: resolution: {integrity: sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==} @@ -6926,14 +6934,14 @@ packages: /@types/fs-extra/8.1.2: resolution: {integrity: sha512-SvSrYXfWSc7R4eqnOzbQF4TZmfpNSM9FrSWLU3EUnWBuyZqNBOrv1B1JA3byUDPUl9z4Ab3jeZG2eDdySlgNMg==} dependencies: - '@types/node': 18.11.13 + '@types/node': 18.11.15 dev: true /@types/glob/7.2.0: resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==} dependencies: '@types/minimatch': 5.1.2 - '@types/node': 18.11.13 + '@types/node': 18.11.15 dev: true /@types/glob/8.0.0: @@ -7132,7 +7140,7 @@ packages: /@types/resolve/1.17.1: resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==} dependencies: - '@types/node': 18.11.13 + '@types/node': 18.11.15 dev: true /@types/retry/0.12.0: @@ -7141,7 +7149,7 @@ packages: /@types/sass/1.43.1: resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==} dependencies: - '@types/node': 18.11.13 + '@types/node': 18.11.15 dev: true /@types/scheduler/0.16.2: @@ -7590,6 +7598,14 @@ packages: '@wordpress/dom-ready': 3.22.0 '@wordpress/i18n': 4.22.0 + /@wordpress/a11y/3.23.0: + resolution: {integrity: sha512-RgnnmI2u6DnechTYr8368LrQy2C/1HtFzXqnDjw9zzT+8kkL8Qa1W2l2JTzz0yHG/n/nR/UXZWXq0FSbnknKlw==} + engines: {node: '>=12'} + dependencies: + '@babel/runtime': 7.20.6 + '@wordpress/dom-ready': 3.23.0 + '@wordpress/i18n': 4.23.0 + /@wordpress/annotations/2.22.0_react@17.0.2: resolution: {integrity: sha512-HnylPgfYSps2+UFGzuDBntGDWK4TVRwwnozKy5oOhBdNehJIrTDhSRsw21XrzBW/W3ehzyxA+qx//czMXrjPSg==} engines: {node: '>=12'} @@ -8111,23 +8127,23 @@ packages: '@emotion/utils': 1.2.0 '@floating-ui/react-dom': 1.0.1_sfoxds7t5ydpegc3knd667wn6m '@use-gesture/react': 10.2.23_react@17.0.2 - '@wordpress/a11y': 3.22.0 + '@wordpress/a11y': 3.23.0 '@wordpress/compose': 5.20.0_react@17.0.2 - '@wordpress/date': 4.22.0 - '@wordpress/deprecated': 3.22.0 - '@wordpress/dom': 3.22.0 + '@wordpress/date': 4.23.0 + '@wordpress/deprecated': 3.23.0 + '@wordpress/dom': 3.23.0 '@wordpress/element': 4.20.0 - '@wordpress/escape-html': 2.22.0 - '@wordpress/hooks': 3.22.0 + '@wordpress/escape-html': 2.23.0 + '@wordpress/hooks': 3.23.0 '@wordpress/i18n': 4.22.0 - '@wordpress/icons': 9.13.0 - '@wordpress/is-shallow-equal': 4.22.0 - '@wordpress/keycodes': 3.22.0 - '@wordpress/primitives': 3.20.0 + '@wordpress/icons': 9.14.0 + '@wordpress/is-shallow-equal': 4.23.0 + '@wordpress/keycodes': 3.23.0 + '@wordpress/primitives': 3.21.0 '@wordpress/rich-text': 5.20.0_react@17.0.2 - '@wordpress/warning': 2.22.0 + '@wordpress/warning': 2.23.0 change-case: 4.1.2 - classnames: 2.3.1 + classnames: 2.3.2 colord: 2.9.3 date-fns: 2.29.3 dom-scroll-into-view: 1.2.1 @@ -8163,12 +8179,12 @@ packages: dependencies: '@babel/runtime': 7.20.6 '@types/mousetrap': 1.6.11 - '@wordpress/deprecated': 3.22.0 - '@wordpress/dom': 3.22.0 + '@wordpress/deprecated': 3.23.0 + '@wordpress/dom': 3.23.0 '@wordpress/element': 4.20.0 - '@wordpress/is-shallow-equal': 4.22.0 - '@wordpress/keycodes': 3.22.0 - '@wordpress/priority-queue': 2.22.0 + '@wordpress/is-shallow-equal': 4.23.0 + '@wordpress/keycodes': 3.23.0 + '@wordpress/priority-queue': 2.23.0 change-case: 4.1.2 clipboard: 2.0.11 mousetrap: 1.6.5 @@ -8208,11 +8224,11 @@ packages: dependencies: '@babel/runtime': 7.20.6 '@wordpress/compose': 5.20.0_react@17.0.2 - '@wordpress/deprecated': 3.22.0 + '@wordpress/deprecated': 3.23.0 '@wordpress/element': 4.20.0 - '@wordpress/is-shallow-equal': 4.22.0 - '@wordpress/priority-queue': 2.22.0 - '@wordpress/redux-routine': 4.22.0_redux@4.2.0 + '@wordpress/is-shallow-equal': 4.23.0 + '@wordpress/priority-queue': 2.23.0 + '@wordpress/redux-routine': 4.23.0_redux@4.2.0 equivalent-key-map: 0.2.2 is-plain-object: 5.0.0 is-promise: 4.0.0 @@ -8231,6 +8247,15 @@ packages: moment: 2.29.4 moment-timezone: 0.5.40 + /@wordpress/date/4.23.0: + resolution: {integrity: sha512-A9jwjKSosRQhdWarjMVPz22iQi/Ur7037ttAPrI1nrwuCUUZSS0l4vX20HGxpNv/ySFmezn/SWuxIvkP9xn93g==} + engines: {node: '>=12'} + dependencies: + '@babel/runtime': 7.20.6 + '@wordpress/deprecated': 3.23.0 + moment: 2.29.4 + moment-timezone: 0.5.40 + /@wordpress/dependency-extraction-webpack-plugin/4.5.0_webpack@5.72.1: resolution: {integrity: sha512-eLzWb/TftHiPzl8ZgwuCPhW0ir9/1VVzVgsag7DyhjyrESLD4YWRqTaE1M1qf6lRP9kjYvBLFZ0TKuLT90Iayg==} engines: {node: '>=14'} @@ -8248,12 +8273,25 @@ packages: '@babel/runtime': 7.20.6 '@wordpress/hooks': 3.22.0 + /@wordpress/deprecated/3.23.0: + resolution: {integrity: sha512-dyliFqGFwaUueG9SLu8ugJ6Gr6eaXHiKg188udZjNt4J8WhC/nC03en4gmtCf38C9nTKbZZOzBAdijw5fdJh7g==} + engines: {node: '>=12'} + dependencies: + '@babel/runtime': 7.20.6 + '@wordpress/hooks': 3.23.0 + /@wordpress/dom-ready/3.22.0: resolution: {integrity: sha512-w3g9TvC3lDh1IYrH+YW5DMDoOH+dWOfU0XJ+ZTJRxJUnqPVKKTZKseZoHF7YGmbiOA63sfW8/NjaYLRmXHqnZw==} engines: {node: '>=12'} dependencies: '@babel/runtime': 7.20.6 + /@wordpress/dom-ready/3.23.0: + resolution: {integrity: sha512-wJndB3ER9yn9Z//kc6VB1fu86m7ETwrU5P4uXslyqpGGGpgghWNhwtr0GU2gXguBIRSeAWhwcjYl30wciy6f+w==} + engines: {node: '>=12'} + dependencies: + '@babel/runtime': 7.20.6 + /@wordpress/dom/3.22.0: resolution: {integrity: sha512-zaRPjwGXpqi7pH1DVXNwpgn9zS8yOb4ZnM3XjqIECQpheBTBL2NoIV4iwG5qbB1skL9T56E70CputetrIQ1Trw==} engines: {node: '>=12'} @@ -8261,6 +8299,13 @@ packages: '@babel/runtime': 7.20.6 '@wordpress/deprecated': 3.22.0 + /@wordpress/dom/3.23.0: + resolution: {integrity: sha512-w1Fkb2K3ODBnZze5iZ7AX3h9QRryO0up7dTUAFKMuRQSFgLKHzhzF78bteA1EV0DDNdiNMzvxr5mSnE1vl1cpg==} + engines: {node: '>=12'} + dependencies: + '@babel/runtime': 7.20.6 + '@wordpress/deprecated': 3.23.0 + /@wordpress/edit-post/6.19.0_mqlga6776einr32k2jcmre7x6i: resolution: {integrity: sha512-qXVKh2QXowEKrH4Q1alNJOQnej0kbgJDC72CSCrImqiJbvtF8xAMxnM2oxtmb4yefqWbv1xkTWdvVVY5CveYkA==} engines: {node: '>=12'} @@ -8426,18 +8471,37 @@ packages: '@babel/runtime': 7.20.6 '@types/react': 17.0.52 '@types/react-dom': 17.0.18 - '@wordpress/escape-html': 2.22.0 + '@wordpress/escape-html': 2.23.0 change-case: 4.1.2 is-plain-object: 5.0.0 react: 17.0.2 react-dom: 17.0.2_react@17.0.2 + /@wordpress/element/5.0.0: + resolution: {integrity: sha512-u1DhVIdb6VEe8wzxKCrLfRWbeFLrlhYTFSOY6yrtl2z9vr9bCdlLp9aAppTxLNUs8cFcdoCEMpakVRYFyfZwTQ==} + engines: {node: '>=12'} + dependencies: + '@babel/runtime': 7.20.6 + '@types/react': 17.0.52 + '@types/react-dom': 17.0.18 + '@wordpress/escape-html': 2.23.0 + change-case: 4.1.2 + is-plain-object: 5.0.0 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + /@wordpress/escape-html/2.22.0: resolution: {integrity: sha512-GUo6VLugIZxen1rdYuotvz6Vqa+5fNtVelNjXLwDqRu0iY2RXeoTux9V5bZWXPnGb54ryqfYmR4gH6F8xZhWzQ==} engines: {node: '>=12'} dependencies: '@babel/runtime': 7.20.6 + /@wordpress/escape-html/2.23.0: + resolution: {integrity: sha512-QmMGJVEoVu3+s46Ya7saYZI8D1jPOKN18eFJX21y59/99tAVvmcWWz0k0uTO5bciDQ7R6ACm9AJS6RiZycODkg==} + engines: {node: '>=12'} + dependencies: + '@babel/runtime': 7.20.6 + /@wordpress/eslint-plugin/13.6.0_l6hhqbc4dkiscm4v42nkjjloki: resolution: {integrity: sha512-GIW4AHb0IC9VA6y8IRGQpADxpvdG+K0an/ZpzlYmBudql7YuLlUmp9rLpBlSvHf9iGX81OUYl9B63XEItPzGEw==} engines: {node: '>=14', npm: '>=6.14.4'} @@ -8521,6 +8585,12 @@ packages: dependencies: '@babel/runtime': 7.20.6 + /@wordpress/hooks/3.23.0: + resolution: {integrity: sha512-EYv8xXY0BEJVWu8YPv5LobxEMddFtdbuUVKSryPWHcLjSMrSYRT6j8qzjq8EP/UQolVOxs3THdOoMDySKsJT9g==} + engines: {node: '>=12'} + dependencies: + '@babel/runtime': 7.20.6 + /@wordpress/html-entities/3.22.0: resolution: {integrity: sha512-Wltx+PY0TDIkDQhkA5TbkWNFiPp0qNNHAgckhrz8r61nF/8AhpROhs0V714vDvqctcYCZWwzWTEdemcr9lwDgA==} engines: {node: '>=12'} @@ -8533,7 +8603,19 @@ packages: hasBin: true dependencies: '@babel/runtime': 7.20.6 - '@wordpress/hooks': 3.22.0 + '@wordpress/hooks': 3.23.0 + gettext-parser: 1.4.0 + memize: 1.1.0 + sprintf-js: 1.1.2 + tannin: 1.2.0 + + /@wordpress/i18n/4.23.0: + resolution: {integrity: sha512-SF9aJ2gajHtYDLMA9nhnMPerLmKJofUM4qQypwrW5AYwi5JS7jxvZHNETIqqYq5UdhRwsubPjAUfFosIonmfnA==} + engines: {node: '>=12'} + hasBin: true + dependencies: + '@babel/runtime': 7.20.6 + '@wordpress/hooks': 3.23.0 gettext-parser: 1.4.0 memize: 1.1.0 sprintf-js: 1.1.2 @@ -8547,6 +8629,14 @@ packages: '@wordpress/element': 4.20.0 '@wordpress/primitives': 3.20.0 + /@wordpress/icons/9.14.0: + resolution: {integrity: sha512-9KSjE+Fyi5C32uP86CHtzwuDezyxEswt1mNmUJ/ILRjupaDg2v85/+lRARfy+Wi9DY5bfcoNd7ZDyIXRi8pYIg==} + engines: {node: '>=12'} + dependencies: + '@babel/runtime': 7.20.6 + '@wordpress/element': 5.0.0 + '@wordpress/primitives': 3.21.0 + /@wordpress/interface/4.21.0_mqlga6776einr32k2jcmre7x6i: resolution: {integrity: sha512-e6BxCIgx/DDPMFgQeTkwHspRiDDaPPK9qhtVkcxYEQQvgnOXPjIF9gQDdIMMg+gCpq1z6Y94VWsl5iVqnKr7hA==} engines: {node: '>=12'} @@ -8585,6 +8675,12 @@ packages: dependencies: '@babel/runtime': 7.20.6 + /@wordpress/is-shallow-equal/4.23.0: + resolution: {integrity: sha512-uA1RauILRs85Q864x5xrBfN588Pg0xDrbp4DYs3ktzBL9Jm4igI7+Say7fHpqGBVc8+ZuAEhGeoLt4gUfAJzKg==} + engines: {node: '>=12'} + dependencies: + '@babel/runtime': 7.20.6 + /@wordpress/jest-console/6.5.0_jest@29.3.1: resolution: {integrity: sha512-DqqilY6+FMJHcrUJhAu059iTIFKOXqoWuh0X7MXTGyW4S29n6V4Tzyy8TNhn074R3hjCIqgXo3yF3QXL8uLefQ==} engines: {node: '>=14'} @@ -8618,6 +8714,15 @@ packages: change-case: 4.1.2 lodash: 4.17.21 + /@wordpress/keycodes/3.23.0: + resolution: {integrity: sha512-CfvxhqwgVU2c3f2B1F09i8E+1/HMkgf4gmmf+0dyKFMmYesByY4GKuvOvKw5dklFWp96qECz6Jf+L2F4vw7//w==} + engines: {node: '>=12'} + dependencies: + '@babel/runtime': 7.20.6 + '@wordpress/i18n': 4.23.0 + change-case: 4.1.2 + lodash: 4.17.21 + /@wordpress/media-utils/4.13.0: resolution: {integrity: sha512-gcpvOPxacOI5ZkEXBH5aBmozp54X4GS9v+itVY4zq3FrSiPW+1S3hon/Q6e+XKGUOIsUbT0wUTcpp+n5p8bBdA==} engines: {node: '>=12'} @@ -8737,15 +8842,23 @@ packages: '@wordpress/element': 4.20.0 classnames: 2.3.1 - /@wordpress/priority-queue/2.22.0: - resolution: {integrity: sha512-JLsyYqPoNnkJ/pXtq0PeuE5RhdwwmFeIHjlJBRlZ+xRSXFJB6Z2rJqOYpIbZ7y3zUiAF6o8/o6JUWch6spIwAQ==} + /@wordpress/primitives/3.21.0: + resolution: {integrity: sha512-CxYNqXqDiVZLqJcy8LS2Q3AVzfcC/VzXLpeqVd6KKoVx9V7WkPkYQE9C5a3W3G9Vj7UfRfPRMUX7oxk2WmfGqQ==} + engines: {node: '>=12'} + dependencies: + '@babel/runtime': 7.20.6 + '@wordpress/element': 5.0.0 + classnames: 2.3.2 + + /@wordpress/priority-queue/2.23.0: + resolution: {integrity: sha512-5jf2EK2C/EzXjw7uQ5DwLxDuWP+TyrGdJzcjKXWwAm89H/tdgS6qbRkL6T7ZhARNkm1po88xmCvMarYzceXnBg==} engines: {node: '>=12'} dependencies: '@babel/runtime': 7.20.6 requestidlecallback: 0.3.0 - /@wordpress/redux-routine/4.22.0_redux@4.2.0: - resolution: {integrity: sha512-rQqarJoXzyKUuwtsXM+h+2Rw8WvBLNwhxsuwSGWhPMCjn40aKQwYw8bK1ATnQ8AXieYZdzq5bElyMlOOObawfg==} + /@wordpress/redux-routine/4.23.0_redux@4.2.0: + resolution: {integrity: sha512-uPWlYT28qsPKL1DOLcjU2hUZNsNb3uTSP5rPRD6rwZHtezQLYtg1jFM+HG6TAm0hPjnqMbcULmDNI+FA2fSdHg==} engines: {node: '>=12'} peerDependencies: redux: '>=4' @@ -8823,14 +8936,14 @@ packages: react: ^17.0.0 dependencies: '@babel/runtime': 7.20.6 - '@wordpress/a11y': 3.22.0 + '@wordpress/a11y': 3.23.0 '@wordpress/compose': 5.20.0_react@17.0.2 '@wordpress/data': 7.6.0_react@17.0.2 - '@wordpress/deprecated': 3.22.0 + '@wordpress/deprecated': 3.23.0 '@wordpress/element': 4.20.0 - '@wordpress/escape-html': 2.22.0 - '@wordpress/i18n': 4.22.0 - '@wordpress/keycodes': 3.22.0 + '@wordpress/escape-html': 2.23.0 + '@wordpress/i18n': 4.23.0 + '@wordpress/keycodes': 3.23.0 memize: 1.1.0 react: 17.0.2 rememo: 4.0.2 @@ -8937,6 +9050,10 @@ packages: resolution: {integrity: sha512-BMM4GqiJNIZzh5SIK17EOyilp08mQ+DoKfxL+pl/lpA68jxYUTcKJf0atNbxXKPZHDCWGnQzFwr+huNYOtp4CQ==} engines: {node: '>=12'} + /@wordpress/warning/2.23.0: + resolution: {integrity: sha512-TbcquyD41BcyqN74PpxWf6GRA4toBhQYovZvmoueyO2sQntttqv8sypCQwvErfpEIv7xH5nIvXoWdsgkEKEAKQ==} + engines: {node: '>=12'} + /@wordpress/widgets/2.20.0_mqlga6776einr32k2jcmre7x6i: resolution: {integrity: sha512-9PMytBUhBbyw5WFKMuLxHoR1E+9YYBAmzRiED+MtNeLsOgi776LgG7OgNh3n7Xzt3/lrtCF/olt3CbXgiM2jmw==} peerDependencies: @@ -10043,7 +10160,7 @@ packages: resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==} dependencies: pascal-case: 3.1.2 - tslib: 2.4.1 + tslib: 2.3.1 /camelcase-css/2.0.1: resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} @@ -10093,7 +10210,7 @@ packages: resolution: {integrity: sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==} dependencies: no-case: 3.0.4 - tslib: 2.4.1 + tslib: 2.3.1 upper-case-first: 2.0.2 /capture-exit/2.0.0: @@ -10164,7 +10281,7 @@ packages: path-case: 3.0.4 sentence-case: 3.0.4 snake-case: 3.0.4 - tslib: 2.4.1 + tslib: 2.3.1 /char-regex/1.0.2: resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==} @@ -10642,7 +10759,7 @@ packages: resolution: {integrity: sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==} dependencies: no-case: 3.0.4 - tslib: 2.4.1 + tslib: 2.3.1 upper-case: 2.0.2 /content-disposition/0.5.4: @@ -11392,7 +11509,7 @@ packages: resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==} dependencies: no-case: 3.0.4 - tslib: 2.4.1 + tslib: 2.3.1 /dot-prop/5.3.0: resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==} @@ -11425,7 +11542,7 @@ packages: prop-types: 15.8.1 react: 17.0.2 react-is: 17.0.2 - tslib: 2.4.1 + tslib: 2.3.1 /duplicate-package-checker-webpack-plugin/3.0.0: resolution: {integrity: sha512-aO50/qPC7X2ChjRFniRiscxBLT/K01bALqfcDaf8Ih5OqQ1N4iT/Abx9Ofu3/ms446vHTm46FACIuJUmgUQcDQ==} @@ -13017,14 +13134,14 @@ packages: react: 17.0.2 react-dom: 17.0.2_react@17.0.2 style-value-types: 5.0.0 - tslib: 2.4.1 + tslib: 2.3.1 optionalDependencies: '@emotion/is-prop-valid': 0.8.8 /framesync/6.0.1: resolution: {integrity: sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==} dependencies: - tslib: 2.4.1 + tslib: 2.3.1 /fresh/0.5.2: resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==} @@ -13300,7 +13417,6 @@ packages: minimatch: 3.1.2 once: 1.4.0 path-is-absolute: 1.0.1 - dev: true /glob/8.0.3: resolution: {integrity: sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==} @@ -13610,7 +13726,7 @@ packages: resolution: {integrity: sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==} dependencies: capital-case: 1.0.4 - tslib: 2.4.1 + tslib: 2.3.1 /hey-listen/1.0.8: resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==} @@ -14959,7 +15075,7 @@ packages: resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 18.11.13 + '@types/node': 18.11.15 merge-stream: 2.0.0 supports-color: 7.2.0 dev: true @@ -15523,7 +15639,7 @@ packages: /lower-case/2.0.2: resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==} dependencies: - tslib: 2.4.1 + tslib: 2.3.1 /lowlight/1.20.0: resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==} @@ -16006,7 +16122,7 @@ packages: resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==} dependencies: lower-case: 2.0.2 - tslib: 2.4.1 + tslib: 2.3.1 /nock/13.2.9: resolution: {integrity: sha512-1+XfJNYF1cjGB+TKMWi29eZ0b82QOvQs2YoLNzbpWGqFMtRQHTa57osqdGj4FrFPgkO4D4AZinzUJR9VvW3QUA==} @@ -16446,7 +16562,7 @@ packages: resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==} dependencies: dot-case: 3.0.4 - tslib: 2.4.1 + tslib: 2.3.1 /parent-module/1.0.1: resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==} @@ -16515,7 +16631,7 @@ packages: resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==} dependencies: no-case: 3.0.4 - tslib: 2.4.1 + tslib: 2.3.1 /pascalcase/0.1.1: resolution: {integrity: sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==} @@ -16530,7 +16646,7 @@ packages: resolution: {integrity: sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==} dependencies: dot-case: 3.0.4 - tslib: 2.4.1 + tslib: 2.3.1 /path-dirname/1.0.2: resolution: {integrity: sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==} @@ -16839,7 +16955,7 @@ packages: framesync: 6.0.1 hey-listen: 1.0.8 style-value-types: 5.0.0 - tslib: 2.4.1 + tslib: 2.3.1 /posix-character-classes/0.1.1: resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==} @@ -17656,6 +17772,15 @@ packages: react: 17.0.2 scheduler: 0.20.2 + /react-dom/18.2.0_react@18.2.0: + resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} + peerDependencies: + react: ^18.2.0 + dependencies: + loose-envify: 1.4.0 + react: 18.2.0 + scheduler: 0.23.0 + /react-easy-crop/4.6.3_sfoxds7t5ydpegc3knd667wn6m: resolution: {integrity: sha512-xeP5Cq56xDK2QkGs6RIrVXQs7cDan9B16yUt/3XqFN7siSjLgXkDfKNri8eC8CFSd3AFs0NX6IpIeIPBf4PCBA==} peerDependencies: @@ -17995,6 +18120,12 @@ packages: loose-envify: 1.4.0 object-assign: 4.1.1 + /react/18.2.0: + resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} + engines: {node: '>=0.10.0'} + dependencies: + loose-envify: 1.4.0 + /read-pkg-up/1.0.1: resolution: {integrity: sha512-WD9MTlNtI55IwYUS27iHh9tK3YoIVhxis8yKhLpTqWtml739uXc9NWTpxoHkfZf3+DkCCsXox94/VWZniuZm6A==} engines: {node: '>=0.10.0'} @@ -18488,7 +18619,7 @@ packages: resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==} hasBin: true dependencies: - glob: 7.1.6 + glob: 7.2.3 /rollup-plugin-copy/3.4.0: resolution: {integrity: sha512-rGUmYYsYsceRJRqLVlE9FivJMxJ7X6jDlP79fmFkL8sJs7VVMSVyA2yfyL+PGyO/vJs4A87hwhgVfz61njI+uQ==} @@ -18884,6 +19015,11 @@ packages: loose-envify: 1.4.0 object-assign: 4.1.1 + /scheduler/0.23.0: + resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} + dependencies: + loose-envify: 1.4.0 + /schema-utils/2.7.0: resolution: {integrity: sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==} engines: {node: '>= 8.9.0'} @@ -18978,7 +19114,7 @@ packages: resolution: {integrity: sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==} dependencies: no-case: 3.0.4 - tslib: 2.4.1 + tslib: 2.3.1 upper-case-first: 2.0.2 /serialize-javascript/4.0.0: @@ -19147,7 +19283,7 @@ packages: resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==} dependencies: dot-case: 3.0.4 - tslib: 2.4.1 + tslib: 2.3.1 /snapdragon-node/2.1.1: resolution: {integrity: sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==} @@ -19610,7 +19746,7 @@ packages: resolution: {integrity: sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==} dependencies: hey-listen: 1.0.8 - tslib: 2.4.1 + tslib: 2.3.1 /stylehacks/5.1.1_postcss@8.4.20: resolution: {integrity: sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==} @@ -20140,7 +20276,6 @@ packages: /tslib/2.3.1: resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==} - dev: true /tslib/2.4.1: resolution: {integrity: sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==} @@ -20428,12 +20563,12 @@ packages: /upper-case-first/2.0.2: resolution: {integrity: sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==} dependencies: - tslib: 2.4.1 + tslib: 2.3.1 /upper-case/2.0.2: resolution: {integrity: sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==} dependencies: - tslib: 2.4.1 + tslib: 2.3.1 /uri-js/4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} diff --git a/projects/js-packages/image-guide/.eslintrc.cjs b/projects/js-packages/image-guide/.eslintrc.cjs index 05da5afd741a..12b02c2b254b 100644 --- a/projects/js-packages/image-guide/.eslintrc.cjs +++ b/projects/js-packages/image-guide/.eslintrc.cjs @@ -9,6 +9,7 @@ module.exports = { require.resolve( 'jetpack-js-tools/eslintrc/svelte' ), ], ignorePatterns: loadIgnorePatterns( __dirname ), + parser: '@typescript-eslint/parser', parserOptions: { babelOptions: { configFile: require.resolve( './babel.config.js' ), diff --git a/projects/js-packages/image-guide/package.json b/projects/js-packages/image-guide/package.json index 1357369dc7d0..ab132cde153f 100644 --- a/projects/js-packages/image-guide/package.json +++ b/projects/js-packages/image-guide/package.json @@ -4,6 +4,7 @@ "version": "0.1.0-alpha", "description": "Go through the dom to analyze image size on screen vs actual file size.", "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/image-guide/#readme", + "type": "module", "bugs": { "url": "https://github.com/Automattic/jetpack/labels/[JS Package] Image Guide" }, @@ -23,7 +24,10 @@ }, "devDependencies": { "@automattic/jetpack-webpack-config": "workspace:1.3.19", + "@typescript-eslint/parser": "5.36.1", + "eslint": "8.22.0", "jest": "29.3.1", + "typescript": "4.8.2", "webpack": "5.72.1", "webpack-cli": "4.9.1" }, @@ -32,8 +36,6 @@ "yarn": "use pnpm instead - see docs/yarn-upgrade.md" }, "exports": { - ".": "./index.jsx", - "./state": "./src/state", - "./action-types": "./src/state/action-types" + ".": "./src/index.ts" } } diff --git a/projects/js-packages/image-guide/src/index.ts b/projects/js-packages/image-guide/src/index.ts index c1b7ecb3a10a..5cba7376a4d3 100644 --- a/projects/js-packages/image-guide/src/index.ts +++ b/projects/js-packages/image-guide/src/index.ts @@ -1,4 +1,5 @@ -import { MeasurableImage } from './MeasurableImage'; +import { Dimensions, MeasurableImage, Weight } from './MeasurableImage'; import { getMeasurableImages } from './find-image-elements'; export { MeasurableImage, getMeasurableImages }; +export type { Weight, Dimensions }; diff --git a/projects/js-packages/image-guide/webpack.config.js b/projects/js-packages/image-guide/webpack.config.js deleted file mode 100644 index 60c62eb7436d..000000000000 --- a/projects/js-packages/image-guide/webpack.config.js +++ /dev/null @@ -1,42 +0,0 @@ -const path = require( 'path' ); -const jetpackWebpackConfig = require( '@automattic/jetpack-webpack-config/webpack' ); - -module.exports = { - entry: { - index: './src/index.ts', - }, - mode: jetpackWebpackConfig.mode, - devtool: jetpackWebpackConfig.devtool, - output: { - ...jetpackWebpackConfig.output, - path: path.resolve( __dirname, 'build' ), - }, - optimization: { - ...jetpackWebpackConfig.optimization, - }, - resolve: { - ...jetpackWebpackConfig.resolve, - }, - node: false, - plugins: [ ...jetpackWebpackConfig.StandardPlugins() ], - module: { - strictExportPresence: true, - rules: [ - // Transpile JavaScript. - jetpackWebpackConfig.TranspileRule( { - exclude: /node_modules\//, - } ), - - // Transpile @automattic/jetpack-* in node_modules too. - jetpackWebpackConfig.TranspileRule( { - includeNodeModules: [ '@automattic/jetpack-' ], - } ), - - // Handle CSS. - jetpackWebpackConfig.CssRule(), - - // Handle images. - jetpackWebpackConfig.FileRule(), - ], - }, -}; diff --git a/projects/plugins/boost/app/features/image-guide/src/MeasurableImage.ts b/projects/plugins/boost/app/features/image-guide/src/MeasurableImage.ts deleted file mode 100644 index d361c1bef411..000000000000 --- a/projects/plugins/boost/app/features/image-guide/src/MeasurableImage.ts +++ /dev/null @@ -1,116 +0,0 @@ -export type SourceCallbackFn = ( node: HTMLElement ) => string | null; -export type Dimensions = { width: number; height: number }; -export type Weight = { weight: number }; - -/** - * A class that represents a DOM Element that - * has an image that should be measured and - * provides measurement utilities. - */ -export class MeasurableImage { - readonly node: HTMLElement | HTMLImageElement; - private getURLCallback: SourceCallbackFn; - - /** - * @param node The DOM Element that contains the image. - * @param getURL A function that takes in the node and returns the URL of the image. - */ - constructor( node: HTMLElement | HTMLImageElement, getURL: SourceCallbackFn ) { - this.node = node; - this.getURLCallback = getURL; - } - - public getURL() { - return this.getURLCallback( this.node ); - } - - public getSizeOnPage() { - const { width, height } = this.node.getBoundingClientRect(); - - return { - width: Math.round( width ), - height: Math.round( height ), - }; - } - - public async getFileSize( url: string ) { - const [ weight, { width, height } ] = await Promise.all( [ - this.fetchFileWeight( url ), - this.fetchFileDimensions( url ), - ] ); - - return { - width, - height, - weight, - }; - } - - public getPotentialSavings( fileSize: Dimensions & Weight, sizeOnPage: Dimensions ) { - const oversizedRatio = this.getOversizedRatio( fileSize, sizeOnPage ); - if ( oversizedRatio <= 1 ) { - return null; - } - return Math.round( fileSize.weight - fileSize.weight / oversizedRatio ); - } - - /** - * To get the expected size of the image, - * the image size on page has to be multiplied by the device pixel ratio. - * - * @param sizeOnPage The size of the image on the page. - */ - public getExpectedSize( sizeOnPage: Dimensions ) { - const dpr = window.devicePixelRatio || 1; - return { - width: Math.round( sizeOnPage.width * dpr ), - height: Math.round( sizeOnPage.height * dpr ), - }; - } - - public getOversizedRatio( fileSize: Dimensions, sizeOnPage: Dimensions ) { - const { width, height } = this.getExpectedSize( sizeOnPage ); - return ( fileSize.width * fileSize.height ) / ( width * height ); - } - - /** - * Fetches the weight of the image at the given URL, - * by reading the Content-Length header. - * - * @param url string The URL of the image. - */ - private async fetchFileWeight( url: string ) { - const response = await fetch( url, { method: 'HEAD', mode: 'no-cors' } ); - if ( ! response.url ) { - // eslint-disable-next-line no-console - console.log( `Can't get image size for ${ url } likely due to a CORS error.` ); - return -1; - } - - const size = response.headers.get( 'content-length' ); - if ( size ) { - return parseInt( size, 10 ) / 1024; - } - - return -1; - } - - /** - * Fetches the dimensions of the image at the given URL, - * This creates a new image element and loads the image. - * - * @param url image url - */ - private async fetchFileDimensions( url: string ) { - const img = new Image(); - img.src = url; - return new Promise< { width: number; height: number } >( resolve => { - img.onload = () => { - resolve( { width: Math.round( img.width ), height: Math.round( img.height ) } ); - }; - img.onerror = () => { - resolve( { width: -1, height: -1 } ); - }; - } ); - } -} diff --git a/projects/plugins/boost/app/features/image-guide/src/find-image-elements.ts b/projects/plugins/boost/app/features/image-guide/src/find-image-elements.ts deleted file mode 100644 index 4e5ebfdfd9b9..000000000000 --- a/projects/plugins/boost/app/features/image-guide/src/find-image-elements.ts +++ /dev/null @@ -1,111 +0,0 @@ -import { MeasurableImage } from './MeasurableImage'; - -/** - * Get elements that either are image tags or have a background image. - * - * @param nodes A list of nodes to filter - */ -export function findMeasurableElements( nodes: Element[] ): HTMLElement[] | HTMLImageElement[] { - return nodes.filter( ( el ): el is HTMLElement | HTMLImageElement => { - if ( el instanceof HTMLImageElement ) { - return true; - } - if ( el instanceof HTMLElement ) { - const style = getComputedStyle( el ); - return 'none' !== style.backgroundImage; - } - return false; - } ); -} - -/** - * Get the current image source from a node. - * - * @param node HTMLImageElement - */ -export function imageTagSource( node: HTMLImageElement ) { - if ( imageLikeURL( node.currentSrc ) ) { - return node.currentSrc; - } - if ( imageLikeURL( node.src ) ) { - return node.src; - } - - return null; -} - -/** - * Get the background image URL from a node. - * - * @param node HTMLElement - */ -export function backgroundImageSource( node: HTMLElement ) { - const src = getComputedStyle( node ).backgroundImage; - const url = src.match( /url\(.?(.*?).?\)/i ); - if ( url && url[ 1 ] && imageLikeURL( url[ 1 ] ) ) { - return url[ 1 ]; - } -} - -/** - * Create MeasurableImage objects from a list of nodes - * and remove any nodes that can't be measured. - * - * @param domNodes A list of nodes to measure - */ -export function getMeasurableImages( domNodes: Element[] ): MeasurableImage[] { - const nodes = findMeasurableElements( domNodes ); - return nodes - .map( node => { - if ( node instanceof HTMLImageElement ) { - return new MeasurableImage( node, imageTagSource ); - } else if ( node instanceof HTMLElement ) { - if ( ! backgroundImageSource( node ) ) { - /** - * Background elements that have no valid URL - * shouldn't be measured. - */ - return null; - } - - return new MeasurableImage( node, backgroundImageSource ); - } - - return null; - } ) - .filter( image => image !== null ); -} - -/** - * isImageLikeURL - a helper function to determine if URL could be an image. - * - * This function ensures that the value passed in looks like a URL. - * This is because `background: url(...)` and `src="..."` can - * contain various values that are not URLs, like: - * - none - * - linear-gradient(...) - * - data:image/png;base64,... - * - ... - * - * For the purposes of analyzing image sizes, - * we also don't consider SVGs to be images. - * - * @param value string to check - */ -function imageLikeURL( value: string ): boolean { - // Look for relative URLs that are not SVGs - // Intentionally not using an allow-list because images may - // be served from weird URLs like /images/1234?size=large - if ( value.startsWith( '/' ) ) { - // Remove query string parameters - const path = value.split( '?' )[ 0 ]; - return ! path.endsWith( '.svg' ); - } - - try { - const url = new URL( value ); - return url.protocol === 'http:' || url.protocol === 'https:'; - } catch ( e ) { - return false; - } -} diff --git a/projects/plugins/boost/app/features/image-guide/src/index.ts b/projects/plugins/boost/app/features/image-guide/src/index.ts index baea01c14895..1527b34785bf 100644 --- a/projects/plugins/boost/app/features/image-guide/src/index.ts +++ b/projects/plugins/boost/app/features/image-guide/src/index.ts @@ -1,9 +1,9 @@ -import { MeasurableImage } from './MeasurableImage'; -import { getMeasurableImages } from './find-image-elements'; +import { getMeasurableImages } from '@automattic/jetpack-image-guide'; import { attachGuides } from './initialize'; import { guideState } from './stores/GuideState'; import AdminBarToggle from './ui/AdminBarToggle.svelte'; import type { MeasurableImageStore } from './stores/MeasurableImageStore'; +import type { MeasurableImage } from '@automattic/jetpack-image-guide'; /** * A helper function to filter out images diff --git a/projects/plugins/boost/app/features/image-guide/src/initialize.ts b/projects/plugins/boost/app/features/image-guide/src/initialize.ts index fd78d65d5764..c90771ebb4e8 100644 --- a/projects/plugins/boost/app/features/image-guide/src/initialize.ts +++ b/projects/plugins/boost/app/features/image-guide/src/initialize.ts @@ -1,7 +1,7 @@ import { MeasurableImageStore } from './stores/MeasurableImageStore'; import Main from './ui/Main.svelte'; -import type { MeasurableImage } from './MeasurableImage'; import type { ImageGuideConfig } from './types'; +import type { MeasurableImage } from '@automattic/jetpack-image-guide'; /** * This function looks for the closest parent that is diff --git a/projects/plugins/boost/app/features/image-guide/src/stores/MeasurableImageStore.ts b/projects/plugins/boost/app/features/image-guide/src/stores/MeasurableImageStore.ts index 8325f5db058d..116a4e609a80 100644 --- a/projects/plugins/boost/app/features/image-guide/src/stores/MeasurableImageStore.ts +++ b/projects/plugins/boost/app/features/image-guide/src/stores/MeasurableImageStore.ts @@ -1,5 +1,5 @@ +import { Dimensions, MeasurableImage, Weight } from '@automattic/jetpack-image-guide'; import { Writable, Readable, writable, derived } from 'svelte/store'; -import { Dimensions, MeasurableImage, Weight } from '../MeasurableImage'; /** * Each measurable image has its own set of Svelte stores. diff --git a/projects/plugins/boost/package.json b/projects/plugins/boost/package.json index f66272b04f66..d37e7f4f3257 100644 --- a/projects/plugins/boost/package.json +++ b/projects/plugins/boost/package.json @@ -6,7 +6,7 @@ "test": "tests" }, "dependencies": { - "@automattic/jetpack-base-styles": "workspace:*", + "@automattic/jetpack-base-styles": "workspace:0.3.16", "@wordpress/components": "22.1.0", "@wordpress/element": "4.20.0", "history": "5.3.0", @@ -15,7 +15,8 @@ "svelte-navigator": "3.1.5" }, "devDependencies": { - "@automattic/jetpack-components": "workspace:*", + "@automattic/jetpack-components": "workspace:0.26.4-alpha", + "@automattic/jetpack-image-guide": "workspace:0.1.0-alpha", "@babel/core": "7.20.5", "@babel/preset-env": "7.20.2", "@babel/preset-react": "7.18.6", diff --git a/projects/plugins/boost/rollup.config.js b/projects/plugins/boost/rollup.config.js index d477408ed8dc..e40701da055c 100644 --- a/projects/plugins/boost/rollup.config.js +++ b/projects/plugins/boost/rollup.config.js @@ -221,6 +221,15 @@ export default [ file: `${ GUIDE_PATH }/dist/guide.js`, }, plugins: [ + replace( { + preventAssignment: true, + delimiters: [ '', '' ], + values: { + "@import '@automattic": "@import '~@automattic", + 'process.env.NODE_ENV': '"production"', + }, + } ), + resolve( { browser: true, preferBuiltins: false, From 9b80804a5392a5eec018a129e8e7df6ffd124671 Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Thu, 15 Dec 2022 12:22:10 +0600 Subject: [PATCH 03/27] changelog --- projects/plugins/boost/changelog/add-image-guide-package | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/plugins/boost/changelog/add-image-guide-package diff --git a/projects/plugins/boost/changelog/add-image-guide-package b/projects/plugins/boost/changelog/add-image-guide-package new file mode 100644 index 000000000000..89b1960d2655 --- /dev/null +++ b/projects/plugins/boost/changelog/add-image-guide-package @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Use image guide from a monorepo package From 150f74ccdb93ba72eef55961d9cf5ddf7ac53fc7 Mon Sep 17 00:00:00 2001 From: Mark George Date: Thu, 15 Dec 2022 17:43:56 +1100 Subject: [PATCH 04/27] Specify a main file in package.json --- projects/js-packages/image-guide/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/js-packages/image-guide/package.json b/projects/js-packages/image-guide/package.json index ab132cde153f..db3f034f7b47 100644 --- a/projects/js-packages/image-guide/package.json +++ b/projects/js-packages/image-guide/package.json @@ -37,5 +37,6 @@ }, "exports": { ".": "./src/index.ts" - } + }, + "main": "src/index.ts" } From 1ca268cc7c6236ff7365d3064ae5bc4329815cb1 Mon Sep 17 00:00:00 2001 From: Mark George Date: Fri, 16 Dec 2022 16:51:36 +1100 Subject: [PATCH 05/27] Two step build --- projects/js-packages/image-guide/package.json | 8 ++++---- projects/js-packages/image-guide/src/index.ts | 2 +- projects/js-packages/image-guide/tsconfig.json | 7 +++++-- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/projects/js-packages/image-guide/package.json b/projects/js-packages/image-guide/package.json index db3f034f7b47..2f1f858f8e14 100644 --- a/projects/js-packages/image-guide/package.json +++ b/projects/js-packages/image-guide/package.json @@ -16,8 +16,8 @@ "license": "GPL-2.0-or-later", "author": "Automattic", "scripts": { - "build": "pnpm run clean && pnpm run build-client", - "build-client": "pnpm webpack --config webpack.config.js", + "prepare": "pnpm build", + "build": "tsc", "clean": "rm -rf build/", "watch": "pnpm run build && pnpm webpack watch", "test": "jest --config=tests/jest.config.js" @@ -36,7 +36,7 @@ "yarn": "use pnpm instead - see docs/yarn-upgrade.md" }, "exports": { - ".": "./src/index.ts" + ".": "./build/index.js" }, - "main": "src/index.ts" + "main": "build/index.js" } diff --git a/projects/js-packages/image-guide/src/index.ts b/projects/js-packages/image-guide/src/index.ts index 5cba7376a4d3..acf751cb1f22 100644 --- a/projects/js-packages/image-guide/src/index.ts +++ b/projects/js-packages/image-guide/src/index.ts @@ -2,4 +2,4 @@ import { Dimensions, MeasurableImage, Weight } from './MeasurableImage'; import { getMeasurableImages } from './find-image-elements'; export { MeasurableImage, getMeasurableImages }; -export type { Weight, Dimensions }; +export { type Weight, type Dimensions }; diff --git a/projects/js-packages/image-guide/tsconfig.json b/projects/js-packages/image-guide/tsconfig.json index c1b827d7fcbc..db6accdeca5d 100644 --- a/projects/js-packages/image-guide/tsconfig.json +++ b/projects/js-packages/image-guide/tsconfig.json @@ -1,9 +1,12 @@ { "extends": "jetpack-js-tools/tsconfig.base.json", - "include": [ "./src" ], + "include": [ "./src/*" ], "compilerOptions": { "typeRoots": [ "./node_modules/@types/", "src" ], "sourceMap": true, - "forceConsistentCasingInFileNames": true + "forceConsistentCasingInFileNames": true, + "outDir": "./build/", + "noEmit": false, + "declaration": true } } From eb500d83dd043bea258ab15f5706e619828364ad Mon Sep 17 00:00:00 2001 From: Mark George Date: Fri, 16 Dec 2022 16:55:18 +1100 Subject: [PATCH 06/27] Use simpler type syntax since prettier... doesn't like it? --- projects/js-packages/image-guide/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/image-guide/src/index.ts b/projects/js-packages/image-guide/src/index.ts index acf751cb1f22..5cba7376a4d3 100644 --- a/projects/js-packages/image-guide/src/index.ts +++ b/projects/js-packages/image-guide/src/index.ts @@ -2,4 +2,4 @@ import { Dimensions, MeasurableImage, Weight } from './MeasurableImage'; import { getMeasurableImages } from './find-image-elements'; export { MeasurableImage, getMeasurableImages }; -export { type Weight, type Dimensions }; +export type { Weight, Dimensions }; From fe68aafbcca77c5fe8cc541116f22779c4586f10 Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 10:04:10 +0600 Subject: [PATCH 07/27] Build image-guide on boost e2e tests --- projects/plugins/boost/tests/e2e/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/plugins/boost/tests/e2e/package.json b/projects/plugins/boost/tests/e2e/package.json index 210e5d0dc9b7..3a0154ca2e91 100644 --- a/projects/plugins/boost/tests/e2e/package.json +++ b/projects/plugins/boost/tests/e2e/package.json @@ -14,7 +14,7 @@ "license": "GPL-2.0-or-later", "author": "Automattic", "scripts": { - "build": "pnpm jetpack build plugins/jetpack plugins/boost packages/plugin-deactivation -v --no-pnpm-install --production", + "build": "pnpm jetpack build plugins/jetpack plugins/boost js-packages/image-guide packages/plugin-deactivation -v --no-pnpm-install --production", "clean": "rm -rf output", "config:decrypt": "openssl enc -md sha1 -aes-256-cbc -d -pass env:CONFIG_KEY -in ./node_modules/jetpack-e2e-commons/config/encrypted.enc -out ./config/local.cjs", "distclean": "rm -rf node_modules", From b7741bb183a0e85ac1a4559ad241e7e690cdffaf Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 10:04:58 +0600 Subject: [PATCH 08/27] changelog --- .../image-guide/changelog/add-image-guide-package | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 projects/js-packages/image-guide/changelog/add-image-guide-package diff --git a/projects/js-packages/image-guide/changelog/add-image-guide-package b/projects/js-packages/image-guide/changelog/add-image-guide-package new file mode 100644 index 000000000000..1f7df026634e --- /dev/null +++ b/projects/js-packages/image-guide/changelog/add-image-guide-package @@ -0,0 +1,5 @@ +Significance: patch +Type: added +Comment: Initiated the package + + From 5c330e7d204f632dc1004149b631875731b8b6a6 Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 10:57:16 +0600 Subject: [PATCH 09/27] Setup tests --- projects/js-packages/image-guide/.eslintrc.cjs | 2 +- .../{babel.config.js => babel.config.cjs} | 0 projects/js-packages/image-guide/composer.json | 15 ++++++--------- projects/js-packages/image-guide/package.json | 3 ++- .../js-packages/image-guide/tests/index.test.js | 14 +++++++------- 5 files changed, 16 insertions(+), 18 deletions(-) rename projects/js-packages/image-guide/{babel.config.js => babel.config.cjs} (100%) diff --git a/projects/js-packages/image-guide/.eslintrc.cjs b/projects/js-packages/image-guide/.eslintrc.cjs index 12b02c2b254b..17f4d01e4acf 100644 --- a/projects/js-packages/image-guide/.eslintrc.cjs +++ b/projects/js-packages/image-guide/.eslintrc.cjs @@ -12,7 +12,7 @@ module.exports = { parser: '@typescript-eslint/parser', parserOptions: { babelOptions: { - configFile: require.resolve( './babel.config.js' ), + configFile: require.resolve( './babel.config.cjs' ), }, sourceType: 'module', tsconfigRootDir: __dirname, diff --git a/projects/js-packages/image-guide/babel.config.js b/projects/js-packages/image-guide/babel.config.cjs similarity index 100% rename from projects/js-packages/image-guide/babel.config.js rename to projects/js-packages/image-guide/babel.config.cjs diff --git a/projects/js-packages/image-guide/composer.json b/projects/js-packages/image-guide/composer.json index 2fbdd22f2111..76ecb2f0b4bc 100644 --- a/projects/js-packages/image-guide/composer.json +++ b/projects/js-packages/image-guide/composer.json @@ -14,15 +14,6 @@ ] }, "scripts": { - "phpunit": [ - "./vendor/phpunit/phpunit/phpunit --colors=always" - ], - "test-coverage": [ - "php -dpcov.directory=. ./vendor/bin/phpunit --coverage-clover \"$COVERAGE_DIR/clover.xml\"" - ], - "test-php": [ - "@composer phpunit" - ], "build-development": [ "pnpm run build" ], @@ -32,6 +23,12 @@ "watch": [ "Composer\\Config::disableProcessTimeout", "pnpm run watch" + ], + "test-js": [ + "pnpm run test" + ], + "test-coverage": [ + "pnpm run test-coverage" ] }, "repositories": [ diff --git a/projects/js-packages/image-guide/package.json b/projects/js-packages/image-guide/package.json index 2f1f858f8e14..3353cb70f4c6 100644 --- a/projects/js-packages/image-guide/package.json +++ b/projects/js-packages/image-guide/package.json @@ -20,7 +20,8 @@ "build": "tsc", "clean": "rm -rf build/", "watch": "pnpm run build && pnpm webpack watch", - "test": "jest --config=tests/jest.config.js" + "test-coverage": "pnpm run test --coverageDirectory=\"$COVERAGE_DIR\" --coverage --coverageReporters=clover", + "test": "NODE_OPTIONS=--experimental-vm-modules jest" }, "devDependencies": { "@automattic/jetpack-webpack-config": "workspace:1.3.19", diff --git a/projects/js-packages/image-guide/tests/index.test.js b/projects/js-packages/image-guide/tests/index.test.js index d34c1ab3fc54..46e1f970906b 100644 --- a/projects/js-packages/image-guide/tests/index.test.js +++ b/projects/js-packages/image-guide/tests/index.test.js @@ -1,7 +1,7 @@ -// We recommend using `jest` for testing. If you're testing React code, we recommend `@testing-library/react` and related packages. -// Please match the versions used elsewhere in the monorepo. -// -// Please don't add new uses of `mocha`, `chai`, `sinon`, `enzyme`, and so on. We're trying to standardize on one testing framework. -// -// The default setup is to have files named like "name.test.js" (or .jsx, .ts, or .tsx) in this `tests/` directory. -// But you could instead put them in `src/`, or put files like "name.js" (or .jsx, .ts, or .tsx) in `test` or `__tests__` directories somewhere. +import MeasurableImage from '../src/index'; + +describe( 'MeasurableImage', () => { + it( 'returns an object', () => { + expect( typeof MeasurableImage ).toBe( 'object' ); + } ); +} ); From d307c2c0587a3649c2a60f519c70b0548963322d Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 11:07:12 +0600 Subject: [PATCH 10/27] Attempt to fix imports --- projects/js-packages/image-guide/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/image-guide/package.json b/projects/js-packages/image-guide/package.json index 3353cb70f4c6..253361f38122 100644 --- a/projects/js-packages/image-guide/package.json +++ b/projects/js-packages/image-guide/package.json @@ -37,7 +37,7 @@ "yarn": "use pnpm instead - see docs/yarn-upgrade.md" }, "exports": { - ".": "./build/index.js" + ".": "./build/index.d.js" }, "main": "build/index.js" } From ce83d44f09f312ab397af1507183da8fd46d3526 Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 11:46:58 +0600 Subject: [PATCH 11/27] Change main file --- projects/js-packages/image-guide/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/image-guide/package.json b/projects/js-packages/image-guide/package.json index 253361f38122..de0b365aeb1a 100644 --- a/projects/js-packages/image-guide/package.json +++ b/projects/js-packages/image-guide/package.json @@ -39,5 +39,5 @@ "exports": { ".": "./build/index.d.js" }, - "main": "build/index.js" + "main": "src/index.ts" } From 8d11cc91115ff3df3fd88ae8b4b836c1857750a3 Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 11:55:15 +0600 Subject: [PATCH 12/27] Fixed monorepo package dependencies --- projects/js-packages/image-guide/package.json | 2 +- projects/plugins/boost/changelog/add-image-guide-package | 4 ---- projects/plugins/boost/package.json | 6 +++--- 3 files changed, 4 insertions(+), 8 deletions(-) delete mode 100644 projects/plugins/boost/changelog/add-image-guide-package diff --git a/projects/js-packages/image-guide/package.json b/projects/js-packages/image-guide/package.json index de0b365aeb1a..579a82f59dba 100644 --- a/projects/js-packages/image-guide/package.json +++ b/projects/js-packages/image-guide/package.json @@ -24,7 +24,7 @@ "test": "NODE_OPTIONS=--experimental-vm-modules jest" }, "devDependencies": { - "@automattic/jetpack-webpack-config": "workspace:1.3.19", + "@automattic/jetpack-webpack-config": "workspace:*", "@typescript-eslint/parser": "5.36.1", "eslint": "8.22.0", "jest": "29.3.1", diff --git a/projects/plugins/boost/changelog/add-image-guide-package b/projects/plugins/boost/changelog/add-image-guide-package deleted file mode 100644 index 89b1960d2655..000000000000 --- a/projects/plugins/boost/changelog/add-image-guide-package +++ /dev/null @@ -1,4 +0,0 @@ -Significance: patch -Type: changed - -Use image guide from a monorepo package diff --git a/projects/plugins/boost/package.json b/projects/plugins/boost/package.json index d37e7f4f3257..7017643add91 100644 --- a/projects/plugins/boost/package.json +++ b/projects/plugins/boost/package.json @@ -6,7 +6,7 @@ "test": "tests" }, "dependencies": { - "@automattic/jetpack-base-styles": "workspace:0.3.16", + "@automattic/jetpack-base-styles": "workspace:*", "@wordpress/components": "22.1.0", "@wordpress/element": "4.20.0", "history": "5.3.0", @@ -15,8 +15,8 @@ "svelte-navigator": "3.1.5" }, "devDependencies": { - "@automattic/jetpack-components": "workspace:0.26.4-alpha", - "@automattic/jetpack-image-guide": "workspace:0.1.0-alpha", + "@automattic/jetpack-components": "workspace:*", + "@automattic/jetpack-image-guide": "workspace:*", "@babel/core": "7.20.5", "@babel/preset-env": "7.20.2", "@babel/preset-react": "7.18.6", From fef70112fe4f8f98581bcf6c7e809c6654d31a82 Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 11:55:39 +0600 Subject: [PATCH 13/27] changelog --- projects/plugins/boost/changelog/add-image-guide-package | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 projects/plugins/boost/changelog/add-image-guide-package diff --git a/projects/plugins/boost/changelog/add-image-guide-package b/projects/plugins/boost/changelog/add-image-guide-package new file mode 100644 index 000000000000..e35514684b62 --- /dev/null +++ b/projects/plugins/boost/changelog/add-image-guide-package @@ -0,0 +1,5 @@ +Significance: patch +Type: added +Comment: Added image guide package + + From 3d889b5ad505d0e95f6c7e19f72e80f5285bf270 Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 11:58:08 +0600 Subject: [PATCH 14/27] Update package.lock --- pnpm-lock.yaml | 63 +++++++++++-------- projects/js-packages/image-guide/package.json | 2 +- 2 files changed, 37 insertions(+), 28 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a07f98d669fa..d1e37c0153a0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2436,7 +2436,7 @@ packages: convert-source-map: 1.9.0 debug: 4.3.4 gensync: 1.0.0-beta.2 - json5: 2.2.1 + json5: 2.2.2 semver: 6.3.0 transitivePeerDependencies: - supports-color @@ -4085,8 +4085,8 @@ packages: dev: true optional: true - /@eslint/eslintrc/1.3.3: - resolution: {integrity: sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==} + /@eslint/eslintrc/1.4.0: + resolution: {integrity: sha512-7yfvXy6MWLgWSFsLhz5yH3iQ52St8cdUY6FoGieKkRDVxuxmrNuUetIuu6cmjNWwniUHiWXjxCr5tTXDrbYS5A==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: ajv: 6.12.6 @@ -4198,7 +4198,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/types': 29.3.1 - '@types/node': 18.11.15 + '@types/node': 18.11.17 chalk: 4.1.2 jest-message-util: 29.3.1 jest-util: 29.3.1 @@ -4219,14 +4219,14 @@ packages: '@jest/test-result': 29.3.1 '@jest/transform': 29.3.1 '@jest/types': 29.3.1 - '@types/node': 18.11.15 + '@types/node': 18.11.17 ansi-escapes: 4.3.2 chalk: 4.1.2 ci-info: 3.7.0 exit: 0.1.2 graceful-fs: 4.2.10 jest-changed-files: 29.2.0 - jest-config: 29.3.1_@types+node@18.11.15 + jest-config: 29.3.1_@types+node@18.11.17 jest-haste-map: 29.3.1 jest-message-util: 29.3.1 jest-regex-util: 29.2.0 @@ -4253,7 +4253,7 @@ packages: dependencies: '@jest/fake-timers': 29.3.1 '@jest/types': 29.3.1 - '@types/node': 18.11.15 + '@types/node': 18.11.17 jest-mock: 29.3.1 dev: true @@ -4280,7 +4280,7 @@ packages: dependencies: '@jest/types': 29.3.1 '@sinonjs/fake-timers': 9.1.2 - '@types/node': 18.11.15 + '@types/node': 18.11.17 jest-message-util: 29.3.1 jest-mock: 29.3.1 jest-util: 29.3.1 @@ -4313,7 +4313,7 @@ packages: '@jest/transform': 29.3.1 '@jest/types': 29.3.1 '@jridgewell/trace-mapping': 0.3.17 - '@types/node': 18.11.15 + '@types/node': 18.11.17 chalk: 4.1.2 collect-v8-coverage: 1.0.1 exit: 0.1.2 @@ -4435,7 +4435,7 @@ packages: '@jest/schemas': 29.0.0 '@types/istanbul-lib-coverage': 2.0.4 '@types/istanbul-reports': 3.0.1 - '@types/node': 18.11.15 + '@types/node': 18.11.17 '@types/yargs': 17.0.17 chalk: 4.1.2 dev: true @@ -6954,7 +6954,7 @@ packages: /@types/graceful-fs/4.1.5: resolution: {integrity: sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==} dependencies: - '@types/node': 18.11.15 + '@types/node': 18.11.17 dev: true /@types/hast/2.3.4: @@ -7066,6 +7066,10 @@ packages: /@types/node/18.11.15: resolution: {integrity: sha512-VkhBbVo2+2oozlkdHXLrb3zjsRkpdnaU2bXmX8Wgle3PUi569eLRaHGlgETQHR7lLL1w7GiG3h9SnePhxNDecw==} + dev: true + + /@types/node/18.11.17: + resolution: {integrity: sha512-HJSUJmni4BeDHhfzn6nF0sVmd1SMezP7/4F0Lq+aXzmp2xm9O7WXrUtHW/CHlYVtZUbByEvWidHqRtcJXGF2Ng==} /@types/normalize-package-data/2.4.1: resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==} @@ -10046,7 +10050,7 @@ packages: dependencies: caniuse-lite: 1.0.30001439 electron-to-chromium: 1.4.284 - node-releases: 2.0.7 + node-releases: 2.0.8 update-browserslist-db: 1.0.10_browserslist@4.21.4 /bs-logger/0.2.6: @@ -12381,7 +12385,7 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} hasBin: true dependencies: - '@eslint/eslintrc': 1.3.3 + '@eslint/eslintrc': 1.4.0 '@humanwhocodes/config-array': 0.10.7 '@humanwhocodes/gitignore-to-minimatch': 1.0.2 ajv: 6.12.6 @@ -14563,7 +14567,7 @@ packages: '@jest/expect': 29.3.1 '@jest/test-result': 29.3.1 '@jest/types': 29.3.1 - '@types/node': 18.11.15 + '@types/node': 18.11.17 chalk: 4.1.2 co: 4.6.0 dedent: 0.7.0 @@ -14648,7 +14652,7 @@ packages: - supports-color dev: true - /jest-config/29.3.1_@types+node@18.11.15: + /jest-config/29.3.1_@types+node@18.11.17: resolution: {integrity: sha512-y0tFHdj2WnTEhxmGUK1T7fgLen7YK4RtfvpLFBXfQkh2eMJAQq24Vx9472lvn5wg0MAO6B+iPfJfzdR9hJYalg==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} peerDependencies: @@ -14663,7 +14667,7 @@ packages: '@babel/core': 7.20.5 '@jest/test-sequencer': 29.3.1 '@jest/types': 29.3.1 - '@types/node': 18.11.15 + '@types/node': 18.11.17 babel-jest: 29.3.1_@babel+core@7.20.5 chalk: 4.1.2 ci-info: 3.7.0 @@ -14755,7 +14759,7 @@ packages: '@jest/environment': 29.3.1 '@jest/fake-timers': 29.3.1 '@jest/types': 29.3.1 - '@types/node': 18.11.15 + '@types/node': 18.11.17 jest-mock: 29.3.1 jest-util: 29.3.1 dev: true @@ -14810,7 +14814,7 @@ packages: dependencies: '@jest/types': 29.3.1 '@types/graceful-fs': 4.1.5 - '@types/node': 18.11.15 + '@types/node': 18.11.17 anymatch: 3.1.3 fb-watchman: 2.0.2 graceful-fs: 4.2.10 @@ -14871,7 +14875,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/types': 29.3.1 - '@types/node': 18.11.15 + '@types/node': 18.11.17 jest-util: 29.3.1 dev: true @@ -14931,7 +14935,7 @@ packages: '@jest/test-result': 29.3.1 '@jest/transform': 29.3.1 '@jest/types': 29.3.1 - '@types/node': 18.11.15 + '@types/node': 18.11.17 chalk: 4.1.2 emittery: 0.13.1 graceful-fs: 4.2.10 @@ -14962,7 +14966,7 @@ packages: '@jest/test-result': 29.3.1 '@jest/transform': 29.3.1 '@jest/types': 29.3.1 - '@types/node': 18.11.15 + '@types/node': 18.11.17 chalk: 4.1.2 cjs-module-lexer: 1.2.2 collect-v8-coverage: 1.0.1 @@ -15038,7 +15042,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/types': 29.3.1 - '@types/node': 18.11.15 + '@types/node': 18.11.17 chalk: 4.1.2 ci-info: 3.7.0 graceful-fs: 4.2.10 @@ -15063,7 +15067,7 @@ packages: dependencies: '@jest/test-result': 29.3.1 '@jest/types': 29.3.1 - '@types/node': 18.11.15 + '@types/node': 18.11.17 ansi-escapes: 4.3.2 chalk: 4.1.2 emittery: 0.13.1 @@ -15084,7 +15088,7 @@ packages: resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 18.11.15 + '@types/node': 18.11.17 merge-stream: 2.0.0 supports-color: 8.1.1 @@ -15092,7 +15096,7 @@ packages: resolution: {integrity: sha512-lY4AnnmsEWeiXirAIA0c9SDPbuCBq8IYuDVL8PMm0MZ2PEs2yPvRA/J64QBXuZp7CYKrDM/rmNrc9/i3KJQncw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@types/node': 18.11.15 + '@types/node': 18.11.17 jest-util: 29.3.1 merge-stream: 2.0.0 supports-color: 8.1.1 @@ -15252,6 +15256,11 @@ packages: engines: {node: '>=6'} hasBin: true + /json5/2.2.2: + resolution: {integrity: sha512-46Tk9JiOL2z7ytNQWFLpj99RZkVgeHf87yGQKsIkaPz1qSH9UczKH1rO7K3wgRselo0tYMUNfecYpm/p1vC7tQ==} + engines: {node: '>=6'} + hasBin: true + /jsonfile/4.0.0: resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==} optionalDependencies: @@ -16162,8 +16171,8 @@ packages: resolution: {integrity: sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==} dev: false - /node-releases/2.0.7: - resolution: {integrity: sha512-EJ3rzxL9pTWPjk5arA0s0dgXpnyiAbJDE6wHT62g7VsgrgQgmmZ+Ru++M1BFofncWja+Pnn3rEr3fieRySAdKQ==} + /node-releases/2.0.8: + resolution: {integrity: sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==} /normalize-package-data/2.5.0: resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==} diff --git a/projects/js-packages/image-guide/package.json b/projects/js-packages/image-guide/package.json index 579a82f59dba..de0b365aeb1a 100644 --- a/projects/js-packages/image-guide/package.json +++ b/projects/js-packages/image-guide/package.json @@ -24,7 +24,7 @@ "test": "NODE_OPTIONS=--experimental-vm-modules jest" }, "devDependencies": { - "@automattic/jetpack-webpack-config": "workspace:*", + "@automattic/jetpack-webpack-config": "workspace:1.3.19", "@typescript-eslint/parser": "5.36.1", "eslint": "8.22.0", "jest": "29.3.1", From 40659bfaad3edd9b0c82a6f30baac36a1091f6a8 Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 12:00:38 +0600 Subject: [PATCH 15/27] Update boost pnpm packages --- pnpm-lock.yaml | 20 ++++++++------------ projects/plugins/boost/package.json | 6 +++--- 2 files changed, 11 insertions(+), 15 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d1e37c0153a0..b27edd6bd8fb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4115,8 +4115,8 @@ packages: '@floating-ui/core': 0.6.2 dev: false - /@floating-ui/dom/1.0.10: - resolution: {integrity: sha512-ZRe5ZmtGYCd82zrjWnnMW8hN5H1otedLh0Ur6rRo6f0exbEe6IlkVvo1RO7tgiMvbF0Df8hkhdm50VcVYqwP6g==} + /@floating-ui/dom/1.0.12: + resolution: {integrity: sha512-HeG/wHoa2laUHlDX3xkzqlUqliAfa+zqV04LaKIwNCmCNaW2p0fQi4/Kd0LB4GdFoJ2UllLFq5gWnXAd67lg7w==} dependencies: '@floating-ui/core': 1.0.4 @@ -4154,7 +4154,7 @@ packages: react: '>=16.8.0' react-dom: '>=16.8.0' dependencies: - '@floating-ui/dom': 1.0.10 + '@floating-ui/dom': 1.0.12 react: 17.0.2 react-dom: 17.0.2_react@17.0.2 @@ -6934,14 +6934,14 @@ packages: /@types/fs-extra/8.1.2: resolution: {integrity: sha512-SvSrYXfWSc7R4eqnOzbQF4TZmfpNSM9FrSWLU3EUnWBuyZqNBOrv1B1JA3byUDPUl9z4Ab3jeZG2eDdySlgNMg==} dependencies: - '@types/node': 18.11.15 + '@types/node': 18.11.17 dev: true /@types/glob/7.2.0: resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==} dependencies: '@types/minimatch': 5.1.2 - '@types/node': 18.11.15 + '@types/node': 18.11.17 dev: true /@types/glob/8.0.0: @@ -7064,10 +7064,6 @@ packages: /@types/node/18.11.13: resolution: {integrity: sha512-IASpMGVcWpUsx5xBOrxMj7Bl8lqfuTY7FKAnPmu5cHkfQVWF8GulWS1jbRqA934qZL35xh5xN/+Xe/i26Bod4w==} - /@types/node/18.11.15: - resolution: {integrity: sha512-VkhBbVo2+2oozlkdHXLrb3zjsRkpdnaU2bXmX8Wgle3PUi569eLRaHGlgETQHR7lLL1w7GiG3h9SnePhxNDecw==} - dev: true - /@types/node/18.11.17: resolution: {integrity: sha512-HJSUJmni4BeDHhfzn6nF0sVmd1SMezP7/4F0Lq+aXzmp2xm9O7WXrUtHW/CHlYVtZUbByEvWidHqRtcJXGF2Ng==} @@ -7144,7 +7140,7 @@ packages: /@types/resolve/1.17.1: resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==} dependencies: - '@types/node': 18.11.15 + '@types/node': 18.11.17 dev: true /@types/retry/0.12.0: @@ -7153,7 +7149,7 @@ packages: /@types/sass/1.43.1: resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==} dependencies: - '@types/node': 18.11.15 + '@types/node': 18.11.17 dev: true /@types/scheduler/0.16.2: @@ -15079,7 +15075,7 @@ packages: resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 18.11.15 + '@types/node': 18.11.17 merge-stream: 2.0.0 supports-color: 7.2.0 dev: true diff --git a/projects/plugins/boost/package.json b/projects/plugins/boost/package.json index 7017643add91..d37e7f4f3257 100644 --- a/projects/plugins/boost/package.json +++ b/projects/plugins/boost/package.json @@ -6,7 +6,7 @@ "test": "tests" }, "dependencies": { - "@automattic/jetpack-base-styles": "workspace:*", + "@automattic/jetpack-base-styles": "workspace:0.3.16", "@wordpress/components": "22.1.0", "@wordpress/element": "4.20.0", "history": "5.3.0", @@ -15,8 +15,8 @@ "svelte-navigator": "3.1.5" }, "devDependencies": { - "@automattic/jetpack-components": "workspace:*", - "@automattic/jetpack-image-guide": "workspace:*", + "@automattic/jetpack-components": "workspace:0.26.4-alpha", + "@automattic/jetpack-image-guide": "workspace:0.1.0-alpha", "@babel/core": "7.20.5", "@babel/preset-env": "7.20.2", "@babel/preset-react": "7.18.6", From 224821e09f1b917335ab451cd6bf9cf080af70cf Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 12:07:12 +0600 Subject: [PATCH 16/27] Attempt to fix monorepo package version refs --- .../image-guide/changelog/add-image-guide-package | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 projects/js-packages/image-guide/changelog/add-image-guide-package diff --git a/projects/js-packages/image-guide/changelog/add-image-guide-package b/projects/js-packages/image-guide/changelog/add-image-guide-package deleted file mode 100644 index 1f7df026634e..000000000000 --- a/projects/js-packages/image-guide/changelog/add-image-guide-package +++ /dev/null @@ -1,5 +0,0 @@ -Significance: patch -Type: added -Comment: Initiated the package - - From 8195ed9ce29d499d5c6ed50ea1c52bee4ba86cfb Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 12:07:45 +0600 Subject: [PATCH 17/27] changelog --- .../js-packages/image-guide/changelog/add-image-guide-package | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/js-packages/image-guide/changelog/add-image-guide-package diff --git a/projects/js-packages/image-guide/changelog/add-image-guide-package b/projects/js-packages/image-guide/changelog/add-image-guide-package new file mode 100644 index 000000000000..dbda2687742d --- /dev/null +++ b/projects/js-packages/image-guide/changelog/add-image-guide-package @@ -0,0 +1,4 @@ +Significance: patch +Type: added + + From e2e1db777eba5abc1519bd4a324455a869734e15 Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 12:13:31 +0600 Subject: [PATCH 18/27] Another attempt to fix failed checks --- pnpm-lock.yaml | 88 +++---------------- .../changelog/add-image-guide-package | 4 - projects/js-packages/image-guide/package.json | 2 +- 3 files changed, 14 insertions(+), 80 deletions(-) delete mode 100644 projects/js-packages/image-guide/changelog/add-image-guide-package diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b27edd6bd8fb..d5e02ac5afbc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -366,7 +366,7 @@ importers: projects/js-packages/image-guide: specifiers: - '@automattic/jetpack-webpack-config': workspace:1.3.19 + '@automattic/jetpack-webpack-config': workspace:* '@typescript-eslint/parser': 5.36.1 eslint: 8.22.0 jest: 29.3.1 @@ -8127,23 +8127,23 @@ packages: '@emotion/utils': 1.2.0 '@floating-ui/react-dom': 1.0.1_sfoxds7t5ydpegc3knd667wn6m '@use-gesture/react': 10.2.23_react@17.0.2 - '@wordpress/a11y': 3.23.0 + '@wordpress/a11y': 3.22.0 '@wordpress/compose': 5.20.0_react@17.0.2 - '@wordpress/date': 4.23.0 - '@wordpress/deprecated': 3.23.0 - '@wordpress/dom': 3.23.0 + '@wordpress/date': 4.22.0 + '@wordpress/deprecated': 3.22.0 + '@wordpress/dom': 3.22.0 '@wordpress/element': 4.20.0 - '@wordpress/escape-html': 2.23.0 - '@wordpress/hooks': 3.23.0 + '@wordpress/escape-html': 2.22.0 + '@wordpress/hooks': 3.22.0 '@wordpress/i18n': 4.22.0 - '@wordpress/icons': 9.14.0 - '@wordpress/is-shallow-equal': 4.23.0 - '@wordpress/keycodes': 3.23.0 - '@wordpress/primitives': 3.21.0 + '@wordpress/icons': 9.13.0 + '@wordpress/is-shallow-equal': 4.22.0 + '@wordpress/keycodes': 3.22.0 + '@wordpress/primitives': 3.20.0 '@wordpress/rich-text': 5.20.0_react@17.0.2 - '@wordpress/warning': 2.23.0 + '@wordpress/warning': 2.22.0 change-case: 4.1.2 - classnames: 2.3.2 + classnames: 2.3.1 colord: 2.9.3 date-fns: 2.29.3 dom-scroll-into-view: 1.2.1 @@ -8247,15 +8247,6 @@ packages: moment: 2.29.4 moment-timezone: 0.5.40 - /@wordpress/date/4.23.0: - resolution: {integrity: sha512-A9jwjKSosRQhdWarjMVPz22iQi/Ur7037ttAPrI1nrwuCUUZSS0l4vX20HGxpNv/ySFmezn/SWuxIvkP9xn93g==} - engines: {node: '>=12'} - dependencies: - '@babel/runtime': 7.20.6 - '@wordpress/deprecated': 3.23.0 - moment: 2.29.4 - moment-timezone: 0.5.40 - /@wordpress/dependency-extraction-webpack-plugin/4.5.0_webpack@5.72.1: resolution: {integrity: sha512-eLzWb/TftHiPzl8ZgwuCPhW0ir9/1VVzVgsag7DyhjyrESLD4YWRqTaE1M1qf6lRP9kjYvBLFZ0TKuLT90Iayg==} engines: {node: '>=14'} @@ -8477,19 +8468,6 @@ packages: react: 17.0.2 react-dom: 17.0.2_react@17.0.2 - /@wordpress/element/5.0.0: - resolution: {integrity: sha512-u1DhVIdb6VEe8wzxKCrLfRWbeFLrlhYTFSOY6yrtl2z9vr9bCdlLp9aAppTxLNUs8cFcdoCEMpakVRYFyfZwTQ==} - engines: {node: '>=12'} - dependencies: - '@babel/runtime': 7.20.6 - '@types/react': 17.0.52 - '@types/react-dom': 17.0.18 - '@wordpress/escape-html': 2.23.0 - change-case: 4.1.2 - is-plain-object: 5.0.0 - react: 18.2.0 - react-dom: 18.2.0_react@18.2.0 - /@wordpress/escape-html/2.22.0: resolution: {integrity: sha512-GUo6VLugIZxen1rdYuotvz6Vqa+5fNtVelNjXLwDqRu0iY2RXeoTux9V5bZWXPnGb54ryqfYmR4gH6F8xZhWzQ==} engines: {node: '>=12'} @@ -8629,14 +8607,6 @@ packages: '@wordpress/element': 4.20.0 '@wordpress/primitives': 3.20.0 - /@wordpress/icons/9.14.0: - resolution: {integrity: sha512-9KSjE+Fyi5C32uP86CHtzwuDezyxEswt1mNmUJ/ILRjupaDg2v85/+lRARfy+Wi9DY5bfcoNd7ZDyIXRi8pYIg==} - engines: {node: '>=12'} - dependencies: - '@babel/runtime': 7.20.6 - '@wordpress/element': 5.0.0 - '@wordpress/primitives': 3.21.0 - /@wordpress/interface/4.21.0_mqlga6776einr32k2jcmre7x6i: resolution: {integrity: sha512-e6BxCIgx/DDPMFgQeTkwHspRiDDaPPK9qhtVkcxYEQQvgnOXPjIF9gQDdIMMg+gCpq1z6Y94VWsl5iVqnKr7hA==} engines: {node: '>=12'} @@ -8842,14 +8812,6 @@ packages: '@wordpress/element': 4.20.0 classnames: 2.3.1 - /@wordpress/primitives/3.21.0: - resolution: {integrity: sha512-CxYNqXqDiVZLqJcy8LS2Q3AVzfcC/VzXLpeqVd6KKoVx9V7WkPkYQE9C5a3W3G9Vj7UfRfPRMUX7oxk2WmfGqQ==} - engines: {node: '>=12'} - dependencies: - '@babel/runtime': 7.20.6 - '@wordpress/element': 5.0.0 - classnames: 2.3.2 - /@wordpress/priority-queue/2.23.0: resolution: {integrity: sha512-5jf2EK2C/EzXjw7uQ5DwLxDuWP+TyrGdJzcjKXWwAm89H/tdgS6qbRkL6T7ZhARNkm1po88xmCvMarYzceXnBg==} engines: {node: '>=12'} @@ -9050,10 +9012,6 @@ packages: resolution: {integrity: sha512-BMM4GqiJNIZzh5SIK17EOyilp08mQ+DoKfxL+pl/lpA68jxYUTcKJf0atNbxXKPZHDCWGnQzFwr+huNYOtp4CQ==} engines: {node: '>=12'} - /@wordpress/warning/2.23.0: - resolution: {integrity: sha512-TbcquyD41BcyqN74PpxWf6GRA4toBhQYovZvmoueyO2sQntttqv8sypCQwvErfpEIv7xH5nIvXoWdsgkEKEAKQ==} - engines: {node: '>=12'} - /@wordpress/widgets/2.20.0_mqlga6776einr32k2jcmre7x6i: resolution: {integrity: sha512-9PMytBUhBbyw5WFKMuLxHoR1E+9YYBAmzRiED+MtNeLsOgi776LgG7OgNh3n7Xzt3/lrtCF/olt3CbXgiM2jmw==} peerDependencies: @@ -17777,15 +17735,6 @@ packages: react: 17.0.2 scheduler: 0.20.2 - /react-dom/18.2.0_react@18.2.0: - resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} - peerDependencies: - react: ^18.2.0 - dependencies: - loose-envify: 1.4.0 - react: 18.2.0 - scheduler: 0.23.0 - /react-easy-crop/4.6.3_sfoxds7t5ydpegc3knd667wn6m: resolution: {integrity: sha512-xeP5Cq56xDK2QkGs6RIrVXQs7cDan9B16yUt/3XqFN7siSjLgXkDfKNri8eC8CFSd3AFs0NX6IpIeIPBf4PCBA==} peerDependencies: @@ -18125,12 +18074,6 @@ packages: loose-envify: 1.4.0 object-assign: 4.1.1 - /react/18.2.0: - resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} - engines: {node: '>=0.10.0'} - dependencies: - loose-envify: 1.4.0 - /read-pkg-up/1.0.1: resolution: {integrity: sha512-WD9MTlNtI55IwYUS27iHh9tK3YoIVhxis8yKhLpTqWtml739uXc9NWTpxoHkfZf3+DkCCsXox94/VWZniuZm6A==} engines: {node: '>=0.10.0'} @@ -19020,11 +18963,6 @@ packages: loose-envify: 1.4.0 object-assign: 4.1.1 - /scheduler/0.23.0: - resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} - dependencies: - loose-envify: 1.4.0 - /schema-utils/2.7.0: resolution: {integrity: sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==} engines: {node: '>= 8.9.0'} diff --git a/projects/js-packages/image-guide/changelog/add-image-guide-package b/projects/js-packages/image-guide/changelog/add-image-guide-package deleted file mode 100644 index dbda2687742d..000000000000 --- a/projects/js-packages/image-guide/changelog/add-image-guide-package +++ /dev/null @@ -1,4 +0,0 @@ -Significance: patch -Type: added - - diff --git a/projects/js-packages/image-guide/package.json b/projects/js-packages/image-guide/package.json index de0b365aeb1a..579a82f59dba 100644 --- a/projects/js-packages/image-guide/package.json +++ b/projects/js-packages/image-guide/package.json @@ -24,7 +24,7 @@ "test": "NODE_OPTIONS=--experimental-vm-modules jest" }, "devDependencies": { - "@automattic/jetpack-webpack-config": "workspace:1.3.19", + "@automattic/jetpack-webpack-config": "workspace:*", "@typescript-eslint/parser": "5.36.1", "eslint": "8.22.0", "jest": "29.3.1", From 5f4766a56af144574354a897682c675d7bfc1b95 Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 12:13:53 +0600 Subject: [PATCH 19/27] changelog --- .../js-packages/image-guide/changelog/add-image-guide-package | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/js-packages/image-guide/changelog/add-image-guide-package diff --git a/projects/js-packages/image-guide/changelog/add-image-guide-package b/projects/js-packages/image-guide/changelog/add-image-guide-package new file mode 100644 index 000000000000..dbda2687742d --- /dev/null +++ b/projects/js-packages/image-guide/changelog/add-image-guide-package @@ -0,0 +1,4 @@ +Significance: patch +Type: added + + From 25a09e150e94fa2d8d9a25b614b8fd2fc4cb3f4b Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 12:18:45 +0600 Subject: [PATCH 20/27] Update boost packages --- pnpm-lock.yaml | 6 +++--- projects/plugins/boost/package.json | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d5e02ac5afbc..9d3fe54843b5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1392,9 +1392,9 @@ importers: projects/plugins/boost: specifiers: - '@automattic/jetpack-base-styles': workspace:0.3.16 - '@automattic/jetpack-components': workspace:0.26.4-alpha - '@automattic/jetpack-image-guide': workspace:0.1.0-alpha + '@automattic/jetpack-base-styles': workspace:* + '@automattic/jetpack-components': workspace:* + '@automattic/jetpack-image-guide': workspace:* '@babel/core': 7.20.5 '@babel/preset-env': 7.20.2 '@babel/preset-react': 7.18.6 diff --git a/projects/plugins/boost/package.json b/projects/plugins/boost/package.json index d37e7f4f3257..7017643add91 100644 --- a/projects/plugins/boost/package.json +++ b/projects/plugins/boost/package.json @@ -6,7 +6,7 @@ "test": "tests" }, "dependencies": { - "@automattic/jetpack-base-styles": "workspace:0.3.16", + "@automattic/jetpack-base-styles": "workspace:*", "@wordpress/components": "22.1.0", "@wordpress/element": "4.20.0", "history": "5.3.0", @@ -15,8 +15,8 @@ "svelte-navigator": "3.1.5" }, "devDependencies": { - "@automattic/jetpack-components": "workspace:0.26.4-alpha", - "@automattic/jetpack-image-guide": "workspace:0.1.0-alpha", + "@automattic/jetpack-components": "workspace:*", + "@automattic/jetpack-image-guide": "workspace:*", "@babel/core": "7.20.5", "@babel/preset-env": "7.20.2", "@babel/preset-react": "7.18.6", From 6c564cb04b08c04a77a28c98fe92113e43c1824c Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 13:15:46 +0600 Subject: [PATCH 21/27] Revert main in package.json --- projects/js-packages/image-guide/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/image-guide/package.json b/projects/js-packages/image-guide/package.json index 579a82f59dba..b1928087d33b 100644 --- a/projects/js-packages/image-guide/package.json +++ b/projects/js-packages/image-guide/package.json @@ -39,5 +39,5 @@ "exports": { ".": "./build/index.d.js" }, - "main": "src/index.ts" + "main": "src/index.d.js" } From 7843f4551adaa2c8e4d63bacbe1f8e0e8edb2cf0 Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 13:32:16 +0600 Subject: [PATCH 22/27] Change main file --- projects/js-packages/image-guide/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/js-packages/image-guide/package.json b/projects/js-packages/image-guide/package.json index b1928087d33b..9c2341531d15 100644 --- a/projects/js-packages/image-guide/package.json +++ b/projects/js-packages/image-guide/package.json @@ -37,7 +37,7 @@ "yarn": "use pnpm instead - see docs/yarn-upgrade.md" }, "exports": { - ".": "./build/index.d.js" + ".": "./build/index.d.ts" }, - "main": "src/index.d.js" + "main": "build/index.d.ts" } From 66c2eadf0bb452121c45e7ef1887f632a977d09e Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 14:05:23 +0600 Subject: [PATCH 23/27] Fix type imports --- projects/js-packages/image-guide/package.json | 4 ++-- .../features/image-guide/src/stores/MeasurableImageStore.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/js-packages/image-guide/package.json b/projects/js-packages/image-guide/package.json index 9c2341531d15..f905e14a0ab0 100644 --- a/projects/js-packages/image-guide/package.json +++ b/projects/js-packages/image-guide/package.json @@ -37,7 +37,7 @@ "yarn": "use pnpm instead - see docs/yarn-upgrade.md" }, "exports": { - ".": "./build/index.d.ts" + ".": "./build/index" }, - "main": "build/index.d.ts" + "main": "build/index" } diff --git a/projects/plugins/boost/app/features/image-guide/src/stores/MeasurableImageStore.ts b/projects/plugins/boost/app/features/image-guide/src/stores/MeasurableImageStore.ts index 116a4e609a80..bab4a7320dbb 100644 --- a/projects/plugins/boost/app/features/image-guide/src/stores/MeasurableImageStore.ts +++ b/projects/plugins/boost/app/features/image-guide/src/stores/MeasurableImageStore.ts @@ -1,4 +1,4 @@ -import { Dimensions, MeasurableImage, Weight } from '@automattic/jetpack-image-guide'; +import { MeasurableImage, type Dimensions, type Weight } from '@automattic/jetpack-image-guide'; import { Writable, Readable, writable, derived } from 'svelte/store'; /** From 2814e413ff5871b8d22e2deb8c879eed56b1d3be Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 14:25:37 +0600 Subject: [PATCH 24/27] [not verified] Revert "Fix type imports" This reverts commit 66c2eadf0bb452121c45e7ef1887f632a977d09e. --- projects/js-packages/image-guide/package.json | 4 ++-- .../features/image-guide/src/stores/MeasurableImageStore.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/js-packages/image-guide/package.json b/projects/js-packages/image-guide/package.json index f905e14a0ab0..9c2341531d15 100644 --- a/projects/js-packages/image-guide/package.json +++ b/projects/js-packages/image-guide/package.json @@ -37,7 +37,7 @@ "yarn": "use pnpm instead - see docs/yarn-upgrade.md" }, "exports": { - ".": "./build/index" + ".": "./build/index.d.ts" }, - "main": "build/index" + "main": "build/index.d.ts" } diff --git a/projects/plugins/boost/app/features/image-guide/src/stores/MeasurableImageStore.ts b/projects/plugins/boost/app/features/image-guide/src/stores/MeasurableImageStore.ts index bab4a7320dbb..116a4e609a80 100644 --- a/projects/plugins/boost/app/features/image-guide/src/stores/MeasurableImageStore.ts +++ b/projects/plugins/boost/app/features/image-guide/src/stores/MeasurableImageStore.ts @@ -1,4 +1,4 @@ -import { MeasurableImage, type Dimensions, type Weight } from '@automattic/jetpack-image-guide'; +import { Dimensions, MeasurableImage, Weight } from '@automattic/jetpack-image-guide'; import { Writable, Readable, writable, derived } from 'svelte/store'; /** From cba17363d268be7d2f19494dc33bcc1ebb3b6e0a Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 15:20:29 +0600 Subject: [PATCH 25/27] Allow heart-of-team to approve PRs for image-guide js package --- .github/files/required-review.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/files/required-review.yaml b/.github/files/required-review.yaml index b086066a2b80..431a8c448dd4 100644 --- a/.github/files/required-review.yaml +++ b/.github/files/required-review.yaml @@ -73,6 +73,7 @@ paths: - 'projects/plugins/boost/**' - 'projects/plugins/super-cache/**' + - 'projects/js-packages/image-guide/**' - '!projects/plugins/*/composer.lock' - '!projects/plugins/*/composer.json' - '!projects/plugins/*/changelog/*' From 69043ad113dd40e672e49ae3de5519643ed95f03 Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 17:19:32 +0600 Subject: [PATCH 26/27] Specify main and types files separately --- projects/js-packages/image-guide/package.json | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/projects/js-packages/image-guide/package.json b/projects/js-packages/image-guide/package.json index 9c2341531d15..71fb29457a11 100644 --- a/projects/js-packages/image-guide/package.json +++ b/projects/js-packages/image-guide/package.json @@ -36,8 +36,6 @@ "node": "^16.13.2", "yarn": "use pnpm instead - see docs/yarn-upgrade.md" }, - "exports": { - ".": "./build/index.d.ts" - }, - "main": "build/index.d.ts" + "main": "build/index.js", + "types": "build/index.d.ts" } From 775904a89c873657d58cc4ed70964f0209ba4878 Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Mon, 19 Dec 2022 17:35:19 +0600 Subject: [PATCH 27/27] Import types differently --- projects/js-packages/image-guide/package.json | 3 +-- .../features/image-guide/src/stores/MeasurableImageStore.ts | 3 ++- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/js-packages/image-guide/package.json b/projects/js-packages/image-guide/package.json index 71fb29457a11..4787d61726e1 100644 --- a/projects/js-packages/image-guide/package.json +++ b/projects/js-packages/image-guide/package.json @@ -36,6 +36,5 @@ "node": "^16.13.2", "yarn": "use pnpm instead - see docs/yarn-upgrade.md" }, - "main": "build/index.js", - "types": "build/index.d.ts" + "main": "./build/index.js" } diff --git a/projects/plugins/boost/app/features/image-guide/src/stores/MeasurableImageStore.ts b/projects/plugins/boost/app/features/image-guide/src/stores/MeasurableImageStore.ts index 116a4e609a80..d59fc9666fcb 100644 --- a/projects/plugins/boost/app/features/image-guide/src/stores/MeasurableImageStore.ts +++ b/projects/plugins/boost/app/features/image-guide/src/stores/MeasurableImageStore.ts @@ -1,5 +1,6 @@ -import { Dimensions, MeasurableImage, Weight } from '@automattic/jetpack-image-guide'; +import { MeasurableImage } from '@automattic/jetpack-image-guide'; import { Writable, Readable, writable, derived } from 'svelte/store'; +import type { Dimensions, Weight } from '@automattic/jetpack-image-guide'; /** * Each measurable image has its own set of Svelte stores.