save

frontend/src/actions.ts

@@ -12,6 +12,7 @@ export const UPDATE_OUTPUT = 'UPDATE_OUTPUT'
 export const UPDATE_EXAMPLES = 'UPDATE_EXAMPLES'
 export const SELECT_EXAMPLE = 'SELECT_EXAMPLE'
 export const UPDATE_CODE = 'UPDATE_CODE'
+export const CLEAR_OUTPUT = 'CLEAR_OUTPUT'
 
 // Action interfaces
 
@@ -54,20 +55,29 @@ interface SelectExampleAction {
     selected: number
 }
 
+interface ClearOutputAction {
+    type: typeof CLEAR_OUTPUT
+}
+
 export type Action = LockAction
     | UnlockAction
     | ExecuteAction
     | UpdateOutputAction
     | UpdateExamplesAction
     | SelectExampleAction
     | UpdateCodeAction
+    | ClearOutputAction
 
 // Action creators
 
 export function lock(): Action {
     return { type: LOCK };
 }
 
+export function clearOuput(): Action {
+    return { type: CLEAR_OUTPUT };
+}
+
 export function updateCode(code: string): Action {
     return { type: UPDATE_CODE, code };
 }
@@ -105,6 +115,7 @@ export const execute = (code: string) => (dispatch: Dispatch) => {
 
     dispatch({ type: EXECUTE });
     dispatch(lock());
+    dispatch(clearOuput());
 
     fetch('/execute', {
         method: 'POST',

frontend/src/components/editor.tsx

@@ -21,6 +21,11 @@ class Editor extends React.Component<EditorProps> {
         this.editor.setHighlightActiveLine(false);
         this.editor.setShowPrintMargin(false);
 
+        this.editor.setOptions({
+            fontFamily: 'monospace',
+            fontSize: '14px'
+        });
+
         let metaDown = false;
         let enterDown = false;
 

frontend/src/components/header.tsx

@@ -15,8 +15,7 @@ const Header = (props: HeaderProps) => {
             <a href={props.url}><img width="80px" src="/images/deno.svg" alt={props.name}/></a>
             <a href={props.url}><h1>{props.name}</h1></a>
             <ul>
-                <li><a href="http://" target="_blank" rel="noopener noreferrer">About</a></li>
-                <li><a href="http://" target="_blank" rel="noopener noreferrer">Contribute</a></li>
+                <li><a href="https://github.com/mtharrison/deno-playground" target="_blank" rel="noopener noreferrer">Contribute</a></li>
             </ul>
         </header>
     );

frontend/src/state.ts

@@ -1,7 +1,7 @@
 import { createStore, applyMiddleware } from 'redux'
 import thunkMiddleware from 'redux-thunk'
 
-import { Action, Example, LOCK, UNLOCK, UPDATE_OUTPUT, UPDATE_EXAMPLES, SELECT_EXAMPLE, UPDATE_CODE } from './actions'
+import { Action, Example, LOCK, UNLOCK, UPDATE_OUTPUT, UPDATE_EXAMPLES, SELECT_EXAMPLE, UPDATE_CODE, CLEAR_OUTPUT } from './actions'
 
 export interface ApplicationState {
     output: string,
@@ -40,6 +40,8 @@ function reducer(state = defaultState, action: Action): ApplicationState {
             return Object.assign({}, state, { selectedExample: action.selected });
         case UPDATE_CODE:
             return Object.assign({}, state, { code: action.code });
+        case CLEAR_OUTPUT:
+            return Object.assign({}, state, { output: '// loading...' });
         default:
             return state;
     }

frontend/static/examples/examples.json

@@ -6,5 +6,9 @@
     {
         "name": "Set Timeout Timer",
         "file": "set-timeout-timer.ts"
+    },
+    {
+        "name": "Load /etc",
+        "file": "load-etc.ts"
     }
 ]

frontend/static/examples/load-etc.ts

@@ -0,0 +1,14 @@
+async function main() {
+
+  // create subprocess
+
+  const p = Deno.run({
+    args: ["ls", "-al", "/etc"]
+  });
+
+  // await its completion
+
+  await p.status();
+}
+
+main();