Merge branch 'release/v0.14.0'

.vscode/settings.json

@@ -39,5 +39,12 @@
     "jsonc",
     "yaml",
     "toml"
-  ]
+  ],
+
+  "github.copilot.enable": {
+    "*": true,
+    "plaintext": false,
+    "markdown": false,
+    "scminput": false
+  }
 }

eslint.config.js

@@ -1,5 +1,26 @@
 import antfu from '@antfu/eslint-config'
+import { eslintIgnoreDefaults, eslintRulesDefaults } from 'zeed'
 
-export default antfu({
-  ignores: ['docs', 'dist', '**/dist/**', 'node_modules', '**/node_modules/**', 'build', '**/build/**', 'tmp', '**/tmp/**', 'demos', '**/demos/**', 'coverage', '**/coverage/**', '_archive', '**/_archive/**', '*.spec.*', '**/*.spec.*/**', 'vitest.config.ts', '**/vitest.config.ts/**', '*.md', '**/*.md/**', '*.yml', '**/*.yml/**'],
-})
+export default antfu(
+  {
+    typescript: true,
+    vue: true,
+
+    regexp: false,
+
+    ignores: [
+      ...eslintIgnoreDefaults(),
+      'docs', 'dist', '**/dist/**', 'node_modules', '**/node_modules/**', 'build', '**/build/**', 'tmp', '**/tmp/**', 'demos', '**/demos/**', 'coverage', '**/coverage/**', '_archive', '**/_archive/**', '*.spec.*', '**/*.spec.*/**', 'vitest.config.ts', '**/vitest.config.ts/**', '*.md', '**/*.md/**', '*.yml', '**/*.yml/**',
+    ],
+  },
+  {},
+  {
+    rules: {
+      ...eslintRulesDefaults(),
+      'regexp/*': 'off',
+      'regexp/confusing-quantifier': 'off',
+      'antfu/consistent-list-newline': 'off',
+      'eslint-disable-unused-imports/no-unused-imports': 'off',
+    },
+  },
+)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "zeed-dom",
   "type": "module",
-  "version": "0.13.3",
+  "version": "0.14.0",
   "description": "🌱 Lightweight offline DOM",
   "author": {
     "name": "Dirk Holtwick",
@@ -21,7 +21,6 @@
   "bugs": {
     "url": "https://github.com/holtwick/zeed-dom/issues"
   },
-  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./dist/index.node.d.ts",
@@ -45,8 +44,8 @@
   },
   "main": "dist/index.node.cjs",
   "module": "dist/index.browser.js",
-  "typings": "dist/index.node.d.ts",
   "types": "dist/index.node.d.ts",
+  "typings": "dist/index.node.d.ts",
   "files": [
     "dist",
     "jsx-runtime"
@@ -56,8 +55,8 @@
   },
   "scripts": {
     "build": "npm run clean && npm run build:tsup",
-    "build:tsup": "tsup src/index.browser.ts src/index.node.ts src/jsx-runtime.ts --dts --sourcemap --format esm,cjs",
     "build:docs": "typedoc src/index.ts",
+    "build:tsup": "tsup src/index.browser.ts src/index.node.ts src/jsx-runtime.ts --dts --sourcemap --format esm,cjs",
     "check": "tsc --noEmit -p tsconfig.json",
     "clean": "rm -rf dist",
     "lint": "eslint .",
@@ -69,19 +68,20 @@
   },
   "dependencies": {
     "css-what": "^6.1.0",
-    "entities": "^4.5.0"
+    "entities": "^5.0.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.18.0",
-    "@antfu/ni": "^0.21.12",
-    "@types/node": "^20.12.12",
-    "@vitest/coverage-v8": "^1.6.0",
-    "c8": "^9.1.0",
-    "eslint": "^9.2.0",
-    "tsup": "^8.0.2",
-    "typedoc": "^0.25.13",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.11",
-    "vitest": "^1.6.0"
+    "@antfu/eslint-config": "^3.0.0",
+    "@antfu/ni": "^0.23.0",
+    "@types/node": "^22.5.1",
+    "@vitest/coverage-v8": "^2.0.5",
+    "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"
   }
 }

