--- /dev/null
+// Copyright 2012 The Go Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+/*
+In the absence of any formal way to specify interfaces in JavaScript,
+here's a skeleton implementation of a playground transport.
+
+ function Transport() {
+ // Set up any transport state (eg, make a websocket connection).
+ return {
+ Run: function(body, output, options) {
+ // Compile and run the program 'body' with 'options'.
+ // Call the 'output' callback to display program output.
+ return {
+ Kill: function() {
+ // Kill the running program.
+ }
+ };
+ }
+ };
+ }
+
+ // The output callback is called multiple times, and each time it is
+ // passed an object of this form.
+ var write = {
+ Kind: 'string', // 'start', 'stdout', 'stderr', 'end'
+ Body: 'string' // content of write or end status message
+ }
+
+ // The first call must be of Kind 'start' with no body.
+ // Subsequent calls may be of Kind 'stdout' or 'stderr'
+ // and must have a non-null Body string.
+ // The final call should be of Kind 'end' with an optional
+ // Body string, signifying a failure ("killed", for example).
+
+ // The output callback must be of this form.
+ // See PlaygroundOutput (below) for an implementation.
+ function outputCallback(write) {
+ }
+*/
+
+// HTTPTransport is the default transport.
+// enableVet enables running vet if a program was compiled and ran successfully.
+// If vet returned any errors, display them before the output of a program.
+function HTTPTransport(enableVet) {
+ 'use strict';
+
+ function playback(output, data) {
+ // Backwards compatibility: default values do not affect the output.
+ var events = data.Events || [];
+ var errors = data.Errors || '';
+ var status = data.Status || 0;
+ var isTest = data.IsTest || false;
+ var testsFailed = data.TestsFailed || 0;
+
+ var timeout;
+ output({ Kind: 'start' });
+ function next() {
+ if (!events || events.length === 0) {
+ if (isTest) {
+ if (testsFailed > 0) {
+ output({
+ Kind: 'system',
+ Body:
+ '\n' +
+ testsFailed +
+ ' test' +
+ (testsFailed > 1 ? 's' : '') +
+ ' failed.',
+ });
+ } else {
+ output({ Kind: 'system', Body: '\nAll tests passed.' });
+ }
+ } else {
+ if (status > 0) {
+ output({ Kind: 'end', Body: 'status ' + status + '.' });
+ } else {
+ if (errors !== '') {
+ // errors are displayed only in the case of timeout.
+ output({ Kind: 'end', Body: errors + '.' });
+ } else {
+ output({ Kind: 'end' });
+ }
+ }
+ }
+ return;
+ }
+ var e = events.shift();
+ if (e.Delay === 0) {
+ output({ Kind: e.Kind, Body: e.Message });
+ next();
+ return;
+ }
+ timeout = setTimeout(function() {
+ output({ Kind: e.Kind, Body: e.Message });
+ next();
+ }, e.Delay / 1000000);
+ }
+ next();
+ return {
+ Stop: function() {
+ clearTimeout(timeout);
+ },
+ };
+ }
+
+ function error(output, msg) {
+ output({ Kind: 'start' });
+ output({ Kind: 'stderr', Body: msg });
+ output({ Kind: 'end' });
+ }
+
+ function buildFailed(output, msg) {
+ output({ Kind: 'start' });
+ output({ Kind: 'stderr', Body: msg });
+ output({ Kind: 'system', Body: '\nGo build failed.' });
+ }
+
+ var seq = 0;
+ return {
+ Run: function(body, output, options) {
+ seq++;
+ var cur = seq;
+ var playing;
+ $.ajax('/compile', {
+ type: 'POST',
+ data: { version: 2, body: body, withVet: enableVet },
+ dataType: 'json',
+ success: function(data) {
+ if (seq != cur) return;
+ if (!data) return;
+ if (playing != null) playing.Stop();
+ if (data.Errors) {
+ if (data.Errors === 'process took too long') {
+ // Playback the output that was captured before the timeout.
+ playing = playback(output, data);
+ } else {
+ buildFailed(output, data.Errors);
+ }
+ return;
+ }
+ if (!data.Events) {
+ data.Events = [];
+ }
+ if (data.VetErrors) {
+ // Inject errors from the vet as the first events in the output.
+ data.Events.unshift({
+ Message: 'Go vet exited.\n\n',
+ Kind: 'system',
+ Delay: 0,
+ });
+ data.Events.unshift({
+ Message: data.VetErrors,
+ Kind: 'stderr',
+ Delay: 0,
+ });
+ }
+
+ if (!enableVet || data.VetOK || data.VetErrors) {
+ playing = playback(output, data);
+ return;
+ }
+
+ // In case the server support doesn't support
+ // compile+vet in same request signaled by the
+ // 'withVet' parameter above, also try the old way.
+ // TODO: remove this when it falls out of use.
+ // It is 2019-05-13 now.
+ $.ajax('/vet', {
+ data: { body: body },
+ type: 'POST',
+ dataType: 'json',
+ success: function(dataVet) {
+ if (dataVet.Errors) {
+ // inject errors from the vet as the first events in the output
+ data.Events.unshift({
+ Message: 'Go vet exited.\n\n',
+ Kind: 'system',
+ Delay: 0,
+ });
+ data.Events.unshift({
+ Message: dataVet.Errors,
+ Kind: 'stderr',
+ Delay: 0,
+ });
+ }
+ playing = playback(output, data);
+ },
+ error: function() {
+ playing = playback(output, data);
+ },
+ });
+ },
+ error: function() {
+ error(output, 'Error communicating with remote server.');
+ },
+ });
+ return {
+ Kill: function() {
+ if (playing != null) playing.Stop();
+ output({ Kind: 'end', Body: 'killed' });
+ },
+ };
+ },
+ };
+}
+
+function SocketTransport() {
+ 'use strict';
+
+ var id = 0;
+ var outputs = {};
+ var started = {};
+ var websocket;
+ if (window.location.protocol == 'http:') {
+ websocket = new WebSocket('ws://' + window.location.host + '/socket');
+ } else if (window.location.protocol == 'https:') {
+ websocket = new WebSocket('wss://' + window.location.host + '/socket');
+ }
+
+ websocket.onclose = function() {
+ console.log('websocket connection closed');
+ };
+
+ websocket.onmessage = function(e) {
+ var m = JSON.parse(e.data);
+ var output = outputs[m.Id];
+ if (output === null) return;
+ if (!started[m.Id]) {
+ output({ Kind: 'start' });
+ started[m.Id] = true;
+ }
+ output({ Kind: m.Kind, Body: m.Body });
+ };
+
+ function send(m) {
+ websocket.send(JSON.stringify(m));
+ }
+
+ return {
+ Run: function(body, output, options) {
+ var thisID = id + '';
+ id++;
+ outputs[thisID] = output;
+ send({ Id: thisID, Kind: 'run', Body: body, Options: options });
+ return {
+ Kill: function() {
+ send({ Id: thisID, Kind: 'kill' });
+ },
+ };
+ },
+ };
+}
+
+function PlaygroundOutput(el) {
+ 'use strict';
+
+ return function(write) {
+ if (write.Kind == 'start') {
+ el.innerHTML = '';
+ return;
+ }
+
+ var cl = 'system';
+ if (write.Kind == 'stdout' || write.Kind == 'stderr') cl = write.Kind;
+
+ var m = write.Body;
+ if (write.Kind == 'end') {
+ m = '\nProgram exited' + (m ? ': ' + m : '.');
+ }
+
+ if (m.indexOf('IMAGE:') === 0) {
+ // TODO(adg): buffer all writes before creating image
+ var url = 'data:image/png;base64,' + m.substr(6);
+ var img = document.createElement('img');
+ img.src = url;
+ el.appendChild(img);
+ return;
+ }
+
+ // ^L clears the screen.
+ var s = m.split('\x0c');
+ if (s.length > 1) {
+ el.innerHTML = '';
+ m = s.pop();
+ }
+
+ m = m.replace(/&/g, '&');
+ m = m.replace(/</g, '<');
+ m = m.replace(/>/g, '>');
+
+ var needScroll = el.scrollTop + el.offsetHeight == el.scrollHeight;
+
+ var span = document.createElement('span');
+ span.className = cl;
+ span.innerHTML = m;
+ el.appendChild(span);
+
+ if (needScroll) el.scrollTop = el.scrollHeight - el.offsetHeight;
+ };
+}
+
+(function() {
+ function lineHighlight(error) {
+ var regex = /prog.go:([0-9]+)/g;
+ var r = regex.exec(error);
+ while (r) {
+ $('.lines div')
+ .eq(r[1] - 1)
+ .addClass('lineerror');
+ r = regex.exec(error);
+ }
+ }
+ function highlightOutput(wrappedOutput) {
+ return function(write) {
+ if (write.Body) lineHighlight(write.Body);
+ wrappedOutput(write);
+ };
+ }
+ function lineClear() {
+ $('.lineerror').removeClass('lineerror');
+ }
+
+ // opts is an object with these keys
+ // codeEl - code editor element
+ // outputEl - program output element
+ // runEl - run button element
+ // fmtEl - fmt button element (optional)
+ // fmtImportEl - fmt "imports" checkbox element (optional)
+ // shareEl - share button element (optional)
+ // shareURLEl - share URL text input element (optional)
+ // shareRedirect - base URL to redirect to on share (optional)
+ // toysEl - toys select element (optional)
+ // enableHistory - enable using HTML5 history API (optional)
+ // transport - playground transport to use (default is HTTPTransport)
+ // enableShortcuts - whether to enable shortcuts (Ctrl+S/Cmd+S to save) (default is false)
+ // enableVet - enable running vet and displaying its errors
+ function playground(opts) {
+ var code = $(opts.codeEl);
+ var transport = opts['transport'] || new HTTPTransport(opts['enableVet']);
+ var running;
+
+ // autoindent helpers.
+ function insertTabs(n) {
+ // find the selection start and end
+ var start = code[0].selectionStart;
+ var end = code[0].selectionEnd;
+ // split the textarea content into two, and insert n tabs
+ var v = code[0].value;
+ var u = v.substr(0, start);
+ for (var i = 0; i < n; i++) {
+ u += '\t';
+ }
+ u += v.substr(end);
+ // set revised content
+ code[0].value = u;
+ // reset caret position after inserted tabs
+ code[0].selectionStart = start + n;
+ code[0].selectionEnd = start + n;
+ }
+ function autoindent(el) {
+ var curpos = el.selectionStart;
+ var tabs = 0;
+ while (curpos > 0) {
+ curpos--;
+ if (el.value[curpos] == '\t') {
+ tabs++;
+ } else if (tabs > 0 || el.value[curpos] == '\n') {
+ break;
+ }
+ }
+ setTimeout(function() {
+ insertTabs(tabs);
+ }, 1);
+ }
+
+ // NOTE(cbro): e is a jQuery event, not a DOM event.
+ function handleSaveShortcut(e) {
+ if (e.isDefaultPrevented()) return false;
+ if (!e.metaKey && !e.ctrlKey) return false;
+ if (e.key != 'S' && e.key != 's') return false;
+
+ e.preventDefault();
+
+ // Share and save
+ share(function(url) {
+ window.location.href = url + '.go?download=true';
+ });
+
+ return true;
+ }
+
+ function keyHandler(e) {
+ if (opts.enableShortcuts && handleSaveShortcut(e)) return;
+
+ if (e.keyCode == 9 && !e.ctrlKey) {
+ // tab (but not ctrl-tab)
+ insertTabs(1);
+ e.preventDefault();
+ return false;
+ }
+ if (e.keyCode == 13) {
+ // enter
+ if (e.shiftKey) {
+ // +shift
+ run();
+ e.preventDefault();
+ return false;
+ }
+ if (e.ctrlKey) {
+ // +control
+ fmt();
+ e.preventDefault();
+ } else {
+ autoindent(e.target);
+ }
+ }
+ return true;
+ }
+ code.unbind('keydown').bind('keydown', keyHandler);
+ var outdiv = $(opts.outputEl).empty();
+ var output = $('<pre/>').appendTo(outdiv);
+
+ function body() {
+ return $(opts.codeEl).val();
+ }
+ function setBody(text) {
+ $(opts.codeEl).val(text);
+ }
+ function origin(href) {
+ return ('' + href)
+ .split('/')
+ .slice(0, 3)
+ .join('/');
+ }
+
+ var pushedEmpty = window.location.pathname == '/';
+ function inputChanged() {
+ if (pushedEmpty) {
+ return;
+ }
+ pushedEmpty = true;
+ $(opts.shareURLEl).hide();
+ window.history.pushState(null, '', '/');
+ }
+ function popState(e) {
+ if (e === null) {
+ return;
+ }
+ if (e && e.state && e.state.code) {
+ setBody(e.state.code);
+ }
+ }
+ var rewriteHistory = false;
+ if (
+ window.history &&
+ window.history.pushState &&
+ window.addEventListener &&
+ opts.enableHistory
+ ) {
+ rewriteHistory = true;
+ code[0].addEventListener('input', inputChanged);
+ window.addEventListener('popstate', popState);
+ }
+
+ function setError(error) {
+ if (running) running.Kill();
+ lineClear();
+ lineHighlight(error);
+ output
+ .empty()
+ .addClass('error')
+ .text(error);
+ }
+ function loading() {
+ lineClear();
+ if (running) running.Kill();
+ output.removeClass('error').text('Waiting for remote server...');
+ }
+ function run() {
+ loading();
+ running = transport.Run(
+ body(),
+ highlightOutput(PlaygroundOutput(output[0]))
+ );
+ }
+
+ function fmt() {
+ loading();
+ var data = { body: body() };
+ if ($(opts.fmtImportEl).is(':checked')) {
+ data['imports'] = 'true';
+ }
+ $.ajax('/fmt', {
+ data: data,
+ type: 'POST',
+ dataType: 'json',
+ success: function(data) {
+ if (data.Error) {
+ setError(data.Error);
+ } else {
+ setBody(data.Body);
+ setError('');
+ }
+ },
+ });
+ }
+
+ var shareURL; // jQuery element to show the shared URL.
+ var sharing = false; // true if there is a pending request.
+ var shareCallbacks = [];
+ function share(opt_callback) {
+ if (opt_callback) shareCallbacks.push(opt_callback);
+
+ if (sharing) return;
+ sharing = true;
+
+ var sharingData = body();
+ $.ajax('/share', {
+ processData: false,
+ data: sharingData,
+ type: 'POST',
+ contentType: 'text/plain; charset=utf-8',
+ complete: function(xhr) {
+ sharing = false;
+ if (xhr.status != 200) {
+ alert('Server error; try again.');
+ return;
+ }
+ if (opts.shareRedirect) {
+ window.location = opts.shareRedirect + xhr.responseText;
+ }
+ var path = '/p/' + xhr.responseText;
+ var url = origin(window.location) + path;
+
+ for (var i = 0; i < shareCallbacks.length; i++) {
+ shareCallbacks[i](url);
+ }
+ shareCallbacks = [];
+
+ if (shareURL) {
+ shareURL
+ .show()
+ .val(url)
+ .focus()
+ .select();
+
+ if (rewriteHistory) {
+ var historyData = { code: sharingData };
+ window.history.pushState(historyData, '', path);
+ pushedEmpty = false;
+ }
+ }
+ },
+ });
+ }
+
+ $(opts.runEl).click(run);
+ $(opts.fmtEl).click(fmt);
+
+ if (
+ opts.shareEl !== null &&
+ (opts.shareURLEl !== null || opts.shareRedirect !== null)
+ ) {
+ if (opts.shareURLEl) {
+ shareURL = $(opts.shareURLEl).hide();
+ }
+ $(opts.shareEl).click(function() {
+ share();
+ });
+ }
+
+ if (opts.toysEl !== null) {
+ $(opts.toysEl).bind('change', function() {
+ var toy = $(this).val();
+ $.ajax('/doc/play/' + toy, {
+ processData: false,
+ type: 'GET',
+ complete: function(xhr) {
+ if (xhr.status != 200) {
+ alert('Server error; try again.');
+ return;
+ }
+ setBody(xhr.responseText);
+ },
+ });
+ });
+ }
+ }
+
+ window.playground = playground;
+})();