schultek / jaspr

Modern web framework for building websites in Dart. Supports SPAs and SSR.
https://jasprpad.schultek.de
MIT License
996 stars 59 forks source link

fix: Elements added inside an svg element are not visible #239

Closed petlyh closed 1 month ago

petlyh commented 1 month ago

Description

Elements that are added inside an svg element after the initial page load are not visible.

Steps To Reproduce

  1. Create a StatefulComponent that mutates state in such a way that new elements are added inside an svg element when it is rebuilt.
  2. Build and open the webpage.
  3. Observe that the new elements are not visible.
Minimal reproducible example https://github.com/schultek/jaspr/assets/88139840/4a9fb7b0-ec05-4cb8-a0f3-a6717d15a9fb ```dart import 'package:jaspr/jaspr.dart'; class App extends StatefulComponent { const App(); @override State createState() => AppState(); } class AppState extends State { int count = 5; void setCount(int newCount) { setState(() { count = newCount; }); } @override Iterable build(BuildContext context) sync* { yield button([text("Add")], events: {"click": (_) => setCount(count + 1)}); yield button([text("Remove")], events: {"click": (_) => setCount(count - 1)}); yield p([text("Not inside SVG:")]); yield _box( Iterable.generate(count).map((i) => p([text("$i")])).toList()); yield p([text("Inside SVG:")]); yield _box([ svg( Iterable.generate(count) .map((i) => DomComponent( tag: "text", child: text(i.toString()), attributes: {"y": ((i + 1) * 35).toString()})) .toList(), height: Unit.pixels((count + 1) * 35)) ]); } } Component _box(List children) => div(children, styles: const Styles.box( border: Border.all( BorderSide.solid(color: Colors.black, width: Unit.pixels(1))))); ```

Expected Behavior

The new elements are shown when the component is rebuilt.

Actual Behavior

The new elements are not rendered despite being added to the DOM and appearing in the browser's inspector panel.

Additional Context

Happens on both Firefox and Chrome.

Doctor Output

[✓] Jaspr CLI (Version 0.12.0)
  • Dart Version 3.3.3 (stable) (Tue Mar 26 14:21:33 2024 +0000) on "windows_x64" at dart
  • Running on windows "Windows 10 Pro" 10.0 (Build 19045) - Locale nb-NO
  • Analytics: Enabled

[✓] Current Project
  • Dependencies on core packages:
    • jaspr: ^0.12.0
    • jaspr_builder: ^0.12.0 (dev)
  • Rendering mode: client
  • Uses jaspr compilers: false
  • Uses flutter embedding: false
schultek commented 1 month ago

Fixed in v0.13.1