Trying to Figure Out Query

And now, the hints.

With Dart 1.0 imminent, I am in pretty good shape with my various packages and getting close with Dart for Hipsters. One of the things that I need to figure out is how to handle query() and queryAll(). As the tests in ICE Code Editor are showing, these two methods are deprecated:

➜  ice-code-editor git:(master) ✗ ./test/test_runner.sh
Analyzing lib/ice.dart...
[hint] 'queryAll' is deprecated (/home/chris/repos/ice-code-editor/lib/editor.dart, line 126, col 5)
[hint] 'query' is deprecated (/home/chris/repos/ice-code-editor/lib/editor.dart, line 135, col 5)
[hint] 'query' is deprecated (/home/chris/repos/ice-code-editor/lib/editor.dart, line 159, col 23)
...

These are not deprecated so much by the Dart team as by a recent change by the DOM specification, which is introducing new query() and queryAll().

There is an obvious fix—to replace these methods with querySelector() and querySelectorAll(). So I start with that:

  showCode() {
    editor_el.style.visibility = 'visible';
    querySelectorAll('.ace_print-margin').forEach((e) { e.style.visibility = 'visible'; });

    _ace.renderer.onResize();
    focus();
  }

And that still works. That is not a surprise since it is the same method, just renamed. Once I change this everywhere, my code still works and I no longer have any deprecation hints. But I am left with much larger method names.

My problem is that I don't really understand the semantics of the DOM's new query() and queryAll() methods. I spend a good deal of time trying to make sense of the proposed specs, but until I have actual code, it is hard to get a sense of what works and what does not.

My best guess is that the new query() and queryAll() will allow matches even when some of the selectors are outside of the current element whereas querySelector() needs the entire selector to be under the current element. But like I said, until I have a browser that implements this, I do not think my brain capable of reading the specs well enough to draw a bead on how this will work.

That said, I think that I am safe continuing to use query() and queryAll() in the book—at least in the manner in which I have been doing so. And the way that I have been doing so is to query for either ID selectors ('#foo') or class selectors ('.bar') under the current element. And I think the results for those will remain the same between query() and querySelector(). In other words, hopefully the deprecation warnings will go away and everything will continue to behave the same. Which is another reason why I have so many tests, I suppose.


Day #932

‹prev | My Chain | next›