jonas/pyscript-bootstrap-templates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improved pwa functionality

Browse Source
This commit is contained in:
Jonas Weinz 2022-10-16 12:54:39 +02:00
parent 3dc051aba1
commit 4ca2cdff70
22 changed files with 56336 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl vendored
View File

Binary file not shown.

6
examples/01_hello_world/config.json
View File

@ -3,9 +3,9 @@
"title": "01_hello_world", "title": "01_hello_world",
"packages": [], "packages": [],
"paths": [], "paths": [],
"pyscript_css_url": "https://pyscript.net/alpha/pyscript.css", "pyscript_css_url": "https://pyscript.net/latest/pyscript.css",
"pyscript_js_url": "https://pyscript.net/alpha/pyscript.min.js", "pyscript_js_url": "https://pyscript.net/latest/pyscript.js",
"pyscript_py_url": "https://pyscript.net/alpha/pyscript.py", "pyscript_py_url": "https://pyscript.net/latest/pyscript.py",
"bootstrap_css_url": "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css", "bootstrap_css_url": "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css",
"bootstrap_js_url": "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js", "bootstrap_js_url": "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js",
"pyscript_bootstrap_templates_wheel_url": "../dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl", "pyscript_bootstrap_templates_wheel_url": "../dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl",

19
examples/01_hello_world/index.html
View File

@ -7,26 +7,29 @@
<link rel="manifest" href="manifest.json" /> <link rel="manifest" href="manifest.json" />
<script src="./resources/pwa.js"></script>
<link rel="stylesheet" href="./resources/pyscript.css" /> <link rel="stylesheet" href="./resources/pyscript.css" />
<script defer src="./resources/pyscript.js"></script> <script defer src="./resources/pyscript.js"></script>
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link href="./resources/bootstrap.css" rel="stylesheet"> <link href="./resources/bootstrap.css" rel="stylesheet">
<title>01_hello_world</title> <title>01_hello_world</title>
<py-env>
- ./resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl
- paths:
</py-env>
</head> </head>
<body style="width: 100%; height: 100%"> <body style="width: 100%; height: 100%">
<py-config type="json">
{
"autoclose_loader": true,
"packages": [
"./resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl"
],
"paths": []
}
</py-config>
<div id="pyscript_app" style="height: 100%; min-height: 100%"></div> <div id="pyscript_app" style="height: 100%; min-height: 100%"></div>
<py-script src="./main.py"></py-script> <py-script src="./main.py"></py-script>
<script src="./resources/bootstrap.js"></script> <script src="./resources/bootstrap.js"></script>
<script src="./resources/pwa.js"></script>
</body> </body>
</html> </html>

BIN
examples/01_hello_world/resources/icon-256x256.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

258
examples/01_hello_world/resources/pyscript.css
View File

File diff suppressed because one or more lines are too long

27860
examples/01_hello_world/resources/pyscript.js
View File

File diff suppressed because one or more lines are too long

BIN
examples/01_hello_world/resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl
View File

Binary file not shown.

32
examples/01_hello_world/resources/serviceWorker.js
View File

@ -1,32 +0,0 @@
const pwa_version = "202210160801"
const assets = ["/index.html",
"/main.py",
"/resources/bootstrap.css",
"/resources/bootstrap.js",
"/resources/pyscript.css",
"/resources/pyscript.js",
"/resources/pyscript.py",
"/resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl",
"/resources/pwa.js",
"/resourced/site.js",
]
self.addEventListener("install", installEvent => {
installEvent.waitUntil(
caches.open(pwa_version).then(cache => {
cache.addAll(assets).then(r => {
console.log("Cache assets downloaded");
}).catch(err => console.log("Error caching item", err))
console.log(`Cache ${pwa_version} opened.`);
}).catch(err => console.log("Error opening cache", err))
)
})
self.addEventListener("fetch", fetchEvent => {
fetchEvent.respondWith(
caches.match(fetchEvent.request).then(res => {
return res || fetch(fetchEvent.request)
}).catch(err => console.log("Cache fetch error: ", err))
)
})

2
examples/01_hello_world/resources/site.js
View File

@ -1,2 +0,0 @@

35
examples/01_hello_world/serviceWorker.js
View File

