Vue3 migration using create vue

[didair]

No description provided.

[andersju]

Nice work! A few things:

• README.md in the project root needs to be updated, specifically this part, to reflect whatever is necessary to do now:

npm install --prefix service/vue-client/
yarn --cwd service/vue-client/ build

For development, you can run yarn --cwd service/vue-client/ build --mode=development instead; this lets you use e.g. Vue Devtools.

• Looks like package-lock.json needs to be updated:

~/s/s/s/vue3-client (vue3_migration_using_create_vue *$=) npm ci
npm ERR! Cannot read property '@fortawesome/fontawesome-svg-core' of undefined

• Should probably mention target (or tested) Node.js version somewhere. It's currently Node.js 14 on our servers, which has been EOL for a while. Maybe time to move to latest LTS (Node.js 18).

• Do you plan to port the unit and e2e tests from old vue-client?

Some testing after having run python3 -m pipeline.harvest -f uniarts && python3 -m service.swepub and then started the Vue 3 client with npm run dev:

http://127.0.0.1:8080/process/uniarts/status results in an error under "Avvisade poster", "Ett fel inträffade vid förhandsgranskning: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data". In the console there are some warnings and an error:

[Vue warn]: Property "error" was accessed during render but is not defined on instance. 
  at <HarvestStatus key=1 > 
  at <AsyncComponentWrapper key=1 > 
  at <Process query= 
Object {  }
 params= 
Object { source: "uniarts", service: "status", subservice: "" }
 onVnodeUnmounted=fn<onVnodeUnmounted>  ... > 
  at <RouterView> 
  at <App> runtime-core.esm-bundler.js:41:12
[Vue warn]: Property "formatUTCDate" was accessed during render but is not defined on instance. 
  at <HarvestSummary harvestData= 
Object { completed_timestamp: "2023-08-01T08:18:06.791920+00:00", deleted_so_far: 0, failed_sets: 0, failures: 0, harvest_id: "9519d64d-b593-4f8e-8749-945ae1a0bf59", harvest_retries: 0, indexed_so_far: 381, prevented: 0, rejected: 18, source_code: "uniarts", … }
 > 
  at <AsyncComponentWrapper harvestData= 
Object { completed_timestamp: "2023-08-01T08:18:06.791920+00:00", deleted_so_far: 0, failed_sets: 0, failures: 0, harvest_id: "9519d64d-b593-4f8e-8749-945ae1a0bf59", harvest_retries: 0, indexed_so_far: 381, prevented: 0, rejected: 18, source_code: "uniarts", … }
 > 
  at <HarvestLatest key=0 > 
  at <AsyncComponentWrapper key=0 > 
  at <KeepAlive> 
  at <HarvestStatus key=1 > 
  at <AsyncComponentWrapper key=1 > 
  at <Process query= 
Object {  }
 params= 
Object { source: "uniarts", service: "status", subservice: "" }
 onVnodeUnmounted=fn<onVnodeUnmounted>  ... > 
  at <RouterView> 
  at <App> runtime-core.esm-bundler.js:41:12
[Vue warn]: Property "toLocale" was accessed during render but is not defined on instance. 
  at <HarvestSummary harvestData= 
Object { completed_timestamp: "2023-08-01T08:18:06.791920+00:00", deleted_so_far: 0, failed_sets: 0, failures: 0, harvest_id: "9519d64d-b593-4f8e-8749-945ae1a0bf59", harvest_retries: 0, indexed_so_far: 381, prevented: 0, rejected: 18, source_code: "uniarts", … }
 > 
  at <AsyncComponentWrapper harvestData= 
Object { completed_timestamp: "2023-08-01T08:18:06.791920+00:00", deleted_so_far: 0, failed_sets: 0, failures: 0, harvest_id: "9519d64d-b593-4f8e-8749-945ae1a0bf59", harvest_retries: 0, indexed_so_far: 381, prevented: 0, rejected: 18, source_code: "uniarts", … }
 > 
  at <HarvestLatest key=0 > 
  at <AsyncComponentWrapper key=0 > 
  at <KeepAlive> 
  at <HarvestStatus key=1 > 
  at <AsyncComponentWrapper key=1 > 
  at <Process query= 
Object {  }
 params= 
Object { source: "uniarts", service: "status", subservice: "" }
 onVnodeUnmounted=fn<onVnodeUnmounted>  ... > 
  at <RouterView> 
  at <App> runtime-core.esm-bundler.js:41:12
[Vue warn]: Property "toLocale" was accessed during render but is not defined on instance. 
  at <HarvestSummary harvestData= 
Object { completed_timestamp: "2023-08-01T08:18:06.791920+00:00", deleted_so_far: 0, failed_sets: 0, failures: 0, harvest_id: "9519d64d-b593-4f8e-8749-945ae1a0bf59", harvest_retries: 0, indexed_so_far: 381, prevented: 0, rejected: 18, source_code: "uniarts", … }
 > 
  at <AsyncComponentWrapper harvestData= 
