jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2025-12-19 18:27:29 -05:00
Code Issues Projects Releases Wiki Activity

move py-config between body tags (#827)

Browse Source
This commit is contained in:
Madhur Tandon
2022-10-05 01:13:34 +05:30
committed by GitHub
parent 1e05ff7c95
commit 4dd1dc28b1
22 changed files with 178 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/_static/examples/what-is-pyscript.html vendored
View File

@@ -16,12 +16,6 @@
}
}
</style>
<py-config>
packages = [
"numpy",
"matplotlib"
]
</py-config>
</head>
<body>
@@ -31,6 +25,14 @@
<p style='font-family: monospace sans-serif;'><big><big><big><big>&#10096;py&#10097;</big></big></big></big></p>
</div>
</div>
<py-config>
packages = [
"numpy",
"matplotlib"
]
</py-config>
<py-script>
import matplotlib.pyplot as plt
import numpy as np

20
docs/tutorials/getting-started.md
View File

@@ -147,7 +147,7 @@ the `<py-script>` tag to write to.
Use the `<py-config>` tag to set and configure general metadata along with declaring dependencies for your PyScript application. The configuration has to be set in either TOML or JSON format. If you are unfamiliar with JSON, consider reading [freecodecamp's JSON for beginners](https://www.freecodecamp.org/news/what-is-json-a-json-file-example/) guide for more information. And for TOML, consider reading about it [here](https://learnxinyminutes.com/docs/toml/).
The ideal place to use `<py-config>` in between the `<head>...</head>` tags.
The ideal place to use `<py-config>` in between the `<body>...</body>` tags.
The `<py-config>` tag can be used as follows:
@@ -269,16 +269,16 @@ as a shortcut, which takes the expression on the last line of the script and run
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config type="json">
{
"packages": ["numpy", "matplotlib"]
}
</py-config>
</head>
<body>
<h1>Let's plot random numbers</h1>
<div id="plot"></div>
<py-config type="json">
{
"packages": ["numpy", "matplotlib"]
}
</py-config>
<py-script output="plot">
import matplotlib.pyplot as plt
import numpy as np
@@ -315,15 +315,15 @@ In the HTML tag `<py-config>`, paths to local modules are provided in the
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config type="toml">
packages = ["numpy", "matplotlib"]
paths = ["./data.py"]
</py-config>
</head>
<body>
<h1>Let's plot random numbers</h1>
<div id="plot"></div>
<py-config type="toml">
packages = ["numpy", "matplotlib"]
paths = ["./data.py"]
</py-config>
<py-script output="plot">
import matplotlib.pyplot as plt
from data import make_x_and_y

14
examples/altair.html
View File

@@ -5,16 +5,16 @@
<link rel="icon" type="image/x-icon" href="./favicon.png">
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
packages = [
"altair",
"pandas",
"vega_datasets"
]
</py-config>
</head>
<body>
<div id="altair" style="width: 100%; height: 100%"></div>
<py-config>
packages = [
"altair",
"pandas",
"vega_datasets"
]
</py-config>
<py-script output="altair">
import altair as alt
from vega_datasets import data

4
examples/antigravity.html
View File

@@ -5,13 +5,13 @@
<link rel="icon" type="image/x-icon" href="./favicon.png">
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<py-config>
paths = [
"./antigravity.py"
]
</py-config>
</head>
<body>
<b>Based on xkcd: antigravity https://xkcd.com/353/.</b>
<py-script>
import antigravity

13
examples/bokeh.html
View File

@@ -14,17 +14,18 @@
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
packages = [
"bokeh",
"numpy"
]
</py-config>
</head>
<body>
<h1>Bokeh Example</h1>
<div id="myplot"></div>
<py-config>
packages = [
"bokeh",
"numpy"
]
</py-config>
<py-script id="main">
import json
import pyodide

13
examples/bokeh_interactive.html
View File

@@ -14,17 +14,18 @@
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
packages = [
"bokeh",
"numpy"
]
</py-config>
</head>
<body>
<h1>Bokeh Example</h1>
<div id="myplot"></div>
<py-config>
packages = [
"bokeh",
"numpy"
]
</py-config>
<py-script id="main">
import asyncio
import json

14
examples/folium.html
View File

@@ -5,15 +5,17 @@
<link rel="icon" type="image/x-icon" href="./favicon.png">
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
packages = [
"folium",
"pandas"
]
</py-config>
</head>
<body>
<div id="folium" style="width: 100%; height: 100%"></div>
<py-config>
packages = [
"folium",
"pandas"
]
</py-config>
<py-script output="folium">
import folium
import json

12
examples/matplotlib.html
View File

@@ -5,14 +5,16 @@
<link rel="icon" type="image/x-icon" href="./favicon.png">
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
packages = [
"matplotlib"
]
</py-config>
</head>
<body>
<div id="mpl"></div>
<py-config>
packages = [
"matplotlib"
]
</py-config>
<py-script output="mpl">
import matplotlib.pyplot as plt
import matplotlib.tri as tri

16
examples/message_passing.html
View File

@@ -4,16 +4,18 @@
<link rel="icon" type="image/x-icon" href="./favicon.png">
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
packages = [
"numpy",
"networkx",
"matplotlib"
]
</py-config>
</head>
<body>
<py-config>
packages = [
"numpy",
"networkx",
"matplotlib"
]
</py-config>
<py-script>
import numpy as np
import networkx as nx

17
examples/micrograd_ai.html
View File

@@ -9,19 +9,20 @@
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
packages = [
"micrograd",
"numpy",
"matplotlib"
]
</py-config>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px">
<h1>Micrograd - A tiny Autograd engine (with a bite! :))</h1><br>
<py-config>
packages = [
"micrograd",
"numpy",
"matplotlib"
]
</py-config>
<div>
<p>
<a href="https://github.com/karpathy/micrograd">Micrograd</a> is a tiny Autograd engine created

