@qtoggle/qui 0.0.0

package/qui/settings.py

@@ -0,0 +1,60 @@
+import logging
+
+from typing import Any
+
+from tornado.httpserver import HTTPRequest
+
+from qui import constants, exceptions
+
+
+DEFAULT_THEME_COLOR = "#62abea"
+DEFAULT_BACKGROUND_COLOR = "#444444"
+
+DEFAULT_FRONTEND_DIR = "frontend"
+DEFAULT_FRONTEND_URL_PREFIX = "frontend"
+
+DEFAULT_STATIC_URL = "{frontend_url_prefix}/static"
+
+logger = logging.getLogger(__name__)
+
+name: str = ""
+display_name: str = ""
+display_short_name: str = ""
+description: str = ""
+version: str = ""
+debug: bool = False
+theme_color: str = DEFAULT_THEME_COLOR
+background_color: str = DEFAULT_BACKGROUND_COLOR
+frontend_dir: str = DEFAULT_FRONTEND_DIR
+frontend_url_prefix: str = DEFAULT_FRONTEND_URL_PREFIX
+static_url: str = DEFAULT_STATIC_URL
+package_name: str = ""
+enable_pwa: bool = True
+extra_context: dict[str, Any] = {}
+build_hash = None
+
+
+def make_context(request: HTTPRequest) -> dict[str, Any]:
+    if not name:
+        raise exceptions.QUIException("QUI not configured")
+
+    base_prefix = request.headers.get(constants.BASE_PREFIX_HEADER, "/")
+    if not base_prefix.endswith("/"):
+        base_prefix += "/"
+
+    return {
+        "name": name,
+        "display_name": display_name,
+        "display_short_name": display_short_name,
+        "description": description,
+        "version": version,
+        "debug": debug,
+        "theme_color": theme_color,
+        "background_color": background_color,
+        "navigation_base_prefix": f"{base_prefix}{frontend_url_prefix}",
+        "static_url": static_url,
+        "enable_pwa": enable_pwa,
+        "themes": ["dark", "light"],
+        "build_hash": build_hash,
+        **extra_context,
+    }

package/qui/templates/manifest.json

@@ -0,0 +1,25 @@
+{
+    "lang": "en-US",
+    {% if display_short_name or display_name -%}"short_name": "{{ display_short_name or display_name }}",{%- endif %}
+    {% if display_name or display_short_name -%}"name": "{{ display_name or display_short_name }}",{%- endif %}
+    {% if description -%}"description": "{{ description }}",{%- endif %}
+    {% if version -%}"version": "{{ version }}",{%- endif %}
+    {% if theme_color -%}"theme_color": "{{ theme_color }}",{%- endif %}
+    {% if background_color -%}"background_color": "{{ background_color }}",{%- endif %}
+    "icons": [
+        {"src": "{{ static_url }}/img/launcher-icon-16.png",  "sizes": "16x16",   "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-32.png",  "sizes": "32x32",   "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-36.png",  "sizes": "36x36",   "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-48.png",  "sizes": "48x48",   "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-64.png",  "sizes": "64x64",   "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-72.png",  "sizes": "72x72",   "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-96.png",  "sizes": "96x96",   "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-144.png", "sizes": "144x144", "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-192.png", "sizes": "192x192", "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-256.png", "sizes": "256x256", "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-384.png", "sizes": "384x384", "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-512.png", "sizes": "512x512", "type": "image/png"}
+    ],
+    "start_url": ".",
+    "display": "standalone"
+}

package/qui/templates/qui.html

