Comments (3)
@sionzee Thanks for you quick and kind reply. It is, of course, your choice to decide the direction where you go with the plugin. Mine was just as suggestion, based on the need I have, so it is perfectly fine. Actually, after doing a bit more digging (and found nothing suitable), I took the road you suggested and wrote my own plugin. It is using 'node-html-parser', though as a more popular library. Although it behaves a bit oddly, it does the job and I have it up and running already. Again, thanks and keep up the good work.
from rollup-plugin-inline-svg.
Note the 'svg-inline' attribute which can serve for a (configurable) tag if the SVG should be inlined or not.
from rollup-plugin-inline-svg.
Hi @lllopo, thank you for the feature request. The purpose of this plugin was to defacto copy the svg's content into a file where it is referenced. Meanwhile, you ask to parse HTML files and replace the match with a different value.
That is a fundamental change to the concept of this plugin. Therefore the solution for your issue would be to use html-to-ast and traverse the HTML directly.
// Rollup plugin
export default function CustomSvgInlinerPlugin() {
return {
name: 'CustomSvgInlinerPlugin',
transform(code: string, id: string) {
if(!id.endsWith('.html')) return
return {code: transformHtml(html), map: {mappings: ''}};
},
};
}
// Implementation
import fs from 'node:fs'
import { parse, stringify } from 'html-to-ast';
export type AstNode = ReturnType<typeof parse>[number]
const traverse = (node: AstNode, callbackFn: (node: AstNode) => void): void {
if(callbackFn(node) && node.children) node.children.forEach(child => this.traverse(child, callbackFn))
}
export const transformHtml = (html: string): string => {
const asts = parse(code.trim()) as AstNode[]
// Let's hope you have one main root. Otherwise, you will need to wrap this into asts.forEach
const ast = asts.pop()!
traverse(ast, (node: AstNode) => {
if(node.name === 'img' && node.attrs['svg-inline'] !== undefined) {
const svgFile = fs.readFileSync(node.attrs.src) // You will probably need to do something like path.resolve(__dirname, node.attrs.src)
const svgAst = parse(svgFile)[0] // Again, hope it has just 1 root element <svg>...</svg>
// Remap the img to svg
node.children = svgAst.children;
node.name = 'svg'
node.attrs = {...svgAst.attrs, ...node.attrs}
return false; // we don't want to iterate the children because we just replaced them
}
return true
})
return stringify([ast] as any[])
}
I was not testing it, but the principle is straightforward, and I hope it will help you build your desired feature. To me, for these specific features is always better to write a custom solution. You will have complete control over the feature and can do whatever you want.
Please do not be offended when I close this issue, I will be happy to discuss it more if you need any help. I wish you happy coding
from rollup-plugin-inline-svg.
Related Issues (9)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rollup-plugin-inline-svg.