diff --git a/pyscriptjs/index.html b/pyscriptjs/index.html index 50d6f13..8a5ae0c 100644 --- a/pyscriptjs/index.html +++ b/pyscriptjs/index.html @@ -15,8 +15,25 @@ - -sum([1, 2, 3, 4, 5]) - +
+ + +
+ +
+ + sum([1, 2, 3, 4, 5]) + +
diff --git a/pyscriptjs/package-lock.json b/pyscriptjs/package-lock.json index 2814ebd..3e92be6 100644 --- a/pyscriptjs/package-lock.json +++ b/pyscriptjs/package-lock.json @@ -1464,6 +1464,16 @@ "resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.19.6.tgz", "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": { "version": "0.19.15", "resolved": "https://registry.npmjs.org/@codemirror/tooltip/-/tooltip-0.19.15.tgz", @@ -2020,6 +2030,11 @@ "@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": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.1.tgz", diff --git a/pyscriptjs/package.json b/pyscriptjs/package.json index 04727df..221dd24 100644 --- a/pyscriptjs/package.json +++ b/pyscriptjs/package.json @@ -38,6 +38,8 @@ "@codemirror/basic-setup": "^0.19.1", "@codemirror/lang-javascript": "^0.19.7", "@codemirror/lang-python": "^0.19.4", + "@codemirror/theme-one-dark": "^0.19.1", + "@webcomponents/custom-elements": "^1.5.0", "codemirror": "^5.65.2" } } diff --git a/pyscriptjs/src/index.ts b/pyscriptjs/src/index.ts index ed69134..d6f755a 100644 --- a/pyscriptjs/src/index.ts +++ b/pyscriptjs/src/index.ts @@ -1,25 +1,29 @@ -import {EditorState} from "@codemirror/state"; -import {EditorView, keymap} from "@codemirror/view"; -import {defaultKeymap} from "@codemirror/commands"; -import {loadInterpreter} from "./interpreter"; +// import { EditorState } from "@codemirror/state"; +import {EditorState, EditorView , basicSetup} from "@codemirror/basic-setup" +// import {gutter, GutterMarker} from "@codemirror/gutter" + +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 {javascript} from "@codemirror/lang-javascript" -let startState = EditorState.create({ - doc: "Hello World", - extensions: [keymap.of(defaultKeymap)] -}) - class PyScript extends HTMLElement { shadow: ShadowRoot; wrapper: HTMLElement; - editor: HTMLElement; + editor: EditorView; + editorNode: HTMLElement; code: string; cm: any; btnEdit: HTMLElement; btnRun: HTMLElement; editorOut: HTMLTextAreaElement; + editorState: EditorState; constructor() { super(); @@ -30,10 +34,10 @@ class PyScript extends HTMLElement { this.wrapper = document.createElement('slot'); // 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.editor); + this.shadow.appendChild(this.editorNode); this.code = this.wrapper.innerHTML; } connectedCallback() { @@ -49,31 +53,43 @@ class PyScript extends HTMLElement { function create_menu (){ + let leftBar = document.createElement("div"); + + // example: https://codepen.io/Markshall/pen/wQyWqq + leftBar.innerHTML = ` +
+ + + +
+ Script + Panel + Button + TextArea +
+
+ `; + document.body.appendChild(leftBar); + - var div = document.createElement("div"); - - div.innerHTML = ` -
- - -
- - - - -
-
- `; - document.body.appendChild(div); - document.querySelectorAll('py-script').forEach((elem: PyScript, i) => { let code = elem.innerHTML; elem.innerHTML = ""; elem.code = code; + + let startState = EditorState.create({ + doc: code, + extensions: [ + keymap.of(defaultKeymap), + oneDarkTheme, + // python() + ] + }) + let view = new EditorView({ - state: startState, - parent: elem -}) + state: startState, + + parent: elem + }) // elem.cm = CodeMirror(elem, { // lineNumbers: true, @@ -81,7 +97,7 @@ class PyScript extends HTMLElement { // value: code, // mode: 'python' // }); - + elem.editor = view; elem.btnRun = document.createElement('button'); elem.btnRun.innerHTML = "run"; elem.btnRun.classList.add("run"); @@ -107,10 +123,9 @@ class PyScript extends HTMLElement { elem.btnRun.onclick = evaluatePython; async function evaluatePython() { - var code = elem.cm.getValue(); let pyodide = await pyodideReadyPromise; try { - let output = pyodide.runPython(code); + let output = pyodide.runPython(elem.editor.state.doc.toString()); addToOutput(output); } catch (err) { addToOutput(err); diff --git a/pyscriptjs/webpack.config.js b/pyscriptjs/webpack.config.js index a650bdf..a863093 100644 --- a/pyscriptjs/webpack.config.js +++ b/pyscriptjs/webpack.config.js @@ -7,7 +7,10 @@ const WorkboxWebpackPlugin = require("workbox-webpack-plugin"); const isProduction = process.env.NODE_ENV == "production"; const config = { - entry: "./src/index.ts", + entry: [ + "@webcomponents/custom-elements/src/native-shim", + "./src/index.ts" + ], output: { path: path.resolve(__dirname, "build"), },