Skip to content

Commit 68da8d1

Browse files
tedpatricktedpatrick
authored
mpv1 (#28)
1 parent 3918cf3 commit 68da8d1

20 files changed

+8525
-8
lines changed

‎tech-preview/micropython/.DS_Store

10 KB
Binary file not shown.

‎tech-preview/micropython/about.html

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href="output.css" rel="stylesheet">
8+
</head>
9+
10+
<body class="bg-gray-400">
11+
<header class="bg-black text-white p-6 font-bold">
12+
MicroPython Technical Preview <div class="float-right"><a href="https://github.com/pyscript/upys" title="github" target="_blank" ><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" style="fill: #FFF;width:30px"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a></div>
13+
</header>
14+
<div class="flex flex-col p-2 pt-0 content-end">
15+
<ul style="list-style-type:none" class="p-2 flex flex-wrap text-sm font-medium text-center text-gray-800 dark:text-gray-200">
16+
<div class="grow"></div>
17+
<li class="mr-2">
18+
<a href="index.html" class="inline-block p-2 rounded-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">Examples</a>
19+
</li>
20+
<li class="mr-2">
21+
<a href="simple.html" class="inline-block p-2 rounded-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">Simple</a>
22+
</li>
23+
<li class="mr-2">
24+
<a href="repl.html" class="inline-block p-2 rounded-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">REPL</a>
25+
</li>
26+
<li class="mr-2">
27+
<a href="about.html" aria-current="page" class="rounded-lg inline-block p-2 text-blue-600 bg-gray-100 active dark:bg-gray-800 dark:text-blue-500">About</a>
28+
</li>
29+
<div class="grow"></div>
30+
</ul>
31+
<div class="overflow-y-visible p-2 bg-white dark:bg-slate-800 rounded-lg ring-1 ring-slate-900/5 shadow-xl">
32+
<h1>PyScript Runtimes - MicroPython Technical Preview</h1>
33+
<p><a href="https://pyscript.net">PyScript</a> is an open-source platform,
34+
using
35+
<a href="https://webassembly.org/">web assembly</a> (WASM), for Python in
36+
the browser.</p>
37+
38+
<p>Given this HTML fragment:</p>
39+
40+
<pre>&lt;py-script&gt;
41+
def hello(name="world"):
42+
"""
43+
Return a friendly greeting.
44+
"""
45+
return f"Hello, {name} (from PyScript)"
46+
47+
print(hello())
48+
&lt;/py-script&gt;
49+
&lt;script src="pyscript.js" type="module"&gt;&lt;/script&gt;</pre>
50+
51+
<p>You get:</p>
52+
53+
<py-script>
54+
def hello(name="world"):
55+
"""
56+
Return a friendly greeting.
57+
"""
58+
return f"Hello, {name} (from PyScript)"
59+
60+
print(hello())
61+
</py-script>
62+
63+
<p>Why not "view-source" and see for yourself?</p>
64+
65+
<h3>What?</h3>
66+
<p>The initial version of PyScript, demoed
67+
<a href="https://www.youtube.com/watch?v=qKfkCY7cmBQ">in a keynote address
68+
by Peter Wang</a> at PyCon 2022, built on the amazing
69+
work of the <a href="https://pyodide.org/en/stable/">Pyodide</a>
70+
project. But Pyodide isn't the only Python runtime, compiled to WASM, that
71+
could be used for this purpose.</p>
72+
73+
<p>These pages are a technical demonstration, proof of concept and
74+
playful exploration of how PyScript may work with other scripting language
75+
runtimes. This initial work focused on the amazing work of the
76+
<a href="https://micropython.org">MicroPython</a> project (a full
77+
re-implementation of Python 3 targeting constrained computing
78+
environments).</p>
79+
80+
<p>Here's what
81+
<a href="http://dpgeorge.net/">Damien George</a>
82+
(creator of MicroPython) says about such efforts:</p>
83+
84+
<blockquote>
85+
<p>MicroPython was written from day one to be easy to embed, and tries to support a wide variety of targets. For example, in a minimal configuration, the only connection to the external world that it needs is a place to output characters.</p>
86+
<p>Although I never had the idea that MicroPython would be embedded in the browser, it actually fits quite naturally because MicroPython is very self contained. MicroPython's small size and efficient use of resources (RAM and CPU) means that it's well suited to being embedded in a webpage, because the download size and start-up time is minimised. It's pretty exciting to think that MicroPython could gain traction as a way to build websites.</p>
87+
</blockquote>
88+
89+
<h3>Why?</h3>
90+
91+
<p>Different runtimes exhibit different strengths and weaknesses. As
92+
always, there are tradeoffs.</p>
93+
94+
<p>Whereas Pyodide is a relatively mature version of standard CPython,
95+
including powerful native modules such as
96+
<a href="https://numpy.org/">numpy</a> and
97+
<a href="https://scipy.org/">scipy</a>, it's also rather large (circa 11Mb)
98+
and slow to start up.</p>
99+
100+
<p>Alternatively, MicroPython is a highly regarded, mature and
101+
battle tested reimplementation of Python 3 but with "micro"
102+
reimplementations of popular libraries. It is small (base 303Kb) and
103+
startup time is only a few thousandths of a second (from a warm cache),
104+
even on mobile devices.</p>
105+
106+
<p>Given such tradeoffs, we want folks to be able to choose the runtime
107+
to use with PyScript that best suits their unique requirements.</p>
108+
109+
<h3>How?</h3>
110+
111+
<p>The code on these pages is experimental.</p>
112+
113+
<p>A small, fast and simple implementation of PyScript, created for
114+
testing purposes, allows us to quickly explore the
115+
characteristics of different potential runtimes.</p>
116+
<p>This version of PyScript, simply does four things:</p>
117+
<ol>
118+
<li>Read custom configuration (more on this later), otherwise fall back
119+
to sensible defaults.</li>
120+
<li>Download and start the language runtime. Currently, this is
121+
configured to be MicroPython.</li>
122+
<li>Register and manage plugins that contain the PyScript platform's
123+
logic. Currently, there are two: one for the
124+
<code>&lt;py-script&gt;</code> tag,
125+
and one for the <code>&lt;py-repl&gt;</code> tag.</li>
126+
<li>Load user defined files onto the runtime's virtual file system (data,
127+
code, modules etc).</li>
128+
</ol>
129+
<p>Drop into the browser console to see what PyScript is doing, under the
130+
hood.</p>
131+
</div>
132+
</div>
133+
</body>
134+
135+
</html>
136+
137+
<script src="pyscript.js" type="module"></script>

