[Embedding] DartPad embedding using code blocks is broken

[joshuadeguzman]

What happened?

Initially, I was using gists for embedding the code samples I am creating. Unfortunately, unauthenticated requests has a rate limit of 60 / hour.

Adding authentication layer adds extra complexity for the participants who want to try out the code and resources.

So I opted to use code blocks, as described in this wiki, to overcome the rate limit issue.

Problem is there were tags generated on the embedded Dart code via code blocks:

</widget></widget></widget></pageitemview></statefulwidget></widget></widget></widget></widget></product></myhomepage>

I've read that embedding using code blocks is fairly new, but it's best if we could track down the current issues encountered.

Steps to reproduce problem

• Embed widget code inside Dart using code blocks using the class language-run-dartpad:theme-dark:mode-flutter:split-75:run-true
• Run the html website

Additional info

Input via HTML and output Dart code: https://gist.github.com/joshuadeguzman/aaeb682ae4f84f44c301804621ea8879

Intro talk resource: https://joshuadeguzman.net/talks/flutter-everywhere

Attachments

Browser

Browser: Google Chrome

Version: 81.0.4044.138 (Official Build) (64-bit)

Are you using any extensions/plugins that affect website behavior (particularly those that affect iframes, such as ad blockers)?

No.

Are there any warnings or errors in your browser's JavaScript console? If so, paste them below:

Using gists

Loading the iframes:

Access to XMLHttpRequest at 'https://api.github.com/gists/db904ce7cf1fa7602bb5c519ab05d8f2' from origin 'https://dartpad.dev' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

After using code blocks

Loading the iframes:

DevTools failed to load SourceMap: Could not load content for https://dartpad.dev/primer.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Tapping Run:

UPDATED

Generated dart code lead from code blocks is not runnable due to the malformed/generated widget tree:

Error compiling to JavaScript:
Instance of 'minified:h_'

Old, related to #1554:

Access to XMLHttpRequest at 'https://dart-services.appspot.com/api/dartservices/v2/compileDDC' from origin 'https://dartpad.dev' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
embed_flutter.dart.js:1166 Error
    at Object.xg (embed_flutter.dart.js:2238)
    at k9.$1 (embed_flutter.dart.js:13010)
    at rG.fk (embed_flutter.dart.js:7082)
    at rg.$0 (embed_flutter.dart.js:6643)
    at Object.eD (embed_flutter.dart.js:1472)
    at Z.c_ (embed_flutter.dart.js:6545)
    at Object.xO (embed_flutter.dart.js:1538)
    at pE.$1 (embed_flutter.dart.js:6723)
    at qU.$1 (embed_flutter.dart.js:9759)
    at Dw (embed_flutter.dart.js:516)
embed_flutter.dart.js:9060 POST https://dart-services.appspot.com/api/dartservices/v2/compileDDC net::ERR_FAILED

Machine

Operating system: MacOS Mojave

Version: 10.14.6

Your code

https://gist.github.com/joshuadeguzman/aaeb682ae4f84f44c301804621ea8879#file-input_via_html-txt

DartPad's output

https://gist.github.com/joshuadeguzman/aaeb682ae4f84f44c301804621ea8879#file-output-dart