Skip to main content

HTML

Hook for transforming code in HTML

schema-version: v3
kind: plugin
metadata:
name: code-transformation-plugin
display-name: code-transformation-plugin
description: Code transformation example.
version: 1.0.0
spec:
hooks:
- type: code-transformation
engine-version: 0.2.0-beta
trigger: after-render
language: html
trans-pattern-path: trans-patterns/pattern.ts
source-path: src/code.ts

Supported Constructs in HTML

tag

Tags allow insertion, removal, and ellipsis operators, which means you can use any supported operator wherever a tag is valid.

The following example inserts a div tag as the first element inside the body tag. The pattern has file scope.

<<<< pattern-name: my_pattern; pattern-scope: file-scope; >>>>

<...>
<body>
+<<div id="header">
<h1>Welcome to My Website</h1>
</div>>+
<...>
</body>
<...>

The following example removes all div tags with no attributes, regardless of their internal content. The pattern has snippet scope.

<<<< pattern-name: my_pattern; pattern-scope: snippet-scope; >>>>

-<<div>
<...>
</div>>-

tagName

Tag names support ID match, insertion, and removal operators. This means you can use any supported operators instead of a tag name.

warning

Remember that insertion and removal operators must always occur in pairs when used in the context of a tag name. Otherwise, a tag could end up without a name or with more than one name.

warning

When using insertion and removal operators in the context of a tag name, make sure to use them in the closing tag. Otherwise, the opening and closing tags will have different names.

The following example removes all tags whose names start with app, regardless of their internal content, as long as they do not have any attributes. The pattern has snippet scope.

<<<< pattern-name: my_pattern; pattern-scope: snippet-scope; >>>>

-<<*<app.+>*>
<...>
<*<app.+>*>>-

If all my-tag tags lack attributes, regardless of their content, their name is changed to my-new-tag. The pattern has snippet scope.

<<<< pattern-name: my_pattern; pattern-scope: snippet-scope; >>>>

<-<my-tag>- +<my-new-tag>+>
<...>
</-<my-tag>- +<my-new-tag>+>

tagContent

Tag content supports insertion, removal, and ellipsis operators. This means you can use any of the supported operators nested within the content of a tag.

The following example inserts a br tag nested within all div tags, regardless of their internal content, as long as they do not have any attributes. The pattern has a snippet scope.

<<<< pattern-name: my_pattern; pattern-scope: snippet-scope; >>>>

<div>
<...>
+<<br/>>+
</div>

attribute

Tag attributes support insertion, removal, and ellipsis operators. You can use any supported operators wherever a tag attribute is valid.

The following example inserts the attribute class="text-align: center;" into all div tags, regardless of the tag's internal content or other attributes. The pattern has snippet scope.

<<<< pattern-name: my_pattern; pattern-scope: snippet-scope; >>>>

<div +<class="text-align: center;">+ <...>>
<...>
</div>

attributeValue

Attribute values support String match, insertion, and removal operators. You can use any supported operators wherever an attribute value is valid.

warning

Remember that insertion and removal operators must always occur in pairs when used in the context of an attribute value. Otherwise, an attribute could end up without a value or with more than one value.

The following example removes the id attribute from all div tags, regardless of the original attribute value (string match operator with regex .*), the tag's internal content, or other attributes. The pattern has snippet scope.

<<<< pattern-name: my_pattern; pattern-scope: snippet-scope; >>>>

<div <...> -<id=*<".*">*>- <...>>
<...>
</div>

The following example replaces the href attribute value of the first li with "#main", regardless of the attribute value (string match operator with regex .*), the tag's internal content, or other attributes. The pattern has file scope..

<<<< pattern-name: my_pattern; pattern-scope: file-scope; >>>>

<html>
<...>
<head>
<...>
<nav>
<...>
<ul>
<li><a href=-<*<".*">*>- +<"#main">+> <...> </a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<...>
</nav>
<...>
</head>
<...>
</html>

attributeName

Attribute names support ID match, insertion, and removal operators. You can use any supported operators wherever an attribute name is valid.

warning

Remember that insertion and removal operators must always occur in pairs when used in the context of an attribute name. Otherwise, an attribute could end up without a name or with more than one name.

The following example replaces the id attribute name with class in all section tags, regardless of the attribute value (string match operator with regex .*), the tag's internal content, or other attributes. The pattern has snippet scope.

<<<< pattern-name: my_pattern; pattern-scope: snippet-scope; >>>>

<section <...> -<id>- +<class>+ = *<".*">* <...>>
<...>
</section>