frontend/pdf/print: set type to module in package.json

And switch to esm syntax for the matchingTranslationKeys eslint plugin.

Because there cannot be dashes in an identifier, the rule is now called
'matchingTranslationKeys'.

jest-serializer-vue-tjw loads the vue config with require,
and seems to expect a commonjs module.
We switched to a esm module, and now the structure is not
pluginOptions.jestSerializer,
but
default.pluginOptions.jestSerializer
-> with the added export we can support vue itself and jest-serializer-vue-tjw.

This might enable us to update vite-plugin-comlink
- #6220
And might help with
- #6038

Fix checked in dist files in pdf/dist/

Author: BacLuc

common/eslint-local-rules/__tests__/matchingTranslationKeys.spec.js

@@ -1,11 +1,9 @@
-import rule from '../matchingTranslationKeys.js'
+import createMatchingTranslationKeys from '../matchingTranslationKeys.js'
 import { RuleTester } from 'eslint'
-import path from 'path'
-import fs from 'fs'
-import utils from 'eslint-plugin-vue/lib/utils/index.js'
 import { describe, it } from 'vitest'
 import localRules from 'eslint-plugin-local-rules'
 import globals from 'globals'
+import utils from 'eslint-plugin-vue/lib/utils/index.js'
 import eslintParser from 'vue-eslint-parser'
 
 RuleTester.describe = describe
@@ -28,7 +26,7 @@ const ruleTester = new RuleTester({
     },
   },
 })
-const ruleInstance = rule(path, utils, fs)
+const ruleInstance = createMatchingTranslationKeys(utils)
 
 const options = [
   {

common/eslint-local-rules/__tests__/packageDirectory.spec.js

@@ -1,10 +1,8 @@
 import { describe, expect, it } from 'vitest'
-import factory from '../packageDirectory.js'
+import { packageDirectory } from '../packageDirectory.js'
 import path from 'path'
 import fs from 'fs'
 
-const { packageDirectory } = factory(path, fs)
-
 describe('packageDirectory', () => {
   it('resolves the location of the closest package.json', () => {
     const packageJsonFile = path.resolve(__dirname, '../../package.json')

common/eslint-local-rules/matchingTranslationKeys.js

@@ -1,5 +1,7 @@
-module.exports = (path, utils, fs) => {
-  const { packageDirectory } = require('./packageDirectory.js')(path, fs)
+import { packageDirectory } from "./packageDirectory.js"
+import path from "path"
+
+export default function createMatchingTranslationKeys(utils) {
 
   /**
    * Convert a file path to our convention for translation key structures

common/eslint-local-rules/packageDirectory.js

@@ -1,5 +1,7 @@
-module.exports = (path, fs) => ({
-  packageDirectory: function (filename) {
+import path from "path";
+import fs from "fs";
+
+export function packageDirectory(filename) {
     const { root } = path.parse(filename)
 
     let directory = filename
@@ -16,5 +18,4 @@ module.exports = (path, fs) => ({
     }
 
     return ''
-  },
-})
+}

frontend/babel.config.js

@@ -1,8 +1,7 @@
-module.exports = {
-  presets: ['@vue/app'],
-  env: {
-    test: {
-      plugins: ['require-context-hook'],
-    },
+// noinspection JSUnusedGlobalSymbols
+export const presets = ['@vue/app']
+export const env = {
+  test: {
+    plugins: ['require-context-hook'],
   },
 }

frontend/docker-setup.sh

@@ -4,10 +4,10 @@ set -euo pipefail
 BASEDIR=$(dirname "$0")
 PDF_DIST=$BASEDIR"/src/pdf"
 
-if [ ! -f "$PDF_DIST/pdf.mjs" ] || [ ! -f "$PDF_DIST/prepareInMainThread.mjs" ]; then
+if [ ! -f "$PDF_DIST/pdf.js" ] || [ ! -f "$PDF_DIST/prepareInMainThread.js" ]; then
     # Copy dummy versions of the pdf build outputs, to make sure there is always something to import
-    cp "$PDF_DIST/pdf.mjs.dist" "$PDF_DIST/pdf.mjs"
-    cp "$PDF_DIST/prepareInMainThread.mjs.dist" "$PDF_DIST/prepareInMainThread.mjs"
+    cp "$PDF_DIST/pdf.js.dist" "$PDF_DIST/pdf.js"
+    cp "$PDF_DIST/prepareInMainThread.js.dist" "$PDF_DIST/prepareInMainThread.js"
 fi
 
 if [ "$CI" = 'true' ] ; then

frontend/eslint-local-rules/index.js

@@ -1,8 +1,6 @@
-const path = require('path')
-const fs = require('fs')
-const utils = require('eslint-plugin-vue/lib/utils/index.js')
-const matchingTranslationKeys = require('../src/common/eslint-local-rules/matchingTranslationKeys.js')
+import utils from 'eslint-plugin-vue/lib/utils/index.js'
+// noinspection ES6UnusedImports
+import createMatchingTranslationKeys from '../../common/eslint-local-rules/matchingTranslationKeys.js'
 
-module.exports = {
-  'matching-translation-keys': matchingTranslationKeys(path, utils, fs),
-}
+// noinspection JSUnusedGlobalSymbols
+export const matchingTranslationKeys = createMatchingTranslationKeys(utils)

frontend/eslint.config.mjs

@@ -77,7 +77,7 @@ export default [
         },
       ],
 
-      'local-rules/matching-translation-keys': [
+      'local-rules/matchingTranslationKeys': [
         'error',
         {
           ignoreKeysRegex:

frontend/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@ecamp3/frontend",
   "private": true,
+  "type": "module",
   "scripts": {
     "serve": "vite --host 0.0.0.0",
     "preview": "vite preview --host 0.0.0.0 --port 3000",

frontend/src/components/print/print-client/generatePdf.js

@@ -1,4 +1,4 @@
-import { prepareInMainThread } from '@/pdf/prepareInMainThread.mjs'
+import { prepareInMainThread } from '@/pdf/prepareInMainThread.js'
 import cloneDeep from 'lodash/cloneDeep.js'
 
 export const generatePdf = async (data) => {