chore: deps bump

.changeset/warm-lamps-relax.md

@@ -0,0 +1,16 @@
+---
+"@urami/demo-solid": minor
+"@urami/demo-sveltekit": minor
+"@urami/demo-astro": minor
+"@urami/svelte": minor
+"@urami/astro": minor
+"@urami/react": minor
+"@urami/solid": minor
+"@urami/types": minor
+"@urami/utils": minor
+"@urami/core": minor
+"@urami/vue": minor
+"@urami/docs": minor
+---
+
+dependencies bump

apps/docs/src/components/react.md

@@ -27,7 +27,7 @@ $ bun add @urami/react
 ## Usage
 
 ```tsx
-import Image from '@urami/react'
+import Image from "@urami/react";
 
 const Component = () => {
   return (
@@ -38,8 +38,8 @@ const Component = () => {
       alt="Tom Scott"
       className="rounded-xl shadow-md"
     />
-  )
-}
+  );
+};
 ```
 
 ## Props

apps/docs/src/components/solid.md

@@ -27,7 +27,7 @@ $ bun add @urami/solid
 ## Usage
 
 ```tsx
-import Image from '@urami/solid'
+import Image from "@urami/solid";
 
 const Component = () => {
   return (
@@ -38,8 +38,8 @@ const Component = () => {
       alt="Tom Scott"
       class="rounded-xl shadow-md"
     />
-  )
-}
+  );
+};
 ```
 
 ## Props

apps/docs/src/components/vue.md

@@ -28,7 +28,7 @@ $ bun add @urami/vue
 
 ```vue
 <script>
-  import Image from '@urami/vue'
+import Image from "@urami/vue";
 </script>
 
 <template>

apps/docs/src/core/configuration.md

@@ -11,15 +11,15 @@ All parameters are optional!
 :::
 
 ```js
