📦 Pod-Level Asset Bundling

This pod demonstrates the pod-level asset bundling feature that allows any pod to include an assets/ directory with files that are automatically shipped as static assets and exposed via generated manifests.

How It Works

1. Asset Convention

Any pod can include an assets/ directory. All files inside are automatically:

• Included in the build output
• Processed through Vite's asset pipeline
• Given content-based hashed URLs for optimal browser caching

2. Auto-Generated Manifests

Each pod with assets gets a manifest that is handled in-memory by the build system and exposed via a virtual module:

export const manifest = {
  "hello.txt": "/assets/pod-level-asset-bundling/hello-lREilM-e.txt",
  "test.svg": "/assets/pod-level-asset-bundling/test-V1kcGTy_.svg"
};

3. Component Usage

Pod components can import their manifest via virtual import and use assets:

import { manifest } from "virtual:assets/pod-level-asset-bundling";

export default class extends HTMLElement {
  connectedCallback() {
    const iconUrl = manifest["icon.svg"];
    this.innerHTML = `<img src="${iconUrl}" alt="Pod icon" />`;
  }
}

Note: The virtual import path uses the pod's namespace. For a pod at content/my-pod/, use virtual:assets/my-pod (the content root has an empty path prefix).

Technical Implementation

This feature uses a custom Vite plugin (vitePodAssetsPlugin) that:

1. Scans all pods for assets/ directories during build
2. Stores manifests in memory and exposes them via virtual modules
3. Processes assets through Vite for content-based hashing
4. Post-processes all JS bundles to replace placeholder URLs with final hashed URLs

File Structure

content/my-pod/
├── assets/              # ← Asset files
│   ├── icon.svg
│   └── data.json
├── component.js        # ← Can import virtual:assets/my-pod
└── pod.toml           # ← component = "component.js"

Benefits

• Content-based hashing: URLs change when content changes, enabling long browser cache lifetimes
• Pod scoping: Assets are organized by pod namespace
• Framework integration: Works seamlessly with FUNGAL's web component architecture
• Build-time optimization: Assets are processed through Vite's optimization pipeline

Demo

See JavaScript Console. You should see something like this:

Pod-level asset manifest: {
    "hello.txt": "/assets/pod-level-asset-bundling/hello.txt",
    "test.svg": "/assets/pod-level-asset-bundling/test.svg"
}

*This pod serves as both documentation and a live demonstration of the feature.