Merge branch 'master' into prototypical_getsets_mappingproxy

Author: s-cork

HACKING.md

@@ -893,12 +893,14 @@ and the non-module version. First off, the call to Sk.configure
 contains another key value pair which sets up a specialized read
 function. This is the function that is responsible for returning your
 module out of the large array of files that are contained in the
-skulpt-stdlib.js file. You will see that all of the modules are
+`skulpt-stdlib.js` file. You will see that all of the modules are
 contained in this one file, stored in a big JSON structure. The extra
-key value pair is: read: builtinRead
+key value pair is: `read: builtinRead`
 
 The read function is just for loading modules and is called when you do
-an import statement of some kind. In this case the function accesses the
+an import statement of some kind. This is an optional argument to `Sk.configure`, 
+the default implementation is as above. You can of course override this function 
+to implement bespoke module loading. In the default case the function accesses the
 variable builtinFiles which is created from the skulpt-stdlib.js file.
 The other difference, of course, is that you have to include
 skulpt-stdlib.js in your html file. Note that skulpt-stdlib.js must be

README.md

@@ -54,7 +54,7 @@ Building Skulpt is straightforward:
 2. Install node.js
 3. Install the required dependencies using `npm install`
 4. Navigate to the repository and run `npm run dist`
-5. The tests should run and you will find `skulpt.min.js` and `skulpt-stdlib.js` in the `dist`folder
+5. The tests should run and you will find `skulpt.min.js` and `skulpt-stdlib.js` in the `dist` folder
 
 
 ### Contributing

example/ipython.css

@@ -0,0 +1,74 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    min-height: 400px;
+    max-height: 80vh;
+    margin: auto;
+    width: 80vw;
+}
+#clickGuard {
+    flex-grow: 1;
+}
+
+#editor {
+    min-height: 30px;
+    padding: 7px;
+    overflow: scroll;
+}
+#editor > div {
+    min-height: 15px;
+    max-height: 200vh;
+    width: 100%;
+}
+#editor > div > .ace_gutter-cell:first-child {
+    margin-left: 0px;
+}
+
+.ace_gutter-cell {
+    visibility: hidden;
+    padding-left: 0;
+    padding-right: 13px;
+}
+
+.in-gutter::before {
+    content: "In [";
+}
+.out-gutter::after,
+.in-gutter::after {
+    content: "]:";
+    position: absolute;
+    right: 0;
+}
+.out-gutter::before {
+    content: "Out[";
+}
+.out-gutter::before,
+.in-gutter::before {
+    position: absolute;
+    left: 5px;
+    padding: 0;
+}
+
+.out-gutter,
+.in-gutter {
+    padding-left: 30px;
+    visibility: visible;
+    display: block;
+}
+
+.in-gutter {
+    color: mediumseagreen;
+}
+.out-gutter {
+    color: crimson;
+}
+.ace_gutter {
+    font-size: 11px;
+}
+.ace_gutter-cell:not(:first-child):after {
+    content: "...:";
+    visibility: visible;
+    position: absolute;
+    right: 0;
+    color: mediumseagreen;
+}

example/ipython.html

@@ -0,0 +1,22 @@
+<script src="../dist/skulpt.min.js" type="text/javascript"></script>
+<script src="../dist/skulpt-stdlib.js" type="text/javascript"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.11/ace.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.11/mode-python.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.11/theme-gruvbox.min.js"></script>
+<script src="ipython.js"></script>
+<link rel="stylesheet" type="text/css" href="ipython.css"/>
+
+<script>
+    // must run "npm run build" before using this example
+    var ide;
+    window.addEventListener("load", function (event) {
+        var editor = document.getElementById("editor");
+        ide = new ipythonExample(editor);
+    })
+</script>
+
+<div class="container ace-gruvbox ace_editor">
+    <div id="editor" class="ace-gruvbox ace_editor" style="font-size: 10px;"> </div>
+    <div id="clickGuard"></div>
+</div>
+