feat: Improve input element onInput typing, simplify @Attribute annotation, and fix method extraction in component generator.

Author: kevin-sakemaer

packages/spark/CHANGELOG.md

@@ -1,11 +1,12 @@
-## TBP
+## 1.0.0-alpha.2 - 22-01-2025
 
 ### Breaking changes
 
 - There is a new way to write Components. Please refer to the [documentation](https://spark.kleak.dev/docs/components) for more information.
 
 ### Features
 
+- Add type to input element onInput event based on the type of the input
 - Added support for cookies
 - Added support for csp nonce on scripts and styles
 - Fix @Component

packages/spark/example/lib/components/counter_final/config.dart

@@ -1,6 +1,6 @@
 class CounterConfig {
-  final int step;
-  final int secondsOfDelay;
+  final num step;
+  final num secondsOfDelay;
 
   const CounterConfig({this.step = 1, this.secondsOfDelay = 0});
 

packages/spark/example/lib/components/counter_final/counter_final_base.dart

@@ -14,7 +14,7 @@ class CounterFinal {
   });
 
   @Attribute()
-  int value;
+  num value;
 
   @Attribute()
   String label;
@@ -101,7 +101,9 @@ class CounterFinal {
           onClick: (_) async {
             isUpdating = true;
             if (config.secondsOfDelay > 0) {
-              await Future.delayed(Duration(seconds: config.secondsOfDelay));
+              await Future.delayed(
+                Duration(seconds: config.secondsOfDelay.toInt()),
+              );
             }
             value -= config.step;
             isUpdating = false;
@@ -115,7 +117,9 @@ class CounterFinal {
           onClick: (_) async {
             isUpdating = true;
             if (config.secondsOfDelay > 0) {
-              await Future.delayed(Duration(seconds: config.secondsOfDelay));
+              await Future.delayed(
+                Duration(seconds: config.secondsOfDelay.toInt()),
+              );
             }
             value += config.step;
             isUpdating = false;
@@ -124,26 +128,26 @@ class CounterFinal {
       ]),
       div(className: 'step-controls', [
         span(['Step:']),
-        input(
-          attributes: {'type': 'number', 'value': config.step},
+        input<int>(
+          type: 'number',
+          value: config.step.toInt(),
           className: 'step-input',
           onInput: (e) {
-            final val = int.tryParse((e.target as HTMLInputElement).value) ?? 1;
             config = CounterConfig(
-              step: val,
+              step: e,
               secondsOfDelay: config.secondsOfDelay,
             );
           },
         ),
       ]),
       div(className: 'step-controls', [
         span(['Delay:']),
-        input(
-          attributes: {'type': 'number', 'value': config.secondsOfDelay},
+        input<num>(
+          type: 'number',
+          value: config.secondsOfDelay,
           className: 'step-input',
-          onInput: (e) {
-            final val = int.tryParse((e.target as HTMLInputElement).value) ?? 1;
-            config = CounterConfig(secondsOfDelay: val, step: config.step);
+          onInput: (value) {
+            config = CounterConfig(step: config.step, secondsOfDelay: value);
           },
         ),
       ]),

packages/spark/example/lib/components/counter_final/counter_final_base.impl.dart

@@ -50,7 +50,8 @@
 /// `SparkPage` class. See `package:spark/server.dart` for details.
 library;
 
-export 'src/component/component.dart' hide Text, Element, Request, Response;
+export 'src/component/component.dart'
+    hide Text, Element, Request, Response, Node;
 export 'src/utils/utils.dart';
 export 'src/annotations/annotations.dart';
 export 'src/page/page.dart';