WIP: feat: adds frag snippet

src/markup/format/html.ts

@@ -82,6 +82,14 @@ function element(node: AbbreviationNode, index: number, items: AbbreviationNode[
             pushString(out, `</${name}>`);
             commentNodeAfter(node, state);
         }
+    } else if (config.options['jsx.enabled'] && !node.name) {
+        // Handle JSX fragment
+        pushString(out, '<>');
+        if (!pushSnippet(node, state, next) && node.value) {
+            pushTokens(node.value, state);
+            node.children.forEach(next);
+        }
+        pushString(out, '</>');
     } else if (!pushSnippet(node, state, next) && node.value) {
         // A text-only node (snippet)
         pushTokens(node.value, state);

src/snippets/html.json

@@ -157,5 +157,6 @@
 
 	"c": "{<!-- ${0} -->}",
 	"cc:ie": "{<!--[if IE]>${0}<![endif]-->}",
-	"cc:noie": "{<!--[if !IE]><!-->${0}<!--<![endif]-->}"
+	"cc:noie": "{<!--[if !IE]><!-->${0}<!--<![endif]-->}",
+	"frag": "{<>${0}</>}"
 }

test/fragment.ts

@@ -0,0 +1,57 @@
+import { describe, it } from "node:test";
+import { strictEqual as equal } from "node:assert";
+import expand, { UserConfig } from "../src";
+
+describe("frag", () => {
+    const config: UserConfig = { options: { "jsx.enabled": true } };
+
+    it("should expand fragment", () => {
+        // should it work without explicit jsx.enabled ? It's not a valid html tag afaik
+        equal(expand("frag"), "<></>");
+        // invalid result, adds one more fragment
+        equal(expand("frag", config), "<></>");
+    });
+
+    it("should wrap any content with fragment", () => {
+        equal(
+            expand("frag", { ...config, text: "frag test" }),
+            "<>frag test</>"
+        );
+    });
+
+    it("should preserve formatting", () => {
+        equal(
+            expand("frag", {
+                ...config,
+                text: "test\n\ttext\twith\nsome\t\tformatting",
+            }),
+            "<>test\n\ttext\twith\nsome\t\tformatting</>"
+        );
+    });
+
+    it("should wrap jsx with fragment", () => {
+        equal(
+            expand("frag", { ...config, text: "<span>foo</span>" }),
+            "<><span>foo</span></>"
+        );
+        equal(
+            expand("frag", { ...config, text: "foo<div>foo</div>" }),
+            "<>foo<div>foo</div></>"
+        );
+    });
+
+    it("should wrap fragment with fragment", () => {
+        equal(
+            expand("frag", { ...config, text: "<>nested</>" }),
+            "<><>nested</></>"
+        );
+    });
+
+    it("should wrap snippets with fragment", () => {
+        // invalid result, adds one more fragment at start
+        equal(
+            expand("frag>ul>li*4", config),
+            "<><ul>\n\t<li></li>\n\t<li></li>\n\t<li></li>\n\t<li></li>\n</ul></>"
+        );
+    });
+});