Skip to content
This repository was archived by the owner on Mar 2, 2019. It is now read-only.

Add Source §1 features#6

Open
remo5000 wants to merge 19 commits intomasterfrom
source-v1
Open

Add Source §1 features#6
remo5000 wants to merge 19 commits intomasterfrom
source-v1

Conversation

@remo5000
Copy link

@remo5000 remo5000 commented May 14, 2018

This intention of this PR is to facilitate testing of the SICP textbook. The features listed are implemented under the week 3 library, as it is the most similar to the chapter 1 specifications.

  • Arrow functions (using a new ArrowClosure)
  • More symbols according to the §1 specifications
    • parse_int
    • runtime
    • error
    • math_PI,
    • and undefined
  • A SourceError, noDeclareReservedError that throws an error upon declaring a variable with a reserved keyword.

Latest specifications: source_1.pdf

remo5000 and others added 16 commits April 10, 2018 01:45
Refer to the `slang` repository, under commit `7c1eafd`.

Added in this commit:
- ES6 support
- Addition of `const` and `let` keywords
- Prevention of variable redeclaration (for now)

What doesn't work:
- Arrow functions
Mirrors slang repo commit c1d9e00
Source's parseInt requires that both first and second positional
arguments, the inputString and radix be provided. This is in contrast to
the native implementation of parseInt where the second radix argument
can be omitted. As a result, a wrapper function `parse_int` in `misc`
was defined to raise errors for bad arguments.
As per source chapter 1 specifications
Added right after display due to their semantic similarity.
Since we had last mapped source chapter 1 to source week 3, we now need
to remove symbols defined for source week 3 that are not defined in the
specifications for source chapter 1
As per the specification for source chapter 1.
As per specifications for source chapter 1
As per specifications. Display was already defined for source week 4,
but we mapped source chapter 1 to source week 3. So, display was moved
from week 4 to week 3.
Reorder the sequence of defineSymbols according to their order in the
specifications for source chapter 1.
Note that some reserved words define by the source specifications such
as `true` will raise a SyntaxError first before reaching this new error.
These are stored in the __SOURCE__ attribute and accessed in interop.ts
The native ECMAScript function is named `parseInt`, but source
specifications provide `parse_int`
@remo5000 remo5000 requested a review from evansb May 14, 2018 01:42
@ning-y
Copy link
Member

ning-y commented May 14, 2018

@evansb If the changes are okay, could you help us deploy the changes onto the NUS sadm server? Prof Henz had requested that we make the changes live so that the example programs for the new textbook can be tested, but we don't want to take the risk of messing with the prod servers.

