feat: add dataset read support. fixes #14

holtwick · Sep 23, 2024 · db181bf · db181bf
1 parent f3814be
commit db181bf
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -71,17 +71,17 @@
     "entities": "^5.0.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^3.0.0",
+    "@antfu/eslint-config": "^3.7.1",
     "@antfu/ni": "^0.23.0",
-    "@types/node": "^22.5.1",
-    "@vitest/coverage-v8": "^2.0.5",
+    "@types/node": "^22.5.5",
+    "@vitest/coverage-v8": "^2.1.1",
     "c8": "^10.1.2",
-    "eslint": "^9.9.1",
-    "tsup": "^8.2.4",
-    "typedoc": "^0.26.6",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.2",
-    "vitest": "^2.0.5",
-    "zeed": "^0.24.13"
+    "eslint": "^9.11.0",
+    "tsup": "^8.3.0",
+    "typedoc": "^0.26.7",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.7",
+    "vitest": "^2.1.1",
+    "zeed": "^0.24.21"
   }
 }
diff --git a/src/htmlparser.spec.ts b/src/htmlparser.spec.ts
@@ -64,6 +64,19 @@ height: 100px;">Test</div>`) as VHTMLDocument
     `)
   })
 
+  it('should handle dataset', () => {
+    const dom = parseHTML(`<div id="elem" data-id="123" data-feel-good="yeah">Test</div>`) as VHTMLDocument
+    const node = dom.querySelector('#elem')
+    expect(node).not.toBeNull()
+    expect(node?.dataset).toMatchInlineSnapshot(`
+      {
+        "feel-good": "yeah",
+        "feelGood": "yeah",
+        "id": "123",
+      }
+    `)
+  })
+
   it('should ignore escape for script etc.', () => {
     const html = `<script>
 var x = 1 & 4
@@ -113,7 +126,6 @@ if (x<1)
             "_nodeName": "SCRIPT",
             "_originalTagName": "script",
             "_parentNode": [Circular],
-            "_styles": null,
             "append": [Function],
           },
         ],

diff --git a/src/vdom.ts b/src/vdom.ts
@@ -353,9 +353,10 @@ interface Attr {
 
 export class VElement extends VNodeQuery {
   _originalTagName: string
-  _nodeName: any
+  _nodeName: string
   _attributes: Record<string, string>
-  _styles: any
+  _styles: Record<string, string> | undefined
+  _dataset: Record<string, string> | undefined
 
   get nodeType() {
     return VNode.ELEMENT_NODE
@@ -370,7 +371,6 @@ export class VElement extends VNodeQuery {
     this._originalTagName = name
     this._nodeName = (name || '').toUpperCase()
     this._attributes = attrs || {}
-    this._styles = null
   }
 
   cloneNode(deep = false) {
@@ -402,7 +402,8 @@ export class VElement extends VNodeQuery {
   setAttribute(name: string, value: string) {
     this.removeAttribute(name)
     this._attributes[name] = value
-    this._styles = null
+    this._styles = undefined
+    this._dataset = undefined
   }
 
   getAttribute(name: string): string | null {
@@ -427,6 +428,7 @@ export class VElement extends VNodeQuery {
     return originalName ? this._attributes[originalName] != null : false
   }
 
+  /// See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
   get style() {
     if (this._styles == null) {
       const styles = Object.assign({}, DEFAULTS[this.tagName.toLowerCase()] || {})
@@ -450,6 +452,21 @@ export class VElement extends VNodeQuery {
     return this._styles
   }
 
+  /// See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
+  get dataset() {
+    if (this._dataset == null) {
+      const dataset: Record<string, string> = {}
+      for (const [key, value] of Object.entries(this._attributes)) {
+        if (key.startsWith('data-')) {
+          dataset[key.slice(5)] = value
+          dataset[toCamelCase(key.slice(5))] = value
+        }
+      }
+      this._dataset = dataset
+    }
+    return this._dataset
+  }
+
   get tagName() {
     return this._nodeName
   }