@@ -0,0 +1,126 @@
+
+{% macro css_devel_file(theme, path) -%}
+    <link rel="stylesheet"
+          type="text/css"
+          href="{{ static_url }}/css/{{ theme }}/{{ path }}?h={{ build_hash }}"
+          disabled
+          theme="{{ theme }}"/>
+{%- endmacro %}
+
+{% macro main_script_file(params={}) -%}
+    <script type="module"
+            src="{{ static_url }}{% if debug %}/js/index.js{% else %}/{{ name }}-bundle.js{% endif %}?h={{ build_hash }}"
+            data-app-name="{{ name }}"
+            data-app-latest-version="{{ version }}"
+            data-app-display-name="{{ display_name }}"
+            data-debug="{{ debug|lower }}"
+            data-navigation-base-prefix="{{ navigation_base_prefix }}"
+            data-themes="{{ themes|join(',') }}"
+            data-build-hash="{{ build_hash }}"
+            {% for n, v in params.items() -%}
+                {{ n }}="{{ v }}"
+            {% endfor %}>
+    </script>
+{%- endmacro %}
+
+<!DOCTYPE HTML>
+
+<html lang="en">
+    <head>
+        <title>{% block title %}{{ display_name }}{% endblock %}</title>
+
+        {% if enable_pwa %}
+        <link rel="manifest" href="{{ navigation_base_prefix }}/manifest.json?display_name={{
+                                   display_name|urlquote }}&theme_color={{
+                                   theme_color|urlquote }}&background_color={{
+                                   background_color|urlquote }}&description={{
+                                   description|urlquote }}&h={{ build_hash }}">
+        {% endif %}
+        <link rel="icon" href="{{ static_url }}/img/launcher-icon-32.png">
+        <link rel="apple-touch-icon" href="{{ static_url }}/img/launcher-icon-32.png">
+
+        {% block _meta %}
+            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+            <meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+            <meta name="mobile-web-app-capable" content="yes">
+            <meta name="apple-mobile-web-app-capable" content="yes">
+            <meta name="theme-color" content="{{ theme_color }}">
+            <meta name="apple-mobile-web-app-status-bar-style" content="{{ theme_color }}">
+        {% endblock %}
+        {% block meta %}{% endblock %}
+
+        {% block _style %}
+            <style>
+                html {
+                    background: #444444;
+                }
+                body {
+                    opacity: 0;
+                }
+            </style>
+            {% for theme in themes %}
+                {% if debug %}
+                    {{ css_devel_file(theme, "base.css") }}
+                    {{ css_devel_file(theme, "main-ui.css") }}
+                    {{ css_devel_file(theme, "no-effects.css") }}
+                    {{ css_devel_file(theme, "visibility-manager.css") }}
+                    {{ css_devel_file(theme, "icons.css") }}
+
+                    {{ css_devel_file(theme, "widgets/check-button.css") }}
+                    {{ css_devel_file(theme, "widgets/choice-buttons.css") }}
+                    {{ css_devel_file(theme, "widgets/color-combo.css") }}
+                    {{ css_devel_file(theme, "widgets/combo.css") }}
+                    {{ css_devel_file(theme, "widgets/common.css") }}
+                    {{ css_devel_file(theme, "widgets/common-buttons.css") }}
+                    {{ css_devel_file(theme, "widgets/labels.css") }}
+                    {{ css_devel_file(theme, "widgets/progress-disk.css") }}
+                    {{ css_devel_file(theme, "widgets/slider.css") }}
+                    {{ css_devel_file(theme, "widgets/input.css") }}
+                    {{ css_devel_file(theme, "widgets/updown.css") }}
+                    {{ css_devel_file(theme, "widgets/various.css") }}
+
+                    {{ css_devel_file(theme, "messages.css") }}
+                    {{ css_devel_file(theme, "global-glass.css") }}
+                    {{ css_devel_file(theme, "structured-view.css") }}
+                    {{ css_devel_file(theme, "progress-view.css") }}
+                    {{ css_devel_file(theme, "icon-label-view.css") }}
+
+                    {{ css_devel_file(theme, "pages/breadcrumbs.css") }}
+                    {{ css_devel_file(theme, "pages/common-pages.css") }}
+                    {{ css_devel_file(theme, "pages/page.css") }}
+
+                    {{ css_devel_file(theme, "forms/common-fields.css") }}
+                    {{ css_devel_file(theme, "forms/common-forms.css") }}
+                    {{ css_devel_file(theme, "forms/form.css") }}
+                    {{ css_devel_file(theme, "forms/form-button.css") }}
+                    {{ css_devel_file(theme, "forms/form-field.css") }}
+
+                    {{ css_devel_file(theme, "lists.css") }}
+                    {{ css_devel_file(theme, "tables.css") }}
+
+                    {{ css_devel_file(theme, "theme.css") }}
+                {% else %}
+                    <link rel="stylesheet"
+                          type="text/css"
+                          href="{{ static_url }}/{{ name }}-bundle-{{ theme }}.css?h={{ build_hash }}"
+                          disabled
+                          theme="{{ theme }}"/>
+                {% endif %}
+            {% endfor %}
+        {% endblock %}
+        {% block style %}{% endblock %}
+
+        <script type="text/javascript">
+            if (localStorage) {
+                document.documentElement.style.background = localStorage.getItem('theme.background-color') || ''
+            }
+        </script>
+
+        <noscript>This application requires JavaScript!</noscript>
+
+        {% block script %}
+            {{ main_script_file() }}
+        {% endblock %}
+    </head>
+    <body></body>
+</html>