26
examples/numpy_canvas_fractals.html
View File

@@ -28,19 +28,6 @@
}
</style>
<py-config type="json">
{
"packages": [
"numpy",
"sympy"
],
"paths": [
"./palettes.py",
"./fractals.py"
]
}
</py-config>
</head>
<body>
<b>
@@ -91,6 +78,19 @@
</div>
</div>
<py-config type="json">
{
"packages": [
"numpy",
"sympy"
],
"paths": [
"./palettes.py",
"./fractals.py"
]
}
</py-config>
<py-script>
from pyodide.ffi import to_js, create_proxy

10
examples/panel.html
View File

@@ -9,6 +9,11 @@
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/panel@0.13.1/dist/panel.min.js"></script>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<h1>Panel Example</h1>
<div id="simple_app"></div>
<py-config>
packages = [
"bokeh",
@@ -16,10 +21,7 @@
"panel==0.13.1"
]
</py-config>
</head>
<body>
<h1>Panel Example</h1>
<div id="simple_app"></div>
<py-script>
import panel as pn

17
examples/panel_deckgl.html
View File

@@ -40,14 +40,6 @@
</style>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
packages = [
"bokeh",
"numpy",
"pandas",
"panel==0.13.1"
]
</py-config>
</head>
<body>
@@ -77,6 +69,15 @@
</div>
</div>
<py-config>
packages = [
"bokeh",
"numpy",
"pandas",
"panel==0.13.1"
]
</py-config>
<py-script>
import panel as pn
import pandas as pd

19
examples/panel_kmeans.html
View File

@@ -41,15 +41,6 @@
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
packages = [
"altair",
"numpy",
"pandas",
"scikit-learn",
"panel==0.13.1"
]
</py-config>
</head>
<body>
@@ -82,6 +73,16 @@
</div>
</div>
<py-config>
packages = [
"altair",
"numpy",
"pandas",
"scikit-learn",
"panel==0.13.1"
]
</py-config>
<py-script>
import altair as alt
import panel as pn

17
examples/panel_stream.html
View File

@@ -32,14 +32,6 @@
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
packages = [
"bokeh",
"numpy",
"pandas",
"panel==0.13.1"
]
</py-config>
</head>
<body>
@@ -67,6 +59,15 @@
</div>
</div>
<py-config>
packages = [
"bokeh",
"numpy",
"pandas",
"panel==0.13.1"
]
</py-config>
<py-script>
import panel as pn
import numpy as np

10
examples/repl.html
View File

@@ -9,17 +9,17 @@
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
paths = [
"./antigravity.py"
]
</py-config>
</head>
<body>
<h1><b>pyscript REPL</b></h1>
Tip: press Shift-ENTER to evaluate a cell
<br>
<py-config>
paths = [
"./antigravity.py"
]
</py-config>
<div>
<py-repl id="my-repl" auto-generate="true"> </py-repl>
</div>

20
examples/repl2.html
View File