@ -1,5 +1,5 @@
const pwa_version = "202210160804" const pwa_version = "01_hello_world_202210161053"
const assets = ["./index.html", const assets = ["./index.html",
"./main.py", "./main.py",
"./resources/bootstrap.css", "./resources/bootstrap.css",
@ -22,11 +22,30 @@ self.addEventListener("install", installEvent => {
) )
}) })
self.addEventListener("fetch", fetchEvent => { self.addEventListener('activate', e => {
fetchEvent.respondWith( console.log('Service Worker: Activated');
caches.match(fetchEvent.request).then(res => { });
return res || fetch(fetchEvent.request)
}).catch(err => console.log("Cache fetch error: ", err)) self.addEventListener('fetch', event => {
) if (event.request.method != 'GET')
}) return;
event.respondWith((async () => {
const cachedResponse = await caches.match(event.request);
if (cachedResponse) {
return cachedResponse;
}
const response = await fetch(event.request);
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
const responseToCache = response.clone();
const cache = await caches.open(pwa_version)
await cache.put(event.request, response.clone());
return response;
})());
});

6
examples/02_image_filter/config.json
View File

@ -6,9 +6,9 @@
"scikit-image" "scikit-image"
], ],
"paths": null, "paths": null,
"pyscript_css_url": "https://pyscript.net/alpha/pyscript.css", "pyscript_css_url": "https://pyscript.net/latest/pyscript.css",
"pyscript_js_url": "https://pyscript.net/alpha/pyscript.min.js", "pyscript_js_url": "https://pyscript.net/latest/pyscript.js",
"pyscript_py_url": "https://pyscript.net/alpha/pyscript.py", "pyscript_py_url": "https://pyscript.net/latest/pyscript.py",
"bootstrap_css_url": "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css", "bootstrap_css_url": "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css",
"bootstrap_js_url": "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js", "bootstrap_js_url": "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js",
"pyscript_bootstrap_templates_wheel_url": "../dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl", "pyscript_bootstrap_templates_wheel_url": "../dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl",

22
examples/02_image_filter/index.html
View File

@ -7,27 +7,31 @@
<link rel="manifest" href="manifest.json" /> <link rel="manifest" href="manifest.json" />
<script src="./resources/pwa.js"></script>
<link rel="stylesheet" href="./resources/pyscript.css" /> <link rel="stylesheet" href="./resources/pyscript.css" />
<script defer src="./resources/pyscript.js"></script> <script defer src="./resources/pyscript.js"></script>
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link href="./resources/bootstrap.css" rel="stylesheet"> <link href="./resources/bootstrap.css" rel="stylesheet">
<title>02_image_filter</title> <title>02_image_filter</title>
<py-env>
- ./resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl
- numpy
- scikit-image
</py-env>
</head> </head>
<body style="width: 100%; height: 100%"> <body style="width: 100%; height: 100%">
<py-config type="json">
{
"autoclose_loader": true,
"packages": [
"./resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl",
"numpy",
"scikit-image"
],
"paths": []
}
</py-config>
<div id="pyscript_app" style="height: 100%; min-height: 100%"></div> <div id="pyscript_app" style="height: 100%; min-height: 100%"></div>
<py-script src="./main.py"></py-script> <py-script src="./main.py"></py-script>
<script src="./resources/bootstrap.js"></script> <script src="./resources/bootstrap.js"></script>
<script src="./resources/pwa.js"></script>
</body> </body>
</html> </html>

BIN
examples/02_image_filter/resources/icon-256x256.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

258
examples/02_image_filter/resources/pyscript.css
View File

File diff suppressed because one or more lines are too long

27860
examples/02_image_filter/resources/pyscript.js
View File

File diff suppressed because one or more lines are too long

BIN
examples/02_image_filter/resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl
View File

Binary file not shown.

32
examples/02_image_filter/resources/serviceWorker.js
View File

@ -1,32 +0,0 @@
const pwa_version = "202210160801"
const assets = ["/index.html",
"/main.py",
"/resources/bootstrap.css",
"/resources/bootstrap.js",
"/resources/pyscript.css",
"/resources/pyscript.js",
"/resources/pyscript.py",
"/resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl",
"/resources/pwa.js",
"/resourced/site.js",
]
self.addEventListener("install", installEvent => {
installEvent.waitUntil(
caches.open(pwa_version).then(cache => {
cache.addAll(assets).then(r => {
console.log("Cache assets downloaded");
}).catch(err => console.log("Error caching item", err))
console.log(`Cache ${pwa_version} opened.`);
}).catch(err => console.log("Error opening cache", err))
)
})
self.addEventListener("fetch", fetchEvent => {
fetchEvent.respondWith(
caches.match(fetchEvent.request).then(res => {
return res || fetch(fetchEvent.request)
}).catch(err => console.log("Cache fetch error: ", err))
)
})

