experimental... probably broken

2022-05-01 19:47:48 +03:00 · 2022-02-24 11:14:28 -06:00
parent f65a6ec5c9
commit ce551ed6c3
5 changed files with 90 additions and 38 deletions
--- a/pyscriptjs/index.html
+++ b/pyscriptjs/index.html
@@ -15,8 +15,25 @@
  </head>

  <body>
+    <div class="header">
+
+      <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>
 </html>
--- 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",
--- 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"
  }
 }
--- 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 { 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,29 +53,41 @@ class PyScript extends HTMLElement {


  function create_menu (){
+    let leftBar = document.createElement("div");
        
-      var div = document.createElement("div");
-
-      div.innerHTML = `
+    // 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>
+    <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>
+        <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(div);
+    document.body.appendChild(leftBar);
+
    
      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
            })

@@ -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);
--- 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"),
  },