fix: 🐛 Fixed dts file output

__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
 

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')

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 = {