Merge pull request #16 from rmartin16/pin-pyscript

Pin PyScript
beeware · Dec 10, 2024 · 6532867 · 6532867
2 parents 7150f2f + 5021abb
commit 6532867
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 19 deletions.
diff --git a/cookiecutter.json b/cookiecutter.json
@@ -20,5 +20,6 @@
     ],
     "_extensions": [
         "briefcase.integrations.cookiecutter.PythonVersionExtension"
-    ]
+    ],
+    "_jinja2_env_vars": {"lstrip_blocks": true, "trim_blocks": true}
 }
diff --git a/{{ cookiecutter.format }}/briefcase.toml b/{{ cookiecutter.format }}/briefcase.toml
@@ -1,4 +1,7 @@
 # Generated using Python {{ cookiecutter.python_version }}
+[briefcase]
+target_version = "0.3.21"
+
 [paths]
 app_path = "app"
 app_requirements_path = "requirements.txt"

diff --git a/{{ cookiecutter.format }}/www/index.html b/{{ cookiecutter.format }}/www/index.html
@@ -7,8 +7,16 @@
 
         <link rel="icon" type="image/png" href="/static/logo-32.png"/>
 
-        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
-        <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <script type="module">
+            // Hide the splash screen when the page is ready.
+            import { hooks } from "https://pyscript.net/releases/2024.11.1/core.js";
+            hooks.main.onReady.add(() => {
+                document.getElementById("briefcase-splash").classList.add("hidden");
+            });
+        </script>
+
+        <link rel="stylesheet" href="https://pyscript.net/releases/2024.11.1/core.css">
+        <script type="module" src="https://pyscript.net/releases/2024.11.1/core.js"></script>
 
 {% if cookiecutter.style_framework == "Bootstrap v4.6" %}
         <link rel="stylesheet"
@@ -24,6 +32,10 @@
         <link rel="stylesheet" href="/static/css/briefcase.css">
     </head>
     <body id="app-placeholder">
+        <div id="briefcase-splash">
+            <img src="static/logo-32.png" alt="Splash screen logo">
+            <p>Loading...</p>
+        </div>
 {% if cookiecutter.style_framework == "Bootstrap v4.6" %}
         <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
                 integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
@@ -32,10 +44,11 @@
                 integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
                 crossorigin="anonymous"></script>
 {% endif %}
-        <py-config src="/pyscript.toml"></py-config>
-        <py-script>
+        <script type="py" async="false" config="pyscript.toml">
             import runpy
-            result = runpy.run_module("{{ cookiecutter.module_name }}", run_name="__main__", alter_sys=True)
-        </py-script>
+            result = runpy.run_module(
+                "{{ cookiecutter.module_name }}", run_name="__main__", alter_sys=True
+            )
+        </script>
     </body>
 </html>
diff --git a/{{ cookiecutter.format }}/www/pyscript.toml b/{{ cookiecutter.format }}/www/pyscript.toml
@@ -0,0 +1 @@
+plugins = ["!error"]
diff --git a/{{ cookiecutter.format }}/www/static/css/briefcase.css b/{{ cookiecutter.format }}/www/static/css/briefcase.css
@@ -1,15 +1,41 @@
-
-/* Unset the overly generic pyscript .label style */
-#app-placeholder .label {
-    margin-top: inherit;
-    color: inherit;
-    text-align: inherit;
-    width: inherit;
-    display: inherit;
-    color: inherit;
-    font-size: inherit;
-    margin-top: inherit;
-
+/* Splash screen */
+div#briefcase-splash {
+    background-color:#999;
+    position:fixed;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width:100%;
+    height:100%;
+    top:0px;
+    left:0px;
+    z-index:1000;
+}
+div#briefcase-splash p {
+    text-align: center;
+    color: white;
+    font-size: large;
+    font-family: sans-serif;
+}
+div#briefcase-splash.hidden {
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0s 0.2s, opacity 0.2s linear;
+}
+div#briefcase-splash img {
+    animation: throbber 1.5s infinite;
+}
+@keyframes throbber {
+    0% {
+        transform: scale(1.2);
+    }
+    70% {
+        transform: scale(1.0);
+    }
+    100% {
+        transform: scale(1.2);
+    }
 }
 
 /*******************************************************************