hpssjellis · November 15, 2019 20:16 · Aug 21, 2018 · Aug 21, 2018 · Aug 21, 2018
diff --git a/index.html b/index.html
@@ -1,3 +1,4 @@
+<!-- web/index.html -->
 <!DOCTYPE html>
 
 <html>
@@ -8,7 +9,6 @@
   <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="stylesheet" href="styles.css">
   <link rel="icon" href="favicon.ico">
 
   <!-- JS dependency pulled here -->

diff --git a/jquery.dart b/jquery.dart
@@ -16,7 +16,7 @@ class jQuery {
 @anonymous
 class CssOptions {
   external factory CssOptions({backgroundColor, height, position, width});
-  external dynamic get backgroundColor;
+  external dynamic get backgroundColor; // properties based on jQuery api
   external dynamic get height;
   external dynamic get position;
   external dynamic get width;
@@ -26,6 +26,6 @@ class CssOptions {
 @anonymous
 class AnimateOptions {
   external factory AnimateOptions({left, top});
-  external dynamic get left;
+  external dynamic get left; // properties based on jQuery api
   external dynamic get top;
 }
diff --git a/main.dart b/main.dart
@@ -1,3 +1,4 @@
+// web/main.dart
 import './console.dart';
 import './jquery.dart';
 

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,3 +1,4 @@
+# ./pubspec.yaml
 name: dart_js_interop
 description: A demonstration on how to use JavaScript libraries a Dart web application
 

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -0,0 +1,12 @@
+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
diff --git a/console.dart b/console.dart
@@ -0,0 +1,7 @@
+// web/console.dart
+@JS('console')
+library console;
+
+import 'package:js/js.dart';
+
+external void log(dynamic str);
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!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="stylesheet" href="styles.css">
+  <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>
diff --git a/jquery.dart b/jquery.dart
@@ -0,0 +1,31 @@
+// 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;
+  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;
+  external dynamic get top;
+}
diff --git a/main.dart b/main.dart
@@ -0,0 +1,14 @@
+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));
+}