feat: build library new option - emitAssets

packages/playground/lib/__tests__/lib.spec.ts

@@ -1,4 +1,4 @@
-import { isBuild, findAssetFile, testDir } from 'testUtils'
+import { isBuild, findAssetFile, testDir, getBg } from 'testUtils'
 import path from 'path'
 import fs from 'fs'
 
@@ -11,6 +11,16 @@ if (isBuild) {
     expect(await page.textContent('.umd')).toBe('It works')
   })
 
+  test('lib: emitAssets:undefined|false = is inlined', async () => {
+    const match = `data:image/png;base64`
+    expect(await getBg('.emitAssets-default')).toMatch(match)
+  })
+
+  test('lib: emitAssets:true = is emitted', async () => {
+    const match = /\/assets\/asset\.\w{8}\.png/
+    expect(await getBg('.emitAssets-true')).toMatch(match)
+  })
+
   test('Library mode does not include `preload`', async () => {
     expect(await page.textContent('.dynamic-import-message')).toBe('hello vite')
     const code = fs.readFileSync(

packages/playground/lib/__tests__/serve.js

@@ -58,6 +58,12 @@ exports.serve = async function serve(root, isBuildTest) {
       configFile: path.resolve(__dirname, '../vite.dyimport.config.js')
     })
 
+    await build({
+      root,
+      logLevel: 'silent',
+      configFile: path.resolve(__dirname, '../vite.emitAssets.config.js')
+    })
+
     // start static file server
     const serve = sirv(path.resolve(root, 'dist'))
     const httpServer = http.createServer((req, res) => {

packages/playground/lib/index.dist.html

@@ -3,6 +3,19 @@
 <div class="umd"></div>
 <div class="dynamic-import-message"></div>
 
+<div
+  class="emitAssets-default"
+  style="
+    background-size: contain;
+    background-repeat: no-repeat;
+    padding-left: 20px;
+  "
+>
+  <-background-image should be inline unless emitAssets:true is set
+</div>
+<div class="emitAssets-true"></div>
+<script src="./lib2/emit-assets.js"></script>
+
 <script type="module">
   import myLib from './my-lib-custom-filename.es.js'
 

packages/playground/lib/src/emitAssets.js

@@ -0,0 +1,4 @@
+import asset from '../../assets/nested/asset.png'
+document.querySelector(
+  '.emitAssets-true'
+).style.backgroundImage = `url(${asset})`

packages/playground/lib/src/main.js

@@ -1,3 +1,9 @@
 export default function myLib(sel) {
   document.querySelector(sel).textContent = 'It works'
+  document.querySelector(
+    '.emitAssets-default'
+  ).style.backgroundImage = `url(${new URL(
+    `../../assets/nested/asset.png`,
+    import.meta.url
+  )})`
 }

packages/playground/lib/vite.emitAssets.config.js

@@ -0,0 +1,19 @@
+const fs = require('fs')
+const path = require('path')
+
+/**
+ * @type {import('vite').UserConfig}
+ */
+module.exports = {
+  build: {
+    minify: false,
+    lib: {
+      entry: path.resolve(__dirname, 'src/emitAssets.js'),
+      formats: ['es'],
+      name: 'emitAssets',
+      fileName: () => `emit-assets.js`,
+      emitAssets: true
+    },
+    outDir: 'dist/lib2'
+  }
+}

packages/vite/src/node/build.ts

@@ -212,6 +212,7 @@ export interface LibraryOptions {
   name?: string
   formats?: LibraryFormats[]
   fileName?: string | ((format: ModuleFormat) => string)
+  emitAssets?: boolean
 }
 
 export type LibraryFormats = 'es' | 'cjs' | 'umd' | 'iife'

packages/vite/src/node/plugins/asset.ts

@@ -288,7 +288,7 @@ async function fileToBuiltUrl(
 
   let url: string
   if (
-    config.build.lib ||
+    (config.build.lib && !config.build.lib.emitAssets) ||
     (!file.endsWith('.svg') &&
       content.length < Number(config.build.assetsInlineLimit))
   ) {