interactor: using svelte create-app

.github/workflows/ci.yml

@@ -5,6 +5,34 @@ name: CI tasks
 on: [push, pull_request]
 
 jobs:
+  interactor_static:
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        working-directory: apps/interactor/webapp/interactor
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 21.7.3
+
+      - name: Install deps
+        shell: bash
+        run: npm ci
+
+      - name: Build
+        shell: bash
+        run: npm run build
+
+      - name: Upload Artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: webapp
+          path: apps/interactor/webapp/interactor/build/
+
   tests:
     runs-on: ${{ matrix.os }}
     strategy:

.github/workflows/release-interactor.yml

@@ -11,12 +11,46 @@ on:
 name: Release Photons Interactor
 
 jobs:
+  interactor_static:
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        working-directory: apps/interactor/webapp/interactor
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 21.7.3
+
+      - name: Install deps
+        shell: bash
+        run: npm ci
+
+      - name: Build
+        shell: bash
+        run: npm run build
+
+      - name: Upload Artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: webapp
+          path: apps/interactor/webapp/interactor/build/
+
   build:
     name: Create the package
     runs-on: ubuntu-latest
     environment: docker
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
+
+      - name: Download static artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: webapp
+          path: apps/interactor/webapp/interactor/build/
 
       - uses: actions/setup-python@v4
         with:

apps/interactor/interactor/addon.py

@@ -1,11 +1,16 @@
+import importlib
 import logging
+import shlex
+import subprocess
 
 import aiohttp
 from delfick_project.addons import addon_hook
+from delfick_project.norms import sb
 from interactor.errors import InteractorError
 from interactor.options import Options
 from interactor.server import InteractorServer as Server
 from photons_app import helpers as hp
+from photons_app.errors import PhotonsAppError
 from photons_app.formatter import MergedOptionStringFormatter
 from photons_app.tasks import task_register as task
 from photons_web_server.server import WebServerTask
@@ -108,3 +113,46 @@ async def execute_task(self, **kwargs):
 
             except aiohttp.client_exceptions.ClientConnectorError as error:
                 raise InteractorError(f"Healthcheck failed: {error}")
+
+
+class interactor_assets(task.Task):
+    reference = task.provides_reference()
+
+    async def execute_task(self, **kwargs):
+        extra = self.photons_app.extra
+        assets = self.collector.configuration["interactor"].assets
+        available = ["run", "install", "dev", "build"]
+
+        if self.reference is sb.NotSpecified:
+            raise PhotonsAppError("Please specify what command to run", available=available)
+
+        assets.ensure_npm()
+
+        try:
+            if self.reference == "install":
+                assets.run("install", *shlex.split(extra))
+                return
+
+            if self.reference == "run":
+                assets.run(*shlex.split(extra))
+                return
+
+            if assets.needs_install:
+                assets.run("ci", no_node_env=True)
+
+            if self.reference == "dev":
+                assets.run("run", "watch")
+
+            elif self.reference == "build":
+                assets.run("run", "build")
+
+            else:
+                raise PhotonsAppError(
+                    "Didn't get a recognised command", want=self.reference, available=available
+                )
+        except subprocess.CalledProcessError as error:
+            raise PhotonsAppError("Failed to run command", error=error)
+
+
+if (importlib.resources.files("interactor") / ".." / "webapp" / "interactor" / "src").exists():
+    task.register(task_group="Interactor")(interactor_assets)

apps/interactor/interactor/options.py

@@ -1,7 +1,11 @@
 import os
+import pathlib
+import shutil
+import subprocess
 
 from delfick_project.norms import dictobj, sb
 from interactor.zeroconf import Zeroconf
+from photons_app.errors import PhotonsAppError
 from photons_app.formatter import MergedOptionStringFormatter
 
 
@@ -21,11 +25,42 @@ def normalise_filled(self, meta, val):
         return sb.integer_spec().normalise(meta, val)
 
 
+class Assets(dictobj.Spec):
+    src = dictobj.Field(
+        sb.overridden("{interactor/../webapp/interactor:resource}"),
+        formatted=True,
+        help="Folder where we can find the source of the assets",
+    )
+
+    @property
+    def dist(self) -> str:
+        return str(pathlib.Path(self.src) / "build")
+
+    def ensure_npm(self):
+        if not shutil.which("npm"):
+            raise PhotonsAppError("Couldn't find npm, I suggest you use nvm")
+
+    @property
+    def needs_install(self) -> bool:
+        return (
+            not os.path.exists(os.path.join(self.src, "node_modules"))
+            or os.environ.get("REBUILD") == 1
+        )
+
+    def run(self, *args) -> None:
+        subprocess.check_call(["npm", *args], cwd=self.src)
+
+
 class Options(dictobj.Spec):
     host = dictobj.Field(host_spec, help="The host to serve the server on")
 
     port = dictobj.Field(port_spec, help="The port to serve the server on")
 
+    assets = dictobj.Field(
+        Assets.FieldSpec(formatter=MergedOptionStringFormatter),
+        help="Options for where assets can be found",
+    )
+
     zeroconf = dictobj.Field(
         Zeroconf.FieldSpec(formatter=MergedOptionStringFormatter),
         help="Options for zeroconf dns discovery",

apps/interactor/interactor/server.py

@@ -100,6 +100,8 @@ async def setup_routes(self):
             message_from_exc=InteractorMessageFromExc,
         )
 
+        self.app.static("/", self.server_options.assets.dist, index="index.html")
+
     async def before_start(self):
         await self.server_options.zeroconf.start(
             self.tasks, self.server_options.host, self.server_options.port, self.sender, self.finder

apps/interactor/pyproject.toml

@@ -36,6 +36,7 @@ path = "interactor/__init__.py"
 
 [tool.hatch.build]
 artifacts = [
+    "webapp/interactor/build/*",
     "interactor/database/migrations/*",
     "!interactor/database/migrations/*.pyc",
 ]

apps/interactor/webapp/interactor/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

apps/interactor/webapp/interactor/.eslintrc.cjs

@@ -0,0 +1,31 @@
+/** @type { import("eslint").Linter.Config } */
+module.exports = {
+    root: true,
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:svelte/recommended',
+        'prettier'
+    ],
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint'],
+    parserOptions: {
+        sourceType: 'module',
+        ecmaVersion: 2020,
+        extraFileExtensions: ['.svelte']
+    },
+    env: {
+        browser: true,
+        es2017: true,
+        node: true
+    },
+    overrides: [
+        {
+            files: ['*.svelte'],
+            parser: 'svelte-eslint-parser',
+            parserOptions: {
+                parser: '@typescript-eslint/parser'
+            }
+        }
+    ]
+};

apps/interactor/webapp/interactor/.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

apps/interactor/webapp/interactor/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

apps/interactor/webapp/interactor/.prettierignore

@@ -0,0 +1,4 @@
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

apps/interactor/webapp/interactor/.prettierrc

@@ -0,0 +1,17 @@
+{
+    "useTabs": true,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "printWidth": 100,
+    "plugins": [
+        "prettier-plugin-svelte"
+    ],
+    "overrides": [
+        {
+            "files": "*.svelte",
+            "options": {
+                "parser": "svelte"
+            }
+        }
+    ]
+}