How to migrate appendHtml after dart 3.7?

[jimmyshiau]

• Dart 3.6

final buffer = StringBuffer();
for (var i = 6; --i >= 0;) {
      buffer.write('<tr>xxxxx</tr>');

table.appendHtml(buffer.toString(), treeSanitizer: NodeTreeSanitizer.trusted);

• Is it only way to append element one by one after Dart 3.7?

for (var i = 6; --i >= 0;) {
      table.append(createTr('<td>....</td>'));

[kevmoo]

You're talking about dart:html vs pkg:web, right?

CC @srujzs

[jimmyshiau]

You're talking about dart:html vs pkg:web, right?

CC @srujzs

Yes

[ykmnkmi]

If (from dart:html source)

abstract class Element {
  void appendHtml(
    String text, {
    NodeValidator? validator,
    NodeTreeSanitizer? treeSanitizer,
  }) {
    this.insertAdjacentHtml(
      'beforeend',
      text,
      validator: validator,
      treeSanitizer: treeSanitizer,
    );
  }

  void insertAdjacentHtml(
    String where,
    String html, {
    NodeValidator? validator,
    NodeTreeSanitizer? treeSanitizer,
  }) {
    if (treeSanitizer is _TrustedHtmlTreeSanitizer) {
      _insertAdjacentHtml(where, html);
    } else {
      _insertAdjacentNode(
        where,
        createFragment(
          html,
          validator: validator,
          treeSanitizer: treeSanitizer,
        ),
      );
    }
  }

  @JSName('insertAdjacentHTML')
  void _insertAdjacentHtml(String where, String text) native;
}

abstract class NodeTreeSanitizer {
  static const NodeTreeSanitizer trusted = const _TrustedHtmlTreeSanitizer();
}

Then

final buffer = StringBuffer();

for (var i = 6; --i >= 0;) {
  buffer.write('<tr>xxxxx</tr>');
}

table.insertAdjacentHTML('beforeend', '$buffer'.toJS);

[jimmyshiau]

@ykmnkmi Thanks!

[mnordine]

@kevmoo I think there should be a "web apis migration" document for this kind of stuff.

[jimmyshiau]

• Here is our internal doc about upgrade

Element.html

• Dart 3.6: Element.html('<p><button>Button</button></p>')
• Dart 3.7:

      final template = HTMLTemplateElement();
      template.innerHTML = '<p><button>Button</button></p>'.toJS;
      return template.content.firstElementChild;

NodeTreeSanitizer.trusted

• How to migrate NodeValidatorBuilder web#250
• Dart 3.6:

element.setInnerHtml(html, treeSanitizer: NodeTreeSanitizer.trusted);

Element.html(html, treeSanitizer: NodeTreeSanitizer.trusted);

• Dart 3.7:

  if (trusted)
    cnt.setHTMLUnsafe(html.toJS);
  else
    cnt.innerHTML = html.toJS;

getComputedStyle()

• Dart 3.6: e.getComputedStyle().display
• Dart 3.7: window.getComputedStyle(e).display

Loop Element collection

• Dart 3.6:

for (final elem in parent.querySelectorAll('img'))
    print(elem);
for (final elem in parent.children)
    print(elem);

• Dart 3.7:
  • [feat] Adds helpers to convert js lists to a dart list (Resolves #281) web#286

for (final elem in JSImmutableListWrapper(parent.querySelectorAll('img')))
    print(elem);
for (final elem in JSImmutableListWrapper(parent.children))
    print(elem);

elem.children.clear();

• Dart 3.6: elem.children.clear();
• Dart 3.7: elem.innerHTML = ''.toJS;

elem.addEventListener(type, eventHandle, false);

• Dart 3.6:

elem.addEventListener('click, (e) {
    print('click);
}, false)

• Dart 3.7:

elem.addEventListener('click, (Event e) {
    print('click);
}.toJS, false.toJS)

allowInteropCaptureThis(void (self, _))

• Dart 3.6:

formater: allowInteropCaptureThis((self, _) {
  print(getProperty(self, 'name'));
});

• Dart 3.7:

formater:(JSObject self, _) {
  print(self.getProperty('name'.toJS));
}.toJSCaptureThis);

elem.appendHtml

• Dart 3.6: elem.appendHtml(html, treeSanitizer: NodeTreeSanitizer.trusted);
• Dart 3.7: elem.insertAdjacentHTML('beforeend', html.toJS)