-
-
Save hpssjellis/ed2413a7287ddc966e2852d98f1aa3c9 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