package/qui/templates/service-worker.js

@@ -0,0 +1,188 @@
+/*
+ * This JS file is run in a service worker context.
+ */
+
+/* eslint-disable no-undef */
+
+const MESSAGE_ACTIVATE = 'qui-activate'
+const DEF_APP_NAME = 'qui-app'
+const DEF_APP_VERSION = 'unknown-version'
+const DEF_BUILD_HASH = 'unknown-hash'
+const DEF_CACHE_URL_REGEX = '.*\\.(svg|png|gif|jpg|jpe?g|ico|woff|html|json|js|css)$'
+
+
+let cacheName
+let debug = false
+let appName = '__app_name_placeholder__'
+let appVersion = '__app_version_placeholder__'
+let buildHash = '__build_hash_placeholder__'
+let cacheURLRegex = '__cache_url_regex_placeholder__'
+let queryArguments = null
+
+
+function getQueryArgument(name, def = null) {
+    if (queryArguments == null) {
+        let queryString = self.location.search.substring(1)
+        queryArguments = new Map(queryString.split('&').map(function (keyValuePair) {
+            let splits = keyValuePair.split('=');
+            let key = decodeURIComponent(splits[0]);
+            let value = decodeURIComponent(splits[1]);
+            if (value.indexOf(',') >= 0) {
+                value = value.split(',');
+            }
+
+            return [key, value];
+        }))
+    }
+
+    let value = queryArguments.get(name)
+    if (value == null) {
+        value = def
+    }
+
+    return value
+}
+
+function setup() {
+    /* If webpack did not replace the placeholder... */
+    if (appName.startsWith('__app_name_')) {
+        appName = DEF_APP_NAME
+    }
+    if (appVersion.startsWith('__app_version_')) {
+        appVersion = DEF_APP_VERSION
+    }
+    if (buildHash.startsWith('__build_hash_')) {
+        buildHash = getQueryArgument('h', DEF_BUILD_HASH)
+    }
+    if (cacheURLRegex.startsWith('__cache_url_regex_')) {
+        cacheURLRegex = DEF_CACHE_URL_REGEX
+    }
+    if (getQueryArgument('debug') === 'true') {
+        debug = true
+    }
+
+    /* Transform into RegExp instance */
+    cacheURLRegex = new RegExp(cacheURLRegex, 'i')
+
+    cacheName = `${appName}-cache-${buildHash}`
+    logDebug(`using cache name ${cacheName}`)
+}
+
+
+function formatLogMessage(message) {
+    return 'Service Worker: ' + message
+}
+
+function logDebug(message) {
+    console.debug(formatLogMessage(message))
+}
+
+function logInfo(message) {
+    console.info(formatLogMessage(message))
+}
+
+function logWarn(message) {
+    console.warn(formatLogMessage(message))
+}
+
+function logError(message) {
+    console.error(formatLogMessage(message))
+}
+
+
+function sendClientMessage(message, uncontrolled = false) {
+    self.clients.matchAll({includeUncontrolled: uncontrolled}).then(function (clients) {
+        clients.forEach(function (client) {
+            client.postMessage(message)
+        })
+    })
+}
+
+function shouldCacheRequest(request) {
+    return request.url.match(cacheURLRegex) && (request.method === 'GET')
+}
+
+function shouldCacheResponse(response) {
+    return (response &&
+            response.status === 200 &&
+            response.type === 'basic')
+}
+
+
+self.addEventListener('activate', function (event) {
+
+    function deleteCache(name) {
+        logDebug(`deleting cache ${name}`)
+        caches.delete(name)
+    }
+
+    event.waitUntil(
+        /* Become available to all pages */
+        self.clients.claim().then(function () {
+            /* Clear all caches starting with our app name */
+            caches.keys().then(function (cacheNames) {
+                return Promise.all(cacheNames
+                                   .filter(name => name.startsWith(`${appName}-`))
+                                   .map(name => deleteCache(name)))
+            })
+        })
+    )
+})
+
+self.addEventListener('fetch', function (event) {
+    if (debug) { /* Don't use cache in debug mode */
+        return
+    }
+    if (!shouldCacheRequest(event.request)) {
+        return
+    }
+
+    let url = event.request.url
+    /* Ensure URL has build hash */
+    if (!url.includes('?h=') && !url.includes('&h=')) {
+        if (url.includes('?')) {
+            url += `&h=${buildHash}`
+        }
+        else {
+            url += `?h=${buildHash}`
+        }
+    }
+
+    let request = new Request(url, event.request)
+
+    event.respondWith(
+        caches.match(request, {ignoreSearch: false}).then(function (response) {
+            if (response) {
+                return response
+            }
+
+            return fetch(request.clone()).then(function (response) {
+                if (!shouldCacheResponse(response)) {
+                    return response
+                }
+
+                let responseToCache = response.clone()
+                caches.open(cacheName).then(function (cache) {
+                    cache.put(request.clone(), responseToCache)
+                })
+
+                return response.clone()
+            })
+        })
+    )
+})
+
+self.addEventListener('message', function (message) {
+    switch (message.data.type) {
+        case MESSAGE_ACTIVATE:
+            logInfo('received activation message')
+            self.skipWaiting()
+            break
+
+        default:
+            logWarn(`unexpected service worker message ${message.data.type}`)
+    }
+})
+
+
+setup()

