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 branch 'main' into css

Browse Source
This commit is contained in:
Fabio Pliger
2022-04-13 15:03:58 -05:00
parent fdfde89216 0be6667107
commit 2d32bb5f13
11 changed files with 163 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pyscriptjs/examples/handtrack/lib/handtrack.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

19
pyscriptjs/examples/repl2.html
View File

@@ -12,16 +12,17 @@
<script defer src="../build/pyscript.js"></script> <script defer src="../build/pyscript.js"></script>
</head> </head>
<body class="w-screen"> <py-env>
<div class="w-full h-full flex divide-x"> - bokeh
<div class="w-2/3 p-4"> - numpy
<h1 class="text-4xl">REPL Demo</h1> - paths:
- /utils.py
</py-env>
<body>
<py-box widths="2/3;1/3">
<py-repl id="my-repl" auto-generate="true" target="output"> </py-repl> <py-repl id="my-repl" auto-generate="true" target="output"> </py-repl>
</div>
<div class="w-1/3 p-4">
<h1 class="text-4xl">Output</h1>
<div id="output"></div> <div id="output"></div>
</div> </py-box>
</div>
</body> </body>
</html> </html>

14
pyscriptjs/examples/simple_script2.html
View File

@@ -10,6 +10,10 @@
<link rel="stylesheet" href="../build/pyscript.css" /> <link rel="stylesheet" href="../build/pyscript.css" />
<script defer src="../build/pyscript.js"></script> <script defer src="../build/pyscript.js"></script>
<py-env>
- paths:
- /utils.py
</py-env>
</head> </head>
<body> <body>
@@ -17,20 +21,18 @@
<div id="outputDiv2" class="font-mono"></div> <div id="outputDiv2" class="font-mono"></div>
<div id="outputDiv3" class="font-mono"></div> <div id="outputDiv3" class="font-mono"></div>
<py-script target="outputDiv"> <py-script target="outputDiv">
from datetime import datetime import utils
now = datetime.now() utils.now()
now.strftime("%m/%d/%Y, %H:%M:%S")
</py-script> </py-script>
<py-script> <py-script>
from datetime import datetime from utils import now
import asyncio import asyncio
async def foo(): async def foo():
while True: while True:
await asyncio.sleep(1) await asyncio.sleep(1)
now = datetime.now() output = now()
output = now.strftime("%m/%d/%Y, %H:%M:%S")
pyscript.write("outputDiv2", output) pyscript.write("outputDiv2", output)
out3 = Element("outputDiv3") out3 = Element("outputDiv3")

6
pyscriptjs/examples/todo.html
View File

@@ -10,6 +10,10 @@
<link rel="stylesheet" href="/build/pyscript.css" /> <link rel="stylesheet" href="/build/pyscript.css" />
<script defer src="/build/pyscript.js"></script> <script defer src="/build/pyscript.js"></script>
<py-env>
- paths:
- /utils.py
</py-env>
</head> </head>
<body class="container"> <body class="container">
@@ -22,7 +26,6 @@
<div class="text-center w-full mb-8"> <div class="text-center w-full mb-8">
<h1 class="text-3xl font-bold text-gray-800 uppercase tracking-tight">To Do List</h1> <h1 class="text-3xl font-bold text-gray-800 uppercase tracking-tight">To Do List</h1>
</div> </div>
<div> <div>
<input id="new-task-content" class="border flex-1 mr-3 border-gray-300 p-2 rounded" type="text"> <input id="new-task-content" class="border flex-1 mr-3 border-gray-300 p-2 rounded" type="text">
<button id="new-task-btn" class="p-2 text-white bg-blue-600 border border-blue-600 rounded" type="submit" pys-onClick="add_task"> <button id="new-task-btn" class="p-2 text-white bg-blue-600 border border-blue-600 rounded" type="submit" pys-onClick="add_task">
@@ -30,6 +33,7 @@
</button> </button>
</div> </div>
<py-list id="myList"></py-list>
<div id="list-tasks-container" class="flex flex-col-reverse mt-4"> <div id="list-tasks-container" class="flex flex-col-reverse mt-4">
</div> </div>