-import { createRequestHandler } from '@urami/core'
+import { createRequestHandler } from "@urami/core";
 
 const handler = createRequestHandler({
   avif: false,
-  remoteDomains: ['demo.rayriffy.com'],
-  allowedDomains: ['svelte-aio.vercel.app'],
+  remoteDomains: ["demo.rayriffy.com"],
+  allowedDomains: ["svelte-aio.vercel.app"],
   ttl: 1000 * 60 * 60 * 24 * 7,
-  storePath: '.svelte-kit/images',
-})
+  storePath: ".svelte-kit/images",
+});
 ```
 
 ## avif

apps/docs/src/core/overview.md

@@ -11,7 +11,9 @@ It's designed to be used with any frameworks that able to pass input as a [`Requ
 If your backend framework does not comply with Fetch API `Request` object, just mocking [`url`](https://developer.mozilla.org/en-US/docs/Web/API/Request/url) and [`headers`](https://developer.mozilla.org/en-US/docs/Web/API/Request/headers) at minimum to be able to use Urami Core.
 
 ```ts
-export type RequestHandler = (request: Pick<Request, 'url' | 'headers'>) => Promise<Response>
+export type RequestHandler = (
+  request: Pick<Request, "url" | "headers">,
+) => Promise<Response>;
 ```
 
 ## Lifecycle
@@ -22,4 +24,4 @@ export type RequestHandler = (request: Pick<Request, 'url' | 'headers'>) => Prom
 4. API will try to figure out which is the best image format to be served to user
 5. If image is cached and not expired, API will serve cached image
 6. Otherwise, API will download image from `url` and optimize it
-7. Optimized image will be cached, and served to user
+7. Optimized image will be cached, and served to user

apps/docs/src/guide/astro.md

@@ -47,18 +47,17 @@ $ yarn add @urami/astro
 Then, apply integration to `astro.config.mjs`. It's important to have `output: 'server'` in order to use Urami.
 
 ```js [astro.config.mjs]
-import { defineConfig } from 'astro/config'
+import { defineConfig } from "astro/config";
 
-import urami from '@urami/astro' // [!code ++]
+import urami from "@urami/astro"; // [!code ++]
 
 // https://astro.build/config
 export default defineConfig({
-  output: 'server', // [!code ++]
+  output: "server", // [!code ++]
   integrations: [
     urami(), // [!code ++]
   ],
-})
-
+});
 ```
 
 ## Image component

apps/docs/src/guide/solid-start.md

@@ -37,25 +37,25 @@ At directory `src/routes/api/_image.ts`, which is a server endpoint for Urami. T
 ::: code-group
 
 ```js [_image.js]
-import { createRequestHandler } from '@urami/core'
+import { createRequestHandler } from "@urami/core";
 
 const handler = createRequestHandler({
-  remoteDomains: ['demo.rayriffy.com'],
-})
+  remoteDomains: ["demo.rayriffy.com"],
+});
 
-export const GET = ({ request }) => handler(request)
+export const GET = ({ request }) => handler(request);
 ```
 
 ```ts [_image.ts]
-import { createRequestHandler } from '@urami/core'
+import { createRequestHandler } from "@urami/core";
 
-import type { APIEvent } from 'solid-start/api'
+import type { APIEvent } from "solid-start/api";
 
 const handler = createRequestHandler({
-  remoteDomains: ['demo.rayriffy.com'],
-})
+  remoteDomains: ["demo.rayriffy.com"],
+});
 
-export const GET = ({ request }: APIEvent) => handler(request)
+export const GET = ({ request }: APIEvent) => handler(request);
 ```
 
 :::
@@ -68,7 +68,7 @@ Import `Image` component from `@urami/solid` and use it like `next/image`.
 
 ```tsx [index.tsx]
 // index.jsx
-import Image from '@urami/solid'
+import Image from "@urami/solid";
 
 export default function Page() {
   return (
@@ -79,7 +79,7 @@ export default function Page() {
       alt="Tom Scott"
       class="rounded-xl shadow-md"
     />
-  )
+  );
 }
 ```
 

apps/docs/src/guide/sveltekit.md

@@ -37,25 +37,25 @@ Create a file `routes/api/_image/+server.ts`, which is a server endpoint for Ura
 ::: code-group
 
 ```js [+server.js]
-import { createRequestHandler } from '@urami/core'
+import { createRequestHandler } from "@urami/core";
 
 const handler = createRequestHandler({
-  remoteDomains: ['demo.rayriffy.com'],
-})
+  remoteDomains: ["demo.rayriffy.com"],
+});
 
-export const GET = event => handler(event.request)
+export const GET = (event) => handler(event.request);
 ```
 
 ```ts [+server.ts]
-import { createRequestHandler } from '@urami/core'
+import { createRequestHandler } from "@urami/core";
 
-import type { RequestHandler } from '@sveltejs/kit'
+import type { RequestHandler } from "@sveltejs/kit";
 
 const handler = createRequestHandler({
-  remoteDomains: ['demo.rayriffy.com'],
-})
+  remoteDomains: ["demo.rayriffy.com"],
+});
 
-export const GET: RequestHandler = event => handler(event.request)
+export const GET: RequestHandler = (event) => handler(event.request);
 ```
 
 :::

apps/docs/src/index.md

@@ -6,8 +6,8 @@ title: Urami
 titleTemplate: Image optimization for all!
 
 hero:
-  name: 'Urami'
-  text: 'Image optimization for all!'
+  name: "Urami"
+  text: "Image optimization for all!"
   tagline: Simpliest way to implement Next.js's automatic image optimization to any JS framework
   actions:
     - theme: brand

apps/docs/src/utilities/loader.md

@@ -8,7 +8,7 @@ However, there're many cases that you want to use your own loader function. For
 - You want to use your own image optimization service
 
 ```ts
-export type Loader = (src: string, width: number, quality: number) => string
+export type Loader = (src: string, width: number, quality: number) => string;
 ```
 
 The function accepts 3 parameters
@@ -24,19 +24,19 @@ As a result, the function should return the optimized image source.
 Define your own loader function
 
 ```ts
-import type { Loader } from '@urami/types'
+import type { Loader } from "@urami/types";
 
 export const customLoader: Loader = (src, width, quality) => {
   const params = new URLSearchParams({
     url: src,
     w: width.toString(),
     q: quality.toString(),
-  }).toString()
+  }).toString();
 
-  if (src.startsWith('https://demo.rayriffy.com'))
-    return `https://api.example.com/image?${params}`
-  else return `https://remote.foo.bar/image?${params}`
-}
+  if (src.startsWith("https://demo.rayriffy.com"))
+    return `https://api.example.com/image?${params}`;
+  else return `https://remote.foo.bar/image?${params}`;
+};
 ```
 
 Then pass it to the component

apps/examples/astro/astro.config.mjs

@@ -1,10 +1,14 @@
-import { defineConfig } from 'astro/config'
-import urami from '@urami/astro'
+import { defineConfig } from 'astro/config';
+import urami from '@urami/astro';
+import tailwind from '@astrojs/tailwind';
 
-import tailwind from '@astrojs/tailwind'
+import node from "@astrojs/node";
 
 // https://astro.build/config
 export default defineConfig({
   output: 'server',
   integrations: [urami(), tailwind()],
-})
+  adapter: node({
+    mode: "standalone"
+  })
+});

apps/examples/astro/package.json

@@ -6,14 +6,16 @@
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
-    "build": "astro check && astro build",
+    "build": "astro build",
     "preview": "astro preview",
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/node": "^8.3.4",
     "@astrojs/tailwind": "^5.0.2",
     "@urami/astro": "workspace:*",
-    "astro": "^3.5.3",
+    "astro": "^4.16.12",
+    "node": "^18.20.5",
     "tailwindcss": "^3.0.24"
   }
 }

apps/examples/astro/src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

apps/examples/solid-start/src/entry-server.tsx

@@ -5,5 +5,5 @@ import {
 } from "solid-start/entry-server";
 
 export default createHandler(
-  renderAsync((event) => <StartServer event={event} />)
+  renderAsync((event) => <StartServer event={event} />),
 );

apps/examples/solid-start/src/root.tsx

@@ -1,5 +1,5 @@
 // @refresh reload
-import { Suspense } from 'solid-js'
+import { Suspense } from "solid-js";
 import {
   A,
   Body,
@@ -11,7 +11,7 @@ import {
   Routes,
   Scripts,
   Title,
-} from 'solid-start'
+} from "solid-start";
 
 export default function Root() {
   return (
@@ -33,5 +33,5 @@ export default function Root() {
         <Scripts />
       </Body>
     </Html>
-  )
+  );
 }

apps/examples/solid-start/src/routes/api/_image.ts

@@ -1,9 +1,9 @@
-import { createRequestHandler } from '@urami/core'
+import { createRequestHandler } from "@urami/core";
 
-import type { APIEvent } from 'solid-start/api'
+import type { APIEvent } from "solid-start/api";
 
 const handler = createRequestHandler({
-  remoteDomains: ['demo.rayriffy.com'],
-})
+  remoteDomains: ["demo.rayriffy.com"],
+});
 
-export const GET = ({ request }: APIEvent) => handler(request)
+export const GET = ({ request }: APIEvent) => handler(request);