Please find below three different ways of implementing some ReactiveController
with Lit
.
A typical ReactiveController
implementation with Lit
looks like Pattern 1
.
Please be aware that in Pattern 2
and Pattern 3
there's no implements ReactiveController
as all methods of interface ReactiveController
are optional by design.
Pattern 3
uses a factory function to create objects of type typeof SomeController
. This has for example the advantage that some day in future, depending on the arguments
different subtypes of SomeController may be returned, which is not possible with Pattern 1
and Pattern 2
.
Questions:
Are
Pattern 2
andPattern 3
in some way kinda violatingLit
's ReactiveController model/idea?In
Pattern 1
: Are there real-world use cases where instances ofSomeController
will be passed to someaddController
method a second time? If no, what do I really need those public methodshostConnected
andhostDisconnected
for and why not just always usePattern 2
orPattern 3
instead (except for "matter of taste" and maybe code readability)?
// Pattern 1
export class SomeController implements ReactiveController {
....
constructor(host: ReactiveControllerHost, ...) {
...
host.addController(this);
...
}
hostConnected() {
...
}
hostDisconnected() {
...
}
...
}
The exact same controller can be implemented in this way:
// Pattern 2
export class SomeController {
...
constructor(host: ReactiveControllerHost, ....) {
....
host.addController({
hostConnected() {
...
},
hostDisconnected() {
...
}
});
}
...
}
Also, using a factory function is possible:
// Pattern 3
export function getSomeController(...): typeof SomeController {
return new SomeController(...);
}
// class SomeController class is local, will not be exported
class SomeController {
....
constructor(host: ReactiveControllerHost, ....) {
...
host.addController({
hostConnected() {
....
},
hostDisconnected() {
....
}
});
}
...
}