From 9380ebe785991c0f560d5565a296349daf52bf26 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Tue, 10 Jan 2023 18:00:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E9=80=9A=E8=BF=87?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=AF=BC=E5=85=A5=E5=8D=A0=E4=BD=8D=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87(base64)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/env.d.ts   |  4 ++++
 example/main.ts    |  6 ++++++
 src/cache.ts       |  6 +++++-
 src/pathToImage.ts |  8 ++++----
 src/plugin.ts      | 19 ++++++++++++++++---
 5 files changed, 35 insertions(+), 8 deletions(-)
 create mode 100644 example/env.d.ts

diff --git a/example/env.d.ts b/example/env.d.ts
new file mode 100644
index 0000000..e1632a4
--- /dev/null
+++ b/example/env.d.ts
@@ -0,0 +1,4 @@
+declare module 'virtual:*' {
+  const result: any
+  export default result
+}
diff --git a/example/main.ts b/example/main.ts
index e69de29..3715573 100644
--- a/example/main.ts
+++ b/example/main.ts
@@ -0,0 +1,6 @@
+import placeholder from 'virtual:image/placeholder'
+
+const img = new Image()
+img.src = placeholder
+
+document.body.appendChild(img)
diff --git a/src/cache.ts b/src/cache.ts
index ef4d9da..1458892 100644
--- a/src/cache.ts
+++ b/src/cache.ts
@@ -1,6 +1,10 @@
 import LRU from 'lru-cache'
 import type { ImageCacheItem } from './types'
 
-export const cache = new LRU<string, ImageCacheItem>({
+export const bufferCache = new LRU<string, ImageCacheItem>({
+  max: 500,
+})
+
+export const contentCache = new LRU<string, string>({
   max: 500,
 })
diff --git a/src/pathToImage.ts b/src/pathToImage.ts
index 96e5100..50b1762 100644
--- a/src/pathToImage.ts
+++ b/src/pathToImage.ts
@@ -2,7 +2,7 @@ import { parse as urlParse } from 'node:url'
 import { match, pathToRegexp } from 'path-to-regexp'
 import type { Create, CreateText } from 'sharp'
 import sharp from 'sharp'
-import { cache } from './cache'
+import { bufferCache } from './cache'
 import { DEFAULT_PARAMS } from './constants'
 import type {
   ImageCacheItem,
@@ -22,8 +22,8 @@ export async function pathToImage(
   rules: string[],
   options: Required<ImagePlaceholderOptions>,
 ): Promise<ImageCacheItem | undefined> {
-  if (cache.has(url)) {
-    return cache.get(url)
+  if (bufferCache.has(url)) {
+    return bufferCache.get(url)
   }
   const { query: urlQuery, pathname } = urlParse(url, true)
 
@@ -77,7 +77,7 @@ export async function pathToImage(
     type: imgType,
     buffer: imgBuf,
   }
-  cache.set(url, result)
+  bufferCache.set(url, result)
   return result
 }
 
diff --git a/src/plugin.ts b/src/plugin.ts
index 89b9f75..32ad6ec 100644
--- a/src/plugin.ts
+++ b/src/plugin.ts
@@ -1,9 +1,10 @@
 import type { Plugin } from 'vite'
+import { contentCache } from './cache'
 import { DEFAULT_PREFIX } from './constants'
 import { generatePathRules } from './pathRules'
 import { pathToImage } from './pathToImage'
 import type { ImagePlaceholderOptions } from './types'
-import { getMimeType, logger } from './utils'
+import { getMimeType } from './utils'
 
 const parseOptions = (
   options: ImagePlaceholderOptions,
@@ -41,7 +42,7 @@ function placeholderServerPlugin(
       middlewares.use(async function (req, res, next) {
         const url = req.url!
         if (!url.startsWith(opts.prefix)) return next()
-        logger(url)
+        // logger(url)
 
         try {
           const image = await pathToImage(url, pathRules, opts)
@@ -65,6 +66,8 @@ function placeholderInjectPlugin(
   options: ImagePlaceholderOptions = {},
 ): Plugin {
   const opts = parseOptions(options)
+  const pathRules = generatePathRules(opts.prefix)
+  const RE_VIRTUAL = /^\0virtual:\s*/
   const moduleId = `virtual:${opts.prefix}`
   const resolveVirtualModuleId = `\0${moduleId}`
   return {
@@ -76,7 +79,17 @@ function placeholderInjectPlugin(
     },
     async load(id) {
       if (id.startsWith(resolveVirtualModuleId)) {
-        // const url = id.replace(resolveVirtualModuleId, '')
+        const url = id.replace(RE_VIRTUAL, '')
+        if (contentCache.has(url)) {
+          return `export default '${contentCache.get(url)!}'`
+        }
+        const image = await pathToImage(url, pathRules, opts)
+        if (image) {
+          const base64 = image.buffer.toString('base64')
+          const content = `data:${getMimeType(image.type)};base64,${base64}`
+          contentCache.set(url, content)
+          return `export default '${content}'`
+        }
       }
     },
   }