Skip to content

Commit 8f19b20

Browse files
johanneswilmjohanneswilm
committed
use checkElementType everywhere, relates to #126 
1 parent 4e3453c commit 8f19b20

File tree

16 files changed

+298
-246
lines changed

16 files changed

+298
-246
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,7 @@ module.exports = {
241241
}
242242
],
243243
"semi-style": ["error", "last"],
244-
"sort-imports": "error",
244+
"sort-imports": "off",
245245
"sort-keys": "off",
246246
"sort-vars": "off",
247247
"space-before-blocks": "error",

‎browser/diffDOM.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎browser/diffDOM.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,19 +36,19 @@
3636
"devDependencies": {
3737
"@babel/preset-env": "^7.19.4",
3838
"@rollup/plugin-buble": "^1.0.1",
39-
"@rollup/plugin-terser": "^0.3.0",
39+
"@rollup/plugin-terser": "^0.4.4",
4040
"@rollup/plugin-typescript": "^11.0.0",
41-
"@typescript-eslint/eslint-plugin": "^5.48.1",
42-
"@typescript-eslint/parser": "^5.48.1",
41+
"@typescript-eslint/eslint-plugin": "^6.11.0",
42+
"@typescript-eslint/parser": "^6.11.0",
4343
"eslint": "^8.26.0",
44-
"eslint-config-prettier": "^8.5.0",
45-
"eslint-plugin-prettier": "^4.2.1",
44+
"eslint-config-prettier": "^9.0.0",
45+
"eslint-plugin-prettier": "^5.0.1",
4646
"jest": "^29.3.1",
4747
"jest-environment-jsdom": "^29.2.2",
48-
"prettier": "^2.7.1",
49-
"rollup": "^3.10.0",
50-
"rollup-plugin-dts": "^5.1.1",
48+
"prettier": "^3.1.0",
49+
"rollup": "^4.4.1",
50+
"rollup-plugin-dts": "^6.1.0",
5151
"tslib": "^2.5.0",
52-
"updates": "^13.1.13"
52+
"updates": "^15.0.4"
5353
}
5454
}

‎src/TraceLogger.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {checkElementType} from "./diffDOM/helpers"
1+
import { checkElementType } from "./diffDOM/helpers"
22

