Cleaned up widget code

Author: rimi-itk

.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

.prettierignore

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

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

build/standalone/assets/tidy_feedback.css

@@ -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 -g 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:

build/standalone/tidy_feedback.min.js

@@ -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).

compose.yaml

@@ -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}}
 

docs/widget.md

@@ -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/Taskfile.yml

@@ -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;