feat(svelte): add Svelte components

packages/svelte/README.md

@@ -0,0 +1,69 @@
+# @srcset/svelte
+
+[![ESM-only package][package]][package-url]
+[![NPM version][npm]][npm-url]
+[![Node version][node]][node-url]
+[![Dependencies status][deps]][deps-url]
+[![Install size][size]][size-url]
+[![Build status][build]][build-url]
+[![Coverage status][coverage]][coverage-url]
+
+[package]: https://img.shields.io/badge/package-ESM--only-ffe536.svg
+[package-url]: https://nodejs.org/api/esm.html
+
+[npm]: https://img.shields.io/npm/v/%40srcset%2Fsvelte.svg
+[npm-url]: https://npmjs.com/package/@srcset/svelte
+
+[node]: https://img.shields.io/node/v/%40srcset%2Fsvelte.svg
+[node-url]: https://nodejs.org
+
+[deps]: https://img.shields.io/librariesio/release/npm/%40srcset%2Fsvelte
+[deps-url]: https://libraries.io/npm/%40srcset%2Fsvelte
+
+[size]: https://deno.bundlejs.com/badge?q=%40srcset%2Fsvelte
+[size-url]: https://bundlejs.com/?q=%40srcset%2Fsvelte
+
+[build]: https://img.shields.io/github/actions/workflow/status/TrigenSoftware/srcset/tests.yml?branch=main
+[build-url]: https://github.com/TrigenSoftware/srcset/actions
+
+[coverage]: https://img.shields.io/codecov/c/github/TrigenSoftware/srcset.svg
+[coverage-url]: https://app.codecov.io/gh/TrigenSoftware/srcset
+
+Svelte components for responsive images: Picture and Image.
+
+- 🖼 `<picture>` sources grouped by mime type and ordered by format efficiency
+- 🚀 Lazy loading and async decoding by default, `priority` for above-the-fold images
+- 🌫 Blur-up placeholder background until the image loads
+- 📐 Anti-CLS: intrinsic size from the image variant
+
+## Install
+
+```bash
+# pnpm
+pnpm add @srcset/svelte @srcset/runtime
+# yarn
+yarn add @srcset/svelte @srcset/runtime
+# npm
+npm i @srcset/svelte @srcset/runtime
+```
+
+## Usage
+
+```svelte
+<script>
+  import { src, srcSet, placeholder } from './photo.jpg'
+  import { Picture, Image } from '@srcset/svelte'
+</script>
+
+<Picture {srcSet}>
+  <Image
+    alt="Hero photo"
+    {src}
+    {placeholder}
+  />
+</Picture>
+```
+
+## Documentation
+
+For more details, guides and API references, check out the [documentation website](https://srcset.js.org/components/svelte/).

packages/svelte/oxlint.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig } from '@trigen/oxlint'
+import testConfig from '@trigen/oxlint-config/test'
+import tsTypeCheckedConfig from '@trigen/oxlint-config/typescript-type-checked'
+import rootConfig from '../../oxlint.config.ts'
+
+export default defineConfig({
+  ignorePatterns: ['.svelte-kit'],
+  extends: [
+    rootConfig,
+    tsTypeCheckedConfig,
+    testConfig
+  ],
+  env: {
+    node: false,
+    browser: true
+  },
+  overrides: [
+    {
+      files: ['**/*.svelte'],
+      globals: {
+        $props: 'readonly',
+        $state: 'readonly',
+        $derived: 'readonly',
+        $effect: 'readonly',
+        $bindable: 'readonly'
+      },
+      rules: {
+        // Svelte requires `let` for reactive props: reassignment is done by the compiler.
+        'prefer-const': 'off',
+        // Script blocks are indented inside the `<script>` tag,
+        // including the closing tag line.
+        'stylistic-js/indent': 'off',
+        'stylistic-js/eol-last': 'off',
+        'stylistic-js/no-trailing-spaces': 'off'
+      }
+    }
+  ]
+})

packages/svelte/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@srcset/svelte",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "Svelte components for responsive images: Picture and Image.",
+  "author": {
+    "name": "Dan Onoshko",
+    "email": "danon0404@gmail.com",
+    "url": "https://github.com/dangreen"
+  },
+  "license": "MIT",
+  "homepage": "https://srcset.js.org/components/svelte/",
+  "funding": "https://ko-fi.com/dangreen",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TrigenSoftware/srcset.git",
+    "directory": "packages/svelte"
+  },
+  "bugs": {
+    "url": "https://github.com/TrigenSoftware/srcset/issues"
+  },
+  "keywords": [
+    "srcset",
+    "image",
+    "picture",
+    "responsive",
+    "svelte",
+    "components"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "sideEffects": false,
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "svelte": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      "./package.json": "./package.json",
+      ".": {
+        "types": "./dist/index.d.ts",
+        "svelte": "./dist/index.js",
+        "default": "./dist/index.js"
+      }
+    },
+    "directory": "package",
+    "linkDirectory": false
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clear:package": "del ./package",
+    "clear:dist": "del ./dist",
+    "clear:specs": "del './dist/**/*.spec.*'",
+    "clear": "del ./package ./dist ./coverage ./.svelte-kit",
+    "prepublishOnly": "run build clear:package clean-publish",
+    "postpublish": "pnpm clear:package",
+    "build:dist": "svelte-package --input ./src --output ./dist",
+    "build": "run clear:dist build:dist clear:specs",
+    "lint": "oxlint",
+    "format": "oxlint --fix",
+    "test:unit": "vitest run --coverage",
+    "test:unit:watch": "vitest watch",
+    "test:types": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "run -p lint test:unit test:types"
+  },
+  "peerDependencies": {
+    "@srcset/runtime": "workspace:^",
+    "svelte": ">=5"
+  },
+  "devDependencies": {
+    "@srcset/runtime": "workspace:^",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^6.0.0",
+    "@testing-library/dom": "^10.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.0",
+    "happy-dom": "^20.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.9.0"
+  }
+}