diff --git a/pyscriptjs/examples/bokeh.html b/pyscriptjs/examples/bokeh.html index 541040dbca0..9cc2e3c4260 100644 --- a/pyscriptjs/examples/bokeh.html +++ b/pyscriptjs/examples/bokeh.html @@ -1,6 +1,7 @@ Bokeh Example + @@ -40,11 +41,7 @@

Bokeh Example

p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=15, line_color="navy", fill_color="orange", fill_alpha=0.5) p_json = json.dumps(json_item(p, "myplot")) -print("about to embed") - Bokeh.embed.embed_item(JSON.parse(p_json)) - -print ("Done embedding...") diff --git a/pyscriptjs/examples/bokeh_interactive.html b/pyscriptjs/examples/bokeh_interactive.html index 3c4b0605e22..87149a026c9 100644 --- a/pyscriptjs/examples/bokeh_interactive.html +++ b/pyscriptjs/examples/bokeh_interactive.html @@ -1,6 +1,7 @@ Bokeh Example + diff --git a/pyscriptjs/examples/index.html b/pyscriptjs/examples/index.html index 34cd04f3d3c..70c0dcff17f 100644 --- a/pyscriptjs/examples/index.html +++ b/pyscriptjs/examples/index.html @@ -90,6 +90,12 @@

+

NYC Taxi Data Panel DeckGL Demo

+

Interactive application exploring the NYC Taxi dataset using Panel and DeckGL + + WARNING: This examples takes a little longer to load. So be patient :) +

+

Freedom Units!

A Toga application (a Fahrenheit to Celsius converter), rendered as a Single Page App

