Last active
October 27, 2023 21:16
-
-
Save graphicbeacon/0a23381809fcddaffd553c9ad845b96f to your computer and use it in GitHub Desktop.
Final snippets for "How to use JavaScript libraries in your Dart applications" article
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // web/console.dart | |
| @JS('console') | |
| library console; | |
| import 'package:js/js.dart'; | |
| external void log(dynamic str); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- web/index.html --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="scaffolded-by" content="https://github.com/google/stagehand"> | |
| <title>js_interop_test</title> | |
| <link rel="icon" href="favicon.ico"> | |
| <!-- JS dependency pulled here --> | |
| <script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <script defer src="main.dart.js"></script> | |
| </head> | |
| <body> | |
| <div id="output"></div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // web/jquery.dart | |
| @JS() | |
| library jquery; | |
| import 'package:js/js.dart'; | |
| @JS() | |
| class jQuery { | |
| external factory jQuery(String selector); | |
| external int get length; | |
| external jQuery css(CssOptions options); | |
| external jQuery animate(AnimateOptions options); | |
| } | |
| @JS() | |
| @anonymous | |
| class CssOptions { | |
| external factory CssOptions({backgroundColor, height, position, width}); | |
| external dynamic get backgroundColor; // properties based on jQuery api | |
| external dynamic get height; | |
| external dynamic get position; | |
| external dynamic get width; | |
| } | |
| @JS() | |
| @anonymous | |
| class AnimateOptions { | |
| external factory AnimateOptions({left, top}); | |
| external dynamic get left; // properties based on jQuery api | |
| external dynamic get top; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // web/main.dart | |
| import './console.dart'; | |
| import './jquery.dart'; | |
| void main() { | |
| log('Hello world!'); | |
| jQuery('#output') | |
| .css(CssOptions( | |
| backgroundColor: 'green', | |
| height: 100, | |
| position: 'relative', | |
| width: 100)) | |
| .animate(AnimateOptions(left: 100, top: 100)); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # ./pubspec.yaml | |
| name: dart_js_interop | |
| description: A demonstration on how to use JavaScript libraries a Dart web application | |
| environment: | |
| sdk: '>=2.0.0-dev.68.0 <3.0.0' | |
| dependencies: | |
| js: ^0.6.0 | |
| dev_dependencies: | |
| build_runner: ^0.9.0 | |
| build_web_compilers: ^0.4.0 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Please post your question here https://reddit.com/r/dartlang