add use: syntax for directive

Author: sirenkovladd

jest.config.js

@@ -0,0 +1,4 @@
+/** @type {import('jest').Config} */
+export default {
+  testEnvironment: "jsdom"
+}

package.json

@@ -5,10 +5,11 @@
   "main": "lib/index.js",
   "module": "dist/index.js",
   "types": "types/index.d.ts",
+  "type": "module",
   "scripts": {
     "build": "rollup -c",
     "prepublishOnly": "npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "NODE_OPTIONS='--experimental-vm-modules $NODE_OPTIONS' jest",
     "prepare": "npm run build"
   },
   "repository": {

src/parse.js

@@ -39,7 +39,7 @@ function parseTag(/**@type {string}*/tag) {
     type: 'tag',
     name: '',
     voidElement: false,
-    attrs: {},
+    attrs: [],
     children: []
   };
   const tagMatch = tag.match(/<\/?([^\s]+?)[/\s>]/)
@@ -68,8 +68,11 @@ function parseTag(/**@type {string}*/tag) {
     // TODO named groups method not working yet, groups is undefined in tests (maybe not out in Node.js yet)
     // const groups = match.groups
     // res.attrs[groups.boolean || groups.name] = groups.value1 || groups.value2 || ""
-
-    res.attrs[match[1] || match[2]] = match[4] || match[5] || ''
+    if ((match[1] || match[2]).startsWith('use:')) {
+      res.attrs.push({ type: 'directive', name: match[1] || match[2], value: match[4] || match[5] || '' });
+    } else {
+      res.attrs.push({ type: 'attr', name: match[1] || match[2], value: match[4] || match[5] || '' });
+    }
   }
 
   return res

src/stringify.js

@@ -1,17 +1,26 @@
 // Based on package html-parse-stringify2
 // Expanded to handle webcomponents
 
+/**
+ * @param {import('../types/index').IDom['attrs']} attrs 
+ * @returns {string}
+ */
 function attrString(attrs) {
   const buff = [];
-  for (const key in attrs) {
-    buff.push(key + '="' + attrs[key].replace(/"/g, '"') + '"');
+  for (const attr of attrs) {
+    buff.push(attr.name + '="' + attr.value.replace(/"/g, '"') + '"');
   }
   if (!buff.length) {
     return '';
   }
   return ' ' + buff.join(' ');
 };
 
+/**
+ * @param {string} buff 
+ * @param {import('../types/index').IDom} doc 
+ * @returns {string}
+ */
 function stringifier(buff, doc) {
   switch (doc.type) {
     case 'text':
@@ -27,6 +36,10 @@ function stringifier(buff, doc) {
   }
 };
 
+/**
+ * @param {import('../types/index').IDom[]} doc 
+ * @returns {string}
+ */
 export function stringify(doc) {
   return doc.reduce(function (token, rootEl) {
     return token + stringifier('', rootEl);

test/parse.spec.js

@@ -0,0 +1,56 @@
+import { parse } from "../src";
+
+describe("parse", () => {
+  test("Simple div", () => {
+    const html = "<div asd=23 qwe=\"1243423\"></div>";
+    const result = parse(html);
+    expect(result).toEqual([
+      {
+        type: "tag",
+        name: "div",
+        attrs: [
+          { name: "asd", value: "23", type: 'attr' },
+          { name: "qwe", value: "1243423", type: 'attr' }
+        ],
+        children: [],
+        voidElement: false
+      }
+    ]);
+  });
+
+  test("With dynamic content", () => {
+    const html = "<div qwe=#23#>###</div>";
+    const result = parse(html);
+    expect(result).toEqual([
+      {
+        type: "tag",
+        name: "div",
+        attrs: [
+          { name: "qwe", value: "#23#", type: 'attr' }
+        ],
+        children: [
+          { type: "text", content: "###" }
+        ],
+        voidElement: false
+      }
+    ]);
+  });
+
+  test("With use effect", () => {
+    const html = "<div use:#1#=#2#>#3#</div>";
+    const result = parse(html);
+    expect(result).toEqual([
+      {
+        type: "tag",
+        name: "div",
+        attrs: [
+          { name: "use:#1#", value: "#2#", type: 'directive' }
+        ],
+        children: [
+          { type: "text", content: "#3#" }
+        ],
+        voidElement: false
+      }
+    ]);
+  });
+});

types/index.d.ts

@@ -3,7 +3,7 @@ export interface IDom {
   content ? : string;
   voidElement: boolean;
   name: string;
-  attrs: { [key: string]: any };
+  attrs: { type: 'attr' | 'directive', name: string, value: string}[];
   children: IDom[];
 }