33
/**
44
* Use TraceLogger to figure out function calls inside
@@ -65,7 +65,7 @@ export class TraceLogger {
6565
| number
6666
| boolean
6767
| false
68-
| (string | HTMLElement | number | boolean | false)[]
68+
| (string | HTMLElement | number | boolean | false)[],
6969
) {
7070
this.padding += this.pad
7171
this.log(`├─> entering ${fn}`, args)
@@ -79,12 +79,12 @@ export class TraceLogger {
7979
| number
8080
| boolean
8181
| false
82-
| (string | HTMLElement | number | boolean | false)[]
82+
| (string | HTMLElement | number | boolean | false)[],
8383
) {
8484
this.log("│<──┘ generated return value", result)
8585
this.padding = this.padding.substring(
8686
0,
87-
this.padding.length - this.pad.length
87+
this.padding.length - this.pad.length,
8888
)
8989
}
9090
// log message formatting
@@ -107,7 +107,7 @@ export class TraceLogger {
107107
| number
108108
| boolean
109109
| false
110-
| (string | HTMLElement | number | boolean | false)[]
110+
| (string | HTMLElement | number | boolean | false)[],
111111
) {
112112
if (!v) {
113113
return "<falsey>"

‎src/diffDOM/dom/apply.ts‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { DiffDOMOptions, diffType, nodeType } from "../types"
2-
import { Diff } from "../helpers"
2+
import { Diff, checkElementType } from "../helpers"
33

44
import { objToNode } from "./fromVirtual"
55

66
// ===== Apply a diff =====
77

88
const getFromRoute = (
99
node: Element,
10-
route: number[]
10+
route: number[],
1111
): Element | Text | false => {
1212
route = route.slice()
1313
while (route.length > 0) {
@@ -20,15 +20,15 @@ const getFromRoute = (
2020
export function applyDiff(
2121
tree: Element,
2222
diff: diffType,
23-
options: DiffDOMOptions // {preDiffApply, postDiffApply, textDiff, valueDiffing, _const}
23+
options: DiffDOMOptions, // {preDiffApply, postDiffApply, textDiff, valueDiffing, _const}
2424
) {
2525
const action = diff[options._const.action] as string | number
2626
const route = diff[options._const.route] as number[]
2727
let node
2828

2929
if (
3030
![options._const.addElement, options._const.addTextElement].includes(
31-
action
31+
action,
3232
)
3333
) {
3434
// For adding nodes, we calculate the route later on. It's different because it includes the position of the newly added item.
@@ -51,46 +51,46 @@ export function applyDiff(
5151

5252
switch (action) {
5353
case options._const.addAttribute:
54-
if (!node || !(node instanceof Element)) {
54+
if (!node || !checkElementType(node, "Element")) {
5555
return false
5656
}
5757
node.setAttribute(
5858
diff[options._const.name] as string,
59-
diff[options._const.value] as string
59+
diff[options._const.value] as string,
6060
)
6161
break
6262
case options._const.modifyAttribute:
63-
if (!node || !(node instanceof Element)) {
63+
if (!node || !checkElementType(node, "Element")) {
6464
return false
6565
}
6666
node.setAttribute(
6767
diff[options._const.name] as string,
68-
diff[options._const.newValue] as string
68+
diff[options._const.newValue] as string,
6969
)
7070
if (
71-
node instanceof HTMLInputElement &&
71+
checkElementType(node, "HTMLInputElement") &&
7272
diff[options._const.name] === "value"
7373
) {
7474
node.value = diff[options._const.newValue] as string
7575
}
7676
break
7777
case options._const.removeAttribute:
78-
if (!node || !(node instanceof Element)) {
78+
if (!node || !checkElementType(node, "Element")) {
7979
return false
8080
}
8181
node.removeAttribute(diff[options._const.name] as string)
8282
break
8383
case options._const.modifyTextElement:
84-
if (!node || !(node instanceof Text)) {
84+
if (!node || !checkElementType(node, "Text")) {
8585
return false
8686
}
8787
options.textDiff(
8888
node,
8989
node.data,
9090
diff[options._const.oldValue] as string,
91-
diff[options._const.newValue] as string
91+
diff[options._const.newValue] as string,
9292
)
93-
if (node.parentNode instanceof HTMLTextAreaElement) {
93+
if (checkElementType(node.parentNode, "HTMLTextAreaElement")) {
9494
node.parentNode.value = diff[options._const.newValue] as string
9595
}
9696
break
@@ -101,14 +101,14 @@ export function applyDiff(
101101
node.value = diff[options._const.newValue]
102102
break
103103
case options._const.modifyComment:
104-
if (!node || !(node instanceof Comment)) {
104+
if (!node || !checkElementType(node, "Comment")) {
105105
return false
106106
}
107107
options.textDiff(
108108
node,
109109
node.data,
110110
diff[options._const.oldValue] as string,
111-
diff[options._const.newValue] as string
111+
diff[options._const.newValue] as string,
112112
)
113113
break
114114
case options._const.modifyChecked:
@@ -133,19 +133,19 @@ export function applyDiff(
133133
objToNode(
134134
diff[options._const.newValue] as nodeType,
135135
insideSvg,
136-
options
136+
options,
137137
),
138-
node
138+
node,
139139
)
140140
break
141141
}
142142
case options._const.relocateGroup:
143143
nodeArray = Array(
144-
...new Array(diff[options._const.groupLength])
144+
...new Array(diff[options._const.groupLength]),
145145
).map(() =>
146146
node.removeChild(
147-
node.childNodes[diff[options._const.from] as number]
148-
)
147+
node.childNodes[diff[options._const.from] as number],
148+
),
149149
)
150150
nodeArray.forEach((childNode, index) => {
151151
if (index === 0) {
@@ -162,16 +162,16 @@ export function applyDiff(
162162
const parentRoute = route.slice()
163163
const c: number = parentRoute.splice(parentRoute.length - 1, 1)[0]
164164
node = getFromRoute(tree, parentRoute)
165-
if (!(node instanceof Element)) {
165+
if (!checkElementType(node, "Element")) {
166166
return false
167167
}
168168
node.insertBefore(
169169
objToNode(
170170
diff[options._const.element] as nodeType,
171171
node.namespaceURI === "http://www.w3.org/2000/svg",
172-
options
172+
options,
173173
),
174-
node.childNodes[c] || null
174+
node.childNodes[c] || null,
175175
)
176176
break
177177
}
@@ -181,7 +181,7 @@ export function applyDiff(
181181
}
182182
const parentNode = node.parentNode
183183
parentNode.removeChild(node)
184-
if (parentNode instanceof HTMLTextAreaElement) {
184+
if (checkElementType(parentNode, "HTMLTextAreaElement")) {
185185
parentNode.value = ""
186186
}
187187
break
@@ -190,14 +190,14 @@ export function applyDiff(
190190
const parentRoute = route.slice()
191191
const c: number = parentRoute.splice(parentRoute.length - 1, 1)[0]
192192
newNode = options.document.createTextNode(
193-
diff[options._const.value] as string
193+
diff[options._const.value] as string,
194194
)
195195
node = getFromRoute(tree, parentRoute)
196196
if (!node.childNodes) {
197197
return false
198198
}
199199
node.insertBefore(newNode, node.childNodes[c] || null)
200-
if (node.parentNode instanceof HTMLTextAreaElement) {
200+
if (checkElementType(node.parentNode, "HTMLTextAreaElement")) {
201201
node.parentNode.value = diff[options._const.value] as string
202202
}
203203
break
@@ -220,9 +220,9 @@ export function applyDiff(
220220
export function applyDOM(
221221
tree: Element,
222222
diffs: (Diff | diffType)[],
223-
options: DiffDOMOptions
223+
options: DiffDOMOptions,
224224
) {
225225
return diffs.every((diff: Diff | diffType) =>
226-
applyDiff(tree, diff as diffType, options)
226+
applyDiff(tree, diff as diffType, options),
227227
)
228228
}

‎src/diffDOM/dom/fromVirtual.ts‎

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { DiffDOMOptions, elementNodeType, textNodeType } from "../types"
2+
import { checkElementType } from "../helpers"
23

34
export function objToNode(
45
objNode: elementNodeType,
56
insideSvg: boolean,
6-
options: DiffDOMOptions
7+
options: DiffDOMOptions,
78
) {
89
let node: Element | Text | Comment
910
if (objNode.nodeName === "#text") {
@@ -14,48 +15,64 @@ export function objToNode(
1415
if (insideSvg) {
1516
node = options.document.createElementNS(
1617
"http://www.w3.org/2000/svg",
17-
objNode.nodeName
18+
objNode.nodeName,
1819
)
1920
} else if (objNode.nodeName.toLowerCase() === "svg") {
2021
node = options.document.createElementNS(
2122
"http://www.w3.org/2000/svg",
22-
"svg"
23+
"svg",
2324
)
2425
insideSvg = true
2526
} else {
2627
node = options.document.createElement(objNode.nodeName)
2728
}
2829
if (objNode.attributes) {
2930
Object.entries(objNode.attributes).forEach(([key, value]) =>
30-
(node as Element).setAttribute(key, value)
31+
(node as Element).setAttribute(key, value),
3132
)
3233
}
3334
if (objNode.childNodes) {
3435
node = node as Element
3536
objNode.childNodes.forEach(
3637
(childNode: elementNodeType | textNodeType) =>
37-
node.appendChild(objToNode(childNode, insideSvg, options))
38+
node.appendChild(objToNode(childNode, insideSvg, options)),
3839
)
3940
}
4041
if (options.valueDiffing) {
4142
if (
4243
objNode.value &&
43-
(node instanceof HTMLButtonElement ||
44-
node instanceof HTMLDataElement ||
45-
node instanceof HTMLInputElement ||
46-
node instanceof HTMLLIElement ||
47-
node instanceof HTMLMeterElement ||
48-
node instanceof HTMLOptionElement ||
49-
node instanceof HTMLProgressElement ||
50-
node instanceof HTMLParamElement)
44+
checkElementType(
45+
node,
46+
"HTMLButtonElement",
47+
"HTMLDataElement",
48+
"HTMLInputElement",
49+
"HTMLLIElement",
50+
"HTMLMeterElement",
51+
"HTMLOptionElement",
52+
"HTMLProgressElement",
53+
"HTMLParamElement",
54+
)
5155
) {
52-
node.value = objNode.value
56+
;(
57+
node as
58+
| HTMLButtonElement
59+
| HTMLDataElement
60+
| HTMLInputElement
61+
| HTMLLIElement
62+
| HTMLMeterElement
63+
| HTMLOptionElement
64+
| HTMLProgressElement
65+
| HTMLParamElement
66+
).value = objNode.value
5367
}
54-
if (objNode.checked && node instanceof HTMLInputElement) {
55-
node.checked = objNode.checked
68+
if (objNode.checked && checkElementType(node, "HTMLInputElement")) {
69+
;(node as HTMLInputElement).checked = objNode.checked
5670
}
57-
if (objNode.selected && node instanceof HTMLOptionElement) {
58-
node.selected = objNode.selected
71+
if (
72+
objNode.selected &&
73+
checkElementType(node, "HTMLOptionElement")
74+
) {
75+
;(node as HTMLOptionElement).selected = objNode.selected
5976
}
6077
}
6178
}

‎src/diffDOM/dom/undo.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ function swap(obj: object, p1: string | number, p2: string | number) {
1313
function undoDiff(
1414
tree: Element,
1515
diff: diffType,
16-
options: DiffDOMOptions // {preDiffApply, postDiffApply, textDiff, valueDiffing, _const}
16+
options: DiffDOMOptions, // {preDiffApply, postDiffApply, textDiff, valueDiffing, _const}
1717
) {
1818
switch (diff[options._const.action]) {
1919
case options._const.addAttribute:
@@ -80,7 +80,7 @@ function undoDiff(
8080
export function undoDOM(
8181
tree: Element,
8282
diffs: (diffType | Diff)[],
83-
options: DiffDOMOptions
83+
options: DiffDOMOptions,
8484
) {
8585
diffs = diffs.slice()
8686
diffs.reverse()

0 commit comments

Comments
 (0)