Migrate to 'package:web'

petitparser · Feb 18, 2024 · 1eb2fc2 · 1eb2fc2
1 parent b2a93c4
commit 1eb2fc2
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 109 deletions.
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,5 +1,5 @@
 name: petitparser_examples
-version: 6.0.1
+version: 6.1.0
 
 homepage: https://petitparser.github.io
 repository: https://github.com/petitparser/dart-petitparser-examples
@@ -21,6 +21,7 @@ dependencies:
   meta: ^1.9.0
   more: ^4.0.0
   petitparser: ^6.0.0
+  web: ^0.5.0
   xml: ^6.4.0
 dev_dependencies:
   build_runner: ^2.4.0

diff --git a/web/json/json.dart b/web/json/json.dart
@@ -1,14 +1,14 @@
 import 'dart:convert' as convert;
-import 'dart:html';
 
 import 'package:petitparser_examples/json.dart';
+import 'package:web/web.dart';
 
 final parser = JsonDefinition().build();
 
 void execute(
   String value,
-  Element timingElement,
-  Element outputElement,
+  HTMLElement timingElement,
+  HTMLElement outputElement,
   dynamic Function(String value) parse,
 ) {
   Object? result;
@@ -27,33 +27,32 @@ void execute(
 
   timingElement.innerText = '$timingμs';
   if (result is Exception) {
-    outputElement.classes.add('error');
+    outputElement.classList.add('error');
     outputElement.innerText =
         result is FormatException ? result.message : result.toString();
   } else {
-    outputElement.classes.remove('error');
+    outputElement.classList.remove('error');
     outputElement.innerText = convert.json.encode(result);
   }
 }
 
-final input = querySelector('#input') as TextAreaElement;
-final action = querySelector('#action') as SubmitButtonInputElement;
+final input = document.querySelector('#input') as HTMLTextAreaElement;
+final action = document.querySelector('#action') as HTMLButtonElement;
 
-final timingCustom = querySelector('#timing .custom')!;
-final timingNative = querySelector('#timing .native')!;
-final outputCustom = querySelector('#output .custom')!;
-final outputNative = querySelector('#output .native')!;
+final timingCustom = document.querySelector('#timing .custom') as HTMLElement;
+final timingNative = document.querySelector('#timing .native') as HTMLElement;
+final outputCustom = document.querySelector('#output .custom') as HTMLElement;
+final outputNative = document.querySelector('#output .native') as HTMLElement;
 
 void update() {
-  final value = input.value ?? '';
   execute(
-    value,
+    input.value,
     timingCustom,
     outputCustom,
     (input) => parser.parse(input).value,
   );
   execute(
-    value,
+    input.value,
     timingNative,
     outputNative,
     (input) => convert.json.decode(input),

diff --git a/web/lisp/lisp.dart b/web/lisp/lisp.dart
@@ -1,32 +1,31 @@
-import 'dart:html';
-
 import 'package:petitparser_examples/lisp.dart';
+import 'package:web/web.dart';
 
-final input = querySelector('#input') as TextAreaElement;
-final output = querySelector('#output') as ParagraphElement;
-final console = querySelector('#console') as ParagraphElement;
-final environment = querySelector('#environment') as ParagraphElement;
-final evaluate = querySelector('#evaluate') as SubmitButtonInputElement;
+final input = document.querySelector('#input') as HTMLInputElement;
+final output = document.querySelector('#output') as HTMLElement;
+final console = document.querySelector('#console') as HTMLElement;
+final environment = document.querySelector('#environment') as HTMLElement;
+final evaluate = document.querySelector('#evaluate') as HTMLButtonElement;
 
 final root = NativeEnvironment();
 final standard = StandardEnvironment(root);
 final user = standard.create();
 
 void main() {
   printer = (object) {
-    console.appendText(object.toString());
+    console.append(document.createTextNode(object.toString()));
     console.append(document.createElement('br'));
   };
   evaluate.onClick.listen((event) {
-    output.innerHtml = 'Evaluating...';
-    output.classes.clear();
-    console.innerHtml = '';
+    output.innerHTML = 'Evaluating...';
+    output.classList.value = '';
+    console.innerHTML = '';
     try {
-      final result = evalString(lispParser, user, input.value ?? '');
+      final result = evalString(lispParser, user, input.value);
       output.text = result.toString();
     } on Object catch (exception) {
       output.text = exception.toString();
-      output.classes.add('error');
+      output.classList.add('error');
     }
     inspect(environment, user);
   });
@@ -50,5 +49,5 @@ void inspect(Element element, Environment? environment) {
     }
     environment = environment.owner;
   }
-  element.innerHtml = buffer.toString();
+  element.innerHTML = buffer.toString();
 }
diff --git a/web/math/eval.dart b/web/math/eval.dart
@@ -1,24 +1,22 @@
-import 'dart:html';
-
 import 'package:petitparser_examples/math.dart';
+import 'package:web/web.dart';
 
-final input = querySelector('#input') as TextInputElement;
-final result = querySelector('#result') as ParagraphElement;
-final tree = querySelector('#tree') as ParagraphElement;
+final input = document.querySelector('#input') as HTMLInputElement;
+final result = document.querySelector('#result') as HTMLElement;
+final tree = document.querySelector('#tree') as HTMLElement;
 
 void update() {
-  final source = input.value ?? '0';
   tree.text = '';
   try {
-    final expr = parser.parse(source).value;
-    tree.innerHtml = inspect(expr);
+    final expr = parser.parse(input.value).value;
+    tree.innerHTML = inspect(expr);
     result.text = ' = ${expr.eval({})}';
-    result.classes.clear();
+    result.classList.value = '';
   } on Object catch (exception) {
     result.text = exception.toString();
-    result.classes.add('error');
+    result.classList.add('error');
   }
-  window.location.hash = Uri.encodeComponent(source);
+  window.location.hash = Uri.encodeComponent(input.value);
 }
 
 String inspect(Expression expr, [String indent = '']) {

diff --git a/web/math/plot.dart b/web/math/plot.dart
@@ -1,7 +1,8 @@
 import 'dart:async';
-import 'dart:html';
+import 'dart:js_interop';
 
 import 'package:petitparser_examples/math.dart';
+import 'package:web/web.dart';
 
 class Viewport {
   Viewport(
@@ -14,7 +15,7 @@ class Viewport {
         width = canvas.offsetWidth,
         height = canvas.offsetHeight;
 
-  final CanvasElement canvas;
+  final HTMLCanvasElement canvas;
   final CanvasRenderingContext2D context;
 
   final num minX;
@@ -50,15 +51,15 @@ class Viewport {
     context.lineWidth = 0.5;
     for (var x = minX.floor(); x <= maxX.ceil(); x++) {
       final pixelX = toPixelX(x);
-      context.strokeStyle = x == 0 ? axisStyle : gridStyle;
+      context.strokeStyle = x == 0 ? axisStyle.toJS : gridStyle.toJS;
       context.beginPath();
       context.moveTo(pixelX, 0);
       context.lineTo(pixelX, height);
       context.stroke();
     }
     for (var y = minY.floor(); y <= maxY.ceil(); y++) {
       final pixelY = toPixelY(y);
-      context.strokeStyle = y == 0 ? axisStyle : gridStyle;
+      context.strokeStyle = y == 0 ? axisStyle.toJS : gridStyle.toJS;
       context.beginPath();
       context.moveTo(0, pixelY);
       context.lineTo(width, pixelY);
@@ -68,7 +69,7 @@ class Viewport {
 
   /// Plots a numeric function.
   void plot(num Function(num x) function, {String functionStyle = 'blue'}) {
-    context.strokeStyle = functionStyle;
+    context.strokeStyle = functionStyle.toJS;
     context.lineWidth = 1.0;
     context.beginPath();
     num lastY = double.infinity;
@@ -96,23 +97,23 @@ class Viewport {
   num fromPixelX(num value) => value * (maxX - minX) / width + minX;
 }
 
-final input = querySelector('#input') as TextInputElement;
-final error = querySelector('#error') as ParagraphElement;
-final canvas = querySelector('#canvas') as CanvasElement;
+final input = document.querySelector('#input') as HTMLInputElement;
+final error = document.querySelector('#error') as HTMLElement;
+final canvas = document.querySelector('#canvas') as HTMLCanvasElement;
 
 final viewport = Viewport(canvas, minX: -5, maxX: 5, minY: -2.5, maxY: 2.5);
 
 Expression expression = Value(double.nan);
 
-void resize() {
-  final rect = canvas.parent?.getBoundingClientRect();
+void resize(Event event) {
+  final rect = canvas.parentElement?.getBoundingClientRect();
   if (rect != null) {
     viewport.resize(rect.width, rect.width / 2);
   }
 }
 
 void update() {
-  final source = input.value ?? '';
+  final source = input.value;
   try {
     expression = parser.parse(source).value;
     expression.eval({'x': 0, 't': 0});
@@ -134,8 +135,8 @@ void main() {
   if (window.location.hash.startsWith('#')) {
     input.value = Uri.decodeComponent(window.location.hash.substring(1));
   }
-  resize();
-  window.onResize.listen((event) => resize());
+  resize(Event('resize'));
+  window.addEventListener('resize', resize.toJS);
   update();
   input.onInput.listen((event) => update());
   Timer.periodic(const Duration(milliseconds: 1000 ~/ 30),

diff --git a/web/prolog/prolog.dart b/web/prolog/prolog.dart
@@ -1,26 +1,25 @@
-import 'dart:html';
-
 import 'package:petitparser_examples/prolog.dart';
+import 'package:web/web.dart';
 
-final rulesElement = querySelector('#rules') as TextAreaElement;
-final queryElement = querySelector('#query') as TextInputElement;
-final askElement = querySelector('#ask') as SubmitButtonInputElement;
-final answersElement = querySelector('#answers') as UListElement;
+final rulesElement = document.querySelector('#rules') as HTMLInputElement;
+final queryElement = document.querySelector('#query') as HTMLInputElement;
+final askElement = document.querySelector('#ask') as HTMLButtonElement;
+final answersElement = document.querySelector('#answers') as HTMLElement;
 
 void main() {
   askElement.onClick.listen((event) async {
-    answersElement.innerHtml = '';
+    answersElement.innerHTML = '';
 
     Database? db;
     try {
-      db = Database.parse(rulesElement.value ?? '');
+      db = Database.parse(rulesElement.value);
     } on Object catch (error) {
       appendMessage('Error parsing rules: $error', isError: true);
     }
 
     Term? query;
     try {
-      query = Term.parse(queryElement.value ?? '');
+      query = Term.parse(queryElement.value);
     } on Object catch (error) {
       appendMessage('Error parsing query: $error', isError: true);
     }
@@ -42,9 +41,9 @@ void main() {
 
 void appendMessage(String message, {bool isError = false}) {
   final element = document.createElement('li');
-  element.innerHtml = message;
+  element.innerHTML = message;
   if (isError) {
-    element.classes.add('error');
+    element.classList.add('error');
   }
   answersElement.append(element);
 }
diff --git a/web/smalltalk/smalltalk.dart b/web/smalltalk/smalltalk.dart
@@ -1,25 +1,24 @@
-import 'dart:html';
-
 import 'package:petitparser_examples/smalltalk.dart';
+import 'package:web/web.dart';
 
-final input = querySelector('#input') as TextAreaElement;
-final output = querySelector('#output') as ParagraphElement;
-final parse = querySelector('#parse') as SubmitButtonInputElement;
+final input = document.querySelector('#input') as HTMLInputElement;
+final output = document.querySelector('#output') as HTMLElement;
+final parse = document.querySelector('#parse') as HTMLButtonElement;
 
 final parserDefinition = SmalltalkParserDefinition();
 final methodParser = parserDefinition.build();
 
 void main() {
   parse.onClick.listen((event) {
-    output.innerHtml = 'Evaluating...';
-    output.classes.clear();
+    output.innerHTML = 'Evaluating...';
+    output.classList.value = '';
     try {
-      final result = methodParser.parse(input.value ?? '');
+      final result = methodParser.parse(input.value);
       final visitor = PrintVisitor()..visit(result.value);
-      output.innerHtml = visitor.buffer.toString();
+      output.innerHTML = visitor.buffer.toString();
     } on Object catch (exception) {
       output.text = exception.toString();
-      output.classes.add('error');
+      output.classList.add('error');
     }
   });
 }

diff --git a/web/uri/uri.dart b/web/uri/uri.dart
@@ -1,15 +1,14 @@
-import 'dart:html';
-
 import 'package:petitparser/petitparser.dart';
 import 'package:petitparser_examples/uri.dart';
+import 'package:web/web.dart';
 
-final input = querySelector('#input') as InputElement;
-final output = querySelector('#output') as ParagraphElement;
+final input = document.querySelector('#input') as HTMLInputElement;
+final output = document.querySelector('#output') as HTMLElement;
 
 void update() {
-  final result = uri.parse(input.value ?? '');
+  final result = uri.parse(input.value);
   if (result is Success) {
-    output.innerHtml = '''
+    output.innerHTML = '''
     <table>
       <tr>
         <th>Scheme</th>
@@ -56,7 +55,7 @@ void update() {
     </table>
     ''';
   } else {
-    output.innerHtml = '''
+    output.innerHTML = '''
     <span class="error">
       Error at ${result.position}: ${result.message}
     </span>