examples: py-env to py-config (#784)

* examples: py-env to py-config * 1 example as JSON with type * Fix todo event attribute
2025-12-19 18:27:29 -05:00 · 2022-09-23 11:04:31 -05:00
parent 146264ff12
commit d4e41e679d
19 changed files with 132 additions and 95 deletions
--- a/examples/altair.html
+++ b/examples/altair.html
@@ -5,11 +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>
-    <py-env>
-      - altair
-      - pandas
-      - vega_datasets
-    </py-env>
+    <py-config>
+packages = [
+    "altair",
+    "pandas",
+    "vega_datasets"
+]
+    </py-config>
    </head>
    <body>
      <div id="altair" style="width: 100%; height: 100%"></div>
--- a/examples/antigravity.html
+++ b/examples/antigravity.html
@@ -6,10 +6,11 @@
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>
-  <py-env>
- paths:
-  - ./antigravity.py
-  </py-env>
+  <py-config>
+paths = [
+    "./antigravity.py"
+]
+  </py-config>
  <body>
    <b>Based on xkcd: antigravity https://xkcd.com/353/.</b>
    <py-script>
--- a/examples/bokeh.html
+++ b/examples/bokeh.html
@@ -17,10 +17,12 @@

    </head>
    <body>
-        <py-env>
- bokeh
- numpy
-        </py-env>
+        <py-config>
+packages = [
+    "bokeh",
+    "numpy"
+]
+        </py-config>
        <h1>Bokeh Example</h1>
        <div id="myplot"></div>

--- a/examples/bokeh_interactive.html
+++ b/examples/bokeh_interactive.html
@@ -17,10 +17,12 @@

    </head>
    <body>
-        <py-env>
- bokeh
- numpy
-        </py-env>
+        <py-config>
+packages = [
+    "bokeh",
+    "numpy"
+]
+        </py-config>
        <h1>Bokeh Example</h1>
        <div id="myplot"></div>

--- a/examples/folium.html
+++ b/examples/folium.html
@@ -5,10 +5,12 @@
    <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-env>
-      - folium
-      - pandas
-    </py-env>
+    <py-config>
+packages = [
+  "folium",
+  "pandas"
+]
+    </py-config>
    </head>
    <body>
      <div id="folium" style="width: 100%; height: 100%"></div>
--- a/examples/matplotlib.html
+++ b/examples/matplotlib.html
@@ -5,9 +5,11 @@
    <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-env>
-      - matplotlib
-    </py-env>
+    <py-config>
+packages = [
+  "matplotlib"
+]
+    </py-config>
    </head>
    <body>
      <div id="mpl"></div>
--- a/examples/message_passing.html
+++ b/examples/message_passing.html
@@ -7,11 +7,13 @@
 </head>

 <body>
-    <py-env>
-        - numpy
-        - networkx
-        - matplotlib
-    </py-env>
+    <py-config>
+packages = [
+    "numpy",
+    "networkx",
+    "matplotlib"
+]
+    </py-config>
    <py-script>
 import numpy as np
 import networkx as nx
--- a/examples/micrograd_ai.html
+++ b/examples/micrograd_ai.html
@@ -9,11 +9,13 @@
        <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
        <script defer src="https://pyscript.net/latest/pyscript.js"></script>

-        <py-env>
-            - micrograd
-            - numpy
-            - matplotlib
-        </py-env>
+        <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>
--- a/examples/numpy_canvas_fractals.html
+++ b/examples/numpy_canvas_fractals.html
@@ -78,13 +78,18 @@
        </div>
      </div>

-<py-env>
- numpy
- sympy
- paths:
-  - ./palettes.py
-  - ./fractals.py
-</py-env>
+<py-config type="json">
+{
+  "packages": [
+    "numpy",
+    "sympy"
+  ],
+  "paths": [
+    "./palettes.py",
+    "./fractals.py"
+  ]
+}
+</py-config>

 <py-script>
 from pyodide.ffi import to_js, create_proxy
--- a/examples/panel.html
+++ b/examples/panel.html
@@ -10,11 +10,13 @@
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>
-  <py-env>
-    - bokeh
-    - numpy
-    - panel==0.13.1
-  </py-env>
+  <py-config>
+packages = [
+    "bokeh",
+    "numpy",
+    "panel==0.13.1"
+]
+  </py-config>
  <body>
    <h1>Panel Example</h1>
    <div id="simple_app"></div>
--- a/examples/panel_deckgl.html
+++ b/examples/panel_deckgl.html
@@ -42,12 +42,14 @@
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>

-  <py-env>
-    - bokeh
-    - numpy
-    - pandas
-    - panel==0.13.1
-  </py-env>
+  <py-config>
+packages = [
+  "bokeh",
+  "numpy",
+  "pandas",
+  "panel==0.13.1"
+]
+  </py-config>

  <body>
    <div class="container-fluid d-flex flex-column vh-100 overflow-hidden" id="container">
--- a/examples/panel_kmeans.html
+++ b/examples/panel_kmeans.html
@@ -43,13 +43,15 @@
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>

-  <py-env>
-    - altair
-    - numpy
-    - pandas
-    - scikit-learn
-    - panel==0.13.1
-  </py-env>
+  <py-config>
+packages = [
+  "altair",
+  "numpy",
+  "pandas",
+  "scikit-learn",
+  "panel==0.13.1"
+]
+  </py-config>

  <body>
    <div class="container-fluid d-flex flex-column vh-100 overflow-hidden" id="container">
--- a/examples/panel_stream.html
+++ b/examples/panel_stream.html
@@ -34,12 +34,14 @@
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>

-  <py-env>
-    - bokeh
-    - numpy
-    - pandas
-    - panel==0.13.1
-  </py-env>
+  <py-config>
+packages = [
+  "bokeh",
+  "numpy",
+  "pandas",
+  "panel==0.13.1"
+]
+  </py-config>

  <body>
    <div class="container-fluid d-flex flex-column vh-100 overflow-hidden" id="container">
--- a/examples/repl.html
+++ b/examples/repl.html
@@ -11,10 +11,11 @@
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>

-  <py-env>
- paths:
-  - ./antigravity.py
-  </py-env>
+  <py-config>
+paths = [
+    "./antigravity.py"
+]
+  </py-config>

  <body>
    <h1><b>pyscript REPL</b></h1>
--- a/examples/repl2.html
+++ b/examples/repl2.html
@@ -13,13 +13,16 @@
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>

-  <py-env>
- bokeh
- numpy
- paths:
-  - ./utils.py
-  - ./antigravity.py
-  </py-env>
+  <py-config>
+packages = [
+  "bokeh",
+  "numpy"
+]
+paths = [
+    "./utils.py",
+    "./antigravity.py"
+]
+  </py-config>

  <body>
      <h1 class="font-semibold text-2xl ml-5">Custom REPL</h1>
--- a/examples/simple_clock.html
+++ b/examples/simple_clock.html
@@ -10,10 +10,11 @@
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />

    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
-    <py-env>
-    - paths:
-      - ./utils.py
-    </py-env>
+    <py-config>
+paths = [
+    "./utils.py"
+]
+    </py-config>
  </head>

  <body>
--- a/examples/todo-pylist.html
+++ b/examples/todo-pylist.html
@@ -9,10 +9,11 @@
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />

    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
-    <py-env>
-    - paths:
-      - ./utils.py
-    </py-env>
+    <py-config>
+paths = [
+    "./utils.py"
+]
+    </py-config>
    <py-register-widget src="./pylist.py" name="py-list" klass="PyList"></py-register-widget>

    <py-script>
--- a/examples/todo.html
+++ b/examples/todo.html
@@ -10,10 +10,11 @@
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />

    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
-    <py-env>
-    - paths:
-      - ./utils.py
-    </py-env>
+    <py-config>
+paths = [
+    "./utils.py"
+]
+    </py-config>
  </head>

  <body class="container">
@@ -28,7 +29,7 @@
    </div>
    <div>
      <input id="new-task-content" class="py-input" type="text">
-      <button id="new-task-btn" class="py-button" type="submit" py-onClick="add_task()">
+      <button id="new-task-btn" class="py-button" type="submit" py-click="add_task()">
        Add task
      </button>
    </div>
--- a/examples/toga/freedom.html
+++ b/examples/toga/freedom.html
@@ -34,12 +34,14 @@
        crossorigin="anonymous">
        </script>
  </body>
-  <py-env>
- - './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-env>
+  <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