mirror of
https://github.com/pyscript/pyscript.git
synced 2022-05-01 19:47:48 +03:00
remove first js try
This commit is contained in:
Fabio Pliger
@@ -1,39 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> -->
|
||||
<script src="https://cdn.jsdelivr.net/pyodide/v0.19.0/full/pyodide.js"></script>
|
||||
<link rel="stylesheet" media="all" href="pyscript1.css">
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css">
|
||||
</link>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js">
|
||||
</script>
|
||||
</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>
|
||||
8981
pyscriptjs/package-lock.json
generated
8981
pyscriptjs/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,45 +0,0 @@
|
||||
{
|
||||
"name": "pyscriptjs",
|
||||
"version": "0.0.1",
|
||||
"description": "My webpack project",
|
||||
"scripts": {
|
||||
"test": "test",
|
||||
"build": "webpack --mode=production --node-env=production",
|
||||
"build:dev": "webpack --mode=development",
|
||||
"build:prod": "webpack --mode=production --node-env=production",
|
||||
"watch": "webpack --watch",
|
||||
"serve": "webpack serve"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/anaconda/pyscript.git"
|
||||
},
|
||||
"keywords": [
|
||||
"python"
|
||||
],
|
||||
"author": "Anaconda",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/anaconda/pyscript/issues"
|
||||
},
|
||||
"homepage": "https://github.com/anaconda/pyscript#readme",
|
||||
"devDependencies": {
|
||||
"@webpack-cli/generators": "^2.4.2",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"prettier": "^2.5.1",
|
||||
"ts-loader": "^9.2.6",
|
||||
"typescript": "^4.5.5",
|
||||
"webpack": "^5.69.1",
|
||||
"webpack-cli": "^4.9.2",
|
||||
"webpack-dev-server": "^4.7.4",
|
||||
"workbox-webpack-plugin": "^6.4.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@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"
|
||||
}
|
||||
}
|
||||
@@ -1,151 +0,0 @@
|
||||
// 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"
|
||||
|
||||
|
||||
class PyScript extends HTMLElement {
|
||||
shadow: ShadowRoot;
|
||||
wrapper: HTMLElement;
|
||||
editor: EditorView;
|
||||
editorNode: HTMLElement;
|
||||
code: string;
|
||||
cm: any;
|
||||
btnEdit: HTMLElement;
|
||||
btnRun: HTMLElement;
|
||||
editorOut: HTMLTextAreaElement;
|
||||
editorState: EditorState;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
// attach shadow so we can preserve the element original innerHtml content
|
||||
this.shadow = this.attachShadow({ mode: 'open'});
|
||||
|
||||
this.wrapper = document.createElement('slot');
|
||||
|
||||
// add an extra div where we can attach the codemirror editor
|
||||
this.editorNode = document.createElement('div');
|
||||
|
||||
this.shadow.appendChild(this.wrapper);
|
||||
this.shadow.appendChild(this.editorNode);
|
||||
this.code = this.wrapper.innerHTML;
|
||||
}
|
||||
connectedCallback() {
|
||||
|
||||
}
|
||||
|
||||
render(){
|
||||
// debugger;
|
||||
}
|
||||
}
|
||||
|
||||
let xPyScript = customElements.define('py-script', PyScript);
|
||||
|
||||
|
||||
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);
|
||||
|
||||
|
||||
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
|
||||
})
|
||||
|
||||
// elem.cm = CodeMirror(elem, {
|
||||
// lineNumbers: true,
|
||||
// tabSize: 2,
|
||||
// value: code,
|
||||
// mode: 'python'
|
||||
// });
|
||||
elem.editor = view;
|
||||
elem.btnRun = document.createElement('button');
|
||||
elem.btnRun.innerHTML = "run";
|
||||
elem.btnRun.classList.add("run");
|
||||
|
||||
elem.appendChild(elem.btnRun);
|
||||
|
||||
elem.btnEdit = document.createElement('button');
|
||||
elem.btnEdit.innerHTML = "edit";
|
||||
elem.btnEdit.classList.add("edit");
|
||||
elem.appendChild(elem.btnEdit);
|
||||
|
||||
var eDiv = document.createElement('div');
|
||||
|
||||
elem.editorOut = document.createElement('textarea');
|
||||
elem.editorOut.classList.add("output");
|
||||
elem.editorOut.disabled = true;
|
||||
eDiv.appendChild(elem.editorOut);
|
||||
elem.appendChild(eDiv);
|
||||
|
||||
function addToOutput(s: string) {
|
||||
elem.editorOut.value += ">>>" + s + "\n";
|
||||
}
|
||||
elem.btnRun.onclick = evaluatePython;
|
||||
|
||||
async function evaluatePython() {
|
||||
let pyodide = await pyodideReadyPromise;
|
||||
try {
|
||||
let output = pyodide.runPython(elem.editor.state.doc.toString());
|
||||
addToOutput(output);
|
||||
} catch (err) {
|
||||
addToOutput(err);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
window.onload= create_menu;
|
||||
|
||||
// async function main() {
|
||||
// let pyodide = await loadPyodide({ /* @ts-ignore */
|
||||
// indexURL: "https://cdn.jsdelivr.net/pyodide/v0.19.0/full/",
|
||||
// }); /* @ts-ignore */
|
||||
|
||||
// return pyodide;
|
||||
// }
|
||||
let pyodideReadyPromise = loadInterpreter();
|
||||
|
||||
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
// @ts-nocheck
|
||||
// @ts-ignore
|
||||
|
||||
let loadInterpreter = async function(): any {
|
||||
/* @ts-ignore */
|
||||
let pyodide = await loadPyodide({
|
||||
indexURL: "https://cdn.jsdelivr.net/pyodide/v0.19.0/full/",
|
||||
});
|
||||
/* @ts-ignore */
|
||||
return pyodide;
|
||||
}
|
||||
|
||||
export {loadInterpreter}
|
||||
@@ -1,13 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"moduleResolution": "node",
|
||||
"noImplicitAny": true,
|
||||
"module": "es2020",
|
||||
"target": "es5",
|
||||
"allowJs": true,
|
||||
"sourceMap": true,
|
||||
"outDir": "build",
|
||||
},
|
||||
"files": ["src/index.ts"]
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
// Generated using webpack-cli https://github.com/webpack/webpack-cli
|
||||
|
||||
const path = require("path");
|
||||
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
|
||||
|
||||
const isProduction = process.env.NODE_ENV == "production";
|
||||
|
||||
const config = {
|
||||
entry: [
|
||||
"@webcomponents/custom-elements/src/native-shim",
|
||||
"./src/index.ts"
|
||||
],
|
||||
output: {
|
||||
path: path.resolve(__dirname, "build"),
|
||||
},
|
||||
devServer: {
|
||||
open: true,
|
||||
host: "localhost",
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: "index.html",
|
||||
}),
|
||||
|
||||
// Add your plugins here
|
||||
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(ts|tsx)$/i,
|
||||
loader: "ts-loader",
|
||||
exclude: ["/node_modules/"],
|
||||
},
|
||||
{
|
||||
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
|
||||
type: "asset",
|
||||
},
|
||||
|
||||
// Add your rules for custom modules here
|
||||
// Learn more about loaders from https://webpack.js.org/loaders/
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
extensions: [".tsx", ".ts", ".js"],
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = () => {
|
||||
if (isProduction) {
|
||||
config.mode = "production";
|
||||
|
||||
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
|
||||
} else {
|
||||
config.mode = "development";
|
||||
}
|
||||
return config;
|
||||
};
|
||||
Reference in New Issue
Block a user