Redesign IDE

.gitignore

@@ -8,6 +8,7 @@
 
 # production
 /build
+src/styles/*.css
 
 # misc
 .DS_Store

package.json

@@ -10,23 +10,33 @@
     "update-ui-snapshots": "Update UI test snapshots"
   },
   "scripts": {
+    "build": "build-css && build-js",
+    "build-css": "node-sass-chokidar src/ -o src/",
+    "build-js": "react-scripts-ts build",
+    "coverage": "./scripts/coverage-fix.sh do && react-scripts-ts test --env=jsdom --coverage && ./scripts/coverage-fix.sh undo",
     "format": "prettier --write 'src/**/*.{ts,tsx}'",
     "format:ci": "prettier --list-different 'src/**/*.{ts,tsx}'",
-    "start": "react-scripts-ts start",
-    "build": "react-scripts-ts build",
+    "start-js": "react-scripts-ts start",
+    "start": "npm-run-all -p watch-css start-js",
     "test": "react-scripts-ts test --env=jsdom",
-    "coverage": "./scripts/coverage-fix.sh do && react-scripts-ts test --env=jsdom --coverage && ./scripts/coverage-fix.sh undo",
-    "update-ui-snapshots": "jest --updateSnapshot"
+    "update-ui-snapshots": "jest --updateSnapshot",
+    "watch-css": "node-sass-chokidar src/ -o src/ --watch --recursive"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn format && CI=true yarn test",
-      "pre-push": "yarn format && CI=true yarn test"
+      "pre-commit": "yarn format:ci && CI=true yarn test",
+      "pre-push": "yarn format:ci && CI=true yarn test"
     }
   },
   "dependencies": {
     "@blueprintjs/core": "^2.1.1",
+    "@types/acorn": "^4.0.3",
+    "astring": "^1.3.0",
+    "common-tags": "^1.7.2",
+    "flexboxgrid": "^6.3.1",
+    "node-sass-chokidar": "^1.3.0",
     "normalize.css": "^8.0.0",
+    "npm-run-all": "^4.1.3",
     "react": "^16.3.1",
     "react-ace": "^6.1.1",
     "react-dom": "^16.3.1",
@@ -37,13 +47,17 @@
     "react-transition-group": "^2.3.1",
     "redux": "^3.7.2",
     "redux-mock-store": "^1.5.1",
+    "redux-saga": "^0.15.6",
     "typesafe-actions": "^1.1.2",
     "utility-types": "^2.0.0"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.3",
+    "@types/common-tags": "^1.4.0",
     "@types/enzyme": "^3.1.9",
     "@types/enzyme-adapter-react-16": "^1.0.2",
+    "@types/estree": "^0.0.39",
+    "@types/invariant": "^2.2.29",
     "@types/jest": "^22.2.3",
     "@types/node": "^9.6.5",
     "@types/react": "^16.3.10",
@@ -58,6 +72,7 @@
     "enzyme-adapter-react-16": "^1.1.1",
     "husky": "^1.0.0-rc.6",
     "prettier": "^1.12.0",
+    "re-resizable": "^4.4.8",
     "react-scripts-ts": "^2.15.1",
     "react-test-renderer": "^16.3.1",
     "typescript": "^2.8.1"

src/actions/actionTypes.ts

@@ -0,0 +1,23 @@
+import { Action as ReduxAction } from 'redux'
+
+export interface IAction extends ReduxAction {
+  payload: any
+}
+
+/** Playground */
+export const UPDATE_EDITOR_VALUE = 'UPDATE_EDITOR_VALUE'
+export const UPDATE_REPL_VALUE = 'UPDATE_REPL_VALUE'
+export const CHANGE_EDITOR_WIDTH = 'CHANGE_EDITOR_WIDTH'
+export const EVAL_EDITOR = 'EVAL_EDITOR'
+export const EVAL_REPL = 'EVAL_REPL'
+export const CLEAR_REPL_INPUT = 'CLEAR_REPL_INPUT'
+export const CLEAR_REPL_OUTPUT = 'CLEAR_REPL_OUTPUT'
+export const CLEAR_CONTEXT = 'CLEAR_CONTEXT'
+export const SEND_REPL_INPUT_TO_OUTPUT = 'SEND_REPL_INPUT_TO_OUTPUT'
+
+/** Interpreter */
+export const HANDLE_CONSOLE_LOG = 'HANDLE_CONSOLE_LOG'
+export const EVAL_INTERPRETER = 'EVAL_INTERPRETER'
+export const EVAL_INTERPRETER_SUCCESS = 'EVAL_INTERPRETER_SUCCESS'
+export const EVAL_INTERPRETER_ERROR = 'EVAL_INTERPRETER_ERROR'
+export const INTERRUPT_EXECUTION = 'INTERRUPT_EXECUTION'

src/actions/index.ts

@@ -0,0 +1,2 @@
+export * from './interpreter'
+export * from './playground'

src/actions/interpreter.ts

@@ -0,0 +1,26 @@
+import { SourceError, Value } from '../slang/types'
+import * as actionTypes from './actionTypes'
+
+export const handleConsoleLog = (log: string) => ({
+  type: actionTypes.HANDLE_CONSOLE_LOG,
+  payload: log
+})
+
+export const evalInterpreter = (code: string) => ({
+  type: actionTypes.EVAL_INTERPRETER,
+  payload: code
+})
+
+export const evalInterpreterSuccess = (value: Value) => ({
+  type: actionTypes.EVAL_INTERPRETER_SUCCESS,
+  payload: { type: 'result', value }
+})
+
+export const evalInterpreterError = (errors: SourceError[]) => ({
+  type: actionTypes.EVAL_INTERPRETER_ERROR,
+  payload: { type: 'errors', errors }
+})
+
+export const handleInterruptExecution = () => ({
+  type: actionTypes.INTERRUPT_EXECUTION
+})

src/actions/playground.ts

@@ -1,26 +1,45 @@
-import { Action, ActionCreator } from 'redux'
-
-/**
- * The `type` attribute for an `Action` which updates the `IPlaygroundState`
- * `editorValue`
- */
-export const UPDATE_EDITOR_VALUE = 'UPDATE_EDITOR_VALUE'
-
-/**
- * Represents an `Action` which updates the `editorValue` of a
- * `IPlaygroundState`
- * @property type           - Unique string identifier for this `Action`
- * @property newEditorValue - The new string value for `editorValue`
- */
-export interface IUpdateEditorValue extends Action {
-  payload: string
-}
-
-/**
- * An `ActionCreator` returning an `IUpdateEditorValue` `Action`
- * @param newEditorValue - The new string value for `editorValue`
- */
-export const updateEditorValue: ActionCreator<IUpdateEditorValue> = (newEditorValue: string) => ({
-  type: UPDATE_EDITOR_VALUE,
+import { ActionCreator } from 'redux'
+import * as actionTypes from './actionTypes'
+
+export const updateEditorValue: ActionCreator<actionTypes.IAction> = (newEditorValue: string) => ({
+  type: actionTypes.UPDATE_EDITOR_VALUE,
   payload: newEditorValue
 })
+
+export const changeEditorWidth: ActionCreator<actionTypes.IAction> = (widthChange: string) => ({
+  type: actionTypes.CHANGE_EDITOR_WIDTH,
+  payload: widthChange
+})
+
+export const updateReplValue: ActionCreator<actionTypes.IAction> = (newReplValue: string) => ({
+  type: actionTypes.UPDATE_REPL_VALUE,
+  payload: newReplValue
+})
+
+export const sendReplInputToOutput: ActionCreator<actionTypes.IAction> = (newOutput: string) => ({
+  type: actionTypes.SEND_REPL_INPUT_TO_OUTPUT,
+  payload: {
+    type: 'code',
+    value: newOutput
+  }
+})
+
+export const evalEditor = () => ({
+  type: actionTypes.EVAL_EDITOR
+})
+
+export const evalRepl = () => ({
+  type: actionTypes.EVAL_REPL
+})
+
+export const clearReplInput = () => ({
+  type: actionTypes.CLEAR_REPL_INPUT
+})
+
+export const clearReplOutput = () => ({
+  type: actionTypes.CLEAR_REPL_OUTPUT
+})
+
+export const clearContext = () => ({
+  type: actionTypes.CLEAR_CONTEXT
+})

src/components/Application.tsx

@@ -16,7 +16,7 @@ const Application: React.SFC<IApplicationProps> = props => {
   const redirectToDashboard = () => <Redirect to="/dashboard" />
 
   return (
-    <div className="Application">
+    <div className="Application pt-dark">
       <NavigationBar title={props.title} />
       <div className="Application__main">
         <Switch>

src/components/IDE/Editor.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react'
+
+import AceEditor from 'react-ace'
+
+import { Button, IconName, Intent } from '@blueprintjs/core'
+
+import 'brace/mode/javascript'
+import 'brace/theme/cobalt'
+
+/**
+ * @property editorValue - The string content of the react-ace editor
+ * @property handleEditorChange  - A callback function
+ *           for the react-ace editor's `onChange`
+ * @property handleEvalEditor  - A callback function for evaluation
+ *           of the editor's content, using `slang`
+ */
+export interface IEditorProps {
+  editorValue: string
+  handleEditorValueChange: (newCode: string) => void
+  handleEvalEditor: () => void
+}
+
+class Editor extends React.Component<IEditorProps, {}> {
+  public render() {
+    const genericButton = (
+      label: string,
+      icon: IconName,
+      handleClick = () => {},
+      intent = Intent.NONE,
+      notMinimal = false
+    ) => (
+      <Button
+        onClick={handleClick}
+        className={(notMinimal ? '' : 'pt-minimal') + ' col-xs-12'}
+        intent={intent}
+        icon={icon}
+      >
+        {label}
+      </Button>
+    )
+    const runButton = genericButton('', 'play', this.props.handleEvalEditor)
+    return (
+      <div className="Editor">
+        <div className="row editor-control start-xs">
+          <div className="col-xs-1">{runButton}</div>
+        </div>
+        <div className="row editor-react-ace">
+          <AceEditor
+            className="react-ace"
+            mode="javascript"
+            theme="cobalt"
+            value={this.props.editorValue}
+            onChange={this.props.handleEditorValueChange}
+            width="100%"
+            height="100%"
+            fontSize={14}
+            highlightActiveLine={false}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Editor

src/components/IDE/Repl.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react'
+
+import { Card } from '@blueprintjs/core'
+import ReplControlContainer from '../../containers/IDE/ReplControlContainer'
+import ReplInputContainer from '../../containers/IDE/ReplInputContainer'
+import { InterpreterOutput } from '../../reducers/states'
+import { parseError, toString } from '../../slang'
+
+export interface IReplProps {
+  output: InterpreterOutput[]
+}
+
+export interface IOutputProps {
+  output: InterpreterOutput
+}
+
+const Repl: React.SFC<IReplProps> = props => {
+  const cards = props.output.map((slice, index) => <Output output={slice} key={index} />)
+  return (
+    <div className="Repl">
+      <div className="repl-control-parent">
+        <ReplControlContainer />
+      </div>
+      <div className="repl-output-parent">
+        {cards}
+        <div className="repl-input-parent row">
+          <ReplInputContainer />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const Output: React.SFC<IOutputProps> = props => {
+  switch (props.output.type) {
+    case 'code':
+      return (
+        <Card>
+          <pre className="codeOutput">{props.output.value}</pre>
+        </Card>
+      )
+    case 'running':
+      return (
+        <Card>
+          <pre className="logOutput">{props.output.consoleLogs.join('\n')}</pre>
+        </Card>
+      )
+    case 'result':
+      if (props.output.consoleLogs.length === 0) {
+        return (
+          <Card>
+            <pre className="resultOutput">{toString(props.output.value)}</pre>
+          </Card>
+        )
+      } else {
+        return (
+          <Card>
+            <pre className="logOutput">{props.output.consoleLogs.join('\n')}</pre>
+            <br />
+            <pre className="resultOutput">{toString(props.output.value)}</pre>
+          </Card>
+        )
+      }
+    case 'errors':
+      if (props.output.consoleLogs.length === 0) {
+        return (
+          <Card>
+            <pre className="errorOutput">{parseError(props.output.errors)}</pre>
+          </Card>
+        )
+      } else {
+        return (
+          <Card>
+            <pre className="logOutput">{props.output.consoleLogs.join('\n')}</pre>
+            <br />
+            <pre className="errorOutput">{parseError(props.output.errors)}</pre>
+          </Card>
+        )
+      }
+    default:
+      return <Card>''</Card>
+  }
+}
+
+export default Repl