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> </style>
<py-config>
packages = [
"numpy",
"matplotlib"
]
</py-config>
</head> </head>
<body> <body>
@@ -31,6 +25,14 @@
<p style='font-family: monospace sans-serif;'><big><big><big><big>&#10096;py&#10097;</big></big></big></big></p> <p style='font-family: monospace sans-serif;'><big><big><big><big>&#10096;py&#10097;</big></big></big></big></p>
</div> </div>
</div> </div>
<py-config>
packages = [
"numpy",
"matplotlib"
]
</py-config>
<py-script> <py-script>
import matplotlib.pyplot as plt import matplotlib.pyplot as plt
import numpy as np 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/). 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: 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> <head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" /> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script> <script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config type="json">
{
"packages": ["numpy", "matplotlib"]
}
</py-config>
</head> </head>
<body> <body>
<h1>Let's plot random numbers</h1> <h1>Let's plot random numbers</h1>
<div id="plot"></div> <div id="plot"></div>
<py-config type="json">
{
"packages": ["numpy", "matplotlib"]
}
</py-config>
<py-script output="plot"> <py-script output="plot">
import matplotlib.pyplot as plt import matplotlib.pyplot as plt
import numpy as np import numpy as np
@@ -315,15 +315,15 @@ In the HTML tag `<py-config>`, paths to local modules are provided in the
<head> <head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" /> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script> <script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config type="toml">
packages = ["numpy", "matplotlib"]
paths = ["./data.py"]
</py-config>
</head> </head>
<body> <body>
<h1>Let's plot random numbers</h1> <h1>Let's plot random numbers</h1>
<div id="plot"></div> <div id="plot"></div>
<py-config type="toml">
packages = ["numpy", "matplotlib"]
paths = ["./data.py"]
</py-config>
<py-script output="plot"> <py-script output="plot">
import matplotlib.pyplot as plt import matplotlib.pyplot as plt
from data import make_x_and_y from data import make_x_and_y

6
examples/altair.html
View File

@@ -5,6 +5,9 @@
<link rel="icon" type="image/x-icon" href="./favicon.png"> <link rel="icon" type="image/x-icon" href="./favicon.png">
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" /> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script> <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<div id="altair" style="width: 100%; height: 100%"></div>
<py-config> <py-config>
packages = [ packages = [
"altair", "altair",
@@ -12,9 +15,6 @@
"vega_datasets" "vega_datasets"
] ]
</py-config> </py-config>
</head>
<body>
<div id="altair" style="width: 100%; height: 100%"></div>
<py-script output="altair"> <py-script output="altair">
import altair as alt import altair as alt
from vega_datasets import data 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="icon" type="image/x-icon" href="./favicon.png">
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" /> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script> <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<py-config> <py-config>
paths = [ paths = [
"./antigravity.py" "./antigravity.py"
] ]
</py-config> </py-config>
</head>
<body>
<b>Based on xkcd: antigravity https://xkcd.com/353/.</b> <b>Based on xkcd: antigravity https://xkcd.com/353/.</b>
<py-script> <py-script>
import antigravity import antigravity

9
examples/bokeh.html
View File

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

9
examples/bokeh_interactive.html
View File

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

8
examples/folium.html
View File

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

8
examples/matplotlib.html
View File

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

6
examples/message_passing.html
View File

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

11
examples/micrograd_ai.html
View File

@@ -9,6 +9,12 @@
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" /> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script> <script defer src="https://pyscript.net/latest/pyscript.js"></script>
<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> <py-config>
packages = [ packages = [
"micrograd", "micrograd",
@@ -17,11 +23,6 @@
] ]
</py-config> </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>
<div> <div>
<p> <p>
<a href="https://github.com/karpathy/micrograd">Micrograd</a> is a tiny Autograd engine created <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> </style>
<py-config type="json">
{
"packages": [
"numpy",
"sympy"
],
"paths": [
"./palettes.py",
"./fractals.py"
]
}
</py-config>
</head> </head>
<body> <body>
<b> <b>
@@ -91,6 +78,19 @@
</div> </div>
</div> </div>
<py-config type="json">
{
"packages": [
"numpy",
"sympy"
],
"paths": [
"./palettes.py",
"./fractals.py"
]
}
</py-config>
<py-script> <py-script>
from pyodide.ffi import to_js, create_proxy 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> <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" /> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script> <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<h1>Panel Example</h1>
<div id="simple_app"></div>
<py-config> <py-config>
packages = [ packages = [
"bokeh", "bokeh",
@@ -16,10 +21,7 @@
"panel==0.13.1" "panel==0.13.1"
] ]
</py-config> </py-config>
</head>
<body>
<h1>Panel Example</h1>
<div id="simple_app"></div>
<py-script> <py-script>
import panel as pn import panel as pn

17
examples/panel_deckgl.html
View File

