StatefulComponent not working

[TJMusiitwa]

Hey @schultek,
I am coming across an issue similar to that raised in #170.
I have defined my stateful component similar that on this JasprPad example however, I am not seeing the state being updated.

Sample code:

// Defied the StatefulComponent above here


class _ScheduleTabsState extends State<ScheduleTabs> {
  int _currentTab = 0;
  @override
  Iterable<Component> build(BuildContext context) sync* {
    yield div([
      sheduleTabsComponent(),
      div([
        switch (_currentTab) {
          1 => div([text('So this is tab 1')], classes: 'py-4 text-blue'),
          2 => div([text('So this is tab 2')], classes: 'py-4 text-blue'),
          _ => div([text('So this is tab 3')], classes: 'py-4 text-blue')
        }
      ], classes: 'py-4 pt-4 bg-white content')
    ]);
  }

  Component sheduleTabsComponent() {
    return ul([
      li([
        button(
          [text('Day 1')],
          onClick: () {
            setState(() => _currentTab = 0);
            print('Day 1');
          },
          classes:
              'inline-block w-full px-6 py-2 font-medium border-b-2 border-transparent bg-white text-teal-500 border-teal-500 hover:bg-teal-500 hover:text-white',
        )
      ], classes: 'w-full'),
      li([
        button(
          [text('Day 2')],
          onClick: () => setState(() => _currentTab = 1),
          classes:
              'inline-block w-full px-6 py-2 font-medium border-b-2 border-transparent bg-white text-teal-500 border-teal-500 hover:bg-teal-500 hover:text-white',
        )
      ], classes: 'w-full'),
      li([
        button(
          [text('Sessions')],
          onClick: () => setState(() => _currentTab = 2),
          classes:
              'inline-block w-full px-6 py-2 font-medium border-b-2 border-transparent bg-white text-teal-500 border-teal-500 hover:bg-teal-500 hover:text-white',
        )
      ], classes: 'w-full')
    ],
        classes:
            'flex justify-between mx-auto overflow-hidden text-sm text-center text-black border divide-x rounded-xl');
  }
}

The print statement is not firing at all in the web console and neither is the component updating to display the different tabs.

Flutter doctor output

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.22.2, on macOS 14.1.2 23B92 darwin-arm64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] VS Code (version 1.91.1)
[✓] Connected device (4 available)
[✓] Network resources

• No issues found!

Hoping you could kindly point out what if anything I am doing wrong

[schultek]

Please do jaspr doctor (not flutter doctor)

[TJMusiitwa]

Hi @schultek sorry for not seeing this sooner

Please do jaspr doctor (not flutter doctor)

Here you go

[✓] Jaspr CLI (Version 0.13.2)
  • Dart Version 3.4.3 (stable) (Tue Jun 4 19:51:39 2024 +0000) on "macos_arm64" at /Users/user/development/flutter/bin/cache/dart-sdk/bin/dart
  • Running on macos Version 14.1.2 (Build 23B92) - Locale en-GB
  • Analytics: Enabled

[✓] Current Project
  • Dependencies on core packages:
    • jaspr: ^0.13.2
    • jaspr_builder: ^0.13.2 (dev)
    • jaspr_router: ^0.4.2
  • Rendering mode: static
  • Uses jaspr compilers: false
  • Uses flutter embedding: false

[TJMusiitwa]

Hey @schultek just hoping I could get some sort of update to my question.
Thanks

[schultek]

Sorry forgot to answer.

I suspect the issue lies with hydration, i.e. that your component isn't rendered client-side and therefore not interactive.

See the new docs on hydration here:
https://docs.page/schultek/jaspr/get_started/hydration

[TJMusiitwa]

I will give the new docs a spin and hope that helps address my problem. I should let you know probably by the end of the week or so. Thanks

[TJMusiitwa]

Hey @schultek so the hydration documents I don't think seem to apply to the bug I am facing.
Even attempting to write the code similar to the counter example it is not working for me. I did try to update the project to the new versions but ran into a similar problem attributed to this #265.
I then reverted back to the above versions.

I will attach the full file perhaps there is something you might be able to scope out that I have not paid attention to.

import 'package:jaspr/jaspr.dart';

