Merge pull request #1105 from dc7290/main

Release

.github/workflows/node.js.yml

@@ -13,9 +13,9 @@ jobs:
         node:
           - 18
           - 20
-        os:
-          - macos-latest
-          - windows-latest
+          - 22
+        os: 
+          - ubuntu-latest
     name: Node.js v${{ matrix.node }} on ${{ matrix.os }}
     runs-on: ${{ matrix.os }}
     steps:

.github/workflows/release.yml

@@ -10,10 +10,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js 20
+      - name: Use Node.js 22
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: 'npm'
       - run: npm ci
       - run: npm run build

.tool-versions

@@ -0,0 +1 @@
+nodejs 22.12.0

__tests__/e2e/app/page.jsx

@@ -1,15 +1,14 @@
+import React from 'react'
+
 import Image from '../../../image'
 import LegacyImage from '../../../legacy/image'
+import Picture from '../../../picture'
 import RemoteImage from '../../../remote-image'
 import RemotePicture from '../../../remote-picture'
-import React from 'react'
-
-import Picture from '../../../dist/components/picture'
 import ClientComponent from '../components/ClientComponent'
-
+import WithPropsComponent from '../components/WithPropsComponent'
 import imgSrc from '../images/img.png'
 import legacyImgSrc from '../images/legacy-img.png'
-import WithPropsComponent from '../components/WithPropsComponent'
 
 const id = 400
 

docs/yarn.lock

@@ -6514,15 +6514,10 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nanoid@^3.3.3, nanoid@^3.3.4:
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
-  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
-
-nanoid@^3.3.7:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
-  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+nanoid@^3.3.3, nanoid@^3.3.4, nanoid@^3.3.7:
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
+  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
 
 [email protected]:
   version "0.6.3"

image.d.ts

@@ -1,3 +1,3 @@
-import Image from './dist/components/image'
-export * from './dist/components/image'
+import Image from './dist/components/client/image'
+export * from './dist/components/client/image'
 export default Image

image.js

@@ -1 +1 @@
-module.exports = require('./dist/components/image')
+module.exports = require('./dist/components/client/image')

legacy/image.d.ts

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

legacy/image.js

@@ -1 +1 @@
-module.exports = require('../dist/components/legacy-image')
+module.exports = require('../dist/components/client/legacy/image')

package.json

@@ -77,7 +77,7 @@
     "@types/fs-extra": "11.0.4",
     "@types/jest": "29.5.14",
     "@types/lodash.uniqwith": "4.5.9",
-    "@types/node": "20.17.9",
+    "@types/node": "22.10.2",
     "@types/react": "npm:types-react@rc",
     "@types/recursive-readdir": "2.2.4",
     "@types/sharp": "0.32.0",

picture.d.ts

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

picture.js

@@ -1 +1 @@
-module.exports = require('./dist/components/picture')
+module.exports = require('./dist/components/client/picture')

remote-image.d.ts

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

remote-image.js

@@ -1 +1 @@
-module.exports = require('./dist/components/remote-image')
+module.exports = require('./dist/components/server/remote-image')

remote-picture.d.ts

@@ -1,3 +1,3 @@
-import RemotePicture from './dist/components/remote-picture'
-export * from './dist/components/remote-picture'
+import RemotePicture from './dist/components/server/remote-picture'
+export * from './dist/components/server/remote-picture'
 export default RemotePicture

remote-picture.js

@@ -1 +1 @@
-module.exports = require('./dist/components/remote-picture')
+module.exports = require('./dist/components/server/remote-picture')

src/components/image.tsx → src/components/client/image.tsx

@@ -1,7 +1,7 @@
 import Image, { type ImageProps } from 'next/image'
 import React, { forwardRef } from 'react'
