Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
svelte-preprocess-import-assets
Advanced tools
Import assets directly in the markup.
Convert this:
<h1>Look at this image</h1>
<img src="./assets/cool-image.png" alt="cool image" />
Into this:
<script>
import ___ASSET___0 from './assets/cool-image.png'
</script>
<h1>Look at this image</h1>
<img src={___ASSET___0} alt="cool image" />
Install with your package manager:
npm install svelte-preprocess-import-assets
Include the preprocessor in your bundler's Svelte plugin preprocess
option:
import importAssets from 'svelte-preprocess-import-assets'
svelte({ preprocess: [importAssets()] })
// or in svelte.config.js
const config = {
preprocess: [importAssets()],
// ... other svelte options
}
Here is more information on how to integrate it with your bundler.
The importAssets()
function receives an optional options object for its first parameter. The object may contain these properties:
Type: AssetSource[] | ((defaultSources: AssetSource[]) => AssetSource[])
interface AssetSource {
tag: string
srcAttributes?: string[]
srcsetAttributes?: string[]
filter?: (metadata: FilterMetadata) => boolean
}
interface FilterMetadata {
tag: string
attribute: string
value: string
attributes: Record<string, string>
}
Default: See DEFAULT_SOURCES
in src/constants.ts
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 (except icon-uri
). Component name as tag
is also supported.
{
sources: (defaultSources) => {
return [
...defaultSources,
// Also scan `data-src` and `data-srcset` of an img tag
{
tag: 'img',
srcAttributes: ['data-src'],
srcsetAttributes: ['data-srcset'],
},
]
},
}
Type: string
Default: ___ASSET___
The string to be prefixed for asset import names, e.g. ___ASSET___0
and ___ASSET___1
.
Type: boolean
Default: false
Whether a URL with http/https protocol should be converted to an import.
Type: (url: string) => boolean
Whether a URL should be converted into an import.
{
// Include URLs with specific extensions only
urlFilter: (url) => /\.(png|jpg|gif|webp)$/.test(url),
}
<!-- svelte-preprocess-import-assets-ignore -->
<img src="./assets/cool-image.png" alt="cool image" />
MIT
0.2.2 - 2022-10-11
FAQs
Import assets in markup
The npm package svelte-preprocess-import-assets receives a total of 1,968 weekly downloads. As such, svelte-preprocess-import-assets popularity was classified as popular.
We found that svelte-preprocess-import-assets demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.