Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-02 14:27:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add unicorn lint rules - DOM built-in functions (#628)

Browse Source 
- Prefer append(), remove(), replaceAll()
- Wrap nested ternaries in parenthesis
This commit is contained in:
filtered
2025-02-27 20:18:25 +11:00
committed by GitHub
parent 6f51767451
commit 1e8938ceff
11 changed files with 60 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
eslint.config.js
View File

@@ -62,6 +62,12 @@ export default tseslint.config(
{
rules: {
"unicorn/better-regex": "error",
"unicorn/prefer-dom-node-append": "error",
"unicorn/prefer-dom-node-remove": "error",
"unicorn/no-array-for-each": "error",
"unicorn/empty-brace-spaces": "error",
"unicorn/no-nested-ternary": "error",
"unicorn/prefer-string-replace-all": "error",
// Node rules: dev dependency config, etc.
"unicorn/prefer-node-protocol": "error",

10
src/ContextMenu.ts
View File

@@ -122,7 +122,7 @@ export class ContextMenu {
const element = document.createElement("div")
element.className = "litemenu-title"
element.innerHTML = options.title
root.appendChild(element)
root.append(element)
}
// entries
@@ -132,7 +132,7 @@ export class ContextMenu {
if (typeof name !== "string") {
name = name != null
? name.content === undefined ? String(name) : name.content
? (name.content === undefined ? String(name) : name.content)
: name
}
@@ -151,9 +151,9 @@ export class ContextMenu {
const root_document = ownerDocument || document
if (root_document.fullscreenElement)
root_document.fullscreenElement.appendChild(root)
root_document.fullscreenElement.append(root)
else
root_document.body.appendChild(root)
root_document.body.append(root)
// compute best position
let left = options.left || 0
@@ -231,7 +231,7 @@ export class ContextMenu {
}
}
this.root.appendChild(element)
this.root.append(element)
if (!disabled) element.addEventListener("click", inner_onclick)
if (!disabled && options.autoopen)
element.addEventListener("pointerenter", inner_over)

2
src/CurveEditor.ts
View File

@@ -81,7 +81,7 @@ export class CurveEditor {
for (const [i, p] of points.entries()) {
ctx.fillStyle = this.selected == i
? "#FFF"
: this.nearest == i ? "#DDD" : "#AAA"
: (this.nearest == i ? "#DDD" : "#AAA")
ctx.beginPath()
ctx.arc(p[0] * w, (1.0 - p[1]) * h, 2, 0, Math.PI * 2)
ctx.fill()

52
src/LGraphCanvas.ts
View File

@@ -1213,7 +1213,7 @@ export class LGraphCanvas implements ConnectionColorContext {
dialog.innerHTML =
"<span class='name'></span><input autofocus type='text' class='value'/><button>OK</button>"
dialog.close = function () {
dialog.parentNode?.removeChild(dialog)
dialog.remove()
}
const title = dialog.querySelector(".name")
title.innerText = property
@@ -1261,7 +1261,7 @@ export class LGraphCanvas implements ConnectionColorContext {
const button = dialog.querySelector("button")
button.addEventListener("click", inner)
canvasEl.parentNode.appendChild(dialog)
canvasEl.parentNode.append(dialog)
input?.focus()
@@ -1293,7 +1293,7 @@ export class LGraphCanvas implements ConnectionColorContext {
value = Boolean(value)
}
node[property] = value
dialog.parentNode?.removeChild(dialog)
dialog.remove()
canvas.setDirty(true, true)
}
}
@@ -5924,13 +5924,13 @@ export class LGraphCanvas implements ConnectionColorContext {
dialog.close = function () {
that.prompt_box = null
if (dialog.parentNode) {
dialog.parentNode.removeChild(dialog)
dialog.remove()
}
}
const graphcanvas = LGraphCanvas.active_canvas
const canvas = graphcanvas.canvas
canvas.parentNode.appendChild(dialog)
canvas.parentNode.append(dialog)
if (this.ds.scale > 1) dialog.style.transform = "scale(" + this.ds.scale + ")"
@@ -6079,9 +6079,9 @@ export class LGraphCanvas implements ConnectionColorContext {
dialog.innerHTML += "<div class='helper'></div>"
if (root_document.fullscreenElement) {
root_document.fullscreenElement.appendChild(dialog)
root_document.fullscreenElement.append(dialog)
} else {
root_document.body.appendChild(dialog)
root_document.body.append(dialog)
root_document.body.style.overflow = "hidden"
}
@@ -6104,7 +6104,7 @@ export class LGraphCanvas implements ConnectionColorContext {
setTimeout(function () {
that.canvas.focus()
}, 20)
dialog.parentNode?.removeChild(dialog)
dialog.remove()
}
if (this.ds.scale > 1) {
@@ -6222,7 +6222,7 @@ export class LGraphCanvas implements ConnectionColorContext {
const opt = document.createElement("option")
opt.value = aSlots[iK]
opt.innerHTML = aSlots[iK]
selIn.appendChild(opt)
selIn.append(opt)
if (
// @ts-expect-error
options.type_filter_in !== false &&
@@ -6258,7 +6258,7 @@ export class LGraphCanvas implements ConnectionColorContext {
const opt = document.createElement("option")
opt.value = aSlots[iK]
opt.innerHTML = aSlots[iK]
selOut.appendChild(opt)
selOut.append(opt)
if (
options.type_filter_out !== false &&
(options.type_filter_out + "").toLowerCase() ==
@@ -6561,7 +6561,7 @@ export class LGraphCanvas implements ConnectionColorContext {
help.addEventListener("click", function () {
select(unescape(this.dataset["type"]))
})
helper.appendChild(help)
helper.append(help)
}
}
@@ -6744,7 +6744,7 @@ export class LGraphCanvas implements ConnectionColorContext {
dialog.style.left = offsetx + "px"
dialog.style.top = offsety + "px"
this.canvas.parentNode.appendChild(dialog)
this.canvas.parentNode.append(dialog)
// acheck for input and use default behaviour: save on enter, close on esc
if (options.checkForInput) {
@@ -6772,7 +6772,7 @@ export class LGraphCanvas implements ConnectionColorContext {
dialog.is_modified = true
}
dialog.close = function () {
dialog.parentNode?.removeChild(dialog)
dialog.remove()
}
let dialogCloseTimer = null
@@ -6832,7 +6832,7 @@ export class LGraphCanvas implements ConnectionColorContext {
close.addEventListener("click", function () {
root.close()
})
root.header.appendChild(close)
root.header.append(close)
}
root.title_element = root.querySelector(".dialog-title")
root.title_element.innerText = title
@@ -6842,10 +6842,8 @@ export class LGraphCanvas implements ConnectionColorContext {
root.close = function () {
if (typeof root.onClose == "function") root.onClose()
root.parentNode?.removeChild(root)
/* XXX CHECK THIS */
this.parentNode?.removeChild(this)
/* XXX this was not working, was fixed with an IF, check this */
root.remove()
this.remove()
}
// function to swap panel content
@@ -6881,8 +6879,8 @@ export class LGraphCanvas implements ConnectionColorContext {
const elem = document.createElement("div")
if (classname) elem.className = classname
elem.innerHTML = code
if (on_footer) root.footer.appendChild(elem)
else root.content.appendChild(elem)
if (on_footer) root.footer.append(elem)
else root.content.append(elem)
return elem
}
@@ -6893,14 +6891,14 @@ export class LGraphCanvas implements ConnectionColorContext {
elem.options = options
elem.classList.add("btn")
elem.addEventListener("click", callback)
root.footer.appendChild(elem)
root.footer.append(elem)
return elem
}
root.addSeparator = function () {
const elem = document.createElement("div")
elem.className = "separator"
root.content.appendChild(elem)
root.content.append(elem)
}
root.addWidget = function (type, name, value, options, callback) {
@@ -6982,7 +6980,7 @@ export class LGraphCanvas implements ConnectionColorContext {
})
}
root.content.appendChild(elem)
root.content.append(elem)
function innerChange(name, value) {
options.callback?.(name, value, options)
@@ -7105,7 +7103,7 @@ export class LGraphCanvas implements ConnectionColorContext {
const fDoneWith = function () {
panel.toggleAltContent(false)
panel.toggleFooterVisibility(true)
textarea.parentNode.removeChild(textarea)
textarea.remove()
panel.classList.add("settings")
panel.classList.remove("centered")
inner_refresh()
@@ -7125,15 +7123,15 @@ export class LGraphCanvas implements ConnectionColorContext {
node.setProperty(propname, textarea.value)
fDoneWith()
})
panel.alt_content.appendChild(assign)
panel.alt_content.append(assign)
const button = panel.addButton("Close", fDoneWith)
button.style.float = "right"
panel.alt_content.appendChild(button)
panel.alt_content.append(button)
}
inner_refresh()
this.canvas.parentNode.appendChild(panel)
this.canvas.parentNode.append(panel)
}
checkPanels(): void {

4
src/LGraphNode.ts
View File

@@ -231,9 +231,9 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
if (LiteGraph.node_box_coloured_when_on) {
colState = this.action_triggered
? "#FFF"
: this.execute_triggered
: (this.execute_triggered
? "#AAA"
: colState
: colState)
}
return this.boxcolor || colState || LiteGraph.NODE_DEFAULT_BOXCOLOR

16
src/LiteGraphGlobal.ts
View File

@@ -552,8 +552,8 @@ export class LiteGraphGlobal {
const dynamicScript = document.createElement("script")
dynamicScript.type = "text/javascript"
dynamicScript.src = src
docHeadObj.appendChild(dynamicScript)
docHeadObj.removeChild(script_file)
docHeadObj.append(dynamicScript)
script_file.remove()
} catch (err) {
if (this.throw_errors) throw err
if (this.debug) console.log("Error while reloading " + src)
@@ -583,7 +583,7 @@ export class LiteGraphGlobal {
*/
uuidv4(): string {
// @ts-ignore
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, a =>
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replaceAll(/[018]/g, a =>
(a ^ ((Math.random() * 16) >> (a / 4))).toString(16))
}
@@ -632,12 +632,12 @@ export class LiteGraphGlobal {
// used to create nodes from wrapping functions
getParameterNames(func: (...args: any) => any): string[] {
return (func + "")
.replace(/\/\/.*$/gm, "") // strip single-line comments
.replace(/\s+/g, "") // strip white space
.replace(/\/\*[^*/]*\*\//g, "") // strip multi-line comments /**/
.replaceAll(/\/\/.*$/gm, "") // strip single-line comments
.replaceAll(/\s+/g, "") // strip white space
.replaceAll(/\/\*[^*/]*\*\//g, "") // strip multi-line comments /**/
.split("){", 1)[0]
.replace(/^[^(]*\(/, "") // extract the parameters
.replace(/=[^,]+/g, "") // strip any ES6 defaults
.replaceAll(/=[^,]+/g, "") // strip any ES6 defaults
.split(",")
.filter(Boolean) // split & filter [""]
}
@@ -836,7 +836,7 @@ export class LiteGraphGlobal {
if ("close" in result && typeof result.close === "function") {
result.close()
} else if (result.parentNode) {
result.parentNode.removeChild(result)
result.remove()
}
}
}

2
src/litegraph.ts
View File

@@ -91,7 +91,7 @@ export type {
} from "./types/serialisation"
export function clamp(v: number, a: number, b: number): number {
return a > v ? a : b < v ? b : v
return a > v ? a : (b < v ? b : v)
}
// Load legacy polyfills

2
src/types/globalEnums.ts
View File

@@ -27,7 +27,7 @@ export enum CanvasItem {
/** No items / none */
Nothing = 0,
/** At least one node */
Node = 1 << 0,
Node = 1,
/** At least one group */
Group = 1 << 1,
/** A reroute (not its path) */

4
src/widgets/ComboWidget.ts
View File

@@ -147,9 +147,9 @@ export class ComboWidget extends BaseWidget implements IComboWidget {
// Determine if clicked on left/right arrows
const delta = x < 40
? -1
: x > width - 40
: (x > width - 40
? 1
: 0
: 0)
// Get values
let values = this.options.values

8
src/widgets/KnobWidget.ts
View File

@@ -140,10 +140,10 @@ export class KnobWidget extends BaseWidget implements IKnobWidget {
arc_center.y,
)
const gs = gradient_stops.split(";")
gs.forEach((stop, index) => {
for (const [index, stop] of gs.entries()) {
console.log(stop)
gradient.addColorStop(index, stop.trim())
})
}
ctx.strokeStyle = gradient
const value_end_angle =
@@ -240,9 +240,9 @@ export class KnobWidget extends BaseWidget implements IKnobWidget {
const step_with_shift_modifier = e.shiftKey
? step_for.shift
: use_y
: (use_y
? step_for.delta_y
: step
: step)
// HACK: For some reason, the front-end multiplies step by 10, this brings it down to the advertised value
// SEE: src/utils/mathUtil.ts@getNumberDefaults in front end
const deltaValue = adjustment * step_with_shift_modifier / 10

10
src/widgets/NumberWidget.ts
View File

@@ -105,9 +105,9 @@ export class NumberWidget extends BaseWidget implements INumericWidget {
// Determine if clicked on left/right arrows
const delta = x < 40
? -1
: x > width - 40
: (x > width - 40
? 1
: 0
: 0)
if (delta) {
// Handle left/right arrow clicks
@@ -131,7 +131,7 @@ export class NumberWidget extends BaseWidget implements INumericWidget {
// Solve the equation if possible
try {
v = eval(v)
} catch { }
} catch {}
}
const newValue = Number(v)
if (!isNaN(newValue)) {
@@ -154,9 +154,9 @@ export class NumberWidget extends BaseWidget implements INumericWidget {
const x = e.canvasX - node.pos[0]
const delta = x < 40
? -1
: x > width - 40
: (x > width - 40
? 1
: 0
: 0)
if (delta && (x > -3 && x < width + 3)) return