Merge branch 'release/v0.17.1'

Author: holtwick

package.json

@@ -1,7 +1,7 @@
 {
   "name": "zeed-dom",
   "type": "module",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "description": "🌱 Lightweight offline DOM",
   "author": {
     "name": "Dirk Holtwick",

src/html.ts

@@ -153,7 +153,7 @@ export function markup(
 
 export function html(
   tag: string | ((props: any) => VDocumentFragment | VElement),
-  attrs?: Record<string, unknown> | null,
+  attrs?: Record<string, unknown> | unknown[] | null,
   ...children: unknown[]
 ): string {
   const parsed = hArgumentParser(tag, attrs, ...children)

src/serialize-markdown.ts

@@ -53,11 +53,11 @@ function serialize(node: VNode | VElement, context: SerializeContext = {
   count: 0,
 }): string {
   if (node.nodeType === VNode.DOCUMENT_FRAGMENT_NODE) {
-    return (node.children || []).map(c => serialize(c, { ...context })).join('')
+    return (node.childNodes || []).map(c => serialize(c, { ...context })).join('')
   }
   else if (isVElement(node)) {
     const tag: string = node.tagName.toLowerCase()
-    const handleChildren = (ctx?: Partial<SerializeContext>): string => (node.children || []).map(c => serialize(c, { ...context, ...ctx })).join('')
+    const handleChildren = (ctx?: Partial<SerializeContext>): string => (node.childNodes || []).map(c => serialize(c, { ...context, ...ctx })).join('')
     const fn = rules[tag]
     if (fn)
       return fn(node as VElement, handleChildren, context)

src/serialize-plaintext.ts

@@ -13,13 +13,13 @@ function serialize(node: VNode | VElement, context: SerializeContext = {
   count: 0,
 }): string {
   if (node.nodeType === VNode.DOCUMENT_FRAGMENT_NODE) {
-    return node.children.map(c => serialize(c, { ...context })).join('')
+    return node.childNodes.map(c => serialize(c, { ...context })).join('')
   }
 
   else if (isVElement(node)) {
     const tag: string = node.tagName.toLowerCase()
 
-    const handleChildren = (ctx?: Partial<SerializeContext>): string => node.children.map(c => serialize(c, { ...context, ...ctx })).join('')
+    const handleChildren = (ctx?: Partial<SerializeContext>): string => node.childNodes.map(c => serialize(c, { ...context, ...ctx })).join('')
 
     const rules: Record<string, () => string> = {
       br: () => `${handleChildren()}\n`,

src/serialize-safehtml.ts

@@ -31,11 +31,11 @@ function serialize(node: VNode, context: SerializeContext = {
   count: 0,
 }): string {
   if (node.nodeType === VNode.DOCUMENT_FRAGMENT_NODE) {
-    return (node.children || []).map(c => serialize(c, { ...context })).join('')
+    return (node.childNodes || []).map(c => serialize(c, { ...context })).join('')
   }
   else if (isVElement(node)) {
     const tag: string = node.tagName?.toLowerCase()
-    const handleChildren = (ctx?: Partial<SerializeContext>): string => (node.children || []).map(c => serialize(c, { ...context, ...ctx })).join('')
+    const handleChildren = (ctx?: Partial<SerializeContext>): string => (node.childNodes || []).map(c => serialize(c, { ...context, ...ctx })).join('')
     const fn = baseRules[tag]
     if (fn)
       return fn(node, handleChildren)

src/utils.spec.ts

@@ -12,7 +12,7 @@ describe('utils', () => {
 
     const body = removeBodyContainer(doc)
     expect(body.render()).toMatchInlineSnapshot(
-      `"<title>Hello Title</title>Hello world"`,
+      `"<title>Hello Title</title>"`,
     )
   })
 })

src/vcss.spec.tsx

@@ -351,6 +351,18 @@ describe('css', () => {
     expect(matchSelector('div', <div />)).toBe(true)
   })
 
+  it('should not throw on descendant selector with attribute and iframe', () => {
+    const element = (
+      <div data-youtube-video>
+        <iframe src="https://www.youtube.com/watch?v=cqHqLQgVCgY" />
+      </div>
+    )
+    // Should not throw, should return true for Fiframe
+    expect(matchSelector('div[data-youtube-video] iframe', element.querySelector('iframe'))).toBe(true)
+    // Should return true for div
+    expect(matchSelector('div[data-youtube-video]', element)).toBe(true)
+  })
+
   // it('should be single fail', () => {
   //   let element = <h1>...</h1>
   //   expect(matchSelector('[id]', element)).toBe(false)

src/vdom.spec.tsx

@@ -724,4 +724,10 @@ describe('vdom', () => {
   //   div.remove()
   //   div.replaceWith('x')
   // })
+
+  it('should include only elements in children', () => {
+    const el: VElement = parseHTML('<div> <p>Hello</p> </div>').firstChild
+    expect(el.childNodes).toHaveLength(3)
+    expect(el.children).toHaveLength(1)
+  })
 })

src/vdom.ts

@@ -187,7 +187,7 @@ export class VNode {
   }
 
   get children() {
-    return this._childNodes || []
+    return (this._childNodes || []).filter<any>(isVElement)
   }
 
   get firstChild() {

src/xml.ts

@@ -1,10 +1,15 @@
+import type { VDocumentFragment, VElement } from './vdom'
 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)
-  return markup(true, tag, attrs, children)
+export function xml(
+  itag: string | ((props: any) => VElement | VDocumentFragment),
+  iattrs?: Record<string, unknown> | unknown[] | null,
+  ...ichildren: any[]
+) {
+  const { tag, attrs, children } = hArgumentParser(itag, iattrs, ...ichildren)
+  return markup(true, tag as string, attrs, children)
 }
 
 // export const xmlVDOM = markup.bind(null, true)