vite-plugin-template-parser
Change the template in the .vue file (add/change/delete) =>(tags/attributes)
use
as a tool function
import { generate, HTMLparser } from " vite-plugin-template-parser";
import $AST from "trans-ast";
let str = `<template> <h1>{{ msg }}</h1>
<div anime="fgp">xx</div>
</template>`;
const node = $AST.parseAST(str);
new HTMLparser({
node(info) {},//node operation
text(info){}//text operation
button(info){}//specific node operation
}).transform(node);
console.log(generate(node));//output stringinfo variable:
{
node, //self node
parent, //parent node
i, //The position (number) of this node in the sibling
brother; //Sibling nodes (without selfNode)
find; //Find a specific grandparent node
}as a vite plugin
import { parser } from "vite-template-parser";
export default defineConfig({
plugins: [
vue(),
parser({
node(info, exclude) {}, //All files in node_modules are ignored
}),
],
});There are two types of node, Node and text
types
export interface nodeType {
type: number;
tag: string;
attrslist: Array<{ name: string; value: string }>;
attrsMap: attrsMap;
children: Array<nodeType | textType>;
}
interface attrsMap {
[key: string]: string;
}
export interface textType {
type: number;
text: string;
expression: string;
}