diff --git a/package.json b/package.json index 930c1dd..04d847f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "zeed-dom", "type": "module", - "version": "0.15.0", + "version": "0.15.1", "description": "🌱 Lightweight offline DOM", "author": { "name": "Dirk Holtwick", diff --git a/src/htmlparser.spec.ts b/src/htmlparser.spec.ts index e8fc4e5..94cd7ae 100644 --- a/src/htmlparser.spec.ts +++ b/src/htmlparser.spec.ts @@ -54,11 +54,15 @@ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNv height: 100px;">Test`) as VHTMLDocument const node = dom.querySelector('#elem') expect(node).not.toBeNull() + expect(node?.style.length).toEqual(3) + expect(node?.style.getPropertyValue('width')).toEqual('200px') expect(node?.style).toMatchInlineSnapshot(` { "background-image": "url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy41LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMTQ3IDIwMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMxNDcgMjAwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc)", "backgroundImage": "url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy41LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMTQ3IDIwMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMxNDcgMjAwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc)", + "getPropertyValue": [Function], "height": "100px", + "length": 3, "width": "200px", } `) diff --git a/src/vdom.ts b/src/vdom.ts index 55877cc..f5f6b3a 100644 --- a/src/vdom.ts +++ b/src/vdom.ts @@ -351,11 +351,16 @@ interface Attr { value: string } +export type VElementStyle = Record & { + get length(): number + getPropertyValue: (name: string) => any +} + export class VElement extends VNodeQuery { _originalTagName: string _nodeName: string _attributes: Record - _styles: Record | undefined + _styles: VElementStyle | undefined _dataset: Record | undefined get nodeType() { @@ -429,9 +434,13 @@ export class VElement extends VNodeQuery { } /// See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style - get style() { + get style(): VElementStyle { if (this._styles == null) { - const styles = Object.assign({}, DEFAULTS[this.tagName.toLowerCase()] || {}) + // const styles = Object.assign({}, DEFAULTS[this.tagName.toLowerCase()] || {}) + + const styles: Record = {} + let count = 0 + const styleString = this.getAttribute('style') if (styleString) { let m: string[] | null @@ -441,15 +450,26 @@ export class VElement extends VNodeQuery { // eslint-disable-next-line no-cond-assign while ((m = re.exec(styleString))) { + ++count const name = m[1] const value = m[2].trim() styles[name] = value styles[toCamelCase(name)] = value } } - this._styles = styles + this._styles = { + get length(): number { + return count + }, + getPropertyValue(name: string) { + return styles[name] + }, + + ...DEFAULTS[this.tagName.toLowerCase()], + ...styles, + } } - return this._styles + return this._styles! } /// See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset