install dev
npm i -D @sika7/silver-html @types/parse5
import * as parse5 from "parse5";
import { SilverHtmlPlugin } from "@sika7/silver-html";
export function yourPluginName(opts: any): SilverHtmlPlugin {
return {
pluginName: 'your plugin name';
// The following required processing
CommentNode: []; // etc...
TextNode: [];
ElementNode: [{
name: "this function name",
function: (e: parse5.Element) => {
// const { hoge, fuga } = opts <- use your opts
return e
},
}];
}
}
import { silverHtml, SilverHtmlConfig } from "@sika7/silver-html";
import { yourPluginName } from "./path/to";
const silverHtmlConfig: SilverHtmlConfig = {};
const yourOpts = {}
console.log(silverHtml('html', silverHtmlConfig, [
yourPluginName(yourOpts),
]))
const plugin = {
pluginName: "plugin name",
ElementNode: [
{
name: "change tag",
function: (e, level) => {
if (level === 1 && e.tagName === 'dev') e.tagName = "main";
return e;
},
},
],
}
# import
<div><div>test</div><ul><li>list1</li><li>list2</li></ul></div>
# export
<main><div>test</div><ul><li>list1</li><li>list2</li></ul></main>
const plugin = {
pluginName: "hoge",
ElementNode: [
{
name: "move tag for li",
function: (e, level) => {
if (e.tagName === 'li') return;
return e;
},
},
],
}
# import
<div><div>test</div><ul><li>list1</li><li>list2</li></ul></div>
# export
<div><div>test</div><ul></ul></div>
const plugin = {
pluginName: "hoge",
ElementNode: [
{
name: "add attrs for level 1",
function: (node, level) => {
if (level === 1) {
node.attrs = [
{ name: "class", value: "test" },
{ name: "id", value: "hoge" },
];
}
return node;
},
},
],
}
# import
<div><div>test</div><ul><li>list1</li><li>list2</li></ul></div>
# export
<div class="test" id="hoge"><div>test</div><ul><li>list1</li><li>list2</li></ul></div>
const plugin = {
pluginName: "hoge",
ElementNode: [
{
name: "change attrs for class 'test'.",
function: (node, level) => {
node.attrs = node.attrs.map(attr => {
if (attr.name === 'class' && attr.value === 'test') attr.value = 'hoge'
return attr
})
return node;
},
},
],
}
# import
<div class="test" id="hoge"><div>test</div><ul><li>list1</li><li>list2</li></ul></div>
# export
<div class="hoge" id="hoge"><div>test</div><ul><li>list1</li><li>list2</li></ul></div>
const plugin = {
pluginName: "",
TextNode: [
{
name: "move indention",
function: (text) => {
text.value = text.value.replace(/\r?\n/g, "");
return text;
},
},
],
}
# import
<div>
<div>test</div>
</div>
# export
<div><div>test</div></div>
const plugin = {
pluginName: "",
TextNode: [
{
name: "remove text",
function: (text) => {
if (text.value === "list1") return null;
return text;
},
},
],
}
# import
<div>
<div>test</div>
<ul>
<li>list1</li>
<li>list2</li>
</ul>
</div>
# export
<div>
<div>test</div>
<ul>
<li></li>
<li>list2</li>
</ul>
</div>
const plugin = {
pluginName: "plugin name",
CommentNode: [
{
name: "remove comment",
function: () => {
return null;
},
},
],
}
# import
<div>
<div>test</div>
<!-- <div>test</div> -->
<ul>
<li>list1</li>
<li>list2</li>
</ul>
</div>
# export
<div>
<div>test</div>
<ul>
<li>list1</li>
<li>list2</li>
</ul>
</div>