feat(loader): add webpack and Rspack loader

packages/loader/README.md

@@ -0,0 +1,93 @@
+# @srcset/loader
+
+[![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%2Floader.svg
+[npm-url]: https://npmjs.com/package/@srcset/loader
+
+[node]: https://img.shields.io/node/v/%40srcset%2Floader.svg
+[node-url]: https://nodejs.org
+
+[deps]: https://img.shields.io/librariesio/release/npm/%40srcset%2Floader
+[deps-url]: https://libraries.io/npm/%40srcset%2Floader
+
+[size]: https://packagephobia.com/badge?p=%40srcset%2Floader
+[size-url]: https://packagephobia.com/result?p=%40srcset%2Floader
+
+[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
+
+[Webpack](https://webpack.js.org/) and [Rspack](https://rspack.rs/) loader for generating responsive images.
+
+- 🧩 Image imports are processed by default - no query markers required
+- 🌳 Tree-shakable image modules: unused exports are dropped from the bundle
+- 🌫 Blur-up placeholders inlined as data-urls
+- 🌐 Pluggable backends: encode with [sharp](https://sharp.pixelplumbing.com/) or build [imgproxy](https://npmjs.com/package/@srcset/imgproxy) / [Cloudflare](https://npmjs.com/package/@srcset/cloudflare) urls
+
+## Install
+
+```bash
+# pnpm
+pnpm add -D @srcset/loader @srcset/runtime
+# yarn
+yarn add -D @srcset/loader @srcset/runtime
+# npm
+npm i -D @srcset/loader @srcset/runtime
+```
+
+## Usage
+
+```js
+// webpack.config.js / rspack.config.js
+export default {
+  module: {
+    rules: [
+      {
+        test: /\.jpe?g$/i,
+        use: {
+          loader: '@srcset/loader',
+          options: {
+            rules: [
+              {
+                width: [1, 0.5],
+                format: ['avif', 'webp', 'jpg']
+              }
+            ],
+            placeholder: true
+          }
+        }
+      }
+    ]
+  }
+}
+```
+
+```ts
+import url, { src, srcSet, srcMap, placeholder } from './photo.jpg'
+
+// url - url of the selected variant, e.g. '/assets/photo.f37e2d3a.jpg'
+// src - selected variant: { id: 'jpg1200', format: 'jpg', type: 'image/jpeg', width: 1200, height: 800, url }
+// srcSet - array of all generated variants
+// srcMap - id-to-url map, e.g. srcMap.webp600
+// placeholder - blur-up data-url, when the `placeholder` option is enabled
+
+const img = `<img src="${url}" srcset="${srcSet.map(({ url, width }) => `${url} ${width}w`).join(', ')}">`
+```
+
+The module is tree-shakable: import only what you use - the rest is dropped from the bundle.
+
+## Documentation
+
+For more details, guides and API references, check out the [documentation website](https://srcset.js.org/integrations/loader/).

packages/loader/client.d.ts

@@ -0,0 +1,79 @@
+/* oxlint-disable trigen/import-order */
+/**
+ * Ambient module declarations for image imports handled by @srcset/loader.
+ *
+ * Usage: add to tsconfig `types` or reference directly:
+ * /// <reference types="@srcset/loader/client" />
+ */
+
+declare module '*.jpg' {
+  import type { SrcSetEntry } from '@srcset/runtime'
+
+  const url: string
+
+  export const src: SrcSetEntry
+  export const srcSet: SrcSetEntry[]
+  export const srcMap: Record<string, string>
+  export const placeholder: string | undefined
+  export default url
+}
+
+declare module '*.jpeg' {
+  import type { SrcSetEntry } from '@srcset/runtime'
+
+  const url: string
+
+  export const src: SrcSetEntry
+  export const srcSet: SrcSetEntry[]
+  export const srcMap: Record<string, string>
+  export const placeholder: string | undefined
+  export default url
+}
+
+declare module '*.png' {
+  import type { SrcSetEntry } from '@srcset/runtime'
+
+  const url: string
+
+  export const src: SrcSetEntry
+  export const srcSet: SrcSetEntry[]
+  export const srcMap: Record<string, string>
+  export const placeholder: string | undefined
+  export default url
+}
+
+declare module '*.webp' {
+  import type { SrcSetEntry } from '@srcset/runtime'
+
+  const url: string
+
+  export const src: SrcSetEntry
+  export const srcSet: SrcSetEntry[]
+  export const srcMap: Record<string, string>
+  export const placeholder: string | undefined
+  export default url
+}
+
+declare module '*.avif' {
+  import type { SrcSetEntry } from '@srcset/runtime'
+
+  const url: string
+
+  export const src: SrcSetEntry
+  export const srcSet: SrcSetEntry[]
+  export const srcMap: Record<string, string>
+  export const placeholder: string | undefined
+  export default url
+}
+
+declare module '*.gif' {
+  import type { SrcSetEntry } from '@srcset/runtime'
+
+  const url: string
+
+  export const src: SrcSetEntry
+  export const srcSet: SrcSetEntry[]
+  export const srcMap: Record<string, string>
+  export const placeholder: string | undefined
+  export default url
+}

packages/loader/oxlint.config.ts

@@ -0,0 +1,12 @@
+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({
+  extends: [
+    rootConfig,
+    tsTypeCheckedConfig,
+    testConfig
+  ]
+})

packages/loader/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@srcset/loader",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "Webpack and Rspack loader for generating responsive images.",
+  "author": {
+    "name": "Dan Onoshko",
+    "email": "danon0404@gmail.com",
+    "url": "https://github.com/dangreen"
+  },
+  "license": "MIT",
+  "homepage": "https://srcset.js.org/integrations/loader/",
+  "funding": "https://ko-fi.com/dangreen",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TrigenSoftware/srcset.git",
+    "directory": "packages/loader"
+  },
+  "bugs": {
+    "url": "https://github.com/TrigenSoftware/srcset/issues"
+  },
+  "keywords": [
+    "srcset",
+    "image",
+    "picture",
+    "responsive",
+    "webpack",
+    "rspack",
+    "loader",
+    "webpack-loader"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "sideEffects": false,
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./src/index.ts",
+    "./client": {
+      "types": "./client.d.ts"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      "./package.json": "./package.json",
+      ".": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "./client": {
+        "types": "./client.d.ts"
+      }
+    },
+    "directory": "package",
+    "linkDirectory": false
+  },
+  "files": [
+    "dist",
+    "client.d.ts"
+  ],
+  "scripts": {
+    "clear:package": "del ./package",
+    "clear:dist": "del ./dist",
+    "clear": "del ./package ./dist ./coverage",
+    "prepublishOnly": "run build clear:package clean-publish",
+    "postpublish": "pnpm clear:package",
+    "build": "tsc -p ./tsconfig.build.json",
+    "lint": "oxlint",
+    "format": "oxlint --fix",
+    "test:unit": "vitest run --coverage",
+    "test:unit:watch": "vitest watch",
+    "test:types": "tsc --noEmit",
+    "test": "run -p lint test:unit test:types"
+  },
+  "peerDependencies": {
+    "@rspack/core": ">=1",
+    "@srcset/runtime": "workspace:^",
+    "webpack": ">=5"
+  },
+  "peerDependenciesMeta": {
+    "@rspack/core": {
+      "optional": true
+    },
+    "webpack": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@srcset/bundler-utils": "workspace:^",
+    "@srcset/core": "workspace:^",
+    "p-limit": "^7.3.0"
+  },
+  "devDependencies": {
+    "@rspack/core": "^2.1.4",
+    "@srcset/runtime": "workspace:^",
+    "@types/node": "^22.0.0",
+    "memfs": "^4.64.0",
+    "sharp": "^0.35.3",
+    "webpack": "^5.108.4"
+  }
+}

packages/loader/src/index.ts

@@ -0,0 +1,13 @@
+/* oxlint-disable import/no-default-export */
+export {
+  default,
+  raw
+} from './loader.ts'
+export type * from './types.ts'
+export type {
+  SrcSetRule,
+  SrcSetEntrySelect,
+  SrcSetModuleEntry,
+  ResourceIdFormatter,
+  PlaceholderOptions
+} from '@srcset/bundler-utils'

packages/loader/src/limit.ts

@@ -0,0 +1,21 @@
+import { availableParallelism } from 'node:os'
+import type { LimitFunction } from 'p-limit'
+import pLimit from 'p-limit'
+
+const limits = new Map<number | undefined, LimitFunction>()
+
+/**
+ * Get concurrency limit shared between loader runs.
+ * @param concurrency - Concurrency limit.
+ * @returns p-limit's limit function.
+ */
+export function getSharedLimit(concurrency?: number) {
+  let limit = limits.get(concurrency)
+
+  if (!limit) {
+    limit = pLimit(concurrency ?? availableParallelism())
+    limits.set(concurrency, limit)
+  }
+
+  return limit
+}