`Element.replaceChildren(node1, node2, node3, ...nodes)` / how to use `Function.apply` ?

[jonasfj]

In JS we can do:

containerForValues.replaceChildren(...values.map((value) => {
  const element = document.createElement('div');
  element.innerHTML = value;
  return element;
}));

In Dart we I tried using:

containerForValues.replaceChildren(
  values
      .map(
        (value) => HTMLDivElement()
          ..setHTMLUnsafe(value),
      )
      .toList()
      .toJS,
);

But this doesn't work, because the first argument can't be a list. So the list is converted to a String. Do my containerForValues ends up showing:

[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement]

:D

[ykmnkmi]

Using dart:js_interop_unsafe:

import 'dart:js_interop';
import 'dart:js_interop_unsafe';

import 'package:web/web.dart';

void main() {
  var container = document.querySelector('body') as Element;
  container.callMethodVarArgs('replaceChildren'.toJS, [/* ... */]);
}

Without:

import 'dart:js_interop';

import 'package:web/web.dart';

void main() {
  var container = document.querySelector('body') as Element;
  container.jsReplaceChildren.apply(container, <JSAny?>[/* */].toJS);
}

extension on Element {
  @JS('replaceChildren')
  external JSFunction get jsReplaceChildren;
}

extension on JSFunction {
  external R apply<R extends JSAny?>(JSAny? thisArgument, JSArray<JSAny?> arguments);
}

[srujzs]

@ykmnkmi nailed it. callMethodVarArgs is ultimately a JS Function.apply call, so the end result is the same.

[arnaud-secondlayer]

I also try to call replaceChildren and am facing the same issue.
It looks like if the parameter is a list of HTMLElement, it is converted to a String.
Basically I have 2 HTMLElements and I'd like to use replaceChildren.
I tried:

root.replaceChildren([a, b].toJS);

but it appends a String, not the 2 HTML elements.

[srujzs]

web/web/lib/src/dom/dom.dart

Line 1857 in c2d5f63

external void replaceChildren(JSAny nodes);

I believe you're coming across the same issue as #340. replaceChildren accepts any number of arguments, but we only expose one. An array won't help because it's expecting nodes. callMethodVarArgs is a fine workaround until the issue is fixed, but you can also expose your own extension method:

extension on Document {
  @JS('replaceChildren')
  external void replaceChildren2(JSAny node1, JSAny node2);
}