## Test Cases
1. class with two fields @sitan, UI @yiming

    input:
        class C:
            a : int = 1
            b : int = 2
        c : C = None
        c = C()
    // in REPL:
    >>> c
    

    output:
        {
            address: 100
            a: 1
            b: 2
        }

2. class with nested class instance

   input:
       class E(object):
            a : int = 1
       class C(object):
            a : bool = True
            e : E = None
            def __init__(self: C):
               self.e = E()
            def d(self: C) -> int:
              return 1
        c : C = None
        c = C()
    // in REPL:
    >>> c
        
    output:
        {
            address: 100
            a: True
            e: {
                address: 108
                a: 1
            }
        }

3. class with inheritance:
we need to wait for the inheritance group to finish their feature.

input: 
    class E(object):
        a : int = 1
        f : int = 2
    class C(E):
        a : int = 2
        e : E = None
        def __init__(self: C):
           self.e = E()
        def d(self: C) -> int:
          return 1
    c : C = None
    c = C()
    // in REPL:
    >>> c

output: 
      {
            address: 100
            a: 2,
            f: 2,
            e: {
                address: 112
                a: 1
            }
        }

4. nested instance with uninitilized instace

    input:
    class E(object):
        a : int = 1

    class C(E):
        a : int = 2
        e : E = None
        def d(self: C) -> int:
            return 1
    c : C = None
    c = C()
    // in REPL:
    >>> c

    output:
        {
            address: 0x1234
            a: 1
            e: none
        }

5. Add one HTML component <select></select>: @yiming
It would be much more convenient for users to begin with some sample code. We could provide a HTML component listing the example codes. For example, the options of the select could be "example code with class", "example code with closure". Once we click one option, the code would be loaded to the left box on the screen.

6. Switch the select component: @yiming
When we change the option of the select, the example code would be overwritten. When we clicked the "example code with closure" option, the code in the left box would be overwritten.

7. "Clear" button: @shicheng
Add one clear button near the run button, when we click the "clear", the python code would be disappeared and also the memory and environment would be refreshed.

8. Syntax highlight: @chaowang
Refactor the edit box to import the style of CodeMirror to highlight the python syntax in the left box. We need to make sure the style of highlight is exactly the same with what CodeMirror npm provided.

9. Add two buttons for saving and uploading code @shicheng
By clicking the saving button, we could download the chocopy code to local PC. By clicking uploading button, we could select the file from local PC and load them into the edit box in the left side.

10. Autocompletion for REPL: @chaowang
We could autocomplete the builtin function when we interact with REPL environment.

## design
1. changes on AST, IR, and built-in libraries:
we do not need to change the AST, IR, and built-in libraries.

2. A description of any new functions, datatypes, and/or files added to the codebase:

In order to make the compiler pass the test 8, 9 and 10, we need to make use of CodeMirror to implement details. There must be some changes to some files like <b>webstart.ts</b>. For example, we can build a function that may be named as highLightLine to deal with the need of <b>Syntax Highlight</b>. As for <b>autocompletion </b> functionality, we can create a extra special typescript file to deal with corresponding logics of getting and showing exsited builtin functions we want. Most of changes about these cases are HTML related, and they can be implemented in a relative efficient way in <b>webstart.ts</b> with the usage of various HTML attributes. For instance, the objects with the specified value of ID attribute "load", "save " and others can be directly returned and then be used to achieve the required features.

For the implementation of visulize classes: in order to print the <b>class object</b> from repl commandline, we need to add an another print function, taking the result value of the executed "repl commandline", the result type returned by the type checking program as the paramters, and BasicRepl Class as parameters. We then use the class info and the memory object of BasicRepl Class to traverse the result value(object address) recursively and combine them into html object.

3. A description of the value representation and memory layout for any new runtime values you will add:
no value representation or memory layout would be add.

# Week 7 Homework

