feat(appconfig): Add base path so module preloading works

[susnux]

For apps the config will generate a vite app config, so vite will try to preload all modules imported directly by the entry point.
To do so we have to configure the base path where to import the modules from (this is different from normal import, as module preloading works by adding the modules with their source URL to the document, meaning for normal imports the base url is not required (browsers support the relative imports), but for module preloading it is).

We can not set one base url, as we do not know it (we do not know the webroot of an app on build time).
So we need to use the runtime feature (currently hidden behind a the experimental flag).

[codecov]

Codecov Report

Merging #43 (3057128) into main (7af5c2a) will decrease coverage by 0.56%.
The diff coverage is 54.54%.

@@            Coverage Diff             @@
##             main      #43      +/-   ##
==========================================
- Coverage   80.26%   79.70%   -0.56%     
==========================================
  Files           8        8              
  Lines         537      547      +10     
  Branches       32       32              
==========================================
+ Hits          431      436       +5     
- Misses         74       79       +5     
  Partials       32       32              

Files	Coverage Δ
lib/appConfig.ts	78.94% <54.54%> (-2.04%)	⬇️

[ShGKme]

Makes sense, replacement for __webpack_public_path__.

So we need to use the runtime feature (currently hidden behind a the experimental flag).

I guess it is safe as this experimental feature is already in use by many things, including Nuxt.

[raimund-schluessler]

I get this error now with the migration to vite in nextcloud/tasks#2321

rendering chunks (5)...[vite:css-post] { runtime: "OC.filePath('tasks', '', 'img/tasks-dark.svg')" } is not supported for assets in css files: img/tasks-dark.svg
✓ built in 18.82s
error during build:
Error: { runtime: "OC.filePath('tasks', '', 'img/tasks-dark.svg')" } is not supported for assets in css files: img/tasks-dark.svg
    at toOutputFilePathWithoutRuntime (file:///home/raimund/nextcloud/apps2/tasks/node_modules/vite/dist/node/chunks/dep-68d1a114.js:48446:23)
    at file:///home/raimund/nextcloud/apps2/tasks/node_modules/vite/dist/node/chunks/dep-68d1a114.js:38522:28
    at String.replace (<anonymous>)
    at resolveAssetUrlsInCss (file:///home/raimund/nextcloud/apps2/tasks/node_modules/vite/dist/node/chunks/dep-68d1a114.js:38519:37)
    at Object.renderChunk (file:///home/raimund/nextcloud/apps2/tasks/node_modules/vite/dist/node/chunks/dep-68d1a114.js:38548:32)
    at file:///home/raimund/nextcloud/apps2/tasks/node_modules/rollup/dist/es/shared/node-entry.js:25544:40
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[raimund-schluessler]

I get this error now with the migration to vite in nextcloud/tasks#2321

rendering chunks (5)...[vite:css-post] { runtime: "OC.filePath('tasks', '', 'img/tasks-dark.svg')" } is not supported for assets in css files: img/tasks-dark.svg
✓ built in 18.82s
error during build:
Error: { runtime: "OC.filePath('tasks', '', 'img/tasks-dark.svg')" } is not supported for assets in css files: img/tasks-dark.svg
    at toOutputFilePathWithoutRuntime (file:///home/raimund/nextcloud/apps2/tasks/node_modules/vite/dist/node/chunks/dep-68d1a114.js:48446:23)
    at file:///home/raimund/nextcloud/apps2/tasks/node_modules/vite/dist/node/chunks/dep-68d1a114.js:38522:28
    at String.replace (<anonymous>)
    at resolveAssetUrlsInCss (file:///home/raimund/nextcloud/apps2/tasks/node_modules/vite/dist/node/chunks/dep-68d1a114.js:38519:37)
    at Object.renderChunk (file:///home/raimund/nextcloud/apps2/tasks/node_modules/vite/dist/node/chunks/dep-68d1a114.js:38548:32)
    at file:///home/raimund/nextcloud/apps2/tasks/node_modules/rollup/dist/es/shared/node-entry.js:25544:40
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

The reason was a a file in the style section of a vue file like so background-image: url('../../../img/color_picker.svg');. I worked around it by using a vue component as the background image. It's not the solution for the underlying problem, but it works for me. See https://github.com/nextcloud/tasks/pull/2321/files#diff-df9e78dfbc2f67a9738794e3f781ed6a3bf7097a307ebbf24cb4a67c308db48fL197