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