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 #44 from anaconda/rb/prettier

Browse Source 
Added prettier and eslint
This commit is contained in:
Fabio Pliger
2022-04-25 22:03:57 -05:00
committed by GitHub
parent 2dc4787e97 d309a6c974
commit df514fe658
20 changed files with 1673 additions and 855 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -118,8 +118,9 @@ venv.bak/
# Rope project settings
.ropeproject
# VS Code Files
# IDE Files
.vscode/
.idea/
# mkdocs documentation
/site

46
pyscriptjs/.eslintrc.js Normal file
View File

@@ -0,0 +1,46 @@
module.exports = {
parser: '@typescript-eslint/parser',
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
],
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
tsconfigRootDir: __dirname,
project: ['./tsconfig.json'],
extraFileExtensions: ['.svelte'],
},
env: {
es6: true,
browser: true,
},
overrides: [
{
files: ['*.svelte'],
processor: 'svelte3/svelte3',
},
],
settings: {
'svelte3/typescript': require('typescript'),
// ignore style tags in Svelte because of Tailwind CSS
// See https://github.com/sveltejs/eslint-plugin-svelte3/issues/70
'svelte3/ignore-styles': () => true,
},
plugins: ['svelte3', '@typescript-eslint'],
ignorePatterns: ['node_modules'],
rules: {
'no-prototype-builtins': 'warn',
'@typescript-eslint/no-unused-vars': 'warn',
'@typescript-eslint/no-explicit-any': 'warn',
'@typescript-eslint/no-unsafe-assignment': 'warn',
'@typescript-eslint/no-unsafe-argument': 'warn',
'@typescript-eslint/no-unsafe-member-access': 'warn',
'@typescript-eslint/no-unsafe-call': 'warn',
'@typescript-eslint/no-unsafe-return': 'warn',
'@typescript-eslint/no-floating-promises': 'warn',
'@typescript-eslint/restrict-plus-operands': 'warn',
'@typescript-eslint/no-empty-function': 'warn',
},
};

6
pyscriptjs/.prettierignore Normal file
View File

@@ -0,0 +1,6 @@
build
node_modules
# Ignore all HTML files
*.html

13
pyscriptjs/.prettierrc.js Normal file
View File

@@ -0,0 +1,13 @@
module.exports = {
arrowParens: 'avoid',
bracketSameLine: true,
singleQuote: true,
printWidth: 120,
plugins: ['prettier-plugin-svelte'],
semi: true,
svelteSortOrder: 'options-styles-scripts-markup',
svelteStrictMode: false,
svelteIndentScriptAndStyle: true,
tabWidth: 4,
trailingComma: 'all',
}

743
pyscriptjs/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

13
pyscriptjs/package.json
View File

@@ -5,15 +5,26 @@
"build": "NODE_ENV=production rollup -c",
"dev": "rollup -c -w",
"start": "sirv public --no-clear --port 8080",
"validate": "svelte-check"
"validate": "svelte-check",
"format:check": "prettier --check './src/**/*.{js,svelte,html,ts}'",
"format": "prettier --write './src/**/*.{js,svelte,html,ts}'",
"lint": "eslint './src/**/*.{js,svelte,html,ts}'",
"lint:fix": "eslint --fix './src/**/*.{js,svelte,html,ts}'",
"xprelint": "npm run format"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^17.0.0",
"@rollup/plugin-node-resolve": "^11.0.0",
"@rollup/plugin-typescript": "^8.1.0",
"@tsconfig/svelte": "^1.0.0",
"@typescript-eslint/eslint-plugin": "^5.20.0",
"@typescript-eslint/parser": "^5.20.0",
"autoprefixer": "^10.2.3",
"eslint": "^8.14.0",
"eslint-plugin-svelte3": "^3.4.1",
"postcss": "^8.2.4",
"prettier": "^2.6.2",
"prettier-plugin-svelte": "^2.7.0",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.0",

135
pyscriptjs/src/App.svelte
View File

@@ -1,68 +1,3 @@
<script lang="ts">
import Tailwind from "./Tailwind.svelte";
import { loadInterpreter } from './interpreter';
import { pyodideLoaded, loadedEnvironments, navBarOpen, componentsNavOpen, mode, scriptsQueue, initializers, postInitializers } from './stores';
let iconSize = 2;
let pyodideReadyPromise
function bumpSize(evt){
iconSize = 4;
}
function downSize(evt){
iconSize = 2;
}
const initializePyodide = async () =>{
// @ts-ignore
pyodideReadyPromise = loadInterpreter();
// @ts-ignore
let newEnv = {
'id': 'a',
'promise': pyodideReadyPromise,
'state': 'loading',
}
pyodideLoaded.set(pyodideReadyPromise);
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();
}
// now we can actually execute the page scripts if we are in play mode
if ($mode == "play"){
for (let script of $scriptsQueue) {
script.evaluate();
}
scriptsQueue.set([]);
}
// now we call all post initializers AFTER we actually executed all page scripts
setTimeout(() => {
for (let initializer of $postInitializers){
initializer();
}
}, 3000);
}
function toggleComponentsNavBar(evt){
componentsNavOpen.set(!$componentsNavOpen);
}
</script>
<style>
:global(div.buttons-box) {
margin-top: -25px;
@@ -71,9 +6,77 @@
:global(.parentBox:hover .buttons-box) {
visibility: visible;
}
</style>
<script lang="ts">
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();
let newEnv = {
id: 'a',
promise: pyodideReadyPromise,
state: 'loading',
};
pyodideLoaded.set(pyodideReadyPromise);
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();
}
// now we can actually execute the page scripts if we are in play mode
if ($mode == 'play') {
for (let script of $scriptsQueue) {
script.evaluate();
}
scriptsQueue.set([]);
}
// now we call all post initializers AFTER we actually executed all page scripts
setTimeout(() => {
for (let initializer of $postInitializers) {
initializer();
}
}, 3000);
};
function toggleComponentsNavBar(evt) {
componentsNavOpen.set(!$componentsNavOpen);
}
</script>
<svelte:head>
<script src="https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js" on:load={initializePyodide}></script>
</svelte:head>

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

