feat(xo): POC XO Core, XO 6, XO Lite

[ByScripts]

Description

Here is a first POC for the incoming unified XO 6 / XO Lite using a common XO Core library.

Projects are placed in:

• @xen-orchestra/web-core for XO Core
• @xen-orchestra/web-lite for XO Lite
• @xen-orchestra/web for XO 6

Vue 3.4

The projects use Vue 3.4.0 Beta, as the final version will soon be available.

It's compatible with 3.3, so if for any reason we need to revert to 3.3 it will be easy.

XO Core

The Core in meant to be used in XO Lite and XO 6 only and thus has no building step.

The library exports its sources from lib (ie. a component will be imported from @xen-orchestra/web-core/components/...), and will be then compiled by XO 6 and XO Core.

For a better DX, tsconfig.app.json files of XO 6 and Lite are configured to alias @xen-orchestra/web-core to ../web-core/lib/*, this allow completions, HMR etc. to work flawlessly.

Linting

For the moment, the linting is done by a local ESLint configuration, using @antfu/eslint-config (which use the new Flat Config format, introduced in 2022).

XO Core exports its configuration as /eslint, so XO 6 and XO Lite import/re-export it from @xen-orchestra/web-core/eslint

All the code formatting is done by ESLint too, via eslint --fix

Each project have both scripts yarn lint and yarn lint:fix

I also added eslint --fix as a lint-staged config in each package.json

Layouts

I introduced a layouts directory to prevent having a global single layout in App.vue

PostCSS

I reworked the colors variable, based on the new Design System. Colors should now be more aligned with Figma design (using color blending with white/black as Clemence did).

I've also done a better job of separating CSS into different files:

• @xen-orchestra/web-core/lib/assets/css/_colors.pcss
• @xen-orchestra/web-core/lib/assets/css/_context.pcss
• @xen-orchestra/web-core/lib/assets/css/_fonts.pcss
• @xen-orchestra/web-core/lib/assets/css/_reset.pcss
• @xen-orchestra/web-core/lib/assets/css/_shadows.pcss
• @xen-orchestra/web-core/lib/assets/css/_typography.pcss
• @xen-orchestra/web-core/lib/assets/css/base.pcss

Routing

I configured the Vite plugin unplugin-vue-router.

This allow to have an automatic path-based routing with typing support.

Pages will be places in src/pages/* and stories will be places in src/stories/* and will have a prefix (to be defined).

Caveats

I'm unable to make linting to work correctly with the current monorepo configuration.

For the moment, I created a .prettierignore file at root to ignore these 3 projects.

I also made a lot of trials with ESLint with no success yet.

If you need to commit files on this branch, you'll need to bypass lint-staged to be able to commit. (Since it runs eslint on each staged file with absolute path, it seems to ignore project's eslint.config.js file).

BTW, I detected a bug introduced in Vue 3.4 Alpha 2 and opened a ticket which has beed fixed quickly.

There's still a lot of work to be done, but I hope this is a good starting point.

Checklist

• Commit
  • Title follows commit conventions
  • Reference the relevant issue (Fixes #007, See xoa-support#42, See https://...)
  • If bug fix, add Introduced by
• Changelog
  • If visible by XOA users, add changelog entry
  • Update "Packages to release" in CHANGELOG.unreleased.md
• PR
  • If UI changes, add screenshots
  • If not finished or not tested, open as Draft

[julien-f]

Does lint-staged also run the rules defined in the root package.json?

https://github.com/lint-staged/lint-staged

[ByScripts]

Draft out of date.