Skip to content
This repository was archived by the owner on Sep 21, 2023. It is now read-only.

Commit 267adb1

Browse files
ntollntoll
committed
Work in progress. Likely broken. Adds a py-repl plugin tag.
1 parent 11736d0 commit 267adb1

File tree

7 files changed

+349
-23
lines changed

7 files changed

+349
-23
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,6 @@ mpbuild
22
pybuild
33
micropython
44
cpython
5+
pyodide
56
emsdk
7+
pyscript.min.js

‎Makefile

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,6 @@ serve:
2828

2929
test:
3030
python -m webbrowser "http://0.0.0.0:8000/SpecRunner.html"
31+
32+
minify:
33+
uglifyjs pyscript.js --compress --mangle -o pyscript.min.js

‎customtags.js

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ See the License for the specific language governing permissions and
2020
limitations under the License.
2121
******************************************************************************/
2222

23+
const XTERMCSS = ".xterm{cursor:text;position:relative;user-select:none;-ms-user-select:none;-webkit-user-select:none}.xterm.focus,.xterm:focus{outline:none}.xterm .xterm-helpers{position:absolute;top:0;z-index:5}.xterm .xterm-helper-textarea{padding:0;border:0;margin:0;position:absolute;opacity:0;left:-9999em;top:0;width:0;height:0;z-index:-5;white-space:nowrap;overflow:hidden;resize:none}.xterm .composition-view{background:#000;color:#FFF;display:none;position:absolute;white-space:nowrap;z-index:1}.xterm .composition-view.active{display:block}.xterm .xterm-viewport{background-color:#000;overflow-y:scroll;cursor:default;position:absolute;right:0;left:0;top:0;bottom:0}.xterm .xterm-screen{position:relative}.xterm .xterm-screen canvas{position:absolute;left:0;top:0}.xterm .xterm-scroll-area{visibility:hidden}.xterm-char-measure-element{display:inline-block;visibility:hidden;position:absolute;top:0;left:-9999em;line-height:normal}.xterm.enable-mouse-events{cursor:default}.xterm .xterm-cursor-pointer,.xterm.xterm-cursor-pointer{cursor:pointer}.xterm.column-select.focus{cursor:crosshair}.xterm .xterm-accessibility,.xterm .xterm-message{position:absolute;left:0;top:0;bottom:0;right:0;z-index:10;color:transparent}.xterm .live-region{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.xterm-dim{opacity:0.5}.xterm-underline-1{text-decoration:underline}.xterm-underline-2{text-decoration:double underline}.xterm-underline-3{text-decoration:wavy underline}.xterm-underline-4{text-decoration:dotted underline}.xterm-underline-5{text-decoration:dashed underline}.xterm-strikethrough{text-decoration:line-through}.xterm-screen .xterm-decoration-container .xterm-decoration{z-index:6;position:absolute}.xterm-decoration-overview-ruler{z-index:7;position:absolute;top:0;right:0;pointer-events:none}.xterm-decoration-top{z-index:2;position:relative}";
24+
2325
const pyReplTag = function(e) {
2426
/*
2527
Adds a REPL to the DOM. The REPL session is only initialised when the
@@ -34,11 +36,45 @@ const pyReplTag = function(e) {
3436
should use the pyscriptREPL class to attach styling.
3537
*/
3638

39+
// Eventually binds to the runtime, once started.
40+
let availableRuntime = null;
41+
42+
// To hold the textual content of the REPL in the DOM.
43+
const terminal = document.createElement("div");
44+
45+
// To become the instance of xterm.js
46+
let term = null;
47+
48+
function onPrint(e) {
49+
/*
50+
Handle print to stdout events.
51+
*/
52+
if (term) {
53+
term.write(e.detail);
54+
}
55+
}
56+
57+
function onLoaded(e) {
58+
term = new Terminal();
59+
term.onData(data => availableRuntime.stdin(data));
60+
term.open(terminal);
61+
}
62+
3763
const plugin = {
3864
name: "py-repl",
3965
configure: function(config) {
4066
// Just set a flag to indicate that a REPL is active.
4167
config.repl = true
68+
// Load xterm.js
69+
const xtermElement = document.createElement("script");
70+
xtermElement.src = "lib/xterm.js";
71+
xtermElement.onload = function(e) {
72+
const pyXtermLoaded = new CustomEvent("py-xterm-loaded");
73+
document.dispatchEvent(pyXtermLoaded);
74+
};
75+
var head = document.getElementsByTagName('head')[0];
76+
head.appendChild(xtermElement);
77+
document.addEventListener("py-xterm-loaded", onLoaded);
4278
},
4379
start: function(config) {
4480
// Define the py-repl element.
@@ -49,17 +85,19 @@ const pyReplTag = function(e) {
4985
event handlers defined in it.
5086
*/
5187
const shadow = this.attachShadow({ mode: "open" });
52-
const pre = document.createElement("pre");
53-
pre.setAttribute("class", "pyscriptREPL");
54-
const code = document.createElement("code");
55-
pre.appendChild(code);
56-
shadow.appendChild(pre);
88+
const xtermCssElement = document.createElement("style");
89+
xtermCssElement.textContent = XTERMCSS;
90+
shadow.appendChild(xtermCssElement);
91+
shadow.appendChild(terminal);
92+
document.addEventListener("py-print", onPrint);
5793
}
5894
}
5995
customElements.define("py-repl", PyREPL);
6096
},
6197
onRuntimeReady: function(config, runtime) {
62-
//
98+
// Store a reference to the runtime, and start the REPL session.
99+
availableRuntime = runtime;
100+
availableRuntime.startREPL();
63101
}
64102
};
65103

