Merge branch 'release/v0.15.0'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "zeed-dom",
   "type": "module",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "🌱 Lightweight offline DOM",
   "author": {
     "name": "Dirk Holtwick",
@@ -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"
   }
 }

src/html.ts

@@ -3,8 +3,8 @@
 // 2. Attribute name '__' gets transformed to ':' for namespace emulation
 // 3. Emulate CDATA by <cdata> element
 
-import { hArgumentParser } from './h'
 import { escapeHTML } from './encoding'
+import { hArgumentParser } from './h'
 import { hasOwn } from './utils'
 
 export const SELF_CLOSING_TAGS = [
@@ -43,9 +43,9 @@ export function markup(
   const hasChildren = !(
     (typeof children === 'string' && children === '')
     || (Array.isArray(children)
-    && (children.length === 0
-    || (children.length === 1 && children[0] === '')))
-    || children == null
+      && (children.length === 0
+        || (children.length === 1 && children[0] === '')))
+        || children == null
   )
 
   const parts: string[] = []

src/htmlparser.spec.ts

@@ -1,5 +1,5 @@
 import type { VHTMLDocument } from './vdom'
-import { VTextNode, createHTMLDocument } from './vdom'
+import { createHTMLDocument, VTextNode } from './vdom'
 import { parseHTML } from './vdomparser'
 
 describe('htmlparser', () => {
@@ -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],
           },
         ],

src/index.browser.ts

@@ -1,13 +1,13 @@
-export * from './vdom'
-export * from './h'
-export * from './utils'
-
-export { vdom, parseHTML } from './vdomparser'
 export { escapeHTML, unescapeHTML } from './encoding'
-export { tidyDOM } from './tidy'
+export * from './h'
 export { CDATA, html } from './html'
-export { xml } from './xml'
+
 export { handleHTML } from './manipulate'
 export { serializeMarkdown } from './serialize-markdown'
 export { serializePlaintext } from './serialize-plaintext'
-export { serializeSafeHTML, safeHTML } from './serialize-safehtml'
+export { safeHTML, serializeSafeHTML } from './serialize-safehtml'
+export { tidyDOM } from './tidy'
+export * from './utils'
+export * from './vdom'
+export { parseHTML, vdom } from './vdomparser'
+export { xml } from './xml'

src/node.ts

@@ -1,5 +1,5 @@
-import { readFileSync, writeFileSync } from 'node:fs'
 import type { VHTMLDocument } from './vdom'
+import { readFileSync, writeFileSync } from 'node:fs'
 import { parseHTML } from './vdomparser'
 
 /** Manipulate HTMl file directly on disk. Only writes back if there were significant changes. */

src/serialize-markdown.ts

@@ -1,5 +1,5 @@
 import type { VElement } from './vdom'
-import { VNode, isVElement } from './vdom'
+import { isVElement, VNode } from './vdom'
 
 interface SerializeContext {
   level: number

src/serialize-plaintext.ts

@@ -1,6 +1,6 @@
-import { SELECTOR_BLOCK_ELEMENTS } from './tidy'
 import type { VElement } from './vdom'
-import { VNode, isVElement } from './vdom'
+import { SELECTOR_BLOCK_ELEMENTS } from './tidy'
+import { isVElement, VNode } from './vdom'
 
 interface SerializeContext {
   level: number

src/serialize-safehtml.ts

@@ -1,5 +1,5 @@
 import { escapeHTML } from './encoding'
-import { VNode, isVElement } from './vdom'
+import { isVElement, VNode } from './vdom'
 import { parseHTML } from './vdomparser'
 
 export const SELECTOR_BLOCK_ELEMENTS = 'p,h1,h2,h3,h4,h5,h6,blockquote,div,ul,ol,li,article,section,footer,nav,hr,form'

src/vcss.ts

@@ -1,5 +1,5 @@
-import { parse } from 'css-what'
 import type { VElement } from './vdom'
+import { parse } from 'css-what'
 
 function log(..._args: any) {}
 

src/vdom.spec.tsx

@@ -1,5 +1,5 @@
 // import Sizzle from './sizzle'
-import { VDocument, VDocumentFragment, VElement, createHTMLDocument, h } from './vdom'
+import { createHTMLDocument, h, VDocument, VDocumentFragment, VElement } from './vdom'
 import { parseHTML } from './vdomparser'
 import { xml } from './xml'
 

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
   }

src/vdomparser.ts

@@ -4,7 +4,7 @@ import { unescapeHTML } from './encoding'
 import { SELF_CLOSING_TAGS } from './html'
 import { HtmlParser } from './htmlparser'
 import { hasOwn } from './utils'
-import { VDocType, VDocumentFragment, VElement, VHTMLDocument, VNode, VTextNode, document } from './vdom'
+import { document, VDocType, VDocumentFragment, VElement, VHTMLDocument, VNode, VTextNode } from './vdom'
 
 // Makes sure we operate on VNodes
 export function vdom(obj: VNode | Buffer | string | null = null): VNode {

src/xml.ts

@@ -1,6 +1,6 @@
-import './jsx-runtime'
 import { hArgumentParser } from './h'
 import { markup } from './html'
+import './jsx-runtime'
 
 export function xml(itag: string, iattrs?: object, ...ichildren: any[]) {
   const { tag, attrs, children } = hArgumentParser(itag, iattrs, ichildren)