7
pyscriptjs/examples/todo.py
View File

@@ -1,4 +1,5 @@
from datetime import datetime as dt from datetime import datetime as dt
from utils import add_class, remove_class
from js import console from js import console
tasks = [] tasks = []
@@ -12,6 +13,7 @@ def add_task(*ags, **kws):
# create task # create task
task_id = f"task-{len(tasks)}" task_id = f"task-{len(tasks)}"
task = {"id": task_id, "content": new_task_content.element.value, "done": False, "created_at": dt.now()} task = {"id": task_id, "content": new_task_content.element.value, "done": False, "created_at": dt.now()}
tasks.append(task) tasks.append(task)
# add the task element to the page as new node in the list by cloning from a template # add the task element to the page as new node in the list by cloning from a template
@@ -24,14 +26,13 @@ def add_task(*ags, **kws):
def check_task(evt=None): def check_task(evt=None):
task['done'] = not task['done'] task['done'] = not task['done']
if task['done']: if task['done']:
taskHtmlContent.element.classList.add("line-through") add_class(taskHtmlContent, "line-through")
else: else:
taskHtmlContent.element.classList.remove("line-through") remove_class(taskHtmlContent, "line-through")
new_task_content.clear() new_task_content.clear()
taskHtmlCheck.element.onclick = check_task taskHtmlCheck.element.onclick = check_task
def add_task_event(e): def add_task_event(e):
console.log("im in")
if (e.key == "Enter"): if (e.key == "Enter"):
add_task() add_task()

13
pyscriptjs/examples/utils.py Normal file
View File

@@ -0,0 +1,13 @@
from datetime import datetime as dt
def format_date(dt_, fmt = "%m/%d/%Y, %H:%M:%S"):
return dt_.strftime(fmt)
def now(fmt = "%m/%d/%Y, %H:%M:%S"):
return format_date(dt.now(), fmt)
def remove_class(element, className):
element.element.classList.remove("line-through")
def add_class(element, className):
element.element.classList.add("line-through")

69
pyscriptjs/src/components/pybox.ts Normal file
View File

@@ -0,0 +1,69 @@
import { addClasses } from '../utils';
export class PyBox extends HTMLElement {
shadow: ShadowRoot;
wrapper: HTMLElement;
theme: string;
widths: Array<string>;
constructor() {
super();
// attach shadow so we can preserve the element original innerHtml content
this.shadow = this.attachShadow({ mode: 'open'});
this.wrapper = document.createElement('slot');
this.shadow.appendChild(this.wrapper);
}
connectedCallback() {
let mainDiv = document.createElement('div');
addClasses(mainDiv, ["flex"])
// Hack: for some reason when moving children, the editor box duplicates children
// meaning that we end up with 2 editors, if there's a <py-repl> inside the <py-box>
// so, if we have more than 2 children with the cm-editor class, we remove one of them
while (this.childNodes.length > 0) {
console.log(this.firstChild);
if ( this.firstChild.nodeName == "PY-REPL" ){
// in this case we need to remove the child and craete a new one from scratch
let replDiv = document.createElement('div');
// we need to put the new repl inside a div so that if the repl has auto-generate true
// it can replicate itself inside that constrained div
replDiv.appendChild(this.firstChild.cloneNode());
mainDiv.appendChild(replDiv);
this.firstChild.remove();
}
else{
if ( this.firstChild.nodeName != "#text" ){
mainDiv.appendChild(this.firstChild);
}else{
this.firstChild.remove()
}
}
}
// now we need to set widths
this.widths = []
if (this.hasAttribute('widths')) {
for (let w of this.getAttribute('widths').split(";")) {
this.widths.push(`w-${w}`);
}
}else{
for (let el of mainDiv.childNodes) {
this.widths.push(`w-1/${mainDiv.childNodes.length}`);
}
}
for (let i in this.widths) {
// @ts-ignore
addClasses(mainDiv.childNodes[parseInt(i)], [this.widths[i]]);
}
this.appendChild(mainDiv);
console.log('py-box connected');
}
}

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

