feat: initial image-placeholder

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = true

.eslintignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+docs/.vitepress/cache
+docs/.vitepress/dist
+.github
+**/*.json5

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["@pengzhanbo/eslint-config-ts"]
+}

.github/commit-convention.md

@@ -0,0 +1,36 @@
+## Git Commit Message Convention
+
+> This is adapted from [Angular's commit convention](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular).
+#### TL;DR:
+
+Messages must be matched by the following regex:
+
+<!-- prettier-ignore -->
+```js
+/^(revert: )?(feat|fix|docs|style|refactor|perf|test|build|ci|chore)(\(.+\))?!?: .{1,50}/
+```
+
+#### Examples
+
+```
+feat(dev): add 'comments' option
+fix(dev): fix dev error
+perf(build)!: remove 'foo' option
+revert: feat(compiler): add 'comments' option
+```
+
+### Revert
+
+If the PR reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit
+
+### Scope
+
+The scope could be anything specifying the place of the commit change. For example `dev`, `build`, `workflow`, `cli` etc...
+
+### Subject
+
+The subject contains a succinct description of the change:
+
+- use the imperative, present tense: "change" not "changed" nor "changes"
+- don't capitalize the first letter
+- no dot (.) at the end

.github/workflows/lint.yml

@@ -0,0 +1,27 @@
+name: Lint
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Set Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: Install
+        run: pnpm i
+
+      - name: Lint
+        run: pnpm run lint

.github/workflows/release-tag.yml

@@ -0,0 +1,24 @@
+name: Add Github Release Tag
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  release:
+    if: github.repository == 'pengzhanbo/vite-plugin-image-placeholder'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Create release for tag
+        id: release_tag
+        uses: yyx990803/release-tag@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ github.ref }}
+          body: |
+            Please refer to [CHANGELOG.md](https://github.com/pengzhanbo//vite-plugin-image-placeholder/blob/${{ github.ref_name }}/CHANGELOG.md) for details.
+

.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+
+node_modules
+dist
+docs/.vitepress/cache
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*

.npmrc

@@ -0,0 +1,2 @@
+sharp_binary_host=https://npmmirror.com/mirrors/sharp
+sharp_libvips_binary_host=https://npmmirror.com/mirrors/sharp-libvips

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "middlewares"
+    ]
+}

README.md

@@ -0,0 +1,56 @@
+# vite-plugin-image-placeholder
+
+占位图片插件。
+
+在项目开发过程中，为未准备好图片资源的内容区域，生成占位图片。
+
+## 安装
+
+> 还未正式发布到 npm
+
+```sh
+npm i -D vite-plugin-image-placeholder
+```
+
+由于插件以来 `sharp` 库生成图片资源。`sharp`在安装过程中依赖 `libvips`，在中国地区安装可能失败。
+
+解决方式是，在 项目的根目录中的 `.npmrc` 文件中，写入以下配置：
+
+```conf
+sharp_binary_host=https://npmmirror.com/mirrors/sharp
+sharp_libvips_binary_host=https://npmmirror.com/mirrors/sharp-libvips
+```
+
+## 使用
+```ts
+import { defineConfig } from 'vite'
+import imagePlaceholder from 'vite-plugin-image-placeholder'
+
+export default defineConfig(() => ({
+  plugins: [imagePlaceholder({
+    prefix: 'image/placeholder' // 图片路径前缀
+  })],
+}))
+
+```
+
+
+# 示例
+
+```html
+<img src="/image/placeholder" alt="">
+<img src="/image/placeholder/200" alt="">
+<img src="/image/placeholder/300/200" alt="">
+<img src="/image/placeholder/bg/255,255,255" alt="">
+<img src="/image/placeholder/text/人生如梦" alt="">
+<img src="/image/placeholder/bg/00ffcc/text/youcan" alt="">
+<img src="/image/placeholder/text/i can/bg/ccffcc" alt="">
+<img src="/image/placeholder/bg/255,255,255/30/200" alt="">
+
+```
+
+## TODO
+
+- [x] 开发时为 `GET` 请求的生成图片
+- [ ] 为通过模块引入的资源生成图片资源
+- [ ] 在构建项目时将占位图片内联到代码中

example/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mock Server Example</title>
+</head>
+<body>
+  <img src="/image/placeholder" alt="">
+  <img src="/image/placeholder/200" alt="">
+  <img src="/image/placeholder/300/200" alt="">
+  <img src="/image/placeholder/bg/255,255,255" alt="">
+  <img src="/image/placeholder/text/人生如梦" alt="">
+  <img src="/image/placeholder/bg/00ffcc/text/youcan" alt="">
+  <img src="/image/placeholder/text/i can/bg/ccffcc" alt="">
+  <img src="/image/placeholder/bg/255,255,255/30/200" alt="">
+  <img src="/image/placeholder/text/人生如梦/300/200" alt="">
+  <img src="/image/placeholder/bg/00ffcc/text/youcan/300/200" alt="">
+  <img src="/image/placeholder/text/i can/bg/ccffcc/300/200" alt="">
+  <img src="/image/placeholder/bg/255,255,255.jpg" alt="">
+  <img src="/image/placeholder/bg/00ffcc.jpg" alt="">
+  <img src="/image/placeholder/text/人生如梦.png" alt="">
+  <img src="/image/placeholder/bg/00ffcc/text/youcan.webp" alt="">
+  <img src="/image/placeholder/text/i can/bg/ccffcc.jpeg" alt="">
+  <img src="/image/placeholder/text/人生如梦/300/200?noise=1&textColor=red" alt="">
+  <img src="/image/placeholder/text/人生如梦/300/200?noise=1&textColor=255,255,255" alt="">
+  <img src="/image/placeholder/text/人生如梦/300/200?noise=1&textColor=rgb(110,110,110,0.2)" alt="">
+  <img src="/image/placeholder/text/人生如梦/300/200?noise=1&textColor=255,255,255,.8" alt="">
+  <img src="/image/placeholder/text/gif/300.gif" alt="">
+  <img src="/image/placeholder/text/webp/300.webp" alt="">
+  <img src="/image/placeholder/text/avif/300.avif" alt="">
+  <img src="/image/placeholder/text/heif/300.heif" alt="">
+  <img src="/image/placeholder/1.gif" alt="">
+  <script type="module" src="./main.ts"></script>
+</body>
+</html>

example/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import imagePlaceholder from '../src/index'
+
+export default defineConfig(() => ({
+  plugins: [imagePlaceholder()],
+}))

package.json

@@ -0,0 +1,87 @@
+{
+  "name": "vite-plugin-image-placeholder",
+  "version": "0.1.0",
+  "keywords": [
+    "vite",
+    "plugin",
+    "vite-plugin",
+    "image",
+    "placeholder",
+    "image-placeholder"
+  ],
+  "license": "GPL-3.0",
+  "author": "pengzhanbo <q942450674@outlook.com> (https://github.com/pengzhanbo)",
+  "type": "module",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "DEBUG=vite:plugin-image-placeholder vite example --config ./example/vite.config.ts",
+    "docs:build": "vitepress build docs",
+    "docs:dev": "vitepress dev docs",
+    "docs:preview": "vitepress preview docs",
+    "lint": "eslint .",
+    "prepublishOnly": "pnpm run build",
+    "release:changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "release": "bumpp package.json --execute=\"pnpm release:changelog\" --commit --all --push --tag && pnpm publish --access public"
+  },
+  "dependencies": {
+    "debug": "^4.3.4",
+    "lru-cache": "^7.14.1",
+    "path-to-regexp": "^6.2.1",
+    "rgb-hex": "^4.0.0",
+    "sharp": "^0.31.3"
+  },
+  "devDependencies": {
+    "@pengzhanbo/eslint-config-ts": "^0.3.2",
+    "@pengzhanbo/prettier-config": "^0.3.2",
+    "@types/debug": "^4.1.7",
+    "@types/node": "^18.11.18",
+    "@types/sharp": "^0.31.1",
+    "bumpp": "^8.2.1",
+    "conventional-changelog-cli": "^2.2.2",
+    "eslint": "^8.31.0",
+    "prettier": "^2.8.2",
+    "tsup": "^6.5.0",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4"
+  },
+  "peerDependencies": {
+    "vite": ">=3.0.0"
+  },
+  "prettier": "@pengzhanbo/prettier-config",
+  "packageManager": "pnpm@7.18.2",
+  "engines": {
+    "node": "^14.18.0 || >=16"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "@algolia/client-search"
+      ]
+    }
+  },
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "sourcemap": false,
+    "dts": true,
+    "splitting": false,
+    "clean": true,
+    "format": [
+      "esm",
+      "cjs"
+    ]
+  }
+}