HTML
Hook para transformar código em HTML
schema-version: v4
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.html
source-path: src/code.html
Construções suportadas no HTML
tag
As tags têm suporte aos operadores de inserção, remoção e reticências. Isso significa que, em qualquer local em que seja válida a existência de uma tag, é possível utilizar qualquer um dos operadores suportados.
O exemplo a seguir insere uma tag div como primeiro elemento dentro da tag body. O padrão tem escopo de arquivo.
- Código Original
- Padrão de transformação
- Código Transformado
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="content">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<div id="footer">
<p>Contact us at contact@example.com</p>
</div>
</body>
</html>
<<<< pattern-name: my_pattern; pattern-scope: file-scope; >>>>
<...>
<body>
+<<div id="header">
<h1>Welcome to My Website</h1>
</div>>+
<...>
</body>
<...>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="header">
<h1>Welcome to My Website</h1>
</div>
<span><p>This is a paragraph.</p></span>
<p>This is another paragraph.</p>
<div id="footer">
<p>Contact us at contact@example.com</p>
</div>
</body>
</html>
O exemplo a seguir remove todas as tags div, desde que não possuam nenhum atributo, independentemente do conteúdo interno delas. O padrão tem escopo de snippet.
- Código Original
- Padrão de transformação
- Código Transformado
<!DOCTYPE html>
<html lang="en">
<body>
<div>
<h1>Welcome to My Website</h1>
</div>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<div>
<p>Contact us at contact@example.com</p>
</div>
</body>
</html>
<<<< pattern-name: my_pattern; pattern-scope: snippet-scope; >>>>
-<<div>
<...>
</div>>-
<!DOCTYPE html>
<html lang="en">
<body>
</body>
</html>
tagName
Os nomes de tag têm suporte aos operadores de ID match, inserção e remoção. Isso significa que, no lugar do nome de uma tag, é possível utilizar qualquer um dos operadores suportados.
Note que os operadores de inserção e remoção devem sempre ocorrer em par quando estiverem no contexto de uma tag name, ou seja, sempre que houver uma remoção deve haver uma inserção de tag name. Do contrário, uma tag poderia ficar sem nome ou com mais de um nome.
Quando utilizar os operadores de inserção e remoção no contexto de uma tag name, lembre-se de também utilizá-los no fechamento da tag, do contrário a abertura e o fechamento ficarão com nomes diferentes.
O exemplo a seguir remove todas as tags cujos nomes se iniciam com app, desde que não possuam nenhum atributo, independentemente do conteúdo interno delas. O padrão tem escopo de snippet.
- Código Original
- Padrão de transformação
- Código Transformado
<!DOCTYPE html>
<html lang="en">
<body>
<app-header>
Welcome to My Website
</app-header>
<div id="content">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<app-footer id="footer">
<p>Contact us at contact@example.com</p>
</app-footer>
</body>
</html>
<<<< pattern-name: my_pattern; pattern-scope: snippet-scope; >>>>
-<*<<app.+>*>
<...>
<*<app.+>*>>-
<!DOCTYPE html>
<html lang="en">
<body>
<div id="content">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
O exemplo a seguir troca o nome de todas as tags de my-tag para my-new-tag, desde que não possuam nenhum atributo, independentemente do conteúdo interno delas. O padrão tem escopo de snippet.
- Código Original
- Padrão de transformação
- Código Transformado
<!DOCTYPE html>
<html lang="en">
<body>
<my-tag> Content 1 </my-tag>
<my-tag> Content 2 </my-tag>
<my-tag> Content 3 </my-tag>
<my-tag attribute="attr"> Content 4 </my-tag>
</body>
</html>
<<<< pattern-name: my_pattern; pattern-scope: snippet-scope; >>>>
<-<my-tag>- +<my-new-tag>+>
<...>
</-<my-tag>- +<my-new-tag>+>
<!DOCTYPE html>
<html lang="en">
<body>
<my-new-tag> Content 1 </my-new-tag>
<my-new-tag> Content 2 </my-new-tag>
<my-new-tag> Content 3 </my-new-tag>
<my-tag attribute="attr"> Content 4 </my-tag>
</body>
</html>
tagContent
O conteúdo das tags tem suporte aos operadores de inserção, remoção e reticências. Isso significa que é possível utilizar qualquer um dos operadores suportados aninhados no conteúdo de uma tag.
O exemplo a seguir insere uma tag br aninhada a todas as tags div, desde que não possuam nenhum atributo, independentemente do conteúdo interno delas. O padrão tem escopo de snippet.
- Código Original
- Padrão de transformação
- Código Transformado
<!DOCTYPE html>
<html lang="en">
<body>
<div id="header">
<h1>Welcome to My Website</h1>
</div>
<div id="content">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<div id="footer">
<p>Contact us at contact@example.com</p>
</div>
</body>
</html>
<<<< pattern-name: my_pattern; pattern-scope: snippet-scope; >>>>
<div>
<...>
+<<br/>>+
</div>
<!DOCTYPE html>
<html lang="en">
<body>
<div id="header">
<h1>Welcome to My Website</h1>
<br/>
</div>
<div id="content">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<br/>
</div>
<div id="footer">
<p>Contact us at contact@example.com</p>
<br/>
</div>
</body>
</html>
attribute
Os atributos de tags têm suporte aos operadores de inserção, remoção e reticências. Isso significa que, em qualquer local em que seja válida a existência de um atributo de tag, é possível utilizar qualquer um dos operadores suportados.
O exemplo a seguir insere o atributo class="text-align: center;" em todas as tags div, independentemente do conteúdo interno da tag ou dos demais atributos que a tag possa ter. O padrão tem escopo de snippet.
- Código Original
- Padrão de transformação
- Código Transformado
<!DOCTYPE html>
<html lang="en">
<body>
<div id="header">
<h1>Welcome to My Website</h1>
</div>
<div id="content">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<div id="footer">
<p>Contact us at contact@example.com</p>
</div>
</body>
</html>
<<<< pattern-name: my_pattern; pattern-scope: snippet-scope; >>>>
<div +<class="text-align: center;">+ <...>>
<...>
</div>
<!DOCTYPE html>
<html lang="en">
<body>
<div class="text-align: center;" id="header">
<h1>Welcome to My Website</h1>
</div>
<div class="text-align: center;" id="content">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<div class="text-align: center;" id="footer">
<p>Contact us at contact@example.com</p>
</div>
</body>
</html>
attributeValue
Os valores dos atributos têm suporte aos operadores de String match, inserção e remoção. Isso significa que, em qualquer local em que seja válida a existência de um valor de atributo, é possível utilizar qualquer um dos operadores suportados.
Note que os operadores de inserção e remoção devem sempre ocorrer em par quando estiverem no contexto de um attribute value, ou seja, sempre que houver uma remoção deve haver uma inserção de attribute value. Do contrário, um atributo poderia ficar sem valor ou com mais de um valor.
O exemplo a seguir remove o atributo id em todas as tags div, independentemente do valor original do atributo (operador de string match com regex .*), do conteúdo interno da tag ou dos demais atributos que a tag possa ter. O padrão tem escopo de snippet.
- Código Original
- Padrão de transformação
- Código Transformado
<!DOCTYPE html>
<html lang="en">
<body>
<div id="header">
<h1>Welcome to My Website</h1>
</div>
<div id="content">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<div id="footer">
<p>Contact us at contact@example.com</p>
</div>
</body>
</html>
<<<< pattern-name: my_pattern; pattern-scope: snippet-scope; >>>>
<div <...> -<id=*<".*">*>- <...>>
<...>
</div>
<!DOCTYPE html>
<html lang="en">
<body>
<div>
<h1>Welcome to My Website</h1>
</div>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<div>
<p>Contact us at contact@example.com</p>
</div>
</body>
</html>
O exemplo a seguir substitui o valor do atributo href do primeiro li por "#main", independentemente do valor do atributo (operador de string match com regex .*), do conteúdo interno da tag ou dos demais atributos que a tag possa ter. O padrão tem escopo de arquivo.
- Código Original
- Padrão de transformação
- Código Transformado
<html>
<head>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</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>
<body>
<h1> My Sample Page</h1>
</body>
</html>
<<<< 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>
<html>
<head>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#main">Home</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>
<body>
<h1> My Sample Page</h1>
</body>
</html>
attributeName
Os nomes dos atributos têm suporte aos operadores de ID match, inserção e remoção. Isso significa que, em qualquer local em que seja válida a existência do nome de um atributo, é possível utilizar qualquer um dos operadores suportados.
Note que os operadores de inserção e remoção devem sempre ocorrer em par quando estiverem no contexto de um attribute name, ou seja, sempre que houver uma remoção deve haver uma inserção de attribute name. Do contrário, um atributo poderia ficar sem nome ou com mais de um nome.
O exemplo a seguir substitui o nome do atributo id por class em todas as tags section, independentemente do valor do atributo (operador de string match com regex .*), do conteúdo interno da tag ou dos demais atributos que a tag possa ter. O padrão tem escopo de snippet.
- Código Original
- Padrão de transformação
- Código Transformado
<main>
<section id="home">
<h2>Home</h2>
<p>This is the home section. Here you can find the latest updates and news.</p>
</section>
<section id="about">
<h2>About</h2>
<p>This section provides information about our company and our mission.</p>
<img src="about.jpg" alt="About Us">
</section>
<section id="services">
<h2>Services</h2>
<p>We offer a wide range of services to meet your needs.</p>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</section>
<section id="contact">
<h2>Contact</h2>
<p>If you have any questions, feel free to reach out to us.</p>
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<br>
<button type="submit">Submit</button>
</form>
</section>
</main>
<<<< pattern-name: my_pattern; pattern-scope: snippet-scope; >>>>
<section <...> -<id>- +<class>+ = *<".*">* <...>>
<...>
</section>
<main>
<section class="home">
<h2>Home</h2>
<p>This is the home section. Here you can find the latest updates and news.</p>
</section>
<section class="about">
<h2>About</h2>
<p>This section provides information about our company and our mission.</p>
<img src="about.jpg" alt="About Us">
</section>
<section class="services">
<h2>Services</h2>
<p>We offer a wide range of services to meet your needs.</p>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</section>
<section class="contact">
<h2>Contact</h2>
<p>If you have any questions, feel free to reach out to us.</p>
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<br>
<button type="submit">Submit</button>
</form>
</section>
</main>