Skip to content

Conversation

parlough
Copy link
Member

@parlough parlough commented Aug 29, 2025

Previously web/inject_dartpad.dart was just written as a script for dart.dev and docs.flutter.dev, but the logic wasn't really reusable in other contexts and didn't have much error handling. This PR rewrites and moves the core logic into a new library and class at lib/inject_dartpad.dart that other clients can take advantage of through using this package as a git dependency.

Besides being a public library, the new library also makes a few improvements over the original script.

  • Each embed independently handles its initialization and code update, resulting in shorter delays.
  • Lazily loads embeds outside the current viewport.
  • Replaces usage of jsify with directly constructing the appropriate JS object.
  • Adds handling and helpful error messages for when the embed isn't successfully added to the DOM.

The script in web/inject_dartpad.dart was then updated to use the new library, with a few additional improvements:

  • Concurrently initializes multiple embeds rather than one at a time.
  • Gracefully falls back to showing the code if DartPad fails to load in each iframe.
  • Reuses an embed's index compared to others on the page for its iframe ID, simplifying the set up logic.

\cc @craiglabenz Since I can't assign you as a reviewer. I guess you don't have write access to this repo.

@parlough parlough requested a review from johnpryan August 29, 2025 21:18
@parlough
Copy link
Member Author

parlough commented Sep 3, 2025

I also plan to use this new support in the Jaspr version of the docs site, rather than the prebuilt script. Once that is complete, I'll remove the pre-built JS and surrounding compilation support.

///
/// This ID is used both as the HTML element `id` and
/// as the iframe's `name` attribute for message targeting.
final String iframeId;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes it seem like the user needs to put an iframe on the page, but my understanding is that this needs to be a <code> element, right? Maybe we should make this just elementId if that's the case.

host.appendChild(iframe);
parent.replaceWith(host);
await embeddedDartPad.initialize(
addToDocument: (iframe) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe this should be named "onElementCreated" or similar

Copy link
Collaborator

@johnpryan johnpryan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, nice API!

antfitch pushed a commit to dart-lang/site-www that referenced this pull request Sep 25, 2025
The `inject_dartpad.dart.js` script needs to be inlined now that
site-shared is not a submodule. However, this is temporary as we plan to
replace this with a new Dart API directly from a Jaspr component. The
API is added in dart-lang/site-shared#247.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants