feature/svelte styles

.github/workflows/pr.yaml

@@ -61,3 +61,16 @@ jobs:
 
             - name: Build assets
               run: task coding-standards:shell:check
+
+    check-widget-coding-standards:
+        name: Check widget coding standards
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+
+            - uses: arduino/setup-task@v2
+              with:
+                  repo-token: ${{ secrets.GITHUB_TOKEN }}
+
+            - name: Lint widget
+              run: task compose -- run --rm prettier 'widget/' --check

.github/workflows/yaml.yaml

@@ -36,5 +36,14 @@ jobs:
             - run: |
                   docker network create frontend
 
+            # https://github.com/mxschmitt/action-tmate?tab=readme-ov-file#manually-triggered-debug
+            # Enable tmate debugging if debug logging is enabled (cf.
+            # https://docs.github.com/en/actions/writing-workflows/choosing-what-your-workflow-does/accessing-contextual-information-about-workflow-runs#runner-context)
+            - name: Setup tmate session
+              uses: mxschmitt/action-tmate@v3
+              with:
+                  limit-access-to-actor: false
+              if: 1 == runner.debug
+
             - run: |
                   docker compose run --rm prettier '**/*.{yml,yaml}' --check

.prettierignore

@@ -1,2 +1,5 @@
-# Ignore Svelte stuff
-widget/
+build/
+
+# Ignore some Svelte stuff
+widget/.svelte-kit/
+widget/static/

CHANGELOG.md

@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.0.0] - 2025-07-10
 
+- [PR-33](https://github.com/itk-dev/tidy-feedback/pull/33)
+  - Fixed dynamic class in Svelte
+  - Cleaned up widget code
 - [PR-30](https://github.com/itk-dev/tidy-feedback/pull/30)
   29: Replaced Bootstrap with CoreUI
 - [PR-28](https://github.com/itk-dev/tidy-feedback/pull/28)

Taskfile.yml

@@ -45,6 +45,8 @@ tasks:
         silent: true
 
     translations:extract:
+        deps:
+            - docker:pull
         cmds:
             - task compose -- run --rm symfony /app/task/scripts/translations-extract
             - task: coding-standards:yaml:apply
@@ -55,23 +57,29 @@ tasks:
 
     coding-standards:apply:
         desc: "Apply coding standards"
+        deps:
+            - docker:pull
         cmds:
             - task: coding-standards:assets:apply
             - task: coding-standards:composer:apply
             - task: coding-standards:markdown:apply
             - task: coding-standards:php:apply
             - task: coding-standards:twig:apply
+            - task: coding-standards:widget:apply
             - task: coding-standards:yaml:apply
         silent: true
 
     coding-standards:check:
         desc: "Apply coding standards"
+        deps:
+            - docker:pull
         cmds:
             - task: coding-standards:assets:check
             - task: coding-standards:composer:check
             - task: coding-standards:markdown:check
             - task: coding-standards:php:check
             - task: coding-standards:twig:check
+            - task: coding-standards:widget:check
             - task: coding-standards:yaml:check
         silent: true
 
@@ -86,6 +94,17 @@ tasks:
             - task: coding-standards:assets:apply
             - task compose -- run --rm prettier 'assets/' --check
 
+    coding-standards:widget:apply:
+        desc: "Apply coding standards for widget"
+        cmds:
+            - task compose -- run --rm prettier 'widget/' --write
+
+    coding-standards:widget:check:
+        desc: "Apply and check coding standards for widget"
+        cmds:
+            - task: coding-standards:widget:apply
+            - task compose -- run --rm prettier 'widget/' --check
+
     coding-standards:composer:apply:
         desc: "Apply coding standards for Composer"
         cmds:
@@ -202,6 +221,12 @@ tasks:
         cmds:
             - "{{.APP_DOCKER_COMPOSE}} {{.CLI_ARGS}}"
 
+    docker:pull:
+        cmds:
+            - COMPOSE_PROFILES='*' task compose -- pull
+            - COMPOSE_PROFILES='*' task compose -- build
+        silent: true
+
     default:
         cmds:
             - task --list-all

compose.yaml

@@ -25,7 +25,21 @@ services:
         # https://github.com/prettier/prettier/issues/15206) have an official
         # docker image.
         # https://hub.docker.com/r/jauderho/prettier is good candidate (cf. https://hub.docker.com/search?q=prettier&sort=updated_at&order=desc)
-        image: jauderho/prettier
+        # image: jauderho/prettier
+        build:
+            # Custom image to include https://github.com/sveltejs/prettier-plugin-svelte
+            dockerfile_inline: |
+                # https://github.com/jauderho/dockerfiles/blob/main/prettier/Dockerfile
+                FROM node:24
+
+                RUN npm install --global prettier prettier-plugin-svelte
+
+                WORKDIR /work
+
+                # Help prettier find our globally installed plugin
+                # (cf. https://github.com/prettier/prettier/issues/15141#issuecomment-2624767782)
+                ENTRYPOINT ["prettier", "--plugin", "/usr/local/lib/node_modules/prettier-plugin-svelte/plugin.js"]
+                CMD ["--help"]
         volumes:
             - ./:/work
         profiles:

docs/widget.md

@@ -82,6 +82,7 @@ When done with development, run
 task assets:build
 ```
 
-to build the widget for production and copy the resulting Javascript file
-([tidy_feedback.min.js](../widget/static/dist/standalone/tidy_feedback.min.js)) to the [`build`
-folder](../build/standalone) (which is under git control).
+to build the widget for production and copy the resulting files
+([tidy_feedback.min.js](../widget/static/dist/tidy_feedback.min.js) and
+[tidy_feedback.css](../widget/static/dist/assets/tidy_feedback.css)) to the [`build` folder](../build/standalone) (which
+is under git control).

widget/.prettierrc

@@ -1,15 +1,11 @@
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [
-		{
-			"files": "*.svelte",
-			"options": {
-				"parser": "svelte"
-			}
-		}
-	]
-}
+useTabs: true
+singleQuote: true
+trailingComma: none
+printWidth: 100
+# prettier-plugin-svelte is installed in our custom prettier docker image (cf. ../compose.yaml)
+# plugins:
+#   - prettier-plugin-svelte
+overrides:
+  - files: '*.svelte'
+    options:
+      parser: svelte

widget/Taskfile.yml

@@ -22,15 +22,15 @@ tasks:
       - docker compose run --rm node npx standalone build --all
 
   dev:
-    desc: "Open widget dev site and start Vite dev server"
+    desc: 'Open widget dev site and start Vite dev server'
     deps: [install]
     cmds:
       # https://stackoverflow.com/a/73821896
       # - docker compose run --env ORIGIN=http://localhost:3000 --rm --publish '{{.APP_PORT}}:{{.APP_PORT}}' node npm run dev -- --port {{.APP_PORT}} --host
       - docker compose run --name tidy-feedback-widget --rm --publish '{{.APP_PORT}}:{{.APP_PORT}}' node npm run dev -- --port {{.APP_PORT}} --host
 
   open:
-    desc: "Open widget dev site"
+    desc: 'Open widget dev site'
     cmds:
       - open "{{.WIDGET_URL}}"
 
@@ -40,14 +40,19 @@ tasks:
       - task npm -- install
     internal: true
 
-  lint:
-    desc: "Apply and check widget coding standards"
+  format:
+    desc: 'Apply and check widget coding standards'
     cmds:
       - task npm -- run format
+
+  lint:
+    desc: 'Apply and check widget coding standards'
+    cmds:
+      - task: format
       - task npm -- run lint
 
   npm:
-    desc: "Run npm command. Example: task npm -- install"
+    desc: 'Run npm command. Example: task npm -- install'
     cmds:
       - docker compose run --rm node npm {{.CLI_ARGS}}
 

widget/src/_standalone/tidy_feedback/embed.ts

@@ -1,5 +1,5 @@
-import { autoEmbedWithTarget } from 'svelte-standalone';
+import { autoEmbedOnBody } from 'svelte-standalone';
 
 import Tidy_feedback from './index.svelte';
 
-autoEmbedWithTarget(Tidy_feedback, 'tidy_feedback');
+autoEmbedOnBody(Tidy_feedback, 'tidy_feedback');

widget/src/_standalone/tidy_feedback/index.svelte

@@ -19,6 +19,11 @@
 		return {};
 	})();
 
+	const MESSAGE_TYPE_INFO = 'info';
+	const MESSAGE_TYPE_DANGER = 'danger';
+	const MESSAGE_TYPE_ERROR = 'error';
+	const MESSAGE_TYPE_SUCCESS = 'success';
+
 	let formContainer;
 	let region;
 	let formHidden = $state(true);
@@ -27,12 +32,12 @@
 
 	let messageTimeout = null;
 	let message = $state('');
-	let messageType = $state('info');
+	let messageType = $state(MESSAGE_TYPE_INFO);
 	const messageHideDelay = config.messageHideDelay ?? 0;
 
 	const t = (text) => config.messages?.[text] ?? text + ' (missing translation)';
 
-	const showMessage = (msg, type = 'info') => {
+	const showMessage = (msg, type = MESSAGE_TYPE_INFO) => {
 		if (messageTimeout) {
 			clearTimeout(messageTimeout);
 		}
@@ -75,7 +80,6 @@
 
 	const submitForm = async (target) => {
 		// https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement#instance_methods
-		// @todo This does not actually validate the form elements!
 		const isValid = form.reportValidity();
 		if (isValid) {
 			const data = {};
@@ -97,7 +101,7 @@
 				data.image = image;
 			} catch (error) {
 				console.error(error);
-				showMessage('Error taking screenshot', 'danger');
+				showMessage('Error taking screenshot', MESSAGE_TYPE_DANGER);
 			}
 
 			const formData = new FormData(form);
@@ -136,17 +140,19 @@
 				.then((response) => {
 					if (201 === response.status) {
 						hideForm(true);
-						showMessage(t('Feedback created'), 'success');
+						showMessage(t('Feedback created'), MESSAGE_TYPE_SUCCESS);
 					} else {
 						response
 							.json()
 							.then((data) =>
-								showMessage('Error creating feedback: ' + JSON.stringify(data), 'danger')
+								showMessage('Error creating feedback: ' + JSON.stringify(data), MESSAGE_TYPE_DANGER)
 							)
-							.catch((error) => showMessage('Error creating feedback: ' + error, 'danger'));
+							.catch((error) =>
+								showMessage('Error creating feedback: ' + error, MESSAGE_TYPE_DANGER)
+							);
 					}
 				})
-				.catch((reason) => showMessage(reason, 'error'));
+				.catch((reason) => showMessage(reason, MESSAGE_TYPE_ERROR));
 		}
 	};
 
@@ -192,11 +198,21 @@
 
 <div data-capture="exclude">
 	{#if message}
-		<div class="tidy-feedback-message-wrapper container position-fixed top">
+		<div class="tidy-feedback-message-wrapper container position-fixed top-0">
 			<row class="row">
 				<div class="col-md-6 offset-md-3 mt-3">
 					<div
-						class="tidy-feedback-message alert alert-{messageType} alert-dismissible"
+						class={[
+							'tidy-feedback-message',
+							'alert',
+							'alert-dismissible',
+							{
+								'alert-info': MESSAGE_TYPE_INFO === messageType,
+								'alert-danger': MESSAGE_TYPE_DANGER === messageType,
+								'alert-error': MESSAGE_TYPE_ERROR === messageType,
+								'alert-sucess': MESSAGE_TYPE_SUCCESS === messageType
+							}
+						]}
 						role="alert"
 					>
 						{message}

widget/src/_standalone/tidy_feedback/styles/widget.scss

@@ -1,6 +1,6 @@
-@use "@coreui/coreui/scss/themes/bootstrap/bootstrap";
-@use './variables.scss';
-@use './btn.scss';
+@use '@coreui/coreui/scss/themes/bootstrap/bootstrap';
+@use './variables';
+@use './btn';
 
 .tidy-feedback-start {
 	position: fixed;

widget/src/app.html

@@ -2,7 +2,6 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>