feat: initial rewrite for nuxt 3 support

.github/workflows/ci.yml

@@ -0,0 +1,25 @@
+name: ci
+
+on:
+  push:
+    branches:
+      - dev
+  pull_request:
+    branches:
+      - dev
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: corepack enable
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: "yarn"
+      - run: yarn install
+      - run: yarn lint
+      - run: yarn build
+      # - run: yarn vitest --coverage
+      # - uses: codecov/codecov-action@v3

.gitignore

@@ -8,3 +8,4 @@ coverage
 sw.*
 .vscode
 .vercel_build_output
+.output

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Nuxt.js
+Copyright (c) 2020-Present Nuxt Project
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -8,19 +8,17 @@
 - [📖  Read Documentation](https://image.nuxtjs.org)
 - [▶️  Play online](https://githubbox.com/nuxt/image/tree/main/example)
 
+**Note:** This branch is for Nuxt 3 compatible module. Checkout [`v0` branch](https://github.com/nuxt/bridge/tree/v0) for Nuxt 2 support.
 
 ### Contributing
 
 1. Clone this repository
 2. Install dependencies using `yarn install`
 3. Start development server using `yarn dev`
 
-
 ## 📑 License
 
-Copyright (c) Nuxt Team
-
-
+Published under the [MIT License](./LICENSE)
 
 <!-- Badges -->
 [npm-version-src]: https://flat.badgen.net/npm/v/@nuxt/image

build.config.ts

@@ -1,16 +1,7 @@
 import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
-  declaration: true,
-  rollup: {
-    emitCJS: true
-  },
-  entries: [
-    { input: './src/runtime/', outDir: 'dist/runtime', ext: 'js' },
-    './src/module'
-  ],
   externals: [
-    'ipx',
-    '@nuxt/types'
+    'ipx'
   ]
 })

docs/content/1.getting-started/1.installation.md

@@ -1,13 +1,13 @@
 ---
 title: Installation
-description: Using image module in your Nuxt 2 project is only one command away. ✨
+description: Using image module in your Nuxt project is only one command away. ✨
 ---
 
 ::alert{type="info"}
-Image module only works with Nuxt 2 and is not compatible with Nuxt 3, yet. Track the progress in [this issue](https://github.com/nuxt/image/issues/500).
+Nuxt 3 support is experimental. Please check [v0](https://image.nuxtjs.org/) documentation for Nuxt 2 compatible version.
 ::
 
-Add `@nuxt/image` devDependency to your project:
+Add `@nuxt/image-edge` as a devDependency to your project:
 
 ::code-group
   ```bash [yarn]
@@ -21,21 +21,10 @@ Add `@nuxt/image` devDependency to your project:
 
 Add the module to `buildModules` in your `nuxt.config`:
 
-```ts [nuxt.config.js]
-export default {
-  target: 'static',
-  buildModules: [
-    '@nuxt/image',
-  ]
-}
-```
-
-If you use `server` target (default) and are using the default provider, add `@nuxt/image` to `modules` section instead:
-
 ```ts [nuxt.config.js]
 export default {
   modules: [
-    '@nuxt/image',
+    '@nuxt/image-edge',
   ]
 }
 ```
@@ -58,29 +47,11 @@ export default {
 
 See [module options](/api/options) for available options.
 
-## TypeScript
-
-If you're using Typescript, add the types to your "types" array in `tsconfig.json` after the `@nuxt/types` (Nuxt 2.9.0+) or `@nuxt/vue-app` entry.
-
-```json [tsconfig.json]
-{
-  "compilerOptions": {
-    "types": ["@nuxt/types", "@nuxt/image"]
-  }
-}
-```
-
-## Upgrading
-
-::alert{type="warning"}
-Behavior and API changes might happen in 0.x releases of image module. Update with caution.
-::
-
 ## Troubleshooting
 
 If an error occurs during installation:
 
-- Ensure using LTS version of NodeJS or latest update of `12.x`, `14.x` or `16.x` ([NodeJS Downloads page](https://nodejs.org/en/download/))
+- Ensure using LTS version of NodeJS ([NodeJS Downloads page](https://nodejs.org/en/download/))
 
 - Try to upgrade to latest versions:
 

docs/content/1.getting-started/2.providers.md

@@ -19,13 +19,15 @@ The default provider for Nuxt Image is [ipx](/providers/ipx) or [static](/gettin
 
 ### Local Images
 
-Images should be stored in the `static/` directory of your project.
+Images should be stored in the `public/` directory of your project.
 
-For example, when using `<nuxt-img src="/nuxt-icon.png" />`, it should be placed in `static/` folder under the path `static/nuxt-icon.png`.
+For example, when using `<nuxt-img src="/nuxt-icon.png" />`, it should be placed in `public/` folder under the path `public/nuxt-icon.png`.
 
-Image stored in the `assets/` directory are **not** proccessed with Nuxt Image because those images are managed by webpack.
+For more information, you can learn more about the [public directory](https://v3.nuxtjs.org/guide/directory-structure/public).
 
-For more information, you can learn more about the [static directory here](https://nuxtjs.org/docs/2.x/directory-structure/static).
+::alert{type="warning"}
+Image stored in the `assets/` directory are **not** proccessed with Nuxt Image because those images are managed by webpack.
+::
 
 ### Remote Images
 

docs/content/1.getting-started/3.static.md

@@ -3,8 +3,8 @@ title: Static Images
 description: Optimizing images for static websites.
 ---
 
-If you are building a static site Nuxt Image will optimize and save your images locally when your site is generated - and deploy them alongside your generated pages. (This only works with server-side rendered pages. If you use `ssr: false`, won't work)
+If you are building a static site using `nuxt generate`, Nuxt Image will optimize and save your images locally when your site is generated - and deploy them alongside your generated pages.
 
-::alert{type="info"}
-Even if you are using another provider, you can opt-in to this generate behaviour for a particular image by setting `provider="static"` directly. (See [component documentation](/components/nuxt-img) for more information.)
+::alert{type="warning"}
+Static Image support is under progress for Nuxt 3.
 ::

docs/content/4.providers/ipx.md

@@ -1,72 +1,9 @@
 ---
 title: IPX
-description: Self hosted image provider
+description: Built-in and self hosted image optimizer
 ---
 
-Nuxt Image comes with a [preconfigured instance](/getting-started/providers#default-provider) of [ipx](https://github.com/unjs/ipx). An open source, self-hosted image optimizer based on [sharp](https://github.com/lovell/sharp).
-
-## Using `ipx` in production
-
-Use IPX for self-hosting as an alternative to use service providers for production.
-
-::alert{type="info"}
-  You don't need to follow this section if using `target: 'static'`.
-::
-
-### Runtime Module
-
-Just add `@nuxt/image` to `modules` (instead of `buildModules`) in `nuxt.config`. This will ensure that the `/_ipx` endpoint continues to work in production.
-
-### Advanced: Custom ServerMiddleware
-
-If you have a use case of a custom IPX instance serving other that `static/` dir, you may instead create a server Middleware that handles the `/_ipx` endpoint:
-
-1. Add `ipx` as a dependency:
-
-::code-group
-  ::code-block{label="yarn" active}
-
-  ```bash
-  yarn add ipx
-  ```
-
-  ::
-  ::code-block{label="npm"}
-
-  ```bash
-  npm install ipx
-  ```
-
-  ::
-::
-
-2. Create `server/middleware/ipx.js`:
-
-```js [server/middleware/ipx.js]
-import { createIPX, createIPXMiddleware } from 'ipx'
-
-// https://github.com/unjs/ipx
-const ipx = createIPX({
-  dir: '', // absolute path to images dir
-  domains: [], // allowed external domains (should match domains option in nuxt.config)
-  alias: {}, // base alias
-  sharp: {}, // sharp options
-})
-
-export default createIPXMiddleware(ipx)
-```
-
-3. Add `/_ipx` to `serverMiddleware`:
-
-
-```js [nuxt.config.js]
-
-export default {
-  serverMiddleware: {
-    '/_ipx': '~/server/middleware/ipx.js'
-  }
-}
-```
+Nuxt Image comes with a [preconfigured instance](/getting-started/providers#default-provider) of [unjs/ipx](https://github.com/unjs/ipx). An open source, self-hosted image optimizer based on [lovell/sharp](https://github.com/lovell/sharp).
 
 ## Additional Modifiers
 
@@ -77,16 +14,3 @@ You can use [additional modifiers](https://github.com/unjs/ipx/#modifiers) suppo
 ```html
 <nuxt-img src="/image.png" :modifiers="{ grayscale: true, tint: '#00DC82' }" />
 ```
-
-### Animated Images
-
-::alert{type="info"}
-This feature is currently experimental. When using, `gif` format is converted to `webp`
-([check browser support](https://caniuse.com/webp)). Setting size is also not supported yet (check [lovell/sharp#2275](https://github.com/lovell/sharp/issues/2275) and [unjs/ipx#35](https://github.com/unjs/ipx/issues/35)).
-::
-
-**Example:**
-
-```html
-<nuxt-img src="/image.gif" :modifiers="{ animated: true }" />
-```