diff --git a/pyscriptjs/examples/panel.html b/pyscriptjs/examples/panel.html index 2ef1804d4a6..64340a64e9a 100644 --- a/pyscriptjs/examples/panel.html +++ b/pyscriptjs/examples/panel.html @@ -2,6 +2,7 @@ Panel Example + diff --git a/pyscriptjs/examples/panel_deckgl.html b/pyscriptjs/examples/panel_deckgl.html index 2e2d13bd744..66adcbbdb04 100644 --- a/pyscriptjs/examples/panel_deckgl.html +++ b/pyscriptjs/examples/panel_deckgl.html @@ -2,6 +2,7 @@ + diff --git a/pyscriptjs/examples/panel_kmeans.html b/pyscriptjs/examples/panel_kmeans.html index bfbfd995887..cbf8d8064e8 100644 --- a/pyscriptjs/examples/panel_kmeans.html +++ b/pyscriptjs/examples/panel_kmeans.html @@ -2,6 +2,7 @@ + diff --git a/pyscriptjs/examples/panel_stream.html b/pyscriptjs/examples/panel_stream.html index c24db1bbf7f..4123fbf59c4 100644 --- a/pyscriptjs/examples/panel_stream.html +++ b/pyscriptjs/examples/panel_stream.html @@ -2,7 +2,7 @@ - + diff --git a/pyscriptjs/src/App.svelte b/pyscriptjs/src/App.svelte index 405bedce618..f60e2f4b0d1 100644 --- a/pyscriptjs/src/App.svelte +++ b/pyscriptjs/src/App.svelte @@ -2,45 +2,31 @@ import Tailwind from './Tailwind.svelte'; import { loadInterpreter } from './interpreter'; import { - componentsNavOpen, initializers, loadedEnvironments, mode, - navBarOpen, postInitializers, pyodideLoaded, scriptsQueue, } from './stores'; - let iconSize = 2; let pyodideReadyPromise; - function bumpSize(evt) { - iconSize = 4; - } - - function downSize(evt) { - iconSize = 2; - } - const initializePyodide = async () => { pyodideReadyPromise = loadInterpreter(); + const pyodide = await pyodideReadyPromise; let newEnv = { id: 'a', promise: pyodideReadyPromise, + runtime: pyodide, state: 'loading', }; - pyodideLoaded.set(pyodideReadyPromise); + pyodideLoaded.set(pyodide); + loadedEnvironments.update((value: any): any => { value[newEnv['id']] = newEnv; }); - let showNavBar = false; - let main = document.querySelector('#main'); - navBarOpen.subscribe(value => { - showNavBar = value; - }); - // now we call all initializers before we actually executed all page scripts for (let initializer of $initializers) { await initializer(); @@ -61,10 +47,6 @@ } }, 3000); }; - - function toggleComponentsNavBar(evt) { - componentsNavOpen.set(!$componentsNavOpen); - } diff --git a/pyscriptjs/src/components/base.ts b/pyscriptjs/src/components/base.ts index ae1f4202aff..9d2d4e2040f 100644 --- a/pyscriptjs/src/components/base.ts +++ b/pyscriptjs/src/components/base.ts @@ -1,4 +1,4 @@ -import { componentDetailsNavOpen, loadedEnvironments, mode, pyodideLoaded } from '../stores'; +import { loadedEnvironments, mode, pyodideLoaded } from '../stores'; import { guidGenerator, addClasses } from '../utils'; // Premise used to connect to the first available pyodide interpreter let pyodideReadyPromise; @@ -13,10 +13,6 @@ loadedEnvironments.subscribe(value => { environments = value; }); -let propertiesNavOpen; -componentDetailsNavOpen.subscribe(value => { - propertiesNavOpen = value; -}); mode.subscribe(value => { currentMode = value; @@ -52,7 +48,11 @@ export class BaseEvalElement extends HTMLElement { this.outputElement.hidden = false; } - postEvaluate() {} + // subclasses should overwrite this method to define custom logic + // after code has been evaluated + postEvaluate() { + return null; + } checkId() { if (!this.id) this.id = this.constructor.name + '-' + guidGenerator(); diff --git a/pyscriptjs/src/components/pybox.ts b/pyscriptjs/src/components/pybox.ts index 124360f8a82..308f1136c55 100644 --- a/pyscriptjs/src/components/pybox.ts +++ b/pyscriptjs/src/components/pybox.ts @@ -49,14 +49,12 @@ export class PyBox extends HTMLElement { this.widths.push(`w-${w}`); } } else { - for (const el of mainDiv.childNodes) { - this.widths.push(`w-1/${mainDiv.childNodes.length}`); - } + this.widths = [...this.widths, ...[`w-1/${mainDiv.childNodes.length}`]]; } this.widths.forEach((width, index)=>{ const node: ChildNode = mainDiv.childNodes[index]; - addClasses(node, [width, 'mx-4']) + addClasses(node, [width, 'mx-1']) }) diff --git a/pyscriptjs/src/components/pybutton.ts b/pyscriptjs/src/components/pybutton.ts index ad54f9bae22..6650de96537 100644 --- a/pyscriptjs/src/components/pybutton.ts +++ b/pyscriptjs/src/components/pybutton.ts @@ -1,5 +1,5 @@ import { BaseEvalElement } from './base'; -import { addClasses, ltrim, htmlDecode } from '../utils'; +import { addClasses, htmlDecode } from '../utils'; export class PyButton extends BaseEvalElement { shadow: ShadowRoot; diff --git a/pyscriptjs/src/components/pyenv.ts b/pyscriptjs/src/components/pyenv.ts index ec924f85cd4..29f3eeead0a 100644 --- a/pyscriptjs/src/components/pyenv.ts +++ b/pyscriptjs/src/components/pyenv.ts @@ -5,19 +5,11 @@ import { loadPackage, loadFromFile } from '../interpreter'; // Premise used to connect to the first available pyodide interpreter let pyodideReadyPromise; -let environments; -let currentMode; +let runtime; pyodideLoaded.subscribe(value => { - pyodideReadyPromise = value; -}); - -loadedEnvironments.subscribe(value => { - environments = value; -}); - -mode.subscribe(value => { - currentMode = value; + runtime = value; + console.log("RUNTIME READY") }); export class PyEnv extends HTMLElement { @@ -25,6 +17,9 @@ export class PyEnv extends HTMLElement { wrapper: HTMLElement; code: string; environment: any; + runtime: any; + env: string[]; + paths: string[]; constructor() { super(); @@ -54,20 +49,20 @@ export class PyEnv extends HTMLElement { } async function loadEnv() { - const pyodide = await pyodideReadyPromise; - await loadPackage(env, pyodide); + await loadPackage(env, runtime); console.log('enviroment loaded'); } async function loadPaths() { const pyodide = await pyodideReadyPromise; for (const singleFile of paths) { - await loadFromFile(singleFile, pyodide); + await loadFromFile(singleFile, runtime); } console.log('paths loaded'); } + addInitializer(loadEnv); addInitializer(loadPaths); - console.log('enviroment loading...', env); + console.log('enviroment loading...', this.env); } } diff --git a/pyscriptjs/src/components/pyinputbox.ts b/pyscriptjs/src/components/pyinputbox.ts index 9fbc73e6de9..e88e50a46dc 100644 --- a/pyscriptjs/src/components/pyinputbox.ts +++ b/pyscriptjs/src/components/pyinputbox.ts @@ -1,5 +1,5 @@ import { BaseEvalElement } from './base'; -import { addClasses, ltrim, htmlDecode } from '../utils'; +import { addClasses, htmlDecode } from '../utils'; export class PyInputBox extends BaseEvalElement { shadow: ShadowRoot; diff --git a/pyscriptjs/src/components/pyrepl.ts b/pyscriptjs/src/components/pyrepl.ts index d1360e2dd0c..288aa2ca839 100644 --- a/pyscriptjs/src/components/pyrepl.ts +++ b/pyscriptjs/src/components/pyrepl.ts @@ -5,7 +5,7 @@ import { keymap } from '@codemirror/view'; import { defaultKeymap } from '@codemirror/commands'; import { oneDarkTheme } from '@codemirror/theme-one-dark'; -import { componentDetailsNavOpen, currentComponentDetails, loadedEnvironments, mode, pyodideLoaded } from '../stores'; +import { componentDetailsNavOpen, loadedEnvironments, mode, pyodideLoaded } from '../stores'; import { addClasses } from '../utils'; import { BaseEvalElement } from './base'; diff --git a/pyscriptjs/src/components/pyscript.ts b/pyscriptjs/src/components/pyscript.ts index 61267e66e3b..fd8ce42a469 100644 --- a/pyscriptjs/src/components/pyscript.ts +++ b/pyscriptjs/src/components/pyscript.ts @@ -1,15 +1,7 @@ -import { EditorState } from '@codemirror/basic-setup'; -import { python } from '@codemirror/lang-python'; -import { StateCommand } from '@codemirror/state'; -import { keymap } from '@codemirror/view'; -import { defaultKeymap } from '@codemirror/commands'; -import { oneDarkTheme } from '@codemirror/theme-one-dark'; - import { addInitializer, addPostInitializer, addToScriptsQueue, - componentDetailsNavOpen, loadedEnvironments, mode, pyodideLoaded, @@ -21,7 +13,6 @@ import { BaseEvalElement } from './base'; let pyodideReadyPromise; let environments; let currentMode; -let handlersCollected = false; pyodideLoaded.subscribe(value => { pyodideReadyPromise = value; @@ -30,67 +21,16 @@ loadedEnvironments.subscribe(value => { environments = value; }); -let propertiesNavOpen; -componentDetailsNavOpen.subscribe(value => { - propertiesNavOpen = value; -}); - mode.subscribe(value => { currentMode = value; }); -function createCmdHandler(el) { - // Creates a codemirror cmd handler that calls the el.evaluate when an event - // triggers that specific cmd - const toggleCheckbox: StateCommand = ({ state, dispatch }) => { - return el.evaluate(state); - }; - return toggleCheckbox; -} // TODO: use type declaractions type PyodideInterface = { registerJsModule(name: string, module: object): void; }; -// TODO: This should be used as base for generic scripts that need exectutoin -// from PyScript to initializers, etc... -class Script { - source: string; - state: string; - output: string; - - constructor(source: string, output: string) { - this.output = output; - this.source = source; - this.state = 'waiting'; - } - - async evaluate() { - console.log('evaluate'); - const pyodide = await pyodideReadyPromise; - // debugger - try { - // let source = this.editor.state.doc.toString(); - let output; - if (this.source.includes('asyncio')) { - output = await pyodide.runPythonAsync(this.source); - } else { - output = pyodide.runPython(this.source); - } - - if (this.output) { - // this.editorOut.innerHTML = s; - } - // if (output !== undefined){ - // this.addToOutput(output); - // } - } catch (err) { - console.log('OOOPS, this happened: ', err); - // this.addToOutput(err); - } - } -} export class PyScript extends BaseEvalElement { constructor() { @@ -104,25 +44,6 @@ export class PyScript extends BaseEvalElement { this.checkId(); this.code = this.innerHTML; this.innerHTML = ''; - const startState = EditorState.create({ - doc: this.code, - extensions: [ - keymap.of([ - ...defaultKeymap, - { key: 'Ctrl-Enter', run: createCmdHandler(this) }, - { key: 'Shift-Enter', run: createCmdHandler(this) }, - ]), - oneDarkTheme, - python(), - // Event listener function that is called every time an user types something on this editor - // EditorView.updateListener.of((v:ViewUpdate) => { - // if (v.docChanged) { - // console.log(v.changes); - - // } - // }) - ], - }); const mainDiv = document.createElement('div'); addClasses(mainDiv, ['parentBox', 'flex', 'flex-col', 'mx-8']); @@ -234,7 +155,6 @@ async function initHandlers() { // // pyodide.runPython(handlerCode); // } } - handlersCollected = true; matches = document.querySelectorAll('[pys-onKeyDown]'); for (const el of matches) { @@ -249,7 +169,7 @@ async function mountElements() { console.log('Collecting nodes to be mounted into python namespace...'); const pyodide = await pyodideReadyPromise; const matches: NodeListOf = document.querySelectorAll('[py-mount]'); - let output; + let source = ''; for (const el of matches) { let mountName = el.getAttribute('py-mount'); diff --git a/pyscriptjs/src/interpreter.ts b/pyscriptjs/src/interpreter.ts index bf08054b6bb..8f4d47d45f4 100644 --- a/pyscriptjs/src/interpreter.ts +++ b/pyscriptjs/src/interpreter.ts @@ -413,6 +413,8 @@ output_manager = OutputManager() const loadInterpreter = async function (): Promise { console.log('creating pyodide runtime'); + // eslint-disable-next-line + // @ts-ignore pyodide = await loadPyodide({ stdout: console.log, stderr: console.log, @@ -422,15 +424,6 @@ const loadInterpreter = async function (): Promise { console.log('loading micropip'); await pyodide.loadPackage('micropip'); console.log('loading pyscript module'); - // await pyodide.runPythonAsync(` - // from pyodide.http import pyfetch - // response = await pyfetch("/build/pyscript.py") - // with open("pyscript.py", "wb") as f: - // content = await response.bytes() - // print(content) - // f.write(content) - // `) - // let pkg = pyodide.pyimport("pyscript"); console.log('creating additional definitions'); const output = pyodide.runPython(additional_definitions);