@devoncarew has started this

https://github.com/dart-lang/dartpad_server/pull/40

We need to consider:

-> Ensure that it can't be used as a DOS vector by triggering on the expensive package resolutions -> Ensure that it plays nicely with intermittent failures of pub storage

What happened?

Console: Error compiling to JavaScript: XMLHttpRequest error.

It was working fine through the morning. Suddenly it started to fail on every request. Is backend down?

Steps to reproduce problem

Start new Pad with Dart only Press start button Nothing happens Try reload the page

error shows in the console: Console: Error compiling to JavaScript: XMLHttpRequest error.

Additional info

Browser

Browser: Chrome

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

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

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

[paste warnings or errors here]

Machine

Operating system: MacOSX

Version: Catalina

Your code

What code was in the editor, if any, when the failure occurred? You can paste it in below:

void main() {
  for (int i = 0; i < 5; i++) {
    print('hello ${i + 1}');
  }
}

DartPad's output

Did DartPad print anything to the console pane? If so, paste it below:

Error compiling to JavaScript:
XMLHttpRequest error.

If you were running Flutter code, you can also paste an image of the Flutter output directly into this bug report.

This PR presents an approach to an authenticated github integration into Dart-Pad.
I think this resolves #1095 and also may resolve #805 . I originally started this without knowledge of these issues or noticing the project related to this. For this reason there may be desired features or details I have not yet implemented. (I still need to go through the comments/details of the issues and project to see what I can glean) I present a fairly simple set of options to create/fork/update a Gist, along with the ability to star/unstar a gist.

When not logged in there is a simple github logo in the top right. Once you are logged in this changes to your avatar and the menu beneath it has it's options enabled. Two additional menus are added 'Starred Gists' and 'My Gists' - these are filtered to only the ones that contain dart code. There is also a 'star' next to the gist description to star/unstar, or this can be accomplished from the menu. I thought that both of the additional menus serve useful purposes, My Gists presents your dartpad gist, and the 'Starred Gist' menu allows for an easy way to access dartpad gists that you have encountered (or your own)

There is also an new indicator for when there are 'local edits' that are unsaved to github. This appears once there are local edits (that are being saved locally in localstorage, but have not been pushed to github).

This PR is a little more involved than average, so gory details below. (and more can be found in the github repository for the OAuth piece).

I will note that I originally hoped to do this all on the client side (and not require a server side), but the GitHub OAuth process requires a client secret (which, in addition to a client id identify the OAuth application asking for authorization). This client secret must remain secret, and this dictates having a server side piece to initiate and handle the authorization process. In the model present both the client id and the client secret remain secret on the server side.

The authentication endpoint code is presented in https://github.com/timmaffett/dart-pad_github_auth

The two api endpoints within this could be added to the dart-pad bin/server.dart - I thought that keeping it separate for now was better. I think there are arguments to both sides how this would be done (integrated or a separate gcloud server). If an integrated bin/server.dart was determined to be best I could merge the oauth code there... The code in repository runs locally as an https server so that the endpoint is encrypted, which is what github likes. (This requires you to make some certs for local debugging, scripts to automate everything are present) Details on running it locally or from gcloud are contained in the README.md in the repository.

The authentication server has 2 endpoints, the first is '/intiate/XXXrandomstateXX' which is redirected to by dart-pad code with a random state that github requires. The auth code then redirects to a github OAuth app endpoint, authorization takes place (only gist access is requested). Github then redirects back to the other endpoint in the auth server, '/authorized' (and a code and the random state for verification). This then completes the github OAuth process, acquiring the github auth token. This auth token is then encrypted with the original random state, and the auth server redirects back to the dart-pad that is it is configured to redirect to. (The dartpad side then decrypts the github token with the random state it saved when making the request, and the dartpad side is then authenticated)

The dart-pad app then saves the decrypted auth code in localstorage and the UI gains the authorized github capabilities. You can log out, and all local storage of token is erased. If you select 'login' again the process repeats, but github will see if you are authenticated in the browser already and if so the dart-pad will seemingly just reload with an active token (without the user being further bothered, otherwise github has you login..) Strictly speaking the encryption of the token coming back may be overkill, but I thought I would error on the side of extra security. The github token is never logged on the server side - but currently the client side debug console has it logged on occasion, this would of course be removed.

There is an example you can play with here:

https://timmaffett.github.io/github/?id=d3bd83918d21b6d5f778bdc69c3d36d6

Any comments, suggestions or criticisms are most welcome!

There are still some debug logging going to the browser console to remove.

One thing to note is that when you star/unstar a gist it goes to the github api, and then I verify that it took place, but the github api endpoint reporting your starred gists is delayed. For this reason I wait for 1 minute before checking and updating the 'starred gist' menu. This is unfortunately outside our control.

(I just discovered an issue in the safari browser where you have to select the login menu a second time after authenticating for the UI to appear, I will investigate this evening)

This is a continuation of https://github.com/dart-lang/dart-pad/pull/1761 by @tc, which I used as a starting point. It adds a new embed mode with Flutter UI output only, with a new button "Show code" which hides the UI output and shows the code.

Fixes #1234