src/html.ts

@@ -124,10 +124,12 @@ export function markup(
               (c.startsWith('<') && c.endsWith('>'))
               || tag === 'script'
               || tag === 'style'
-            )
+            ) {
               parts.push(c)
-            else
+            }
+            else {
               parts.push(escapeHTML(c.toString()))
+            }
           }
         }
       }

src/htmlparser.spec.ts

@@ -43,25 +43,48 @@ describe('htmlparser', () => {
     expect(dom.render()).toMatchInlineSnapshot(`"<p>Let&apos;s go</p>"`)
   })
 
+  it('should handle inline base64', () => {
+    // https://github.com/holtwick/zeed-dom/issues/12
+
+    const dom = parseHTML(`<div
+id="elem"
+style="
+width: 200px;
+background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy41LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMTQ3IDIwMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMxNDcgMjAwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc);
+height: 100px;">Test</div>`) as VHTMLDocument
+    const node = dom.querySelector('#elem')
+    expect(node).not.toBeNull()
+    expect(node?.style).toMatchInlineSnapshot(`
+      {
+        "background-image": "url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy41LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMTQ3IDIwMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMxNDcgMjAwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc)",
+        "backgroundImage": "url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy41LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMTQ3IDIwMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMxNDcgMjAwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc)",
+        "height": "100px",
+        "width": "200px",
+      }
+    `)
+  })
+
   it('should ignore escape for script etc.', () => {
     const html = `<script>
 var x = 1 & 4
 window.addEventListener('load', function () {
-$('body')
-  .attr('data-spy', 'scroll')
-  .attr('data-offset', '88')
-  .attr('data-target', '#outline')
+if (x<1)
+  $('body')
+    .attr('data-spy', 'scroll')
+    .attr('data-offset', '88')
+    .attr('data-target', '#outline')
 })
 </script>`
     const dom = parseHTML(html) as VHTMLDocument
     expect(dom.textContent).toMatchInlineSnapshot(`
       "
       var x = 1 & 4
       window.addEventListener('load', function () {
-      \$('body')
-        .attr('data-spy', 'scroll')
-        .attr('data-offset', '88')
-        .attr('data-target', '#outline')
+      if (x<1)
+        $('body')
+          .attr('data-spy', 'scroll')
+          .attr('data-offset', '88')
+          .attr('data-target', '#outline')
       })
       "
     `)
@@ -77,10 +100,11 @@ $('body')
                 "_text": "
       var x = 1 & 4
       window.addEventListener('load', function () {
-      $('body')
-        .attr('data-spy', 'scroll')
-        .attr('data-offset', '88')
-        .attr('data-target', '#outline')
+      if (x<1)
+        $('body')
+          .attr('data-spy', 'scroll')
+          .attr('data-offset', '88')
+          .attr('data-target', '#outline')
       })
       ",
                 "append": [Function],
@@ -101,10 +125,11 @@ $('body')
       "<script>
       var x = 1 & 4
       window.addEventListener('load', function () {
-      \$('body')
-        .attr('data-spy', 'scroll')
-        .attr('data-offset', '88')
-        .attr('data-target', '#outline')
+      if (x<1)
+        $('body')
+          .attr('data-spy', 'scroll')
+          .attr('data-offset', '88')
+          .attr('data-target', '#outline')
       })
       </script>"
     `)

src/htmlparser.ts

@@ -54,6 +54,7 @@ export class HtmlParser {
           treatAsChars = true
         }
       }
+
       // end tag
       else if (html.substring(0, 2) === '</') {
         match = this.endTagRe.exec(html)
@@ -66,13 +67,25 @@ export class HtmlParser {
           treatAsChars = true
         }
       }
+
       // start tag
       else if (html.charAt(0) === '<') {
         match = this.startTagRe.exec(html)
         if (match) {
           html = RegExp.rightContext
           treatAsChars = false
-          this.parseStartTag(RegExp.lastMatch, match[1], match)
+          const tagName = this.parseStartTag(RegExp.lastMatch, match[1], match)
+          if (tagName === 'script' || tagName === 'style') {
+            index = html.search(new RegExp(`<\/${tagName}`, 'i'))
+            if (index !== -1) {
+              this.scanner.characters(html.substring(0, index))
+              html = html.substring(index)
+              treatAsChars = false
+            }
+            else {
+              treatAsChars = true
+            }
+          }
         }
         else {
           treatAsChars = true
@@ -113,9 +126,9 @@ export class HtmlParser {
     let attrInput = match[2]
     if (isSelfColse)
       attrInput = attrInput.replace(/\s*\/\s*$/, '')
-
     const attrs = this.parseAttributes(tagName, attrInput)
     this.scanner.startElement(tagName, attrs, isSelfColse, match[0])
+    return tagName.toLocaleLowerCase()
   }
 
   parseEndTag(input: string, tagName: string) {

src/tidy.ts

@@ -28,8 +28,9 @@ export function tidyDOM(document: VDocument) {
       !prev
       || prev.nodeType !== VNode.TEXT_NODE
       || !prev.nodeValue?.endsWith('\n')
-    )
+    ) {
       e.parentNode?.insertBefore(new VTextNode('\n'), e)
+    }
 
     e.parentNode?.insertBefore(new VTextNode(level(e)), e)
 

src/utils.ts

@@ -6,8 +6,12 @@ export function removeBodyContainer(body: VNodeQuery): VNodeQuery {
   const ebody = body.querySelector('body')
   if (ebody || ehead) {
     const body = new VDocumentFragment()
-    ehead && body.appendChild(ehead.childNodes)
-    ebody && body.appendChild(ebody.children)
+    if (ehead) {
+      body.appendChild(ehead.childNodes)
+    }
+    if (ebody) {
+      body.appendChild(ebody.children)
+    }
     return body
   }
   return body

src/vcss.spec.tsx

@@ -1,4 +1,3 @@
-
 import { matchSelector } from './vcss'
 import { createHTMLDocument, h } from './vdom'
 

src/vdom.spec.tsx

@@ -141,7 +141,6 @@ describe('vDOM', () => {
   })
 
   it('should JSX components', () => {
-    // eslint-disable-next-line unused-imports/no-unused-vars
     function Welcome({ props, h }: any) {
       return (
         <h1>

src/vdom.ts

@@ -433,7 +433,10 @@ export class VElement extends VNodeQuery {
       const styleString = this.getAttribute('style')
       if (styleString) {
         let m: string[] | null
-        const re = /\s*([\w-]+)\s*:\s*([^;]+)/g
+
+        // Thanks to https://github.com/holtwick/zeed-dom/issues/12#issuecomment-2148998665
+        const re = /\s*([\w-]+)\s*:\s*((url\(.*?\)[^;]*|[^;]+))/gi
+
         // eslint-disable-next-line no-cond-assign
         while ((m = re.exec(styleString))) {
           const name = m[1]

src/vdomparser.ts

@@ -4,15 +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 { VDocType, VDocumentFragment, VElement, VHTMLDocument, VNode, VTextNode, document } from './vdom'
 
 // Makes sure we operate on VNodes
 export function vdom(obj: VNode | Buffer | string | null = null): VNode {
@@ -71,8 +63,9 @@ export function parseHTML(html: string): VDocumentFragment | VHTMLDocument {
             !(
               SELF_CLOSING_TAGS.includes(tagName.toLowerCase()) || isSelfClosing
             )
-          )
+          ) {
             stack.push(element)
+          }
         }
       },
       endElement(_tagName: string) {