fix: inline [('"] to ("

pengzhanbo · Jan 10, 2023 · a0a56c3 · a0a56c3
1 parent b0d2a22
commit a0a56c3
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 31 deletions.
diff --git a/example/vite.config.ts b/example/vite.config.ts
@@ -2,5 +2,5 @@ import { defineConfig } from 'vite'
 import imagePlaceholder from '../src/index'
 
 export default defineConfig(() => ({
-  plugins: [imagePlaceholder({ inline: false })],
+  plugins: [imagePlaceholder({ inline: true })],
 }))
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
   "scripts": {
     "build": "tsup",
     "dev": "DEBUG=vite:plugin-image-placeholder vite example --config ./example/vite.config.ts",
+    "build:example": "DEBUG=vite:plugin-image-placeholder vite build example --config ./example/vite.config.ts",
     "docs:build": "vitepress build docs",
     "docs:dev": "vitepress dev docs",
     "docs:preview": "vitepress preview docs",

diff --git a/src/pathToImage.ts b/src/pathToImage.ts
@@ -71,19 +71,23 @@ export async function pathToImage(
     rgba: true,
   }
 
-  const imgBuf = await createImage({
-    type: imgType,
-    create: createOptions,
-    text: textOptions,
-    quality: options.quality,
-    compressionLevel: options.compressionLevel,
-  })
-  const result: ImageCacheItem = {
-    type: imgType,
-    buffer: imgBuf,
+  try {
+    const imgBuf = await createImage({
+      type: imgType,
+      create: createOptions,
+      text: textOptions,
+      quality: options.quality,
+      compressionLevel: options.compressionLevel,
+    })
+    const result: ImageCacheItem = {
+      type: imgType,
+      buffer: imgBuf,
+    }
+    bufferCache.set(url, result)
+    return result
+  } catch (e) {
+    console.error(e)
   }
-  bufferCache.set(url, result)
-  return result
 }
 
 export async function createImage({

diff --git a/src/plugin.ts b/src/plugin.ts
@@ -18,7 +18,7 @@ const parseOptions = (
       textColor: '#333',
       width: 300,
       type: 'png',
-      quality: 100,
+      quality: 80,
       compressionLevel: 6,
       inline: false,
     } as ImagePlaceholderOptions,
@@ -49,19 +49,13 @@ function placeholderServerPlugin(
         const url = req.url!
         if (!url.startsWith(opts.prefix)) return next()
 
-        try {
-          const image = await pathToImage(url, pathRules, opts)
+        const image = await pathToImage(url, pathRules, opts)
 
-          if (!image) return next()
+        if (!image) return next()
 
-          res.setHeader('Accept-Ranges', 'bytes')
-          res.setHeader('Content-Type', getMimeType(image.type))
-          res.end(image.buffer)
-          return
-        } catch (e) {
-          console.error(e)
-        }
-        next()
+        res.setHeader('Accept-Ranges', 'bytes')
+        res.setHeader('Content-Type', getMimeType(image.type))
+        res.end(image.buffer)
       })
     },
   }
@@ -139,19 +133,24 @@ function placeholderInlinePlugin(
       let match
       // eslint-disable-next-line no-cond-assign
       while ((match = RE_PATTERN.exec(code))) {
-        const url = match[1] || match[2] || match[3] || match[4]
+        const url = match[4] || match[3] || match[2] || match[1]
+        const dynamic = match[0].includes('(') ? ['("', '")'] : ['"', '"']
         const start = match.index
         const end = start + match[0].length
         if (contentCache.has(url)) {
           hasReplaced = true
-          s.update(start, end, `"${contentCache.get(url)}"`)
+          s.update(
+            start,
+            end,
+            `${dynamic[0]}${contentCache.get(url)}${dynamic[1]}`,
+          )
         } else {
           const image = await pathToImage(url, pathRules, opts)
           if (image) {
             hasReplaced = true
             const content = bufferToBase64(image)
             contentCache.set(url, content)
-            s.update(start, end, `"${content}"`)
+            s.update(start, end, `${dynamic[0]}${content}${dynamic[1]}`)
           }
         }
       }
@@ -169,17 +168,22 @@ function placeholderInlinePlugin(
       let match
       // eslint-disable-next-line no-cond-assign
       while ((match = RE_PATTERN.exec(html))) {
-        const url = match[1] || match[2] || match[3] || match[4]
+        const url = match[4] || match[3] || match[2] || match[1]
+        const dynamic = match[0].includes('(') ? ['("', '")'] : ['"', '"']
         const start = match.index
         const end = start + match[0].length
         if (contentCache.has(url)) {
-          s.update(start, end, `"${contentCache.get(url)}"`)
+          s.update(
+            start,
+            end,
+            `${dynamic[0]}${contentCache.get(url)}${dynamic[1]}`,
+          )
         } else {
           const image = await pathToImage(url, pathRules, opts)
           if (image) {
             const content = bufferToBase64(image)
             contentCache.set(url, content)
-            s.update(start, end, `"${content}"`)
+            s.update(start, end, `${dynamic[0]}${content}${dynamic[1]}`)
           }
         }
       }