It would be great to be able to switch between checked/production mode for "run" to be able to demonstrate the different behavior for example for StackOverflow questions.

This is an umbrella issue to track the work required to enable auto rendering. First step, figure out what is required. I have a https://github.com/dart-lang/dart-services/pull/645 that demonstrates Flutter 1.26 (dev channel) works as expected with dart-services using our Bazel based DDC pipeline.

The initial questions I have are:

• How to make the dart-services DDC pipeline generate Flutter code for both HTML and CanvasKit renders? (Dart services does not use webdev.)
• How to configure the code generated in the above step to use a cross origin CanvasKit WASM bundle? (The wasm bundle will probably be hosted alongside the precompiled Flutter and Dart JS binaries that we host in a GCS bucket.)

In the nullsafety version of dartpad:

void main() {
  print([1, 2, null] is List<int>);
  print([1, 2] is List<int>);
}

should print

false
true

Under weak mode, it'll print true twice for backwards compat.

FYI - @leafpetersen @mit-mit @sigmundch

@nshahan - do you have pointer to how to enable at runtime? I.e., a JS call before invoking main in the HTML?

This library isn't working? Can this be added for testing?

import 'package:intl/intl.dart';

https://pub.dartlang.org/documentation/intl/latest/intl/DateFormat-class.html

Not ready for review

PR to add initial sharing support. This adds a 'Share' button which will create an anonymous copy of the pad on gist.github.com. Also adds an editable header, and a New... button.

Hi there. I have been trying to use dartpad and it works fine for dart code. But if i write some flutter code or choose a flutter sample, it simply doesn't display any output. There are no errors either in the browser console or in the dartpad console. I checked network requests and return 200. I am using Lubuntu with Firefox 78.0.2 (latest version). I am also facing similar problem on my Windows 10 machine with both Firefox and Google Chrome latest versions. I have been looking around for solutions but i couldn't find any for days. The problem is that no errors are displayed. After i press the run button, the request is completed but the output stays blank in case of flutter code. Dart code just runs fine. I have already disabled tracking protection etc. of the browsers for dartpad site. I thought maybe that might be causing the problem. But the problem still persists. Can somebody please point out if i am missing something or is this an issue with the dartpad itself? I encountered some questions regarding the same issue but they had some errors printed on the console. But my case is different. No errors are displayed and the network requests are completed gracefully. As far as i know, there are no prerequisites for dartpad to function properly. So what can possible be wrong or is it a specific dartpad issue?

Fixes #910.

Includes enough HTML, dart, and CSS for the new embed UI to run a code snippet, test the result, and report success or failure. Some of this code (values for the test, for instance) will be pulled out once gist integration is improved. Some other bits of code are stubbed out and will be modified in subsequent PRs.

Feel free to critique anything you want, though. 😄

Some samples in the dropdown are focused on teaching flutter (Counter) , and others are demos that showcase Flutter / Dart features (Padracing).

We could group these into two dropdowns, one for tutorials and one for demos. We could also look into cascading menus.

I want to use firebase in dartpad but in initialize step the error occured

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: const FirebaseOptions(
      apiKey: "my apikey",
      authDomain: "my project-id.firebaseapp.com",
      projectId: "my project-id",
      storageBucket: "my project-id.appspot.com",
      messagingSenderId: "01012345678",
      appId: "my project-id",
    ),
  );
}

and the error was like that

what is the problem?

Since we now have a way to save the contents of a DartPad in a GitHub Gist, it would be very nice to have a way in the DartPad UI to take the current contents, save them to a Gist, and then open them in a new project in VSCode with a single click. Something along the lines of this PR for internal links in VSCode, but for the current contents of the DartPad editor.

This would enable users of the API docs to click on this UI to open a new project in VSCode from the docs page.

Of course, you'd probably have to be logged in to GitHub to make it work, but it could prompt you to do that if you click on it without being logged in.

@domesticmouse @DanTup

We currently have to override the sass dependency due to a previous issue with Material Components Web which the fix for has not yet rolled into package:mdc_web. Due to changes in modern sass versions, we also have to restrict sass_builder to an old version.

We should incorporate the new changes into package:mdc_web, then update the packages here and remove the necessary overrides.

When you run DartPad using dart run build_runner serve, Flutter compilation doesn't work correctly:

