Merge pull request #59 from pyscript/fpliger/fix_lint

remove old code and bypass some warning
2022-05-01 19:47:48 +03:00 · 2022-04-28 17:51:48 -05:00
parent e8d106722d 4e667642ca
commit 3b22aa8311
16 changed files with 40 additions and 145 deletions
--- a/pyscriptjs/examples/bokeh.html
+++ b/pyscriptjs/examples/bokeh.html
@@ -1,6 +1,7 @@
 <html><head>
    <title>Bokeh Example</title>
    <meta charset="iso-8859-1">
+    <link rel="icon" type="image/x-icon" href="./favicon.png">
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
@@ -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...")
    </py-script>
    
 </body>
--- a/pyscriptjs/examples/bokeh_interactive.html
+++ b/pyscriptjs/examples/bokeh_interactive.html
@@ -1,6 +1,7 @@
 <html><head>
    <title>Bokeh Example</title>
    <meta charset="iso-8859-1">
+    <link rel="icon" type="image/x-icon" href="./favicon.png">
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
--- 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 :)
    </p>

+    <h2 class="text-2xl font-bold text-blue-600"><a href="./panel_deckgl.html" target=”_blank”>NYC Taxi Data Panel DeckGL Demo</a></h2>
+    <p>Interactive application exploring the NYC Taxi dataset using Panel and DeckGL
+
+      WARNING: This examples takes a little longer to load. So be patient :)
+    </p>
+
    <h2 class="text-2xl font-bold text-blue-600"><a href="./toga/freedom.html" target=”_blank”>Freedom Units!</a></h2>
    <p>A Toga application (a Fahrenheit to Celsius converter), rendered as a Single Page App</p>

--- a/pyscriptjs/examples/panel.html
+++ b/pyscriptjs/examples/panel.html
@@ -2,6 +2,7 @@
  <head>
    <title>Panel Example</title>
    <meta charset="iso-8859-1">
+    <link rel="icon" type="image/x-icon" href="./favicon.png">
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
--- a/pyscriptjs/examples/panel_deckgl.html
+++ b/pyscriptjs/examples/panel_deckgl.html
@@ -2,6 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8">
+    <link rel="icon" type="image/x-icon" href="./favicon.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="theme-color" content="#0072b5">
--- a/pyscriptjs/examples/panel_kmeans.html
+++ b/pyscriptjs/examples/panel_kmeans.html
@@ -2,6 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8">
+    <link rel="icon" type="image/x-icon" href="./favicon.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="theme-color" content="#000000">
--- a/pyscriptjs/examples/panel_stream.html
+++ b/pyscriptjs/examples/panel_stream.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8">
-    <meta charset="utf-8">
+    <link rel="icon" type="image/x-icon" href="./favicon.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="theme-color" content="#000000">
--- 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);
-    }
 </script>

 <svelte:head>
--- 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();
--- 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'])

        })

--- 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;
--- 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);
    }
 }
--- 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;
--- 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';

--- 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<HTMLElement> = document.querySelectorAll('[py-mount]');
-    let output;
+
    let source = '';
    for (const el of matches) {
        let mountName = el.getAttribute('py-mount');
--- a/pyscriptjs/src/interpreter.ts
+++ b/pyscriptjs/src/interpreter.ts
@@ -413,6 +413,8 @@ output_manager = OutputManager()

 const loadInterpreter = async function (): Promise<any> {
    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<any> {
    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);