@@ -1,7 +1,7 @@
import * as jsyaml from 'js-yaml'; import * as jsyaml from 'js-yaml';
import { pyodideLoaded, loadedEnvironments, mode, addInitializer } from '../stores'; import { pyodideLoaded, loadedEnvironments, mode, addInitializer } from '../stores';
import { loadPackage } from '../interpreter'; 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;
@@ -37,13 +37,36 @@ export class PyEnv extends HTMLElement {
this.code = this.innerHTML; this.code = this.innerHTML;
this.innerHTML = ''; this.innerHTML = '';
let env = this.environment = jsyaml.load(this.code); let env = [];
let paths = [];
this.environment = jsyaml.load(this.code);
for (let entry of this.environment) {
if (typeof entry == "string" ){
env.push(entry);
}
else if (entry.hasOwnProperty('paths')){
for (let path of entry.paths) {
paths.push(path);
}
}
}
async function loadEnv() { async function loadEnv() {
let pyodide = await pyodideReadyPromise; let pyodide = await pyodideReadyPromise;
await loadPackage(env, pyodide); await loadPackage(env, pyodide);
console.log("enviroment loaded") console.log("enviroment loaded")
} }
async function loadPaths() {
let pyodide = await pyodideReadyPromise;
for (let singleFile of paths) {
await loadFromFile(singleFile, pyodide);
}
console.log("paths loaded")
}
addInitializer(loadEnv); addInitializer(loadEnv);
addInitializer(loadPaths);
console.log("enviroment loading...", env) console.log("enviroment loading...", env)
} }
} }

18
pyscriptjs/src/interpreter.ts
View File

@@ -1,3 +1,5 @@
import { getLastPath } from "./utils";
// @ts-nocheck // @ts-nocheck
// @ts-ignore // @ts-ignore
let pyodideReadyPromise; let pyodideReadyPromise;
@@ -129,4 +131,18 @@ let loadPackage = async function(package_name: string[] | string, runtime: any):
await runtime.loadPackage(package_name); await runtime.loadPackage(package_name);
} }
export {loadInterpreter, pyodideReadyPromise, loadPackage} let loadFromFile = async function(s: string, runtime: any): Promise<any> {
let filename = getLastPath(s);
await runtime.runPythonAsync(`
from pyodide.http import pyfetch
response = await pyfetch("`+s+`")
content = await response.bytes()
with open("`+filename+`", "wb") as f:
f.write(content)
`)
runtime.pyimport(filename.replace(".py", ""));
}
export {loadInterpreter, pyodideReadyPromise, loadPackage, loadFromFile}

4
pyscriptjs/src/main.ts
View File

@@ -2,12 +2,14 @@ import App from "./App.svelte";
import { PyScript } from "./components/pyscript"; import { PyScript } from "./components/pyscript";
import { PyRepl } from "./components/pyrepl"; import { PyRepl } from "./components/pyrepl";
import { PyEnv } from "./components/pyenv" import { PyEnv } from "./components/pyenv";
import { PyBox } from "./components/pybox";
let xPyScript = customElements.define('py-script', PyScript); let xPyScript = customElements.define('py-script', PyScript);
let xPyRepl = customElements.define('py-repl', PyRepl); let xPyRepl = customElements.define('py-repl', PyRepl);
let xPyEnv = customElements.define('py-env', PyEnv); let xPyEnv = customElements.define('py-env', PyEnv);
let xPyBox = customElements.define('py-box', PyBox);
const app = new App({ const app = new App({

8
pyscriptjs/src/utils.ts
View File

@@ -1,6 +1,12 @@
export function addClasses(element: HTMLElement, classes: Array<string>){ function addClasses(element: HTMLElement, classes: Array<string>){
for (let entry of classes) { for (let entry of classes) {
element.classList.add(entry); element.classList.add(entry);
} }
} }
const getLastPath = function (str) {
return str.split('\\').pop().split('/').pop();
}
export {addClasses, getLastPath}