code-style

Code Style

Brace Style

Single-line if without braces is OK only when the entire statement fits on one line:

// OK — fits on one line. But then we need an empty line after the statement, except there is another if, then we need an empty line after the last if.
if (x) doThing();

//OK
if (x) doThing();
if (y) doThingY();
if (z) do ThingZ();

let x = 1

//NOT OK
if (x) doThing();
let x = 1

// NOT OK — body wraps to the next line, needs braces
if (x)
  doThing();

// Correct
if (x) {
  doThing();
}

HTML Data Attributes

Always use key-value syntax. Never use bare/boolean data attributes.

<!-- BAD -->
<div data-active></div>

<!-- GOOD -->
<div data-active="true"></div>

Variable Naming

Use semantic, human-readable names. The name should say what the thing IS, not save keystrokes.

Don't	Do
ctx	context
c, cb	callback
obj	object or something more specific
val	value
tmp	temporary or something more specific
res	result or response
el	element

Exceptions: Loop variables (i, j) and lambda params where meaning is obvious from context ((item) => item.id) are fine.

Function Naming

Functions are verbs. Past-participle nouns (mountedPopup) lie about lifecycle, wrong for a factory that mounts lazily. Use createComponentPopup.

Conventions: createX/buildX (factory), getX (sync read), loadX/fetchX (async), isX/hasX (predicate), toX (transform), attachX/detachX (lifecycle), onX/handleX (event).

One word, not two: toggle already means open-if-closed/close-if-open. Don't write toggleOrShow. Same for closeAndReset, getOrCreate.

Plural follows the work: if a function grows to handle N where it handled 1, rename. detachPopup that now detaches info + context popups is detachPopups.

TypeScript

type over interface

Use type for object shapes. Never use interface unless extending a third-party interface.