@@ -1,4 +1,4 @@
import { pyodideLoaded, loadedEnvironments, componentDetailsNavOpen, mode } from '../stores';
import { componentDetailsNavOpen, loadedEnvironments, mode, pyodideLoaded } from '../stores';
import { guidGenerator } from '../utils';
// Premise used to connect to the first available pyodide interpreter
let pyodideReadyPromise;
@@ -24,8 +24,8 @@ mode.subscribe(value => {
// TODO: use type declaractions
type PyodideInterface = {
registerJsModule(name: string, module: object): void
}
registerJsModule(name: string, module: object): void;
};
export class BaseEvalElement extends HTMLElement {
shadow: ShadowRoot;
@@ -42,114 +42,109 @@ export class BaseEvalElement extends HTMLElement {
super();
// attach shadow so we can preserve the element original innerHtml content
this.shadow = this.attachShadow({ mode: 'open'});
this.shadow = this.attachShadow({ mode: 'open' });
this.wrapper = document.createElement('slot');
this.shadow.appendChild(this.wrapper);
}
addToOutput(s: string) {
this.outputElement.innerHTML += "<div>"+s+"</div>";
this.outputElement.innerHTML += '<div>' + s + '</div>';
this.outputElement.hidden = false;
}
postEvaluate(){
postEvaluate() {}
checkId() {
if (!this.id) this.id = this.constructor.name + '-' + guidGenerator();
}
checkId(){
if (!this.id)
this.id = this.constructor.name+"-"+guidGenerator();
getSourceFromElement(): string {
return '';
}
getSourceFromElement(): string{
return "";
}
async getSourceFromFile(s: string): Promise<string>{
let pyodide = await pyodideReadyPromise;
let response = await fetch(s);
async getSourceFromFile(s: string): Promise<string> {
const pyodide = await pyodideReadyPromise;
const response = await fetch(s);
this.code = await response.text();
return this.code;
}
protected async _register_esm(pyodide: PyodideInterface): Promise<void> {
const imports: {[key: string]: unknown} = {}
const imports: { [key: string]: unknown } = {};
for (const node of document.querySelectorAll("script[type='importmap']")) {
const importmap = (() => {
try {
return JSON.parse(node.textContent)
return JSON.parse(node.textContent);
} catch {
return null
return null;
}
})()
})();
if (importmap?.imports == null)
continue
if (importmap?.imports == null) continue;
for (const [name, url] of Object.entries(importmap.imports)) {
if (typeof name != "string" || typeof url != "string")
continue
if (typeof name != 'string' || typeof url != 'string') continue;
try {
// XXX: pyodide doesn't like Module(), failing with
// "can't read 'name' of undefined" at import time
imports[name] = {...await import(url)}
imports[name] = { ...(await import(url)) };
} catch {
console.error(`failed to fetch '${url}' for '${name}'`)
console.error(`failed to fetch '${url}' for '${name}'`);
}
}
}
pyodide.registerJsModule("esm", imports)
pyodide.registerJsModule('esm', imports);
}
async evaluate(): Promise<void> {
console.log('evaluate');
let pyodide = await pyodideReadyPromise;
const pyodide = await pyodideReadyPromise;
let source: string;
let output;
try {
// @ts-ignore
if (this.source){
if (this.source) {
source = await this.getSourceFromFile(this.source);
}else{
} else {
source = this.getSourceFromElement();
}
await this._register_esm(pyodide);
if (source.includes("asyncio")){
await pyodide.runPythonAsync(`output_manager.change("`+this.outputElement.id+`", "`+this.errorElement.id+`")`);
if (source.includes('asyncio')) {
await pyodide.runPythonAsync(
`output_manager.change("` + this.outputElement.id + `", "` + this.errorElement.id + `")`,
);
output = await pyodide.runPythonAsync(source);
await pyodide.runPythonAsync(`output_manager.revert()`)
}else{
output = pyodide.runPython(`output_manager.change("`+this.outputElement.id+`", "`+this.errorElement.id+`")`);
await pyodide.runPythonAsync(`output_manager.revert()`);
} else {
output = pyodide.runPython(
`output_manager.change("` + this.outputElement.id + `", "` + this.errorElement.id + `")`,
);
output = pyodide.runPython(source);
pyodide.runPython(`output_manager.revert()`)
pyodide.runPython(`output_manager.revert()`);
}
if (output !== undefined){
if (Element === undefined){
if (output !== undefined) {
if (Element === undefined) {
Element = pyodide.globals.get('Element');
}
const out = Element(this.outputElement.id);
// @ts-ignore
out.write.callKwargs(output, { append : true});
out.write.callKwargs(output, { append: true });
this.outputElement.hidden = false;
this.outputElement.style.display = 'block';
}
this.postEvaluate()
this.postEvaluate();
} catch (err) {
if (Element === undefined){
if (Element === undefined) {
Element = pyodide.globals.get('Element');
}
const out = Element(this.errorElement.id);
// @ts-ignore
out.write.callKwargs(err, { append : true});
out.write.callKwargs(err, { append: true });
this.errorElement.hidden = false;
this.errorElement.style.display = 'block';
}
@@ -157,22 +152,21 @@ export class BaseEvalElement extends HTMLElement {
async eval(source: string): Promise<void> {
let output;
let pyodide = await pyodideReadyPromise;
const pyodide = await pyodideReadyPromise;
try{
try {
output = await pyodide.runPythonAsync(source);
if (output !== undefined){ console.log(output); }
if (output !== undefined) {
console.log(output);
}
} catch (err) {
console.log(err);
}
} // end eval
}
}
function createWidget(name: string, code: string, klass: string){
class CustomWidget extends HTMLElement{
function createWidget(name: string, code: string, klass: string) {
class CustomWidget extends HTMLElement {
shadow: ShadowRoot;
wrapper: HTMLElement;
@@ -186,7 +180,7 @@ export class BaseEvalElement extends HTMLElement {
super();
// attach shadow so we can preserve the element original innerHtml content
this.shadow = this.attachShadow({ mode: 'open'});
this.shadow = this.attachShadow({ mode: 'open' });
this.wrapper = document.createElement('slot');
this.shadow.appendChild(this.wrapper);
@@ -207,19 +201,19 @@ export class BaseEvalElement extends HTMLElement {
}, 2000);
}
async registerWidget(){
let pyodide = await pyodideReadyPromise;
async registerWidget() {
const pyodide = await pyodideReadyPromise;
console.log('new widget registered:', this.name);
pyodide.globals.set(this.id, this.proxy);
}
async eval(source: string): Promise<void> {
let output;
let pyodide = await pyodideReadyPromise;
try{
const pyodide = await pyodideReadyPromise;
try {
output = await pyodide.runPythonAsync(source);
this.proxyClass = pyodide.globals.get(this.klass);
if (output !== undefined){
if (output !== undefined) {
console.log(output);
}
} catch (err) {
@@ -227,10 +221,10 @@ export class BaseEvalElement extends HTMLElement {
}
}
}
let xPyWidget = customElements.define(name, CustomWidget);
}
const xPyWidget = customElements.define(name, CustomWidget);
}
export class PyWidget extends HTMLElement {
export class PyWidget extends HTMLElement {
shadow: ShadowRoot;
name: string;
klass: string;
@@ -245,7 +239,7 @@ export class BaseEvalElement extends HTMLElement {
super();
// attach shadow so we can preserve the element original innerHtml content
this.shadow = this.attachShadow({ mode: 'open'});
this.shadow = this.attachShadow({ mode: 'open' });
this.wrapper = document.createElement('slot');
this.shadow.appendChild(this.wrapper);
@@ -264,16 +258,18 @@ export class BaseEvalElement extends HTMLElement {
}
connectedCallback() {
if (this.id === undefined){
throw new ReferenceError(`No id specified for component. Components must have an explicit id. Please use id="" to specify your component id.`)
if (this.id === undefined) {
throw new ReferenceError(
`No id specified for component. Components must have an explicit id. Please use id="" to specify your component id.`,
);
return;
}
let mainDiv = document.createElement('div');
const mainDiv = document.createElement('div');
mainDiv.id = this.id + '-main';
this.appendChild(mainDiv);
console.log('reading source')
this.getSourceFromFile(this.source).then((code:string) => {
console.log('reading source');
this.getSourceFromFile(this.source).then((code: string) => {
this.code = code;
createWidget(this.name, code, this.klass);
});
@@ -287,42 +283,42 @@ export class BaseEvalElement extends HTMLElement {
if (!this.hasAttribute('output-mode')) {
this.setAttribute('output-mode', 'append');
}
}else{
if (this.hasAttribute('std-out')){
} else {
if (this.hasAttribute('std-out')) {
this.outputElement = document.getElementById(this.getAttribute('std-out'));
}else{
} else {
// In this case neither output or std-out have been provided so we need
// to create a new output div to output to
this.outputElement = document.createElement('div');
this.outputElement.classList.add("output");
this.outputElement.classList.add('output');
this.outputElement.hidden = true;
this.outputElement.id = this.id + "-" + this.getAttribute("exec-id");
this.outputElement.id = this.id + '-' + this.getAttribute('exec-id');
}
if (this.hasAttribute('std-err')){
if (this.hasAttribute('std-err')) {
this.outputElement = document.getElementById(this.getAttribute('std-err'));
}else{
} else {
this.errorElement = this.outputElement;
}
}
}
async getSourceFromFile(s: string): Promise<string>{
let pyodide = await pyodideReadyPromise;
let response = await fetch(s);
async getSourceFromFile(s: string): Promise<string> {
const pyodide = await pyodideReadyPromise;
const response = await fetch(s);
return await response.text();
}
async eval(source: string): Promise<void> {
let output;
let pyodide = await pyodideReadyPromise;
try{
const pyodide = await pyodideReadyPromise;
try {
output = await pyodide.runPythonAsync(source);
if (output !== undefined){
if (output !== undefined) {
console.log(output);
}
} catch (err) {
console.log(err);
}
}
}
}

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

@@ -10,60 +10,57 @@ export class PyBox extends HTMLElement {
super();
// attach shadow so we can preserve the element original innerHtml content
this.shadow = this.attachShadow({ mode: 'open'});
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", "mx-8"])
const mainDiv = document.createElement('div');
addClasses(mainDiv, ['flex', 'mx-8']);
// 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" ){
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');
const 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" ){
} else {
if (this.firstChild.nodeName != '#text') {
mainDiv.appendChild(this.firstChild);
}else{
this.firstChild.remove()
} else {
this.firstChild.remove();
}
}
}
// now we need to set widths
this.widths = []
this.widths = [];
if (this.hasAttribute('widths')) {
for (let w of this.getAttribute('widths').split(";")) {
for (const w of this.getAttribute('widths').split(';')) {
this.widths.push(`w-${w}`);
}
}else{
for (let el of mainDiv.childNodes) {
} else {
for (const 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], 'mx-4']);
}
this.widths.forEach((width, index)=>{
const node: ChildNode = mainDiv.childNodes[index];
addClasses(node, [width, 'mx-4'])
})
this.appendChild(mainDiv);
console.log('py-box connected');
}
}
}

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

@@ -18,27 +18,27 @@ export class PyButton extends BaseEvalElement {
connectedCallback() {
this.code = htmlDecode(this.innerHTML);
this.mount_name = this.id.split("-").join("_");
this.mount_name = this.id.split('-').join('_');
this.innerHTML = '';
let mainDiv = document.createElement('button');
const mainDiv = document.createElement('button');
mainDiv.innerHTML = this.label;
addClasses(mainDiv, ["p-2", "text-white", "bg-blue-600", "border", "border-blue-600", "rounded"]);
addClasses(mainDiv, ['p-2', 'text-white', 'bg-blue-600', 'border', 'border-blue-600', 'rounded']);
mainDiv.id = this.id;
this.id = `${this.id}-container`;
this.appendChild(mainDiv);
this.code = this.code.split("self").join(this.mount_name);
let registrationCode = `${this.mount_name} = Element("${ mainDiv.id }")`;
if (this.code.includes("def on_focus")){
this.code = this.code.replace("def on_focus", `def on_focus_${this.mount_name}`);
registrationCode += `\n${this.mount_name}.element.onfocus = on_focus_${this.mount_name}`
this.code = this.code.split('self').join(this.mount_name);
let registrationCode = `${this.mount_name} = Element("${mainDiv.id}")`;
if (this.code.includes('def on_focus')) {
this.code = this.code.replace('def on_focus', `def on_focus_${this.mount_name}`);
registrationCode += `\n${this.mount_name}.element.onfocus = on_focus_${this.mount_name}`;
}
if (this.code.includes("def on_click")){
this.code = this.code.replace("def on_click", `def on_click_${this.mount_name}`);
registrationCode += `\n${this.mount_name}.element.onclick = on_click_${this.mount_name}`
if (this.code.includes('def on_click')) {
this.code = this.code.replace('def on_click', `def on_click_${this.mount_name}`);
registrationCode += `\n${this.mount_name}.element.onclick = on_click_${this.mount_name}`;
}
// now that we appended and the element is attached, lets connect with the event handlers
@@ -53,4 +53,4 @@ export class PyButton extends BaseEvalElement {
console.log('py-button connected');
}
}
}

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

@@ -29,7 +29,7 @@ export class PyEnv extends HTMLElement {
constructor() {
super();
this.shadow = this.attachShadow({ mode: 'open'});
this.shadow = this.attachShadow({ mode: 'open' });
this.wrapper = document.createElement('slot');
}
@@ -37,40 +37,37 @@ export class PyEnv extends HTMLElement {
this.code = this.innerHTML;
this.innerHTML = '';
let env = [];
let paths = [];
const env = [];
const paths = [];
this.environment = jsyaml.load(this.code);
if (this.environment === undefined)
return
if (this.environment === undefined) return;
for (let entry of this.environment) {
if (typeof entry == "string" ){
for (const entry of this.environment) {
if (typeof entry == 'string') {
env.push(entry);
}
else if (entry.hasOwnProperty('paths')){
for (let path of entry.paths) {
} else if (entry.hasOwnProperty('paths')) {
for (const path of entry.paths) {
paths.push(path);
}
}
}
async function loadEnv() {
let pyodide = await pyodideReadyPromise;
const pyodide = await pyodideReadyPromise;
await loadPackage(env, pyodide);
console.log("enviroment loaded")
console.log('enviroment loaded');
}
async function loadPaths() {
let pyodide = await pyodideReadyPromise;
for (let singleFile of paths) {
const pyodide = await pyodideReadyPromise;
for (const singleFile of paths) {
await loadFromFile(singleFile, pyodide);
}
console.log("paths loaded")
console.log('paths loaded');
}
addInitializer(loadEnv);
addInitializer(loadPaths);
console.log("enviroment loading...", env)
console.log('enviroment loading...', env);
}
}

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

@@ -18,12 +18,12 @@ export class PyInputBox extends BaseEvalElement {
connectedCallback() {
this.code = htmlDecode(this.innerHTML);
this.mount_name = this.id.split("-").join("_");
this.mount_name = this.id.split('-').join('_');
this.innerHTML = '';
let mainDiv = document.createElement('input');
mainDiv.type = "text";
addClasses(mainDiv, ["border", "flex-1", "w-full", "mr-3", "border-gray-300", "p-2", "rounded"]);
const mainDiv = document.createElement('input');
mainDiv.type = 'text';
addClasses(mainDiv, ['border', 'flex-1', 'w-full', 'mr-3', 'border-gray-300', 'p-2', 'rounded']);
mainDiv.id = this.id;
this.id = `${this.id}-container`;
@@ -32,11 +32,11 @@ export class PyInputBox extends BaseEvalElement {
// now that we appended and the element is attached, lets connect with the event handlers
// defined for this widget
this.appendChild(mainDiv);
this.code = this.code.split("self").join(this.mount_name);
let registrationCode = `${this.mount_name} = Element("${ mainDiv.id }")`;
if (this.code.includes("def on_keypress")){
this.code = this.code.replace("def on_keypress", `def on_keypress_${this.mount_name}`);
registrationCode += `\n${this.mount_name}.element.onkeypress = on_keypress_${this.mount_name}`
this.code = this.code.split('self').join(this.mount_name);
let registrationCode = `${this.mount_name} = Element("${mainDiv.id}")`;
if (this.code.includes('def on_keypress')) {
this.code = this.code.replace('def on_keypress', `def on_keypress_${this.mount_name}`);
registrationCode += `\n${this.mount_name}.element.onkeypress = on_keypress_${this.mount_name}`;
}
// TODO: For now we delay execution to allow pyodide to load but in the future this
@@ -49,6 +49,4 @@ export class PyInputBox extends BaseEvalElement {
});
}, 4000);
}
}
}

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

@@ -1,12 +1,11 @@
import {EditorState, EditorView, basicSetup} from "@codemirror/basic-setup"
import { python } from "@codemirror/lang-python"
// @ts-ignore
import { StateCommand, Compartment } from '@codemirror/state';
import { keymap, ViewUpdate } from "@codemirror/view";
import { defaultKeymap } from "@codemirror/commands";
import { oneDarkTheme } from "@codemirror/theme-one-dark";
import { basicSetup, EditorState, EditorView } from '@codemirror/basic-setup';
import { python } from '@codemirror/lang-python';
import { Compartment, StateCommand } from '@codemirror/state';
import { keymap } from '@codemirror/view';
import { defaultKeymap } from '@codemirror/commands';
import { oneDarkTheme } from '@codemirror/theme-one-dark';
import { pyodideLoaded, loadedEnvironments, componentDetailsNavOpen, currentComponentDetails, mode } from '../stores';
import { componentDetailsNavOpen, currentComponentDetails, loadedEnvironments, mode, pyodideLoaded } from '../stores';
import { addClasses } from '../utils';
import { BaseEvalElement } from './base';
@@ -31,19 +30,17 @@ mode.subscribe(value => {
currentMode = value;
});
const languageConf = new Compartment();
const languageConf = new Compartment
function createCmdHandler(el){
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
const toggleCheckbox: StateCommand = ({ state, dispatch }) => {
return el.evaluate(state);
};
return toggleCheckbox;
}
export class PyRepl extends BaseEvalElement {
editor: EditorView;
editorNode: HTMLElement;
@@ -53,23 +50,22 @@ export class PyRepl extends BaseEvalElement {
// add an extra div where we can attach the codemirror editor
this.editorNode = document.createElement('div');
addClasses(this.editorNode, ["editor-box"])
addClasses(this.editorNode, ['editor-box']);
this.shadow.appendChild(this.wrapper);
}
connectedCallback() {
this.checkId()
this.checkId();
this.code = this.innerHTML;
this.innerHTML = '';
let extensions = [
const extensions = [
basicSetup,
languageConf.of(python()),
keymap.of([
...defaultKeymap,
{ key: "Ctrl-Enter", run: createCmdHandler(this) },
{ key: "Shift-Enter", run: createCmdHandler(this) }
{ key: 'Ctrl-Enter', run: createCmdHandler(this) },
{ key: 'Shift-Enter', run: createCmdHandler(this) },
]),
// Event listener function that is called every time an user types something on this editor
@@ -83,80 +79,99 @@ export class PyRepl extends BaseEvalElement {
if (!this.hasAttribute('theme')) {
this.theme = this.getAttribute('theme');
if (this.theme == 'dark'){
if (this.theme == 'dark') {
extensions.push(oneDarkTheme);
}
}
let startState = EditorState.create({
const startState = EditorState.create({
doc: this.code.trim(),
extensions: extensions
})
extensions: extensions,
});
this.editor = new EditorView({
state: startState,
parent: this.editorNode
})
parent: this.editorNode,
});
let mainDiv = document.createElement('div');
addClasses(mainDiv, ["parentBox", "group", "flex", "flex-col", "mt-2", "border-2", "border-gray-200", "rounded-lg", "mx-8"])
const mainDiv = document.createElement('div');
addClasses(mainDiv, [
'parentBox',
'group',
'flex',
'flex-col',
'mt-2',
'border-2',
'border-gray-200',
'rounded-lg',
'mx-8',
]);
// add Editor to main PyScript div
// Butons DIV
var eDiv = document.createElement('div');
addClasses(eDiv, "buttons-box opacity-0 group-hover:opacity-100 relative top-0 right-0 flex flex-row-reverse space-x-reverse space-x-4 font-mono text-white text-sm font-bold leading-6 dev-buttons-group".split(" "))
eDiv.setAttribute("role", "group");
const eDiv = document.createElement('div');
addClasses(
eDiv,
'buttons-box opacity-0 group-hover:opacity-100 relative top-0 right-0 flex flex-row-reverse space-x-reverse space-x-4 font-mono text-white text-sm font-bold leading-6 dev-buttons-group'.split(
' ',
),
);
eDiv.setAttribute('role', 'group');
// Play Button
this.btnRun = document.createElement('button');
this.btnRun.innerHTML = '<svg id="" class="svelte-fa svelte-ps5qeg" style="height:1em;vertical-align:-.125em;transform-origin:center;overflow:visible" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>';
let buttonClasses = ["mr-2", "block", "py-2", "px-4", "rounded-full"];
this.btnRun.innerHTML =
'<svg id="" class="svelte-fa svelte-ps5qeg" style="height:1em;vertical-align:-.125em;transform-origin:center;overflow:visible" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>';
const buttonClasses = ['mr-2', 'block', 'py-2', 'px-4', 'rounded-full'];
addClasses(this.btnRun, buttonClasses);
addClasses(this.btnRun, ["bg-green-500"])
addClasses(this.btnRun, ['bg-green-500']);
eDiv.appendChild(this.btnRun);
this.btnRun.onclick = wrap(this);
function wrap(el: any){
function wrap(el: any) {
async function evaluatePython() {
el.evaluate()
await el.evaluate();
}
return evaluatePython;
}
// Settings button
this.btnConfig = document.createElement('button');
this.btnConfig.innerHTML = '<svg id="" class="svelte-fa svelte-ps5qeg" style="height:1em;vertical-align:-.125em;transform-origin:center;overflow:visible" viewBox="0 0 512 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(256 256)" transform-origin="128 0"><g transform="translate(0,0) scale(1,1)"><path d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z" fill="currentColor" transform="translate(-256 -256)"></path></g></g></svg>';
this.btnConfig.onclick = function toggleNavBar(evt){
this.btnConfig.innerHTML =
'<svg id="" class="svelte-fa svelte-ps5qeg" style="height:1em;vertical-align:-.125em;transform-origin:center;overflow:visible" viewBox="0 0 512 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(256 256)" transform-origin="128 0"><g transform="translate(0,0) scale(1,1)"><path d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z" fill="currentColor" transform="translate(-256 -256)"></path></g></g></svg>';
this.btnConfig.onclick = function toggleNavBar(evt) {
console.log('clicked');
componentDetailsNavOpen.set(!propertiesNavOpen);
currentComponentDetails.set([
{key: "auto-generate", value: true},
{key:"output", value: "default"},
{key: "source", value: "self"},
{key: "output-mode", value: "clear"}
])
}
{ key: 'auto-generate', value: true },
{ key: 'output', value: 'default' },
{ key: 'source', value: 'self' },
{ key: 'output-mode', value: 'clear' },
]);
};
addClasses(this.btnConfig, buttonClasses);
addClasses(this.btnConfig, ["bg-blue-500"])
addClasses(this.btnConfig, ['bg-blue-500']);
eDiv.appendChild(this.btnConfig);
mainDiv.appendChild(eDiv);
mainDiv.appendChild(this.editorNode);
if (!this.id){
console.log("WARNING: <pyrepl> define with an id. <pyrepl> should always have an id. More than one <pyrepl> on a page won't work otherwise!")
if (!this.id) {
console.log(
'WARNING: <pyrepl> define with an id. <pyrepl> should always have an id. More than one <pyrepl> on a page won\'t work otherwise!',
);
}
if (!this.hasAttribute('exec-id')) {
this.setAttribute("exec-id", "1");
this.setAttribute('exec-id', '1');
}
if (!this.hasAttribute('root')) {
this.setAttribute("root", this.id);
this.setAttribute('root', this.id);
}
if (this.hasAttribute('output')) {
@@ -166,57 +181,55 @@ export class PyRepl extends BaseEvalElement {
if (!this.hasAttribute('output-mode')) {
this.setAttribute('output-mode', 'append');
}
}else{
if (this.hasAttribute('std-out')){
} else {
if (this.hasAttribute('std-out')) {
this.outputElement = document.getElementById(this.getAttribute('std-out'));
}else{
} else {
// In this case neither output or std-out have been provided so we need
// to create a new output div to output to
this.outputElement = document.createElement('div');
this.outputElement.classList.add("output");
this.outputElement.classList.add('output');
this.outputElement.hidden = true;
this.outputElement.id = this.id + "-" + this.getAttribute("exec-id");
this.outputElement.id = this.id + '-' + this.getAttribute('exec-id');
// add the output div id if there's not output pre-defined
mainDiv.appendChild(this.outputElement);
}
if (this.hasAttribute('std-err')){
if (this.hasAttribute('std-err')) {
this.errorElement = document.getElementById(this.getAttribute('std-err'));
}else{
} else {
this.errorElement = this.outputElement;
}
}
this.appendChild(mainDiv);
this.editor.focus();
console.log('connected');
}
addToOutput(s: string) {
this.outputElement.innerHTML += "<div>"+s+"</div>";
this.outputElement.innerHTML += '<div>' + s + '</div>';
this.outputElement.hidden = false;
}
postEvaluate(): void {
this.outputElement.hidden = false;
this.outputElement.style.display = 'block';
if (this.hasAttribute('auto-generate')) {
let nextExecId = parseInt(this.getAttribute('exec-id')) + 1;
const newPyRepl = document.createElement("py-repl");
const nextExecId = parseInt(this.getAttribute('exec-id')) + 1;
const newPyRepl = document.createElement('py-repl');
newPyRepl.setAttribute('root', this.getAttribute('root'));
newPyRepl.id = this.getAttribute('root') + "-" + nextExecId.toString();
newPyRepl.id = this.getAttribute('root') + '-' + nextExecId.toString();
newPyRepl.setAttribute('auto-generate', null);
if (this.hasAttribute('output')){
if (this.hasAttribute('output')) {
newPyRepl.setAttribute('output', this.getAttribute('output'));
}
if (this.hasAttribute('std-out')){
if (this.hasAttribute('std-out')) {
newPyRepl.setAttribute('std-out', this.getAttribute('std-out'));
}
if (this.hasAttribute('std-err')){
if (this.hasAttribute('std-err')) {
newPyRepl.setAttribute('std-err', this.getAttribute('std-err'));
}
@@ -226,14 +239,14 @@ export class PyRepl extends BaseEvalElement {
}
getSourceFromElement(): string {
const sourceStrings = [`output_manager.change("`+this.outputElement.id+`")`,
...this.editor.state.doc.toString().split("\n")];
return sourceStrings.join('\n')
const sourceStrings = [
`output_manager.change("` + this.outputElement.id + `")`,
...this.editor.state.doc.toString().split('\n'),
];
return sourceStrings.join('\n');
}
render(){
render() {
console.log('rendered');
}
}
}

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

@@ -1,12 +1,19 @@
import {EditorState, EditorView, basicSetup} from "@codemirror/basic-setup"
import { python } from "@codemirror/lang-python"
// @ts-ignore
import { EditorState } from '@codemirror/basic-setup';
import { python } from '@codemirror/lang-python';
import { StateCommand } from '@codemirror/state';
import { keymap, ViewUpdate } from "@codemirror/view";
import { defaultKeymap } from "@codemirror/commands";
import { oneDarkTheme } from "@codemirror/theme-one-dark";
import { keymap } from '@codemirror/view';
import { defaultKeymap } from '@codemirror/commands';
import { oneDarkTheme } from '@codemirror/theme-one-dark';
import { pyodideLoaded, loadedEnvironments, componentDetailsNavOpen, currentComponentDetails, mode, addToScriptsQueue, addInitializer, addPostInitializer } from '../stores';
import {
addInitializer,
addPostInitializer,
addToScriptsQueue,
componentDetailsNavOpen,
loadedEnvironments,
mode,
pyodideLoaded,
} from '../stores';
import { addClasses, htmlDecode } from '../utils';
import { BaseEvalElement } from './base';
@@ -32,19 +39,19 @@ mode.subscribe(value => {
currentMode = value;
});
function createCmdHandler(el){
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
const toggleCheckbox: StateCommand = ({ state, dispatch }) => {
return el.evaluate(state);
};
return toggleCheckbox;
}
// TODO: use type declaractions
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...
@@ -61,35 +68,31 @@ class Script {
async evaluate() {
console.log('evaluate');
let pyodide = await pyodideReadyPromise;
const pyodide = await pyodideReadyPromise;
// debugger
try {
// @ts-ignore
// let source = this.editor.state.doc.toString();
let output;
if (this.source.includes("asyncio")){
if (this.source.includes('asyncio')) {
output = await pyodide.runPythonAsync(this.source);
}else{
} else {
output = pyodide.runPython(this.source);
}
if (this.output){
if (this.output) {
// this.editorOut.innerHTML = s;
}
// if (output !== undefined){
// this.addToOutput(output);
// }
} catch (err) {
console.log("OOOPS, this happened: " + err);
console.log('OOOPS, this happened: ', err);
// this.addToOutput(err);
}
}
}
export class PyScript extends BaseEvalElement {
constructor() {
super();
@@ -98,16 +101,16 @@ export class PyScript extends BaseEvalElement {
}
connectedCallback() {
this.checkId()
this.checkId();
this.code = this.innerHTML;
this.innerHTML = '';
let startState = EditorState.create({
const startState = EditorState.create({
doc: this.code,
extensions: [
keymap.of([
...defaultKeymap,
{ key: "Ctrl-Enter", run: createCmdHandler(this) },
{ key: "Shift-Enter", run: createCmdHandler(this) }
{ key: 'Ctrl-Enter', run: createCmdHandler(this) },
{ key: 'Shift-Enter', run: createCmdHandler(this) },
]),
oneDarkTheme,
python(),
@@ -118,14 +121,13 @@ export class PyScript extends BaseEvalElement {
// }
// })
]
})
],
});
let mainDiv = document.createElement('div');
addClasses(mainDiv, ["parentBox", "flex", "flex-col", 'mx-8'])
const mainDiv = document.createElement('div');
addClasses(mainDiv, ['parentBox', 'flex', 'flex-col', 'mx-8']);
// add Editor to main PyScript div
if (this.hasAttribute('output')) {
this.errorElement = this.outputElement = document.getElementById(this.getAttribute('output'));
@@ -133,33 +135,33 @@ export class PyScript extends BaseEvalElement {
if (!this.hasAttribute('output-mode')) {
this.setAttribute('output-mode', 'append');
}
}else{
if (this.hasAttribute('std-out')){
} else {
if (this.hasAttribute('std-out')) {
this.outputElement = document.getElementById(this.getAttribute('std-out'));
}else{
} else {
// In this case neither output or std-out have been provided so we need
// to create a new output div to output to
// Let's check if we have an id first and create one if not
this.outputElement = document.createElement('div');
const exec_id = this.getAttribute("exec-id");
this.outputElement.id = this.id + (exec_id ? "-"+exec_id : "");
const exec_id = this.getAttribute('exec-id');
this.outputElement.id = this.id + (exec_id ? '-' + exec_id : '');
// add the output div id if there's not output pre-defined
mainDiv.appendChild(this.outputElement);
}
if (this.hasAttribute('std-err')){
if (this.hasAttribute('std-err')) {
this.outputElement = document.getElementById(this.getAttribute('std-err'));
}else{
} else {
this.errorElement = this.outputElement;
}
}
if (currentMode=="edit"){
if (currentMode == 'edit') {
// TODO: We need to build a plan for this
this.appendChild(mainDiv);
}else{
} else {
this.appendChild(mainDiv);
addToScriptsQueue(this);
}
@@ -175,30 +177,28 @@ export class PyScript extends BaseEvalElement {
for (const node of document.querySelectorAll("script[type='importmap']")) {
const importmap = (() => {
try {
return JSON.parse(node.textContent)
return JSON.parse(node.textContent);
} catch {
return null
return null;
}
})()
})();
if (importmap?.imports == null)
continue
if (importmap?.imports == null) continue;
for (const [name, url] of Object.entries(importmap.imports)) {
if (typeof name != "string" || typeof url != "string")
continue
if (typeof name != 'string' || typeof url != 'string') continue;
let exports: object
let exports: object;
try {
// XXX: pyodide doesn't like Module(), failing with
// "can't read 'name' of undefined" at import time
exports = {...await import(url)}
exports = { ...(await import(url)) };
} catch {
console.warn(`failed to fetch '${url}' for '${name}'`)
continue
console.warn(`failed to fetch '${url}' for '${name}'`);
continue;
}
pyodide.registerJsModule(name, exports)
pyodide.registerJsModule(name, exports);
}
}
}
@@ -206,18 +206,18 @@ export class PyScript extends BaseEvalElement {
getSourceFromElement(): string {
return htmlDecode(this.code);
}
}
}
/** Initialize all elements with py-onClick handlers attributes */
async function initHandlers() {
console.log('Collecting nodes...');
let pyodide = await pyodideReadyPromise;
let matches : NodeListOf<HTMLElement> = document.querySelectorAll('[pys-onClick]');
const pyodide = await pyodideReadyPromise;
let matches: NodeListOf<HTMLElement> = document.querySelectorAll('[pys-onClick]');
let output;
let source;
for (var el of matches) {
let handlerCode = el.getAttribute('pys-onClick');
source = `Element("${ el.id }").element.onclick = ${ handlerCode }`;
for (const el of matches) {
const handlerCode = el.getAttribute('pys-onClick');
source = `Element("${el.id}").element.onclick = ${handlerCode}`;
output = await pyodide.runPythonAsync(source);
// TODO: Should we actually map handlers in JS instaed of Python?
@@ -237,9 +237,9 @@ async function initHandlers() {
handlersCollected = true;
matches = document.querySelectorAll('[pys-onKeyDown]');
for (var el of matches) {
let handlerCode = el.getAttribute('pys-onKeyDown');
source = `Element("${ el.id }").element.addEventListener("keydown", ${ handlerCode })`;
for (const el of matches) {
const handlerCode = el.getAttribute('pys-onKeyDown');
source = `Element("${el.id}").element.addEventListener("keydown", ${handlerCode})`;
output = await pyodide.runPythonAsync(source);
}
}
@@ -247,16 +247,16 @@ async function initHandlers() {
/** Mount all elements with attribute py-mount into the Python namespace */
async function mountElements() {
console.log('Collecting nodes to be mounted into python namespace...');
let pyodide = await pyodideReadyPromise;
let matches : NodeListOf<HTMLElement> = document.querySelectorAll('[py-mount]');
const pyodide = await pyodideReadyPromise;
const matches: NodeListOf<HTMLElement> = document.querySelectorAll('[py-mount]');
let output;
let source = "";
for (var el of matches) {
let source = '';
for (const el of matches) {
let mountName = el.getAttribute('py-mount');
if (!mountName){
mountName = el.id.split("-").join("_");
if (!mountName) {
mountName = el.id.split('-').join('_');
}
source += `\n${ mountName } = Element("${ el.id }")`;
source += `\n${mountName} = Element("${el.id}")`;
}
await pyodide.runPythonAsync(source);
}

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

@@ -14,14 +14,14 @@ export class PyTitle extends BaseEvalElement {
connectedCallback() {
this.label = htmlDecode(this.innerHTML);
this.mount_name = this.id.split("-").join("_");
this.mount_name = this.id.split('-').join('_');
this.innerHTML = '';
let mainDiv = document.createElement('div');
let divContent = document.createElement('h1')
const mainDiv = document.createElement('div');
const divContent = document.createElement('h1');
addClasses(mainDiv, ["text-center", "w-full", "mb-8"]);
addClasses(divContent, ["text-3xl", "font-bold", "text-gray-800", "uppercase", "tracking-tight"]);
addClasses(mainDiv, ['text-center', 'w-full', 'mb-8']);
addClasses(divContent, ['text-3xl', 'font-bold', 'text-gray-800', 'uppercase', 'tracking-tight']);
divContent.innerHTML = this.label;
mainDiv.id = this.id;
@@ -30,5 +30,3 @@ export class PyTitle extends BaseEvalElement {
this.appendChild(mainDiv);
}
}

62
pyscriptjs/src/interpreter.ts
View File

@@ -1,11 +1,9 @@
import { getLastPath } from "./utils";
import { getLastPath } from './utils';
// @ts-nocheck
// @ts-ignore
let pyodideReadyPromise;
let pyodide;
let additional_definitions = `
const additional_definitions = `
from js import document, setInterval, console, setTimeout
import micropip
import time
@@ -413,19 +411,18 @@ class OutputManager:
pyscript = PyScript()
output_manager = OutputManager()
`
`;
let loadInterpreter = async function(): Promise<any> {
console.log("creating pyodide runtime");
/* @ts-ignore */
const loadInterpreter = async function (): Promise<any> {
console.log('creating pyodide runtime');
pyodide = await loadPyodide({
stdout: console.log,
stderr: console.log
stderr: console.log,
});
// now that we loaded, add additional convenience fuctions
console.log("loading micropip");
await pyodide.loadPackage("micropip");
console.log('loading micropip');
await pyodide.loadPackage('micropip');
console.log('loading pyscript module');
// await pyodide.runPythonAsync(`
// from pyodide.http import pyfetch
@@ -437,31 +434,36 @@ let loadInterpreter = async function(): Promise<any> {
// `)
// let pkg = pyodide.pyimport("pyscript");
console.log("creating additional definitions");
let output = pyodide.runPython(additional_definitions);
console.log("done setting up environment");
/* @ts-ignore */
console.log('creating additional definitions');
const output = pyodide.runPython(additional_definitions);
console.log('done setting up environment');
return pyodide;
}
};
let loadPackage = async function(package_name: string[] | string, runtime: any): Promise<any> {
let micropip = pyodide.globals.get('micropip');
await micropip.install(package_name)
micropip.destroy()
}
const loadPackage = async function (package_name: string[] | string, runtime: any): Promise<any> {
const micropip = pyodide.globals.get('micropip');
await micropip.install(package_name);
micropip.destroy();
};
let loadFromFile = async function(s: string, runtime: any): Promise<any> {
let filename = getLastPath(s);
await runtime.runPythonAsync(`
const loadFromFile = async function (s: string, runtime: any): Promise<any> {
const filename = getLastPath(s);
await runtime.runPythonAsync(
`
from pyodide.http import pyfetch
response = await pyfetch("`+s+`")
response = await pyfetch("` +
s +
`")
content = await response.bytes()
with open("`+filename+`", "wb") as f:
with open("` +
filename +
`", "wb") as f:
f.write(content)
`)
`,
);
runtime.pyimport(filename.replace(".py", ""));
}
runtime.pyimport(filename.replace('.py', ''));
};
export {loadInterpreter, pyodideReadyPromise, loadPackage, loadFromFile}
export { loadInterpreter, pyodideReadyPromise, loadPackage, loadFromFile };

35
pyscriptjs/src/main.ts
View File

@@ -1,23 +1,22 @@
import App from "./App.svelte";
import App from './App.svelte';
import { PyScript } from "./components/pyscript";
import { PyRepl } from "./components/pyrepl";
import { PyEnv } from "./components/pyenv";
import { PyBox } from "./components/pybox";
import { PyButton } from "./components/pybutton";
import { PyTitle } from "./components/pytitle";
import { PyInputBox } from "./components/pyinputbox";
import { PyWidget } from "./components/base";
let xPyScript = customElements.define('py-script', PyScript);
let xPyRepl = customElements.define('py-repl', PyRepl);
let xPyEnv = customElements.define('py-env', PyEnv);
let xPyBox = customElements.define('py-box', PyBox);
let xPyButton = customElements.define('py-button', PyButton);
let xPyTitle = customElements.define('py-title', PyTitle);
let xPyInputBox = customElements.define('py-inputbox', PyInputBox);
let xPyWidget = customElements.define('py-register-widget', PyWidget);
import { PyScript } from './components/pyscript';
import { PyRepl } from './components/pyrepl';
import { PyEnv } from './components/pyenv';
import { PyBox } from './components/pybox';
import { PyButton } from './components/pybutton';
import { PyTitle } from './components/pytitle';
import { PyInputBox } from './components/pyinputbox';
import { PyWidget } from './components/base';
const xPyScript = customElements.define('py-script', PyScript);
const xPyRepl = customElements.define('py-repl', PyRepl);
const xPyEnv = customElements.define('py-env', PyEnv);
const xPyBox = customElements.define('py-box', PyBox);
const xPyButton = customElements.define('py-button', PyButton);
const xPyTitle = customElements.define('py-title', PyTitle);
const xPyInputBox = customElements.define('py-inputbox', PyInputBox);
const xPyWidget = customElements.define('py-register-widget', PyWidget);
const app = new App({
target: document.body,

27
pyscriptjs/src/stores.ts
View File

@@ -1,12 +1,11 @@
import { writable } from 'svelte/store';
export const pyodideLoaded = writable({
loaded: false,
premise: null
premise: null,
});
export const loadedEnvironments = writable([{}])
export const loadedEnvironments = writable([{}]);
export const DEFAULT_MODE = 'play';
export const navBarOpen = writable(false);
@@ -14,10 +13,10 @@ export const componentsNavOpen = writable(false);
export const componentDetailsNavOpen = writable(false);
export const mainDiv = writable(null);
export const currentComponentDetails = writable([]);
export const mode = writable(DEFAULT_MODE)
export const scriptsQueue = writable([])
export const initializers = writable([])
export const postInitializers = writable([])
export const mode = writable(DEFAULT_MODE);
export const scriptsQueue = writable([]);
export const initializers = writable([]);
export const postInitializers = writable([]);
let scriptsQueue_ = [];
let initializers_ = [];
@@ -27,7 +26,7 @@ scriptsQueue.subscribe(value => {
scriptsQueue_ = value;
});
export const addToScriptsQueue = (script) => {
export const addToScriptsQueue = script => {
scriptsQueue.set([...scriptsQueue_, script]);
};
@@ -39,18 +38,18 @@ initializers.subscribe(value => {
initializers_ = value;
});
export const addInitializer = (initializer) => {
console.log("adding initializer", initializer);
export const addInitializer = initializer => {
console.log('adding initializer', initializer);
initializers.set([...initializers_, initializer]);
console.log("adding initializer", initializer);
console.log('adding initializer', initializer);
};
postInitializers.subscribe(value => {
postInitializers_ = value;
});
export const addPostInitializer = (initializer) => {
console.log("adding post initializer", initializer);
export const addPostInitializer = initializer => {
console.log('adding post initializer', initializer);
postInitializers.set([...postInitializers_, initializer]);
console.log("adding post initializer", initializer);
console.log('adding post initializer', initializer);
};

40
pyscriptjs/src/utils.ts
View File

@@ -1,44 +1,40 @@
function addClasses(element: HTMLElement, classes: Array<string>){
for (let entry of classes) {
function addClasses(element: HTMLElement, classes: Array<string>) {
for (const entry of classes) {
element.classList.add(entry);
}
}
const getLastPath = function (str) {
return str.split('\\').pop().split('/').pop();
}
};
function htmlDecode(input) {
var doc = new DOMParser().parseFromString(input, "text/html");
const doc = new DOMParser().parseFromString(input, 'text/html');
return ltrim(doc.documentElement.textContent);
}
function ltrim(code: string): string {
const lines = code.split("\n")
if (lines.length == 0)
return code
const lines = code.split('\n');
if (lines.length == 0) return code;
const lengths = lines
.filter((line) => line.trim().length != 0)
.map((line) => {
const [prefix] = line.match(/^\s*/)
return prefix.length
})
.filter(line => line.trim().length != 0)
.map(line => {
const [prefix] = line.match(/^\s*/);
return prefix.length;
});
const k = Math.min(...lengths)
const k = Math.min(...lengths);
if (k != 0)
return lines.map((line) => line.substring(k)).join("\n")
else
return code
if (k != 0) return lines.map(line => line.substring(k)).join('\n');
else return code;
}
function guidGenerator(): string {
var S4 = function(): string {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
const S4 = function (): string {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
};
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
return S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4();
}
export {addClasses, getLastPath, ltrim, htmlDecode, guidGenerator}
export { addClasses, getLastPath, ltrim, htmlDecode, guidGenerator };