Merge pull request #828 from dc7290/main

Release

.eslintignore

@@ -19,4 +19,5 @@ __tests__/e2e
 picture.js
 picture.d.ts
 image.js
+image.d.ts
 legacy

.github/workflows/node.js.yml

@@ -11,7 +11,6 @@ jobs:
     strategy:
       matrix:
         node:
-          - 16
           - 18
           - 20
         os:

.github/workflows/release.yml

@@ -9,10 +9,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js 18
+      - name: Use Node.js 20
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: 'yarn'
       - run: yarn install
       - run: yarn test

.node-version

@@ -0,0 +1 @@
+nodejs 20.11.1

__tests__/e2e/app/page.jsx

@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import LegacyImage from 'next/legacy/image'
+import Image from '../../../image'
+import LegacyImage from '../../../legacy/image'
 import React from 'react'
 
 import Picture from '../../../dist/components/picture'

__tests__/e2e/components/ClientComponent.jsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useState, useEffect } from 'react'
-import Image from 'next/image'
+import Image from '../../../image'
 
 import clientOnlySrc from '../images/client-only.png'
 

__tests__/e2e/export-images.config.js

@@ -8,7 +8,7 @@ const config = {
     },
   },
   generateFormats: ['avif', 'webp'],
-  remoteImages: async () => ['https://next-export-optimize-images.vercel.app/og.png'],
+  remoteImages: async () => ['https://picsum.photos/id/237/200/300.jpg', 'https://picsum.photos/id/238/200/300.jpg'],
 }
 
 module.exports = config

__tests__/e2e/index.test.ts

@@ -11,7 +11,8 @@ const files = [
   // next/image
   '_next/static/media/img.8a5ad2fe_[width].avif',
   'images/img_[width].avif',
-  'og_[width].avif',
+  'id/237/200/300_[width].avif',
+  'id/238/200/300_[width].avif',
   'images/animated_[width].avif',
   '_next/static/media/client-only.8a5ad2fe_[width].avif',
   // next/legacy/image
@@ -23,21 +24,23 @@ const files = [
   // next/image
   '_next/static/media/img.8a5ad2fe_[width].webp',
   'images/img_[width].webp',
-  'og_[width].webp',
+  'id/237/200/300_[width].webp',
+  'id/238/200/300_[width].webp',
   'images/animated_[width].webp',
   '_next/static/media/client-only.8a5ad2fe_[width].webp',
   // next/legacy/image
   '_next/static/media/legacy-img.8a5ad2fe_[width].webp',
   'images/legacy-img_[width].webp',
 
-  // png
+  // png or jpg
 
   // next/image
   '_next/static/media/img.8a5ad2fe_[width].png',
   'images/img_[width].png',
-  'og_[width].png',
+  'id/237/200/300_[width].jpg',
+  'id/238/200/300_[width].jpg',
   '_next/static/media/client-only.8a5ad2fe_[width].png',
-  // next/legacyjpgge
+  // next/legacy/image
   '_next/static/media/legacy-img.8a5ad2fe_[width].png',
   'images/legacy-img_[width].png',
 ]
@@ -50,7 +53,11 @@ describe('`next build && next export && next-export-optimize-images` is executed
     const allSizes = [...configImages.imageSizes, ...configImages.deviceSizes]
     allSizes.forEach((size) => {
       files.forEach((file) => {
-        expect(exist(file.replace('[width]', size.toString()))).toBeTruthy()
+        const isExist = exist(file.replace('[width]', size.toString()))
+        if (!isExist) {
+          console.log(file.replace('[width]', size.toString()))
+        }
+        expect(isExist).toBeTruthy()
       })
     })
   })

docs/docs/02-getting-started.md