Access to XMLHttpRequest at 'http://localhost:8080/scripts/assets/FontManifest.json' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
js_util_patch.dart:80          GET http://localhost:8080/scripts/assets/FontManifest.json net::ERR_FAILED 200
callMethod$ @ js_util_patch.dart:80
DomXMLHttpRequestExtension$124send @ dom.dart:714
domHttpRequest @ dom.dart:740
load @ assets.dart:61
runBody @ async_patch.dart:84
_async @ async_patch.dart:123
load @ assets.dart:57
registerFonts @ fonts.dart:113
runBody @ async_patch.dart:84
_async @ async_patch.dart:123
registerFonts @ fonts.dart:109
_setAssetManager @ initialization.dart:269
runBody @ async_patch.dart:84
_async @ async_patch.dart:123
_setAssetManager @ initialization.dart:251
initializeEngineServices @ initialization.dart:208
(anonymous) @ async_patch.dart:45
runUnary @ zone.dart:1653
handleValue @ future_impl.dart:147
handleValueCallback @ future_impl.dart:766
_propagateToListeners @ future_impl.dart:795
[_completeWithValue] @ future_impl.dart:566
(anonymous) @ future_impl.dart:639
_microtaskLoop @ schedule_microtask.dart:40
_startMicrotaskLoop @ schedule_microtask.dart:49
(anonymous) @ async_patch.dart:166
Promise.then (async)
_scheduleImmediateWithPromise @ async_patch.dart:164
_scheduleImmediate @ async_patch.dart:136
_scheduleAsyncCallback @ schedule_microtask.dart:69
_rootScheduleMicrotask @ zone.dart:1458
scheduleMicrotask @ zone.dart:1673
[_asyncCompleteWithValue] @ future_impl.dart:638
[_asyncComplete] @ future_impl.dart:598
complete @ future_impl.dart:36
(anonymous) @ initialization.dart:74
_checkAndCall @ operations.dart:334
dcall @ operations.dart:339
ret @ js_patch.dart:413
Promise.then (async)
callMethod$ @ js_util_patch.dart:80
CanvasKitInitPromiseExtension$124then @ canvaskit_api.dart:185
downloadCanvasKit @ initialization.dart:73
(anonymous) @ async_patch.dart:45
runUnary @ zone.dart:1653
handleValue @ future_impl.dart:147
handleValueCallback @ future_impl.dart:766
_propagateToListeners @ future_impl.dart:795
[_completeWithValue] @ future_impl.dart:566
(anonymous) @ future_impl.dart:639
_microtaskLoop @ schedule_microtask.dart:40
_startMicrotaskLoop @ schedule_microtask.dart:49
(anonymous) @ async_patch.dart:166
Promise.then (async)
_scheduleImmediateWithPromise @ async_patch.dart:164
_scheduleImmediate @ async_patch.dart:136
_scheduleAsyncCallback @ schedule_microtask.dart:69
_rootScheduleMicrotask @ zone.dart:1458
scheduleMicrotask @ zone.dart:1673
[_asyncCompleteWithValue] @ future_impl.dart:638
[_asyncComplete] @ future_impl.dart:598
complete @ future_impl.dart:36
loadEventHandler @ initialization.dart:91
_checkAndCall @ operations.dart:334
dcall @ operations.dart:339
ret @ js_patch.dart:413
load (async)
callMethod$ @ js_util_patch.dart:80
DomEventTargetExtension$124addEventListener @ dom.dart:136
_downloadCanvasKitJs @ initialization.dart:95
downloadCanvasKit @ initialization.dart:66
runBody @ async_patch.dart:84
_async @ async_patch.dart:123
downloadCanvasKit @ initialization.dart:65
initializeCanvasKit @ initialization.dart:56
runBody @ async_patch.dart:84
_async @ async_patch.dart:123
initializeCanvasKit @ initialization.dart:46
initializeEngineServices @ initialization.dart:204
runBody @ async_patch.dart:84
_async @ async_patch.dart:123
initializeEngineServices @ initialization.dart:112
initializeEngine @ initialization.dart:57
runBody @ async_patch.dart:84
_async @ async_patch.dart:123
initializeEngine @ initialization.dart:54
webOnlyInitializePlatform @ initialization.dart:32
runBody @ async_patch.dart:84
_async @ async_patch.dart:123
webOnlyInitializePlatform @ initialization.dart:31
main$ @ VM104:4307
runBody @ async_patch.dart:84
_async @ async_patch.dart:123
main$ @ VM104:4305
(anonymous) @ VM104:36602
execCb @ require.js:5
check @ require.js:5
(anonymous) @ require.js:5
(anonymous) @ require.js:5
(anonymous) @ require.js:5
each @ require.js:5
emit @ require.js:5
check @ require.js:5
(anonymous) @ require.js:5
(anonymous) @ require.js:5
(anonymous) @ require.js:5
each @ require.js:5
emit @ require.js:5
check @ require.js:5
enable @ require.js:5
init @ require.js:5
a @ require.js:5
completeLoad @ require.js:5
onScriptLoad @ require.js:5
errors.dart:266 Uncaught (in promise) Error: Failed to load asset at "assets/FontManifest.json" (0)
    at Object.throw_ [as throw] (errors.dart:266:49)
    at AssetManager.load (assets.dart:77:9)
    at load.throw (<anonymous>)
    at async_patch.dart:60:31
    at _RootZone.runBinary (zone.dart:1658:54)
    at _FutureListener.thenAwait.handleError (future_impl.dart:162:22)
    at handleError (future_impl.dart:778:46)
    at _Future._propagateToListeners (future_impl.dart:799:13)
    at [_completeError] (future_impl.dart:574:5)
    at async._AsyncCallbackEntry.new.callback (future_impl.dart:665:7)
    at Object._microtaskLoop (schedule_microtask.dart:40:11)
    at _startMicrotaskLoop (schedule_microtask.dart:49:5)
    at async_patch.dart:166:15