feat: initial release

.changeset/new-rivers-sniff.md → .changeset/fast-ligers-perform.md

@@ -1,9 +1,11 @@
 ---
-"@urami/demo-sveltekit": major
 "@urami/core": major
+"@urami/react": major
+"@urami/solid": major
 "@urami/svelte": major
 "@urami/types": major
 "@urami/utils": major
+"@urami/vue": major
 ---
 
-initialize as monorepo
+initialize

.github/workflows/changeset.yml

@@ -33,7 +33,7 @@ jobs:
       - name: install
         run: pnpm install
       - name: build
-        run: pnpm build
+        run: pnpm build --filter='./packages/*'
       - name: changesets
         id: changesets
         uses: changesets/action@v1

README.md

@@ -1,113 +1,5 @@
-# svelte-aio
+# Urami
 
-Automatic image optimization for SvelteKit, inspired by NextJS
+[Documentation](https://urami.dev)
 
-[![NPM](https://img.shields.io/npm/v/svelte-aio)](https://www.npmjs.com/package/svelte-aio)
-
-## Table of contents
-
-1. [Usage](#usage)
-2. [Configuration](#configuration)
-
-## Usage
-
-Check out full sample at [`src/routes`](./src/routes)
-
-Install dependencies
-
-```
-pnpm add svelte-aio
-```
-
-(Optional) To resolve export paths correctly in **VS Code**, we require you to set module resolution in `tsconfig.json` into `bundler` first.
-
-```json
-{
-  "compilerOptions": {
-    "moduleResolution": "bundler"
-  }
-}
-```
-
-In `routes/api/_images`, create `+server.ts` endpoint
-
-```ts
-import { requestHandler } from 'svelte-aio/api'
-
-import type { RequestHandler } from '@sveltejs/kit'
-
-export const GET: RequestHandler = requestHandler()
-```
-
-Then use normally (almost) like `next/image`
-
-```svelte
-<!-- +page.ts -->
-<script lang="ts">
-  import Image from 'svelte-aio'
-</script>
-
-<Image
-  src="https://demo.rayriffy.com/tom-scott.jpg"
-  width={801}
-  height={801}
-  alt="Tom Scott"
-  class="rounded-xl shadow-md"
-/>
-```
-
-## Configuration
-
-Server configrations can be specified via option params. **All parameters are optional!**
-
-```ts
-export const GET: RequestHandler = requestHandler({
-  avif: false,
-  remoteDomains: ['demo.rayriffy.com'],
-  allowedDomains: ['svelte-aio.vercel.app'],
-  ttl: 1000 * 60 * 60 * 24 * 7,
-  storePath: '.svelte-kit/images',
-})
-```
-
-### avif
-
-`boolean`
-
-Enable AVIF image format. Defaults to `false`
-
-> **Warning:** optimizing image into AVIF format currently not reccomended due to high CPU and memory usage. Overall performance is not great when comparing to WebP.
-
-### remoteDomains
-
-`string[] | undefined`
-
-List of domains that API will be allowed to optimize. Defaults to _unset_
-
-From example above, `remoteDomains: ['demo.rayriffy.com'],` means that API will only be allowed to optimize images that served from `demo.rayriffy.com`.
-
-Unset this option will tell API to optimize **ALL IMAGES** from **EVERYWHERE**
-
-### allowedDomains
-
-`string[] | undefined`
-
-List of domains that allowed to use the API, this will be checked via header `Referer`
-
-Only affects on `NODE_ENV=production`. Unset this option will allow anywhere to request image from this API.
-
-### ttl
-
-`number`
-
-Time until images will become invalidated, defaults to **7 days**
-
-Values are in **milliseconds**
-
-### storePath
-
-`string`
-
-Directory path to cache optimized images. Defaults to `.svelte-kit/images`
-
-Provided paths will be relative to `process.cwd()`
+Urami, automatic image optimization for all!

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "build": "turbo run build",
-    "dev": "turbo run dev",
+    "dev": "turbo run dev --filter=@urami/docs",
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },

packages/core/README.md

@@ -0,0 +1,19 @@
+# @urami/core
+
+Server-side for Urami automatic image optimization. Please refer to [documentation](https://urami.dev/core/overview) for more details.
+
+## createRequestHandler
+
+A high-order function to ceate a request handler. Options can be specifed, please refer to [Configuration](https://urami.dev/core/configuration) page
+
+```ts
+const handler = createRequestHandler({
+  // configuration
+})
+```
+
+The handler itself is a function that accepts a `Request` object and returns a `Response` object.
+
+```ts
+export type RequestHandler = (request: Request) => Promise<Response>
+```

packages/core/package.json

@@ -7,6 +7,7 @@
     "email": "[email protected]",
     "url": "https://rayriffy.com"
   },
+  "homepage": "https://urami.dev/",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"

packages/core/src/@types/RequestHandler.ts

@@ -0,0 +1 @@
+export type RequestHandler = (request: Request) => Promise<Response>

packages/core/src/index.ts

@@ -21,10 +21,11 @@ import { writeImageToFileSystem } from './functions/writeImageToFileSystem.js'
 
 import type { Config } from './@types/Config.js'
 import type { ResponsePayload } from './@types/ResponsePayload.js'
+import type { RequestHandler } from './@types/RequestHandler.js'
 
 export const createRequestHandler =
-  (config: Partial<Config> = {}) =>
-  async (request: Request): Promise<Response> => {
+  (config: Partial<Config> = {}): RequestHandler =>
+  async request => {
     // build general config
     const mergedConfig = {
       ...defaultConfig,

packages/react/README.md

@@ -0,0 +1,33 @@
+# @urami/react
+
+Optimized image component for [React](https://react.dev/).
+
+[Documentation](https://urami.dev/components/react)
+
+## Usage
+
+```tsx
+import Image from '@urami/react'
+
+const Component = () => {
+  return (
+    <Image
+      src="https://demo.rayriffy.com/tom-scott.jpg"
+      width={801}
+      height={801}
+      alt="Tom Scott"
+      className="rounded-xl shadow-md"
+    />
+  )
+}
+```
+
+## Props
+
+| Name      | Type     | Default                                                                                            | Required | Description                                                          |
+| --------- | -------- | -------------------------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------- |
+| `src`     | `string` | -                                                                                                  | ✅       | Source of the image                                                  |
+| `width`   | `number` | -                                                                                                  | ✅       | Width of the image                                                   |
+| `height`  | `number` | -                                                                                                  | ❌       | Height of the image (Specify this will results in less layout shift) |
+| `quality` | `number` | `75`                                                                                               | ❌       | Quality of the image                                                 |
+| `loader`  | `fn`     | [`defaultLoader`](https://github.com/rayriffy/urami/blob/main/packages/utils/src/defaultLoader.ts) | ❌       | Loader function, please refer to [Loader](https://urami.dev/utilities/loader)         |

packages/react/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@urami/react",
+  "version": "0.0.0",
+  "description": "Automatic image optimization component for React",
+  "author": {
+    "name": "Phumrapee Limpiancop",
+    "email": "[email protected]",
+    "url": "https://rayriffy.com"
+  },
+  "homepage": "https://urami.dev/",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rayriffy/urami.git"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm --dts --sourcemap",
+    "dev": "pnpm run build --watch"
+  },
+  "keywords": [],
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@urami/utils": "workspace:*"
+  },
+  "devDependencies": {
+    "@tsconfig/recommended": "^1.0.3",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@urami/types": "workspace:*"
+  }
+}

packages/react/src/index.tsx

@@ -0,0 +1,33 @@
+import { defaultLoader, buildSource } from '@urami/utils'
+
+import type { FunctionComponent, ImgHTMLAttributes } from 'react'
+import type { Loader } from '@urami/types'
+
+export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  src: string
+  width: number
+  quality?: number
+  loader?: Loader
+}
+
+const Image: FunctionComponent<ImageProps> = ({
+  src,
+  width,
+  quality = 75,
+  loader = defaultLoader,
+  ...rest
+}) => {
+  const builtProps = buildSource(loader, src, width, quality)
+
+  return (
+    <img
+      src={builtProps.src}
+      srcSet={builtProps.srcSet}
+      decoding="async"
+      loading="lazy"
+      {...rest}
+    />
+  )
+}
+
+export default Image

packages/react/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@tsconfig/recommended/tsconfig.json",
+  "compilerOptions": {
+    "module": "es2022",
+    "lib": ["es2023", "DOM"],
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  }
+}

packages/react/tsup.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({})

packages/solid/README.md

@@ -0,0 +1,33 @@
+# @urami/solid
+
+Optimized image component for [Solid](https://www.solidjs.com/).
+
+[Documentation](https://urami.dev/components/solid)
+
+## Usage
+
+```tsx
+import Image from '@urami/solid'
+
+const Component = () => {
+  return (
+    <Image
+      src="https://demo.rayriffy.com/tom-scott.jpg"
+      width={801}
+      height={801}
+      alt="Tom Scott"
+      class="rounded-xl shadow-md"
+    />
+  )
+}
+```
+
+## Props
+
+| Name      | Type     | Default                                                                                            | Required | Description                                                          |
+| --------- | -------- | -------------------------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------- |
+| `src`     | `string` | -                                                                                                  | ✅       | Source of the image                                                  |
+| `width`   | `number` | -                                                                                                  | ✅       | Width of the image                                                   |
+| `height`  | `number` | -                                                                                                  | ❌       | Height of the image (Specify this will results in less layout shift) |
+| `quality` | `number` | `75`                                                                                               | ❌       | Quality of the image                                                 |
+| `loader`  | `fn`     | [`defaultLoader`](https://github.com/rayriffy/urami/blob/main/packages/utils/src/defaultLoader.ts) | ❌       | Loader function, please refer to [Loader](https://urami.dev/utilities/loader)         |