Migrate to vite / vitest / vitepress for building

[susnux]

Created because of this comment: #2959 (comment)

---

Based on this comment I migrated the project to use vite for bundling / building (without noticing this is already done in #2959).

• Migrate to vite for building (so dependency on webpack anymore)
• Migrate to vitest for unit tests (instead of jest)
• Migrate to vue-docgen + vitepress for documentation
• Migrate cypress to use vite (and updated cypress)

One problem with this migration is the missing live preview of the Nc components, as vitepress is using vue3 but we are still using vue2. This leads dependency issues.
(I got it working locally but it requires experimental node features (import maps) to mount vue2 components within vitepress vue3).

[skjnldsv]

https://app.netlify.com/sites/nextcloud-vue-components/deploys/63874efdd546a70009f9b500

1:41:10 PM: failed to load config from /opt/build/repo/styleguide/.vitepress/config.mjs
1:41:10 PM: build error:
1:41:10 PM:  Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vitepress' imported from
/opt/build/repo/styleguide/.vitepress/config.mjs.timestamp-1669812070118.mjs

[susnux]

Oh yes, I only tested the live preview. Looks like the build is broken because vue-docgen does not escape < and vitepress interprets <...> as vue components.

[susnux]

@skjnldsv fixed the issue. So now everything works, even styleguide build.

[raimund-schluessler]

The styleguide preview somehow doesn't work yet.

[susnux]

The styleguide preview somehow doesn't work yet.

Do you get any error message? As for me it works

voko.mp4

[raimund-schluessler]

I didnt' try the local build, I just checked the browser preview here https://deploy-preview-3529--nextcloud-vue-components.netlify.app/

[susnux]

I do not know how netlify is configured, where does it try to load the index.html from?
As all files are saved into styleguide/build, meaning it looks like this

styleguide/
    build/
        assets/
        index.html

[raimund-schluessler]

I don

I do not know how netlify is configured, where does it try to load the index.html from? As all files are saved into styleguide/build, meaning it looks like this

styleguide/
    build/
        assets/
        index.html

I don't know either. But the deploy log here https://app.netlify.com/sites/nextcloud-vue-components/deploys/638e134d9ffb950008585e30 says this:

...
4:51:40 PM: vitepress v1.0.0-alpha.29
4:51:40 PM: - building client + server bundles...
4:51:45 PM: ✓ building client + server bundles...
4:51:45 PM: build error:
4:51:45 PM:  file:///opt/build/repo/styleguide/.vitepress/.temp/plugin-vue_export-helper.1460a1c7.js:1
4:51:45 PM: import { initDirectivesForSSR, ssrContextKey, warn as warn$1, Fragment, Static, Comment, Text, mergeProps, createVNode, ssrUtils, createApp } from "vue";
4:51:45 PM:                                                                                          ^^^^
4:51:45 PM: SyntaxError: The requested module 'vue' does not provide an export named 'Text'
4:51:45 PM:     at ModuleJob._instantiate (internal/modules/esm/module_job.js:124:21)
4:51:45 PM:     at async ModuleJob.run (internal/modules/esm/module_job.js:179:5)
4:51:45 PM:     at async Loader.import (internal/modules/esm/loader.js:178:24)
4:51:45 PM:     at async build (file:///opt/build/repo/styleguide/node_modules/vitepress/dist/node/serve-fcdc8868.js:42002:24)
4:51:45 PM: ​
4:51:45 PM: ────────────────────────────────────────────────────────────────
4:51:45 PM:   "build.command" failed                                        
4:51:45 PM: ────────────────────────────────────────────────────────────────
4:51:45 PM: ​
4:51:45 PM:   Error message
4:51:45 PM: Creating deploy upload records
4:51:45 PM:   Command failed with exit code 1: npm ci && npm run styleguide:build (https://ntl.fyi/exit-code-1)
4:51:45 PM: ​
4:51:45 PM:   Error location
4:51:45 PM:   In Build command from Netlify app:
4:51:45 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
4:51:45 PM:   npm ci && npm run styleguide:build
4:51:45 PM: ​
4:51:45 PM:   Resolved config
4:51:45 PM:   build:
4:51:45 PM:     command: npm ci && npm run styleguide:build
4:51:45 PM:     commandOrigin: ui
4:51:45 PM:     environment:
4:51:45 PM:       - NODE_VERSION
4:51:45 PM:       - NPM_VERSION
4:51:45 PM:       - REVIEW_ID
4:51:45 PM:     publish: /opt/build/repo/styleguide
4:51:45 PM:     publishOrigin: ui
4:51:45 PM: Caching artifacts
...

[susnux]

@raimund-schluessler "Fixed" that, it was indeed the netlify config which seems to be set up to take the whole styleguide directory.
I added a temporary workaround for this
https://deploy-preview-3529--nextcloud-vue-components.netlify.app/build/

[raimund-schluessler]

@raimund-schluessler "Fixed" that, it was indeed the netlify config which seems to be set up to take the whole styleguide directory. I added a temporary workaround for this https://deploy-preview-3529--nextcloud-vue-components.netlify.app/build/

Nice, I can see the styleguide now. But somehow the components have no live preview, as it is in the current docs. Can this be enabled?

[susnux]

But somehow the components have no live preview, as it is in the current docs. Can this be enabled?

As stated above the problem is vitepress uses Vue 3, but we are still using Vue 2.
So we would have to mount Vue2 components within Vue 3, which is possible (I already wrote a wrapper for this),
but the main problem is we have to compile the vue 2 components within the browser which leads to versions clashes of @vue/sfc-compiler because vitepress already loads the vue 3 version of it.

I was able to fix this but that required Node import maps which are experimental, so I will have to look for an other solution until we can port all components to vue 3 :)

[raimund-schluessler]

@susnux Thanks for the explanation. I guess this has to wait until we migrated to vue3 then. Would be interesting to see how #2637 works on top of it.

[raimund-schluessler]

Vite4 was just released: https://vitejs.dev/blog/announcing-vite4.html
I guess we should directly use this release, once we are able to upgrade.

[susnux]

I think I will close this PR as the migration does not make much sense while using vue 2.
But as said above it might be interesting to see this on top of the vue3 branch so I merged it for demonstation purpose.

[susnux]

#3565