class Schedule extends StatelessComponent {
  @override
  Iterable<Component> build(BuildContext context) sync* {
    yield section(
        id: 'schedule',
        [
          div([
            div([
              h2([
                text(
                    'Our two day schedule is jam-packed with exciting and mind-provoking sessions.')
              ],
                  classes:
                      'font-display text-4xl font-medium tracking-tighter text-teal-600 sm:text-5xl'),
              p([
                text(
                    'From keynote speakers to breakout sessions, you will leave with a wealth of knowledge and new connections.')
              ],
                  classes:
                      'mt-4 font-display text-2xl tracking-tight text-teal-900')
            ], classes: 'mx-auto max-w-2xl lg:mx-0 lg:max-w-4xl lg:pr-24')
          ], classes: 'mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10'),
          div([
            div([ScheduleTabs()], classes: 'w-full lg:p-10 mx-auto')
          ], classes: 'px-8 mx-auto max-w-7xl lg:px-16 md:px-12')
        ],
        classes: 'py-20 sm:py-32');
  }
}

class ScheduleTabs extends StatefulComponent {
  const ScheduleTabs({super.key});

  @override
  State<ScheduleTabs> createState() => _ScheduleTabsState();
}

class _ScheduleTabsState extends State<ScheduleTabs> {
  int currentTab = 0;
  @override
  Iterable<Component> build(BuildContext context) sync* {
    yield div([
      scheduleTabsComponent(),
      switch (currentTab) {
        1 => div([text('So this is tab 1')], classes: 'py-4 text-blue'),
        2 => div([text('So this is tab 2')], classes: 'py-4 text-blue'),
        _ => div([
            ul(
                [
                  scheduleListItem(
                      time: '7:30 AM - 8:45 AM',
                      title: 'Registration & Breakfast'),
                  li([text('Formal Learning (10%)')],
                      classes: 'text-lg font-semibold'),
                  scheduleListItem(
                      time: '9:00 AM - 10:00 AM',
                      title: 'Welcome & Introductions'),
                  scheduleListItem(
                      time: '10:15 AM - 11:15 AM',
                      title:
                          'Introduction to the 70-20-10 Learning Model & Workshop Overviews'),
                  scheduleListItem(
                      time: '11:30 AM - 12:30 PM',
                      title: 'Core Project Management Concepts & Refresh'),
                  scheduleListItem(
                      time: '12:30 PM - 1:30 PM',
                      title:
                          'Introduction to Agile Frameworks (Scrum & Kanban)'),
                ],
                classes: 'divide-y divide-gray-100',
                attributes: {'role': 'list'}),
          ], classes: 'py-4 text-blue')
      }
    ]);
  }

  Component scheduleListItem({required String time, required String title}) {
    return li([
      h3([text(time)],
          classes: 'font-display text-2xl font-medium text-teal-600'),
      p([text(title)], classes: 'mt-2 font-display text-lg text-teal-900'),
    ], classes: 'flex justify-between gap-x-6 py-5 mb-2');
  }

  Component scheduleTabsComponent() {
    return ul([
      li([
        button(
          [text('Day 1')],
          onClick: () {
            setState(() => currentTab = 0);
            print('Day 1');
          },
          classes:
              'inline-block w-full px-6 py-2 font-medium border-b-2 border-transparent bg-white text-teal-500 border-teal-500 hover:bg-teal-500 hover:text-white',
        )
      ], classes: 'w-full'),
      li([
        button(
          [text('Day 2')],
          onClick: () => setState(() => currentTab = 1),
          classes:
              'inline-block w-full px-6 py-2 font-medium border-b-2 border-transparent bg-white text-teal-500 border-teal-500 hover:bg-teal-500 hover:text-white',
        )
      ], classes: 'w-full'),
      li([
        button(
          [text('Sessions')],
          onClick: () => setState(() => currentTab = 2),
          classes:
              'inline-block w-full px-6 py-2 font-medium border-b-2 border-transparent bg-white text-teal-500 border-teal-500 hover:bg-teal-500 hover:text-white',
        )
      ], classes: 'w-full')
    ],
        classes:
            'flex justify-between mx-auto overflow-hidden text-sm text-center text-black border divide-x rounded-xl');
  }
}

[schultek]

Can you put the whole code in a repo, I need to see the full project setup to help you more.

[TJMusiitwa]

Sure thing will get that set up for you

[TJMusiitwa]

@schultek have uploaded the code to my public repo.
Kindly have a go and let me know

[schultek]

Found the issue. You are using body in your App component, but Document() already adds the body tag to the page, so you end up with two nested body tags, which breaks in the browser. Changing the body(...) inside App to div(...) solves the problem.

[TJMusiitwa]

Happy to report that this is working now. Thank you for your help. Something to watch out for next time.