Merge pull request #13 from luisherranz/fix-custom-elements-transform

Fix custom elements transform

.changeset/weak-games-shout.md

@@ -0,0 +1,5 @@
+---
+"ultrahtml": patch
+---
+
+Fix custom elements transform.

src/index.ts

@@ -12,7 +12,7 @@ export const DOCTYPE_NODE = 4;
 const VOID_TAGS = { img: 1, br: 1, hr: 1, meta: 1, link: 1, base: 1, input: 1 };
 const SPLIT_ATTRS_RE = /([\@\.a-z0-9_\:\-]*)\s*?=?\s*?(['"]?)(.*?)\2\s+/gim;
 const DOM_PARSER_RE =
-  /(?:<(\/?)([a-zA-Z][a-zA-Z0-9\:]*)(?:\s([^>]*?))?((?:\s*\/)?)>|(<\!\-\-)([\s\S]*?)(\-\->)|(<\!)([\s\S]*?)(>))/gm;
+  /(?:<(\/?)([a-zA-Z][a-zA-Z0-9\:-]*)(?:\s([^>]*?))?((?:\s*\/)?)>|(<\!\-\-)([\s\S]*?)(\-\->)|(<\!)([\s\S]*?)(>))/gm;
 
 function splitAttrs(str?: string) {
   let obj: Record<string, string> = {};

test/basic.test.ts

@@ -11,6 +11,11 @@ describe("input === output", () => {
     const output = await render(parse(input));
     expect(output).toEqual(input);
   });
+  it("works for custom elements", async () => {
+    const input = `<custom-element>Hello world!</custom-element>`;
+    const output = await render(parse(input), { sanitize: { allowCustomElements: true }});
+    expect(output).toEqual(input);
+  });
   it("works for comments", async () => {
     const input = `<!--foobar-->`;
     const output = await render(parse(input), { sanitize: { allowComments: true }});

test/transform.test.ts

@@ -7,4 +7,9 @@ describe("transform", () => {
     const output = await transform(`<h1>Hello world!</h1>`, { components: { h1: Title } })
     expect(output).toEqual(`<h1 class="ultra">Hello world!</h1>`);
   });
+  it("transforms custom components", async () => {
+    const CustomElement = (props, children) => html`<custom-element class="ultra" ...${props}>${children}</custom-element>`;
+    const output = await transform(`<custom-element>Hello world!</custom-element>`, { components: { "custom-element": CustomElement } })
+    expect(output).toEqual(`<custom-element class="ultra">Hello world!</custom-element>`);
+  })
 });