2
examples/02_image_filter/resources/site.js
View File

@ -1,2 +0,0 @@

35
examples/02_image_filter/serviceWorker.js
View File

@ -1,5 +1,5 @@
const pwa_version = "202210160804" const pwa_version = "02_image_filter_202210161053"
const assets = ["./index.html", const assets = ["./index.html",
"./main.py", "./main.py",
"./resources/bootstrap.css", "./resources/bootstrap.css",
@ -22,11 +22,30 @@ self.addEventListener("install", installEvent => {
) )
}) })
self.addEventListener("fetch", fetchEvent => { self.addEventListener('activate', e => {
fetchEvent.respondWith( console.log('Service Worker: Activated');
caches.match(fetchEvent.request).then(res => { });
return res || fetch(fetchEvent.request)
}).catch(err => console.log("Cache fetch error: ", err)) self.addEventListener('fetch', event => {
) if (event.request.method != 'GET')
}) return;
event.respondWith((async () => {
const cachedResponse = await caches.match(event.request);
if (cachedResponse) {
return cachedResponse;
}
const response = await fetch(event.request);
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
const responseToCache = response.clone();
const cache = await caches.open(pwa_version)
await cache.put(event.request, response.clone());
return response;
})());
});

2
pyscript_bootstrap_templates/HTML.py
View File

@ -2,7 +2,7 @@
from typing import Callable, Iterable, Union from typing import Callable, Iterable, Union
import uuid import uuid
from js import document, CanvasRenderingContext2D # type: ignore from js import document, CanvasRenderingContext2D # type: ignore
from pyodide import create_proxy # type: ignore from pyodide.ffi import create_proxy # type: ignore
from parse import * from parse import *
import base64 import base64
from PIL import Image as PILImage from PIL import Image as PILImage

2
pyscript_bootstrap_templates/bootstrap_inputs.py
View File

@ -3,7 +3,7 @@ import uuid
from .bootstrap_HTML import * from .bootstrap_HTML import *
from js import document, FileReader, btoa, Uint8Array # type: ignore from js import document, FileReader, btoa, Uint8Array # type: ignore
from pyodide import create_proxy # type: ignore from pyodide.ffi import create_proxy # type: ignore
import io import io
import base64 import base64

79
pyscript_bootstrap_templates/cli_interface.py
View File

