alihan/pyscript-python-html
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2022-05-01 19:47:48 +03:00
Code Issues Projects Releases Wiki Activity

add pyenv and allow to load packages to the loaded pyodide runtime

Browse Source
This commit is contained in:
Fabio Pliger
2022-04-06 14:45:34 -05:00
parent 1484aadb7a
commit 9d64a9f126
5 changed files with 63 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
pyscriptjs/public/bokeh.html
View File

@@ -16,6 +16,11 @@
</head> </head>
<body> <body>
<py-env>
- bokeh
- numpy
- pandas
</py-env>
<h1>Bokeh Example</h1> <h1>Bokeh Example</h1>
<div id="myplot"></div> <div id="myplot"></div>
<py-repl></py-repl> <py-repl></py-repl>

49
pyscriptjs/src/components/pyenv.ts Normal file
View File

@@ -0,0 +1,49 @@
import * as jsyaml from 'js-yaml';
import { pyodideLoaded, loadedEnvironments, mode, addPostInitializer } from '../stores';
import { loadPackage } from '../interpreter';
// Premise used to connect to the first available pyodide interpreter
let pyodideReadyPromise;
let environments;
let currentMode;
pyodideLoaded.subscribe(value => {
pyodideReadyPromise = value;
});
loadedEnvironments.subscribe(value => {
environments = value;
});
mode.subscribe(value => {
currentMode = value;
});
export class PyEnv extends HTMLElement {
shadow: ShadowRoot;
wrapper: HTMLElement;
code: string;
environment: any;
constructor() {
super();
// attach shadow so we can preserve the element original innerHtml content
this.shadow = this.attachShadow({ mode: 'open'});
this.wrapper = document.createElement('slot');
}
connectedCallback() {
this.code = this.innerHTML;
this.innerHTML = '';
let env = this.environment = jsyaml.load(this.code);
async function loadEnv(){
let pyodide = await pyodideReadyPromise;
loadPackage(env, pyodide);
console.log("enviroment loaded")
}
addPostInitializer(loadEnv);
console.log("enviroment loading...")
}
}

15
pyscriptjs/src/interpreter.ts
View File

@@ -2,6 +2,7 @@
// @ts-ignore // @ts-ignore
let pyodideReadyPromise; let pyodideReadyPromise;
let pyodide;
let additional_definitions = ` let additional_definitions = `
from js import document, setInterval, console from js import document, setInterval, console
@@ -100,20 +101,14 @@ class Element:
let loadInterpreter = async function(): any { let loadInterpreter = async function(): any {
/* @ts-ignore */ /* @ts-ignore */
let pyodide = await loadPyodide({ pyodide = await loadPyodide({
indexURL: "https://cdn.jsdelivr.net/pyodide/v0.19.0/full/", indexURL: "https://cdn.jsdelivr.net/pyodide/v0.19.0/full/",
stdout: console.log, stdout: console.log,
stderr: console.log stderr: console.log
}); });
// now that we loaded, add additional convenience fuctions // now that we loaded, add additional convenience fuctions
pyodide.loadPackage(['matplotlib', 'numpy', 'bokeh'])
await pyodide.loadPackage("micropip"); await pyodide.loadPackage("micropip");
// await pyodide.runPythonAsync(`
// import micropip
// await micropip.install("ipython")
// `);
let output = pyodide.runPython(additional_definitions); let output = pyodide.runPython(additional_definitions);
@@ -121,4 +116,8 @@ let loadInterpreter = async function(): any {
return pyodide; return pyodide;
} }
export {loadInterpreter, pyodideReadyPromise} let loadPackage = async function(package_name: string[] | string, runtime: any): any {
await runtime.loadPackage(package_name);
}
export {loadInterpreter, pyodideReadyPromise, loadPackage}

2
pyscriptjs/src/main.ts
View File

@@ -7,10 +7,12 @@ import { defaultKeymap } from "@codemirror/commands";
import { oneDarkTheme } from "@codemirror/theme-one-dark"; import { oneDarkTheme } from "@codemirror/theme-one-dark";
import { PyScript } from "./components/pyscript"; import { PyScript } from "./components/pyscript";
import { PyRepl } from "./components/pyrepl"; import { PyRepl } from "./components/pyrepl";
import { PyEnv } from "./components/pyenv"
let xPyScript = customElements.define('py-script', PyScript); let xPyScript = customElements.define('py-script', PyScript);
let xPyRepl = customElements.define('py-repl', PyRepl); let xPyRepl = customElements.define('py-repl', PyRepl);
let xPyEnv = customElements.define('py-env', PyEnv);
const app = new App({ const app = new App({

7
pyscriptjs/src/stores.ts
View File

@@ -1,5 +1,3 @@
import { promisable } from 'svelte-promisable-stores';
import { loadInterpreter } from "./interpreter";
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
@@ -11,11 +9,6 @@ export const pyodideLoaded = writable({
export const loadedEnvironments = writable([{}]) export const loadedEnvironments = writable([{}])
export const DEFAULT_MODE = 'play'; export const DEFAULT_MODE = 'play';
export const pyodideReadyPromise = promisable(
loadInterpreter,
// shouldRefreshPromise, // optional, but recommended
);
export const navBarOpen = writable(false); export const navBarOpen = writable(false);
export const componentsNavOpen = writable(false); export const componentsNavOpen = writable(false);
export const componentDetailsNavOpen = writable(false); export const componentDetailsNavOpen = writable(false);