Add a Functioning IDE for the playground

package.json

@@ -20,12 +20,16 @@
   },
   "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",
     "normalize.css": "^8.0.0",
     "react": "^16.3.1",
     "react-ace": "^6.1.1",
@@ -37,13 +41,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",

src/actions/actionTypes.ts

@@ -0,0 +1,22 @@
+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 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,40 @@
-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 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/IDE/Control.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+
+import { Button, IconName, Intent } from '@blueprintjs/core'
+
+/**
+ * @property handleEvalEditor  - A callback function for evaluation
+ *           of the editor's content, using `slang`
+ */
+export interface IControlProps {
+  handleEvalEditor: () => void
+  handleEvalRepl: () => void
+  handleClearReplOutput: () => void
+}
+
+class Control extends React.Component<IControlProps, {}> {
+  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('Run', 'play', this.props.handleEvalEditor)
+    const evalButton = genericButton('Eval', 'play', this.props.handleEvalRepl)
+    const clearButton = genericButton('Clear', 'remove', this.props.handleClearReplOutput)
+    return (
+      <div className="row between-xs">
+        <div className="col-xs-2">{runButton}</div>
+        <div className="col-xs-4">
+          <div className="row">
+            <div className="col-xs-6">{evalButton}</div>
+            <div className="col-xs-6">{clearButton}</div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Control

src/components/IDE/Editor.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+
+import AceEditor from 'react-ace'
+
+import 'brace/mode/javascript'
+import 'brace/theme/terminal'
+
+/**
+ * @property editorValue - The string content of the react-ace editor
+ * @property handleEditorChange  - A callback function
+ *           for the react-ace editor's `onChange`
+ */
+export interface IEditorProps {
+  editorValue: string
+  handleEditorChange: (newCode: string) => void
+}
+
+class Editor extends React.Component<IEditorProps, {}> {
+  public render() {
+    return (
+      <AceEditor
+        className="Editor col-xs-6"
+        mode="javascript"
+        theme="terminal"
+        value={this.props.editorValue}
+        onChange={this.props.handleEditorChange}
+        width="100%"
+      />
+    )
+  }
+}
+
+export default Editor

src/components/IDE/Repl.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react'
+
+import { Card } from '@blueprintjs/core'
+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 col-xs-6">
+      {cards}
+      <div className="row">
+        <ReplInputContainer />
+      </div>
+    </div>
+  )
+}
+
+export const Output: React.SFC<IOutputProps> = props => {
+  switch (props.output.type) {
+    case 'code':
+      return <Card>{props.output.value}</Card>
+    case 'running':
+      return <Card>{props.output.consoleLogs.join('\n')}</Card>
+    case 'result':
+      if (props.output.consoleLogs.length === 0) {
+        return <Card>{toString(props.output.value)}</Card>
+      } else {
+        return (
+          <Card>
+            {[props.output.consoleLogs.join('\n'), toString(props.output.value)].join('\n')}
+          </Card>
+        )
+      }
+    case 'errors':
+      if (props.output.consoleLogs.length === 0) {
+        return <Card>{parseError(props.output.errors)}</Card>
+      } else {
+        return (
+          <Card>
+            {[props.output.consoleLogs.join('\n'), parseError(props.output.errors)].join('\n')}
+          </Card>
+        )
+      }
+    default:
+      return <Card>''</Card>
+  }
+}
+
+export default Repl

src/components/IDE/ReplInput.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import AceEditor from 'react-ace'
+
+import 'brace/mode/javascript'
+import 'brace/theme/terminal'
+
+export interface IReplInputProps {
+  replValue: string
+  handleReplChange: (newCode: string) => void
+  handleReplEval: () => void
+}
+
+class ReplInput extends React.Component<IReplInputProps, {}> {
+  public render() {
+    return (
+      <AceEditor
+        className="col-xs-12"
+        mode="javascript"
+        theme="terminal"
+        height="1px"
+        value={this.props.replValue}
+        onChange={this.props.handleReplChange}
+        commands={[
+          {
+            name: 'evaluate',
+            bindKey: {
+              win: 'Shift-Enter',
+              mac: 'Shift-Enter'
+            },
+            exec: this.props.handleReplEval
+          }
+        ]}
+        minLines={1}
+        maxLines={20}
+        showGutter={false}
+      />
+    )
+  }
+}
+
+export default ReplInput

src/components/IDE/__tests__/Control.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import { shallow } from 'enzyme'
+
+import Control, { IControlProps } from '../Control'
+
+test('Control renders correctly', () => {
+  const props: IControlProps = {
+    handleEvalEditor: () => {},
+    handleEvalRepl: () => {},
+    handleClearReplOutput: () => {}
+  }
+  const app = <Control {...props} />
+  const tree = shallow(app)
+  expect(tree.debug()).toMatchSnapshot()
+})

src/components/IDE/__tests__/Editor.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+import { shallow } from 'enzyme'
+
+import Editor, { IEditorProps } from '../Editor'
+
+test('Editor renders correctly', () => {
+  const props: IEditorProps = {
+    editorValue: '',
+    handleEditorChange: newCode => {}
+  }
+  const app = <Editor {...props} />
+  const tree = shallow(app)
+  expect(tree.debug()).toMatchSnapshot()
+})

src/components/IDE/__tests__/Repl.tsx

@@ -0,0 +1,21 @@
+import { shallow } from 'enzyme'
+import * as React from 'react'
+
+import { ResultOutput } from '../../../reducers/states'
+import Repl, { Output } from '../Repl'
+
+test('Repl renders correctly', () => {
+  const props = {
+    output: [{ type: 'result', value: 'abc', consoleLogs: [] } as ResultOutput]
+  }
+  const app = <Repl {...props} />
+  const tree = shallow(app)
+  expect(tree.debug()).toMatchSnapshot()
+})
+
+test("Output renders correctly for InterpreterOutput.type === 'result'", () => {
+  const props: ResultOutput = { type: 'result', value: 'def', consoleLogs: [] }
+  const app = <Output {...{ output: props }} />
+  const tree = shallow(app)
+  expect(tree.debug()).toMatchSnapshot()
+})