Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bluwy/svelte-preprocess-import-assets
Import assets directly in your markup
https://github.com/bluwy/svelte-preprocess-import-assets
assets preprocess svelte
Last synced: 2 days ago
JSON representation
Import assets directly in your markup
- Host: GitHub
- URL: https://github.com/bluwy/svelte-preprocess-import-assets
- Owner: bluwy
- License: mit
- Created: 2021-04-27T06:26:18.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-08-19T04:48:45.000Z (5 months ago)
- Last Synced: 2025-01-15T12:55:17.467Z (9 days ago)
- Topics: assets, preprocess, svelte
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/svelte-preprocess-import-assets
- Size: 133 KB
- Stars: 96
- Watchers: 2
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-preprocess-import-assets
Import assets directly in the markup. Supports Svelte 3, 4, and 5.
> NOTE: Svelte 5 support is experimental and may break between versions.
**Convert this:**
```svelte
Look at this image
```
**Into this:**
```svelte
import ___ASSET___0 from './assets/cool-image.png'
Look at this image
```
## Usage
Install with your package manager:
```bash
npm install --save-dev svelte-preprocess-import-assets
```
Include the preprocessor in your bundler's Svelte plugin `preprocess` option:
```js
import { importAssets } from 'svelte-preprocess-import-assets'
svelte({ preprocess: [importAssets()] })
// or in svelte.config.js
export default {
preprocess: [importAssets()],
// ... other svelte options
}
```
## API
The `importAssets()` function receives an optional options object for its first parameter. The object may contain these properties:
### sources
- **Type:** `AssetSource[] | ((defaultSources: AssetSource[]) => AssetSource[])`
```ts
interface AssetSource {
tag: string
srcAttributes?: string[]
srcsetAttributes?: string[]
filter?: (metadata: FilterMetadata) => boolean
}
interface FilterMetadata {
tag: string
attribute: string
value: string
attributes: Record
}
```
- **Default:** See `DEFAULT_SOURCES` in [src/constants.js](./src/constants.js)
These are the sources to look for when scanning for imports. You can provide an entirely different list of sources, or declare a function to access the default sources and augment it. The supported tags and attributes are based on [html-loader](https://github.com/webpack-contrib/html-loader#sources) (except `icon-uri`). Component name as `tag` is also supported.
```js
{
sources: (defaultSources) => {
return [
...defaultSources,
// Also scan `data-src` and `data-srcset` of an img tag
{
tag: 'img',
srcAttributes: ['data-src'],
srcsetAttributes: ['data-srcset'],
},
]
},
}
```
### importPrefix
- **Type:** `string`
- **Default:** `___ASSET___`
The string to be prefixed for asset import names, e.g. `___ASSET___0` and `___ASSET___1`.
### http
- **Type:** `boolean`
- **Default:** `false`
Whether a URL with http/https protocol should be converted to an import.
### urlFilter
- **Type:** `(url: string) => boolean`
Whether a URL should be converted into an import.
```js
{
// Include URLs with specific extensions only
urlFilter: (url) => /\.(png|jpg|gif|webp)$/.test(url),
}
```
## Recipes
### Ignore an element
```svelte
```
## Attributions
- [svelte-assets-preprocessor](https://github.com/pchynoweth/svelte-assets-preprocessor): Initial motivation to reduce dependencies.
## Sponsors
## License
MIT