package/qui/web/tornado.py

@@ -0,0 +1,220 @@
+import logging
+import os
+import re
+
+from re import Match
+from typing import Any
+
+from tornado.web import RequestHandler, StaticFileHandler, URLSpec
+
+from qui import __file__ as qui_package_path
+from qui import constants, exceptions, j2template, settings
+
+
+JS_MODULE_PATH_RE = re.compile(rb"\'(\$qui|\$app|\$node|)([/.][A-Za-z0-9_./$-]+\.jsm?)\'")
+
+logger = logging.getLogger(__name__)
+
+
+class TemplateHandler(RequestHandler):
+    def prepare(self) -> None:
+        self.set_header("Cache-Control", "no-cache, no-store, must-revalidate, max-age=0")
+
+    def get_context(self, path: str = "", path_offs: int = 0) -> dict[str, Any]:
+        context = settings.make_context(self.request)
+
+        # If using static URL that is relative to frontend URL prefix, adjust it to a relative path matching currently
+        # requested frontend path
+        static_url = context["static_url"]
+        if static_url.startswith(f"{settings.frontend_url_prefix}/"):
+            slashes = path.count("/") + path_offs
+            if slashes == 0:
+                prefix = f"{settings.frontend_url_prefix}/"
+            elif slashes > 1:
+                prefix = "/".join([".."] * (slashes - 1)) + "/"
+
+            else:
+                prefix = ""
+
+            context["static_url"] = prefix + static_url[len(settings.frontend_url_prefix) + 1 :]
+
+        return context
+
+    async def render(self, template_name: str, context: dict[str, Any] | None = None) -> None:
+        if context is None:
+            context = self.get_context()
+
+        env = j2template.get_env()
+        template = env.get_template(template_name)
+        template_str = await template.render_async(**context)
+
+        await self.finish(template_str)
+
+
+class JSModuleMapperStaticFileHandler(StaticFileHandler):
+    def __init__(self, *args, **kwargs) -> None:
+        self._mapping = {
+            b"$qui": f"/{settings.static_url}/qui/js".encode(),
+            b"$app": f"/{settings.static_url}/app/js".encode(),
+            b"$node": f"/{settings.static_url}/app/node_modules".encode(),
+        }
+
+        self._mapped_content: bytes | None = None
+
+        super().__init__(*args, **kwargs)
+
+    def get_content_size(self) -> int:
+        return len(self.get_mapped_content())
+
+    def get_content(self, abspath: str, start: int | None = None, end: int | None = None) -> bytes:
+        return self.get_mapped_content()
+
+    @classmethod
+    def get_content_version(cls, abspath: str) -> str:
+        return ""
+
+    def replace_path(self, match: Match[bytes]) -> bytes:
+        prefix = match.group(1)
+        path = match.group(2)
+
+        prefix = self._mapping.get(prefix, prefix)
+        path = path + f"?h={settings.build_hash}".encode()
+
+        if path.startswith(b"."):
+            base_prefix = b""
+        else:
+            base_prefix = self.request.headers.get(constants.BASE_PREFIX_HEADER, "/")
+            base_prefix = base_prefix.rstrip("/").encode()
+
+        return b"'" + base_prefix + prefix + path + b"'"
+
+    def get_mapped_content(self) -> bytes:
+        if self._mapped_content is None:
+            content = b"".join(super().get_content(self.absolute_path))
+
+            if self.absolute_path.endswith(".js"):
+                content = JS_MODULE_PATH_RE.sub(self.replace_path, content)
+
+            self._mapped_content = content
+
+        return self._mapped_content
+
+    def should_return_304(self) -> bool:
+        return False
+
+
+class RedirectFrontendHandler(RequestHandler):
+    def get(self) -> None:
+        base_prefix = self.request.headers.get(constants.BASE_PREFIX_HEADER, "/")
+        if not base_prefix.endswith("/"):
+            base_prefix += "/"
+
+        self.redirect(f"{base_prefix}{settings.frontend_url_prefix}/")
+
+
+class FrontendHandler(TemplateHandler):
+    async def get(self, path: str) -> None:
+        await self.render("index.html", self.get_context(path))
+
+
+class ManifestHandler(TemplateHandler):
+    PARAMS = [
+        "display_name",
+        "display_short_name",
+        "description",
+        "version",
+        "theme_color",
+        "background_color",
+    ]
+
+    async def get(self) -> None:
+        context = self.get_context(path_offs=1)
+        for param in self.PARAMS:
+            value = self.get_query_argument(param, None)
+            if value is not None:
+                context[param] = value
+
+        self.set_header("Content-Type", 'application/manifest+json; charset="utf-8"')
+        await self.render("manifest.json", context)
+
+
+class ServiceWorkerHandler(TemplateHandler):
+    async def get(self) -> None:
+        self.set_header("Content-Type", 'application/javascript; charset="utf-8"')
+        await self.render("service-worker.js")
+
+
+def make_routing_table() -> list[URLSpec]:
+    frontend_dir = settings.frontend_dir
+    if not settings.debug:  # in production mode, frontend files are found under the dist frontend subfolder
+        frontend_dir += "/dist"
+
+    # Look for frontend dir in all available package dirs
+    package = __import__(settings.package_name)
+    for package_dir in list(package.__path__):
+        frontend_path = os.path.join(package_dir, frontend_dir)
+        if os.path.exists(frontend_path):
+            break
+
+    else:
+        raise exceptions.QUIException(f"Cannot find frontend dir in package {settings.package_name}")
+
+    spec_list = []
+
+    static_url = settings.static_url
+    if not static_url.startswith("/"):
+        static_url = f"/{static_url}"
+
+    if settings.debug:
+        # In debug mode, we serve QUI static files from QUI folder
+        qui_path = os.path.join(os.path.dirname(qui_package_path), "..")
+        qui_path = os.path.abspath(qui_path)
+
+        spec_list.append(
+            URLSpec(
+                rf"^{static_url}/qui/(.*)$",
+                JSModuleMapperStaticFileHandler,
+                {"path": qui_path},
+                name="static-qui",
+            )
+        )
+
+        spec_list.append(
+            URLSpec(
+                rf"^{static_url}/(?:app/)?(.*)$",
+                JSModuleMapperStaticFileHandler,
+                {"path": frontend_path},
+                name="static-app",
+            )
+        )
+
+    else:
+        spec_list.append(
+            URLSpec(
+                rf"^{static_url}/(.*)$",
+                StaticFileHandler,
+                {"path": frontend_path},
+                name="static",
+            )
+        )
+
+    spec_list += [
+        URLSpec(r"^/?$", RedirectFrontendHandler, name="redirect-frontend"),
+        URLSpec(
+            rf"^/{settings.frontend_url_prefix}/service-worker.js$",
+            ServiceWorkerHandler,
+            name="service-worker",
+        ),
+        URLSpec(
+            rf"^/{settings.frontend_url_prefix}/manifest.json$",
+            ManifestHandler,
+            name="manifest",
+        ),
+        URLSpec(
+            rf"^/{settings.frontend_url_prefix}(?P<path>.*)",
+            FrontendHandler,
+            name="frontend",
+        ),
+    ]
+
+    return spec_list