context,
new errors.VariableRedeclaration(context.runtime.nodes[0]!, name)
)
} else if (kind === 'let' || kind === 'var') {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be a parser rule, not runtime

@evansb
Copy link
Contributor

evansb commented May 14, 2018

I don't have access to the SADM server though. I can give you the tarball and instruction to deploy

@evansb
Copy link
Contributor

evansb commented May 14, 2018

I thought we agreed to use CLI?

remo5000 added 2 commits May 14, 2018 13:01
Changed it from a runtime error into a SourceError, under the `rules`
folder (like noDeclareReserved)
Missed out on removing these declarations (that were used to make a runtime error)
ning-y added a commit to source-academy/frontend that referenced this pull request May 16, 2018
This is a copy over of the current state of `./frontend/src/toolchain` at
source-academy/source-academy2 67d9184. It includes only source chapter 1, a new
specification (see [PR 6 at the
source-academy/source-academy2](source-academy/source-academy2#6)
repository).
The signature of defineVariable() changed in commit 944438 , but its
calls were not changed, causing a typescript error.
@ning-y
Copy link
Member

ning-y commented May 16, 2018

@evansb Sorry, we just pushed an important bugfix with 249d2dc.

ning-y added a commit to source-academy/frontend that referenced this pull request May 26, 2018
* Add button for playground at Navbar

No functionality.

* Make first NavbarGroup's align left explicit

* Change playground icon

* Add routes to Playground

* Update test snapshots

* Fix bad test for Playground component

Oops

* Add react-ace for IDE

* Try passing props into playground

* Load a preset "Hello World" onto the ace editor.

Changes:
- Changed `Playground` component to a statefull one (extends `React.Component)
- add property `playgroundCode` to IApplicationState (bad practice,
change to a slice of the state instead)
- add interface `IPlaygroundProps` to denote the properties passed to
Playground

* Remove unused onChange()

* Add stored state for playground editor text

Once again, this is a WIP. Text typed into the playground editor will
stay in the playground (or rather, appear again) after leaving and
coming back.

Changes:
- added of action, actionCreator (updatePlaygroundCode)
- added a reducer under application's `reducer` function

Possible problems:
- Location of reducer
- Location of playgroundCode stored (as in previous commit)

* Change initialValue prop to editorValue

* Made playground actions a separate file

* Modify actions and dispatch call

* Change redux import statement

* Add IPlaygroundState to IState in index reducer

* Add playground reducer

* Remove playgroundCode from IApplicationState

* Fix type errors

Made a compromise by including an IPlaygroundState as part of IApplicationProps

* Re-disable console.logs (tslint)

* Fix missing imports for react-ace mode, theme

* Add playground CSS

* Add JSDoc style comments for playground

* Fix some tests

* Fix semantics of mapStateToProps for ApplicationContainer

* Do trivial formatting

* Add interpreter toolchain as 'slang'

This is a copy over of the current state of `./frontend/src/toolchain` at
source-academy/source-academy2 67d9184. It includes only source chapter 1, a new
specification (see [PR 6 at the
source-academy/source-academy2](source-academy/source-academy2#6)
repository).

* Add react-saga and react types to yarn

The react types were added as a result of the `yarn add` command.

* Add saga to middleware list

* Segregate actionTypes from actions

* Fix reducer actionType import

* Remove actionType import from action/index

* Fix fatal bug with defineVariable calls

* Fix missing imports

Some imports of slang are already provided as additional dependencies to other
modules, e.g. acorn is already a dependency of webpack

* Add tests for slang

* Remove unused type definitions

* Lint typescript files of slang

* Add interruption actionType

* Add sagas WIP

For ny's reference

* Add more interpreter actions

* Change to older version of saga

* Add notification file

* Change es target to es2016

This was the target in sourceacademy-2 as well. Without this, there was
a problem with casting an `IterableIterator` to `yield*`, that expected
an array.

* Revert "Remove unused type definitions"

This reverts commit e18f2ae.
"Oops" - @ningyuansg

* Fix some slang errors

* Make 16/05 code review changes

Changes not made:
- Change of `Playground` component to an `SFC`

* Fix test snapshot (name of onChange for ReactAce)

Due to 7ac707c.

* Revert Playground as SFC, make Editor container

* Make Playground stateless

This is done by abstracting out the ace editor into its own component
, `Editor`, and its own container to handle redux calls,
`EditorContainer`.

* Add test and fix export type

Export of `Editor` changed to a default export, like the other
components. A test has been added for the `Editor` component. Snapshot
changes pending.

* Fix type errors according to tslint

* Change object methods to use es6 shorthand

* Fix more linting errors for interpreter.ts

* Disable `no-empty` rule.

Rationale: A no-op function is much easier to see as `() => {}` as
compared to `() => undefined` or even `() =>`. In addition, this syntax
is used by parts of the interpreter as well.

* Add `max-classes-per-file` exception for interpreter files

Splitting the exports would cause futher refactoring in other parts of
the interpreter codebase

* Fix linting errors in parser, rules/braces...

* Fix tslint errors in `parser`

Exception was added for multiple class exports.

* Format interpreter.ts

* Fix tslint errors in rules/*

* Fix tslint errors for rttc.ts

* Fix tslint errors for node.ts

* Fix tslint errors for types.ts

* Fix stdlib/list, stdlib/misc and scheudler tslint

An additional change is the use of a line disable in `parser.ts` instead
of an entire file disable.

* Fix `saga` not being run after store creation

* Fix Editor test (tslint errors)

1. Missing comma in object props
2. Syntax error and missing object comprehension in creating Editor

* Add properties context, output to IPlaygroundState

1. context is of type slang.Context. This holds the 'environment' for the slang
   interpreter
2. Output is a string array that will hold the stdout/stderr (display, error
   calls) of a program run in the editor. For repl programs, it will also hold
   the return value of the program. Each element of an array is a historical
   output.

* Add button to call on handleEvalEditor

This change allows the newly added button to call upon the
handleEvalEditor callback, whose reducer is not defined (yet)

* Add mapDispatchToProps for EditorContainer

Note that the intersection type is used with `Pick<T>` in order to
define `DispatchProps`, this might not be ideal. Input on this issue
would be appreciated.

* Fix 'ace is undefined' error

* Add Output SFC

* Add output tests, did yarn format

* Add 'run' button to EditorContainer

* Change Editor snapshot to include button

* Wire saga interpreter success to output SFC

* Fix wrong file extension '.tsx' -> '.ts'

'Oops' - ny

* Move state definitions into their own file

Fixes #7

* Add type for interpreter outputs

In addition, tslint rule `interface-over-type-literal` was disabled, due to the need
for many types (that would not be extended)

* Fix #11, using bindActionCreators

* Add flexboxgrid dependency

* Line Editor and Output up side to side

* Refactor and modularise playground as IDE

* Change Output to Repl

This is to allow for the incoming repl, which will produce outputs as
well.

* Implement multiple Outputs in Repl (history)

* Fix class playground not taking up all of parent

* Make use of slang's toString to format values

Previously, undefined would print as '' (empty string).

* Make flexbox tags relative to current component

* Make IPlaygroundState properties readonly

Fixes #14

* Add ReplInput (not wired to saga)

* Replace TextArea with AceEditor

Also change theme to dark background so we can debug better.

* Move IDE buton to a separate Control component

This is contained within the IDE component

* Add property replValue to IPlaygroundState

replValue, like editorValue, will store the contents of repl. It is used to
allow the contents of the repl to persist through route changes. It is also the
target for evaluation.

* Make repl read from state.playground.replValue

* Add evalRepl

* Update Control snapshot with eval button

* Add action UPDATE_REPL_VALUE

* Implement persistent repl content across routes

* Did yarn format

* Add action clear repl

Also removed unnecessarily verbose typings

* Make eval button clear the replValue

* Fix repl context resetting every eval

TODO: Editor run needs to update playground context

* Add keyboard shortcut for REPL

* Fix formatting for repl shortcut

* Errors are loosely represented as string 'error'

* Fix yarn format git hooks passing for unformatted

Previously, if the staged files are not formatted according to prettier, running
the pre-commit hook would change the file formatting, and then return an exit
code 0, allowing the commit to go through. However, the changes made by prettier
are not staged.

Now, the pre-commit hook will fail, so that only prettier-passed files can be
committed.

* Add ParseError in slang

* Improve error messages to specify type of error

* Improve CSS for repl output

* Fix many error messages not printing on new lines

Thank you stackoverflow

* Fix editor not changing playground.context

* Change ParseError to a function, parseError

* Simplify REPL Output Component creation

Turns out there's a 2-arity `map` that provides index

* Rename playground css to ide

* Change Playground to IDE in ide.css

No visible change in effect. Regardless, this will probably be
refactored once SCSS is introduced

* Change "ClEAR_REPL" to "CLEAR_REPL_INPUT"

This is to differenciate between the clearing of repl input and output

* Add button and actions to clear REPL output

- Button added
- Action and reducer added

* Make the clear button wipe the REPL context

* Revert "Make clear button wipe the REPL context"

I realised that source academy does not clear the context, and that
clearing only the output is in line with most command-line applications
and REPLs.
This reverts commit 4bd3c44.

* Remove duplicate EditorContainer

Was received from merging master into the branch

* Fix button row in playground overflowing to right

Would cause tiny bit of empty space on the right of the page, slightly outside
the viewport.

* Make run button clearReplOutput, remove default

* Output code typed in ReplInput as Output

* Use array method concat, reorder definitions

Readability changes.

* No verify commit, tests fails

* Fix failing tests

Okay, so slang's display needs access to the store in order to call dispatch, so
that the display can be output'd in realtime. In the previous commit, this was
achieved by importing the instantiated store from src/index.tsx into
src/slang/stdlib/misc.ts.

This works when the full server is running, but fails with the tests, because
mockContext calls createContext, which imports stdlib/misc, which tries to
import store. But because it's just a test, and store doesn't exist, the test
fails.

* Make run button interrupt execution

* Make eval interrupt execution, remove notifs

Next, change display so that if playground.output array is empty, initialise.

* Fix display not working after a clear

* Fix Eval button crashing site when Output[] empty

This is because the Output SFC tries to access an undefined output.consoleLogs.

output.consoleLogs is undefined after an Eval button click, because
EVAL_INTERPRETER_(SUCCESS|ERRORS) will try to access the last element of
playground.outputs, but the last element after playground.outputs is always a
CodeOutput for Eval button presses; and CodeOutput doesn't have a consoleLogs
property, so EVAL_INTERPRETER_(SUCCESS|ERRORS) copies over undefined as the new
ResultOutput or ErrorOutput's consoleLog property.

* Refactor display interactions with react/redux

* Add Math obj, symbols NaN and Infinity

Math: resolves #20,
Symbols: resolves #16

* Add Source §2 (#35)

* Rename context.week -> context.chapter

* Add list library

TODO: Arrow functions do not work with map

* Make context chapter 2 by default for dev

* Fix arrow funcs not working with map/build_list...

* Revert default libraries back to chap 1

* Add sourceChapter property to playground state

Playground defaults to most recent source chapter.

* Add component for selecting source chapters

Not yet wired.

* Add action for chapter select

Not yet wired up.

* Add chapter select

* Add section sign, notification on chapter change

* Add list.equal
ning-y added a commit to source-academy/frontend that referenced this pull request May 26, 2018
* Add button for playground at Navbar

No functionality.

* Make first NavbarGroup's align left explicit

* Change playground icon

* Add routes to Playground

* Update test snapshots

* Fix bad test for Playground component

Oops

* Add react-ace for IDE

* Try passing props into playground

* Load a preset "Hello World" onto the ace editor.

Changes:
- Changed `Playground` component to a statefull one (extends `React.Component)
- add property `playgroundCode` to IApplicationState (bad practice,
change to a slice of the state instead)
- add interface `IPlaygroundProps` to denote the properties passed to
Playground

* Remove unused onChange()

* Add stored state for playground editor text

Once again, this is a WIP. Text typed into the playground editor will
stay in the playground (or rather, appear again) after leaving and
coming back.

Changes:
- added of action, actionCreator (updatePlaygroundCode)
- added a reducer under application's `reducer` function

Possible problems:
- Location of reducer
- Location of playgroundCode stored (as in previous commit)

* Change initialValue prop to editorValue

* Made playground actions a separate file

* Modify actions and dispatch call

* Change redux import statement

* Add IPlaygroundState to IState in index reducer

* Add playground reducer

* Remove playgroundCode from IApplicationState

* Fix type errors

Made a compromise by including an IPlaygroundState as part of IApplicationProps

* Re-disable console.logs (tslint)

* Fix missing imports for react-ace mode, theme

* Add playground CSS

* Add JSDoc style comments for playground

* Fix some tests

* Fix semantics of mapStateToProps for ApplicationContainer

* Do trivial formatting

* Add interpreter toolchain as 'slang'

This is a copy over of the current state of `./frontend/src/toolchain` at
source-academy/source-academy2 67d9184. It includes only source chapter 1, a new
specification (see [PR 6 at the
source-academy/source-academy2](source-academy/source-academy2#6)
repository).

* Add react-saga and react types to yarn

The react types were added as a result of the `yarn add` command.

* Add saga to middleware list

* Segregate actionTypes from actions

* Fix reducer actionType import

* Remove actionType import from action/index

* Fix fatal bug with defineVariable calls

* Fix missing imports

Some imports of slang are already provided as additional dependencies to other
modules, e.g. acorn is already a dependency of webpack

* Add tests for slang

* Remove unused type definitions

* Lint typescript files of slang

* Add interruption actionType

* Add sagas WIP

For ny's reference

* Add more interpreter actions

* Change to older version of saga

* Add notification file

* Change es target to es2016

This was the target in sourceacademy-2 as well. Without this, there was
a problem with casting an `IterableIterator` to `yield*`, that expected
an array.

* Revert "Remove unused type definitions"

This reverts commit e18f2ae.
"Oops" - @ningyuansg

* Fix some slang errors

* Make 16/05 code review changes

Changes not made:
- Change of `Playground` component to an `SFC`

* Fix test snapshot (name of onChange for ReactAce)

Due to 7ac707c.

* Revert Playground as SFC, make Editor container

* Make Playground stateless

This is done by abstracting out the ace editor into its own component
, `Editor`, and its own container to handle redux calls,
`EditorContainer`.

* Add test and fix export type

Export of `Editor` changed to a default export, like the other
components. A test has been added for the `Editor` component. Snapshot
changes pending.

* Fix type errors according to tslint

* Change object methods to use es6 shorthand

* Fix more linting errors for interpreter.ts

* Disable `no-empty` rule.

Rationale: A no-op function is much easier to see as `() => {}` as
compared to `() => undefined` or even `() =>`. In addition, this syntax
is used by parts of the interpreter as well.

* Add `max-classes-per-file` exception for interpreter files

Splitting the exports would cause futher refactoring in other parts of
the interpreter codebase

* Fix linting errors in parser, rules/braces...

* Fix tslint errors in `parser`

Exception was added for multiple class exports.

* Format interpreter.ts

* Fix tslint errors in rules/*

* Fix tslint errors for rttc.ts

* Fix tslint errors for node.ts

* Fix tslint errors for types.ts

* Fix stdlib/list, stdlib/misc and scheudler tslint

An additional change is the use of a line disable in `parser.ts` instead
of an entire file disable.

* Fix `saga` not being run after store creation

* Fix Editor test (tslint errors)

1. Missing comma in object props
2. Syntax error and missing object comprehension in creating Editor

* Add properties context, output to IPlaygroundState

1. context is of type slang.Context. This holds the 'environment' for the slang
   interpreter
2. Output is a string array that will hold the stdout/stderr (display, error
   calls) of a program run in the editor. For repl programs, it will also hold
   the return value of the program. Each element of an array is a historical
   output.

* Add button to call on handleEvalEditor

This change allows the newly added button to call upon the
handleEvalEditor callback, whose reducer is not defined (yet)

* Add mapDispatchToProps for EditorContainer

Note that the intersection type is used with `Pick<T>` in order to
define `DispatchProps`, this might not be ideal. Input on this issue
would be appreciated.

* Fix 'ace is undefined' error

* Add Output SFC

* Add output tests, did yarn format

* Add 'run' button to EditorContainer

* Change Editor snapshot to include button

* Wire saga interpreter success to output SFC

* Fix wrong file extension '.tsx' -> '.ts'

'Oops' - ny

* Move state definitions into their own file

Fixes #7

* Add type for interpreter outputs

In addition, tslint rule `interface-over-type-literal` was disabled, due to the need
for many types (that would not be extended)

* Fix #11, using bindActionCreators

* Add flexboxgrid dependency

* Line Editor and Output up side to side

* Refactor and modularise playground as IDE

* Change Output to Repl

This is to allow for the incoming repl, which will produce outputs as
well.

* Implement multiple Outputs in Repl (history)

* Fix class playground not taking up all of parent

* Make use of slang's toString to format values

Previously, undefined would print as '' (empty string).

* Make flexbox tags relative to current component

* Make IPlaygroundState properties readonly

Fixes #14

* Add ReplInput (not wired to saga)

* Replace TextArea with AceEditor

Also change theme to dark background so we can debug better.

* Move IDE buton to a separate Control component

This is contained within the IDE component

* Add property replValue to IPlaygroundState

replValue, like editorValue, will store the contents of repl. It is used to
allow the contents of the repl to persist through route changes. It is also the
target for evaluation.

* Make repl read from state.playground.replValue

* Add evalRepl

* Update Control snapshot with eval button

* Add action UPDATE_REPL_VALUE

* Implement persistent repl content across routes

* Did yarn format

* Add action clear repl

Also removed unnecessarily verbose typings

* Make eval button clear the replValue

* Fix repl context resetting every eval

TODO: Editor run needs to update playground context

* Add keyboard shortcut for REPL

* Fix formatting for repl shortcut

* Errors are loosely represented as string 'error'

* Fix yarn format git hooks passing for unformatted

Previously, if the staged files are not formatted according to prettier, running
the pre-commit hook would change the file formatting, and then return an exit
code 0, allowing the commit to go through. However, the changes made by prettier
are not staged.

Now, the pre-commit hook will fail, so that only prettier-passed files can be
committed.

* Add ParseError in slang

* Improve error messages to specify type of error

* Improve CSS for repl output

* Fix many error messages not printing on new lines

Thank you stackoverflow

* Fix editor not changing playground.context

* Change ParseError to a function, parseError

* Simplify REPL Output Component creation

Turns out there's a 2-arity `map` that provides index

* Rename playground css to ide

* Change Playground to IDE in ide.css

No visible change in effect. Regardless, this will probably be
refactored once SCSS is introduced

* Change "ClEAR_REPL" to "CLEAR_REPL_INPUT"

This is to differenciate between the clearing of repl input and output

* Add button and actions to clear REPL output

- Button added
- Action and reducer added

* Make the clear button wipe the REPL context

* Revert "Make clear button wipe the REPL context"

I realised that source academy does not clear the context, and that
clearing only the output is in line with most command-line applications
and REPLs.
This reverts commit 4bd3c44.

* Remove duplicate EditorContainer

Was received from merging master into the branch

* Fix button row in playground overflowing to right

Would cause tiny bit of empty space on the right of the page, slightly outside
the viewport.

* Make run button clearReplOutput, remove default

* Output code typed in ReplInput as Output

* Use array method concat, reorder definitions

Readability changes.

* No verify commit, tests fails

* Fix failing tests

Okay, so slang's display needs access to the store in order to call dispatch, so
that the display can be output'd in realtime. In the previous commit, this was
achieved by importing the instantiated store from src/index.tsx into
src/slang/stdlib/misc.ts.

This works when the full server is running, but fails with the tests, because
mockContext calls createContext, which imports stdlib/misc, which tries to
import store. But because it's just a test, and store doesn't exist, the test
fails.

* Make run button interrupt execution

* Make eval interrupt execution, remove notifs

Next, change display so that if playground.output array is empty, initialise.

* Fix display not working after a clear

* Fix Eval button crashing site when Output[] empty

This is because the Output SFC tries to access an undefined output.consoleLogs.

output.consoleLogs is undefined after an Eval button click, because
EVAL_INTERPRETER_(SUCCESS|ERRORS) will try to access the last element of
playground.outputs, but the last element after playground.outputs is always a
CodeOutput for Eval button presses; and CodeOutput doesn't have a consoleLogs
property, so EVAL_INTERPRETER_(SUCCESS|ERRORS) copies over undefined as the new
ResultOutput or ErrorOutput's consoleLog property.

* Refactor display interactions with react/redux

* Make RTTC errors fatal, add checks for unary

RTTC errors (type errors found at runtime) will now interrupt execution of the
program and return an error immediately.

Checks for unary expression arguments have been implemented.

* Update type rules for binary operators

Function type checks not yet implemented

* Fix typings not working for functions

* Fix typings for logical expressions

* Fix number + number raising error

* Fix number (<|<=|>|>=) number raising error

* Add tests, fix some errors with + operator

* Revert typing restrictions for === and !==

=== and !== no longer raises errors.
ning-y added a commit to source-academy/frontend that referenced this pull request May 26, 2018
* Add button for playground at Navbar

No functionality.

* Make first NavbarGroup's align left explicit

* Change playground icon

* Add routes to Playground

* Update test snapshots

* Fix bad test for Playground component

Oops

* Add react-ace for IDE

* Try passing props into playground

* Load a preset "Hello World" onto the ace editor.

Changes:
- Changed `Playground` component to a statefull one (extends `React.Component)
- add property `playgroundCode` to IApplicationState (bad practice,
change to a slice of the state instead)
- add interface `IPlaygroundProps` to denote the properties passed to
Playground

* Remove unused onChange()

* Add stored state for playground editor text

Once again, this is a WIP. Text typed into the playground editor will
stay in the playground (or rather, appear again) after leaving and
coming back.

Changes:
- added of action, actionCreator (updatePlaygroundCode)
- added a reducer under application's `reducer` function

Possible problems:
- Location of reducer
- Location of playgroundCode stored (as in previous commit)

* Change initialValue prop to editorValue

* Made playground actions a separate file

* Modify actions and dispatch call

* Change redux import statement

* Add IPlaygroundState to IState in index reducer

* Add playground reducer

* Remove playgroundCode from IApplicationState

* Fix type errors

Made a compromise by including an IPlaygroundState as part of IApplicationProps

* Re-disable console.logs (tslint)

* Fix missing imports for react-ace mode, theme

* Add playground CSS

* Add JSDoc style comments for playground

* Fix some tests

* Fix semantics of mapStateToProps for ApplicationContainer

* Do trivial formatting

* Add interpreter toolchain as 'slang'

This is a copy over of the current state of `./frontend/src/toolchain` at
source-academy/source-academy2 67d9184. It includes only source chapter 1, a new
specification (see [PR 6 at the
source-academy/source-academy2](source-academy/source-academy2#6)
repository).

* Add react-saga and react types to yarn

The react types were added as a result of the `yarn add` command.

* Add saga to middleware list

* Segregate actionTypes from actions

* Fix reducer actionType import

* Remove actionType import from action/index

* Fix fatal bug with defineVariable calls

* Fix missing imports

Some imports of slang are already provided as additional dependencies to other
modules, e.g. acorn is already a dependency of webpack

* Add tests for slang

* Remove unused type definitions

* Lint typescript files of slang

* Add interruption actionType

* Add sagas WIP

For ny's reference

* Add more interpreter actions

* Change to older version of saga

* Add notification file

* Change es target to es2016

This was the target in sourceacademy-2 as well. Without this, there was
a problem with casting an `IterableIterator` to `yield*`, that expected
an array.

* Revert "Remove unused type definitions"

This reverts commit e18f2ae.
"Oops" - @ningyuansg

* Fix some slang errors

* Make 16/05 code review changes

Changes not made:
- Change of `Playground` component to an `SFC`

* Fix test snapshot (name of onChange for ReactAce)

Due to 7ac707c.

* Revert Playground as SFC, make Editor container

* Make Playground stateless

This is done by abstracting out the ace editor into its own component
, `Editor`, and its own container to handle redux calls,
`EditorContainer`.

* Add test and fix export type

Export of `Editor` changed to a default export, like the other
components. A test has been added for the `Editor` component. Snapshot
changes pending.

* Fix type errors according to tslint

* Change object methods to use es6 shorthand

* Fix more linting errors for interpreter.ts

* Disable `no-empty` rule.

Rationale: A no-op function is much easier to see as `() => {}` as
compared to `() => undefined` or even `() =>`. In addition, this syntax
is used by parts of the interpreter as well.

* Add `max-classes-per-file` exception for interpreter files

Splitting the exports would cause futher refactoring in other parts of
the interpreter codebase

* Fix linting errors in parser, rules/braces...

* Fix tslint errors in `parser`

Exception was added for multiple class exports.

* Format interpreter.ts

* Fix tslint errors in rules/*

* Fix tslint errors for rttc.ts

* Fix tslint errors for node.ts

* Fix tslint errors for types.ts

* Fix stdlib/list, stdlib/misc and scheudler tslint

An additional change is the use of a line disable in `parser.ts` instead
of an entire file disable.

* Fix `saga` not being run after store creation

* Fix Editor test (tslint errors)

1. Missing comma in object props
2. Syntax error and missing object comprehension in creating Editor

* Add properties context, output to IPlaygroundState

1. context is of type slang.Context. This holds the 'environment' for the slang
   interpreter
2. Output is a string array that will hold the stdout/stderr (display, error
   calls) of a program run in the editor. For repl programs, it will also hold
   the return value of the program. Each element of an array is a historical
   output.

* Add button to call on handleEvalEditor

This change allows the newly added button to call upon the
handleEvalEditor callback, whose reducer is not defined (yet)

* Add mapDispatchToProps for EditorContainer

Note that the intersection type is used with `Pick<T>` in order to
define `DispatchProps`, this might not be ideal. Input on this issue
would be appreciated.

* Fix 'ace is undefined' error

* Add Output SFC

* Add output tests, did yarn format

* Add 'run' button to EditorContainer

* Change Editor snapshot to include button

* Wire saga interpreter success to output SFC

* Fix wrong file extension '.tsx' -> '.ts'

'Oops' - ny

* Move state definitions into their own file

Fixes #7

* Add type for interpreter outputs

In addition, tslint rule `interface-over-type-literal` was disabled, due to the need
for many types (that would not be extended)

* Fix #11, using bindActionCreators

* Add flexboxgrid dependency

* Line Editor and Output up side to side

* Refactor and modularise playground as IDE

* Change Output to Repl

This is to allow for the incoming repl, which will produce outputs as
well.

* Implement multiple Outputs in Repl (history)

* Fix class playground not taking up all of parent

* Make use of slang's toString to format values

Previously, undefined would print as '' (empty string).

* Make flexbox tags relative to current component

* Make IPlaygroundState properties readonly

Fixes #14

* Add ReplInput (not wired to saga)

* Replace TextArea with AceEditor

Also change theme to dark background so we can debug better.

* Move IDE buton to a separate Control component

This is contained within the IDE component

* Add property replValue to IPlaygroundState

replValue, like editorValue, will store the contents of repl. It is used to
allow the contents of the repl to persist through route changes. It is also the
target for evaluation.

* Make repl read from state.playground.replValue

* Add evalRepl

* Update Control snapshot with eval button

* Add action UPDATE_REPL_VALUE

* Implement persistent repl content across routes

* Did yarn format

* Add action clear repl

Also removed unnecessarily verbose typings

* Make eval button clear the replValue

* Fix repl context resetting every eval

TODO: Editor run needs to update playground context

* Add keyboard shortcut for REPL

* Fix formatting for repl shortcut

* Errors are loosely represented as string 'error'

* Fix yarn format git hooks passing for unformatted

Previously, if the staged files are not formatted according to prettier, running
the pre-commit hook would change the file formatting, and then return an exit
code 0, allowing the commit to go through. However, the changes made by prettier
are not staged.

Now, the pre-commit hook will fail, so that only prettier-passed files can be
committed.

* Add ParseError in slang

* Improve error messages to specify type of error

* Improve CSS for repl output

* Fix many error messages not printing on new lines

Thank you stackoverflow

* Fix editor not changing playground.context

* Change ParseError to a function, parseError

* Simplify REPL Output Component creation

Turns out there's a 2-arity `map` that provides index

* Rename playground css to ide

* Change Playground to IDE in ide.css

No visible change in effect. Regardless, this will probably be
refactored once SCSS is introduced

* Change "ClEAR_REPL" to "CLEAR_REPL_INPUT"

This is to differenciate between the clearing of repl input and output

* Add button and actions to clear REPL output

- Button added
- Action and reducer added

* Make the clear button wipe the REPL context

* Revert "Make clear button wipe the REPL context"

I realised that source academy does not clear the context, and that
clearing only the output is in line with most command-line applications
and REPLs.
This reverts commit 4bd3c44.

* Remove duplicate EditorContainer

Was received from merging master into the branch

* Fix button row in playground overflowing to right

Would cause tiny bit of empty space on the right of the page, slightly outside
the viewport.

* Make run button clearReplOutput, remove default

* Output code typed in ReplInput as Output

* Use array method concat, reorder definitions

Readability changes.

* No verify commit, tests fails

* Fix failing tests

Okay, so slang's display needs access to the store in order to call dispatch, so
that the display can be output'd in realtime. In the previous commit, this was
achieved by importing the instantiated store from src/index.tsx into
src/slang/stdlib/misc.ts.

This works when the full server is running, but fails with the tests, because
mockContext calls createContext, which imports stdlib/misc, which tries to
import store. But because it's just a test, and store doesn't exist, the test
fails.

* Make run button interrupt execution

* Make eval interrupt execution, remove notifs

Next, change display so that if playground.output array is empty, initialise.

* Fix display not working after a clear

* Fix Eval button crashing site when Output[] empty

This is because the Output SFC tries to access an undefined output.consoleLogs.

output.consoleLogs is undefined after an Eval button click, because
EVAL_INTERPRETER_(SUCCESS|ERRORS) will try to access the last element of
playground.outputs, but the last element after playground.outputs is always a
CodeOutput for Eval button presses; and CodeOutput doesn't have a consoleLogs
property, so EVAL_INTERPRETER_(SUCCESS|ERRORS) copies over undefined as the new
ResultOutput or ErrorOutput's consoleLog property.

* Refactor display interactions with react/redux

* Make RTTC errors fatal, add checks for unary

RTTC errors (type errors found at runtime) will now interrupt execution of the
program and return an error immediately.

Checks for unary expression arguments have been implemented.

* Update type rules for binary operators

Function type checks not yet implemented

* Fix typings not working for functions

* Fix typings for logical expressions

* Fix number + number raising error

* Fix number (<|<=|>|>=) number raising error

* Add tests, fix some errors with + operator

* Restrict ternary and If conditions to booleans

* Add tests
ning-y pushed a commit to source-academy/frontend that referenced this pull request May 26, 2018
* Add button for playground at Navbar

No functionality.

* Make first NavbarGroup's align left explicit

* Change playground icon

* Add routes to Playground

* Update test snapshots

* Fix bad test for Playground component

Oops

* Add react-ace for IDE

* Try passing props into playground

* Load a preset "Hello World" onto the ace editor.

Changes:
- Changed `Playground` component to a statefull one (extends `React.Component)
- add property `playgroundCode` to IApplicationState (bad practice,
change to a slice of the state instead)
- add interface `IPlaygroundProps` to denote the properties passed to
Playground

* Remove unused onChange()

* Add stored state for playground editor text

Once again, this is a WIP. Text typed into the playground editor will
stay in the playground (or rather, appear again) after leaving and
coming back.

Changes:
- added of action, actionCreator (updatePlaygroundCode)
- added a reducer under application's `reducer` function

Possible problems:
- Location of reducer
- Location of playgroundCode stored (as in previous commit)

* Change initialValue prop to editorValue

* Made playground actions a separate file

* Modify actions and dispatch call

* Change redux import statement

* Add IPlaygroundState to IState in index reducer

* Add playground reducer

* Remove playgroundCode from IApplicationState

* Fix type errors

Made a compromise by including an IPlaygroundState as part of IApplicationProps

* Re-disable console.logs (tslint)

* Fix missing imports for react-ace mode, theme

* Add playground CSS

* Add JSDoc style comments for playground

* Fix some tests

* Fix semantics of mapStateToProps for ApplicationContainer

* Do trivial formatting

* Add interpreter toolchain as 'slang'

This is a copy over of the current state of `./frontend/src/toolchain` at
source-academy/source-academy2 67d9184. It includes only source chapter 1, a new
specification (see [PR 6 at the
source-academy/source-academy2](source-academy/source-academy2#6)
repository).

* Add react-saga and react types to yarn

The react types were added as a result of the `yarn add` command.

* Add saga to middleware list

* Segregate actionTypes from actions

* Fix reducer actionType import

* Remove actionType import from action/index

* Fix fatal bug with defineVariable calls

* Fix missing imports

Some imports of slang are already provided as additional dependencies to other
modules, e.g. acorn is already a dependency of webpack

* Add tests for slang

* Remove unused type definitions

* Lint typescript files of slang

* Add interruption actionType

* Add sagas WIP

For ny's reference

* Add more interpreter actions

* Change to older version of saga

* Add notification file

* Change es target to es2016

This was the target in sourceacademy-2 as well. Without this, there was
a problem with casting an `IterableIterator` to `yield*`, that expected
an array.

* Revert "Remove unused type definitions"

This reverts commit e18f2ae.
"Oops" - @ningyuansg

* Fix some slang errors

* Make 16/05 code review changes

Changes not made:
- Change of `Playground` component to an `SFC`

* Fix test snapshot (name of onChange for ReactAce)

Due to 7ac707c.

* Revert Playground as SFC, make Editor container

* Make Playground stateless

This is done by abstracting out the ace editor into its own component
, `Editor`, and its own container to handle redux calls,
`EditorContainer`.

* Add test and fix export type

Export of `Editor` changed to a default export, like the other
components. A test has been added for the `Editor` component. Snapshot
changes pending.

* Fix type errors according to tslint

* Change object methods to use es6 shorthand

* Fix more linting errors for interpreter.ts

* Disable `no-empty` rule.

Rationale: A no-op function is much easier to see as `() => {}` as
compared to `() => undefined` or even `() =>`. In addition, this syntax
is used by parts of the interpreter as well.

* Add `max-classes-per-file` exception for interpreter files

Splitting the exports would cause futher refactoring in other parts of
the interpreter codebase

* Fix linting errors in parser, rules/braces...

* Fix tslint errors in `parser`

Exception was added for multiple class exports.

* Format interpreter.ts

* Fix tslint errors in rules/*

* Fix tslint errors for rttc.ts

* Fix tslint errors for node.ts

* Fix tslint errors for types.ts

* Fix stdlib/list, stdlib/misc and scheudler tslint

An additional change is the use of a line disable in `parser.ts` instead
of an entire file disable.

* Fix `saga` not being run after store creation

* Fix Editor test (tslint errors)

1. Missing comma in object props
2. Syntax error and missing object comprehension in creating Editor

* Add properties context, output to IPlaygroundState

1. context is of type slang.Context. This holds the 'environment' for the slang
   interpreter
2. Output is a string array that will hold the stdout/stderr (display, error
   calls) of a program run in the editor. For repl programs, it will also hold
   the return value of the program. Each element of an array is a historical
   output.

* Add button to call on handleEvalEditor

This change allows the newly added button to call upon the
handleEvalEditor callback, whose reducer is not defined (yet)

* Add mapDispatchToProps for EditorContainer

Note that the intersection type is used with `Pick<T>` in order to
define `DispatchProps`, this might not be ideal. Input on this issue
would be appreciated.

* Fix 'ace is undefined' error

* Add Output SFC

* Add output tests, did yarn format

* Add 'run' button to EditorContainer

* Change Editor snapshot to include button

* Wire saga interpreter success to output SFC

* Fix wrong file extension '.tsx' -> '.ts'

'Oops' - ny

* Move state definitions into their own file

Fixes #7

* Add type for interpreter outputs

In addition, tslint rule `interface-over-type-literal` was disabled, due to the need
for many types (that would not be extended)

* Fix #11, using bindActionCreators

* Add flexboxgrid dependency

* Line Editor and Output up side to side

* Refactor and modularise playground as IDE

* Change Output to Repl

This is to allow for the incoming repl, which will produce outputs as
well.

* Implement multiple Outputs in Repl (history)

* Fix class playground not taking up all of parent

* Make use of slang's toString to format values

Previously, undefined would print as '' (empty string).

* Make flexbox tags relative to current component

* Make IPlaygroundState properties readonly

Fixes #14

* Add ReplInput (not wired to saga)

* Replace TextArea with AceEditor

Also change theme to dark background so we can debug better.

* Move IDE buton to a separate Control component

This is contained within the IDE component

* Add property replValue to IPlaygroundState

replValue, like editorValue, will store the contents of repl. It is used to
allow the contents of the repl to persist through route changes. It is also the
target for evaluation.

* Make repl read from state.playground.replValue

* Add evalRepl

* Update Control snapshot with eval button

* Add action UPDATE_REPL_VALUE

* Implement persistent repl content across routes

* Did yarn format

* Add action clear repl

Also removed unnecessarily verbose typings

* Make eval button clear the replValue

* Fix repl context resetting every eval

TODO: Editor run needs to update playground context

* Add keyboard shortcut for REPL

* Fix formatting for repl shortcut

* Errors are loosely represented as string 'error'

* Fix yarn format git hooks passing for unformatted

Previously, if the staged files are not formatted according to prettier, running
the pre-commit hook would change the file formatting, and then return an exit
code 0, allowing the commit to go through. However, the changes made by prettier
are not staged.

Now, the pre-commit hook will fail, so that only prettier-passed files can be
committed.

* Add ParseError in slang

* Improve error messages to specify type of error

* Improve CSS for repl output

* Fix many error messages not printing on new lines

Thank you stackoverflow

* Fix editor not changing playground.context

* Change ParseError to a function, parseError

* Simplify REPL Output Component creation

Turns out there's a 2-arity `map` that provides index

* Rename playground css to ide

* Change Playground to IDE in ide.css

No visible change in effect. Regardless, this will probably be
refactored once SCSS is introduced

* Change "ClEAR_REPL" to "CLEAR_REPL_INPUT"

This is to differenciate between the clearing of repl input and output

* Add button and actions to clear REPL output

- Button added
- Action and reducer added

* Make the clear button wipe the REPL context

* Revert "Make clear button wipe the REPL context"

I realised that source academy does not clear the context, and that
clearing only the output is in line with most command-line applications
and REPLs.
This reverts commit 4bd3c44.

* Remove duplicate EditorContainer

Was received from merging master into the branch

* Fix button row in playground overflowing to right

Would cause tiny bit of empty space on the right of the page, slightly outside
the viewport.

* Fix padding issues with ReplInput

* Remove the Playground title

* Increase font size of ace-editor (12 -> 14)

* Make IDE content responsive with viewport height

* Replace css with scss

Resolves #5.

* Make all the stuff partials

* Fix playground width being tied to viewport height

* Fix playground overflowing out of viewport

* Make .pt-card child of .Repl

* Make Repl scrollable

* Make run button clearReplOutput, remove default

* Add dark theme for Application

This includes a dark background, and adding the `pt-dark` class to
enable dark themes for all Blueprint components. Note that a relative
path to blueprint was used for the background color, to be changed in
the next commit.

* Output code typed in ReplInput as Output

* Use array method concat, reorder definitions

Readability changes.

* Change import for scss file in node_modules

This is becase ["The `~` notation is webpack-specific"](facebook/create-react-app#2859) and we should use `node_modules` to refer to the sass file instead.

* Rename IDE/Control to IDE/ReplControl

Skipped checks

* Change internals of ReplControl

from the names and functionality of `Control` to `ReplControl`.
Skipped checks

* Add ReplControlContainer to main Repl component

* Add run button to IDE/Editor

* Fix layout and tests

* No verify commit, tests fails

* Fix failing tests

Okay, so slang's display needs access to the store in order to call dispatch, so
that the display can be output'd in realtime. In the previous commit, this was
achieved by importing the instantiated store from src/index.tsx into
src/slang/stdlib/misc.ts.

This works when the full server is running, but fails with the tests, because
mockContext calls createContext, which imports stdlib/misc, which tries to
import store. But because it's just a test, and store doesn't exist, the test
fails.

* Make run button interrupt execution

* Make eval interrupt execution, remove notifs

Next, change display so that if playground.output array is empty, initialise.

* Fix display not working after a clear

* Make buttons minimal

* Fix Eval button crashing site when Output[] empty

This is because the Output SFC tries to access an undefined output.consoleLogs.

output.consoleLogs is undefined after an Eval button click, because
EVAL_INTERPRETER_(SUCCESS|ERRORS) will try to access the last element of
playground.outputs, but the last element after playground.outputs is always a
CodeOutput for Eval button presses; and CodeOutput doesn't have a consoleLogs
property, so EVAL_INTERPRETER_(SUCCESS|ERRORS) copies over undefined as the new
ResultOutput or ErrorOutput's consoleLog property.

* Refactor display interactions with react/redux

* Fix react-ace editor overflowing

* Fix Application not taking up full height

* Make REPL input same length as output cards

* Increment repl input min line

* Change react-ace theme

* Change background and navbar colors

* Make margin changes

* Make IDE and background colors more consistent

* Add color palette

* Nest all output in code tags

* Use new colors in cards

* Decrease minLines to 1

* Fix alignment for button groups

* Add editor border radius

* Remove faint border around code tags

* Make REPL scroll only Outputs, not buttons

* Fix firefox overflow issue with REPL

* Add different colours for each output type

* Make editor parent Resizable

* Fix repl input being hidden

This probably caused by not using `col-number-xs` for the repl-parent anymore,
due to the resizing.

* Align REPL input with editor bottom

* Re-add fix for Firefox

* Disable resize for directions other than right

* Add persistent state for resizable editor width

Note that handleEditorChange has been modified to
handleEditorValueChange, to be clearer when comapring to
handleEditorWidthChange.

* Fix white color when scrolling beyond page

* Put eval, clear buttons in control group

* Fix repl output not wrapping

* Make IDE component contain Resizable

Note that this make the IDE/index component stateful, handling the
editor width.

* Change editorWidth to percentage

This means that the change in width (in pixels) would need to be
converted to a percentage change (in the component) and the string must
be converted, added to the percentage change, then parsed again. A
possble optimization is keeping the number as a float (which would
involve one parse when passing it as a prop). However, I find it
semantically cleaner to keep the `editorWidth` as a string that expresses
a percentage, as compared to an `editorWidthPercentage` that holds a
number.

* Remove duplicate Editor

* Move run button to the left

* Add maxWidth for Resizable editor-parent

This is set to be the same as the default minWidth, 10px.

* Modify updateEditorWidth to changeEditorWidth

* Fix extra space between 2 pre elements

* Add in library select button

Missed it out in the previous merge commit, as I deleted the IDE/Control component #oops

* Add minor format change
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants