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

Merge pull request #59 from pyscript/fpliger/fix_lint

Browse Source 
remove old code and bypass some warning
This commit is contained in:
Fabio Pliger
2022-04-28 17:51:48 -05:00
committed by GitHub
parent e8d106722d 4e667642ca
commit 3b22aa8311
16 changed files with 40 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
pyscriptjs/examples/bokeh.html
View File

@@ -1,6 +1,7 @@
<html><head> <html><head>
<title>Bokeh Example</title> <title>Bokeh Example</title>
<meta charset="iso-8859-1"> <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-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-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> <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.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")) p_json = json.dumps(json_item(p, "myplot"))
print("about to embed")
Bokeh.embed.embed_item(JSON.parse(p_json)) Bokeh.embed.embed_item(JSON.parse(p_json))
print ("Done embedding...")
</py-script> </py-script>
</body> </body>

1
pyscriptjs/examples/bokeh_interactive.html
View File

@@ -1,6 +1,7 @@
<html><head> <html><head>
<title>Bokeh Example</title> <title>Bokeh Example</title>
<meta charset="iso-8859-1"> <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-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-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> <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>

6
pyscriptjs/examples/index.html
View File

@@ -90,6 +90,12 @@
WARNING: This examples takes a little longer to load. So be patient :) WARNING: This examples takes a little longer to load. So be patient :)
</p> </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> <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> <p>A Toga application (a Fahrenheit to Celsius converter), rendered as a Single Page App</p>

1
pyscriptjs/examples/panel.html
View File

@@ -2,6 +2,7 @@
<head> <head>
<title>Panel Example</title> <title>Panel Example</title>
<meta charset="iso-8859-1"> <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-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-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> <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>

1
pyscriptjs/examples/panel_deckgl.html
View File

@@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <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-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#0072b5"> <meta name="theme-color" content="#0072b5">

1
pyscriptjs/examples/panel_kmeans.html
View File

@@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <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-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#000000"> <meta name="theme-color" content="#000000">

2
pyscriptjs/examples/panel_stream.html
View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#000000"> <meta name="theme-color" content="#000000">

26
pyscriptjs/src/App.svelte
View File

@@ -2,45 +2,31 @@
import Tailwind from './Tailwind.svelte'; import Tailwind from './Tailwind.svelte';
import { loadInterpreter } from './interpreter'; import { loadInterpreter } from './interpreter';
import { import {
componentsNavOpen,
initializers, initializers,
loadedEnvironments, loadedEnvironments,
mode, mode,
navBarOpen,
postInitializers, postInitializers,
pyodideLoaded, pyodideLoaded,
scriptsQueue, scriptsQueue,
} from './stores'; } from './stores';
let iconSize = 2;
let pyodideReadyPromise; let pyodideReadyPromise;
function bumpSize(evt) {
iconSize = 4;
}
function downSize(evt) {
iconSize = 2;
}
const initializePyodide = async () => { const initializePyodide = async () => {
pyodideReadyPromise = loadInterpreter(); pyodideReadyPromise = loadInterpreter();
const pyodide = await pyodideReadyPromise;
let newEnv = { let newEnv = {
id: 'a', id: 'a',
promise: pyodideReadyPromise, promise: pyodideReadyPromise,
runtime: pyodide,
state: 'loading', state: 'loading',
}; };
pyodideLoaded.set(pyodideReadyPromise); pyodideLoaded.set(pyodide);
loadedEnvironments.update((value: any): any => { loadedEnvironments.update((value: any): any => {
value[newEnv['id']] = newEnv; 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 // now we call all initializers before we actually executed all page scripts
for (let initializer of $initializers) { for (let initializer of $initializers) {
await initializer(); await initializer();
@@ -61,10 +47,6 @@
} }
}, 3000); }, 3000);
}; };
function toggleComponentsNavBar(evt) {
componentsNavOpen.set(!$componentsNavOpen);
}
</script> </script>
<svelte:head> <svelte:head>

12
pyscriptjs/src/components/base.ts
View File