Object { completed_timestamp: "2023-08-01T08:18:06.791920+00:00", deleted_so_far: 0, failed_sets: 0, failures: 0, harvest_id: "9519d64d-b593-4f8e-8749-945ae1a0bf59", harvest_retries: 0, indexed_so_far: 381, prevented: 0, rejected: 18, source_code: "uniarts", … }
 > 
  at <HarvestLatest key=0 > 
  at <AsyncComponentWrapper key=0 > 
  at <KeepAlive> 
  at <HarvestStatus key=1 > 
  at <AsyncComponentWrapper key=1 > 
  at <Process query= 
Object {  }
 params= 
Object { source: "uniarts", service: "status", subservice: "" }
 onVnodeUnmounted=fn<onVnodeUnmounted>  ... > 
  at <RouterView> 
  at <App> runtime-core.esm-bundler.js:41:12
Uncaught (in promise) TypeError: fail is not a function
    fetchData HarvestRejected.vue:97
    promise callback*fetchData HarvestRejected.vue:97
    getHitCount ExportMixin.vue:86
    mounted ExportMixin.vue:162
    createHook runtime-core.esm-bundler.js:2675
    callWithErrorHandling runtime-core.esm-bundler.js:158
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:166
    __weh runtime-core.esm-bundler.js:2655
    flushPostFlushCbs runtime-core.esm-bundler.js:325
    flushJobs runtime-core.esm-bundler.js:363
    promise callback*queueFlush runtime-core.esm-bundler.js:270
    queueJob runtime-core.esm-bundler.js:264
    effect runtime-core.esm-bundler.js:5810
    triggerEffect reactivity.esm-bundler.js:373
    triggerEffects reactivity.esm-bundler.js:363
    triggerRefValue reactivity.esm-bundler.js:974
    set value reactivity.esm-bundler.js:1018
    setup runtime-core.esm-bundler.js:2365
    promise callback*setup runtime-core.esm-bundler.js:2364
    callWithErrorHandling runtime-core.esm-bundler.js:158
    setupStatefulComponent runtime-core.esm-bundler.js:7236
    setupComponent runtime-core.esm-bundler.js:7197
    mountComponent runtime-core.esm-bundler.js:5599
    processComponent runtime-core.esm-bundler.js:5565
    patch runtime-core.esm-bundler.js:5040
    mountChildren runtime-core.esm-bundler.js:5284
    mountElement runtime-core.esm-bundler.js:5191
    processElement runtime-core.esm-bundler.js:5156
    patch runtime-core.esm-bundler.js:5028
    mountChildren runtime-core.esm-bundler.js:5284
    mountElement runtime-core.esm-bundler.js:5191
    processElement runtime-core.esm-bundler.js:5156
    patch runtime-core.esm-bundler.js:5028
    patchBlockChildren runtime-core.esm-bundler.js:5427
    patchElement runtime-core.esm-bundler.js:5319
    processElement runtime-core.esm-bundler.js:5167
    patch runtime-core.esm-bundler.js:5028
    componentUpdateFn runtime-core.esm-bundler.js:5773
    run reactivity.esm-bundler.js:178
    update runtime-core.esm-bundler.js:5814
    callWithErrorHandling runtime-core.esm-bundler.js:158
    flushJobs runtime-core.esm-bundler.js:357
    promise callback*queueFlush runtime-core.esm-bundler.js:270
    queueJob runtime-core.esm-bundler.js:264
    effect runtime-core.esm-bundler.js:5810
    triggerEffect reactivity.esm-bundler.js:373
    triggerEffects reactivity.esm-bundler.js:363
    trigger reactivity.esm-bundler.js:335

Go to http://127.0.0.1:8080/process -> select "Stockholms konstnärliga högskola" -> Visa -> select anything (DOI, ISSN, ..) -> Förhandsgranska export. This causes an error:

11:06:34 AM [vite] Internal server error: <template v-for> key should be placed on the <template> tag.
  Plugin: vite:vue
  File: /home/andjen/swepub/swepub-redux/service/vue3-client/src/components/process/PreviewCard.vue:119:29
  117|                              class="links">
  118|                      <template v-for="(value, name) in added_oa">
  119|                        <span :key="`li-add_oa-${name}`">
     |                               ^
  120|                          {{ name }}:
  121|                          <a
      at createCompilerError (/home/andjen/swepub/swepub-redux/service/vue3-client/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:18:17)
      at /home/andjen/swepub/swepub-redux/service/vue3-client/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3571:19
      at Array.some (<anonymous>)
      at /home/andjen/swepub/swepub-redux/service/vue3-client/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3566:25
      at Array.<anonymous> (/home/andjen/swepub/swepub-redux/service/vue3-client/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3712:7)
      at traverseNode (/home/andjen/swepub/swepub-redux/service/vue3-client/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2057:15)
      at traverseChildren (/home/andjen/swepub/swepub-redux/service/vue3-client/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2009:5)
      at traverseNode (/home/andjen/swepub/swepub-redux/service/vue3-client/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2051:7)
      at traverseChildren (/home/andjen/swepub/swepub-redux/service/vue3-client/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2009:5)
      at traverseNode (/home/andjen/swepub/swepub-redux/service/vue3-client/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2051:7) (x2)