@ -52,7 +52,7 @@ def create_pwa_manifest(root_folder: pathlib.Path, **kwargs):
download_file(str(default_icon_path), root_folder / "resources" / "icon-512x512.png") download_file(str(default_icon_path), root_folder / "resources" / "icon-512x512.png")
def create_pwa_service_worker(root_folder: pathlib.Path, **kwargs): def create_pwa_service_worker(root_folder: pathlib.Path, **kwargs):
version = dt.datetime.utcnow().strftime("%Y%m%d%H%M") version = f"{kwargs['title']}_{dt.datetime.utcnow().strftime('%Y%m%d%H%M')}"
assets = [ assets = [
*[f'"./{p}",' for p in kwargs['paths']], *[f'"./{p}",' for p in kwargs['paths']],
'"./index.html",', '"./index.html",',
@ -83,13 +83,32 @@ self.addEventListener("install", installEvent => {{
) )
}}) }})
self.addEventListener("fetch", fetchEvent => {{ self.addEventListener('activate', e => {{
fetchEvent.respondWith( console.log('Service Worker: Activated');
caches.match(fetchEvent.request).then(res => {{ }});
return res || fetch(fetchEvent.request)
}}).catch(err => console.log("Cache fetch error: ", err)) self.addEventListener('fetch', event => {{
) if (event.request.method != 'GET')
}}) return;
event.respondWith((async () => {{
const cachedResponse = await caches.match(event.request);
if (cachedResponse) {{
return cachedResponse;
}}
const response = await fetch(event.request);
if (!response || response.status !== 200 || response.type !== 'basic') {{
return response;
}}
const responseToCache = response.clone();
const cache = await caches.open(pwa_version)
await cache.put(event.request, response.clone());
return response;
}})());
}});
""" """
pwa_js = """ pwa_js = """
@ -117,24 +136,27 @@ def generate_project_files(root_folder: pathlib.Path,
title: str, title: str,
packages: List[str], packages: List[str],
paths: List[str] = None, paths: List[str] = None,
pyscript_css_url: str = "https://pyscript.net/alpha/pyscript.css", pyscript_css_url: str = "https://pyscript.net/latest/pyscript.css",
pyscript_js_url: str = "https://pyscript.net/alpha/pyscript.min.js", pyscript_js_url: str = "https://pyscript.net/latest/pyscript.min.js",
pyscript_py_url: str = "https://pyscript.net/alpha/pyscript.py", pyscript_py_url: str = "https://pyscript.net/latest/pyscript.py",
bootstrap_css_url: str = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css", bootstrap_css_url: str = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css",
bootstrap_js_url: str = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js", bootstrap_js_url: str = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js",
pyscript_bootstrap_templates_wheel_url: str = "https://the-cake-is-a-lie.net/gogs/jonas/pyscript-bootstrap-templates/raw/branch/main/dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl", pyscript_bootstrap_templates_wheel_url: str = "https://the-cake-is-a-lie.net/gogs/jonas/pyscript-bootstrap-templates/raw/branch/main/dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl",
**_): **_):
pyenv = f"- ./resources/{pyscript_bootstrap_templates_wheel_url.split('/')[-1]}" if paths is None:
for package in packages: paths = []
pyenv += f"\n - {package}"
if paths is not None: pyconfig = {
pyenv += "\n - paths:" "autoclose_loader": True,
for path in paths: "packages": [
pyenv += f"\n - {path}" f"./resources/{pyscript_bootstrap_templates_wheel_url.split('/')[-1]}",
*packages
pyenv += "\n" ],
"paths": [
*paths
]
}
html = f""" html = f"""
<!DOCTYPE html> <!DOCTYPE html>
@ -145,24 +167,23 @@ def generate_project_files(root_folder: pathlib.Path,
<link rel="manifest" href="manifest.json" /> <link rel="manifest" href="manifest.json" />
<script src="./resources/pwa.js"></script>
<link rel="stylesheet" href="./resources/pyscript.css" /> <link rel="stylesheet" href="./resources/pyscript.css" />
<script defer src="./resources/pyscript.js"></script> <script defer src="./resources/pyscript.js"></script>
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link href="./resources/bootstrap.css" rel="stylesheet"> <link href="./resources/bootstrap.css" rel="stylesheet">
<title>{title}</title> <title>{title}</title>
<py-env>
{pyenv}
</py-env>
</head> </head>
<body style="width: 100%; height: 100%"> <body style="width: 100%; height: 100%">
<py-config type="json">
{json.dumps(pyconfig, indent=4)}
</py-config>
<div id="pyscript_app" style="height: 100%; min-height: 100%"></div> <div id="pyscript_app" style="height: 100%; min-height: 100%"></div>
<py-script src="./main.py"></py-script> <py-script src="./main.py"></py-script>
<script src="./resources/bootstrap.js"></script> <script src="./resources/bootstrap.js"></script>
<script src="./resources/pwa.js"></script>
</body> </body>
</html> </html>
""" """
@ -275,11 +296,11 @@ def main():
argument_parser.add_argument("--paths", type=str, nargs="+", argument_parser.add_argument("--paths", type=str, nargs="+",
help="additional local python files to include in the new project") help="additional local python files to include in the new project")
argument_parser.add_argument("--pyscript-css-url", type=str, argument_parser.add_argument("--pyscript-css-url", type=str,
help="the url of the pyscript css file", default="https://pyscript.net/alpha/pyscript.css") help="the url of the pyscript css file", default="https://pyscript.net/latest/pyscript.css")
argument_parser.add_argument("--pyscript-js-url", type=str, argument_parser.add_argument("--pyscript-js-url", type=str,
help="the url of the pyscript js file", default="https://pyscript.net/alpha/pyscript.min.js") help="the url of the pyscript js file", default="https://pyscript.net/latest/pyscript.js")
argument_parser.add_argument("--pyscript-py-url", type=str, argument_parser.add_argument("--pyscript-py-url", type=str,
help="the url of the pyscript py file", default="https://pyscript.net/alpha/pyscript.py") help="the url of the pyscript py file", default="https://pyscript.net/latest/pyscript.py")
argument_parser.add_argument("--bootstrap-css-url", type=str, argument_parser.add_argument("--bootstrap-css-url", type=str,
help="the url of the bootstrap css file", default="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css") help="the url of the bootstrap css file", default="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css")
argument_parser.add_argument("--bootstrap-js-url", type=str, argument_parser.add_argument("--bootstrap-js-url", type=str,