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

experimental... probably broken

Browse Source
This commit is contained in:
Fabio Pliger
2022-02-24 11:14:28 -06:00
parent f65a6ec5c9
commit ce551ed6c3
5 changed files with 90 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
pyscriptjs/index.html
View File

@@ -15,8 +15,25 @@
</head> </head>
<body> <body>
<py-script> <div class="header">
sum([1, 2, 3, 4, 5])
</py-script> <nav>
<h1>PyScript</h1>
<ul>
<li><a href="#" class="active">Edit Mode</a></li>
<!-- <li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Contact</a></li> -->
</ul>
</nav>
</div>
<main>
<py-script>
sum([1, 2, 3, 4, 5])
</py-script>
</main>
</body> </body>
</html> </html>

15
pyscriptjs/package-lock.json generated
View File

@@ -1464,6 +1464,16 @@
"resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.19.6.tgz", "resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.19.6.tgz",
"integrity": "sha512-T9jnREMIygx+TPC1bOuepz18maGq/92q2a+n4qTqObKwvNMg+8cMTslb8yxeEDEq7S3kpgGWxgO1UWbQRij0dA==" "integrity": "sha512-T9jnREMIygx+TPC1bOuepz18maGq/92q2a+n4qTqObKwvNMg+8cMTslb8yxeEDEq7S3kpgGWxgO1UWbQRij0dA=="
}, },
"@codemirror/theme-one-dark": {
"version": "0.19.1",
"resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-0.19.1.tgz",
"integrity": "sha512-8gc4c2k2o/EhyHoWkghCxp5vyDT96JaFGtRy35PHwIom0LZdx7aU4AbDUnITvwiFB+0+i54VO+WQjBqgTyJvqg==",
"requires": {
"@codemirror/highlight": "^0.19.0",
"@codemirror/state": "^0.19.0",
"@codemirror/view": "^0.19.0"
}
},
"@codemirror/tooltip": { "@codemirror/tooltip": {
"version": "0.19.15", "version": "0.19.15",
"resolved": "https://registry.npmjs.org/@codemirror/tooltip/-/tooltip-0.19.15.tgz", "resolved": "https://registry.npmjs.org/@codemirror/tooltip/-/tooltip-0.19.15.tgz",
@@ -2020,6 +2030,11 @@
"@xtuc/long": "4.2.2" "@xtuc/long": "4.2.2"
} }
}, },
"@webcomponents/custom-elements": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@webcomponents/custom-elements/-/custom-elements-1.5.0.tgz",
"integrity": "sha512-c+7jPQCs9h/BYVcZ2Kna/3tsl3A/9EyXfvWjp5RiTDm1OpTcbZaCa1z4RNcTe/hUtXaqn64JjNW1yrWT+rZ8gg=="
},
"@webpack-cli/configtest": { "@webpack-cli/configtest": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.1.tgz", "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.1.tgz",

2
pyscriptjs/package.json
View File

@@ -38,6 +38,8 @@
"@codemirror/basic-setup": "^0.19.1", "@codemirror/basic-setup": "^0.19.1",
"@codemirror/lang-javascript": "^0.19.7", "@codemirror/lang-javascript": "^0.19.7",
"@codemirror/lang-python": "^0.19.4", "@codemirror/lang-python": "^0.19.4",
"@codemirror/theme-one-dark": "^0.19.1",
"@webcomponents/custom-elements": "^1.5.0",
"codemirror": "^5.65.2" "codemirror": "^5.65.2"
} }
} }

83
pyscriptjs/src/index.ts
View File