‎tech-preview/micropython/customtags.js

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
"use strict";
2+
/******************************************************************************
3+
An example of how to do a custom "third party" plugin for PyScript.
4+
5+
Authors:
6+
- Nicholas H.Tollervey ([email protected])
7+
8+
Copyright (c) 2022 Anaconda Inc.
9+
10+
Licensed under the Apache License, Version 2.0 (the "License");
11+
you may not use this file except in compliance with the License.
12+
You may obtain a copy of the License at
13+
14+
http://www.apache.org/licenses/LICENSE-2.0
15+
16+
Unless required by applicable law or agreed to in writing, software
17+
distributed under the License is distributed on an "AS IS" BASIS,
18+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
19+
See the License for the specific language governing permissions and
20+
limitations under the License.
21+
******************************************************************************/
22+
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+
25+
const pyReplTag = function(e) {
26+
/*
27+
Adds a REPL to the DOM. The REPL session is only initialised when the
28+
runtime is ready. The content of the REPL is handled by xterm.js, injected
29+
by this plugin.
30+
*/
31+
32+
// Eventually binds to the runtime, once started.
33+
let availableRuntime = null;
34+
35+
// To hold the textual content of the REPL in the DOM.
36+
const terminal = document.createElement("div");
37+
38+
// To become the instance of xterm.js
39+
let term = null;
40+
41+
function onPrint(e) {
42+
/*
43+
Handle print to stdout events.
44+
*/
45+
if (term) {
46+
term.write(e.detail);
47+
}
48+
}
49+
50+
function onLoaded(e) {
51+
term = new Terminal();
52+
term.onData(data => availableRuntime.stdin(data));
53+
term.open(terminal);
54+
}
55+
56+
const plugin = {
57+
name: "py-repl",
58+
configure: function(config) {
59+
// Just set a flag to indicate that a REPL is active.
60+
config.repl = true
61+
// Load xterm.js
62+
const xtermElement = document.createElement("script");
63+
xtermElement.src = "xterm.js";
64+
xtermElement.onload = function(e) {
65+
const pyXtermLoaded = new CustomEvent("py-xterm-loaded");
66+
document.dispatchEvent(pyXtermLoaded);
67+
};
68+
var head = document.getElementsByTagName('head')[0];
69+
head.appendChild(xtermElement);
70+
document.addEventListener("py-xterm-loaded", onLoaded);
71+
},
72+
start: function(config) {
73+
// Define the py-repl element.
74+
class PolyREPL extends HTMLElement {
75+
connectedCallback() {
76+
/*
77+
Create a shadow DOM with the expected child elements and
78+
event handlers defined in it.
79+
*/
80+
const shadow = this.attachShadow({ mode: "open" });
81+
const xtermCssElement = document.createElement("style");
82+
xtermCssElement.textContent = XTERMCSS;
83+
shadow.appendChild(xtermCssElement);
84+
shadow.appendChild(terminal);
85+
document.addEventListener("py-print", onPrint);
86+
}
87+
}
88+
customElements.define("py-repl", PolyREPL);
89+
},
90+
onRuntimeReady: function(config, runtime) {
91+
// Store a reference to the runtime, and start the REPL session.
92+
availableRuntime = runtime;
93+
availableRuntime.startREPL();
94+
}
95+
};
96+
97+
window.pyScript.registerPlugin(plugin);
98+
};
99+
document.addEventListener("py-configured", pyReplTag);

0 commit comments

Comments
 (0)