[full-ci] Vite

[dschmidt]

Description

This makes oC Web build with Vite.

To test this you need to do docker-compose up -d.
OAuth2 Application in oC 10 and OIDC Client in oCIS are setup automatically now.

• pnpm vite or pnpm vite:ocis -> https://host.docker.internal:9201/
  -> currently uses a shitty workaround because of CORS issues when running web on different host ocis#5108
  -> possibly needs more dirs added to server.proxy in vite.config.ts
• pnpm vite:oc10 -> http://host.docker.internal:8081/

Motivation and Context

rollup builds are rather slow and we spend a lot of time waiting for builds during development.
vite supports Hot Module Reloading which makes changes instant. If there are errors they are shown in the browser and we don't need to switch to the terminal to notice them.
Moreover it's the standard tool in the Vue world by now.
It uses rollup as a bundling backend in production mode and has compatible plugin api, so we need to worry less about standard rollup plugins (because they are abstracted away by vite) and can still use more exotic rollup plugins.

Screenshots (if appropriate):

Open tasks:

• Fix asset loading
• Use a shared index.html for development and production: https://github.com/vbenjs/vite-plugin-html
• Implement oidc-callback.html
• Fix process.env.PACKAGE_VERSION replacement
• Figure out how to replace define/requirejs for external apps
  • during development, kinda works
    • fix external app loading
    • make sure development and production apps can be loaded
  • in production
  • try to load .js and .cjs files as commonjs modules, use dynamic import only for .mjs. Possibly worth accepting TypeScript variants of those extensions to ease development of external apps with vite
• wire up with docker setup
• Check which rollup plugins are still needed and remove others
• Port scripts in package.json
• Import ODS?
• Apply owncloud-sdk code mod? -> https://www.npmjs.com/package/vite-plugin-replace
• Remove explicit style imports in design-system: https://vitejs.dev/config/shared-options.html#css-preprocessoroptions
• Fix TypeError: r.pbkdf2Sync is not a function on file download (in oCIS?) -> https://github.com/sodatea/vite-plugin-node-stdlib-browser ?
• Fix preview app
• Log warning when @extend is being used in a component
• Fix self referencing in modules to be able to revert the currently applied workarounds Packages using self-referencing imports will fail to resolve ("moduleResolution": "node16" and package.json "exports") vitejs/vite#9731

Followup tasks:

• Reenable cssCodeSplit with Vue 3 (or when vue2 plugin supports it)
• Use vitest
• Make browserlist available as esbuild target, possibly with: Support browserlist as target option evanw/esbuild#324
• Port external apps to vite
  • ocis settings
  • web-app-gpx-viewer 🤓
  • web-app-skeleton
  • ....
  • ensure vue, vuex and luxon are not embedded in external apps
• Clean up config.json files (?)
  • Display proper error in case config is broken but exists #2826
  • Ship config.json.dist files for vite, so users can provide their own config.json without changes to files tracked in git
  • Check if we can get rid of some config.json files: Vite: Get rid of Vite specific config files #8707
    * [ ] Add a helper to initialize config.json files with .dist files if they are not present. Could be handled in stylevite.config.ts potentially
• Fix production rebuilds require docker-compose restart oc10. The dist folder is completely emptied and so our bind mounts break, dist cannot be mounted completely because of the file structure and where the php files need to be put
  -> do not merge dist folder with app.js and php files but have it in a separate sub folder
• Add gzipped assets to production builds
• enable history mode for pnpm vite / pnpm vite:ocis (not for oc10!)
• check bundle size: compare esbuild vs terser
• do not ship config.json in prod builds
• downloads in ocis dev server often fail, possibly because of the proxy -> get rid of proxy
• ensure typescript types are actually checked at some point

[update-docs]

Thanks for opening this pull request! The maintainers of this repository would appreciate it if you would create a changelog item based on your changes.

[fschade]

Just read it on my cell… ❤️ it… I give it a try tomorrow! Thank you 😘

[kulmann]

Please mount preview as external app, same as in config.json.sample-ocis. The thumbnailer in ocis supports more mimetypes than the preview-app defaults.

[kulmann]

sorry... not in the file I mentioned. Anyway, please add the preview as follows to the external apps and remove it from the apps array:

{
      "id": "preview",
      "path": "web-app-preview",
      "config": {
        "mimeTypes": ["image/tiff","image/bmp","image/x-ms-bmp"]
      }
    }

[kulmann]

I think this still has some rough edges for devs:

• router is in hash mode (that's controlled server side at the moment, directly in ocis via modification of the index.html)
• public links are announced by the server and as such are not with port 9201 when running in pnpm vite-dev-mode.

Both of those are not blockers for merging the PR. But it's really good that running the dev setup with vite is not documented by this PR, yet. Since the production build and build:w still work the same in the dev setup, and that is what we've documented, I see no blockers for this PR.

Love how you modernized a whole lot of things. And HMR of course. 😁 ❤️ Let's get this merged asap.

[sonarqubecloud]

SonarCloud Quality Gate failed.   

0 Bugs
0 Vulnerabilities
3 Security Hotspots
5 Code Smells

4.1% Coverage
0.0% Duplication

[dschmidt]

I think this still has some rough edges for devs:

• router is in hash mode (that's controlled server side at the moment, directly in ocis via modification of the index.html)

Good catch. Indeed, we need to add a base tag to enable it. Can be achieved with vite like this:

       {
          name: 'add-base',
          transformIndexHtml: {
            transform() {
              return [
                {
                  tag: 'base',
                  attrs: {
                    'href': '/'
                  }
                }
              ]
            }
          }
        }

I would just add it, but it's causing an endless redirect loop for me and I have no time to debug right now.

• public links are announced by the server and as such are not with port 9201 when running in pnpm vite-dev-mode.

Yeah, not sure, what to do about that ... I'm afraid our only way of dealing with this, is rewriting the urls client side. Everything else would have quite some complexity server side and I doubt the server team(s) would be happy.

Both of those are not blockers for merging the PR. But it's really good that running the dev setup with vite is not documented by this PR, yet. Since the production build and build:w still work the same in the dev setup, and that is what we've documented, I see no blockers for this PR.

Love how you modernized a whole lot of things. And HMR of course. grin heart Let's get this merged asap.

💪🏻

[kulmann]

@diocas @elizavetaRa do you still rebase to master? If yes then you might experience some issues with your other apps - please reach out, we'll help you fix issues. Also, please note that data.config.cdn is now data.buildConfig.cnd in the index.html file. Again, if you need help fixing stuff, please reach out.

[pascalwengerter]

Lovely! oC web, welcome to the wild 20s of the 21 century :D I'm {proud of,happy for} y'all