package/scripts/postinstall.sh

@@ -0,0 +1,10 @@
+#!/bin/sh
+
+# Create symlinks to libs
+echo "Creating symlinks to libs"
+cd js/lib
+ln -sf ../../../../jquery/dist/jquery.js .
+ln -sf  ../../../../jquery-mousewheel/jquery.mousewheel.js .
+ln -sf ../../../../jquery-ui-dist/jquery-ui.js
+ln -sf ../../../../js-logger/src/logger.js
+ln -sf ../../../../pepjs/dist/pep.js

package/webpack/webpack-adjust-css-urls-loader.js

@@ -0,0 +1,36 @@
+
+const loaderUtils = require('loader-utils')
+
+
+module.exports = function (source) {
+    const options = loaderUtils.getOptions(this)
+    const appLessPath = options.appLessPath
+    const quiLessPath = options.quiLessPath
+
+    let filename
+    if (this._module.resource.startsWith(appLessPath)) {
+        filename = this._module.resource.slice(appLessPath.length)
+    }
+    else if (this._module.resource.startsWith(quiLessPath)) {
+        filename = this._module.resource.slice(quiLessPath.length)
+    }
+    else { /* Cannot identify source file root path */
+        return source
+    }
+
+    let dirsInPath = (filename.match(/\//g) || []).length - 1
+    if (dirsInPath < 0) {
+        return source
+    }
+
+    dirsInPath += options.additionalDirs || 0
+
+    /* Generate a sequence of "../" as long as the number of dirs in path */
+    let relPath = [...Array(dirsInPath).keys()].map(() => '../').join('')
+    if (!relPath) {
+        return source
+    }
+
+    /* Adjust any url('...') by prefixing with the relative path, unless we deal with absolute paths */
+    return source.replace(new RegExp('url\\(([\'"])?(?!http)(./)?([^/].*)', 'g'), 'url($1' + relPath + '$3')
+}