‎index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
"runtime": "micropython"
77
}
88
</py-config>
9-
<py-script src="hello.py"></py-script>
10-
<pre><code id="mp_js_stdout"></code></pre>
9+
<py-repl></py-repl>
1110
</body>
11+
<script src="customtags.js"></script>
1212
<script src="pyscript.js" type="module"></script>
1313
</html>

‎lib/xterm.css

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
/**
2+
* Copyright (c) 2014 The xterm.js authors. All rights reserved.
3+
* Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
4+
* https://github.com/chjj/term.js
5+
* @license MIT
6+
*
7+
* Permission is hereby granted, free of charge, to any person obtaining a copy
8+
* of this software and associated documentation files (the "Software"), to deal
9+
* in the Software without restriction, including without limitation the rights
10+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
* copies of the Software, and to permit persons to whom the Software is
12+
* furnished to do so, subject to the following conditions:
13+
*
14+
* The above copyright notice and this permission notice shall be included in
15+
* all copies or substantial portions of the Software.
16+
*
17+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
23+
* THE SOFTWARE.
24+
*
25+
* Originally forked from (with the author's permission):
26+
* Fabrice Bellard's javascript vt100 for jslinux:
27+
* http://bellard.org/jslinux/
28+
* Copyright (c) 2011 Fabrice Bellard
29+
* The original design remains. The terminal itself
30+
* has been extended to include xterm CSI codes, among
31+
* other features.
32+
*/
33+
34+
/**
35+
* Default styles for xterm.js
36+
*/
37+
38+
.xterm {
39+
cursor: text;
40+
position: relative;
41+
user-select: none;
42+
-ms-user-select: none;
43+
-webkit-user-select: none;
44+
}
45+
46+
.xterm.focus,
47+
.xterm:focus {
48+
outline: none;
49+
}
50+
51+
.xterm .xterm-helpers {
52+
position: absolute;
53+
top: 0;
54+
/**
55+
* The z-index of the helpers must be higher than the canvases in order for
56+
* IMEs to appear on top.
57+
*/
58+
z-index: 5;
59+
}
60+
61+
.xterm .xterm-helper-textarea {
62+
padding: 0;
63+
border: 0;
64+
margin: 0;
65+
/* Move textarea out of the screen to the far left, so that the cursor is not visible */
66+
position: absolute;
67+
opacity: 0;
68+
left: -9999em;
69+
top: 0;
70+
width: 0;
71+
height: 0;
72+
z-index: -5;
73+
/** Prevent wrapping so the IME appears against the textarea at the correct position */
74+
white-space: nowrap;
75+
overflow: hidden;
76+
resize: none;
77+
}
78+
79+
.xterm .composition-view {
80+
/* TODO: Composition position got messed up somewhere */
81+
background: #000;
82+
color: #FFF;
83+
display: none;
84+
position: absolute;
85+
white-space: nowrap;
86+
z-index: 1;
87+
}
88+
89+
.xterm .composition-view.active {
90+
display: block;
91+
}
92+
93+
.xterm .xterm-viewport {
94+
/* On OS X this is required in order for the scroll bar to appear fully opaque */
95+
background-color: #000;
96+
overflow-y: scroll;
97+
cursor: default;
98+
position: absolute;
99+
right: 0;
100+
left: 0;
101+
top: 0;
102+
bottom: 0;
103+
}
104+
105+
.xterm .xterm-screen {
106+
position: relative;
107+
}
108+
109+
.xterm .xterm-screen canvas {
110+
position: absolute;
111+
left: 0;
112+
top: 0;
113+
}
114+
115+
.xterm .xterm-scroll-area {
116+
visibility: hidden;
117+
}
118+
119+
.xterm-char-measure-element {
120+
display: inline-block;
121+
visibility: hidden;
122+
position: absolute;
123+
top: 0;
124+
left: -9999em;
125+
line-height: normal;
126+
}
127+
128+
.xterm.enable-mouse-events {
129+
/* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
130+
cursor: default;
131+
}
132+
133+
.xterm.xterm-cursor-pointer,
134+
.xterm .xterm-cursor-pointer {
135+
cursor: pointer;
136+
}
137+
138+
.xterm.column-select.focus {
139+
/* Column selection mode */
140+
cursor: crosshair;
141+
}
142+
143+
.xterm .xterm-accessibility,
144+
.xterm .xterm-message {
145+
position: absolute;
146+
left: 0;
147+
top: 0;
148+
bottom: 0;
149+
right: 0;
150+
z-index: 10;
151+
color: transparent;
152+
}
153+
154+
.xterm .live-region {
155+
position: absolute;
156+
left: -9999px;
157+
width: 1px;
158+
height: 1px;
159+
overflow: hidden;
160+
}
161+
162+
.xterm-dim {
163+
opacity: 0.5;
164+
}
165+
166+
.xterm-underline-1 { text-decoration: underline; }
167+
.xterm-underline-2 { text-decoration: double underline; }
168+
.xterm-underline-3 { text-decoration: wavy underline; }
169+
.xterm-underline-4 { text-decoration: dotted underline; }
170+
.xterm-underline-5 { text-decoration: dashed underline; }
171+
172+
.xterm-strikethrough {
173+
text-decoration: line-through;
174+
}
175+
176+
.xterm-screen .xterm-decoration-container .xterm-decoration {
177+
z-index: 6;
178+
position: absolute;
179+
}
180+
181+
.xterm-decoration-overview-ruler {
182+
z-index: 7;
183+
position: absolute;
184+
top: 0;
185+
right: 0;
186+
pointer-events: none;
187+
}
188+
189+
.xterm-decoration-top {
190+
z-index: 2;
191+
position: relative;
192+
}

‎lib/xterm.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)