Add default asset loaders to esbuild config

README.md

@@ -1176,6 +1176,44 @@ const esbuildSettingsOverride = async (esbuildSettings: BuildOptions): Promise<B
 export default esbuildSettingsOverride
 ```
 
+DOMStack passes its default `BuildOptions` into this function, including Preact JSX defaults and asset loader defaults for common images, icons, and fonts. You can return a shallow copy that modifies those defaults when you only need a small change. For example, this keeps DOMStack's default asset loaders and adds a custom loader for `.wasm` files:
+
+```typescript
+import type { BuildOptions } from '@domstack/static'
+
+const esbuildSettingsOverride = async (esbuildSettings: BuildOptions): Promise<BuildOptions> => {
+  return {
+    ...esbuildSettings,
+    loader: {
+      ...esbuildSettings.loader,
+      '.wasm': 'file',
+    },
+  }
+}
+
+export default esbuildSettingsOverride
+```
+
+If you want full control, reset DOMStack's convenience defaults back to esbuild's defaults while preserving the required DOMStack build wiring (`entryPoints`, `outdir`, `outbase`, etc.). From there, define only the settings you want:
+
+```typescript
+import type { BuildOptions } from '@domstack/static'
+
+const esbuildSettingsOverride = async (esbuildSettings: BuildOptions): Promise<BuildOptions> => {
+  return {
+    ...esbuildSettings,
+    jsx: undefined,
+    jsxImportSource: undefined,
+    loader: {
+      '.png': 'file',
+      '.svg': 'text',
+    },
+  }
+}
+
+export default esbuildSettingsOverride
+```
+
 Important esbuild settings you may want to set here are:
 
 - [target](https://esbuild.github.io/api/#target) - Set the `target` to make `esbuild` run a few small transforms on your CSS and JS code.

lib/build-esbuild/index.js

@@ -204,7 +204,22 @@ async function assembleBuildOpts (src, dest, siteData, opts, modeOpts = {}) {
     entryNames: watch ? '[dir]/[name]' : '[dir]/[name]-[hash]',
     chunkNames: 'chunks/[ext]/[name]-[hash]',
     jsx: 'automatic',
-    jsxImportSource: 'preact'
+    jsxImportSource: 'preact',
+    loader: {
+      '.png': 'dataurl',
+      '.jpg': 'dataurl',
+      '.jpeg': 'dataurl',
+      '.gif': 'dataurl',
+      '.svg': 'dataurl',
+      '.webp': 'dataurl',
+      '.avif': 'dataurl',
+      '.ico': 'file',
+      '.woff': 'file',
+      '.woff2': 'file',
+      '.ttf': 'file',
+      '.eot': 'file',
+      '.otf': 'file',
+    }
   }
 
   const esbuildSettingsExtends = siteData.esbuildSettings

test-cases/general-features/index.test.js

@@ -119,6 +119,20 @@ test.describe('general-features', () => {
       assert.fail('Failed to verify global.data.js output in template vars: ' + error.message)
     }
 
+    // Verify that CSS asset loaders work: images inline as data URLs, fonts are emitted as files
+    const globalCssFile = files.find(f => f.relname.match(/global-([A-Z0-9])\w+\.css$/))
+    if (globalCssFile) {
+      const cssContent = await readFile(path.join(dest, globalCssFile.relname), 'utf8')
+      assert.ok(
+        cssContent.includes('data:image/gif;base64,'),
+        'global CSS inlines GIF image as a base64 data URL'
+      )
+    } else {
+      assert.fail('Could not find global CSS output file to verify asset loaders')
+    }
+
+    const woff2Files = files.filter(f => f.relname.endsWith('.woff2'))
+    assert.ok(woff2Files.length > 0, 'woff2 font file was emitted to the output directory')
     // Special test for global.data.js blogPostsHtml
     const indexPath = path.join(dest, 'index.html')
     try {

test-cases/general-features/src/globals/global.css

@@ -1,2 +1,5 @@
 @import 'mine.css/dist/mine.css';
 @import 'mine.css/dist/layout.css';
+
+.test-asset-icon { background-image: url('./test-icon.gif'); }
+@font-face { font-family: 'TestFont'; src: url('./test-font.woff2'); }

test-cases/general-features/src/globals/test-font.woff2

@@ -0,0 +1 @@
+wOF2placeholder