@@ -1,25 +1,29 @@
import {EditorState} from "@codemirror/state"; // import { EditorState } from "@codemirror/state";
import {EditorView, keymap} from "@codemirror/view"; import {EditorState, EditorView , basicSetup} from "@codemirror/basic-setup"
import {defaultKeymap} from "@codemirror/commands"; // import {gutter, GutterMarker} from "@codemirror/gutter"
import {loadInterpreter} from "./interpreter";
import { python } from "@codemirror/lang-python"
import { keymap } from "@codemirror/view";
import { defaultKeymap } from "@codemirror/commands";
import { oneDarkTheme } from "@codemirror/theme-one-dark";
// @codemirror/lang-python
import { loadInterpreter } from "./interpreter";
// import {EditorState, EditorView, basicSetup} from "@codemirror/basic-setup" // import {EditorState, EditorView, basicSetup} from "@codemirror/basic-setup"
// import {javascript} from "@codemirror/lang-javascript" // import {javascript} from "@codemirror/lang-javascript"
let startState = EditorState.create({
doc: "Hello World",
extensions: [keymap.of(defaultKeymap)]
})
class PyScript extends HTMLElement { class PyScript extends HTMLElement {
shadow: ShadowRoot; shadow: ShadowRoot;
wrapper: HTMLElement; wrapper: HTMLElement;
editor: HTMLElement; editor: EditorView;
editorNode: HTMLElement;
code: string; code: string;
cm: any; cm: any;
btnEdit: HTMLElement; btnEdit: HTMLElement;
btnRun: HTMLElement; btnRun: HTMLElement;
editorOut: HTMLTextAreaElement; editorOut: HTMLTextAreaElement;
editorState: EditorState;
constructor() { constructor() {
super(); super();
@@ -30,10 +34,10 @@ class PyScript extends HTMLElement {
this.wrapper = document.createElement('slot'); this.wrapper = document.createElement('slot');
// add an extra div where we can attach the codemirror editor // add an extra div where we can attach the codemirror editor
this.editor = document.createElement('div'); this.editorNode = document.createElement('div');
this.shadow.appendChild(this.wrapper); this.shadow.appendChild(this.wrapper);
this.shadow.appendChild(this.editor); this.shadow.appendChild(this.editorNode);
this.code = this.wrapper.innerHTML; this.code = this.wrapper.innerHTML;
} }
connectedCallback() { connectedCallback() {
@@ -49,31 +53,43 @@ class PyScript extends HTMLElement {
function create_menu (){ function create_menu (){
let leftBar = document.createElement("div");
// example: https://codepen.io/Markshall/pen/wQyWqq
leftBar.innerHTML = `
<div class="adminActions">
<input type="checkbox" name="adminToggle" class="adminToggle" />
<a class="adminButton" href="#!"><i class="fa fa-cog">+</i></a>
<div class="adminButtons">
<a href="#" title="Add Company"><i class="fa fa-building">Script</i></a>
<a href="#" title="Edit Company"><i class="fa fa-pen">Panel</i></a>
<a href="#" title="Add User"><i class="fa fa-user-plus">Button</i></a>
<a href="#" title="Edit User"><i class="fa fa-user-edit">TextArea</i></a>
</div>
</div>
`;
document.body.appendChild(leftBar);
var div = document.createElement("div");
div.innerHTML = `
<div class="adminActions">
<input type="checkbox" name="adminToggle" class="adminToggle" />
<a class="adminButton" href="#!"><i class="fa fa-cog"></i></a>
<div class="adminButtons">
<a href="#" title="Add Company"><i class="fa fa-building"></i></a>
<a href="#" title="Edit Company"><i class="fa fa-pen"></i></a>
<a href="#" title="Add User"><i class="fa fa-user-plus"></i></a>
<a href="#" title="Edit User"><i class="fa fa-user-edit"></i></a>
</div>
</div>
`;
document.body.appendChild(div);
document.querySelectorAll('py-script').forEach((elem: PyScript, i) => { document.querySelectorAll('py-script').forEach((elem: PyScript, i) => {
let code = elem.innerHTML; let code = elem.innerHTML;
elem.innerHTML = ""; elem.innerHTML = "";
elem.code = code; elem.code = code;
let startState = EditorState.create({
doc: code,
extensions: [
keymap.of(defaultKeymap),
oneDarkTheme,
// python()
]
})
let view = new EditorView({ let view = new EditorView({
state: startState, state: startState,
parent: elem
}) parent: elem
})
// elem.cm = CodeMirror(elem, { // elem.cm = CodeMirror(elem, {
// lineNumbers: true, // lineNumbers: true,
@@ -81,7 +97,7 @@ class PyScript extends HTMLElement {
// value: code, // value: code,
// mode: 'python' // mode: 'python'
// }); // });
elem.editor = view;
elem.btnRun = document.createElement('button'); elem.btnRun = document.createElement('button');
elem.btnRun.innerHTML = "run"; elem.btnRun.innerHTML = "run";
elem.btnRun.classList.add("run"); elem.btnRun.classList.add("run");
@@ -107,10 +123,9 @@ class PyScript extends HTMLElement {
elem.btnRun.onclick = evaluatePython; elem.btnRun.onclick = evaluatePython;
async function evaluatePython() { async function evaluatePython() {
var code = elem.cm.getValue();
let pyodide = await pyodideReadyPromise; let pyodide = await pyodideReadyPromise;
try { try {
let output = pyodide.runPython(code); let output = pyodide.runPython(elem.editor.state.doc.toString());
addToOutput(output); addToOutput(output);
} catch (err) { } catch (err) {
addToOutput(err); addToOutput(err);

5
pyscriptjs/webpack.config.js
View File

@@ -7,7 +7,10 @@ const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
const isProduction = process.env.NODE_ENV == "production"; const isProduction = process.env.NODE_ENV == "production";
const config = { const config = {
entry: "./src/index.ts", entry: [
"@webcomponents/custom-elements/src/native-shim",
"./src/index.ts"
],
output: { output: {
path: path.resolve(__dirname, "build"), path: path.resolve(__dirname, "build"),
}, },