@aippy/vite-plugins

Vite plugins collection for Aippy projects, providing asset management and component tagging capabilities.

Installation

``bash
pnpm add -D @aippy/vite-plugins
`

Plugins

$3

Generates constant references for static assets and replaces hardcoded paths.

`typescript
import { assetConstantsPlugin } from '@aippy/vite-plugins/asset-constants'

export default defineConfig({
plugins: [
assetConstantsPlugin({
extensions: ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.mp4', '.mp3'],
srcDir: 'src',
outputFile: 'src/config/assets.json',
devMode: true
})
]
})
`

$3

Scans build output and generates preload meta tags for assets.

`typescript
import { aippyPreloadPlugin } from '@aippy/vite-plugins/aippy-preload'

export default defineConfig({
plugins: [
aippyPreloadPlugin({
extensions: ['.js', '.css', '.png', '.jpg', '.svg'],
outDir: 'dist',
includeSubdirs: true
})
]
})
`

$3

Tags React components with metadata for development tools and inspector.

`typescript
import { aippyTaggerPlugin } from '@aippy/vite-plugins/aippy-tagger'

export default defineConfig({
plugins: [
aippyTaggerPlugin()
]
})
`

$3

`typescript
import { assetConstantsPlugin, aippyPreloadPlugin, aippyTaggerPlugin } from '@aippy/vite-plugins'
`

$3

The package also exports utility functions that can be used independently:

`typescript
import {
processAssetURL,
isValidAsset,
generateConstantName,
extractAssetsFromContent,
findProjectRoot
} from '@aippy/vite-plugins/utils'

// Process asset URLs
const processedUrl = processAssetURL('./image.png') // '/image.png'

// Validate asset paths
const isValid = isValidAsset('./image.png') // true

// Generate constant names
const constantName = generateConstantName('/image.png') // 'IMAGE_ABCD'

// Extract assets from content
const assets = extractAssetsFromContent(htmlContent, 'html', ['.png', '.jpg'])

// Find project root
const projectRoot = findProjectRoot() // '/path/to/project'
``

License

UNLICENSED - Aippy Team