Merge pull request #900 from dc7290/main

Release

.eslintignore

@@ -22,3 +22,7 @@ picture.d.ts
 image.js
 image.d.ts
 legacy
+remote-image.js
+remote-image.d.ts
+remote-picture.js
+remote-picture.d.ts

__tests__/e2e/app/page.jsx

@@ -1,5 +1,7 @@
 import Image from '../../../image'
 import LegacyImage from '../../../legacy/image'
+import RemoteImage from '../../../remote-image'
+import RemotePicture from '../../../remote-picture'
 import React from 'react'
 
 import Picture from '../../../dist/components/picture'
@@ -9,6 +11,8 @@ import imgSrc from '../images/img.png'
 import legacyImgSrc from '../images/legacy-img.png'
 import WithPropsComponent from '../components/WithPropsComponent'
 
+const id = 400
+
 export default function IndexPage() {
   return (
     <>
@@ -26,8 +30,14 @@ export default function IndexPage() {
         {/* Invalid format image */}
         <Image src="/images/img.svg" width={1920} height={1280} alt="" />
 
-        {/* External image */}
-        <Image src="https://next-export-optimize-images.vercel.app/og.png" width={1920} height={1280} alt="" />
+        {/* External Image with RemoteImage */}
+        <RemoteImage src="https://picsum.photos/id/300/200/400.jpg" />
+
+        {/* External Image with RemoteImage dynamic src */}
+        <RemoteImage src={`https://picsum.photos/id/${id}/200/400.jpg`} />
+
+        {/* External Image with RemotePicture */}
+        <RemotePicture src="https://picsum.photos/id/500/200/400.jpg" />
 
         {/* Animated image */}
         <Image src="/images/animated.webp" width={400} height={400} alt="" />

__tests__/e2e/index.test.ts

@@ -15,6 +15,7 @@ const files = [
   'images/img_[width].avif',
   'id/237/200/300_[width].avif',
   'id/238/200/300_[width].avif',
+  'id/500/200/400_[width].avif',
   'images/animated_[width].avif',
   '_next/static/media/client-only.8a5ad2fe_[width].avif',
   // next/legacy/image
@@ -30,6 +31,7 @@ const files = [
   'images/img_[width].webp',
   'id/237/200/300_[width].webp',
   'id/238/200/300_[width].webp',
+  'id/500/200/400_[width].webp',
   'images/animated_[width].webp',
   '_next/static/media/client-only.8a5ad2fe_[width].webp',
   // next/legacy/image
@@ -45,6 +47,9 @@ const files = [
   'images/img_[width].png',
   'id/237/200/300_[width].jpg',
   'id/238/200/300_[width].jpg',
+  'id/300/200/400_[width].jpg',
+  'id/400/200/400_[width].jpg',
+  'id/500/200/400_[width].jpg',
   '_next/static/media/client-only.8a5ad2fe_[width].png',
   // next/legacy/image
   '_next/static/media/legacy-img.8a5ad2fe_[width].png',

docs/docs/02-getting-started.md

@@ -25,6 +25,37 @@ module.exports = withExportImages({
 })
 ```
 
+Alternatively, if another plugin is used in conjunction, write
+
+```js title="next.config.js"
+const withExportImages = require('next-export-optimize-images')
+const withAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+})
+
+module.exports = withExportImages(
+  withAnalyzer({
+    output: 'export',
+    // write your next.js configuration values.
+  })
+)
+// Or
+module.exports = async () => {
+  const config = await withExportImages({
+    output: 'export',
+    // write your next.js configuration values.
+  })
+
+  return withAnalyzer(config)
+}
+```
+
+:::note
+
+`withExportImages` is an asynchronous function that returns a Promise, so either write `withExportImages` first or wait for the Promise to resolve before applying other plugins.
+
+:::
+
 2. Change the description of the `scripts` that do the `next build` in `package.json`
 
 ```diff title="package.json"
@@ -53,6 +84,11 @@ Alternatively, you can use `next/legacy/image`.
 import Image from 'next-export-optimize-images/legacy/image'
 
 <Image src="/images/img.png" width={1920} height={1280} alt="" />
+// Or import as follows
+import img from './img.png'
+<Image src={img} alt="" />
+// Or require as follows
+<Image src={require('./img.png')} alt="" />
 ```
 
 ## Local checks

docs/docs/03-Features/05-remote-image-component.md

@@ -0,0 +1,86 @@
+---
+description: This page introduces the RemoteImage component for remote images.
+---
+
+# RemoteImage component
+
+If you want to use remote images (external images) in this library, you need to manually write the external image URL in the configuration file or use the `RemoteImage` component.  
+In other words, using the `RemoteImage` component eliminates the need to manually write the image URL in the configuration file.
+
+## Usage
+
+```tsx
+import RemoteImage from 'next-export-optimize-images/remote-image'
+
+function Component() {
+  return (
+    <>
+      <RemoteImage src="https://example.com/image01.jpg" alt="" />
+      {/* 
+        Or use dynamic values with variables
+        const id = 'image01'
+        <RemoteImage src={`https://example.com/${id}.jpg`} alt="" />
+      */}
+    </>
+  )
+}
+```
+
+or Picture tag.
+(webp support is added by default)
+
+```tsx
+import RemotePicture from 'next-export-optimize-images/remote-picture'
+
+function Component() {
+  return (
+    <>
+      <RemotePicture src="https://example.com/image01.jpg" alt="" />
+      {/* 
+        Or use dynamic values with variables
+        const id = 'image01'
+        <RemotePicture src={`https://example.com/${id}.jpg`} alt="" />
+      */}
+    </>
+  )
+}
+```
+
+## Definition
+
+- props: `Omit<ImageProps, 'src'> & { src: string }`
+- return: `JSX.Element`
+
+※ ImageProps is the same as the props of the Image component provided by next/image.
+
+## Tips
+
+### Use with `remoteImages`.
+
+```js title="export-images.config.js"
+/**
+ * @type {import('next-export-optimize-images').Config}
+ */
+const config = {
+  remoteImages: ['https://example.com/image01.jpg', 'https://example.com/image02.jpg'],
+}
+
+module.exports = config
+```
+
+```tsx
+import Image from 'next-export-optimize-images/image'
+import RemoteImage from 'next-export-optimize-images/remote-image'
+
+function Component() {
+  return (
+    <>
+      <Image src="https://example.com/image01.jpg" alt="" />
+      <Image src="https://example.com/image02.jpg" alt="" />
+      <RemoteImage src="https://example.com/image03.jpg" alt="" />
+    </>
+  )
+}
+```
+
+'image01.jpg', 'image02.jpg' and 'image03.jpg' are downloaded locally and optimized.

docs/package.json

@@ -31,13 +31,13 @@
     "@heroicons/react": "2.1.3",
     "@mdx-js/react": "1.6.22",
     "autoprefixer": "10.4.19",
-    "clsx": "2.1.0",
+    "clsx": "2.1.1",
     "postcss": "8.4.38",
     "prettier": "3.2.5",
-    "prettier-plugin-tailwindcss": "0.5.13",
+    "prettier-plugin-tailwindcss": "0.5.14",
     "prism-react-renderer": "1.3.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "tailwindcss": "3.4.3"
   }
 }

docs/yarn.lock

@@ -3935,10 +3935,10 @@ clone-response@^1.0.2:
   dependencies:
     mimic-response "^1.0.0"
 
-[email protected].0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
-  integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
+[email protected].1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
 clsx@^1.2.1:
   version "1.2.1"
@@ -7139,10 +7139,10 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
-[email protected].13:
-  version "0.5.13"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.13.tgz#ee3c1e07848c90abdd1edde36a09366327e31e26"
-  integrity sha512-2tPWHCFNC+WRjAC4SIWQNSOdcL1NNkydXim8w7TDqlZi+/ulZYz2OouAI6qMtkggnPt7lGamboj6LcTMwcCvoQ==
+[email protected].14:
+  version "0.5.14"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.14.tgz#4482eed357d5e22eac259541c70aca5a4c7b9d5c"
+  integrity sha512-Puaz+wPUAhFp8Lo9HuciYKM2Y2XExESjeT+9NQoVFXZsPPnc9VYss2SpxdQ6vbatmt8/4+SN0oe0I1cPDABg9Q==
 
 [email protected]:
   version "3.2.5"
@@ -7342,13 +7342,13 @@ react-dev-utils@^12.0.1:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-react-dom@18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+react-dom@18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
   dependencies:
     loose-envify "^1.1.0"
-    scheduler "^0.23.0"
+    scheduler "^0.23.2"
 
 react-error-overlay@^6.0.11:
   version "6.0.11"
@@ -7451,10 +7451,10 @@ react-textarea-autosize@^8.3.2:
     use-composed-ref "^1.0.0"
     use-latest "^1.0.0"
 
-react@18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+react@18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
   dependencies:
     loose-envify "^1.1.0"
 
@@ -7781,10 +7781,10 @@ sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.23.0:
-  version "0.23.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
-  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+scheduler@^0.23.2:
+  version "0.23.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
   dependencies:
     loose-envify "^1.1.0"
 

package.json

@@ -28,13 +28,17 @@
     "image.js",
     "image.d.ts",
     "picture.js",
-    "picture.d.ts"
+    "picture.d.ts",
+    "remote-image.js",
+    "remote-image.d.ts",
+    "remote-picture.js",
+    "remote-picture.d.ts"
   ],
   "scripts": {
     "dev": "tsup --watch",
     "build": "tsup",
     "commitmsg": "commitlint -e $GIT_PARAMS",
-    "lint": "eslint {src,__tests__} --cache",
+    "lint": "eslint {src,__tests__} --cache --config .eslintrc.js",
     "lint-staged": "lint-staged",
     "prepare": "husky",
     "pretest": "yarn build && npm-run-all --sequential pretest:**",
@@ -47,7 +51,7 @@
   },
   "lint-staged": {
     "*.{ts,tsx}": [
-      "eslint --fix",
+      "eslint --fix --config .eslintrc.js",
       "prettier --write"
     ]
   },
@@ -58,45 +62,45 @@
     "fs-extra": "^11.2.0",
     "lodash.uniqwith": "^4.5.0",
     "recursive-readdir": "^2.2.3",
-    "sharp": "^0.33.3"
+    "sharp": "^0.33.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "19.2.1",
-    "@commitlint/config-conventional": "19.1.0",
+    "@commitlint/cli": "19.3.0",
+    "@commitlint/config-conventional": "19.2.2",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "15.0.2",
+    "@testing-library/jest-dom": "6.4.5",
+    "@testing-library/react": "15.0.7",
     "@tsconfig/strictest": "2.0.5",
     "@types/app-root-path": "1.2.8",
     "@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": "20.12.7",
-    "@types/react": "18.2.78",
+    "@types/node": "20.12.12",
+    "@types/react": "18.3.2",
     "@types/recursive-readdir": "^2.2.4",
     "@types/sharp": "0.32.0",
-    "@typescript-eslint/eslint-plugin": "7.6.0",
-    "@typescript-eslint/parser": "7.6.0",
+    "@typescript-eslint/eslint-plugin": "7.9.0",
+    "@typescript-eslint/parser": "7.9.0",
     "conventional-changelog-conventionalcommits": "6.1.0",
-    "eslint": "9.0.0",
+    "eslint": "9.3.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jest": "28.2.0",
-    "eslint-plugin-jest-dom": "^5.2.0",
-    "eslint-plugin-testing-library": "6.2.1",
+    "eslint-plugin-jest": "28.5.0",
+    "eslint-plugin-jest-dom": "^5.4.0",
+    "eslint-plugin-testing-library": "6.2.2",
     "git-cz": "4.9.0",
     "husky": "9.0.11",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "lint-staged": "15.2.2",
-    "next": "14.2.1",
-    "npm-run-all2": "^6.1.2",
+    "next": "14.2.3",
+    "npm-run-all2": "^6.2.0",
     "prettier": "3.2.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "rimraf": "5.0.5",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "rimraf": "5.0.7",
     "semantic-release": "19.0.5",
     "ts-jest": "29.1.2",
     "tsup": "^8.0.2",

remote-image.d.ts

@@ -0,0 +1,3 @@
+import RemoteImage from './dist/components/remote-image'
+export * from './dist/components/remote-image'
+export default RemoteImage