fix: svg html tag seems to be not supported

ande4485 commented 10 months ago

Description

I create a DomComponent with 'svg' tag and a basic inside it and nothing appears when I run project.

Steps To Reproduce

In JasprPad, copy this :

import 'package:jaspr/jaspr.dart';

void main() {
  runApp(DomComponent(
    tag: 'svg',
    attributes:{
      'height':'300',
      'width':'300',
    },

    child: DomComponent(tag:'rect',attributes:{'width':'100%','height':'100%','fill':'green'}),
  ));
}

Doctor Output

I can't because I use JasprPad

Expected Behavior

Svg is showing on the web page.

Additional Context

I saw

fusion44 commented 10 months ago

This is the SVG icon component I use which works in a normal app:

import 'package:janostr/app/utils.dart';
import 'package:jaspr/html.dart';

class SvgIcon extends StatelessComponent {
  final String d;
  final String color;

  const SvgIcon(this.d, {Key? key, this.color = ''}) : super(key: key);

  @override
  Iterable<Component> build(BuildContext context) sync* {
    yield DomComponent(
      tag: 'svg',
      classes: tw('w-6 h-6 $color'),
      attributes: {
        'xmlns': 'http://www.w3.org/2000/svg',
        'fill': 'none',
        // 'viewBox': '0 0 24 24',
        'stroke-width': '1.5',
        'stroke': 'currentColor',
      },
      child: DomComponent(
        tag: 'path',
        attributes: {
          'stroke-linecap': 'round',
          'stroke-linejoin': 'round',
          'd': d,
        },
      ),
    );
  }
}

tw() is just creating a Tailwind class array from the given input string. Though, even after removing the Tailwind stuff I can't get it to work in JasprPad either. So it might be a JasprPad thing.

ande4485 commented 10 months ago

@fusion44 , I try your code in temporary jsapr project and nothing is displayed in my navigator when I run jsapr serve. I try :

yield DomComponent(
      tag: 'svg',
      attributes: {
        'xmlns': 'http://www.w3.org/2000/svg',
        'fill': 'none',
        // 'viewBox': '0 0 24 24',
        'stroke-width': '1.5',
        'stroke': 'currentColor',
        'height': '300',
        'width': '300',
      },
      child: DomComponent(
          tag: 'rect',
          attributes: {'width': '100%', 'height': '100%', 'fill': 'green'}),
    );

I use jsapr 0.9.2 . And do you have a value for d variable in your example ? Thank you

fusion44 commented 10 months ago

Sure, here's what I currently use:

// https://heroicons.com
class HeroIconData {
  static const envelope =
      'M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75';
  static const home =
      'M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25';
  static const info =
      "M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z";
  static const wrenchScrewdriver =
      'M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z';
  static const user =
      'M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z';
}

ande4485 commented 10 months ago

@fusion44 , I really don't understand, if I use your code, nothing appears. What version of jaspr do you use ? Jaspr doctor for me: [✓] Jaspr CLI (Version 0.9.2) • Dart Version 3.1.3 (stable) (Tue Sep 26 14:25:13 2023 +0000) on "macos_arm64" at dart • Running on macos Version 14.0 (Build 23A344) - Locale fr-FR • Analytics: Enabled

[✓] Current Project • Dependencies on core packages: • jaspr: ^0.9.1 • Uses server-side rendering: false • Uses experimental compilers: false • Uses flutter embedding: false

schultek / jaspr

fix: svg html tag seems to be not supported #128