@@ -11,20 +11,20 @@
<link rel="stylesheet" href="repl.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
packages = [
"bokeh",
"numpy"
]
paths = [
"./utils.py",
"./antigravity.py"
]
</py-config>
</head>
<body>
<h1 class="font-semibold text-2xl ml-5">Custom REPL</h1>
<py-config>
packages = [
"bokeh",
"numpy"
]
paths = [
"./utils.py",
"./antigravity.py"
]
</py-config>
<py-box widths="2/3;1/3">
<py-repl id="my-repl" auto-generate="true" std-out="output" std-err="err-div"> </py-repl>
<div id="output" class="p-4"></div>

10
examples/simple_clock.html
View File

@@ -10,17 +10,17 @@
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
paths = [
"./utils.py"
]
</py-config>
</head>
<body>
<div class="font-mono">start time: <label id="outputDiv"></label></div>
<div id="outputDiv2" class="font-mono"></div>
<div id="outputDiv3" class="font-mono"></div>
<py-config>
paths = [
"./utils.py"
]
</py-config>
<py-script output="outputDiv">
# demonstrates how use the global PyScript pyscript_loader
# to send operation log messages to it

3
examples/todo-pylist.html
View File

@@ -9,12 +9,13 @@
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-register-widget src="./pylist.py" name="py-list" klass="PyList"></py-register-widget>
<py-config>
paths = [
"./utils.py"
]
</py-config>
<py-register-widget src="./pylist.py" name="py-list" klass="PyList"></py-register-widget>
<py-script>
def add_task(*ags, **kws):

12
examples/todo.html
View File

@@ -10,15 +10,17 @@
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
paths = [
"./utils.py"
]
</py-config>
</head>
<body class="container">
<!-- <py-repl id="my-repl" auto-generate="true"> </py-repl> -->
<py-config>
paths = [
"./utils.py"
]
</py-config>
<py-script src="./todo.py"> </py-script>
<main>

18
examples/toga/freedom.html
View File

@@ -16,14 +16,6 @@
<title>Loading...</title>
<link rel="icon" type="image/png" href="../favicon.png" />
<py-config>
packages = [
"./static/wheels/travertino-0.1.3-py3-none-any.whl",
"./static/wheels/toga_core-0.3.0.dev33-py3-none-any.whl",
"./static/wheels/toga_web-0.3.0.dev33-py3-none-any.whl",
"./static/wheels/freedom-0.0.1-py3-none-any.whl"
]
</py-config>
</head>
<body>
<div id="toga-placeholder">Loading...</div>
@@ -42,6 +34,16 @@
crossorigin="anonymous">
</script>
</body>
<py-config>
packages = [
"./static/wheels/travertino-0.1.3-py3-none-any.whl",
"./static/wheels/toga_core-0.3.0.dev33-py3-none-any.whl",
"./static/wheels/toga_web-0.3.0.dev33-py3-none-any.whl",
"./static/wheels/freedom-0.0.1-py3-none-any.whl"
]
</py-config>
<py-script>
from toga_web.dom import handle as dom_handle

39
pyscriptjs/tests/integration/test_py_config.py
View File

@@ -80,15 +80,7 @@ class TestConfig(PyScriptTest):
)
self.pyscript_run(
snippet="""
<py-script>
import sys, js
pyodide_version = sys.modules["pyodide"].__version__
js.console.log("version", pyodide_version)
pyodide_version
</py-script>
""",
extra_head="""
"""
<py-config type="json">
{
"runtimes": [{
@@ -98,6 +90,13 @@ class TestConfig(PyScriptTest):
}]
}
</py-config>
<py-script>
import sys, js
pyodide_version = sys.modules["pyodide"].__version__
js.console.log("version", pyodide_version)
pyodide_version
</py-script>
""",
)
@@ -108,12 +107,11 @@ class TestConfig(PyScriptTest):
def test_invalid_json_config(self):
with pytest.raises(JsError) as exc:
self.pyscript_run(
snippet="",
extra_head="""
<py-config type="json">
[[
</py-config>
""",
snippet="""
<py-config type="json">
[[
</py-config>
"""
)
msg = str(exc.value)
@@ -122,12 +120,11 @@ class TestConfig(PyScriptTest):
def test_invalid_toml_config(self):
with pytest.raises(JsError) as exc:
self.pyscript_run(
snippet="",
extra_head="""
<py-config>
[[
</py-config>
""",
snippet="""
<py-config>
[[
</py-config>
"""
)
msg = str(exc)
assert "<ExceptionInfo JsError" in msg