8000 add pyenv and allow to load packages to the loaded pyodide runtime · fskydev/pyscript@9d64a9f · GitHub
[go: up one dir, main page]
Skip to content

Commit 9d64a9f

Browse files
fpligerfpliger
committed
add pyenv and allow to load packages to the loaded pyodide runtime
1 parent 1484aad commit 9d64a9f

File tree

5 files changed

+63
-15
lines changed

5 files changed

+63
-15
lines changed

‎pyscriptjs/public/bokeh.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@
1616

1717
</head>
1818
<body>
19+
<py-env>
20+
- bokeh
21+
- numpy
22+
- pandas
23+
</py-env>
1924
<h1>Bokeh Example</h1>
2025
<div id="myplot"></div>
2126
<py-repl></py-repl>

‎pyscriptjs/src/components/pyenv.ts

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import * as jsyaml from 'js-yaml';
2+
3+
import { pyodideLoaded, loadedEnvironments, mode, addPostInitializer } from '../stores';
4+
import { loadPackage } from '../interpreter';
5+
6+
// Premise used to connect to the first available pyodide interpreter
7+
let pyodideReadyPromise;
8+
let environments;
9+
let currentMode;
10+
11+
pyodideLoaded.subscribe(value => {
12+
pyodideReadyPromise = value;
13+
});
14+
loadedEnvironments.subscribe(value => {
15+
environments = value;
16+
});
17+
18+
mode.subscribe(value => {
19+
currentMode = value;
20+
});
21+
22+
export class PyEnv extends HTMLElement {
23+
shadow: ShadowRoot;
24+
wrapper: HTMLElement;
25+
code: string;
26+
environment: any;
27+
28+
constructor() {
29+
super();
30+
31+
// attach shadow so we can preserve the element original innerHtml content
32+
this.shadow = this.attachShadow({ mode: 'open'});
33+
this.wrapper = document.createElement('slot');
34+
}
35+
36+
connectedCallback() {
37+
this.code = this.innerHTML;
38+
this.innerHTML = '';
39+
40+
let env = this.environment = jsyaml.load(this.code);
41+
async function loadEnv(){
42+
let pyodide = await pyodideReadyPromise;
43+
loadPackage(env, pyodide);
44+
console.log("enviroment loaded")
45+
}
46+
addPostInitializer(loadEnv);
47+
console.log("enviroment loading...")
48+
}
49+
}

‎pyscriptjs/src/interpreter.ts

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// @ts-ignore
33
let pyodideReadyPromise;
44

5+
let pyodide;
56

67
let additional_definitions = `
78
from js import document, setInterval, console
@@ -100,25 +101,23 @@ class Element:
100101

101102
let loadInterpreter = async function(): any {
102103
/* @ts-ignore */
103-
let pyodide = await loadPyodide({
104+
pyodide = await loadPyodide({
104105
indexURL: "https://cdn.jsdelivr.net/pyodide/v0.19.0/full/",
105106
stdout: console.log,
106107
stderr: console.log
107108
});
108109

109110
// now that we loaded, add additional convenience fuctions
110-
pyodide.loadPackage(['matplotlib', 'numpy', 'bokeh'])
111-
112111
await pyodide.loadPackage("micropip");
113-
// await pyodide.runPythonAsync(`
114-
// import micropip
115-
// await micropip.install("ipython")
116-
// `);
117112

118113
let output = pyodide.runPython(additional_definitions);
119114

120115
/* @ts-ignore */
121116
return pyodide;
122117
}
123118

124-
export {loadInterpreter, pyodideReadyPromise}
119+
let loadPackage = async function(package_name: string[] | string, runtime: any): any {
120+
await runtime.loadPackage(package_name);
121+
}
122+
123+
export {loadInterpreter, pyodideReadyPromise, loadPackage}

‎pyscriptjs/src/main.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ import { defaultKeymap } from "@codemirror/commands";
77
import { oneDarkTheme } from "@codemirror/theme-one-dark";
88
import { PyScript } from "./components/pyscript";
99
import { PyRepl } from "./components/pyrepl";
10+
import { PyEnv } from "./components/pyenv"
1011

1112

1213
let xPyScript = customElements.define('py-script', PyScript);
1314
let xPyRepl = customElements.define('py-repl', PyRepl);
15+
let xPyEnv = customElements.define('py-env', PyEnv);
1416

1517

1618
const app = new App({

‎pyscriptjs/src/stores.ts

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { promisable } from 'svelte-promisable-stores';
2-
import { loadInterpreter } from "./interpreter";
31
import { writable } from 'svelte/store';
42

53

@@ -11,11 +9,6 @@ export const pyodideLoaded = writable({
119
export const loadedEnvironments = writable([{}])
1210
export const DEFAULT_MODE = 'play';
1311

14-
export const pyodideReadyPromise = promisable(
15-
loadInterpreter,
16-
// shouldRefreshPromise, // optional, but recommended
17-
);
18-
1912
export const navBarOpen = writable(false);
2013
export const componentsNavOpen = writable(false);
2114
export const componentDetailsNavOpen = writable(false);

0 commit comments

Comments
 (0)
0