jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2026-04-18 17:00:22 -04:00
Code Issues Projects Releases Wiki Activity

Moves Python code out of interpreter file (#207)

Browse Source 
* make copy of .py files part of build process

* move code out ofinterpreter file and make it download and load code during initialization

* fix double ; in interpreter

* remove debugging print

* update dependencies

* fix project name and version

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* lint

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* change fmt-py

* lint

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* remove extra content

* define missing strict type

* create build folder if doesn't exist

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
This commit is contained in:
Fabio Pliger
2022-05-05 23:12:54 -05:00
committed by GitHub
parent 88a0dd38de
commit b7d748c96a
14 changed files with 405 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
pyscriptjs/src/components/base.ts
View File

@@ -6,7 +6,6 @@ let environments;
let currentMode;
let Element;
pyodideLoaded.subscribe(value => {
runtime = value;
});
@@ -14,7 +13,6 @@ loadedEnvironments.subscribe(value => {
environments = value;
});
mode.subscribe(value => {
currentMode = value;
});
@@ -145,9 +143,9 @@ export class BaseEvalElement extends HTMLElement {
Element = pyodide.globals.get('Element');
}
const out = Element(this.errorElement.id);
addClasses(this.errorElement, ['bg-red-200', 'p-2']);
out.write.callKwargs(err, { append : true});
out.write.callKwargs(err, { append: true });
this.errorElement.hidden = false;
this.errorElement.style.display = 'block';
}
@@ -203,8 +201,8 @@ function createWidget(name: string, code: string, klass: string) {
// });
// }, 2000);
pyodideLoaded.subscribe(value => {
console.log("RUNTIME READY", value)
if ("runPythonAsync" in value){
console.log('RUNTIME READY', value);
if ('runPythonAsync' in value) {
runtime = value;
setTimeout(() => {
this.eval(this.code).then(() => {

7
pyscriptjs/src/components/pybox.ts
View File

@@ -52,11 +52,10 @@ export class PyBox extends HTMLElement {
this.widths = [...this.widths, ...[`w-1/${mainDiv.childNodes.length}`]];
}
this.widths.forEach((width, index)=>{
this.widths.forEach((width, index) => {
const node: ChildNode = mainDiv.childNodes[index];
addClasses(node as HTMLElement, [width, 'mx-1'])
})
addClasses(node as HTMLElement, [width, 'mx-1']);
});
this.appendChild(mainDiv);
console.log('py-box connected');

6
pyscriptjs/src/components/pyenv.ts
View File

@@ -9,7 +9,7 @@ let runtime;
pyodideLoaded.subscribe(value => {
runtime = value;
console.log("RUNTIME READY")
console.log('RUNTIME READY');
});
export class PyEnv extends HTMLElement {
@@ -33,7 +33,7 @@ export class PyEnv extends HTMLElement {
this.innerHTML = '';
const env = [];
const paths = [];
const paths: string[] = [];
this.environment = jsyaml.load(this.code);
if (this.environment === undefined) return;
@@ -54,8 +54,8 @@ export class PyEnv extends HTMLElement {
}
async function loadPaths() {
const pyodide = await pyodideReadyPromise;
for (const singleFile of paths) {
console.log(`loading ${singleFile}`);
await loadFromFile(singleFile, runtime);
}
console.log('paths loaded');

67
pyscriptjs/src/components/pyrepl.ts
View File

@@ -50,7 +50,7 @@ export class PyRepl extends BaseEvalElement {
// add an extra div where we can attach the codemirror editor
this.editorNode = document.createElement('div');
addClasses(this.editorNode, ["editor-box", "border", "border-gray-300", "group", "relative"]);
addClasses(this.editorNode, ['editor-box', 'border', 'border-gray-300', 'group', 'relative']);
this.shadow.appendChild(this.wrapper);
}
@@ -64,60 +64,61 @@ export class PyRepl extends BaseEvalElement {
languageConf.of(python()),
keymap.of([
...defaultKeymap,
{ key: "Ctrl-Enter", run: createCmdHandler(this) },
{ key: "Shift-Enter", run: createCmdHandler(this) }
])
{ key: 'Ctrl-Enter', run: createCmdHandler(this) },
{ key: 'Shift-Enter', run: createCmdHandler(this) },
]),
];
const customTheme = EditorView.theme({
'&.cm-focused .cm-editor': { outline: '0px' },
'.cm-scroller': { lineHeight: 2.5 },
'.cm-activeLine': { backgroundColor: '#fff' },
'.cm-content': { padding: 0, backgroundColor: '#f5f5f5' },
'&.cm-focused .cm-content': { border: '1px solid #1876d2' }
'&.cm-focused .cm-editor': { outline: '0px' },
'.cm-scroller': { lineHeight: 2.5 },
'.cm-activeLine': { backgroundColor: '#fff' },
'.cm-content': { padding: 0, backgroundColor: '#f5f5f5' },
'&.cm-focused .cm-content': { border: '1px solid #1876d2' },
});
if (!this.hasAttribute('theme')) {
this.theme = this.getAttribute('theme');
if (this.theme == 'dark'){
extensions.push(oneDarkTheme);
}
extensions.push(customTheme);
this.theme = this.getAttribute('theme');
if (this.theme == 'dark') {
extensions.push(oneDarkTheme);
}
extensions.push(customTheme);
}
const startState = EditorState.create({
doc: this.code.trim(),
extensions: extensions
doc: this.code.trim(),
extensions: extensions,
});
this.editor = new EditorView({
state: startState,
parent: this.editorNode
state: startState,
parent: this.editorNode,
});
const mainDiv = document.createElement('div');
addClasses(mainDiv, ["parentBox", "flex", "flex-col", "mt-2", "mx-8", "relative"])
addClasses(mainDiv, ['parentBox', 'flex', 'flex-col', 'mt-2', 'mx-8', 'relative']);
// add Editor to main PyScript div
mainDiv.appendChild(this.editorNode);
// Play Button
this.btnRun = document.createElement('button');
this.btnRun.innerHTML = '<svg id="" class="svelte-fa svelte-ps5qeg" style="height:20px;width:20px;vertical-align:-.125em;transform-origin:center;overflow:visible;color:green" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>';
addClasses(this.btnRun, ["absolute", "right-1", "bottom-3", "opacity-0", "group-hover:opacity-100"]);
this.btnRun.innerHTML =
'<svg id="" class="svelte-fa svelte-ps5qeg" style="height:20px;width:20px;vertical-align:-.125em;transform-origin:center;overflow:visible;color:green" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>';
addClasses(this.btnRun, ['absolute', 'right-1', 'bottom-3', 'opacity-0', 'group-hover:opacity-100']);
this.editorNode.appendChild(this.btnRun);
this.btnRun.onclick = wrap(this);
function wrap(el: any){
function evaluatePython() {
el.evaluate();
}
return evaluatePython;
function wrap(el: any) {
function evaluatePython() {
el.evaluate();
}
return evaluatePython;
}
if (!this.id) {
console.log(
'WARNING: <pyrepl> define with an id. <pyrepl> should always have an id. More than one <pyrepl> on a page won\'t work otherwise!',
"WARNING: <pyrepl> define with an id. <pyrepl> should always have an id. More than one <pyrepl> on a page won't work otherwise!",
);
}

2
pyscriptjs/src/components/pyscript.ts
View File

@@ -25,13 +25,11 @@ mode.subscribe(value => {
currentMode = value;
});
// TODO: use type declaractions
type PyodideInterface = {
registerJsModule(name: string, module: object): void;
};
export class PyScript extends BaseEvalElement {
constructor() {
super();