chore: Update dependencies and to Pub Workspaces (#102)

# Description

* Migrates to pub workspaces
* Migrates to package:web (from dart:html)
* Makes examples slightly more efficient
* Cleans up the new lint warnings

## Checklist

<!-- Before you create this PR confirm that it meets all requirements
listed below by checking the
relevant checkboxes (`[x]`). This will ensure a smooth and quick review
process. -->

- [x] The title of my PR starts with a [Conventional Commit] prefix
(`fix:`, `feat:`, `docs:` etc).
- [x] I have read the [Contributor Guide] and followed the process
outlined for submitting PRs.
- [x] I have updated/added tests for ALL new/updated/fixed
functionality.
- [x] I have updated/added relevant documentation in `docs` and added
dartdoc comments with `///`.
- [x] I have updated/added relevant examples in `examples`.

## Breaking Change

<!-- Does your PR require Flame users to manually update their apps to
accommodate your change?

If the PR is a breaking change this should be indicated with suffix "!"
(for example, `feat!:`, `fix!:`). See [Conventional Commit] for details.
-->

- [ ] Yes, this is a breaking change.
- [x] No, this is *not* a breaking change.

## Related Issues

<!-- Provide a list of issues related to this PR from the [issue
database].
Indicate which of these issues are resolved or fixed by this PR, i.e.
Fixes #xxxx* !-->

<!-- Links -->
[issue database]: https://github.com/flame-engine/flame/issues
[Contributor Guide]:
https://github.com/flame-engine/flame/blob/main/CONTRIBUTING.md
[Flame Style Guide]:
https://github.com/flame-engine/flame/blob/main/STYLEGUIDE.md
[Conventional Commit]: https://conventionalcommits.org

Author: spydon

melos.yaml

@@ -1,17 +1,19 @@
 name: forge2d_benchmark
 description: Simple benchmark for Forge2D
+resolution: workspace
 
 version: 1.0.0+1
 
 publish_to: 'none'
 
 environment:
-  sdk: ">=3.0.0 <4.0.0"
+  sdk: ">=3.8.0 <4.0.0"
 
 dependencies:
   build_runner: ^2.4.5
   build_web_compilers: ^4.0.3
   forge2d: ^0.14.0
+  web: ^1.1.1
 
 dev_dependencies:
-  flame_lint: ^1.1.1
+  flame_lint: ^1.4.1

packages/benchmark/pubspec.yaml

@@ -1,6 +1,7 @@
-import 'dart:html';
+import 'dart:js_interop';
 
 import 'package:forge2d/forge2d_browser.dart';
+import 'package:web/web.dart';
 
 import 'bench2d.dart';
 
@@ -16,7 +17,7 @@ class Bench2dWeb extends Bench2d {
   static const int canvasHeight = 600;
   static const double _viewportScale = 10.0;
 
-  late CanvasElement canvas;
+  late HTMLCanvasElement canvas;
   late CanvasRenderingContext2D ctx;
   late ViewportTransform viewport;
   late DebugDraw debugDraw;
@@ -25,7 +26,7 @@ class Bench2dWeb extends Bench2d {
   /// before calling runAnimation.
   void initializeAnimation() {
     // Setup the canvas.
-    canvas = CanvasElement()
+    canvas = HTMLCanvasElement()
       ..width = canvasWidth
       ..height = canvasHeight;
 
@@ -51,10 +52,10 @@ class Bench2dWeb extends Bench2d {
 
     ctx.clearRect(0, 0, canvasWidth, canvasHeight);
     world.drawDebugData();
-    window.animationFrame.then(render);
+    window.requestAnimationFrame(render.toJS);
   }
 
   void runAnimation() {
-    window.animationFrame.then(render);
+    window.requestAnimationFrame(render.toJS);
   }
 }

packages/benchmark/web/bench2d_web.dart

@@ -1,17 +1,18 @@
 name: forge2d_examples
 description: Samples showcasing Forge2D
-
 version: 1.0.0+1
+resolution: workspace
 
 publish_to: 'none'
 
 environment:
-  sdk: ">=3.0.0 <4.0.0"
+  sdk: ">=3.8.0 <4.0.0"
 
 dependencies:
   forge2d: ^0.14.0
+  web: ^1.1.1
 
 dev_dependencies:
-  build_runner: ^2.4.5
-  build_web_compilers: ^4.0.4
-  flame_lint: ^1.1.1
+  build_runner: ^2.6.0
+  build_web_compilers: ^4.2.0
+  flame_lint: ^1.4.1

packages/forge2d/example/pubspec.yaml

@@ -1,7 +1,8 @@
 import 'dart:async';
-import 'dart:html' hide Body;
+import 'dart:js_interop';
 
 import 'package:forge2d/forge2d_browser.dart';
+import 'package:web/web.dart';
 
 /// An abstract class for any Demo of the Forge2D library.
 abstract class Demo {
@@ -31,7 +32,7 @@ abstract class Demo {
   final double _viewportScale;
 
   /// The drawing canvas.
-  late final CanvasElement canvas;
+  late final HTMLCanvasElement canvas;
 
   /// The canvas rendering context.
   late final CanvasRenderingContext2D ctx;
@@ -55,10 +56,10 @@ abstract class Demo {
   late final Element worldStepTime;
 
   Demo(String name, [Vector2? gravity, this._viewportScale = viewportScale])
-      : world = World(gravity ?? Vector2(0.0, _gravity)),
-        _stopwatch = Stopwatch()..start() {
+    : world = World(gravity ?? Vector2(0.0, _gravity)),
+      _stopwatch = Stopwatch()..start() {
     world.setAllowSleep(true);
-    querySelector('#title')?.innerHtml = name;
+    document.querySelector('#title')?.innerHTML = name.toJS;
   }
 
   /// Advances the world forward by timestep seconds.
@@ -72,17 +73,17 @@ abstract class Demo {
     world.drawDebugData();
     frameCount++;
 
-    window.requestAnimationFrame(step);
+    window.requestAnimationFrame(step.toJS);
   }
 
   /// Creates the canvas and readies the demo for animation. Must be called
   /// before calling runAnimation.
   void initializeAnimation() {
     // Setup the canvas.
-    canvas = (Element.tag('canvas') as CanvasElement)
+    canvas = HTMLCanvasElement()
       ..width = canvasWidth
       ..height = canvasHeight;
-    document.body?.nodes.add(canvas);
+    document.body?.appendChild(canvas);
     ctx = canvas.context2D;
 
     // Create the viewport transform with the center at extents.
@@ -96,24 +97,24 @@ abstract class Demo {
     // Have the world draw itself for debugging purposes.
     world.debugDraw = debugDraw;
 
-    fpsCounter = querySelector('#fps-counter')!;
-    worldStepTime = querySelector('#world-step-time')!;
+    fpsCounter = document.querySelector('#fps-counter')!;
+    worldStepTime = document.querySelector('#world-step-time')!;
     Timer.periodic(const Duration(seconds: 1), (Timer t) {
-      fpsCounter.innerHtml = frameCount.toString();
+      fpsCounter.innerHTML = frameCount.toJS;
       frameCount = 0;
     });
     Timer.periodic(const Duration(milliseconds: 200), (Timer t) {
       if (elapsedUs == null) {
         return;
       }
-      worldStepTime.innerHtml = '${elapsedUs! / 1000} ms';
+      worldStepTime.innerHTML = '${elapsedUs! / 1000} ms'.toJS;
     });
   }
 
   void initialize();
 
   /// Starts running the demo as an animation using an animation scheduler.
   void runAnimation() {
-    window.requestAnimationFrame(step);
+    window.requestAnimationFrame(step.toJS);
   }
 }

packages/forge2d/example/web/demo.dart

@@ -42,8 +42,10 @@ class DominoTest extends Demo {
 
       for (var i = 0; i < 4; ++i) {
         for (var j = 0; j < numPerRow; j++) {
-          bodyDef.position =
-              Vector2(-14.75 + j * (29.5 / (numPerRow - 1)), 7.3 + 5 * i);
+          bodyDef.position = Vector2(
+            -14.75 + j * (29.5 / (numPerRow - 1)),
+            7.3 + 5 * i,
+          );
           if (i == 2 && j == 0) {
             bodyDef.angle = -.1;
             bodyDef.position.x += .1;

packages/forge2d/example/web/domino_test.dart

@@ -97,7 +97,8 @@ class DominoTower extends Demo {
             dominoHeight * .5 + (dominoHeight + 2 * dominoWidth) * .99 * j;
 
         for (var i = 0; i < baseCount - j; ++i) {
-          currX = i * 1.5 * dominoHeight -
+          currX =
+              i * 1.5 * dominoHeight -
               (1.5 * dominoHeight * (baseCount - j) / 2);
           dominoDensity *= 2.5;
           if (i == 0) {

packages/forge2d/example/web/domino_tower.dart

@@ -1,7 +1,8 @@
-import 'dart:html' hide Body;
+import 'dart:js_interop';
 import 'dart:math';
 
 import 'package:forge2d/forge2d_browser.dart';
+import 'package:web/web.dart';
 
 import 'demo.dart';
 import 'racer/car.dart';
@@ -26,8 +27,8 @@ class Racer extends Demo implements ContactListener {
     _controlState = 0;
 
     // Bind to keyboard events.
-    document.onKeyDown.listen(_handleKeyDown);
-    document.onKeyUp.listen(_handleKeyUp);
+    document.onkeydown = _handleKeyDown.toJS;
+    document.onkeyup = _handleKeyUp.toJS;
 
     // Add ourselves as a collision listener.
     world.setContactListener(this);
@@ -120,33 +121,25 @@ class Racer extends Demo implements ContactListener {
     switch (event.keyCode) {
       case 37:
         _controlState |= ControlState.left;
-        break;
       case 38:
         _controlState |= ControlState.up;
-        break;
       case 39:
         _controlState |= ControlState.right;
-        break;
       case 40:
         _controlState |= ControlState.down;
-        break;
     }
   }
 
   void _handleKeyUp(KeyboardEvent event) {
     switch (event.keyCode) {
       case 37:
         _controlState &= ~ControlState.left;
-        break;
       case 38:
         _controlState &= ~ControlState.up;
-        break;
       case 39:
         _controlState &= ~ControlState.right;
-        break;
       case 40:
         _controlState &= ~ControlState.down;
-        break;
     }
   }
 
@@ -179,8 +172,8 @@ void main() {
   final racer = Racer();
   racer.initialize();
   racer.initializeAnimation();
-  final paragraph = ParagraphElement()
+  final paragraph = HTMLParagraphElement()
     ..innerText = 'Use the arrow keys to drive the car';
-  document.body?.nodes.add(paragraph);
+  document.body?.append(paragraph);
   racer.runAnimation();
 }

packages/forge2d/example/web/racer.dart

@@ -122,15 +122,15 @@ class Car {
     switch (controlState & (ControlState.left | ControlState.right)) {
       case ControlState.left:
         desiredAngle = _lockAngle;
-        break;
       case ControlState.right:
         desiredAngle = -_lockAngle;
-        break;
     }
     final turnPerTimeStep = _turnSpeedPerSec * 1000 / time;
     final angleNow = _frontLeftJoint.jointAngle();
-    final angleToTurn =
-        (desiredAngle - angleNow).clamp(-turnPerTimeStep, turnPerTimeStep);
+    final angleToTurn = (desiredAngle - angleNow).clamp(
+      -turnPerTimeStep,
+      turnPerTimeStep,
+    );
     final angle = angleNow + angleToTurn;
     _frontLeftJoint.setLimits(angle, angle);
     _frontRightJoint.setLimits(angle, angle);

packages/forge2d/example/web/racer/car.dart

@@ -71,10 +71,8 @@ class Tire {
     switch (controlState & (ControlState.up | ControlState.down)) {
       case ControlState.up:
         desiredSpeed = _maxForwardSpeed;
-        break;
       case ControlState.down:
         desiredSpeed = _maxBackwardSpeed;
-        break;
       default:
         return;
     }
@@ -98,10 +96,8 @@ class Tire {
     switch (controlState & (ControlState.left | ControlState.right)) {
       case ControlState.left:
         desiredTorque = 15.0;
-        break;
       case ControlState.right:
         desiredTorque = -15.0;
-        break;
     }
     body.applyTorque(desiredTorque);
   }