@@ -40,14 +40,6 @@
</style> </style>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" /> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script> <script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
packages = [
"bokeh",
"numpy",
"pandas",
"panel==0.13.1"
]
</py-config>
</head> </head>
<body> <body>
@@ -77,6 +69,15 @@
</div> </div>
</div> </div>
<py-config>
packages = [
"bokeh",
"numpy",
"pandas",
"panel==0.13.1"
]
</py-config>
<py-script> <py-script>
import panel as pn import panel as pn
import pandas as pd 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" /> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script> <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> </head>
<body> <body>
@@ -82,6 +73,16 @@
</div> </div>
</div> </div>
<py-config>
packages = [
"altair",
"numpy",
"pandas",
"scikit-learn",
"panel==0.13.1"
]
</py-config>
<py-script> <py-script>
import altair as alt import altair as alt
import panel as pn 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" /> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script> <script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
packages = [
"bokeh",
"numpy",
"pandas",
"panel==0.13.1"
]
</py-config>
</head> </head>
<body> <body>
@@ -67,6 +59,15 @@
</div> </div>
</div> </div>
<py-config>
packages = [
"bokeh",
"numpy",
"pandas",
"panel==0.13.1"
]
</py-config>
<py-script> <py-script>
import panel as pn import panel as pn
import numpy as np 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="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" /> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script> <script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
paths = [
"./antigravity.py"
]
</py-config>
</head> </head>
<body> <body>
<h1><b>pyscript REPL</b></h1> <h1><b>pyscript REPL</b></h1>
Tip: press Shift-ENTER to evaluate a cell Tip: press Shift-ENTER to evaluate a cell
<br> <br>
<py-config>
paths = [
"./antigravity.py"
]
</py-config>
<div> <div>
<py-repl id="my-repl" auto-generate="true"> </py-repl> <py-repl id="my-repl" auto-generate="true"> </py-repl>
</div> </div>

8
examples/repl2.html
View File

@@ -11,6 +11,10 @@
<link rel="stylesheet" href="repl.css" /> <link rel="stylesheet" href="repl.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script> <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<h1 class="font-semibold text-2xl ml-5">Custom REPL</h1>
<py-config> <py-config>
packages = [ packages = [
"bokeh", "bokeh",
@@ -21,10 +25,6 @@
"./antigravity.py" "./antigravity.py"
] ]
</py-config> </py-config>
</head>
<body>
<h1 class="font-semibold text-2xl ml-5">Custom REPL</h1>
<py-box widths="2/3;1/3"> <py-box widths="2/3;1/3">
<py-repl id="my-repl" auto-generate="true" std-out="output" std-err="err-div"> </py-repl> <py-repl id="my-repl" auto-generate="true" std-out="output" std-err="err-div"> </py-repl>
<div id="output" class="p-4"></div> <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" /> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script> <script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
paths = [
"./utils.py"
]
</py-config>
</head> </head>
<body> <body>
<div class="font-mono">start time: <label id="outputDiv"></label></div> <div class="font-mono">start time: <label id="outputDiv"></label></div>
<div id="outputDiv2" class="font-mono"></div> <div id="outputDiv2" class="font-mono"></div>
<div id="outputDiv3" class="font-mono"></div> <div id="outputDiv3" class="font-mono"></div>
<py-config>
paths = [
"./utils.py"
]
</py-config>
<py-script output="outputDiv"> <py-script output="outputDiv">
# demonstrates how use the global PyScript pyscript_loader # demonstrates how use the global PyScript pyscript_loader
# to send operation log messages to it # 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" /> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script> <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> <py-config>
paths = [ paths = [
"./utils.py" "./utils.py"
] ]
</py-config> </py-config>
<py-register-widget src="./pylist.py" name="py-list" klass="PyList"></py-register-widget>
<py-script> <py-script>
def add_task(*ags, **kws): def add_task(*ags, **kws):

8
examples/todo.html
View File

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

18
examples/toga/freedom.html
View File

@@ -16,14 +16,6 @@
<title>Loading...</title> <title>Loading...</title>
<link rel="icon" type="image/png" href="../favicon.png" /> <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> </head>
<body> <body>
<div id="toga-placeholder">Loading...</div> <div id="toga-placeholder">Loading...</div>
@@ -42,6 +34,16 @@
crossorigin="anonymous"> crossorigin="anonymous">
</script> </script>
</body> </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> <py-script>
from toga_web.dom import handle as dom_handle from toga_web.dom import handle as dom_handle

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

@@ -80,15 +80,7 @@ class TestConfig(PyScriptTest):
) )
self.pyscript_run( 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"> <py-config type="json">
{ {
"runtimes": [{ "runtimes": [{
@@ -98,6 +90,13 @@ class TestConfig(PyScriptTest):
}] }]
} }
</py-config> </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): def test_invalid_json_config(self):
with pytest.raises(JsError) as exc: with pytest.raises(JsError) as exc:
self.pyscript_run( self.pyscript_run(
snippet="", snippet="""
extra_head="""
<py-config type="json"> <py-config type="json">
[[ [[
</py-config> </py-config>
""", """
) )
msg = str(exc.value) msg = str(exc.value)
@@ -122,12 +120,11 @@ class TestConfig(PyScriptTest):
def test_invalid_toml_config(self): def test_invalid_toml_config(self):
with pytest.raises(JsError) as exc: with pytest.raises(JsError) as exc:
self.pyscript_run( self.pyscript_run(
snippet="", snippet="""
extra_head="""
<py-config> <py-config>
[[ [[
</py-config> </py-config>
""", """
) )
msg = str(exc) msg = str(exc)
assert "<ExceptionInfo JsError" in msg assert "<ExceptionInfo JsError" in msg