Skip to content

Commit cc7d172

Browse files
Clarify renames section on package:web page (#5676)
Fixes #5601
1 parent 1baafdb commit cc7d172

File tree

1 file changed

+35
-17
lines changed

1 file changed

+35
-17
lines changed

src/content/interop/js-interop/package-web.md

+35-17
Original file line numberDiff line numberDiff line change
@@ -111,28 +111,46 @@ You can address these either:
111111
- In your IDE, by selecting the `dart fix`: **Rename to '`package:web name`'**.
112112

113113
{% comment %}
114-
Maybe a pic here of menu selection in IDE?
115114
TODO: Update this documentation to refer to symbols instead of just types once
116115
we have a dart fix for that.
117116
{% endcomment -%}
118117

119118
The `dart fix` covers many of the common type renames.
120-
If you come across a `dart:html` type without a built-in fix, let us know by
121-
filing an [issue][].
122-
You can manually discover the `package:web` type name
123-
by looking up the `dart:html` class' `@Native` annotation.
124-
You can do this by either:
125-
126-
- Ctrl or cmd clicking the name in the IDE and choosing **Go to Definition**.
127-
- Searching for the name in the [`dart:html` API docs][html]
128-
and checking its page under *Annotations*.
129-
130-
The `@Native` annotation tells the compiler to treat any JS object of that type
131-
as the class that it annotates.
132-
133-
Similarly, if you find an API with the keyword `native` in `dart:html` that
134-
doesn't have an equivalent in `package:web`, check to see if there was a rename
135-
with the `@JSName` annotation.
119+
If you come across a `dart:html` type without a `dart fix` to rename it,
120+
first let us know by filing an [issue][].
121+
122+
Then, you can try manually discovering the `package:web` type name of an
123+
existing `dart:html` member by looking up its definition.
124+
The value of the `@Native` annotation on a `dart:html` member definition
125+
tells the compiler to treat any JS object of that type as the Dart class
126+
that it annotates. For example, the `@Native` annotation tells us that the
127+
native JS name of `dart:html`'s `HtmlElement` member is `HTMLElement`,
128+
so the `package:web` name will also be `HTMLElement`:
129+
130+
```dart
131+
@Native("HTMLElement")
132+
class HtmlElement extends Element implements NoncedElement { }
133+
```
134+
135+
To find the `dart:html` definition for an undefined member in `package:web`,
136+
try either of the following methods:
137+
138+
- Ctrl or command click the undefined name in the IDE and choose
139+
**Go to Definition**.
140+
- Search for the name in the [`dart:html` API docs][html]
141+
and check its page under *Annotations*.
142+
143+
Similarly, you might find an undefined `package:web` API whose corresponding
144+
`dart:html` member's definition uses the keyword `native`.
145+
Check if the definition uses the `@JSName` annotation for a rename;
146+
the value of the annotation will tell you the name the member uses in
147+
`package:web`:
148+
149+
```dart
150+
@JSName('appendChild')
151+
Node append(Node node) native;
152+
```
153+
136154
`native` is an internal keyword that means the same as `external` in this
137155
context.
138156

0 commit comments

Comments
 (0)