-import getStringSrc from './utils/getStringSrc'
-import imageLoader from './utils/imageLoader'
+import getStringSrc from '../utils/getStringSrc'
+import imageLoader from '../utils/imageLoader'
 
 const CustomImage = forwardRef<HTMLImageElement, ImageProps>((props, forwardedRef) => {
   const srcStr = getStringSrc(props.src)
@@ -23,5 +23,5 @@ const CustomImage = forwardRef<HTMLImageElement, ImageProps>((props, forwardedRe
 })
 CustomImage.displayName = 'CustomImage'
 
-export { default as getOptimizedImageProps } from './utils/getOptimizedImageProps'
+export { default as getOptimizedImageProps } from '../utils/getOptimizedImageProps'
 export default CustomImage

src/components/legacy-image.tsx → src/components/client/legacy/image.tsx

@@ -1,6 +1,6 @@
 import Image, { type ImageProps } from 'next/image'
 import React from 'react'
-import imageLoader from './utils/imageLoader'
+import imageLoader from '../../utils/imageLoader'
 
 const CustomImage = (props: ImageProps) => {
   return (

src/components/picture.tsx → src/components/client/picture.tsx

@@ -1,8 +1,8 @@
 import Image, { type ImageProps, getImageProps } from 'next/image'
 import React, { forwardRef } from 'react'
-import getConfig from '../utils/getConfig'
-import getStringSrc from './utils/getStringSrc'
-import imageLoader from './utils/imageLoader'
+import getConfig from '../../utils/getConfig'
+import getStringSrc from '../utils/getStringSrc'
+import imageLoader from '../utils/imageLoader'
 
 const config = getConfig()
 

src/components/remote-image.tsx → src/components/server/remote-image.tsx

@@ -4,10 +4,10 @@ import { appendFileSync } from 'fs-extra'
 import type { ImageConfigComplete } from 'next/dist/shared/lib/image-config'
 import type { ImageProps } from 'next/image'
 import React, { forwardRef } from 'react'
-import type { Manifest } from '../cli'
-import buildOutputInfo from '../utils/buildOutputInfo'
-import getConfig from '../utils/getConfig'
-import Image from './image'
+import type { Manifest } from '../../cli'
+import buildOutputInfo from '../../utils/buildOutputInfo'
+import getConfig from '../../utils/getConfig'
+import Image from '../client/image'
 
 type RemoteImageProps = Omit<ImageProps, 'src'> & {
   src: string

src/components/remote-picture.tsx → src/components/server/remote-picture.tsx

@@ -4,10 +4,10 @@ import { appendFileSync } from 'fs-extra'
 import type { ImageConfigComplete } from 'next/dist/shared/lib/image-config'
 import type { ImageProps } from 'next/image'
 import React, { forwardRef } from 'react'
-import type { Manifest } from '../cli'
-import buildOutputInfo from '../utils/buildOutputInfo'
-import getConfig from '../utils/getConfig'
-import Picture from './picture'
+import type { Manifest } from '../../cli'
+import buildOutputInfo from '../../utils/buildOutputInfo'
+import getConfig from '../../utils/getConfig'
+import Picture from '../client/picture'
 
 type RemotePictureProps = Omit<ImageProps, 'src'> & {
   src: string

tsup.config.js

@@ -26,23 +26,23 @@ export default defineConfig([
   {
     ...cfg,
     entry: {
-      'remote-image': 'src/components/remote-image.tsx',
-      'remote-picture': 'src/components/remote-picture.tsx',
+      'remote-image': 'src/components/server/remote-image.tsx',
+      'remote-picture': 'src/components/server/remote-picture.tsx',
     },
-    external: ['react', 'next', 'next-export-optimize-images', './image', './picture'],
-    outDir: 'dist/components',
+    external: ['next-export-optimize-images', '../client/image', '../client/picture'],
+    outDir: 'dist/components/server',
   },
 
   // Client Components
   {
     ...cfg,
     entry: {
-      image: 'src/components/image.tsx',
-      'legacy-image': 'src/components/legacy-image.tsx',
-      picture: 'src/components/picture.tsx',
+      image: 'src/components/client/image.tsx',
+      'legacy/image': 'src/components/client/legacy/image.tsx',
+      picture: 'src/components/client/picture.tsx',
     },
-    external: ['react', 'next', 'next-export-optimize-images'],
-    outDir: 'dist/components',
+    external: ['next-export-optimize-images'],
+    outDir: 'dist/components/client',
     esbuildOptions: (options) => {
       // Append "use client" to the top of the react entry point
       options.banner = {