refactor(dom): move o css e html para o contexto do dom

package.json

@@ -17,6 +17,10 @@
       "import": "dist/element.js",
       "require": "dis/element.cjs"
     },
+    "./dom": {
+      "import": "dist/dom.js",
+      "require": "dis/dom.cjs"
+    },
     "./event": {
       "import": "dist/event.js",
       "require": "dis/event.cjs"
@@ -37,5 +41,5 @@
   },
   "type": "module",
   "types": "types.d.ts",
-  "version": "0.8.0"
+  "version": "0.9.0"
 }

src/dom/css/README.md

@@ -0,0 +1,126 @@
+# CSS
+
+Bem-vindo à documentação do `css`, um helper que facilita a criação e gerenciamento de estilos CSS utilizando `CSSStyleSheet` e tagged template literals. Este pacote é parte integrante da biblioteca Element, que visa simplificar o desenvolvimento de Web Components.
+
+## Documentação do Código
+
+### Nome e Classificação
+
+**Nome:** CSS
+
+**Classificação:** Helpers [Tagged Template Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+
+### Interação e Objetivo
+
+**Interação:** Este helper é usado para criar uma instância de `CSSStyleSheet` a partir de um template literal, permitindo a fácil aplicação de estilos a componentes Web.
+
+**Objetivo:** Facilitar a definição e aplicação de estilos encapsulados em componentes customizados, mantendo a modularidade e reusabilidade.
+
+### Também conhecido como
+
+- Helper de Estilos
+- Gerenciador de CSS
+
+### Motivação
+
+A motivação para usar o helper `css` é simplificar a definição de estilos CSS dentro de Web Components. Ele permite:
+
+1. **Encapsulamento de Estilos:** Facilita a definição de estilos específicos para componentes, evitando conflitos de CSS global.
+2. **Reutilização de Estilos:** Promove a reutilização de estilos entre diferentes componentes.
+3. **Performance:** Aproveita as capacidades do `CSSStyleSheet` para aplicar estilos de forma eficiente e dinâmica.
+
+### Aplicabilidade
+
+O helper `css` é aplicável em situações onde é necessário definir estilos CSS para componentes customizados. É especialmente útil em cenários como:
+
+- **Desenvolvimento de Web Components:** Onde cada componente pode ter seus próprios estilos encapsulados.
+- **Aplicações Moduladas:** Onde a separação de estilos é essencial para a manutenção e escalabilidade do código.
+
+### Estrutura
+
+A estrutura do helper `css` é simples, transformando um template literal em uma instância de `CSSStyleSheet`.
+
+### Participantes
+
+1. **Função Helper (`css`)**:
+   - **Descrição:** Cria uma instância de `CSSStyleSheet` a partir de um template literal.
+   - **Responsabilidade:** Facilitar a definição e aplicação de estilos CSS encapsulados para Web Components.
+
+### Colaborações
+
+O helper `css` funciona em conjunto com a API `CSSStyleSheet` para permitir a aplicação de estilos encapsulados em componentes web.
+
+### Consequências
+
+#### Impactos Positivos
+
+- **Encapsulamento de Estilos:** Facilita a definição de estilos específicos para componentes, evitando conflitos de CSS global.
+- **Reutilização de Estilos:** Promove a reutilização de estilos entre diferentes componentes, melhorando a modularidade do código.
+
+#### Impactos Negativos
+
+- **Complexidade Adicional:** A introdução de estilos encapsulados pode adicionar complexidade ao gerenciamento de estilos em projetos maiores.
+- **Compatibilidade do Navegador:** A utilização de `CSSStyleSheet` pode ser limitada em navegadores que não suportam essa API.
+
+### Implementação
+
+```javascript
+function css(strings, ...values) {
+  const styles = new CSSStyleSheet();
+  const textContent = String.raw({ raw: strings }, ...values);
+  styles.replaceSync(textContent);
+  return styles;
+}
+
+export default css;
+```
+
+### Exemplo de Uso
+
+```javascript
+import css from '@bake-js/element/css';
+
+const styles = css`
+  :host {
+    display: block;
+    padding: 16px;
+    background-color: #f0f0f0;
+  }
+
+  h1 {
+    color: #333;
+  }
+`;
+
+class MyElement extends HTMLElement {
+  static get observedAttributes() {
+    return ['title'];
+  }
+
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: 'open' });
+    shadow.adoptedStyleSheets = [styles];
+    shadow.innerHTML = `
+      <h1>${this.getAttribute('title')}</h1>
+    `;
+  }
+}
+
+customElements.define('my-element', MyElement);
+```
+
+### Usos Conhecidos
+
+- **Estilização de Componentes Customizados:** Ideal para definir estilos específicos para Web Components.
+- **Encapsulamento de Estilos:** Útil para evitar conflitos de estilos globais em aplicações grandes e complexas.
+
+### Padrões Relacionados
+
+- **Decorator `paint`:** Pode ser usado em conjunto para definir estilos durante o ciclo de vida do componente.
+- **Decorator `define`:** Complementa o helper `css` ao definir Web Components e aplicar estilos encapsulados.
+- **Shadow DOM:** Utilizado para encapsular o CSS e evitar conflitos globais de estilo.
+
+### Considerações Finais
+
+O helper `css` oferece uma solução moderna e eficiente para definir estilos CSS dentro de Web Components, promovendo o encapsulamento e reutilização de estilos. Ele integra-se perfeitamente com a biblioteca Element, facilitando o desenvolvimento de componentes web estilizados e modulares.

src/dom/css/css.js

@@ -0,0 +1,8 @@
+const css = (strings, ...values) => {
+  const style = new CSSStyleSheet();
+  const textContent = String.raw({ raw: strings }, ...values);
+  style.replaceSync(textContent);
+  return style;
+};
+
+export default css;

src/dom/css/index.js

@@ -0,0 +1 @@
+export { default } from "./css";

src/dom/css/types.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Helper para criar uma instância de CSSStyleSheet a partir de um template literal.
+ * Facilita a definição de estilos encapsulados para Web Components.
+ *
+ * @param {TemplateStringsArray} strings - As partes literais do template string.
+ * @param {...any} values - Os valores interpolados no template string.
+ * @returns {CSSStyleSheet} - A instância de CSSStyleSheet criada a partir do template literal.
+ */
+export declare function css(
+  strings: TemplateStringsArray,
+  ...values: any[]
+): CSSStyleSheet;

src/dom/html/README.md

@@ -0,0 +1,104 @@
+# HTML
+
+Bem-vindo à documentação do `html`, uma função template que facilita a criação de strings HTML em JavaScript. Este pacote é parte integrante da biblioteca Element, que visa simplificar o desenvolvimento de Web Components.
+
+## Documentação do Código
+
+### Nome e Classificação
+
+**Nome:** HTML
+
+**Classificação:** Template Literal
+
+### Interação e Objetivo
+
+**Interação:** Esta função template é utilizada para criar strings HTML formatadas de maneira limpa e legível a partir de templates literais.
+
+**Objetivo:** Facilitar a criação de strings HTML dentro de código JavaScript, mantendo o código legível e organizado.
+
+### Também conhecido como
+
+- Template de HTML
+- Literal de HTML
+
+### Motivação
+
+A motivação para usar a função `html` é simplificar a construção de strings HTML em código JavaScript, permitindo:
+
+1. **Leitura Facilitada:** Permite escrever HTML dentro de JavaScript de forma mais limpa e legível.
+2. **Interpolação de Valores:** Suporta a interpolação de valores dentro da string HTML.
+
+### Aplicabilidade
+
+A função `html` é aplicável em situações onde é necessário gerar HTML dinâmico dentro de código JavaScript. É útil em cenários como:
+
+- **Componentes Web Dinâmicos:** Para gerar markup HTML dentro de componentes web.
+- **Templates Dinâmicos:** Quando é necessário criar templates HTML dinâmicos baseados em dados de runtime.
+
+### Estrutura
+
+A estrutura da função `html` é simples, utilizando template literals para construir e retornar a string HTML.
+
+### Participantes
+
+1. **Função Template (`html`)**:
+   - **Descrição:** Gera strings HTML a partir de template literals.
+   - **Responsabilidade:** Facilitar a criação de HTML dinâmico e legível em código JavaScript.
+
+### Colaborações
+
+A função `html` pode ser usada em conjunto com outras funções e decorators da biblioteca Element para criar componentes web dinâmicos e interativos.
+
+### Consequências
+
+#### Impactos Positivos
+
+- **Legibilidade do Código:** Permite escrever HTML de forma legível e organizada dentro de JavaScript.
+- **Facilidade de Interpolação:** Suporta interpolação de variáveis, tornando fácil a criação de HTML dinâmico.
+
+#### Impactos Negativos
+
+- **Complexidade em HTML Complexo:** Para HTML muito complexo, a string resultante pode se tornar difícil de gerenciar.
+
+### Implementação
+
+```javascript
+function html(strings, ...values) {
+  return String.raw({ raw: strings }, ...values).trim();
+}
+
+export default html;
+```
+
+### Exemplo de Uso
+
+```javascript
+import html from '@bake-js/element';
+
+const template = html`
+  <div class="container">
+    <h1>${title}</h1>
+    <p>${description}</p>
+  </div>
+`;
+
+console.log(template);
+// <div class="container">
+//   <h1>Title Goes Here</h1>
+//   <p>Description goes here.</p>
+// </div>
+```
+
+### Usos Conhecidos
+
+- **Componentes Web Dinâmicos:** Ideal para gerar markup HTML dinâmico dentro de componentes web.
+- **Templates HTML Dinâmicos:** Útil para criar templates HTML dinâmicos baseados em dados de runtime.
+
+### Padrões Relacionados
+
+- **Template Literals:** Utiliza a funcionalidade de template literals do JavaScript para interpolação de valores.
+- **Tagged Template Literals:** A função `html` é um exemplo de tagged template literal, permitindo manipulação de templates literais.
+
+### Considerações Finais
+
+A função `html` oferece uma solução eficaz para criar strings HTML de maneira legível e organizada dentro de código JavaScript. Ao permitir a interpolação de valores e a criação de HTML dinâmico, ela promove uma experiência de desenvolvimento mais simples e eficiente.

src/dom/html/html.js

@@ -0,0 +1,15 @@
+const html = (strings, ...values) => {
+  values = values.map((value) =>
+    Array.isArray(value) ? value.join("") : value,
+  );
+
+  let content = String.raw({ raw: strings }, ...values);
+
+  content = content.replace(/\n */g, "");
+  content = content.replace(/ {2,}/g, " ");
+  content = content.trim();
+
+  return content;
+};
+
+export default html;

src/dom/html/html.test.js

@@ -0,0 +1,37 @@
+import { describe, expect, it } from "bun:test";
+import html from "./html";
+
+describe("html", () => {
+  it("Remove caracter de scape de nova linha", () => {
+    const content = html`
+      <div>
+        <strong>@bake-js/element</strong>
+      </div>
+    `;
+
+    expect(content).toBe("<div><strong>@bake-js/element</strong></div>");
+  });
+
+  it("Remove caracter de espaco extra", () => {
+    const content = html`
+      <div>
+        <strong>Cleber de   Moraes Goncalves  </strong>
+      </div>
+    `;
+
+    expect(content).toBe(
+      "<div><strong>Cleber de Moraes Goncalves </strong></div>",
+    );
+  });
+
+  it("Remove o separator para quando o value for um array", () => {
+    const fruits = ["laranja", "uva", "pera"];
+    const content = html`
+      <ul>
+        ${fruits.map((fruit) => html`<li>${fruit}</li>`)}
+      </ul>
+    `;
+
+    expect(content).toBe("<ul><li>laranja</li><li>uva</li><li>pera</li></ul>");
+  });
+});

src/dom/html/index.js

@@ -0,0 +1 @@
+export { default } from "./html";

src/dom/html/types.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Função utilizada para construir strings HTML com interpolação.
+ *
+ * @param {TemplateStringsArray} strings - As partes literais da string template.
+ * @param {...any[]} values - Os valores interpolados na string template.
+ * @returns {string} - A string HTML interpolada e formatada.
+ */
+export declare function html(
+  strings: TemplateStringsArray,
+  ...values: any[]
+): string;

src/dom/index.js

@@ -0,0 +1,2 @@
+export { default as css } from "./css";
+export { default as html } from "./html";

src/index.js

@@ -1,11 +1,9 @@
 export { default as adopted } from "./adopted";
 export { default as attributeChanged } from "./attributeChanged";
 export { default as connected } from "./connected";
-export { default as css } from "./css";
 export { default as define } from "./define";
 export { default as didPaint } from "./didPaint";
 export { default as disconnected } from "./disconnected";
-export { default as html } from "./html";
 export { default as on } from "./on";
 export { default as paint } from "./paint";
 export { default as repaint } from "./repaint";

vite.config.js

@@ -6,6 +6,7 @@ export default defineConfig({
     lib: {
       entry: {
         element: resolve(__dirname, "src/index.js"),
+        dom: resolve(__dirname, "src/dom/index.js"),
         event: resolve(__dirname, "src/event/index.js"),
       },
       formats: ["cjs", "es"],