Dart Language Tour - DartPad snippets occasionally fail to load properly

[bkbonner]

Page URL

https://dart.dev/guides/language/language-tour#constructors

Page source

https://github.com/dart-lang/site-www/blob/main/src/_guides/language/language-tour.md

Describe the problem

I was trying to understand the constructor syntax and looking at the docs...and noticed that Dartpad examples don't seem to be rendered properly.

I knew that Dart was open source, so I googled "dart language tour github" and it led me to this site.

This is what the documentation looks like:

On line 2949 of the source for this documentation, I think it's supposed to look like this:

I suspect this is related to spme dartpad change with embedding, but I'm not certain.

It's affected many of the dartpad examples. I know that there are issues wanting to get away from embedded dartpads, but in the meantime, I wasn't sure if someone was aware that the dart documentation is broken.

Expected fix

Ideally, fix the embedded dartpad examples.

At a minimum, show the example in a code-block with a link to dartpad (i.e. in a gist).

I researched the source but I couldn't find where the code sections were being 'rendered'.

Additional context

No response

[bkbonner]

After submitting this, I noticed a plugins folder in https://github.com/dart-lang/site-www/tree/main/src and decided to dive into it briefly. I saw 'code-sample' and thought it might be it, but then remembered that the tag in the source was

<?code-excerpt

I saw the code-excerpt-framer was moved to site-shared in #2600. For convenience, here it is:

https://github.com/dart-lang/site-shared/tree/main/src/_plugins

Hopefully this helps someone.

If someone is more familiar with the dartpad site code and can direct me more, I might be able to take a look at this.

Thanks.

[bkbonner]

One other quick note.

I noticed the 'callable_classes' dartpad example is working.

The syntax for the working 'callable classes' example is:

<?code-excerpt "misc/lib/language_tour/callable_classes.dart"?>
```dart:run-dartpad:height-350px:ga_id-callable_classes
class WannabeFunction {
  String call(String a, String b, String c) => '$a $b $c!';
}

var wf = WannabeFunction();
var out = wf('Hi', 'there,', 'gang');

void main() => print(out);

I thought I'd compare the syntax of it to the broken one.  

The syntax for the 'non_default_superclass_constructor' example which is broken, for reference:

class Person {
  String? firstName;

  Person.fromJson(Map data) {
    print('in Person');
  }
}

class Employee extends Person {
  // Person does not have a default constructor;
  // you must call super.fromJson(data).
  Employee.fromJson(Map data) : super.fromJson(data) {
    print('in Employee');
  }
}

void main() {
  var employee = Employee.fromJson({});
  print(employee);
  // Prints:
  // in Person
  // in Employee
  // Instance of 'Employee'
}

[bkbonner]

(edit: disregard, these are all just sourcemaps)

another 'nugget' of info:

This was in my javascript console. I'm on 'chrome 98' on OS-X Monterey 12.2.1

When I clicked on the errors, I definitely got 404 msgs. e.g., https://dartpad.dev/scripts/embed_dart.dart.js.map

[bkbonner]

Ok, well, it 'finally' showed up. I'm running this on a 2018 macbook air with 16 GB of memory. I only have Chrome and VS Code open. I wouldn't have thought it would taken that long to render, but it finally showed up. Weird.

This can probably be closed, or if someone else sees this, the docs should say...this may take a long time to load.

This is from DevTools on chrome:

I noticed that 'Disable cache' on DevTools was unchecked. I checked it, and reloaded the Language Tour.

And it popped up immediately.

Sorry about this, I think it's something to do with my local environment.

[parlough]

Hey @bkbonner, thanks so much for the report and the thorough investigation!

I do believe the issue arises because there are many embedded DartPads on the page and each one is essentially a new page, but this particular issue where only the console shows up does not happen consistently. We try to limit the amount of DartPads in the language tour because of the performance hit but it is nice to have a few.

I'm going to keep this issue open for now to see if others face this issue and track any potential improvements to this behavior where only the console shows up. Thanks again.

[parlough]

I'm going to close this as no one else has reported issues and I think the primary issue here is Language Tour is more of a reference and maybe should be restructured to be without DartPads, and we should have an alternative interactive tour that properly uses DartPads (maybe workshops). Tracking that in https://github.com/dart-lang/site-www/issues/3934

Thanks again for the investigation and information!