8000 How to migrate appendHtml after dart 3.7? · Issue #60564 · dart-lang/sdk · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

How to migrate appendHtml after dart 3.7? #60564

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
jimmyshiau opened this issue Apr 18, 2025 · 6 comments
Open

How to migrate appendHtml after dart 3.7? #60564

jimmyshiau opened this issue Apr 18, 2025 · 6 comments
Labels
area-web Use area-web for Dart web related issues, including the DDC and dart2js compilers and JS interop. type-documentation A request to add or improve documentation type-question A question about expected behavior or functionality web-libraries Issues impacting dart:html, etc., libraries

Comments

@jimmyshiau
Copy link
jimmyshiau commented Apr 18, 2025 •
edited
Loading
  • 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>'));
@jimmyshiau jimmyshiau added the area-web Use area-web for Dart web related issues, including the DDC and dart2js compilers and JS interop. label Apr 18, 2025
@kevmoo
Copy link
Member
kevmoo commented Apr 18, 2025

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

CC @srujzs

@jimmyshiau
Copy link
Author

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

CC @srujzs

Yes

@ykmnkmi
Copy link
Contributor
ykmnkmi commented Apr 18, 2025

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
Copy link
Author

@ykmnkmi Thanks!

@mnordine
Copy link
Contributor
mnordine commented Apr 18, 2025 •
edited
Loading

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

@nshahan nshahan added web-libraries Issues impacting dart:html, etc., libraries type-documentation A request to add or improve documentation type-question A question about expected behavior or functionality labels Apr 18, 2025
@jimmyshiau
Copy link
Author
  • 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

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);

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area-web Use area-web for Dart web related issues, including the DDC and dart2js compilers and JS interop. type-documentation A request to add or improve documentation type-question A question about expected behavior or functionality web-libraries Issues impacting dart:html, etc., libraries
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@kevmoo @jimmyshiau @mnordine @nshahan @ykmnkmi
0