@@ -1,4 +1,4 @@
import { componentDetailsNavOpen, loadedEnvironments, mode, pyodideLoaded } from '../stores'; import { loadedEnvironments, mode, pyodideLoaded } from '../stores';
import { guidGenerator, addClasses } from '../utils'; import { guidGenerator, addClasses } from '../utils';
// Premise used to connect to the first available pyodide interpreter // Premise used to connect to the first available pyodide interpreter
let pyodideReadyPromise; let pyodideReadyPromise;
@@ -13,10 +13,6 @@ loadedEnvironments.subscribe(value => {
environments = value; environments = value;
}); });
let propertiesNavOpen;
componentDetailsNavOpen.subscribe(value => {
propertiesNavOpen = value;
});
mode.subscribe(value => { mode.subscribe(value => {
currentMode = value; currentMode = value;
@@ -52,7 +48,11 @@ export class BaseEvalElement extends HTMLElement {
this.outputElement.hidden = false; this.outputElement.hidden = false;
} }
postEvaluate() {} // subclasses should overwrite this method to define custom logic
// after code has been evaluated
postEvaluate() {
return null;
}
checkId() { checkId() {
if (!this.id) this.id = this.constructor.name + '-' + guidGenerator(); if (!this.id) this.id = this.constructor.name + '-' + guidGenerator();

6
pyscriptjs/src/components/pybox.ts
View File

@@ -49,14 +49,12 @@ export class PyBox extends HTMLElement {
this.widths.push(`w-${w}`); this.widths.push(`w-${w}`);
} }
} else { } else {
for (const el of mainDiv.childNodes) { this.widths = [...this.widths, ...[`w-1/${mainDiv.childNodes.length}`]];
this.widths.push(`w-1/${mainDiv.childNodes.length}`);
}
} }
this.widths.forEach((width, index)=>{ this.widths.forEach((width, index)=>{
const node: ChildNode = mainDiv.childNodes[index]; const node: ChildNode = mainDiv.childNodes[index];
addClasses(node, [width, 'mx-4']) addClasses(node, [width, 'mx-1'])
}) })

2
pyscriptjs/src/components/pybutton.ts
View File

@@ -1,5 +1,5 @@
import { BaseEvalElement } from './base'; import { BaseEvalElement } from './base';
import { addClasses, ltrim, htmlDecode } from '../utils'; import { addClasses, htmlDecode } from '../utils';
export class PyButton extends BaseEvalElement { export class PyButton extends BaseEvalElement {
shadow: ShadowRoot; shadow: ShadowRoot;

25
pyscriptjs/src/components/pyenv.ts
View File

@@ -5,19 +5,11 @@ import { loadPackage, loadFromFile } from '../interpreter';
// Premise used to connect to the first available pyodide interpreter // Premise used to connect to the first available pyodide interpreter
let pyodideReadyPromise; let pyodideReadyPromise;
let environments; let runtime;
let currentMode;
pyodideLoaded.subscribe(value => { pyodideLoaded.subscribe(value => {
pyodideReadyPromise = value; runtime = value;
}); console.log("RUNTIME READY")
loadedEnvironments.subscribe(value => {
environments = value;
});
mode.subscribe(value => {
currentMode = value;
}); });
export class PyEnv extends HTMLElement { export class PyEnv extends HTMLElement {
@@ -25,6 +17,9 @@ export class PyEnv extends HTMLElement {
wrapper: HTMLElement; wrapper: HTMLElement;
code: string; code: string;
environment: any; environment: any;
runtime: any;
env: string[];
paths: string[];
constructor() { constructor() {
super(); super();
@@ -54,20 +49,20 @@ export class PyEnv extends HTMLElement {
} }
async function loadEnv() { async function loadEnv() {
const pyodide = await pyodideReadyPromise; await loadPackage(env, runtime);
await loadPackage(env, pyodide);
console.log('enviroment loaded'); console.log('enviroment loaded');
} }
async function loadPaths() { async function loadPaths() {
const pyodide = await pyodideReadyPromise; const pyodide = await pyodideReadyPromise;
for (const singleFile of paths) { for (const singleFile of paths) {
await loadFromFile(singleFile, pyodide); await loadFromFile(singleFile, runtime);
} }
console.log('paths loaded'); console.log('paths loaded');
} }
addInitializer(loadEnv); addInitializer(loadEnv);
addInitializer(loadPaths); addInitializer(loadPaths);
console.log('enviroment loading...', env); console.log('enviroment loading...', this.env);
} }
} }

2
pyscriptjs/src/components/pyinputbox.ts
View File

@@ -1,5 +1,5 @@
import { BaseEvalElement } from './base'; import { BaseEvalElement } from './base';
import { addClasses, ltrim, htmlDecode } from '../utils'; import { addClasses, htmlDecode } from '../utils';
export class PyInputBox extends BaseEvalElement { export class PyInputBox extends BaseEvalElement {
shadow: ShadowRoot; shadow: ShadowRoot;

2
pyscriptjs/src/components/pyrepl.ts
View File

@@ -5,7 +5,7 @@ import { keymap } from '@codemirror/view';
import { defaultKeymap } from '@codemirror/commands'; import { defaultKeymap } from '@codemirror/commands';
import { oneDarkTheme } from '@codemirror/theme-one-dark'; 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 { addClasses } from '../utils';
import { BaseEvalElement } from './base'; import { BaseEvalElement } from './base';

82
pyscriptjs/src/components/pyscript.ts
View File

@@ -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 { import {
addInitializer, addInitializer,
addPostInitializer, addPostInitializer,
addToScriptsQueue, addToScriptsQueue,
componentDetailsNavOpen,
loadedEnvironments, loadedEnvironments,
mode, mode,
pyodideLoaded, pyodideLoaded,
@@ -21,7 +13,6 @@ import { BaseEvalElement } from './base';
let pyodideReadyPromise; let pyodideReadyPromise;
let environments; let environments;
let currentMode; let currentMode;
let handlersCollected = false;
pyodideLoaded.subscribe(value => { pyodideLoaded.subscribe(value => {
pyodideReadyPromise = value; pyodideReadyPromise = value;
@@ -30,67 +21,16 @@ loadedEnvironments.subscribe(value => {
environments = value; environments = value;
}); });
let propertiesNavOpen;
componentDetailsNavOpen.subscribe(value => {
propertiesNavOpen = value;
});
mode.subscribe(value => { mode.subscribe(value => {
currentMode = 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 // TODO: use type declaractions
type PyodideInterface = { type PyodideInterface = {
registerJsModule(name: string, module: object): void; 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 { export class PyScript extends BaseEvalElement {
constructor() { constructor() {
@@ -104,25 +44,6 @@ export class PyScript extends BaseEvalElement {
this.checkId(); this.checkId();
this.code = this.innerHTML; this.code = this.innerHTML;
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'); const mainDiv = document.createElement('div');
addClasses(mainDiv, ['parentBox', 'flex', 'flex-col', 'mx-8']); addClasses(mainDiv, ['parentBox', 'flex', 'flex-col', 'mx-8']);
@@ -234,7 +155,6 @@ async function initHandlers() {
// // pyodide.runPython(handlerCode); // // pyodide.runPython(handlerCode);
// } // }
} }
handlersCollected = true;
matches = document.querySelectorAll('[pys-onKeyDown]'); matches = document.querySelectorAll('[pys-onKeyDown]');
for (const el of matches) { for (const el of matches) {
@@ -249,7 +169,7 @@ async function mountElements() {
console.log('Collecting nodes to be mounted into python namespace...'); console.log('Collecting nodes to be mounted into python namespace...');
const pyodide = await pyodideReadyPromise; const pyodide = await pyodideReadyPromise;
const matches: NodeListOf<HTMLElement> = document.querySelectorAll('[py-mount]'); const matches: NodeListOf<HTMLElement> = document.querySelectorAll('[py-mount]');
let output;
let source = ''; let source = '';
for (const el of matches) { for (const el of matches) {
let mountName = el.getAttribute('py-mount'); let mountName = el.getAttribute('py-mount');

11
pyscriptjs/src/interpreter.ts
View File

@@ -413,6 +413,8 @@ output_manager = OutputManager()
const loadInterpreter = async function (): Promise<any> { const loadInterpreter = async function (): Promise<any> {
console.log('creating pyodide runtime'); console.log('creating pyodide runtime');
// eslint-disable-next-line
// @ts-ignore
pyodide = await loadPyodide({ pyodide = await loadPyodide({
stdout: console.log, stdout: console.log,
stderr: console.log, stderr: console.log,
@@ -422,15 +424,6 @@ const loadInterpreter = async function (): Promise<any> {
console.log('loading micropip'); console.log('loading micropip');
await pyodide.loadPackage('micropip'); await pyodide.loadPackage('micropip');
console.log('loading pyscript module'); 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'); console.log('creating additional definitions');
const output = pyodide.runPython(additional_definitions); const output = pyodide.runPython(additional_definitions);