From cb61908e83dfd2c2c7eadb94ab3858593cc55ab3 Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Thu, 28 Apr 2022 12:02:35 -0600 Subject: [PATCH 1/7] remove old code and bypass some warning --- pyscriptjs/src/components/pybox.ts | 1 + pyscriptjs/src/components/pyscript.ts | 27 --------------------------- 2 files changed, 1 insertion(+), 27 deletions(-) diff --git a/pyscriptjs/src/components/pybox.ts b/pyscriptjs/src/components/pybox.ts index 124360f..0aa4bf5 100644 --- a/pyscriptjs/src/components/pybox.ts +++ b/pyscriptjs/src/components/pybox.ts @@ -56,6 +56,7 @@ export class PyBox extends HTMLElement { this.widths.forEach((width, index)=>{ const node: ChildNode = mainDiv.childNodes[index]; + // @ts-ignore addClasses(node, [width, 'mx-4']) }) diff --git a/pyscriptjs/src/components/pyscript.ts b/pyscriptjs/src/components/pyscript.ts index 61267e6..734e401 100644 --- a/pyscriptjs/src/components/pyscript.ts +++ b/pyscriptjs/src/components/pyscript.ts @@ -39,14 +39,6 @@ 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 = { @@ -104,25 +96,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']); From 3f05d33ebc535370e458fef4e133a005c9da17d4 Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Thu, 28 Apr 2022 12:12:24 -0600 Subject: [PATCH 2/7] remove unused code in App --- pyscriptjs/src/App.svelte | 14 -------------- pyscriptjs/src/interpreter.ts | 10 +--------- 2 files changed, 1 insertion(+), 23 deletions(-) diff --git a/pyscriptjs/src/App.svelte b/pyscriptjs/src/App.svelte index 405bedc..f69e4c1 100644 --- a/pyscriptjs/src/App.svelte +++ b/pyscriptjs/src/App.svelte @@ -2,7 +2,6 @@ import Tailwind from './Tailwind.svelte'; import { loadInterpreter } from './interpreter'; import { - componentsNavOpen, initializers, loadedEnvironments, mode, @@ -15,14 +14,6 @@ let iconSize = 2; let pyodideReadyPromise; - function bumpSize(evt) { - iconSize = 4; - } - - function downSize(evt) { - iconSize = 2; - } - const initializePyodide = async () => { pyodideReadyPromise = loadInterpreter(); let newEnv = { @@ -36,7 +27,6 @@ }); let showNavBar = false; - let main = document.querySelector('#main'); navBarOpen.subscribe(value => { showNavBar = value; }); @@ -61,10 +51,6 @@ } }, 3000); }; - - function toggleComponentsNavBar(evt) { - componentsNavOpen.set(!$componentsNavOpen); - } diff --git a/pyscriptjs/src/interpreter.ts b/pyscriptjs/src/interpreter.ts index bf08054..ff00e33 100644 --- a/pyscriptjs/src/interpreter.ts +++ b/pyscriptjs/src/interpreter.ts @@ -413,6 +413,7 @@ output_manager = OutputManager() const loadInterpreter = async function (): Promise { console.log('creating pyodide runtime'); + // @ts-ignore pyodide = await loadPyodide({ stdout: console.log, stderr: console.log, @@ -422,15 +423,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); From ec38f9c1516efb9a4d53461351910256565b9e11 Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Thu, 28 Apr 2022 14:00:31 -0600 Subject: [PATCH 3/7] more cleaning --- pyscriptjs/src/App.svelte | 6 ------ pyscriptjs/src/components/base.ts | 12 ++++++------ pyscriptjs/src/components/pybox.ts | 5 +---- pyscriptjs/src/components/pybutton.ts | 2 +- pyscriptjs/src/components/pyenv.ts | 14 -------------- 5 files changed, 8 insertions(+), 31 deletions(-) diff --git a/pyscriptjs/src/App.svelte b/pyscriptjs/src/App.svelte index f69e4c1..47d7592 100644 --- a/pyscriptjs/src/App.svelte +++ b/pyscriptjs/src/App.svelte @@ -11,7 +11,6 @@ scriptsQueue, } from './stores'; - let iconSize = 2; let pyodideReadyPromise; const initializePyodide = async () => { @@ -26,11 +25,6 @@ value[newEnv['id']] = newEnv; }); - let showNavBar = false; - navBarOpen.subscribe(value => { - showNavBar = value; - }); - // now we call all initializers before we actually executed all page scripts for (let initializer of $initializers) { await initializer(); diff --git a/pyscriptjs/src/components/base.ts b/pyscriptjs/src/components/base.ts index ae1f420..9d2d4e2 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 0aa4bf5..8d73994 100644 --- a/pyscriptjs/src/components/pybox.ts +++ b/pyscriptjs/src/components/pybox.ts @@ -49,14 +49,11 @@ 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]; - // @ts-ignore addClasses(node, [width, 'mx-4']) }) diff --git a/pyscriptjs/src/components/pybutton.ts b/pyscriptjs/src/components/pybutton.ts index ad54f9b..6650de9 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 ec924f8..317e481 100644 --- a/pyscriptjs/src/components/pyenv.ts +++ b/pyscriptjs/src/components/pyenv.ts @@ -5,20 +5,6 @@ import { loadPackage, loadFromFile } 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; From 99c79acc78fca3d9517feb2d5a5cc9e6b80da0c3 Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Thu, 28 Apr 2022 14:09:44 -0600 Subject: [PATCH 4/7] clean pyscript.ts --- pyscriptjs/src/components/pyinputbox.ts | 2 +- pyscriptjs/src/components/pyrepl.ts | 2 +- pyscriptjs/src/components/pyscript.ts | 55 +------------------------ 3 files changed, 3 insertions(+), 56 deletions(-) diff --git a/pyscriptjs/src/components/pyinputbox.ts b/pyscriptjs/src/components/pyinputbox.ts index 9fbc73e..e88e50a 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 d1360e2..288aa2c 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 734e401..fd8ce42 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,11 +21,6 @@ loadedEnvironments.subscribe(value => { environments = value; }); -let propertiesNavOpen; -componentDetailsNavOpen.subscribe(value => { - propertiesNavOpen = value; -}); - mode.subscribe(value => { currentMode = value; }); @@ -45,44 +31,6 @@ 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() { @@ -207,7 +155,6 @@ async function initHandlers() { // // pyodide.runPython(handlerCode); // } } - handlersCollected = true; matches = document.querySelectorAll('[pys-onKeyDown]'); for (const el of matches) { @@ -222,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'); From 62737bf868c6e64fb3d37a64df73211e1594b60a Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Thu, 28 Apr 2022 15:06:50 -0600 Subject: [PATCH 5/7] disable lint on specific line --- pyscriptjs/src/App.svelte | 1 - pyscriptjs/src/interpreter.ts | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/pyscriptjs/src/App.svelte b/pyscriptjs/src/App.svelte index 47d7592..e056740 100644 --- a/pyscriptjs/src/App.svelte +++ b/pyscriptjs/src/App.svelte @@ -5,7 +5,6 @@ initializers, loadedEnvironments, mode, - navBarOpen, postInitializers, pyodideLoaded, scriptsQueue, diff --git a/pyscriptjs/src/interpreter.ts b/pyscriptjs/src/interpreter.ts index ff00e33..8f4d47d 100644 --- a/pyscriptjs/src/interpreter.ts +++ b/pyscriptjs/src/interpreter.ts @@ -413,6 +413,7 @@ 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, From 788af88422d50a3d38d6f5e4220f6662cecb9eae Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Thu, 28 Apr 2022 15:59:35 -0600 Subject: [PATCH 6/7] fix enviroment promise loading bug on pyenv --- pyscriptjs/src/App.svelte | 5 ++++- pyscriptjs/src/components/pyenv.ts | 17 +++++++++++++---- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/pyscriptjs/src/App.svelte b/pyscriptjs/src/App.svelte index e056740..f60e2f4 100644 --- a/pyscriptjs/src/App.svelte +++ b/pyscriptjs/src/App.svelte @@ -14,12 +14,15 @@ 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; }); diff --git a/pyscriptjs/src/components/pyenv.ts b/pyscriptjs/src/components/pyenv.ts index 317e481..29f3eee 100644 --- a/pyscriptjs/src/components/pyenv.ts +++ b/pyscriptjs/src/components/pyenv.ts @@ -5,12 +5,21 @@ import { loadPackage, loadFromFile } from '../interpreter'; // Premise used to connect to the first available pyodide interpreter let pyodideReadyPromise; +let runtime; + +pyodideLoaded.subscribe(value => { + runtime = value; + console.log("RUNTIME READY") +}); export class PyEnv extends HTMLElement { shadow: ShadowRoot; wrapper: HTMLElement; code: string; environment: any; + runtime: any; + env: string[]; + paths: string[]; constructor() { super(); @@ -40,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); } } From 4e667642cae66b15c12c58a28c6ecb746da33a7a Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Thu, 28 Apr 2022 16:18:18 -0600 Subject: [PATCH 7/7] fixed some minor things related to examples while testing --- pyscriptjs/examples/bokeh.html | 5 +---- pyscriptjs/examples/bokeh_interactive.html | 1 + pyscriptjs/examples/index.html | 6 ++++++ pyscriptjs/examples/panel.html | 1 + pyscriptjs/examples/panel_deckgl.html | 1 + pyscriptjs/examples/panel_kmeans.html | 1 + pyscriptjs/examples/panel_stream.html | 2 +- pyscriptjs/src/components/pybox.ts | 2 +- 8 files changed, 13 insertions(+), 6 deletions(-) diff --git a/pyscriptjs/examples/bokeh.html b/pyscriptjs/examples/bokeh.html index 541040d..9cc2e3c 100644 --- a/pyscriptjs/examples/bokeh.html +++ b/pyscriptjs/examples/bokeh.html @@ -1,6 +1,7 @@ Bokeh Example + @@ -40,11 +41,7 @@ p = figure(plot_width=400, plot_height=400) 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 3c4b060..87149a0 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 34cd04f..70c0dcf 100644 --- a/pyscriptjs/examples/index.html +++ b/pyscriptjs/examples/index.html @@ -90,6 +90,12 @@ WARNING: This examples takes a little longer to load. So be patient :)

+

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 2ef1804..64340a6 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 2e2d13b..66adcbb 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 bfbfd99..cbf8d80 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 c24db1b..4123fbf 100644 --- a/pyscriptjs/examples/panel_stream.html +++ b/pyscriptjs/examples/panel_stream.html @@ -2,7 +2,7 @@ - + diff --git a/pyscriptjs/src/components/pybox.ts b/pyscriptjs/src/components/pybox.ts index 8d73994..308f113 100644 --- a/pyscriptjs/src/components/pybox.ts +++ b/pyscriptjs/src/components/pybox.ts @@ -54,7 +54,7 @@ export class PyBox extends HTMLElement { this.widths.forEach((width, index)=>{ const node: ChildNode = mainDiv.childNodes[index]; - addClasses(node, [width, 'mx-4']) + addClasses(node, [width, 'mx-1']) })