@@ -25,7 +25,7 @@ module.exports = withExportImages({
 })
 ```
 
-1. Change the description of the `scripts` that do the `next build` in `package.json`
+2. Change the description of the `scripts` that do the `next build` in `package.json`
 
 ```diff title="package.json"
 {
@@ -34,9 +34,11 @@ module.exports = withExportImages({
 }
 ```
 
-3. Import and use next/image as usual.
+3. Import from `next-export-optimize-images/image` and use it.
 
 ```tsx
+import Image from 'next-export-optimize-images/image'
+
 <Image src="/images/img.png" width={1920} height={1280} alt="" />
 // Or import as follows
 import img from './img.png'
@@ -48,8 +50,9 @@ import img from './img.png'
 Alternatively, you can use `next/legacy/image`.
 
 ```tsx
-import Image from 'next/legacy/image'
-;<Image src="/images/img.png" width={1920} height={1280} alt="" />
+import Image from 'next-export-optimize-images/legacy/image'
+
+<Image src="/images/img.png" width={1920} height={1280} alt="" />
 ```
 
 ## Local checks

docs/docs/03-Features/02-picture-component.md

@@ -1,5 +1,5 @@
 ---
-description: This page introduces the Picture componen tfor multiple image formats.
+description: This page introduces the Picture component for multiple image formats.
 ---
 
 # Picture component

docs/docs/06-examples.md

@@ -0,0 +1,21 @@
+---
+description: This page is to introduce examples of use.
+---
+
+# Examples
+
+## Set the `deviceSizes`
+
+```js title="next.config.js"
+module.exports = withExportImages({
+  images: {
+    deviceSizes: [640, 960, 1280, 1600, 1920],
+  },
+})
+```
+
+## Set the `placeholder`
+
+```jsx
+<Image src="/img.png" width={1280} height={640} alt="" placeholder="blur" />
+```

examples/common/pages/index.jsx

@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from 'next-export-optimize-images/image'
 
 import imgSrc from '../images/img.png'
 

image.d.ts

@@ -0,0 +1,2 @@
+import Image from './dist/components/image'
+export default Image

legacy/image.d.ts

@@ -0,0 +1,2 @@
+import Image from '../dist/components/legacy-image'
+export default Image

package.json

@@ -26,6 +26,7 @@
     "dist",
     "legacy",
     "image.js",
+    "image.d.ts",
     "picture.js",
     "picture.d.ts"
   ],
@@ -53,7 +54,6 @@
     "app-root-path": "^3.1.0",
     "cli-progress": "^3.12.0",
     "fs-extra": "^11.2.0",
-    "got": "^11.8.6",
     "lodash.uniqwith": "^4.5.0",
     "recursive-readdir": "^2.2.3",
     "sharp": "^0.32.6"
@@ -67,21 +67,17 @@
     "@testing-library/react": "14.2.1",
     "@tsconfig/strictest": "2.0.3",
     "@types/app-root-path": "1.2.8",
-    "@types/benchmark": "2.1.5",
     "@types/cli-progress": "3.11.5",
     "@types/fs-extra": "11.0.4",
     "@types/jest": "29.5.12",
     "@types/lodash.uniqwith": "4.5.9",
-    "@types/node": "18.19.22",
+    "@types/node": "20.11.25",
     "@types/react": "18.2.64",
     "@types/recursive-readdir": "^2.2.4",
     "@types/sharp": "0.31.1",
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "@typescript-eslint/parser": "6.21.0",
-    "benchmark": "2.1.4",
-    "chokidar": "3.6.0",
     "conventional-changelog-conventionalcommits": "7.0.2",
-    "cross-env": "7.0.3",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
@@ -93,29 +89,23 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "lint-staged": "13.3.0",
-    "next": "13.4.19",
-    "npm-run-all": "4.1.5",
+    "next": "14.1.4",
     "prettier": "3.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "5.0.5",
     "semantic-release": "19.0.5",
     "ts-jest": "29.1.2",
-    "ts-node": "10.9.2",
     "tsup": "^7.2.0",
     "typescript": "5.4.2",
     "webpack": "5.90.3"
   },
   "peerDependencies": {
-    "next": ">=13.0.0",
+    "next": ">=14.1.0",
     "react": "^17.0.2 || ^18.0.0-0",
     "react-dom": "^17.0.2 || ^18.0.0-0"
   },
   "engines": {
-    "node": ">=16.8.0"
-  },
-  "volta": {
-    "node": "18.19.1",
-    "yarn": "1.22.22"
+    "node": ">=18"
   }
 }

picture.d.ts

@@ -1,3 +1,2 @@
 import Picture from './dist/components/picture'
-export * from './dist/components/picture'
 export default Picture