## What we should run/test to see what you produced that’s most interesting.
1. select different example code and check the printed object in repl.
2. click Clear, Choose file and save button to see some interactions.
3. try the editor for auto compeletion and syntax highlight.(this is a interesting feature

Note: the testing framework mocha, which is provided from the starter code, do not provide a web browser envionment. Therefore, we could not run our test cases unless we use mocha-phantomjs as our framework, but it would change the structure of the project.

## Progress and design idea
### yiming:
We have successfully implemented the functionality of adding code example. Currently we hardcode the code examples in the `webstart.ts`, which can be improved by separating them to another file to make the code more elegant. What code examples are most useful and should be put on the webpage is also a good topic to investigate, and may need the opinions and suggestions from other classmates.

### Shicheng:
The functionality of "clear", "save", "load" buttons are all successfully implemented. It is noteworthy that we use <b>_prompt_</b> which returns <b>null</b> if the "<b>cancel</b>" button is clicked in this process. This special feature was used to solve the bug that as the "cancel" was clicked the document would be still downloaded. In implementing "<b>save</b>" button, The process requires the user to input the file name if he or she wants to download codes, and if the input blank is not filled with anything, the document will be given a default name that is "<b>download</b>". The "<b>clear</b>" button can reset the content in leftside <b>codeTextArea</b>, rightside repl codes, and the running environment, and clicking "<b>load</b>" button can load chosen files' contents as codes in leftside <b>codeTextArea</b>.

We also update the color and the location of buttons to make the whole page looks more comfortable to users.

### Chaowang:
We successfully implemented the syntax highlight and autocompletion feature. The main change of the feature is in webstart, we init the codeMirror instance after DOMContentLoaded, and we add different eventListeners for codemirror to deal with save, load, and auto completion. I add an independent autocomplete.ts file to achieve the autocomplete feature and another const.ts is used to store the name of built-in functions needed.

One problem we met is to active the option of syntax highlight, we need to set the config of "mode" and "theme" at the same time, instead of only setting "mode" config. We also need to import corresponing js and css file to enable the highlight for python.

### Sitan Liu:
We followed the original design idea and successfully implemented the object print . With the notice from professor, we added the support for the cyclic likedlist object, by using a set to store the traversed object. Additionally, we add a numeric label to each object, in order not to reprint the traversed object. In this journey, we learned
* repl internal environment structure
* the way to manipulate the wasm memory through typescript code
* the trick to deal with printing cyclic linkedlist.

# <front-end>-conflicts.md

# Read the other features’ pull requests for your compiler, and for each of them, analyze:

### Chaowang:
* Bignums

def f(c:int) -> int:
    c = 100000000000000000000000
    return c
print(f(0))

The main feature of bignum is to create, calculate and store a big num. We have overlap at webstart.ts, in function print and webstart. We need to maintain the original structure of print and webstart and also import their new changes.

* Built-in libraries

        assertTC("float-init", `x : float = 3.2` , NONE);

we have overlap in printing and stringify function at webstart.ts file since built-in libraries need to stringify new type "float". We need to maintain the original structure of print and webstart and also import their new changes.

* Closures/first class
We do not have a overlap. The main feature of our features is implemented in webstart.ts. The feature of Closures did not change the view and interaction of the logic in webstart.ts.

* Comprehensions

    j: int = 2
    print([j for a in range(1,5) for a!=1])

The feature of comprehension does not relate to changing the feature of print function. The group could realize and modify their own print and stringfy function to parse comprehensions. The only possible overlap is in print function but the group did not realize the feature. So there is no overlap for now.

### Sitan Liu:
* Destructuring Assignment:

This feature will not interfere with our current implementation. The new destructuring assignment statement, which is the subset of python, will be recognized by the code mirror. And because it does not define new data type, it will not interfere with our object print function. Our autocompelete function will not interfere with it, because it is based on each word, instead of the assignments.

* Error Reporting:

They modified the webstart.ts, but their modification is easy to merge. This feature overall will not affect our design, but we need to add additional code to support a new feature so that the type error can be displayed on the script pad. Specifically, Type errors, such as accessing field value to a none object, assigning a int variable with a bool value should be labeled. like this
$\underline{int:x = True}$

* Fancy Calling Conventions:
They did not modify webstart.ts, so this feature will not conflict with our code or design, for syntax highlighting, it is just subset python, which would be recognized by codeMirror.

* ForLoop/Iterator:
They did not modify webstart.ts, so this feature will not conflict with our code or design, for syntax highlighting, it is just subset python, which would be recognized by codeMirror. To display the iterator, we need to support from ForLoop team. Depends on their need, the changes are needed in function renderresult() or stringify() of webstart.ts: If stringify() can support iterator then we can call print on iterator, if stringify

### Yiming Mao
* Generics and polymorphism:

This feature will not affect our design, for syntax highlighting, it is just subset python, which would be recognized by codeMirror.

* I/O, files:

This feature will not affect our design since it is only related to background data reading and writing. No UI interaction will happen during this process.

* Inheritance:

    input: 
    class E(object):
        a : int = 1
        f : int = 2
    class C(E):
        a : int = 2
        e : E = None
        def __init__(self: C):
           self.e = E()
        def d(self: C) -> int:
          return 1
    c : C = None
    c = C()
    // in REPL:
    >>> c
    
    Correct output: 
        {
            address: 4
            a: 2,
            f: 2,
            e: {
                address: 16
                a: 1
                f: 2
            }
        }
    
    Current output:
        {
            address: 4
            a: 2 
            e: {
                address: 12
                a: 1 
                f: 2 
            }
        }

To print the object correctly, we need a correct class REPL environment for subclasses, which contains the fields of their super classes. The REPL environment is returned by `run()`.

* Lists:

    a:[int] = None
    a = [1,2,3]
    print(a)

To show the content of lists on the web page, we need the support from the list team to print lists. The changes are needed in function `stringify()` of `webstart.ts`: If `stringify()` can support type list then we can print the list on REPL.

### Shicheng Bei:
* Memory Management:

    import * as memMgmt from './memory';

we have overlap in stringify function at webstart.ts file because libmemory in stringfy need to load needed functions from one new file named memory.ts. The original structure should be kept and what we should do is just to import the changes

* Optimization:
This feature will not affect our design, we can accept corresponding changes directly.

* Sets:
Sets is a new data structure, so many changes should be applied from ast.ts to compiler.ts. The main overlap is a newly added function named ele_not_found in webstart.ts, which is to check element in iterable structure. Directly importing corresponding changes is OK for us.

* Strings:

For this is a new data structure, many files like parser.ts and type-check.ts need to be updated. We also have overlap in print function, stringfy function and assert_not_none function of webstart.ts file. For some new logics were added to print function, which may have conflicts with our own logics, we will try to link with Strings team to comprehend their thoughts.

    case "str":
      return String.fromCharCode(arg as number);

Besides, the code has professor's comments that we think should be solved properly, or the error must appear.

Week8 Design
<design.md>
1. Error Reporting with line highlighted:
When receiving a error while running the program, we could get a line number of error from error report feature. We could highlight the specific line in left editor.
2. Foldable object print:
We could make it more pretty to show the object visualization like using a foldable HTML box.
3. put code examples from hardcode into a file:
we could extract the hardcode code examples into a independent file, making it more convenient to expand.
4. layout, style and interaction changing of the webpage:
We could continue to update the overall UI of the webpage, making it more pretty to look and operate.
5. Show line numbers:
Show lines numbers for codeMirror editor.

TODO：
1. inheritance unknown specification followed by inheritance implmentation
2. list print([1,2,3]) => [1,2,3]，需要在webstart里实现stringify，A组还没实现

    print函数可以打印对象吗？
    print([objC1, objC2, objC3])
    问老师print函数的归属是各自实现吗