mirror of
https://github.com/pyscript/pyscript.git
synced 2022-05-01 19:47:48 +03:00
commit typescript project skeleton
This commit is contained in:
Fabio Pliger
23
pyscriptjs/index.html
Normal file
23
pyscriptjs/index.html
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<!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>
|
||||||
|
<script src="pyscript.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>
|
||||||
|
<py-script>
|
||||||
|
sum([1, 2, 3, 4, 5])
|
||||||
|
</py-script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
8668
pyscriptjs/package-lock.json
generated
Normal file
8668
pyscriptjs/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
37
pyscriptjs/package.json
Normal file
37
pyscriptjs/package.json
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
{
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
130
pyscriptjs/src/index.ts
Normal file
130
pyscriptjs/src/index.ts
Normal file
@@ -0,0 +1,130 @@
|
|||||||
|
let message: string = 'Hello World';
|
||||||
|
console.log(message);
|
||||||
|
|
||||||
|
class PyScript extends HTMLElement {
|
||||||
|
shadow: ShadowRoot;
|
||||||
|
wrapper: HTMLElement;
|
||||||
|
editor: HTMLElement;
|
||||||
|
code: string;
|
||||||
|
cm: any;
|
||||||
|
btnEdit: HTMLElement;
|
||||||
|
btnRun: HTMLElement;
|
||||||
|
editorOut: HTMLTextAreaElement;
|
||||||
|
|
||||||
|
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.editor = document.createElement('div');
|
||||||
|
|
||||||
|
this.shadow.appendChild(this.wrapper);
|
||||||
|
this.shadow.appendChild(this.editor);
|
||||||
|
this.code = this.wrapper.innerHTML;
|
||||||
|
}
|
||||||
|
connectedCallback() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
render(){
|
||||||
|
// debugger;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('py-script', PyScript);
|
||||||
|
|
||||||
|
|
||||||
|
function create_menu (){
|
||||||
|
|
||||||
|
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) => {
|
||||||
|
var code = elem.innerHTML;
|
||||||
|
elem.innerHTML = "";
|
||||||
|
elem.code = code;
|
||||||
|
elem.cm = CodeMirror(elem, {
|
||||||
|
lineNumbers: true,
|
||||||
|
tabSize: 2,
|
||||||
|
value: code,
|
||||||
|
mode: 'python'
|
||||||
|
});
|
||||||
|
|
||||||
|
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() {
|
||||||
|
var code = elem.cm.getValue();
|
||||||
|
let pyodide = await pyodideReadyPromise;
|
||||||
|
try {
|
||||||
|
let output = pyodide.runPython(code);
|
||||||
|
addToOutput(output);
|
||||||
|
} catch (err) {
|
||||||
|
addToOutput(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onload= create_menu;
|
||||||
|
|
||||||
|
async function main() {
|
||||||
|
let pyodide = await loadPyodide({
|
||||||
|
indexURL: "https://cdn.jsdelivr.net/pyodide/v0.19.0/full/",
|
||||||
|
});
|
||||||
|
|
||||||
|
return pyodide;
|
||||||
|
}
|
||||||
|
let pyodideReadyPromise = main();
|
||||||
|
|
||||||
|
async function evaluatePython() {
|
||||||
|
let pyodide = await pyodideReadyPromise;
|
||||||
|
try {
|
||||||
|
let output = pyodide.runPython(code.value);
|
||||||
|
addToOutput(output);
|
||||||
|
} catch (err) {
|
||||||
|
addToOutput(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
12
pyscriptjs/tsconfig.json
Normal file
12
pyscriptjs/tsconfig.json
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"module": "es6",
|
||||||
|
"target": "es5",
|
||||||
|
"allowJs": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"outDir": "build",
|
||||||
|
},
|
||||||
|
"files": ["src/index.ts"]
|
||||||
|
}
|
||||||
56
pyscriptjs/webpack.config.js
Normal file
56
pyscriptjs/webpack.config.js
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
// 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: "./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